/* =============================================================
   Zülfi’s — gemeinsames Seitenlayout
   Kopf, Hero, Abschnittsmuster, Formular, Footer, Rechtstexte.
   Wird von Hauptseite und Catering geladen, setzt tokens.css
   und components.css voraus.
   ============================================================= */
.shell--schmal{max-width:860px}
.kopf{margin-bottom:clamp(2rem,4vw,3.25rem)}
.kopf .lead{margin-top:.9rem}
.hinweis-zeile{
  margin-top:clamp(1.5rem,3vw,2.25rem);font-size:var(--fs-sm);
  color:var(--text-muted);text-align:center;text-wrap:balance;
}
.bild-credit{
  margin-top:.5rem;font-size:var(--fs-xs);color:var(--text-muted);
  letter-spacing:.02em;
}

/* ============ Kopfbereich ============ */
.nav{
  position:sticky;top:0;z-index:120;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.nav.ist-gescrollt{box-shadow:0 12px 30px -24px rgba(20,47,78,.65)}
@supports not (backdrop-filter:blur(1px)){ .nav{background:var(--surface)} }

.nav__inner{display:flex;align-items:center;gap:1.25rem;min-height:var(--nav-h)}
.nav__logo{flex:0 0 auto;display:flex;align-items:center}
.nav__logo img{height:var(--logo-h);width:auto}

.nav__menu{display:none;flex:1 1 auto;align-items:center;justify-content:space-between;gap:1.5rem}
.nav__list{display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.5rem)}
.nav__list a{
  display:inline-block;padding:.45rem .25rem;text-decoration:none;
  font-family:var(--font-head);font-size:.95rem;font-weight:600;
  color:var(--text);border-bottom:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.nav__list a:hover{color:var(--brand);border-bottom-color:var(--accent)}
.nav__actions{display:flex;align-items:center;gap:.85rem;flex:0 0 auto}
.nav__tel{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--font-head);font-weight:700;font-size:.92rem;
  color:var(--text);font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease);
}
.nav__tel:hover{color:var(--brand)}
.nav__tel svg{flex:0 0 auto;color:var(--accent)}

.nav__burger{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:none;border:1px solid var(--line);
  border-radius:12px;cursor:pointer;
}
.nav__burger-box{position:relative;display:block;width:22px;height:14px}
.nav__burger-box span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:var(--text);transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.nav__burger-box span:nth-child(1){top:0}
.nav__burger-box span:nth-child(2){top:6px}
.nav__burger-box span:nth-child(3){top:12px}
.nav__burger[aria-expanded="true"] .nav__burger-box span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] .nav__burger-box span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] .nav__burger-box span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobilmenue{
  position:fixed;inset:0;z-index:110;
  padding:calc(var(--nav-h) + 56px) var(--gutter) 2rem;
  background:var(--surface);overflow-y:auto;
}
.mobilmenue[hidden]{display:none}
.mobilmenue__inner{display:flex;flex-direction:column;gap:.75rem;max-width:520px;margin-inline:auto}
.mobilmenue__liste{display:flex;flex-direction:column;margin-bottom:1rem}
.mobilmenue__liste a{
  display:block;padding:1rem .25rem;text-decoration:none;
  font-family:var(--font-head);font-size:1.25rem;font-weight:700;
  border-bottom:1px solid var(--line);
}
body.menue-offen{overflow:hidden}

@media (min-width:1000px){
  .nav__menu{display:flex}
  .nav__burger{display:none}
  .mobilmenue{display:none!important}
}
@media (max-width:1180px) and (min-width:1000px){
  .nav__tel-text{display:none}
  .nav__tel{width:44px;height:44px;justify-content:center;border:1px solid var(--line);border-radius:var(--radius-pill)}
}

/* ============ Hero ============ */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,5vw,4rem)}
.hero__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero__text .h1{margin-bottom:1rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.5rem,3vw,2rem)}
.hero__bild picture{
  display:block;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--navy-deep);box-shadow:var(--shadow-card);
}
.hero__bild img{width:100%;aspect-ratio:3/2;object-fit:cover}

