/* Abholungsseiten, Look "Tourenplan". Eigenständig, laedt NICHT main.css.
   Abgrenzung zum Ankauf ("Wiegeschein") ueber vier Achsen: warm statt kuehl,
   Verkehrsblau statt Kupfer, runde statt schmale Schrift, Radius statt Schraege.
   Festgelegt in Schrottankauf/DESIGN-ABHOLUNG.md, freigegeben von Reza 07.11.2026. */

@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --c-papier: #F5F2ED;
  --c-weiss: #FFFFFF;
  --c-tanne: #16241F;
  --c-tanne-700: #1F352C;
  --c-blau: #15528C;
  --c-blau-700: #103F6C;
  --c-blau-50: #EAF1F8;
  --c-text: #1A211E;
  --c-grau: #5C6560;
  --c-linie: #DDD7CE;
  --c-fehler: #A3341F;
  --c-wa: #25D366;

  --f-kopf: "Outfit", system-ui, sans-serif;
  --f-text: "Instrument Sans", system-ui, sans-serif;

  --fs-h1: clamp(2.1rem, 5.2vw, 3.6rem);
  --fs-h2: clamp(1.55rem, 3.2vw, 2.3rem);
  --fs-h3: clamp(1.1rem, 1.8vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 1.7vw, 1.2rem);
  --fs-klein: .9375rem;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px; --s-10: 112px;

  --r: 14px;          /* durchgehend weich, nie abgeschraegt */
  --r-klein: 10px;
  --r-gross: 20px;
  --t: .22s cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

body { margin: 0; font: 400 1.0625rem/1.65 var(--f-text); color: var(--c-text); background: var(--c-papier); }
h1, h2, h3 { font-family: var(--f-kopf); font-weight: 700; line-height: 1.12; letter-spacing: -.012em; margin: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 var(--s-4); }
a { color: var(--c-blau); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--c-blau); outline-offset: 2px; }

.container { width: min(1180px, 100% - 2 * var(--s-5)); margin-inline: auto; }
.sektion { padding: var(--s-9) 0; }
.sektion--hell { background: var(--c-weiss); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s-4); top: var(--s-4); z-index: 50; padding: var(--s-3) var(--s-4); background: var(--c-blau); color: #fff; border-radius: var(--r-klein); }

