/* =====================================================================================
   Vorlage 24 Bauer Gert · Gestaltung
   Bautyp Karteikasten: oben drei Reiter wie an einem Aktenschrank, darunter der dunkle Kasten aus Blech
   mit den Karteikarten aus Karton (Lochung oben, blaue Linien, Kopflinie, Preisschild rechts oben,
   Nummern und Baujahre in Mono). Knöpfe wie Schilder aus Blech: eckig, dunkel, gelbe Schrift, zwei Schrauben.
   Reihenfolge der Datei: Grund, Kopf, Kasten und Karten, Fahrgestell im Licht, Anfahrt, ruhige Abschnitte,
   Kontakt, Fuß, Auftritte, Bildschirmbreiten.
   ===================================================================================== */

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--schrift); font-size: 17px; line-height: 1.55; color: var(--text); background: var(--bg); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; letter-spacing: -.015em; font-weight: 780; }
p { margin: 0 0 1em; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
address { font-style: normal; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .lade:focus-visible, .teil-karte:focus-visible { outline: 3px solid var(--accent-tief); outline-offset: 3px; }
.fach :focus-visible, .kontakt :focus-visible, .fuss :focus-visible, .karte-buehne :focus-visible { outline-color: var(--accent); }
.behaelter { width: min(100% - 40px, var(--breite)); margin-inline: auto; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--radius-klein); background: var(--blech); color: var(--gelb-auf-blech); font-weight: 700; }
.sprung:focus { top: 12px; }
.marke { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.marke::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--accent); border: 1px solid var(--accent-tief); }
.marke-hell { color: var(--blech-leise); }
.leise { color: var(--muted); }
.klein { font-size: 13px; }
.abschnitt-kopf { max-width: 680px; margin-bottom: 30px; }
.abschnitt-kopf h2, .herkunft h2, .kontakt h2, .anfahrt-kopf h2 { font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -.02em; }

