/* ============================================================
   SCHLOSSEREI JANECEK — gemeinsames Design-System
   „Werkstatt trifft Salon"
   Eine Datei für alle Seiten: Farben, Typo-Skala, Abstands-Raster,
   Header, Footer, Buttons, Kicker, Karten, FAQ, Rechtsseiten.
   Seiten-spezifisches (Hero, Karussell, Team …) bleibt in der Seite.
   ============================================================ */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Farben (Logo-Gelb-System, Stand 31.07.2026) */
  --bg:             #F1EDE4;   /* Seitenhintergrund, Kalkziegel hell */
  --bg-soft:        #E9E4D7;   /* Sektionswechsel */
  --card:           #F8F5EE;   /* Karten & Flächen */
  --ink:            #22211D;   /* Text */
  --ink-soft:       #5C5950;   /* Text gedämpft */
  --steel:          #1E1D19;   /* dunkle Sektionen, Header-Drawer, Footer */
  --cream:          #F4F0E5;   /* Schrift auf dunkel */
  --yellow:         #FFFF00;   /* Flächen, Icons, Linien */
  --yellow-rgb:     255,255,0; /* dieselbe Farbe als RGB – für halbtransparente Schein-/Schatteneffekte.
                                 Muss bei einer Farbänderung mitgeändert werden. */
  --yellow-deep:    #B8A600;   /* NUR für Flächen/Rahmen im Hover-Zustand.
                                 Nicht als Textfarbe auf hellem Grund verwenden:
                                 Kontrast nur 2,12:1, WCAG AA verlangt 4,5:1.
                                 Brandbook-Regel: Gelb nur als Fläche, Rahmen,
                                 Icon oder Text auf Dunkel. */
  --yellow-soft:    #F5F2A0;   /* Tint */
  --emergency:      #B3261E;   /* Notruf-Signalrot */
  --emergency-deep: #8F1E18;
  --check:          #2F6B2F;   /* Häkchen-Grün, Kontrast 5,51:1 auf --bg */
  --line:           #DCD5C6;   /* Haarlinien */
  --line-dark:      rgba(244,240,229,.16); /* Haarlinien auf dunkel */
  --social-size:   29px;      /* Social-Logos Footer, beide gleich groß (Instagram-Minimum) */

  /* Schrift */
  --font-head: 'Playfair Display', 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, serif;

  /* Typo-Skala (fluid) */
  --fs-body: 17px;
  --fs-small: .92rem;
  --fs-tiny: .8rem;
  --fs-lead: clamp(1.05rem, .95rem + .5vw, 1.25rem);
  --fs-h1: clamp(2.2rem, 1.3rem + 3vw, 3.7rem);
  --fs-h2: clamp(1.85rem, 1.15rem + 2.3vw, 2.9rem);
  --fs-h3: 1.22rem;
  --fs-display: clamp(5rem, 3rem + 10vw, 11rem);  /* 404 */
  --lh-body: 1.7;
  --lh-head: 1.1;

  /* Abstands-Raster */
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 20px;
  --s-4: 28px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;
  --section-y: clamp(64px, 5vw + 32px, 112px);   /* vertikaler Sektionsabstand */

  /* Layout */
  --wrap: 1160px;
  --wrap-narrow: 760px;
  --wrap-prose: 72ch;
  --gutter: clamp(20px, 2.2vw, 28px);   /* äußerer Seitenrand, überall gleich */
  --nav-h: 96px;
  --logo-h: 90px;

  /* Form */
  --radius: 4px;
  --radius-s: 3px;
  --shadow: 0 14px 40px rgba(34,33,29,.10);
  --shadow-lift: 0 22px 55px rgba(34,33,29,.16);
  --shadow-yellow: 0 8px 24px rgba(var(--yellow-rgb), .35);
  --shadow-yellow-lift: 0 14px 32px rgba(var(--yellow-rgb), .45);
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .3s;
  --t-med: .45s;
}
@media (max-width: 900px) {
  :root { --nav-h: 76px; --logo-h: 64px; }
}