.fakten{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin-top:clamp(2.5rem,5vw,4rem);
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;
}
.fakten li{
  display:flex;flex-direction:column;gap:.2rem;align-items:center;
  padding:1.25rem 1rem;background:var(--surface);text-align:center;
}
.fakten strong{
  font-family:var(--font-head);font-weight:800;font-size:clamp(1.15rem,.9rem + 1vw,1.55rem);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.fakten span{font-size:var(--fs-sm);color:var(--text-muted)}

@media (min-width:860px){
  .hero__grid{grid-template-columns:1.02fr .98fr}
  .fakten{grid-template-columns:repeat(4,1fr)}
}

/* ============ Referenzlogos ============ */
/* Schmales Band, deshalb die kleine Stufe. */
.logos{padding-block:var(--luft-s)}
.logos__titel{
  text-align:center;font-family:var(--font-head);font-size:var(--fs-xs);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:1.75rem;
}
.logos__reihe{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.5rem,4vw,3.25rem);
}
.logos__reihe img{
  height:clamp(22px,3vw,30px);width:auto;
  /* Graustufen: Die Reihe soll eine Reihe sein und nicht sechs Markenauftritte.
     Das rote DB-Signet und das Orange im effectiv-Logo stehen damit auch nicht
     neben der einen Akzentfarbe des Projekts. Die Dateien selbst bleiben
     unverändert — gefiltert wird nur die Darstellung. */
  filter:grayscale(1);opacity:.68;
}
/* Nicht jedes Logo füllt seinen Rahmen gleich aus. Das DB-Signet ist fast
   quadratisch (1,43:1) und stünde neben der Volocopter-Wortmarke (6,56:1) bei
   gleicher Höhe auf 43 statt 197 px Breite. Das effectiv-Logo trägt unter der
   Wortmarke noch eine Zeile und ringsum Luft, die Schrift selbst füllt kaum
   die halbe Höhe. Beide bekommen deshalb mehr Höhe: gleiche optische Fläche
   statt gleicher Zahl. */
.logos__marke img{height:clamp(32px,4.4vw,44px)}
.logos__wort{
  font-family:var(--font-head);font-weight:700;font-size:clamp(.95rem,1.4vw,1.1rem);
  color:var(--text-muted);letter-spacing:.01em;
}
.logos__hinweis{
  max-width:62ch;margin:1.75rem auto 0;text-align:center;
  font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5;
}

/* ============ Schritte ============ */
.schritte{display:grid;gap:clamp(1.25rem,2.5vw,2rem);counter-reset:s}
.schritte li{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(1.4rem,2.5vw,2rem);
}
.schritte--gross li{border-top:3px solid var(--accent)}
.schritte__nr{
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:1.6rem;color:var(--curry-700);line-height:1;margin-bottom:.75rem;
  font-variant-numeric:tabular-nums;
}
.schritte .h3{margin-bottom:.45rem}
@media (min-width:760px){ .schritte{grid-template-columns:repeat(3,1fr)} }

.klaeren{
  margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.4rem,2.6vw,2rem);
  background:var(--surface-alt);border-radius:var(--radius-lg);
  border:1px solid var(--line);
}
.section--alt .klaeren{background:var(--surface)}
.klaeren .h3{margin-bottom:1rem}
.klaeren__liste{display:grid;gap:.6rem}
.klaeren__liste li{
  padding-left:1.6rem;position:relative;font-size:var(--fs-sm);
  color:var(--text-muted);
}
.klaeren__liste li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:8px;height:8px;border-radius:50%;background:var(--accent);
}
.klaeren__liste strong{color:var(--text)}
@media (min-width:700px){ .klaeren__liste{grid-template-columns:repeat(2,1fr);column-gap:2rem} }

/* ============ Speisen ============ */
.speisen__grid{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.speise .h3{margin:1rem 0 .4rem}
@media (min-width:760px){ .speisen__grid{grid-template-columns:repeat(3,1fr)} }

/* ============ Anlässe ============ */
.anlaesse{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem)}
.anlass{
  display:flex;flex-direction:column;
  padding:clamp(1.4rem,2.6vw,2rem);text-decoration:none;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.anlass:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--accent)}
.anlass .h3{margin-bottom:.5rem}
.anlass__mehr{
  margin-top:auto;padding-top:1.1rem;
  font-family:var(--font-head);font-weight:700;font-size:.9rem;color:#A45804;
}
.anlass:hover .anlass__mehr span{display:inline-block;transform:translateX(3px)}
@media (min-width:640px){ .anlaesse{grid-template-columns:repeat(2,1fr)} }

/* ============ Galerie ============ */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,1.5vw,1rem)}
.galerie__bild{
  display:block;width:100%;padding:0;border:0;cursor:zoom-in;
  background:var(--navy-deep);border-radius:var(--radius);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.galerie__bild img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:opacity .3s var(--ease)}
.galerie__bild:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.galerie__bild:hover img{opacity:.88}
@media (min-width:620px){ .galerie{grid-template-columns:repeat(4,1fr)} }