/* ---------- Knöpfe: Schilder aus Blech ---------- */
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border: 1px solid var(--blech-rand); border-radius: var(--radius-klein); background: var(--blech); color: var(--gelb-auf-blech); font: inherit; font-weight: 740; font-size: 16px; letter-spacing: .03em; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 #0b0c0d; transition: background .2s, transform .15s, box-shadow .15s; }
.knopf::before, .knopf::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8a9098, #3a3f45 70%); box-shadow: inset 0 0 0 1px #0b0c0d; }
.knopf::before { left: 8px; }
.knopf::after { right: 8px; }
.knopf:hover { background: var(--blech-hell); }
.knopf:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 #0b0c0d; }
.knopf-klein { min-height: 42px; padding: 0 20px; font-size: 14px; }
.knopf-leise { background: transparent; color: var(--text); border-color: var(--text); box-shadow: none; }
.knopf-leise::before, .knopf-leise::after { display: none; }
.knopf-leise:hover { background: rgba(0, 0, 0, .06); }
.knopf-gelb { background: var(--accent); color: var(--on-accent); border-color: var(--accent-tief); box-shadow: 0 2px 0 var(--accent-tief); font-family: var(--mono); font-size: 17px; }
.knopf-gelb:hover { background: #ffd21a; }
.knopf-gelb::before, .knopf-gelb::after { background: radial-gradient(circle at 35% 35%, #6b6050, #2a2620 70%); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 30; height: var(--kopf); background: rgba(232, 228, 219, .94); border-bottom: 1px solid var(--border); }
.kopf-innen { display: flex; align-items: center; gap: 22px; height: 100%; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.01em; text-decoration: none; }
.logo-zeichen { width: 30px; height: 24px; color: var(--blech); }
.menue { display: flex; gap: 20px; margin-left: auto; }
.menue a { padding: 6px 0; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.menue a:hover { color: var(--text); border-color: var(--accent-tief); }
.kopf-tel { font-family: var(--mono); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }

/* ---------- Der Karteikasten ---------- */
.kasten-bereich { padding: 34px 0 var(--abstand); }
.kasten-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; margin-bottom: 26px; }
.kasten-kopf h1 { max-width: 760px; margin: 0; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.025em; }
.einleitung { max-width: 400px; margin: 0 0 6px; color: var(--muted); }

.reiter-leiste { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 8px; padding: 0 20px; }
.reiter { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; min-height: 78px; padding: 14px 24px; color: var(--text); text-decoration: none; background: #cdc5b3; border: 1px solid #ada48f; border-bottom: 0; border-radius: 10px 10px 0 0; transform: perspective(120px) rotateX(4deg) translateY(10px); transform-origin: 50% 100%; box-shadow: inset 0 -14px 16px -16px rgba(0, 0, 0, .45); transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s, box-shadow .3s; }
.reiter b { display: block; font-size: clamp(15px, 1.45vw, 20px); font-weight: 780; letter-spacing: -.01em; }
.reiter span { display: block; margin-top: 2px; font-size: 13px; color: #3f444a; }  /* 5,6 : 1 auf dem dunkleren Reiter */
.reiter:hover { background: #d9d2c0; transform: perspective(120px) rotateX(4deg) translateY(5px); }
.reiter.ist-aktiv { z-index: 3; background: var(--surface); transform: perspective(120px) rotateX(4deg) translateY(0); box-shadow: 0 -6px 18px -8px rgba(0, 0, 0, .25); }
.reiter.ist-aktiv::before { content: ""; position: absolute; top: 12px; right: 16px; width: 12px; height: 12px; background: var(--accent); border: 1px solid var(--accent-tief); }

.fach { position: relative; z-index: 1; padding: 26px 22px 28px; color: var(--blech-text); background: var(--kasten); border-radius: 12px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 30px 50px -30px rgba(0, 0, 0, .55); }
.lade-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 32px; margin: 0 6px 22px; }
.lade-kopf h2 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); color: #fff; }
.lade-kopf p { max-width: 780px; margin: 0; font-size: 16px; color: var(--blech-leise); }
html.js .lade { display: none; }
html.js .lade.ist-aktiv { display: block; }
html:not(.js) .lade + .lade { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--blech-rand); }

/* ---------- Karteikarten ---------- */
.karten-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.karte { position: relative; min-width: 0; padding: 34px 22px 22px; color: var(--text); background-color: var(--surface); background-image: linear-gradient(var(--karte-linie) 1px, transparent 1px); background-size: 100% 28px; background-position: 0 78px; border-radius: 4px 4px var(--radius) var(--radius); box-shadow: 0 1px 0 rgba(0, 0, 0, .28), 0 10px 20px -14px rgba(0, 0, 0, .6); transition: transform .25s, box-shadow .25s; }
.karte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 24px; pointer-events: none; background: radial-gradient(circle at 38% 12px, var(--loch) 6.5px, transparent 7.5px), radial-gradient(circle at 62% 12px, var(--loch) 6.5px, transparent 7.5px); }
.karte::after { content: ""; position: absolute; left: 0; right: 0; top: 62px; height: 2px; pointer-events: none; background: var(--karte-kopf); }
.karte-kopf { display: flex; gap: 16px; min-height: 20px; margin: 0 0 20px; font-family: var(--mono); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.inserat .karte-kopf { padding-right: 130px; }
.karte h3 { margin: 14px 0 6px; font-size: 20px; letter-spacing: -.01em; }
.karte p { margin: 0 0 10px; }
.zustand { font-size: 15px; color: var(--muted); }
.karte-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 0 !important; }
html.js:not([data-bewegung="starr"]) .inserat:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .28), 0 22px 30px -16px rgba(0, 0, 0, .7); }

.preis { position: absolute; top: -12px; right: 14px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; margin: 0; padding: 7px 12px 6px 22px; font-family: var(--mono); font-weight: 700; font-size: 21px; line-height: 1; color: var(--on-accent); background: var(--accent); border-radius: 3px; box-shadow: 0 2px 0 var(--accent-tief), 0 8px 12px -8px rgba(0, 0, 0, .5); transform: rotate(2deg); }
.preis::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; background: var(--kasten); box-shadow: inset 0 0 0 1px var(--accent-tief); }
.preis small { margin-top: 4px; font-family: var(--schrift); font-weight: 600; font-size: 9.5px; letter-spacing: .02em; }