/* ---------- 2. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top muss exakt die Header-Hoehe sein (.nav hat height: var(--nav-h)).
   Jeder Zuschlag waere ein Spalt zwischen Header-Unterkante und Zielabschnitt, in dem
   beim Ankersprung der vorherige Abschnitt durchschaut. */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--ink); background: var(--bg); overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Fokusrahmen auf dunklem Grund hell, sonst unsichtbar (Tastatur-Navigation) */
.site-footer :focus-visible, .section--dark :focus-visible { outline-color: var(--cream); }
/* "Zum Inhalt springen": unsichtbar, erscheint nur bei Tastatur-Fokus */
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 200; background: var(--ink); color: var(--cream); padding: var(--s-1) var(--s-2); border-radius: 6px; }
.skip-link:focus { top: var(--s-1); }

/* ---------- 3. Typografie ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: var(--lh-head); letter-spacing: .005em; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { max-width: var(--wrap-prose); }
.lead { font-size: var(--fs-lead); font-style: italic; color: var(--ink-soft); max-width: 36em; }
strong { font-weight: 600; }
.muted { color: var(--ink-soft); }

/* Kicker: Vorspann-Zeile über Überschriften */
.kicker {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: var(--s-4);
  font-family: var(--font-body); font-size: var(--fs-tiny); font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); max-width: none;
}
.kicker::before { content: ""; width: 42px; height: 2px; background: var(--yellow); flex-shrink: 0; }

/* Text-Links im Fließtext */
.link, .faq-list .answer a { color: var(--ink); font-weight: 600; }
/* Marker-Streifen statt Unterstreichung: Gelb als Flaeche (Brandbook), denn eine
   gelbe Linie auf hellem Grund ist mit ~1,1:1 Kontrast praktisch unsichtbar.
   Beim Hover fuellt sich der Streifen - Ink auf Gelb ist gut lesbar. */
.link, .faq-list .answer a, .text-toggle {
  text-decoration: none;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .38em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--t-fast) var(--ease);
}
.link:hover, .link:focus-visible,
.faq-list .answer a:hover, .faq-list .answer a:focus-visible,
.text-toggle:hover, .text-toggle:focus-visible { background-size: 100% 100%; }

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
section, .section { padding: var(--section-y) 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--steel); color: var(--cream); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark .kicker { color: var(--yellow); }
.section--flush-top { padding-top: 0; }

/* Sektionskopf: zentriert, ruhig */
.sec-head { max-width: var(--wrap-narrow); margin: 0 auto var(--s-6); text-align: center; }
.sec-head--wide { max-width: 1000px; }
.sec-head--left { margin-left: 0; text-align: left; }
.sec-head .kicker { justify-content: center; }
.sec-head--left .kicker { justify-content: flex-start; }
.sec-head .kicker::after { content: ""; width: 42px; height: 2px; background: var(--yellow); flex-shrink: 0; }
.sec-head--left .kicker::after { display: none; }
.sec-head > p:not(.kicker) { color: var(--ink-soft); margin: var(--s-4) auto 0; font-size: 1.05rem; line-height: 1.6; }
.sec-head--left > p:not(.kicker) { margin-left: 0; }
.section--dark .sec-head > p:not(.kicker) { color: var(--cream); opacity: .8; }

/* Seitenkopf für Seiten ohne Foto-Hero */
.page-head { padding: calc(var(--nav-h) + var(--s-6)) 0 var(--s-5); }
.page-head .sec-head { margin-bottom: 0; }
.page-head h1 { font-size: var(--fs-h2); }