.lightbox{
  max-width:min(96vw,1100px);max-height:94vh;width:100%;
  padding:0;border:0;background:transparent;overflow:visible;
}
.lightbox::backdrop{background:rgba(14,35,64,.92)}
.lightbox__inhalt{position:relative}
.lightbox__inhalt img{
  width:100%;max-height:82vh;object-fit:contain;
  border-radius:var(--radius);background:var(--navy-deep);
}
.lightbox__inhalt figcaption{
  margin-top:.85rem;text-align:center;color:var(--cream);
  font-size:var(--fs-sm);
}
.lightbox__zu,.lightbox__pfeil{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,247,239,.14);color:var(--cream);
  font-size:1.8rem;line-height:1;
  transition:background-color .2s var(--ease);
}
.lightbox__zu:hover,.lightbox__pfeil:hover{background:rgba(255,247,239,.3)}
.lightbox__zu{top:-56px;right:0}
.lightbox__pfeil{top:50%;transform:translateY(-50%)}
.lightbox__pfeil--zurueck{left:-56px}
.lightbox__pfeil--vor{right:-56px}
@media (max-width:860px){
  .lightbox__zu{top:-52px;right:4px}
  .lightbox__pfeil--zurueck{left:4px;background:rgba(14,35,64,.7)}
  .lightbox__pfeil--vor{right:4px;background:rgba(14,35,64,.7)}
}

/* ============ Über uns ============ */
.ueber{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.ueber__bild picture{
  display:block;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--navy-deep);box-shadow:var(--shadow-card);
}
.ueber__bild img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ueber__text .h2{margin-bottom:1rem}
.ueber__text p + p{margin-top:.9rem}
.ueber__text .btn{margin-top:1.5rem}
@media (min-width:900px){ .ueber{grid-template-columns:.95fr 1.05fr} }

/* ============ FAQ ============ */
.faq{display:grid;gap:.75rem}
.faq details{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.25rem;cursor:pointer;list-style:none;
  font-family:var(--font-head);font-weight:600;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:14px;height:14px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq summary:hover{background:var(--surface-alt)}
.faq__text{padding:0 1.25rem 1.25rem}
.faq__text p{color:var(--text-muted);font-size:var(--fs-sm);max-width:68ch}

/* ============ Formular ============ */
.formular-karte{
  padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
}
.formular__intro{margin-bottom:1.75rem;max-width:62ch}
.formular__raster{display:grid;gap:0 1.25rem}
.feld--voll{grid-column:1/-1}
.kasten{
  display:flex!important;align-items:center;gap:.6rem;
  margin-top:.5rem;font-weight:400!important;cursor:pointer;
  min-height:24px;
}
.kasten input{
  width:24px!important;min-height:24px!important;height:24px;
  flex:0 0 auto;padding:0!important;accent-color:var(--orange);appearance:auto;
}
.formular button[type="submit"]{margin-top:.75rem}
.formular__recht{margin-top:1rem;text-align:center}
.formular__recht a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.formular__status{
  margin-top:1.25rem;padding:1rem 1.15rem;border-radius:var(--radius);
  font-size:var(--fs-sm);font-weight:600;
  background:rgba(179,53,15,.08);color:#B3350F;border:1px solid rgba(179,53,15,.3);
}
.formular__status[hidden]{display:none}
.formular__status.ist-ok{background:rgba(20,47,78,.06);color:var(--text);border-color:var(--line)}
.direkt{
  margin-top:1.75rem;text-align:center;font-size:var(--fs-sm);color:var(--text-muted);
}
.direkt a{
  color:var(--text);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;
}
@media (min-width:680px){ .formular__raster{grid-template-columns:1fr 1fr} }

/* ============ Footer ============ */
.footer{
  background:var(--navy);color:var(--cream);
  padding-block:clamp(2.5rem,5vw,4rem) 1.5rem;
}
.footer__inner{display:grid;gap:2rem}
.footer__marke{font-family:var(--font-head);font-weight:800;font-size:1.3rem;margin-bottom:.75rem}
.footer__adresse{font-style:normal;color:rgba(255,247,239,.78);font-size:var(--fs-sm);line-height:1.7}
.footer__kontakt{margin-top:.75rem;font-size:var(--fs-sm);line-height:1.9}
.footer__kontakt a{display:inline-block;min-height:24px;padding-block:.22rem;
  color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.footer__kontakt a:hover{color:var(--orange-hi)}
.footer__titel{
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-hi);
  margin-bottom:.9rem;
}
.footer__liste{display:grid;gap:.55rem;font-size:var(--fs-sm)}
.footer__liste a{display:inline-block;min-height:24px;padding-block:.22rem;
  color:rgba(255,247,239,.82);text-decoration:none}
.footer__liste a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.footer__fuss{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;
  border-top:1px solid rgba(255,247,239,.16);
  font-size:var(--fs-xs);color:rgba(255,247,239,.68);
}
.footer__fuss .muted{color:rgba(255,247,239,.56)}
.footer__fuss p + p{margin-top:.35rem}
@media (min-width:760px){ .footer__inner{grid-template-columns:1.2fr .9fr .9fr;gap:3rem} }

/* ============ Floating-CTA ============ */
.floating{
  position:fixed;right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));z-index:100;
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:52px;padding:0 1.25rem;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--font-head);font-weight:700;font-size:.92rem;
  letter-spacing:.03em;text-decoration:none;
  border-radius:var(--radius-pill);box-shadow:var(--shadow-float);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.floating.ist-sichtbar{opacity:1;visibility:visible;transform:none}