.stempel { position: absolute; left: 50%; top: 46%; z-index: 3; padding: 6px 16px; border: 3px double var(--stempel); border-radius: 4px; color: var(--stempel); font-weight: 800; font-size: 24px; letter-spacing: .16em; text-transform: uppercase; opacity: .88; mix-blend-mode: multiply; pointer-events: none; transform: translate(-50%, -50%) rotate(-14deg); }

.bild-platzhalter { position: relative; display: flex; align-items: flex-end; margin: 0 0 6px; aspect-ratio: var(--format, 4 / 3); overflow: hidden; border: 1px dashed #a89f8c; border-radius: 3px; background: repeating-linear-gradient(135deg, #e6dfd0 0 10px, #ded6c5 10px 20px); }
.bild-platzhalter figcaption { margin: 0; padding: 8px 10px; font-size: 12px; line-height: 1.35; color: var(--muted); background: rgba(251, 246, 234, .92); }

.legende-liste { margin: 0; }
.legende-liste div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; font-size: 15px; border-bottom: 1px solid var(--border); }
.legende-liste dt { font-family: var(--mono); font-weight: 600; }
.legende-liste dd { margin: 0; }

/* Karten fächern herein, wenn eine Lade aufgeht (nur dynamisch). backwards: danach gilt wieder die eigene Lage (Hover). */
html.js[data-bewegung="dynamisch"] .lade.ist-aktiv .karte { animation: faechern .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes faechern { from { opacity: 0; transform: translateY(26px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }

/* ---------- Das Fahrgestell im Licht (js/scheinwerfer.js) ---------- */
.lager { margin: 0 6px; }
.buehne { position: relative; aspect-ratio: 1200 / 500; overflow: hidden; border-radius: 8px; background: radial-gradient(ellipse at 50% 108%, #343941, #15171a 68%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); touch-action: pan-y; }
.buehne::after { content: ""; position: absolute; left: 0; right: 0; top: 88.4%; height: 1px; background: rgba(255, 255, 255, .08); }
.fg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fg-zeichnung * { vector-effect: non-scaling-stroke; }
.fg-grau { display: none; --fg-linie: #2b2e33; --fg-rahmen: #444950; --fg-rahmen-kante: #555b63; --fg-motor: #5b6067; --fg-motor-tief: #4d5258; --fg-deckel: #40454c; --fg-getriebe: #565b62; --fg-getriebe-tief: #484d54; --fg-welle: #555a61; --fg-gelenk: #43484f; --fg-achse: #4a4f56; --fg-feder: #6a7078; --fg-daempfer: #3e434a; --fg-reifen: #2d3036; --fg-felge: #5d626a; --fg-felge-tief: #4c5158; --fg-tank: #3f444b; --fg-auspuff: #5a5f66; --fg-bremse: #4f545b; }
.schild rect { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.schild .streifen { fill: var(--accent); stroke: none; }
.schild text { font-family: var(--schrift); font-size: 17px; font-weight: 740; fill: var(--text); }
.schild .rubrik { font-size: 13px; font-weight: 600; fill: var(--muted); }
.schild line { stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Mit Licht: die graue Silhouette liegt unten, die farbige Ebene wird vom Scheinwerfer freigestellt (Maske folgt der Maus). */
html.licht-an .fg-grau { display: block; }
html.licht-an .fg-bunt { -webkit-mask-image: radial-gradient(circle closest-side, #000 60%, rgba(0, 0, 0, .55) 80%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 60%, rgba(0, 0, 0, .55) 80%, transparent 100%); -webkit-mask-size: calc(var(--r) * 2) calc(var(--r) * 2); mask-size: calc(var(--r) * 2) calc(var(--r) * 2); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: calc(var(--lx) - var(--r)) calc(var(--ly) - var(--r)); mask-position: calc(var(--lx) - var(--r)) calc(var(--ly) - var(--r)); }
.kegel { position: absolute; left: 0; top: 0; display: none; width: calc(var(--r) * 2.4); height: calc(var(--r) * 2.4); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 222, 120, .26) 0, rgba(255, 222, 120, .09) 45%, transparent 70%); transform: translate(calc(var(--lx) - var(--r) * 1.2), calc(var(--ly) - var(--r) * 1.2)); will-change: transform; }
html.licht-an .kegel { display: block; }
html.licht-an[data-bewegung="dynamisch"] .kegel { animation: atmen 3.2s ease-in-out infinite; }
@keyframes atmen { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

.treffer button { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.treffer button:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }
html:not(.js) .treffer { display: none; }
.buehne-hinweis { margin: 10px 6px 0; font-size: 13px; color: var(--blech-leise); }
@media (hover: hover) { .nur-finger { display: none; } }
@media (hover: none) { .nur-maus { display: none; } }

.teil-karte { margin: 22px 0 0; }
.teil-karte[hidden] { display: none; }
.tk-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; margin: 0 0 12px; }
.tk-liste dt { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tk-liste dd { margin: 2px 0 0; font-size: 16px; }
#tk-bj, #tk-nr { font-family: var(--mono); }
html.js[data-bewegung="mittel"] .teil-karte.ist-gezogen, html.js[data-bewegung="dynamisch"] .teil-karte.ist-gezogen { animation: ziehen .5s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes ziehen { from { opacity: 0; transform: translateY(-34px) rotate(-1.2deg); } to { opacity: 1; transform: none; } }
.rubriken { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }
.karte-rubrik h3 { margin-top: 8px; }

/* ---------- Die Anfahrt (js/anfahrt.js) ----------
   Ruhige Fassung (Grundzustand, auch ohne JavaScript): Karte als Skizze rechts, die sechs Schritte als Karten links.
   Mit .anfahrt-an: Karte klebt rechts und zeigt nur einen Ausschnitt, die Schritte scrollen links vorbei. */
.anfahrt { padding: var(--abstand) 0 0; }
.anfahrt-kopf { max-width: 680px; margin-bottom: 28px; }
.anfahrt-raster { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: 36px; align-items: start; }
.fahrt-schritte { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.fahrt-schritt { position: relative; padding: 22px 22px 18px 24px; background: var(--surface); border-left: 4px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.schritt-nr { margin: 0 0 6px; font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--muted); }
.fahrt-schritt h3 { margin: 0 0 8px; font-size: 20px; }
.fahrt-schritt p { margin: 0 0 8px; font-size: 16px; }
.fahrt-schritt .knopf { margin-top: 6px; }
.karte-buehne { position: relative; overflow: hidden; background: #e3e6d8; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.karte-svg { display: block; width: 100%; height: auto; }
.karte-svg text { font-family: var(--schrift); fill: #4f545b; }
.karte-svg .ort { font-size: 22px; font-weight: 700; letter-spacing: .02em; fill: #5a5f66; }
.karte-svg .a1 { font-size: 24px; font-weight: 800; fill: #fff; text-anchor: middle; }
.karte-svg .marke-text { font-size: 18px; font-weight: 800; fill: #1f2225; text-anchor: middle; }
.karte-svg .klein-text { font-size: 12px; fill: #3f444a; text-anchor: middle; }
.karte-svg .firma-text { font-size: 10px; font-weight: 800; letter-spacing: .06em; fill: #f2c200; text-anchor: middle; }
.karte-svg .strasse-text { font-size: 14px; fill: #4f545b; text-anchor: middle; }
.wegweiser rect { fill: #f3f1ea; stroke: #1f2225; stroke-width: 2; vector-effect: non-scaling-stroke; }
.wegweiser text { font-size: 19px; font-weight: 700; fill: #1f2225; }
.wegweiser .mitte { text-anchor: middle; }
.wegweiser .pfeil { fill: none; stroke: #1f2225; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wegweiser.blau rect { fill: #1d5fa8; }
.wegweiser.blau text { fill: #fff; }
.tor-balken { transform-box: fill-box; transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.tor-balken.offen { transform: rotate(-75deg); }
.blinker { display: none; }
.wagen.blinkt-rechts .blinker-r { display: block; animation: blinken .8s linear infinite; }
@keyframes blinken { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.navi { position: absolute; top: 14px; right: 14px; max-width: min(62%, 300px); padding: 10px 14px; color: var(--blech-text); background: rgba(31, 34, 37, .93); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.navi-rest { margin: 0; font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--gelb-auf-blech); }
.navi-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--blech-leise); }
.tor-schild { position: absolute; left: 50%; bottom: 18px; margin: 0; padding: 12px 22px; font-weight: 800; font-size: 18px; line-height: 1.2; text-align: center; color: var(--gelb-auf-blech); background: var(--blech); border: 1px solid var(--blech-rand); border-radius: 3px; box-shadow: 0 2px 0 #0b0c0d; transform: translate(-50%, 0); }
.tor-schild span { display: block; margin-top: 2px; font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--blech-text); }

html.anfahrt-an .anfahrt-raster { align-items: stretch; }
html.anfahrt-an .fahrt-schritte { gap: 0; padding: 6vh 0 30vh; }
html.anfahrt-an .fahrt-schritt { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 0 0 0 26px; background: transparent; border-left: 3px solid var(--border); border-radius: 0; box-shadow: none; opacity: .38; transition: opacity .4s, border-color .4s; }
html.anfahrt-an .fahrt-schritt.ist-aktiv { opacity: 1; border-left-color: var(--accent-tief); }
html.anfahrt-an .karte-buehne { position: sticky; top: calc(var(--kopf) + 14px); height: calc(100vh - var(--kopf) - 28px); }
html.anfahrt-an .karte-svg { width: 100%; height: 100%; }
html.anfahrt-an .wegweiser { opacity: 0; transition: opacity .35s; }
html.anfahrt-an .wegweiser.an { opacity: 1; }
html.anfahrt-an .tor-schild { opacity: 0; transform: translate(-50%, 14px); transition: opacity .4s, transform .4s; }
html.anfahrt-an .tor-schild.an { opacity: 1; transform: translate(-50%, 0); }

/* ---------- So läuft es ---------- */
.ablauf { padding: var(--abstand) 0 0; }
.ablauf-karten { --loch: var(--bg); }
.karte-ablauf { padding-top: 40px; }
.ablauf-nr { position: absolute; top: 20px; right: 22px; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; font-family: var(--mono); font-size: 26px; font-weight: 800; line-height: 1; color: var(--gelb-auf-blech); background: var(--blech); border: 1px solid var(--blech-rand); border-radius: 3px; box-shadow: 0 2px 0 #0b0c0d; }

/* ---------- Zahlen ---------- */
.zahlen { padding: var(--abstand) 0 0; }
.zahlen-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0 auto; padding: 34px 0; list-style: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.zahlen-liste b { display: inline-block; font-family: var(--mono); font-size: clamp(36px, 4vw, 54px); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.zahlen-liste span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }

/* ---------- Seit August 2010 in Mauer ---------- */
.herkunft { padding: var(--abstand) 0 0; }
.herkunft-raster { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; }
.herkunft-text p { max-width: 62ch; }
.bild-portrait { max-width: 520px; margin-top: 24px; }
.familie { position: relative; margin: 0; padding: 10px 0 0 34px; list-style: none; }
.familie::before { content: ""; position: absolute; left: 9px; top: 18px; bottom: 30px; width: 2px; background: var(--text); transform-origin: 50% 0; }
.familie li { position: relative; padding: 0 0 26px; }
.familie li::before { content: ""; position: absolute; left: -34px; top: 7px; width: 14px; height: 14px; border: 3px solid var(--text); border-radius: 50%; background: var(--accent); }
.familie b { display: block; font-family: var(--mono); font-weight: 700; font-size: 17px; }
.familie span { display: block; margin-top: 2px; font-size: 15px; color: var(--muted); }

/* ---------- Kontakt ---------- */
.kontakt { margin-top: var(--abstand); padding: var(--abstand) 0; color: var(--blech-text); background: var(--blech); }
.kontakt-raster { display: grid; grid-template-columns: 1fr minmax(320px, 520px); gap: 48px; align-items: start; }
.kontakt h2 { color: #fff; }
.hinweis-schild { display: inline-block; margin: 0 0 26px; padding: 14px 20px; font-weight: 800; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.2; color: var(--on-accent); background: var(--accent); border: 2px solid var(--accent-tief); border-radius: 3px; box-shadow: 0 3px 0 var(--accent-tief); transform-origin: 50% 0; }
.hinweis-schild span { display: block; margin-top: 4px; font-weight: 600; font-size: 14px; }
.adressen { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0 0 22px; }
.adressen address { line-height: 1.5; }
.adressen b { display: block; margin-bottom: 4px; color: #fff; }
.leise-hell { color: var(--blech-leise); }
.kontakt-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0 0 14px; }
.kontakt-wege a:not(.knopf) { font-weight: 600; color: var(--blech-text); }
.formular { --loch: var(--blech); padding-top: 40px; }
.formular h3 { margin: 10px 0 16px; }
.feld { margin-bottom: 14px; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feld label { display: block; margin-bottom: 6px; font-weight: 640; font-size: 15px; }
.feld label small { font-weight: 500; font-size: 13px; color: var(--muted); }
.feld input, .feld textarea { width: 100%; padding: 12px 13px; font: inherit; font-size: 16px; color: var(--text); background: #fff; border: 1px solid #b8b0a0; border-radius: var(--radius-klein); }
.feld input:focus, .feld textarea:focus { outline: 3px solid var(--accent-tief); outline-offset: 1px; border-color: var(--text); }
.formular .knopf { width: 100%; margin-top: 6px; }
.formular-meldung { min-height: 1.4em; margin: 12px 0 0; font-weight: 600; }

/* ---------- Fuß ---------- */
.fuss { padding: 52px 0 0; font-size: 15px; color: var(--blech-leise); background: var(--kasten-tief); border-top: 1px solid var(--blech-rand); }
.fuss-raster { display: grid; grid-template-columns: 1.2fr 1.1fr 1fr; gap: 32px; }
.fuss address { margin: 0 0 14px; }
.fuss b { color: var(--blech-text); }
.fuss a { color: var(--blech-text); }
.fuss-logo { margin: 0 0 6px; font-weight: 800; font-size: 20px; color: #fff; }
.fuss-links a { margin-right: 16px; }
.fuss-demo { margin: 36px 0 0; padding-top: 20px; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.fuss-zeile { width: 100%; max-width: none; margin: 0; padding: 22px 20px 26px; text-align: center; font-size: 13px; color: #8a9099; }
.fuss-zeile a { color: #a7acb3; }
.anruf-leiste { display: none; }

/* ---------- Auftritte beim Hereinscrollen (js/main.js setzt .ist-da), eine Bewegung je Abschnitt ----------
   leer: einblenden und heben · kipp: Karte kippt herein · stempel: Zahl stempelt sich · linie: Linie zeichnet sich · klapp: Schild klappt auf */
html.js[data-bewegung="mittel"] [data-auftritt=""], html.js[data-bewegung="dynamisch"] [data-auftritt=""] { opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.js [data-auftritt=""].ist-da { opacity: 1; transform: none; }
html.js[data-bewegung="mittel"] [data-auftritt="kipp"], html.js[data-bewegung="dynamisch"] [data-auftritt="kipp"] { opacity: 0; transform: perspective(900px) rotateX(-18deg) translateY(30px); transform-origin: 50% 100%; transition: opacity .55s, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.js [data-auftritt="kipp"].ist-da { opacity: 1; transform: none; }
html.js[data-bewegung="mittel"] [data-auftritt="stempel"] b, html.js[data-bewegung="dynamisch"] [data-auftritt="stempel"] b { opacity: 0; transform: scale(1.4) rotate(-4deg); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), opacity .25s; }
html.js [data-auftritt="stempel"].ist-da b { opacity: 1; transform: none; }
html.js[data-bewegung="mittel"] [data-auftritt="linie"]::before, html.js[data-bewegung="dynamisch"] [data-auftritt="linie"]::before { transform: scaleY(0); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
html.js [data-auftritt="linie"].ist-da::before { transform: scaleY(1); }
html.js[data-bewegung="mittel"] [data-auftritt="linie"] li, html.js[data-bewegung="dynamisch"] [data-auftritt="linie"] li { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
html.js [data-auftritt="linie"] li:nth-child(2) { transition-delay: .15s; }
html.js [data-auftritt="linie"] li:nth-child(3) { transition-delay: .3s; }
html.js [data-auftritt="linie"] li:nth-child(4) { transition-delay: .45s; }
html.js [data-auftritt="linie"].ist-da li { opacity: 1; transform: none; }
html.js[data-bewegung="mittel"] [data-auftritt="klapp"], html.js[data-bewegung="dynamisch"] [data-auftritt="klapp"] { opacity: 0; transform: perspective(700px) rotateX(-80deg); transition: opacity .4s, transform .65s cubic-bezier(.2, .9, .3, 1.15); }
html.js [data-auftritt="klapp"].ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt], html.js [data-auftritt] b, html.js [data-auftritt] li, html.js [data-auftritt]::before { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lade .karte, .teil-karte, .kegel, .reiter, .karte { animation: none !important; transition: none !important; }
  .tor-balken, .wegweiser, .tor-schild, .fahrt-schritt { transition: none !important; }
}

/* ---------- Bildschirmbreiten ---------- */
@media (max-width: 980px) {
  .karten-raster, .rubriken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .herkunft-raster, .kontakt-raster, .fuss-raster { grid-template-columns: 1fr; }
  .familie { padding-top: 0; }
  .anfahrt-raster, html.anfahrt-an .anfahrt-raster { display: flex; flex-direction: column; gap: 22px; }
  .karte-buehne { order: -1; }
  html.anfahrt-an .karte-buehne { position: sticky; top: var(--kopf); z-index: 5; height: 46vh; height: 46svh; margin: 0 0 8px; }
  html.anfahrt-an .fahrt-schritte { padding: 2vh 0 24vh; }
  html.anfahrt-an .fahrt-schritt { min-height: 64vh; }
  .navi { max-width: 56%; padding: 8px 12px; }
  .navi-rest { font-size: 18px; }
  .navi-text { font-size: 12.5px; }
  .tor-schild { font-size: 15px; padding: 10px 16px; }
  .tor-schild span { font-size: 13px; }
}
@media (max-width: 760px) {
  .menue, .kopf-tel { display: none; }
  .kopf-innen { justify-content: space-between; }
  .schild { display: none; }
  .anruf-leiste { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; justify-content: center; min-height: 50px; font-weight: 760; text-decoration: none; color: var(--gelb-auf-blech); background: var(--blech); border: 1px solid var(--blech-rand); border-radius: 4px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
  body { padding-bottom: 76px; }
  .fuss-zeile { padding-bottom: 30px; }
}
@media (max-width: 600px) {
  .behaelter { width: min(100% - 32px, var(--breite)); }
  .kasten-bereich { padding-top: 24px; }
  .kasten-kopf h1 { font-size: clamp(27px, 8vw, 34px); }
  .reiter-leiste { gap: 5px; padding: 0 8px; }
  .reiter { min-height: 62px; padding: 10px 10px 9px; border-radius: 7px 7px 0 0; }
  .reiter b { font-size: 13px; overflow-wrap: anywhere; hyphens: auto; }
  .reiter span { font-size: 11px; }
  .reiter.ist-aktiv::before { display: none; }
  .fach { padding: 16px 12px 18px; border-radius: 9px; }
  .lade-kopf { margin: 0 2px 16px; }
  .lager { margin: 0; }
  .karten-raster, .rubriken { grid-template-columns: 1fr; gap: 18px; }
  .karte { padding: 32px 18px 18px; }
  .tk-liste, .feld-reihe, .adressen { grid-template-columns: 1fr; }
  .zahlen-liste { grid-template-columns: 1fr 1fr; gap: 20px; }
  .preis { font-size: 18px; }
  .stempel { font-size: 20px; }
}