/* ---------- 5. Header & Navigation ----------
   Ein Header für alle Seiten. Navigation immer als Listen-Drawer
   (bewusste Entscheidung des Kunden — nie horizontale Leiste). */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(241,237,228,.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(34,33,29,.08);
  transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
/* Variante: über einem Foto-Hero transparent, nach dem Scrollen fest */
.site-header--overlay:not(.scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

.nav {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-3);
}
.logo { display: flex; align-items: center; flex-shrink: 0; margin-right: auto; }
.logo img { height: var(--logo-h); width: auto; transition: height var(--t-fast) var(--ease); }

.nav-notruf-logo { display: flex; align-items: center; flex-shrink: 0; transition: transform .25s var(--ease); }
/* Muss immer kleiner als das Logo (--logo-h) bleiben -- Vorgabe des Grafikers (17.09.2026).
   36/28px ist die Ursprungsgröße von vor dem Redesign-Feintuning. Nur <360px ist neu:
   behebt einen Überlauf bei sehr schmalen Handys (unter 360px war 28px bereits zu breit
   für Logo + Menü nebeneinander). */
.nav-notruf-logo img { height: 36px; width: auto; }
.nav-notruf-logo:hover { transform: translateY(-2px); }
@media (max-width: 480px) { .nav-notruf-logo img { height: 28px; } }
@media (max-width: 360px) { .nav-notruf-logo img { height: 22px; } }

/* Zurück-Link (Rechtsseiten, 404) — sitzt dort, wo sonst der Hamburger ist */
.nav-back {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; color: var(--ink);
  padding: 8px 0; position: relative; white-space: nowrap;
}
.nav-back::after { content: ""; position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; background: var(--yellow); transition: width .35s var(--ease); }
.nav-back:hover::after { width: 100%; }
.site-header--overlay:not(.scrolled) .nav-back { color: var(--cream); }

/* Hamburger */
.nav-toggle {
  display: block; background: none; border: 0; cursor: pointer; flex-shrink: 0;
  width: 32px; height: 24px; position: relative; z-index: 110; padding: 0; margin-left: var(--s-1);
}
.nav-toggle span {
  display: block; position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.site-header--overlay:not(.scrolled) .nav-toggle span { background: var(--cream); }
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { top: 22px; }
.nav-toggle.open span { background: var(--cream); }
.nav-toggle.open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* Dropdown-Karte, rechts an den Hamburger angedockt -- kein Vollbild-Drawer mehr. */
.nav-links {
  list-style: none; position: fixed; top: calc(var(--nav-h) - 8px); right: var(--gutter); left: auto; z-index: 105;
  width: min(260px, calc(100% - var(--gutter) * 2));
  background: var(--steel); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: var(--s-2) var(--s-4);
  transform-origin: top right;
  transform: translateY(-8px) scale(.97); opacity: 0; visibility: hidden;
  overflow-y: auto; max-height: calc(100vh - var(--nav-h) - var(--s-4));
  transition: transform .3s var(--ease), opacity var(--t-fast) var(--ease), visibility 0s linear .3s;
}
.nav-links.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; transition: transform .3s var(--ease), opacity var(--t-fast) var(--ease); }
.nav-links li { border-bottom: 1px solid var(--line-dark); }
.nav-links li:last-child { border-bottom: 0; }
.nav-links a {
  display: block; padding: 14px 0; font-family: var(--font-body); font-size: 1rem; color: var(--cream);
  transition: color var(--t-fast) var(--ease), padding-left .35s var(--ease);
}
.nav-links a:hover { color: var(--yellow); padding-left: 10px; }
/* Drawer offen: Header immer fest, damit Logo/Hamburger lesbar bleiben */
.site-header.menu-open { background: var(--steel); box-shadow: none; }
.site-header.menu-open .nav-back { color: var(--cream); }
.site-header.menu-open .nav-toggle span { background: var(--cream); }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem; line-height: 1.2;
  padding: 13px 26px; border-radius: var(--radius-s); border: 1px solid transparent; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-yellow { background: var(--yellow); color: var(--ink); box-shadow: var(--shadow-yellow); }
.btn-yellow:hover { transform: translateY(-2px); box-shadow: var(--shadow-yellow-lift); }
.btn-ghost { border-color: rgba(244,240,229,.55); color: var(--cream); font-weight: 500; }
.btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-2px); }
.btn-ghost.dark { border-color: rgba(34,33,29,.35); color: var(--ink); }
.btn-ghost.dark:hover { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }

