/* Layout und Komponenten. Werte NUR ueber Tokens aus tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--c-kreide);
  color: var(--c-graphit);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.65;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-graphit); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(226, 178, 58, .45); }
.ic { flex: none; }

h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; color: var(--c-graphit); }
h1 { font-size: var(--t-h1); font-weight: 800; font-stretch: 115%; line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: var(--t-h2); font-weight: 700; font-stretch: 108%; line-height: 1.12; letter-spacing: -.018em; }
h3 { font-size: var(--t-h3); font-weight: 600; font-stretch: 100%; line-height: 1.25; letter-spacing: -.01em; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--rand); }
.sektion { padding-block: var(--s-sektion); }
.sektion--sand { background: var(--c-sand); }
.sektion--papier { background: var(--c-papier); border-block: 1px solid var(--c-linie); }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--c-graphit); }
.text-stein { color: var(--c-stein); }
.mono { font-family: var(--f-mono); font-weight: 500; font-size: var(--t-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.satz { max-width: 66ch; }

.kicker {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-mono); font-weight: 500; font-size: var(--t-kicker);
  text-transform: uppercase; letter-spacing: .12em; color: var(--c-stein);
  margin-bottom: var(--s-4);
}
.kicker::before { content: ""; width: 16px; height: 2px; background: var(--c-ocker); }

.skip-link { position: absolute; left: var(--s-4); top: -60px; z-index: 100; background: var(--c-graphit); color: var(--c-kreide); padding: var(--s-3) var(--s-4); border-radius: var(--r-btn); }
.skip-link:focus { top: var(--s-3); }

/* ---------- Luecke (nur Entwurf): fehlende Pflichtangabe sichtbar machen ---------- */
.luecke {
  display: inline-block; padding: 0 6px; border: 1.5px dashed var(--c-ocker-600);
  background: var(--c-ocker-50); color: var(--c-graphit); border-radius: var(--r-chip);
  font-family: var(--f-mono); font-size: .8em; letter-spacing: .02em; line-height: 1.6;
}
.sektion--dunkel .luecke, .fuss .luecke, .kopfleiste .luecke { color: var(--c-graphit); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 14px 24px; border-radius: var(--r-btn);
  font-family: var(--f-text); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 0;
  transition: background-color var(--d-btn) var(--ease), box-shadow var(--d-btn) var(--ease), color var(--d-btn) var(--ease);
}
.btn .ic-pfeil { transition: transform var(--d-btn) var(--ease); }
.btn:hover .ic-pfeil { transform: translateX(3px); }
.btn--primaer { background: var(--c-ocker); color: var(--c-graphit); }
.btn--primaer:hover { background: var(--c-ocker-600); box-shadow: inset 0 -2px 0 var(--c-graphit); text-decoration: none; }
.btn--sekundaer { background: transparent; color: var(--c-graphit); box-shadow: inset 0 0 0 1.5px var(--c-graphit); }
.btn--sekundaer:hover { background: var(--c-papier); box-shadow: inset 0 0 0 1.5px var(--c-graphit), inset 0 -3px 0 var(--c-graphit); text-decoration: none; }
.btn--hell { background: transparent; color: var(--c-kreide); box-shadow: inset 0 0 0 1.5px rgba(244, 241, 234, .5); }
.btn--hell:hover { box-shadow: inset 0 0 0 1.5px var(--c-kreide); text-decoration: none; }
.btn--breit { width: 100%; }
.btn[aria-disabled="true"] { cursor: not-allowed; opacity: .8; }

/* ---------- Kopfleiste + Kopf ---------- */
.kopfleiste { background: var(--c-asphalt); color: var(--c-kreide); font-size: .875rem; }
.kopfleiste .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 36px; }
.kopfleiste a { color: var(--c-kreide); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; }
.kopfleiste__ort { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-kreide-auf-dunkel); }

.kopf { position: sticky; top: 0; z-index: 50; background: var(--c-kreide); border-bottom: 1px solid var(--c-linie); border-radius: var(--r-nav); }
.kopf .container { display: flex; align-items: center; gap: var(--s-5); min-height: 68px; }
.wortmarke { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--c-graphit); margin-right: auto; }
.wm { display: inline-flex; align-items: center; gap: 10px; }
.wm__zeichen { width: 40px; height: 28px; flex: none; }
.wm__text { font-family: var(--f-display); font-size: 1.2rem; line-height: 1; letter-spacing: -.015em; white-space: nowrap; }
.wm__a { font-weight: 800; font-stretch: 112%; }
.wm__b { font-weight: 600; font-stretch: 100%; color: var(--c-stein); }
.wm--hell .wm__text { color: var(--c-kreide); }
.wm--hell .wm__b { color: var(--c-kreide-auf-dunkel); }
.nav { display: flex; gap: var(--s-5); }
.nav a { text-decoration: none; font-weight: 500; font-size: .95rem; padding-block: var(--s-2); border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--c-ocker); }
.kopf__cta { white-space: nowrap; }
.burger { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--c-graphit); border-radius: var(--r-btn); cursor: pointer; }
.burger .ic-zu { display: none; }
.burger[aria-expanded="true"] .ic-auf { display: none; }
.burger[aria-expanded="true"] .ic-zu { display: block; }
.mobilmenue { display: none; }

@media (max-width: 960px) {
  .nav, .kopf__cta { display: none; }
  .burger { display: inline-flex; }
  .mobilmenue[data-offen="true"] {
    display: block; position: fixed; inset: 105px 0 0 0; z-index: 49;
    background: var(--c-kreide); padding: var(--s-5) var(--rand); overflow-y: auto;
    border-top: 1px solid var(--c-linie);
  }
  .mobilmenue a.mobilmenue__link { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--c-linie); font-family: var(--f-display); font-weight: 700; font-stretch: 108%; font-size: 1.35rem; text-decoration: none; }
  .mobilmenue .btn { margin-top: var(--s-5); }
}
@media (max-width: 600px) {
  .kopfleiste__ort span { display: none; }
  .wm__text { font-size: 1.05rem; } .wm__zeichen { width: 34px; height: 24px; }
  .mobilmenue[data-offen="true"] { inset: 101px 0 0 0; }
}