.floating:hover{background:var(--orange-hi)}
@media (min-width:1000px){ .floating{display:none} }

/* =============================================================
   Rechtstexte und schlichte Unterseiten
   ============================================================= */
.rechtskopf{padding-block:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem)}
.rechtskopf .h1{margin-bottom:.75rem}
.rechtstext{padding-bottom:clamp(3rem,6vw,5rem)}
.rechtstext h2{
  font-family:var(--font-head);font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  font-weight:700;letter-spacing:var(--ls-head);line-height:1.3;
  margin:clamp(2.25rem,4vw,3rem) 0 .85rem;
}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{
  font-family:var(--font-head);font-size:1.02rem;font-weight:600;
  margin:1.5rem 0 .5rem;
}
/* Höchstens 65 Zeichen je Zeile — darüber verliert das Auge die Zeile. */
.rechtstext p,.rechtstext li{color:var(--text-muted);max-width:65ch}
.rechtstext p + p{margin-top:.85rem}
.rechtstext ul{margin:.85rem 0 0;display:grid;gap:.4rem}
.rechtstext ul li{position:relative;padding-left:1.4rem}
.rechtstext ul li::before{
  content:"";position:absolute;left:.15rem;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.rechtstext a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.rechtstext strong{color:var(--text)}
.rechtstext address{font-style:normal;color:var(--text-muted);line-height:1.8;margin-top:.5rem}
.rechtstext dl{margin-top:.85rem;display:grid;gap:.35rem}
.rechtstext dt{font-family:var(--font-head);font-weight:600;color:var(--text);font-size:var(--fs-sm)}
.rechtstext dd{margin:0 0 .5rem;color:var(--text-muted)}

.inhaltsverzeichnis{
  margin:1.75rem 0 0;padding:1.25rem 1.5rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.inhaltsverzeichnis p{
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:.75rem;
}
.inhaltsverzeichnis ol{counter-reset:iv;display:grid;gap:.5rem}
.inhaltsverzeichnis li{counter-increment:iv;font-size:var(--fs-sm)}
.inhaltsverzeichnis li::before{content:counter(iv) ". ";color:var(--text-muted)}
/* Die Überschrift des Verzeichnisses ist eine h2, damit die
   Gliederungsebenen stimmen; gestaltet wird sie wie die frühere
   Textzeile. */
.inhaltsverzeichnis h2{
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  margin:0 0 .75rem;
}
/* Mindestens 24 px Zielfläche (WCAG 2.5.8). Als reine Textzeile maßen die
   Verweise 20 px. */
.inhaltsverzeichnis a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);
  display:inline-flex;align-items:center;min-height:24px}
.inhaltsverzeichnis a:hover{border-bottom-color:var(--accent)}

.pruefen{
  margin-top:.85rem;padding:.9rem 1.1rem;
  background:rgba(239,125,0,.08);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:var(--fs-sm);
}
.pruefen strong{display:block;margin-bottom:.2rem}

/* Höchstens 65 Zeichen je Zeile. Auf einem breiten Schirm lief die
   Zeile vorher über 130 Zeichen — das liest niemand mehr am Stück. */
.stand-zeile{margin-top:clamp(2.5rem,5vw,3.5rem);font-size:var(--fs-xs);
  color:var(--text-muted);max-width:65ch}
.zurueck{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.75rem;
  font-family:var(--font-head);font-weight:700;font-size:.92rem;
  color:var(--text);text-decoration:none;
}
.zurueck:hover{color:var(--brand)}