/* Notruf-Badge (Bild) */
.not-phone {
  position: relative; display: inline-block; border-radius: var(--radius);
  transition: transform .4s var(--ease);
}
.not-phone img { height: 76px; width: auto; border-radius: var(--radius); }
.not-phone:hover { transform: translateY(-4px); }

/* ---------- 7. Bausteine ---------- */
/* Foto mit ruhigem Zoom und gelber Kante */
.photo { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.photo img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 2s var(--ease); }
.photo:hover img { transform: scale(1.06); }
.photo::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.photo:hover::after { transform: scaleX(1); }

/* Zweispalter: Foto + Text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
.split > * { min-width: 0; }
.split .txt p { color: var(--ink-soft); margin-bottom: var(--s-4); }
.split .txt p strong { color: var(--ink); }
.split .txt h2 { margin-bottom: var(--s-4); }
.split .txt .kicker { margin-bottom: var(--s-3); }
/* Wechselt Foto/Text auf die andere Seite - nur ab 900px, siehe Punkt 10 */
.split--reverse .photo { order: 2; }
.split--reverse .txt { order: 1; }

/* Zeitleiste */
.timeline { list-style: none; margin-top: var(--s-5); }
.timeline li { display: grid; grid-template-columns: 148px 1fr; gap: var(--s-3); padding: 14px 0; align-items: baseline; border-bottom: 1px solid var(--line); transition: padding-left .35s var(--ease); }
.timeline li:hover { padding-left: 10px; }
.timeline .year { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.timeline p { color: var(--ink-soft); font-size: .97rem; }

/* Team-Karten */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.team-card .team-photo { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3/4; box-shadow: var(--shadow); }
.team-card .team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.team-card.interactive:hover .team-photo img, .team-card.interactive.open .team-photo img { transform: scale(1.05); }
.team-card .team-meta { padding-top: 14px; position: relative; text-align: center; }
.team-card .team-meta strong { display: block; font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; }
.team-card .team-meta span { display: block; color: var(--ink-soft); font-size: .88rem; margin-top: 2px; }
.team-card.interactive { cursor: pointer; }
.team-card.interactive .team-meta::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--font-head); font-size: 1.3rem; color: var(--ink-soft); transition: transform .35s var(--ease); }
.team-card.interactive.open .team-meta::after { transform: rotate(45deg); }
.team-card .answer { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; color: var(--ink-soft); font-size: .93rem; text-align: center; transition: max-height .5s var(--ease), opacity .35s var(--ease), padding-top .35s var(--ease); }
.team-card.interactive.open .answer { max-height: 220px; opacity: 1; padding-top: 12px; }
@media (hover: hover) and (pointer: fine) {
  .team-card.interactive:hover .team-meta::after { transform: rotate(45deg); }
  .team-card.interactive:hover .answer { max-height: 220px; opacity: 1; padding-top: 12px; }
}
.team-card .answer .quote { display: block; margin-top: 10px; color: var(--ink); font-family: 'Special Elite', 'Courier New', monospace; font-size: .88rem; }
.team-card .answer .quote .caret { display: inline-block; color: var(--ink-soft); animation: caret-blink 1s steps(2) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* Vollbild-Foto mit Text unten (Team-Banner) */
.banner-full { position: relative; height: 74vh; min-height: 460px; overflow: hidden; isolation: isolate; }
.banner-full__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.banner-full::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20,19,16,.78) 0%, rgba(20,19,16,.35) 42%, rgba(20,19,16,0) 62%); }
.banner-full__overlay { position: relative; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--s-3); max-width: var(--wrap); margin: 0 auto; padding: 5% var(--gutter); }
.banner-full__overlay p { color: #fff; font-weight: 600; font-family: var(--font-head); font-size: clamp(1.15rem, 1rem + 1.4vw, 1.7rem); line-height: 1.45; max-width: 34em; }

/* Banner mit Überblendung: 3 Bild-Ebenen, Ebene 1 ist die Basis, 2 und 3 blenden darüber.
   Bilder pro Banner setzen: .banner-full__bg:nth-child(1..3) { background-image: ... } */
.banner-full--fade { --fade-cycle: 21s; }
.banner-full--fade .banner-full__bg:nth-child(2) { opacity: 0; animation: bf-fade-2 var(--fade-cycle) infinite; }
.banner-full--fade .banner-full__bg:nth-child(3) { opacity: 0; animation: bf-fade-3 var(--fade-cycle) infinite; }
@keyframes bf-fade-2 { 0%, 28% { opacity: 0; } 33.33%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes bf-fade-3 { 0%, 61.66% { opacity: 0; } 66.66%, 95% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .banner-full--fade .banner-full__bg:nth-child(n+2) { animation: none; opacity: 0; }
}

/* Zurueck-nach-oben-Pfeil: schwebt ueber dem Inhalt (position: fixed), blendet sich
   erst nach einer Bildschirmhoehe ein. Optik bewusst identisch zu den Karussell-
   Pfeilen, damit es kein zweites Button-Aussehen auf der Seite gibt.
   Bleibt unter dem Header (z-index 100) und dem Menue (105), damit es nichts verdeckt. */
.to-top {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 40;
  width: 42px; height: 42px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease),
              visibility var(--t-med) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--yellow); background: var(--yellow); transform: translateY(-2px); }