/* ---------- Brotkrumen ---------- */
.brotkrumen { padding-top: var(--s-5); font-size: .875rem; color: var(--c-stein); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.brotkrumen li { display: inline-flex; align-items: center; gap: var(--s-2); }
.brotkrumen li + li::before { content: "›"; color: var(--c-stein); }
.brotkrumen [aria-current] { color: var(--c-graphit); font-weight: 500; }

/* ---------- Hero (17.10.: netzweites Symbolbild, Text auf Verlauf) ---------- */
.hero { --hb: clamp(220px, 34svh, 380px); position: relative; isolation: isolate; overflow: hidden; background: var(--c-asphalt); color: var(--c-kreide); min-height: clamp(560px, calc(100svh - 112px), 820px); display: flex; align-items: center; }
.hero__bild { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bild picture { position: absolute; inset: -10% 0 0 0; translate: 0 var(--hero-py, 0px); }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 62%; transform-origin: 72% 60%; }
.js .hero__bild img { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09) translate(-1.5%, 1%); } }
.hero__bild::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(33, 31, 28, .92) 0%, rgba(33, 31, 28, .8) 34%, rgba(33, 31, 28, .3) 60%, rgba(33, 31, 28, .06) 100%),
    linear-gradient(0deg, rgba(33, 31, 28, .55) 0%, transparent 32%);
}
.hero__text { width: 100%; max-width: var(--container); margin-inline: auto; padding: clamp(40px, 5vw, 72px) var(--rand) calc(var(--s-9) + var(--s-5)); }
.hero__text > * { max-width: 640px; }
.hero__text > h1 { max-width: 800px; }
.hero__oben { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.hero__oben .kicker { margin: 0; color: var(--c-kreide-auf-dunkel); }
.hero h1 { color: var(--c-kreide); margin-bottom: var(--s-5); text-shadow: 0 2px 24px rgba(0, 0, 0, .3); }
.hero .lead { color: var(--c-kreide); opacity: .9; max-width: 56ch; margin-bottom: var(--s-6); }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__symbol { position: absolute; right: var(--rand); bottom: var(--s-4); margin: 0; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-kreide-auf-dunkel); }
/* Wort-Reveal der H1 (Woerter teilt ein Inline-Skript direkt nach der H1) */
.hero h1.geteilt .w { display: inline-block; animation: wort 700ms var(--ease) both; animation-delay: calc(var(--i) * 90ms + 300ms); }
@keyframes wort { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }

/* ---------- Anfrage: Formularkarte ragt in den Hero ---------- */
.anfrage { position: relative; z-index: 2; padding-bottom: var(--s-8); }
.anfrage__raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.anfrage .formkarte { margin-top: calc(-1 * var(--s-9)); box-shadow: 0 30px 60px -32px rgba(33, 31, 28, .55); }
.anfrage__info { padding-top: var(--s-7); }
.fakten { display: grid; gap: 0; border-top: 2px solid var(--c-linie-stark); max-width: 560px; margin-bottom: var(--s-6); }
.fakten li { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-linie); align-items: baseline; }
.fakten .mono { color: var(--c-stein); text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; }
.fakten strong { font-weight: 600; }
.hero__tel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.hero__tel-nummer { display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; text-decoration: none; }
.hero__tel-nummer small { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-stein); }
.hero__tel-nummer b { font-family: var(--f-mono); font-weight: 500; font-size: 1.5rem; letter-spacing: .01em; }

/* Kennzeichen-Motiv (17.10.): gepraegtes Euro-Schild. EU-Feld mit Sternen und D,
   Ortskuerzel in schmaler Kennzeichen-Optik, zwei Plaketten. Nie eine Nummer. */