/* ---- Danke- und Fehlerseite ---- */
.mitte{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-block:clamp(4rem,10vw,8rem);
}
.mitte .h1{margin-bottom:1rem;max-width:22ch}
.mitte .lead{margin-inline:auto}
.mitte__knoepfe{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.25rem}
.mitte__zeichen{
  display:flex;align-items:center;justify-content:center;
  width:76px;height:76px;margin-bottom:1.75rem;
  background:var(--accent);border-radius:50%;color:var(--on-accent);
}
.mitte__zeichen svg{width:38px;height:38px}
.mitte__liste{
  margin-top:2.5rem;padding:1.5rem;text-align:left;max-width:460px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
}
.mitte__liste p{
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.9rem;
}
.liste-links{display:grid;gap:.6rem;font-size:var(--fs-sm)}
.liste-links a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.liste-links a:hover{border-bottom-color:var(--accent)}
/* ============ Ohne JavaScript ============ */
html:not(.js) [data-reveal]{opacity:1;transform:none}

/* ============ Druck ============ */
@media print{
  .floating,.mobilmenue,.galerie,.lightbox,.family-bar{display:none!important}
  .faq details{break-inside:avoid}
  .faq__text{display:block!important}
}


/* ---------- Brotkrume ----------
   Sichtbar und als Liste ausgezeichnet, damit sie dasselbe sagt wie die
   BreadcrumbList in den strukturierten Daten. Ohne sichtbare Entsprechung
   wäre die Auszeichnung eine Behauptung gegenüber der Suchmaschine. */
.brotkrume{padding-block:clamp(1rem,2.5vw,1.5rem) 0}
.brotkrume ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;
  list-style:none;margin:0;padding:0;
  font-family:var(--font-head);font-size:var(--fs-sm);color:var(--text-muted);
}
.brotkrume li + li::before{content:"›";margin-right:.6rem;color:var(--text-muted)}
/* Mindestens 24 px hoch (WCAG 2.5.8) — als reine Textzeile maßen die
   Verweise 19 px. */
.brotkrume a,.brotkrume [aria-current="page"]{
  display:inline-flex;align-items:center;min-height:24px;
  color:var(--text-muted);text-underline-offset:3px;
}
.brotkrume a:hover{color:var(--navy)}
.brotkrume [aria-current="page"]{color:var(--navy);font-weight:700}

/* ---------- Zonentabelle der Regionsseiten ---------- */
.zonentabelle{
  width:100%;border-collapse:collapse;margin-top:clamp(1.5rem,3vw,2rem);
  font-size:var(--fs-sm);
}
.zonentabelle th,.zonentabelle td{
  text-align:left;padding:.85rem .6rem;
  border-bottom:1px solid var(--line);vertical-align:top;
}
.zonentabelle thead th{
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
}
.zonentabelle tbody th{font-weight:700;color:var(--text)}
.zonentabelle td:last-child,.zonentabelle th:last-child{text-align:right}
@media (max-width:559px){
  /* Auf schmalen Displays steht die Zone unter dem Ort statt daneben. */
  .zonentabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .zonentabelle tr{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;
    padding-block:.85rem;border-bottom:1px solid var(--line)}
  .zonentabelle th,.zonentabelle td{border:0;padding:0}
  .zonentabelle tbody th{grid-column:1;font-size:1rem}
  .zonentabelle td:nth-of-type(1){grid-column:2;text-align:right;color:var(--text-muted)}
  .zonentabelle td:nth-of-type(2){grid-column:1;color:var(--text-muted)}
  .zonentabelle td:nth-of-type(3){grid-column:2;text-align:right;font-weight:700}
}

/* ---------- Weiterführende Liste ---------- */
.weiterliste{
  display:grid;gap:.75rem;margin:clamp(1.25rem,3vw,2rem) 0 0;padding:0;
  list-style:none;
}
.weiterliste a{display:inline-flex;align-items:center;min-height:44px}


/* ---------- Regionszeile im Footer ----------
   Dezent, aber mit beschreibenden Ankertexten: „Karlsruhe" allein wäre
   zu wenig, deshalb trägt jeder Verweis im title-Attribut nichts, sondern
   der sichtbare Text den Ortsnamen und die Überschrift den Zusammenhang. */
.footer__regionen{
  padding-top:clamp(1.25rem,3vw,2rem);
  border-top:1px solid var(--line-dark,rgba(255,255,255,.14));
}
.footer__orte{
  display:flex;flex-wrap:wrap;gap:.35rem .75rem;
  margin:.5rem 0 0;font-size:var(--fs-sm);
}
.footer__orte a{display:inline-flex;align-items:center;min-height:24px}