/* Knoepfe: runde Ecken, nie Schraege */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 54px; padding: var(--s-3) var(--s-6); font: 600 1.0625rem/1 var(--f-text); text-decoration: none; border: 0; border-radius: var(--r); cursor: pointer; transition: background-color var(--t), transform var(--t); }
.btn:active { transform: translateY(1px); }
.btn--primaer { background: var(--c-blau); color: #fff; }
.btn--primaer:hover { background: var(--c-blau-700); }
.btn--sekundaer { background: var(--c-weiss); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-linie); }
.btn--sekundaer:hover { background: var(--c-blau-50); box-shadow: inset 0 0 0 1px var(--c-blau); }
.btn--breit { width: 100%; }
.btn--wa { background: var(--c-wa); color: #06281A; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 30; background: rgba(245,242,237,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-linie); }
.kopf__innen { display: flex; align-items: center; gap: var(--s-4); min-height: 72px; }
.marke { display: flex; flex-direction: column; font-family: var(--f-kopf); font-weight: 700; text-decoration: none; color: var(--c-tanne); line-height: 1.05; }
.marke-b { color: var(--c-blau); }
.kopf-aktion { margin-left: auto; min-height: 46px; padding: var(--s-2) var(--s-5); }

/* Hero: Full-Bleed. Bild fuellt den Bildschirm, Text liegt darauf (Reza 07.11.2026). */
.hero { position: relative; display: grid; align-items: end; min-height: 86svh; padding: var(--s-9) 0 var(--s-8); isolation: isolate; overflow: hidden; }
@media (min-width: 900px) { .hero { min-height: 78svh; align-items: center; } }
.hero__bild { position: absolute; inset: 0; z-index: -2; }
.hero__bild picture, .hero__bild img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 58%; }
.hero__schleier { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,20,16,.74) 0%, rgba(10,20,16,.46) 34%, rgba(10,20,16,.68) 72%, rgba(10,20,16,.88) 100%); }
@media (min-width: 900px) { .hero__schleier { background: linear-gradient(100deg, rgba(10,20,16,.90) 0%, rgba(10,20,16,.76) 42%, rgba(10,20,16,.30) 72%, rgba(10,20,16,.18) 100%); } }
.hero__inhalt { position: relative; max-width: 42rem; color: #fff; }
.hero h1 { color: #fff; text-wrap: balance; text-shadow: 0 2px 18px rgba(8,16,13,.4); }
.hero__zusatz { display: block; font-weight: 600; font-size: .62em; color: #BFD4E8; margin-top: var(--s-2); }
.kicker { margin: 0 0 var(--s-3); font: 600 .8125rem/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--c-blau); }
.kicker--hell { color: #8FC0EC; }
.hero__lead { font-size: var(--fs-lead); color: #E4EBE7; margin-top: var(--s-4); max-width: 36rem; }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.btn--gross { min-height: 58px; padding: var(--s-4) var(--s-6); }
.btn--glas { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn--glas:hover { background: rgba(255,255,255,.2); }
.hero__punkte { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin: var(--s-6) 0 0; padding: 0; list-style: none; font-size: var(--fs-klein); font-weight: 600; color: #E4EBE7; }
.hero__punkte li { display: inline-flex; align-items: center; gap: 6px; }
.hero__punkte svg { color: #7FD4A5; }

/* Terminkarte: das Leitmotiv */
.termin { margin-top: var(--s-5); padding: var(--s-5); background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r-gross); box-shadow: 0 1px 2px rgba(22,36,31,.04), 0 8px 24px rgba(22,36,31,.06); }
.termin__zeile { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.termin__punkt { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--c-blau); }
.termin__titel { font-family: var(--f-kopf); font-weight: 600; font-size: 1.15rem; }
.termin__knoepfe { display: grid; gap: var(--s-3); }
@media (min-width: 420px) { .termin__knoepfe { grid-template-columns: 1fr 1fr; } }

/* Zeitstrahl: drei Haltepunkte */
.strahl { display: grid; gap: var(--s-5); margin: var(--s-7) 0 0; padding: 0; list-style: none; counter-reset: s; }
@media (min-width: 820px) { .strahl { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.strahl__punkt { position: relative; counter-increment: s; padding-top: var(--s-6); }
.strahl__punkt::before { content: counter(s); position: absolute; top: 0; left: 0; width: 34px; height: 34px; display: grid; place-items: center; font: 600 1rem/1 var(--f-kopf); color: #fff; background: var(--c-blau); border-radius: 50%; }
@media (min-width: 820px) { .strahl__punkt::after { content: ""; position: absolute; top: 17px; left: 42px; right: calc(-1 * var(--s-6)); height: 2px; background: var(--c-linie); } .strahl__punkt:last-child::after { display: none; } }
.strahl h3 { margin-bottom: var(--s-2); }
.strahl p { margin: 0; color: var(--c-grau); }

/* Arten: ruhige Liste, keine Farbplaettchen (die gehoeren dem Ankauf) */
.arten { display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .arten { grid-template-columns: repeat(2, 1fr); } }
.arten__punkt { display: flex; gap: var(--s-4); padding: var(--s-5); background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r); }
.arten__punkt h3 { margin-bottom: var(--s-2); color: var(--c-tanne); }
.arten__punkt p { margin: 0; color: var(--c-grau); font-size: var(--fs-klein); }
.arten__ic { flex: none; display: grid; place-items: center; width: 60px; height: 60px; color: var(--c-blau); background: var(--c-blau-50); border-radius: var(--r-klein); transition: background-color var(--t), color var(--t), transform var(--t); }
.arten__ic svg { width: 34px; height: 34px; }
.arten__punkt:hover .arten__ic { background: var(--c-blau); color: #fff; transform: rotate(-4deg) scale(1.04); }

/* Textbloecke */
.block { max-width: 72ch; }
.block p:last-child { margin-bottom: 0; }
.kopfzeile { max-width: 62ch; margin-bottom: var(--s-6); }
.lead { font-size: var(--fs-lead); color: var(--c-grau); }

/* Gebiet */
.gebiet { display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .gebiet { grid-template-columns: repeat(3, 1fr); } }
.gebiet__bezirk { padding: var(--s-4); background: var(--c-weiss); border-radius: var(--r); border: 1px solid var(--c-linie); }
.gebiet__name { font-family: var(--f-kopf); font-weight: 600; margin-bottom: var(--s-1); }
.gebiet__orte { color: var(--c-grau); font-size: var(--fs-klein); }

/* FAQ */
.faq { margin-top: var(--s-6); }
.faq__punkt { border-bottom: 1px solid var(--c-linie); }
.faq__frage { width: 100%; display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; font: 600 1.0625rem/1.4 var(--f-text); text-align: left; color: var(--c-text); background: none; border: 0; cursor: pointer; }
.faq__frage::after { content: "+"; font: 400 1.5rem/1 var(--f-kopf); color: var(--c-blau); }
.faq__punkt[open] .faq__frage::after { content: "\2212"; }
.faq__antwort { padding: 0 0 var(--s-5); color: var(--c-grau); max-width: 68ch; }

/* Formular, gleicher Motor wie im Ankauf, eigener Look */
.formular { padding: var(--s-6); background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r-gross); }
.formular__legende { font-family: var(--f-kopf); font-weight: 600; font-size: 1.2rem; padding: 0; margin-bottom: var(--s-5); }
.formular__schritt { border: 0; padding: 0; margin: 0; }
.formular__schritte { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-5); font-size: var(--fs-klein); color: var(--c-grau); }
.formular__balken { flex: 1; height: 5px; background: var(--c-linie); border-radius: 999px; overflow: hidden; }
.formular__balken i { display: block; height: 100%; width: 50%; background: var(--c-blau); border-radius: 999px; transition: width var(--t); }
.feldgruppe { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.feldgruppe legend { font-weight: 600; margin-bottom: var(--s-3); padding: 0; }
.feld { margin-bottom: var(--s-4); }
.feld label { display: block; font-weight: 600; margin-bottom: var(--s-2); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1rem/1.4 var(--f-text); color: var(--c-text); background: var(--c-papier); border: 1px solid var(--c-linie); border-radius: var(--r-klein); }
.feld textarea { min-height: 96px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid rgba(21,82,140,.35); border-color: var(--c-blau); }
.feld__hinweis { margin: 0 0 var(--s-2); color: var(--c-grau); font-size: var(--fs-klein); }
.optional, .pflicht { font-weight: 400; font-size: .8125rem; color: var(--c-grau); }
.pflicht { color: var(--c-blau); }
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.kachel { display: block; position: relative; cursor: pointer; }
.kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kachel__flaeche { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-4); background: var(--c-papier); border-radius: var(--r-klein); box-shadow: inset 0 0 0 1px var(--c-linie); transition: box-shadow var(--t), background-color var(--t); }
.kachel input:checked + .kachel__flaeche { background: var(--c-blau-50); box-shadow: inset 0 0 0 2px var(--c-blau); }
.kachel__name { font-size: var(--fs-klein); font-weight: 600; }
.kachel__haken { margin-left: auto; opacity: 0; color: var(--c-blau); }
.kachel input:checked + .kachel__flaeche .kachel__haken { opacity: 1; }
.wahl { display: grid; gap: var(--s-2); }
@media (min-width: 560px) { .wahl { grid-template-columns: repeat(2, 1fr); } }
.wahl--zwei { grid-template-columns: repeat(2, 1fr); }
.wahl__punkt { display: flex; align-items: center; gap: var(--s-3); min-height: 50px; padding: var(--s-2) var(--s-4); background: var(--c-papier); border-radius: var(--r-klein); box-shadow: inset 0 0 0 1px var(--c-linie); cursor: pointer; font-size: var(--fs-klein); }
.wahl__punkt:has(input:checked) { background: var(--c-blau-50); box-shadow: inset 0 0 0 2px var(--c-blau); }
.formular__fehler { color: var(--c-fehler); font-weight: 600; }
.formular__knoepfe { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 520px) { .formular__knoepfe { grid-template-columns: auto 1fr; } }
.formular__klein { margin: var(--s-4) 0 0; font-size: .8125rem; color: var(--c-grau); }
.formular__foto { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); background: var(--c-blau-50); border-radius: var(--r-klein); font-size: var(--fs-klein); }
.formular__ergebnis { padding: var(--s-7) var(--s-5); text-align: center; }
.formular__ergebnis-titel { font-family: var(--f-kopf); font-weight: 700; font-size: 1.3rem; margin-bottom: var(--s-2); }
.ist-schritt-2 .formular__schritt[data-schritt="1"] { display: none; }
.formular__schritt[data-schritt="2"] { display: none; }
.ist-schritt-2 .formular__schritt[data-schritt="2"] { display: block; }

/* Foto-Upload */
.feld input[type="file"] { padding: 10px 12px; min-height: 48px; font-size: var(--fs-klein); cursor: pointer; }
.feld input[type="file"]::file-selector-button { margin-right: var(--s-3); padding: 9px 14px; font: 600 .95rem/1 var(--f-text); color: var(--c-text); background: #fff; border: 1px solid var(--c-linie); border-radius: var(--r-klein); cursor: pointer; }
.fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.fotos__punkt { position: relative; aspect-ratio: 1; }
.fotos__punkt img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-klein); }
.fotos__weg { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; display: grid; place-items: center; font: 700 20px/1 var(--f-text); color: #fff; background: rgba(22,36,31,.78); border: 0; border-radius: 50%; cursor: pointer; }

/* Fuss */
.fuss { padding: var(--s-8) 0 var(--s-6); background: var(--c-tanne); color: #D9E0DC; }
.fuss a { color: #fff; }
.fuss-raster { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .fuss-raster { grid-template-columns: repeat(3, 1fr); } }
.fuss-titel { font-family: var(--f-kopf); font-weight: 600; color: #fff; margin-bottom: var(--s-3); }
.fuss ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); font-size: var(--fs-klein); }
.fuss address { font-style: normal; font-size: var(--fs-klein); line-height: 1.7; }
.fuss-unten { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.14); font-size: .8125rem; }

/* Quellen */
.quellen { margin-top: var(--s-7); font-size: var(--fs-klein); }
.quellen summary { cursor: pointer; font-weight: 600; color: var(--c-grau); }
.quellen ol { margin: var(--s-4) 0 0; padding-left: 1.3em; color: var(--c-grau); display: grid; gap: var(--s-2); }

/* Einblenden beim Scrollen. main.js haengt .einblenden an eine feste Liste von Klassen
   (u.a. .kopfzeile und .faq) und setzt .ist-sichtbar, sobald das Element im Bild ist.
   Alles ohne diese Klassen bleibt sichtbar: lieber keine Animation als ein Inhalt,
   der bei abgeschaltetem JS auf opacity 0 haengen bleibt. */
.einblenden { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.einblenden.ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .einblenden { opacity: 1; transform: none; } }

/* Wortmarke: rundes Zeichen in Verkehrsblau, nie die Stanzecke des Ankaufs */
.wm { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.wm__zeichen { flex: none; display: block; }
.wm__text { display: flex; flex-direction: column; font-family: var(--f-kopf); line-height: 1.05; }
.wm__a { font-weight: 700; font-size: 1.05rem; color: var(--c-tanne); letter-spacing: -.01em; }
.wm__b { font-weight: 600; font-size: .8125rem; color: var(--c-blau); }
.fuss .wm__a { color: #fff; }
.fuss .wm__b { color: #9FC3E4; }
.kopf__logo { text-decoration: none; }

/* Kopf, Fuss und Aktionsleiste. Die Partials kopf.njk und fuss.njk sind dieselben wie im
   Ankauf, nur ihr Aussehen kommt von hier. Die Klassennamen muessen deshalb genau zu
   denen in den Partials passen. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kopf__innen { display: flex; align-items: center; gap: var(--s-4); min-height: 76px; }
.kopf__logo { text-decoration: none; margin-right: auto; }
.kopf__nav ul { display: flex; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.kopf__nav a { font-size: var(--fs-klein); font-weight: 600; color: var(--c-text); text-decoration: none; }
.kopf__nav a:hover { color: var(--c-blau); }

.kopf__aktion { display: flex; align-items: center; gap: var(--s-3); }
.kopf__tel { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-klein); font-weight: 600; color: var(--c-text); text-decoration: none; white-space: nowrap; }
.kopf__tel:hover { color: var(--c-blau); }
/* Die Nummer steht zweimal im Markup: einmal im Menue, einmal in der Kopfleiste.
   Am Desktop zeigen wir nur die in der Kopfleiste. Der Selektor braucht die
   hoehere Spezifitaet, sonst gewinnt die allgemeine .kopf__tel-Regel darueber. */
.kopf__nav .kopf__tel--menue { display: none; }
.kopf__btn { min-height: 46px; padding: var(--s-2) var(--s-5); font-size: var(--fs-klein); }
.kopf__burger { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; color: var(--c-text); background: none; border: 0; border-radius: var(--r-klein); cursor: pointer; }
.kopf__burger .auf { display: none; }
.kopf__burger[aria-expanded="true"] .auf { display: block; }
.kopf__burger[aria-expanded="true"] .zu { display: none; }

@media (max-width: 1023px) {
  .kopf__nav { position: fixed; inset: 76px 0 auto; display: none; flex-direction: column; gap: var(--s-4); padding: var(--s-5); background: var(--c-papier); border-bottom: 1px solid var(--c-linie); box-shadow: 0 12px 28px rgba(22,36,31,.1); }
  .kopf__nav.ist-offen { display: flex; }
  .kopf__nav ul { flex-direction: column; gap: var(--s-4); }
  .kopf__nav a { font-size: 1.0625rem; }
  .kopf__nav .kopf__tel--menue { display: inline-flex; }
  .kopf__aktion .kopf__tel { display: none; }
  .kopf__btn { display: none; }
  .kopf__burger { display: inline-flex; }
}

.fuss__raster { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss__text { margin-top: var(--s-4); font-size: var(--fs-klein); color: #BCC7C2; }
.fuss__titel { font-family: var(--f-kopf); font-weight: 600; color: #fff; margin-bottom: var(--s-3); }
.fuss__nap { font-size: var(--fs-klein); line-height: 1.8; margin: 0; }
.fuss__links { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); font-size: var(--fs-klein); }
.fuss__unten { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.14); font-size: .8125rem; color: #9FABA5; }
.fuss__unten p { margin: 0; }

/* Schwebende Knoepfe am Desktop, Aktionsleiste am Handy */
.schwebe { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 25; display: none; flex-direction: column; gap: var(--s-3); opacity: 0; pointer-events: none; transition: opacity var(--t); }
.schwebe.ist-sichtbar { opacity: 1; pointer-events: auto; }
.schwebe__knopf { box-shadow: 0 6px 20px rgba(22,36,31,.18); }
.schwebe__tel { background: var(--c-blau); color: #fff; }
@media (min-width: 1024px) { .schwebe { display: flex; } }

.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--c-weiss); border-top: 1px solid var(--c-linie); box-shadow: 0 -4px 18px rgba(22,36,31,.08); padding-bottom: env(safe-area-inset-bottom); }
.leiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px; font-size: .75rem; font-weight: 600; color: var(--c-text); text-decoration: none; }
.leiste__wa { color: #0E7A42; }
.leiste__haupt { background: var(--c-blau); color: #fff; }
@media (min-width: 1024px) { .leiste { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 62px; } }

/* Zustaende, die main.js setzt */
.kopf.ist-gescrollt { box-shadow: 0 2px 14px rgba(22,36,31,.08); }
body.menue-offen { overflow: hidden; }

/* Quellenblock (seo-bau Phase 4) und Inhaltsverzeichnis */
.sektion--schmal { padding: var(--s-6) 0 0; }
.ivz { padding: var(--s-5); background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r); }
.ivz summary { font-family: var(--f-kopf); font-weight: 600; font-size: 1.05rem; cursor: pointer; }
.ivz ol { margin: var(--s-4) 0 0; padding-left: 1.4em; display: grid; gap: var(--s-2); font-size: var(--fs-klein); }
.ivz a { color: var(--c-text); text-decoration: none; }
.ivz a:hover { color: var(--c-blau); text-decoration: underline; }

.quellen { padding: var(--s-7) 0 var(--s-9); }
.quellen-box { background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r); }
.quellen-kopf { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5); font-family: var(--f-kopf); font-weight: 600; cursor: pointer; }
.quellen-zahl { margin-left: auto; font-family: var(--f-text); font-weight: 400; font-size: var(--fs-klein); color: var(--c-grau); }
.quellen-inhalt { padding: 0 var(--s-5) var(--s-5); }
.quellen-vorwort { font-size: var(--fs-klein); color: var(--c-grau); max-width: 72ch; }
.quellen-liste { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s-3); font-size: var(--fs-klein); }
.quellen-liste li { color: var(--c-grau); }
.q-aussage { display: block; color: var(--c-text); font-weight: 600; }
.q-link { display: block; word-break: break-word; }
.q-datum { display: block; font-size: .8125rem; }
.quellen-nachwort { margin: var(--s-5) 0 0; font-size: var(--fs-klein); color: var(--c-grau); }

/* Fussnotenziffern im Text */
.fn { font-size: .68em; line-height: 0; vertical-align: super; }
.fn a { color: var(--c-blau); text-decoration: none; padding: 0 1px; }
.fn a:hover { text-decoration: underline; }

/* Galerie */
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gal__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: var(--r); }

/* Zweispaltig: Text links, Bild rechts (Reza 07.11.2026) */
.zwei { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .zwei { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.zwei__bild img { width: 100%; display: block; border-radius: var(--r-gross); box-shadow: 0 10px 34px rgba(22,36,31,.12); }

/* Klassen, die die gemeinsamen Partials brauchen und sonst ungestylt waeren.
   .formular__ehp ist eine Bot-Falle und MUSS unsichtbar sein (Reza hat sie
   am 07.11.2026 auf der Seite gesehen, weil diese Regel hier fehlte). */
.formular__ehp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__ergebnis--fehler .formular__ergebnis-titel { color: var(--c-fehler); }
.kacheln--form .kachel__flaeche { background: var(--c-papier); }
.quellen-wort { font-family: var(--f-kopf); }
.schwebe__text { font-size: var(--fs-klein); font-weight: 600; }

/* Gegen den kargen Eindruck: Abschnitte bekommen Kontur */
.sektion--hell { border-top: 1px solid var(--c-linie); border-bottom: 1px solid var(--c-linie); }
.kopfzeile .kicker { display: inline-flex; align-items: center; gap: var(--s-2); }
.kopfzeile .kicker::before { content: ""; width: 22px; height: 2px; background: var(--c-blau); border-radius: 2px; }
.arten__punkt { transition: box-shadow var(--t), transform var(--t); }
.arten__punkt:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(22,36,31,.08); }
.gebiet__bezirk { border-left: 3px solid var(--c-blau); }
.block p { max-width: 68ch; }
.strahl__punkt h3 { color: var(--c-tanne); }
.gal__item img { transition: transform var(--t); }
.gal__item:hover img { transform: scale(1.02); }
.termin { display: none; }

/* Handy: Hero-Text kompakt halten, damit das Motiv sichtbar bleibt */
@media (max-width: 767px) {
  /* Text ganz nach unten, damit die obere Bildhaelfte das Motiv zeigt.
     Der Schleier ist oben fast klar und wird nach unten dicht, so bleibt der
     LKW erkennbar und der Text trotzdem lesbar (Reza 07.11.2026). */
  .hero { min-height: 94svh; align-items: end; padding: var(--s-6) 0 var(--s-6); }
  .hero__inhalt { margin-top: auto; }
  .hero__lead { font-size: 1rem; }
  .hero__knoepfe { margin-top: var(--s-5); }
  .hero__punkte { gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
  .hero__bild img { object-position: center top; }
  .hero__schleier { background: linear-gradient(180deg,
      rgba(10,20,16,.18) 0%, rgba(10,20,16,.12) 26%,
      rgba(10,20,16,.58) 50%, rgba(10,20,16,.86) 72%, rgba(10,20,16,.94) 100%); }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
}

/* Laufband: was wir abholen, laeuft von links nach rechts.
   Zwei identische Listen hintereinander, die zweite aria-hidden, damit
   der Uebergang nahtlos ist und Screenreader nichts doppelt vorlesen. */
.band { padding: var(--s-7) 0 var(--s-6); background: var(--c-weiss); border-bottom: 1px solid var(--c-linie); overflow: hidden; }
.band__titel { margin: 0 0 var(--s-5); text-align: center; font: 600 .8125rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--c-grau); }
.band__fenster { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.band__lauf { display: flex; gap: var(--s-8); width: max-content; margin: 0; padding: 0; list-style: none; animation: band 46s linear infinite; }
.band__fenster:hover .band__lauf { animation-play-state: paused; }
.band__lauf li { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); color: var(--c-tanne); opacity: .62; transition: opacity var(--t), color var(--t); }
.band__lauf li:hover { opacity: 1; color: var(--c-blau); }
.band__lauf span { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; }
@keyframes band { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .band__lauf { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: var(--s-5); }
  .band__fenster { -webkit-mask-image: none; mask-image: none; }
}

/* Kennzahlen: nur belegte Werte */
.zahlen { padding: var(--s-7) 0; background: var(--c-weiss); border-bottom: 1px solid var(--c-linie); }
.zahlen__raster { display: grid; gap: var(--s-5); }
@media (min-width: 600px) { .zahlen__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .zahlen__raster { grid-template-columns: repeat(4, 1fr); } }
.zahl { display: flex; gap: var(--s-4); align-items: flex-start; }
@media (min-width: 1000px) { .zahl + .zahl { padding-left: var(--s-5); border-left: 1px solid var(--c-linie); } }
.zahl__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: var(--c-blau); background: var(--c-blau-50); border-radius: var(--r-klein); }
.zahl__wert { margin: 0; font: 700 clamp(1.5rem, 3vw, 2rem)/1 var(--f-kopf); color: var(--c-blau); }
.zahl__titel { margin: 4px 0 2px; font-weight: 600; color: var(--c-tanne); }
.zahl__text { margin: 0; font-size: var(--fs-klein); color: var(--c-grau); }

/* Inhaltsverzeichnis neben dem Bild */
.zwei--ivz { align-items: start; }
@media (min-width: 900px) { .zwei--ivz { grid-template-columns: 1.15fr .85fr; } }
.zwei--ivz .ivz { margin: 0; }
.zwei--ivz .zwei__bild img { aspect-ratio: 4/3; object-fit: cover; }

/* Zeitstrahl-Animation (Reza 08.11.2026): die Schritte erscheinen nacheinander,
   die Ziffer poppt auf, die Verbindungslinie waechst von links nach rechts.
   main.js haengt .einblenden an und setzt .ist-sichtbar, sobald das Element im Bild ist. */
.strahl__punkt.einblenden { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * 180ms); }
.strahl__punkt.einblenden.ist-sichtbar { opacity: 1; transform: none; }

.strahl__punkt::before { transform: scale(.55); opacity: 0; transition: transform .45s cubic-bezier(.3,1.5,.5,1), opacity .3s ease; transition-delay: calc(var(--i, 0) * 180ms + 90ms); }
.strahl__punkt.ist-sichtbar::before { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .strahl__punkt::before { transform: none; opacity: 1; } }

@media (min-width: 820px) {
  .strahl__punkt::after { transform-origin: left center; transform: scaleX(0); transition: transform .65s cubic-bezier(.3,.8,.3,1); transition-delay: calc(var(--i, 0) * 180ms + 260ms); }
  .strahl__punkt.ist-sichtbar::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { .strahl__punkt::after { transform: none; } }
}

/* Ohne JS bleibt alles sichtbar */
html:not(.js) .strahl__punkt { opacity: 1; transform: none; }
html:not(.js) .strahl__punkt::before { transform: none; opacity: 1; }
html:not(.js) .strahl__punkt::after { transform: none; }

/* Material-Kacheln erscheinen gestaffelt wie der Zeitstrahl */
.arten__punkt.einblenden { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.arten__punkt.einblenden.ist-sichtbar { opacity: 1; transform: none; }
html:not(.js) .arten__punkt { opacity: 1; transform: none; }

/* Vergleich der drei Entsorgungswege (Reza 08.11.2026).
   Desktop: echte Tabelle, unsere Spalte hervorgehoben.
   Handy: jede Zeile wird zur Karte, die Spaltennamen kommen aus data-spalte. */
.vgl { margin-top: var(--s-7); }
.vgl__titel { font-family: var(--f-kopf); font-weight: 700; font-size: var(--fs-h3); color: var(--c-tanne); }
.vgl__lead { margin: var(--s-3) 0 var(--s-5); color: var(--c-grau); max-width: 64ch; }
.vgl__rolle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vgl__tabelle { width: 100%; border-collapse: collapse; background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r); overflow: hidden; }
.vgl__tabelle th, .vgl__tabelle td { padding: var(--s-3) var(--s-4); text-align: left; font-size: var(--fs-klein); border-bottom: 1px solid var(--c-linie); }
.vgl__tabelle thead th { font-family: var(--f-kopf); font-weight: 600; color: var(--c-tanne); background: var(--c-papier); white-space: nowrap; }
.vgl__tabelle tbody th { font-weight: 600; color: var(--c-text); }
.vgl__tabelle tbody tr:last-child th, .vgl__tabelle tbody tr:last-child td { border-bottom: 0; }
.vgl__tabelle td { text-align: center; }
.vgl__tabelle thead th:not(:first-child) { text-align: center; }
.vgl__wir { background: var(--c-blau-50); }
.vgl__tabelle thead th.vgl__wir { background: var(--c-blau); color: #fff; }
.vgl__ja { display: inline-flex; color: #0E7A42; }
.vgl__nein { color: var(--c-grau); font-size: 1.1rem; }
.vgl__wert { font-weight: 700; color: var(--c-blau); }
.vgl__fuss { margin: var(--s-4) 0 0; font-size: var(--fs-klein); color: var(--c-grau); max-width: 68ch; }

@media (max-width: 720px) {
  .vgl__tabelle, .vgl__tabelle tbody, .vgl__tabelle tr, .vgl__tabelle td, .vgl__tabelle th { display: block; }
  .vgl__tabelle { border: 0; background: none; }
  .vgl__tabelle thead { position: absolute; left: -9999px; }
  .vgl__tabelle tr { margin-bottom: var(--s-4); background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r); overflow: hidden; }
  .vgl__tabelle tbody th { background: var(--c-papier); border-bottom: 1px solid var(--c-linie); }
  .vgl__tabelle td { display: flex; justify-content: space-between; align-items: center; text-align: right; border-bottom: 1px solid var(--c-linie); }
  .vgl__tabelle td::before { content: attr(data-spalte); font-weight: 600; color: var(--c-grau); text-align: left; }
  .vgl__tabelle tr td:last-child { border-bottom: 0; }
}

/* Gewerbegebiete als Raster statt als Aufzaehlung im Fliesstext */
.orte { display: grid; gap: var(--s-3); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .orte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .orte { grid-template-columns: repeat(4, 1fr); } }
.orte__punkt { padding: var(--s-4); background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r); border-top: 3px solid var(--c-blau); transition: box-shadow var(--t), transform var(--t); }
.orte__punkt:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,36,31,.07); }
.orte__name { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-2); font-family: var(--f-kopf); font-weight: 700; font-size: 1rem; color: var(--c-tanne); }
.orte__name svg { color: var(--c-blau); }
.orte__text { margin: 0; font-size: var(--fs-klein); color: var(--c-grau); }
.orte__punkt.einblenden { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.orte__punkt.einblenden.ist-sichtbar { opacity: 1; transform: none; }
html:not(.js) .orte__punkt { opacity: 1; transform: none; }

/* Autobahnschilder, selbst gezeichnet (keine fremde Grafik) */
.zwei--anfahrt { align-items: start; }
@media (min-width: 900px) { .zwei--anfahrt { grid-template-columns: 1.3fr .7fr; } }
.bab { padding: var(--s-5); background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r); }
.bab__liste { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.bab__schild { display: grid; place-items: center; min-width: 74px; padding: var(--s-2) var(--s-3); font: 700 1.25rem/1 var(--f-kopf); letter-spacing: .02em; color: #fff; background: #0A3C7D; border: 2px solid #fff; border-radius: 7px; box-shadow: 0 0 0 1px #0A3C7D, 0 3px 8px rgba(10,60,125,.22); }
.bab__text { margin: 0; font-size: var(--fs-klein); color: var(--c-grau); }

/* Checkliste statt Paragraphen-Wueste */
.check { display: grid; gap: var(--s-3); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.check__punkt { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-4); align-items: start; padding: var(--s-4) var(--s-5); background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r); }
@media (min-width: 760px) { .check__punkt { grid-template-columns: auto 1fr auto; align-items: center; } }
.check__haken { display: grid; place-items: center; width: 34px; height: 34px; color: #0E7A42; background: #E6F4EC; border-radius: 50%; }
.check__frage { margin: 0 0 2px; font-family: var(--f-kopf); font-weight: 600; font-size: 1.05rem; color: var(--c-tanne); }
.check__text { margin: 0; font-size: var(--fs-klein); color: var(--c-grau); max-width: 60ch; }
.check__gesetz { grid-column: 2; margin: 0; font-size: .8125rem; font-weight: 600; color: var(--c-blau); white-space: nowrap; }
@media (min-width: 760px) { .check__gesetz { grid-column: 3; padding-left: var(--s-4); border-left: 1px solid var(--c-linie); } }
.check__punkt.einblenden { opacity: 0; transform: translateX(-10px); transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.check__punkt.einblenden.ist-sichtbar { opacity: 1; transform: none; }
html:not(.js) .check__punkt { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   Nachtrag 08.11.2026 nach dem Klassenabgleich im SEO-Audit.
   Jede Klasse, die kopf.njk, fuss.njk, formular.njk, makros.njk und die
   Rechtsseiten verwenden, MUSS hier stehen: abholung.css laedt main.css nicht.
   Fehlt eine, steht der Baustein ungestylt da. Genau so war am 07.11. die
   Bot-Falle sichtbar geworden.
   --------------------------------------------------------------------------- */

/* Materialplaettchen im Formular. Im Ankauf tragen sie die Stanzecke, hier den
   weichen Radius des Tourenplans (DESIGN-ABHOLUNG.md, Achse "Form"). */
.pl { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--pl, var(--c-grau)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.pl--gross { width: 26px; height: 26px; border-radius: 8px; }
.pl--kabel { background: linear-gradient(135deg, #B4532A 50%, #3A4441 50%); }

/* Rechtsseiten: Brotkrumen und Textspalte */
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: var(--s-5) 0 0; font-size: var(--fs-klein); color: var(--c-grau); }
.brotkrumen a { color: var(--c-blau); text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }
.brotkrumen li + li::before { content: "›"; margin-right: var(--s-2); color: var(--c-linie); }
.recht { max-width: 72ch; }
.recht h1 { margin-bottom: var(--s-5); }
.recht h2 { font-family: var(--f-text); font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin: var(--s-6) 0 var(--s-2); }
.recht p { margin: 0 0 var(--s-3); }
.recht a { color: var(--c-blau); }
.recht ul { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
.recht li { margin-bottom: var(--s-2); }

/* Luecke: gelb markierte Stelle, die noch echte Daten braucht */
.luecke { display: inline; padding: 1px 6px; background: #FFF3C4; color: #5C4300; border: 1px dashed #B88A00; border-radius: 6px; font-size: .92em; font-weight: 600; }
.entwurf-hinweis { padding: var(--s-4); background: #FFF8E1; border-left: 3px solid #B88A00; border-radius: var(--r-klein); color: #5C4300; }

/* Staedtischer Wertstoffhof im Kosten-Abschnitt (08.11.2026). Bewusst ruhiger
   gesetzt als die Vergleichstabelle darueber: es ist ein Hinweis, kein Angebot. */
.hof { margin-top: var(--s-7); padding: var(--s-5); background: var(--c-weiss); border-radius: var(--r-gross); box-shadow: inset 0 0 0 1px var(--c-linie); }
.hof__h3 { font-family: var(--f-text); font-size: 1.05rem; font-weight: 700; margin: 0 0 var(--s-3); }
.hof p { margin: 0 0 var(--s-3); color: var(--c-grau); font-size: var(--fs-klein); line-height: 1.6; }
.hof p:last-child { margin-bottom: 0; }