.kz {
  --kz-h: 52px;
  display: inline-flex; height: var(--kz-h); padding: 3px; border-radius: 7px;
  background: linear-gradient(180deg, #fff 0%, var(--c-kz-grund) 55%, #ecebe6 100%);
  box-shadow: 0 0 0 1px rgba(33, 31, 28, .22), 0 1px 0 1px rgba(255, 255, 255, .5) inset, 0 10px 20px -12px rgba(33, 31, 28, .6);
}
.kz__rand { display: flex; align-items: stretch; height: 100%; border: 2px solid var(--c-graphit); border-radius: 5px; overflow: hidden; }
.kz__eu { flex: none; width: calc(var(--kz-h) * .4); background: linear-gradient(180deg, #2557b5, var(--c-kz-blau)); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12% 0 8%; color: #fff; }
.kz__sterne { width: 78%; height: auto; fill: var(--c-eu-gelb); }
.kz__eu b { font-family: var(--f-display); font-weight: 700; font-size: calc(var(--kz-h) * .26); line-height: 1; }
.kz__kuerzel { display: flex; align-items: center; padding-inline: calc(var(--kz-h) * .26) calc(var(--kz-h) * .14); }
.kz__kuerzel > span {
  display: inline-block; font-family: var(--f-display); font-weight: 700; font-stretch: 100%;
  font-size: calc(var(--kz-h) * .74); line-height: 1; letter-spacing: .02em; color: var(--c-graphit);
  transform: scaleX(.78); transform-origin: left center;
  margin-right: calc(var(--n, 2) * -.16em);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 0 rgba(0, 0, 0, .18), 0 2px 2px rgba(33, 31, 28, .22);
}
.kz__plaketten { display: flex; flex-direction: column; justify-content: center; gap: 6%; padding-right: calc(var(--kz-h) * .2); }
.kz__plaketten i { display: block; width: calc(var(--kz-h) * .3); height: calc(var(--kz-h) * .3); border-radius: 50%; }
.kz__hu { background: conic-gradient(from 0deg, #c9a24a 0 25%, #b8913d 0 50%, #c9a24a 0 75%, #b8913d 0); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 0 0 1px rgba(33, 31, 28, .25); }
.kz__siegel { background: radial-gradient(circle, #f1efe9 0 38%, #cfccc4 39% 46%, #e6e3dc 47%); box-shadow: 0 0 0 1px rgba(33, 31, 28, .25); }
.kz--gross { --kz-h: 76px; }

/* ---------- Formularkarte ---------- */
.formkarte { background: var(--c-papier); border: 1px solid var(--c-linie); border-radius: var(--r-karte); box-shadow: var(--sh-2); padding: clamp(20px, 3vw, 32px); position: relative; }
.formkarte h2 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-stretch: 108%; margin-bottom: var(--s-2); }
.formkarte__lead { color: var(--c-stein); font-size: .95rem; margin-bottom: var(--s-5); }
.schritte { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-5); }
.schritte li { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-stein); padding-top: var(--s-2); border-top: 3px solid var(--c-linie); transition: border-color var(--d-schritt) var(--ease), color var(--d-schritt) var(--ease); }
.schritte li[aria-current="step"] { border-top-color: var(--c-ocker); color: var(--c-graphit); }
.schritte li.erledigt { border-top-color: var(--c-graphit); }
.formschritt { display: grid; gap: var(--s-4); }
.formschritt[hidden] { display: none; }
.formschritt.eingeblendet { animation: einblenden var(--d-schritt) var(--ease); }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 600; font-size: .9rem; display: flex; justify-content: space-between; gap: var(--s-2); }
.feld label .mono { font-size: .7rem; color: var(--c-stein); text-transform: uppercase; letter-spacing: .1em; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; background: var(--c-papier);
  border: 1px solid var(--c-linie); border-radius: var(--r-feld); font-size: 1rem;
  transition: border-color var(--d-btn) var(--ease), box-shadow var(--d-btn) var(--ease);
}
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231B1A18'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.feld textarea { min-height: 96px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border: 2px solid var(--c-graphit); box-shadow: 0 0 0 3px rgba(226, 178, 58, .45); padding: 11px 13px; }
.feld--zwei { grid-template-columns: 1fr 1fr; display: grid; gap: var(--s-3); }
.feld[aria-invalid="true"] input, .feld[aria-invalid="true"] select { border-color: var(--c-fehler); }
.formhinweis { font-size: .8rem; color: var(--c-stein); margin: 0; }
.formfehler { color: var(--c-fehler); font-size: .875rem; font-weight: 500; margin: 0; }
.formfehler:empty { display: none; }
.formaktionen { display: flex; gap: var(--s-3); align-items: center; }
.formaktionen .btn--sekundaer { flex: none; }
.formaktionen .btn--primaer { flex: 1; }
.honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.formergebnis { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-karte); }
.formergebnis[hidden] { display: none; }
.formergebnis--ok { background: var(--c-ocker-50); border: 1px solid var(--c-ocker); }
.formergebnis--fehler { background: var(--c-papier); border: 1.5px solid var(--c-fehler); }
.formergebnis h3 { display: flex; gap: var(--s-2); align-items: center; }

/* ---------- Datenleiste ---------- */
.datenleiste { background: var(--c-sand); border-block: 1px solid var(--c-linie); padding-block: var(--s-6); }
.datenleiste__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.datenleiste__kachel { padding: var(--s-2) var(--s-5); border-left: 1px solid var(--c-linie); }
.datenleiste__kachel:first-child { border-left: 0; padding-left: 0; }
.datenleiste__wert { font-family: var(--f-mono); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; display: block; letter-spacing: -.01em; }
.datenleiste__label { display: block; font-size: .9rem; color: var(--c-graphit); margin-top: var(--s-1); }
.datenleiste__quelle { margin-top: var(--s-4); font-size: .8rem; color: var(--c-stein); }

/* ---------- Abschnittskopf, Akten-Layout 4/8 ---------- */
.akte { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); }
.akte__kopf h2 { margin-bottom: var(--s-4); }
.akte__kopf p { color: var(--c-stein); }
.kopf-mitte { max-width: 760px; margin-bottom: var(--s-7); }
.kopf-mitte h2 { margin-bottom: var(--s-4); }

/* ---------- Ablauf ---------- */
.ablauf { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: schritt; }
.ablauf::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--c-linie); }
.ablauf::after { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--c-ocker); transform: scaleX(0); transform-origin: left; transition: transform var(--d-linie) var(--ease); }
.ablauf.sichtbar::after { transform: scaleX(1); }
.ablauf li { position: relative; padding-top: var(--s-7); }
.ablauf li::before { content: ""; position: absolute; top: 6px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--c-kreide); border: 2px solid var(--c-graphit); }
.ablauf li:first-child::before { background: var(--c-ocker); }
.ablauf__nr { font-family: var(--f-mono); font-weight: 500; font-size: .875rem; color: var(--c-stein); letter-spacing: .1em; display: block; margin-bottom: var(--s-2); }
.ablauf h3 { margin-bottom: var(--s-2); }
.ablauf p { color: var(--c-stein); font-size: .975rem; margin: 0; }