.to-top svg { width: 18px; height: 18px; stroke: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-of-type { border-top: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 22px 48px 22px 6px; font-family: var(--font-head); font-weight: 500; font-size: 1.12rem; position: relative; transition: color var(--t-fast) var(--ease), padding-left .35s var(--ease); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-head); font-size: 1.6rem; color: var(--ink-soft); transition: transform .35s var(--ease); }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list summary:hover { padding-left: 14px; }
.faq-list .answer { padding: 0 6px 26px; color: var(--ink-soft); max-width: 62em; }
/* FAQ-Gruppen: Zwischenueberschrift je Thema. Die id der Gruppe (z.B. #faq-notdienst)
   ist Sprungziel fuer Links von anderen Stellen; scroll-padding-top (Basis) haelt sie
   unter dem Sticky-Header sichtbar. Am Handy weniger Abstand zwischen den Gruppen. */
.faq-group { max-width: 800px; margin: 0 auto; }
.faq-group + .faq-group { margin-top: var(--s-5); }
.faq-group > h3 { font-size: 1.4rem; margin: 0 0 var(--s-2) 6px; }
@media (min-width: 900px) { .faq-group + .faq-group { margin-top: var(--s-6); } }

/* Text-Toggle: "+ mehr lesen" mitten im Fliesstext (z.B. Geschichte) */
/* Foto in einer FAQ-Antwort. Hier gibt es keine Hoehenbegrenzung wie in den
   Sticky-Kacheln, deshalb darf es groesser sein. */
.inline-foto { margin: var(--s-3) 0 0; max-width: 420px; }
.inline-foto img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.text-toggle { display: inline-block; background: none; border: none; padding: 0; margin: var(--s-3) 0 var(--s-4); font: inherit; font-weight: 400; color: var(--ink); cursor: pointer; }

/* Hinweis-Panel (ohne Seitenstrich) */
.notice { background: var(--bg-soft); border-radius: var(--radius); padding: var(--s-3) var(--s-4); font-size: var(--fs-small); color: var(--ink-soft); max-width: none; }
.notice strong { color: var(--ink); }