/* ---------- Zustandsliste ---------- */
.zustand__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.zustandsliste { border-top: 2px solid var(--c-linie-stark); border-bottom: 2px solid var(--c-linie-stark); }
.zustandsliste li { display: grid; grid-template-columns: 112px 1fr auto; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-linie); align-items: baseline; }
.zustandsliste li:last-child { border-bottom: 0; }
.zustandsliste .mono { color: var(--c-stein); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.zustandsliste h3 { font-size: 1.1rem; margin-bottom: 2px; }
.zustandsliste p { margin: 0; color: var(--c-stein); font-size: .95rem; }
.zustandsliste .status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.zustandsliste .status .ic { color: var(--c-graphit); }
.bild-rahmen { border: 1px solid var(--c-linie); border-radius: var(--r-karte); overflow: hidden; background: var(--c-sand); }
.bild-rahmen figcaption { font-size: .8rem; color: var(--c-stein); padding: var(--s-3) var(--s-4); background: var(--c-papier); border-top: 1px solid var(--c-linie); }
.bild-platz { aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; padding: var(--s-5); color: var(--c-stein); font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em; }

/* ---------- Unterlagen ---------- */
.unterlagen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); border-top: 2px solid var(--c-linie-stark); }
.unterlagen li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-linie); }
.unterlagen .haken { width: 24px; height: 24px; border: 1.5px solid var(--c-graphit); border-radius: var(--r-chip); display: grid; place-items: center; margin-top: 2px; }
.unterlagen strong { display: block; font-weight: 600; }
.unterlagen span.text-stein { font-size: .925rem; }

/* ---------- Abholgebiet ---------- */
.gebiet__kopf { display: flex; gap: var(--s-6); align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s-7); }
.gebiet__kopf > div { max-width: 720px; }
.bezirke { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-6); border-top: 2px solid var(--c-linie-stark); }
.bezirke li { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-linie); }
.bezirke strong { display: block; font-family: var(--f-display); font-weight: 700; font-stretch: 105%; font-size: 1.05rem; margin-bottom: 2px; }
.bezirke span { color: var(--c-stein); font-size: .925rem; }
.gebiet__unten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-7); }
.gebiet__unten h3 { font-size: 1.1rem; margin-bottom: var(--s-3); display: flex; gap: var(--s-2); align-items: center; }
.gebiet__unten p { color: var(--c-stein); font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { font-size: .875rem; padding: 4px 10px; border: 1px solid var(--c-linie); border-radius: var(--r-chip); background: var(--c-papier); }
.quelle-zeile { font-size: .8rem; color: var(--c-stein); margin-top: var(--s-3); }

/* ---------- Ratgeber ---------- */
.ratgeber { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.inhalt-nav { position: sticky; top: 96px; border-top: 2px solid var(--c-linie-stark); }
.inhalt-nav p { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-stein); margin: var(--s-3) 0; }
.inhalt-nav ol { counter-reset: toc; }
.inhalt-nav li { counter-increment: toc; border-bottom: 1px solid var(--c-linie); }
.inhalt-nav a { display: grid; grid-template-columns: 32px 1fr; padding: var(--s-3) 0; text-decoration: none; font-size: .95rem; line-height: 1.4; }
.inhalt-nav a::before { content: counter(toc, decimal-leading-zero); font-family: var(--f-mono); color: var(--c-stein); font-size: .8rem; padding-top: 2px; }
.inhalt-nav a:hover { color: var(--c-graphit); text-decoration: underline; }
.ratgeber__text h2 { margin-bottom: var(--s-5); }
.ratgeber__text h3 { margin: var(--s-7) 0 var(--s-3); scroll-margin-top: 96px; }
.ratgeber__text h3:first-of-type { margin-top: var(--s-5); }
.ratgeber__text p { max-width: 66ch; }
.quellen { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 2px solid var(--c-linie-stark); }
.quellen h3 { margin: 0 0 var(--s-3) !important; font-size: 1rem; }
.quellen li { font-size: .875rem; color: var(--c-stein); padding: 4px 0; }
.quellen a { color: var(--c-graphit); word-break: break-word; }

/* ---------- FAQ ---------- */
.faq { border-top: 2px solid var(--c-linie-stark); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--c-linie); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: var(--s-4); align-items: center; padding: var(--s-5) 0; font-weight: 600; font-size: 1.075rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { position: relative; width: 18px; height: 18px; }
.faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--c-graphit); transition: transform var(--d-schritt) var(--ease); }
.faq .plus::after { transform: rotate(90deg); }
.faq details[open] .plus::after { transform: rotate(0deg); }
.faq details > div { padding: 0 0 var(--s-5); max-width: 70ch; color: var(--c-graphit); }

/* ---------- Abschluss-CTA (Asphalt) ---------- */
.sektion--dunkel { background: var(--c-asphalt); color: var(--c-kreide); }
.sektion--dunkel h2 { color: var(--c-kreide); }
.sektion--dunkel .kicker { color: var(--c-kreide-auf-dunkel); }
.abschluss { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
.abschluss p { color: var(--c-kreide-auf-dunkel); max-width: 52ch; }
.abschluss__aktionen { display: grid; gap: var(--s-4); justify-items: start; }
.abschluss__tel { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--f-mono); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--c-ocker); text-decoration: none; letter-spacing: .01em; }
.abschluss__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Fuss ---------- */
.fuss { background: var(--c-asphalt); color: var(--c-kreide-auf-dunkel); border-top: 1px solid var(--c-asphalt-700); padding-block: var(--s-8) var(--s-6); font-size: .925rem; }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--s-6); }
.fuss h3 { color: var(--c-kreide); font-size: 1rem; margin-bottom: var(--s-3); }
.fuss a { color: var(--c-kreide); }
.fuss address { font-style: normal; line-height: 1.8; }
.fuss__wortmarke { margin-bottom: var(--s-4); }
.fuss__unten { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-asphalt-700); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: .85rem; }
.fuss__unten nav { display: flex; gap: var(--s-5); }

/* ---------- Mobile Aktionsleiste ---------- */
.aktionsleiste { display: none; }
/* bis 1359px: Leiste unten (Handy, Tablet, kleine Desktops). Ab 1360px reicht der Seitenrand
   fuer die Schwebe-Knoepfe, ohne Inhalt zu verdecken (Reza 25.10.2026). */
@media (max-width: 1359px) {
  .aktionsleiste {
    display: grid; grid-template-columns: 1fr 1fr 1.3fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--c-asphalt); border-top: 1px solid var(--c-asphalt-700);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .aktionsleiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; color: var(--c-kreide); text-decoration: none; font-size: .78rem; font-weight: 600; border-left: 1px solid var(--c-asphalt-700); }
  .aktionsleiste a:first-child { border-left: 0; }
  .aktionsleiste a.aktionsleiste__haupt { background: var(--c-ocker); color: var(--c-graphit); }
  .aktionsleiste a.aktionsleiste__wa { background: var(--c-wa); color: var(--c-wa-text); }
  .aktionsleiste .luecke-mini { font-family: var(--f-mono); font-size: .62rem; color: var(--c-ocker); }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  /* faehrt erst nach dem Hero-Formular ein (main.js setzt .sichtbar) */
  .js .aktionsleiste { transform: translateY(110%); transition: transform 320ms var(--ease); }
  .js .aktionsleiste.sichtbar { transform: none; }
}

/* ---------- Rechtliche Seiten ---------- */
.recht { max-width: 760px; }
.recht h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: var(--s-6); }
.recht h2 { font-size: 1.35rem; margin: var(--s-7) 0 var(--s-3); }
.recht h3 { font-size: 1.1rem; margin: var(--s-5) 0 var(--s-2); }
.entwurf-hinweis { border: 1.5px dashed var(--c-ocker-600); background: var(--c-ocker-50); padding: var(--s-4) var(--s-5); border-radius: var(--r-karte); margin-bottom: var(--s-6); font-size: .925rem; }

/* ---------- Reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease); }
.js [data-reveal].sichtbar { opacity: 1; transform: none; }

/* ---------- Logo (Bild, Nachtrag 17.10.) ---------- */
/* --logo-h: Stadtnamen mit Unterlaenge (g, p, y) haben eine hoehere Bildflaeche (scripts/logo-stadt.py).
   Hoehe mitwachsen lassen und die Luft per negativem Rand ausgleichen, damit Emblem und Schrift gleich gross bleiben. */
.logo { display: block; height: calc(40px * var(--logo-h, 1)); margin-block: calc(20px * (1 - var(--logo-h, 1))); width: auto; max-width: 100%; }
.fuss__wortmarke .logo { height: calc(36px * var(--logo-h, 1)); margin-block: calc(18px * (1 - var(--logo-h, 1))); }

/* ---------- Symbolbilder ---------- */
.bild-rahmen__bild { position: relative; overflow: hidden; }
.bild-rahmen__bild > img { display: block; width: 100%; height: auto; transition: transform 1100ms var(--ease); }
.bild-rahmen__bild .kz { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 1; }
@media (hover: hover) { .bild-rahmen:hover .bild-rahmen__bild > img { transform: scale(1.03); } }
.akte__bild { margin-top: var(--s-6); }
.gebiet__kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
.gebiet__kopf > div { max-width: none; }