/* ---------- 8. Rechtsseiten (Impressum, Datenschutz) ---------- */
.legal { padding-bottom: var(--section-y); }
.legal .wrap--narrow { max-width: var(--wrap-narrow); }
.legal h1 { margin-bottom: var(--s-5); }
.legal-list { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; column-gap: var(--s-4); border-top: 1px solid var(--line); }
.legal-list dt, .legal-list dd { padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.legal-list dt { font-size: var(--fs-tiny); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; padding-top: 18px; }
.legal-list dd { color: var(--ink); overflow-wrap: anywhere; }
.legal-notes { margin-top: var(--s-5); color: var(--ink-soft); font-size: var(--fs-small); }
.legal-notes p + p { margin-top: var(--s-2); }
.prose { max-width: var(--wrap-prose); }
.prose h2 { font-size: 1.45rem; margin: var(--s-6) 0 var(--s-2); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); }
.prose p + p { margin-top: var(--s-2); }
.prose h3 { font-size: 1.1rem; margin: var(--s-4) 0 var(--s-2); }
.prose p { overflow-wrap: anywhere; }
.prose .notice { margin-bottom: var(--s-6); }

/* ---------- 9. Footer ---------- */
.site-footer { background: var(--steel); color: rgba(244,240,229,.65); padding: var(--s-6) 0 var(--s-5); font-size: var(--fs-small); }
.foot-grid { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }   /* immer 3 Zeilen: Name · Siegel+Social · Links */
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
/* KEO-Gütesiegel: weißes Schild, weil das Logo innen transparent ist */
.seal { display: block; width: auto; background: #fff; padding: 4px 6px; border-radius: 6px; }
.seal--foot { height: 48px; }
/* Siegel + Social-Icons bleiben als Gruppe zusammen – Desktop wie Handy, kein Umbruch dazwischen */
.foot-badges { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--s-1); }
.foot-badges .seal--foot { margin-right: var(--s-1); }
.foot-social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; transition: opacity var(--t-fast) var(--ease); }
.foot-social:hover, .foot-social:focus-visible { opacity: .8; }
.foot-social img { width: var(--social-size); height: var(--social-size); }
.seal--faq { height: 56px; margin-top: var(--s-2); border: 1px solid var(--line); }
.foot-logo { font-family: var(--font-head); font-size: 1.12rem; color: var(--cream); }
.foot-logo em { font-style: normal; color: var(--yellow); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.foot-links a { transition: color var(--t-fast) var(--ease); }
.foot-links a:hover { color: var(--yellow); }

/* ---------- 10. Responsive ---------- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s-5); }
  .split .photo { order: -1; }
  .split .photo img { aspect-ratio: 16/10; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .timeline li { grid-template-columns: 96px 1fr; gap: var(--s-2); }
  .legal-list { grid-template-columns: 1fr; }
  .legal-list dt { border-bottom: 0; padding-bottom: 0; }
  .legal-list dd { padding-top: 4px; }
  .banner-full { height: 56vh; min-height: 340px; }
  .not-phone img { height: 64px; }
}

/* Vollbild-Banner am Handy: Foto und Text untereinander statt überlagert.
   Grund: Ein 16:9-Gruppenfoto in einem hochformatigen Banner wird seitlich so
   stark beschnitten, dass die Hälfte des Teams wegfällt - und der helle Text
   lag auf den Gesichtern. Jetzt volles Foto oben, Text darunter auf Dunkel. */
@media (max-width: 700px) {
  .banner-full { height: auto; min-height: 0; isolation: auto; }
  .banner-full::after { display: none; }
  .banner-full__bg {
    position: relative; inset: auto; z-index: 0;
    width: 100%; aspect-ratio: 16/9;
  }
  .banner-full--fade .banner-full__bg:nth-child(n+2) { position: absolute; top: 0; left: 0; }
  .banner-full__overlay {
    height: auto; background: var(--steel);
    padding: var(--s-4) var(--gutter) var(--s-5);
  }
  .banner-full__overlay p { color: var(--cream); }
}
@media (max-width: 640px) {
  .nav-back { font-size: 0; }
  .nav-back::before { content: "←"; font-size: 1.5rem; line-height: 1; display: block; }
  .nav-back::after { display: none; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .photo img, .photo::after, .team-card .team-photo img { transition: none; }
}

/* Sanfte Seitenwechsel (native View Transitions, Chrome 126+/Safari 18.2+; sonst normales Laden) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}