/* ---------- Bewegung (Nachtrag 17.10.: dezent, nur transform/opacity/clip-path) ---------- */
/* Bilder: Vorhang von unten, Bild zoomt von 1.08 auf 1 */
.js [data-bild] .bild-rahmen__bild { clip-path: inset(100% 0 0 0); transition: clip-path 900ms var(--ease); }
.js [data-bild] .bild-rahmen__bild > img { transform: scale(1.08); }
.js [data-bild].sichtbar .bild-rahmen__bild { clip-path: inset(0 0 0 0); }
.js [data-bild].sichtbar .bild-rahmen__bild > img { transform: none; }
/* Parallax (17.10.): main.js setzt --py, eigenes translate/scale beisst sich nicht mit dem Reveal-Zoom */
.js [data-bild] .bild-rahmen__bild > img { translate: 0 var(--py, 0%); scale: 1.08; }
.js [data-bild] .kz { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease) 600ms, transform 420ms var(--ease) 600ms; }
.js [data-bild].sichtbar .kz { opacity: 1; transform: none; }
/* Listen: Zeilen nacheinander, 60ms Abstand */
.js [data-stagger] > * { opacity: 0; transform: translateY(10px); transition: opacity 380ms var(--ease), transform 380ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-stagger].sichtbar > * { opacity: 1; transform: none; }
/* Hero beim Laden: Kennzeichen und Formularkarte (H1: Wort-Reveal, LCP ist das Bild). */
.js .hero__oben .kz { animation: kz-rein 560ms var(--ease) both; }
.js .formkarte { animation: hoch-rein 620ms var(--ease) 120ms both; }
@keyframes kz-rein { from { transform: translateX(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hoch-rein { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Kopf bekommt beim Scrollen einen Schatten */
.kopf { transition: box-shadow 200ms var(--ease); }
.kopf.gescrollt { box-shadow: 0 10px 24px -18px rgba(33, 31, 28, .45); }

/* ---------- Responsiv ---------- */
@media (max-width: 1024px) {
  .anfrage__raster, .akte, .zustand__raster, .ratgeber, .abschluss { grid-template-columns: minmax(0, 1fr); }
  .inhalt-nav { position: static; }
  .bezirke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gebiet__unten { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .datenleiste__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
  .datenleiste__kachel:nth-child(3) { border-left: 0; padding-left: 0; }
  .fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gebiet__kopf { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  /* Handy/Tablet: Bildband oben, Text darunter auf Asphalt, Formular direkt danach (DESIGN.md 7.4) */
  .hero { display: block; min-height: 0; }
  .hero__bild { position: relative; inset: auto; height: var(--hb); }
  .hero__bild picture { inset: -12% 0 0 0; }
  .hero__bild img { object-position: 50% 70%; }
  .hero__bild::after { background: linear-gradient(180deg, rgba(33, 31, 28, .05) 0%, rgba(33, 31, 28, .2) 50%, var(--c-asphalt) 100%); }
  .hero__text { position: relative; margin-top: calc(-1 * var(--s-8)); padding: 0 var(--rand) calc(var(--s-8) + var(--s-6)); }
  .hero__symbol { top: var(--s-3); bottom: auto; color: var(--c-kreide); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
  .anfrage .formkarte { margin-top: calc(-1 * var(--s-8)); }
  .anfrage__info { padding-top: 0; }
  .anfrage__raster { gap: var(--s-6); }
}
@media (max-width: 767px) {
  .hero__aktionen .btn { flex: 1 1 100%; }
  .ablauf { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ablauf::before, .ablauf::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .ablauf::after { transform: scaleY(0); transform-origin: top; }
  .ablauf.sichtbar::after { transform: scaleY(1); }
  .ablauf li { padding: 0 0 var(--s-6) var(--s-7); }
  .ablauf li::before { top: 4px; }
  .zustandsliste li { grid-template-columns: 1fr; gap: 4px; }
  .zustandsliste .status { order: -1; }
  .unterlagen, .bezirke { grid-template-columns: minmax(0, 1fr); }
  .fuss__raster { grid-template-columns: minmax(0, 1fr); }
  .feld--zwei { grid-template-columns: minmax(0, 1fr); }
  .fakten li { grid-template-columns: 84px 1fr; }
  .kz--gross { --kz-h: 60px; }
  .logo { height: auto; width: min(272px, 100%); margin-block: 0; }
  .bild-rahmen__bild .kz--gross { --kz-h: 48px; left: var(--s-3); bottom: var(--s-3); }
}
@media (max-width: 400px) {
  .datenleiste__raster { grid-template-columns: minmax(0, 1fr); }
  .datenleiste__kachel { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js [data-stagger] > *, .js [data-bild] .kz { opacity: 1; transform: none; }
  .js [data-bild] .bild-rahmen__bild { clip-path: none; }
  .js [data-bild] .bild-rahmen__bild > img { transform: none; translate: none; scale: none; }
  .hero__bild picture { translate: none; }
  .js .aktionsleiste { transform: none; }
  .ablauf::after { transform: none !important; }
}

/* Kopf: Logo darf schrumpfen, Burger nie (Nachtrag 17.10.) */
.wortmarke { min-width: 0; flex: 0 1 auto; }
.burger { flex: none; }
@media (max-width: 767px) { .logo { width: min(250px, 100%); } }
.bild-rahmen { margin: 0; }
@media (min-width: 1025px) { .zustand__raster > .bild-rahmen { position: sticky; top: 96px; } }

/* ---------- Laufband (17.10.): Stadtbezirke, Asphalt, Pause bei Hover ---------- */
.laufband { background: var(--c-asphalt); color: var(--c-kreide); overflow: hidden; padding-block: var(--s-4); border-top: 1px solid var(--c-asphalt-700); }
.laufband__spur { display: flex; width: max-content; animation: lauf 46s linear infinite; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__satz { display: flex; align-items: center; flex: none; }
.laufband__titel { font-family: var(--f-mono); font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-kreide-auf-dunkel); padding-inline: var(--s-7) var(--s-2); white-space: nowrap; }
.laufband__punkt { display: inline-flex; align-items: center; gap: var(--s-4); padding-inline: var(--s-4); font-family: var(--f-display); font-weight: 700; font-stretch: 110%; font-size: clamp(1.1rem, 1.8vw, 1.4rem); white-space: nowrap; }
.laufband__punkt::before { content: ""; width: 7px; height: 7px; background: var(--c-ocker); transform: rotate(45deg); flex: none; }
@keyframes lauf { to { transform: translateX(-50%); } }

/* ---------- Galerie mit Lightbox (17.10.) ---------- */
.galerie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 15vw, 210px); gap: var(--s-3); }
.galerie__eintrag { grid-column: span 3; }
.galerie__eintrag--1 { grid-column: span 6; grid-row: span 2; }
.galerie__eintrag--6 { grid-column: span 5; }
.galerie__eintrag--7 { grid-column: span 7; }
.galerie button { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--r-karte); overflow: hidden; background: var(--c-sand); cursor: zoom-in; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
@media (hover: hover) { .galerie button:hover img { transform: scale(1.045); } }
.galerie__lupe { position: absolute; right: var(--s-3); bottom: var(--s-3); width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-btn); background: rgba(33, 31, 28, .72); color: var(--c-kreide); opacity: 0; transition: opacity var(--d-btn) var(--ease); }
.galerie button:hover .galerie__lupe, .galerie button:focus-visible .galerie__lupe { opacity: 1; }
.lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(20, 19, 17, .9); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; width: auto; height: auto; max-width: min(1200px, 94vw); max-height: 82vh; border-radius: var(--r-karte); }
.lightbox figcaption { color: var(--c-kreide); font-size: .85rem; margin-top: var(--s-3); max-width: 70ch; }
.lightbox__zu, .lightbox__nav { position: fixed; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(244, 241, 234, .3); border-radius: var(--r-btn); background: rgba(33, 31, 28, .8); color: var(--c-kreide); cursor: pointer; }
.lightbox__zu { top: var(--s-4); right: var(--s-4); }
.lightbox__nav { top: 50%; translate: 0 -50%; }
.lightbox__nav--zurueck { left: var(--s-4); }
.lightbox__nav--weiter { right: var(--s-4); }

/* ---------- Bewertungs-Band (bewertungsband.md, 17.10.) ---------- */
.bewertungen-hinweis { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-4); border: 1.5px dashed var(--c-ocker-600); background: var(--c-ocker-50); border-radius: var(--r-chip); font-size: .9rem; font-weight: 500; }
#bewertungen .kopf-mitte { margin-bottom: var(--s-6); }
.band { position: relative; overflow: hidden; margin-inline: calc(50% - 50vw); padding-block: var(--s-3) var(--s-7); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%); }
.band.zieht { cursor: grabbing; }
.band-spur { display: flex; gap: var(--s-5); width: max-content; will-change: transform; }
.bewertung { flex: 0 0 min(400px, 82vw); background: var(--c-papier); border: 1px solid var(--c-linie); border-radius: var(--r-karte); padding: var(--s-6); display: grid; gap: var(--s-4); align-content: start; box-shadow: var(--sh-2); transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.band:not(.zieht) .bewertung:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(33, 31, 28, .4); }
.bewertung__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sterne { display: flex; gap: 2px; color: var(--c-ocker); }
.sterne svg { fill: currentColor; }
.bewertung__tag { font-family: var(--f-mono); font-weight: 500; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border: 1px dashed var(--c-ocker-600); background: var(--c-ocker-50); border-radius: var(--r-chip); }
.bewertung blockquote { margin: 0; font-size: 1rem; line-height: 1.6; }
.bewertung footer { display: flex; align-items: center; gap: var(--s-3); }
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c-asphalt); color: var(--c-kreide); font-family: var(--f-mono); font-size: .8rem; }
.bewertung cite { display: grid; font-style: normal; font-weight: 600; line-height: 1.3; }
.bewertung cite small { font-weight: 400; color: var(--c-stein); font-size: .85rem; }

@media (max-width: 767px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 34vw, 180px); gap: var(--s-2); }
  .galerie__eintrag, .galerie__eintrag--6, .galerie__eintrag--7 { grid-column: span 1; grid-row: span 1; }
  .galerie__eintrag--1 { grid-column: span 2; grid-row: span 1; }
  .galerie__eintrag--6, .galerie__eintrag--7 { grid-column: span 2; }
  .lightbox__nav { top: auto; bottom: var(--s-4); translate: none; }
  .band { -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%); }
}

/* ---------- Schwebe-Knoepfe Desktop (Reza 25.10.2026) ----------
   Erst ab 1360px: Dort endet der Inhalt (Container 1180px) bei 1270px, die runden
   56px-Knoepfe sitzen im freien Rand rechts und verdecken nichts. Darunter uebernimmt die
   Aktionsleiste unten. Kein Layout-Springen: position fixed, nur opacity/transform.
   Vor dem Footer weg, damit Impressum und Kontaktdaten frei bleiben. */
.schwebe { display: none; }
@media (min-width: 1360px) {
  .schwebe { display: flex; flex-direction: column; gap: 12px; position: fixed; right: 24px; bottom: 28px; z-index: 55; }
  .schwebe__knopf { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    text-decoration: none; box-shadow: var(--sh-2); position: relative; }
  .schwebe__knopf .ic { width: 24px; height: 24px; }
  .schwebe__knopf > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .schwebe__tel { background: var(--c-asphalt); color: var(--c-kreide); border: 1px solid var(--c-asphalt-700); }
  .schwebe__tel:hover { background: var(--c-graphit); }
  .schwebe__wa { background: var(--c-wa); color: var(--c-wa-text); }
  .schwebe__wa:hover { background: var(--c-wa-600); }
  .schwebe__knopf:focus-visible { outline: 3px solid var(--c-ocker); outline-offset: 3px; }
  .js .schwebe { opacity: 0; transform: translateY(16px); visibility: hidden; pointer-events: none;
    transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 0s linear 240ms; }
  .js .schwebe.sichtbar { opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) { .js .schwebe, .js .schwebe.sichtbar { transition: none; transform: none; } }

/* ---------- Ratgeber-Artikel (04.11.2026) ----------
   Eigener Bereich unter /ratgeber/<thema>/. Kein neues Design: alles unten
   benutzt die vorhandenen Tokens und baut auf .ratgeber, .quellen, .faq und
   .kicker auf. Neu sind nur drei Dinge, die die Stadtseiten nicht brauchen:
   ein Artikelkopf ohne Hero, die Kurzantwort daneben, und der Quellenblock
   als aufklappbares details statt als offene Liste. */
.artikel-kopf { padding-bottom: var(--s-7); }
.artikel-kopf h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin: var(--s-2) 0 var(--s-4); max-width: 22ch; }
.artikel-kopf .lead { margin: 0; }
.artikel-kopf__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: var(--s-5); }

/* Kurzantwort: die direkte Antwort auf die Suchfrage, gleich neben der H1.
   Wer "zahnriemen gerissen" sucht, will zuerst wissen, was jetzt ist. */
.kurzantwort { background: var(--c-ocker-50); border: 1px solid var(--c-linie); border-left: 3px solid var(--c-ocker); border-radius: var(--r-karte); padding: var(--s-5); }
.kurzantwort__titel { display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-mono); font-weight: 500; font-size: var(--t-kicker); text-transform: uppercase; letter-spacing: .12em; color: var(--c-stein); margin: 0 0 var(--s-3); }
.kurzantwort p { margin: 0; font-size: 1.0625rem; line-height: 1.6; }

/* Im Artikel gliedern h2 die Abschnitte, auf den Stadtseiten tat das h3.
   Gleiche Abstaende und gleiche Sprungmarke wie dort. */
.artikel h2 { font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-3); scroll-margin-top: 96px; }
.artikel h2:first-of-type { margin-top: 0; }
.artikel h2.vb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.artikel h2.vb + h2 { margin-top: 0; }
.artikel p + p { margin-top: var(--s-4); }
/* Zeilenlaenge im Artikel (04.11.2026, Befund aus seitencheck).
   Die Stadtseiten setzen 66ch, und das ergibt in IBM Plex Sans gemessene 86 bis
   89 Zeichen je Zeile, weil die Einheit ch die Breite der Null meint und die
   breiter ist als ein durchschnittlicher Kleinbuchstabe. Auf einer Landingpage
   mit kurzen Absaetzen faellt das kaum auf, bei 1.400 Woerter Lesetext schon.
   Deshalb hier enger, aber NUR im Artikel: .ratgeber__text p der Stadtseiten
   bleibt unveraendert. */
.artikel p, .artikel li { max-width: 58ch; }

/* Fussnote im Fliesstext. Klein sichtbar, aber mit Tippziel von 24px.
   Gemessen am 04.11.2026 am gebauten HTML: Ohne die Regel unten war der Link
   nur 14 mal 1 Pixel gross, weil line-height 0 die Zeilenbox zusammenfaltet.
   Auf dem Handy ist das nicht treffbar und faellt unter WCAG 2.2 AA
   (Target Size Minimum, 24 mal 24). Das ::after vergroessert nur die Trefferflaeche,
   es veraendert den Textfluss nicht. line-height bleibt 0, sonst reisst die
   Hochstellung die Zeilen auseinander. */
.fn { font-size: .7em; line-height: 0; vertical-align: super; margin-left: 1px; }
.fn a { position: relative; display: inline-block; padding: 0; color: var(--c-stein); text-decoration: none; border-bottom: 1px solid var(--c-linie); }
.fn a::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 100%; min-width: 20px; height: 24px; }
.fn a:hover, .fn a:focus-visible { color: var(--c-graphit); border-color: var(--c-ocker); }

/* Brotkrumen: lagen gemessen bei 23 Pixel Hoehe und damit einen Pixel unter dem
   Mindestmass aus WCAG 2.2 AA. Betrifft seit dem 04.11.2026 auch die 25 neuen
   Ratgeberseiten, deshalb hier nachgezogen. */
.brotkrumen a { display: inline-flex; align-items: center; min-height: 24px; }

/* Quellenblock aufklappbar. Gleiche Mechanik wie .faq, damit es sich auf der
   Seite nicht nach einem zweiten System anfuehlt. */
.quellen--auf summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto 24px; gap: var(--s-3); align-items: center; padding: var(--s-2) 0 var(--s-4); font-weight: 600; font-size: 1rem; }
.quellen--auf summary::-webkit-details-marker { display: none; }
.quellen--auf summary .mono { color: var(--c-stein); }
.quellen--auf .plus { position: relative; width: 18px; height: 18px; }
.quellen--auf .plus::before, .quellen--auf .plus::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--c-graphit); transition: transform var(--d-schritt) var(--ease); }
.quellen--auf .plus::after { transform: rotate(90deg); }
.quellen--auf[open] .plus::after { transform: rotate(0deg); }
.quellen--auf ol { counter-reset: q; margin: var(--s-3) 0; }
.quellen--auf ol li { counter-increment: q; display: grid; grid-template-columns: 28px 1fr; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-linie); scroll-margin-top: 96px; }
.quellen--auf ol li::before { content: counter(q) "."; font-family: var(--f-mono); color: var(--c-stein); font-size: .8rem; }
.quellen--auf ol li a { display: block; }
/* Das li ist ein Grid mit 28px fuer die Nummer und 1fr fuer den Inhalt.
   Link UND Herausgeberzeile sind direkte Kinder, also eigene Grid-Elemente.
   Ohne grid-column rutscht die Herausgeberzeile in die naechste Zeile der
   28-Pixel-Spalte und bricht dort in fuenf Zeilen um (gemessen 04.11.2026). */
.quellen--auf ol li .text-stein { grid-column: 2; display: block; font-size: .8rem; margin-top: 2px; }
.quellen--auf ol li:target { background: var(--c-ocker-50); }
.quellen--auf .quelle-zeile { max-width: 70ch; }

/* Uebersichtsseite: die Themenliste benutzt .zustandsliste, dort sind h3 ohne
   Link gedacht. Nur die Linkfarbe nachziehen. */
.zustandsliste h3 a { color: var(--c-graphit); text-decoration: none; }
.zustandsliste h3 a:hover { text-decoration: underline; text-decoration-color: var(--c-ocker); text-underline-offset: 3px; }
.unterlagen strong a { color: var(--c-graphit); }

@media (max-width: 1024px) {
  .artikel-kopf__raster { grid-template-columns: 1fr; }
  .artikel-kopf h1 { max-width: none; }
}
@media (max-width: 767px) {
  .kurzantwort { padding: var(--s-4); }
  .quellen--auf summary { grid-template-columns: 1fr 24px; }
  .quellen--auf summary .mono { display: none; }
}

/* Fussnoten auf dunklem Grund (04.11.2026, Hinweis aus der Sec-Rail-Hauptsession).
   Gemessen: --c-stein (#5E584F) auf --c-papier 6,92:1, auf --c-graphit nur 2,47:1
   und damit unter WCAG AA. --c-ocker auf Graphit liegt bei 8,83:1. Heute steht
   keine Fussnote in einem dunklen Abschnitt, die Regel ist Vorsorge fuer den Fall,
   dass spaeter ein Artikelabschnitt auf .sektion--dunkel gesetzt wird. */
.sektion--dunkel .fn a { color: var(--c-ocker); border-color: rgba(226, 178, 58, .4); }
.sektion--dunkel .fn a:hover, .sektion--dunkel .fn a:focus-visible { color: var(--c-ocker); border-color: var(--c-ocker); }