/* Schriften: lokal gehostet (Dateien in /fonts, siehe fonts/LIESMICH.txt) */
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-v5-latin_latin-ext-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-v5-latin_latin-ext-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-v13-latin_latin-ext-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-v13-latin_latin-ext-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-v13-latin_latin-ext-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-v13-latin_latin-ext-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url("../fonts/barlow-semi-condensed-v16-latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url("../fonts/barlow-semi-condensed-v16-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-v20-latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-v20-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Layout: gleichberechtigte Bausteine (Text links, Bild rechts), die einer unregelmässig gewellten roten Linie folgen; auf der Linie fährt die Tram mit der Leseposition */
:root{
  --papier:#f4efe6; --tinte:#1f1d1a; --tinte-weich:#5b5247; --linie:#e2d8c8;
  --tram:#c8202f; --abend:#2b3550; --bild:#ebe3d6; --bild-strich:#e0d6c6; --karte:#fffaf2; --schild:#1d2740; --anzeige:#14171c; --led:#ffb347; --umleitung:#f2c500;
  --display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --text:"Barlow","Helvetica Neue",Arial,sans-serif;
  --schildschrift:"Barlow Semi Condensed","Barlow","Arial Narrow",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gleis-x:40px; --einzug:84px; --amp:150px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--papier:#1b1814;--tinte:#efe8dc;--tinte-weich:#b8ad9e;--linie:#3a332b;--tram:#e2414f;--abend:#c9d3ee;--bild:#2a251f;--bild-strich:#332d26;--karte:#25211c;color-scheme:dark}}
:root[data-theme="dark"]{--papier:#1b1814;--tinte:#efe8dc;--tinte-weich:#b8ad9e;--linie:#3a332b;--tram:#e2414f;--abend:#c9d3ee;--bild:#2a251f;--bild-strich:#332d26;--karte:#25211c;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 17px/1.65 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit}
.rahmen{width:min(1180px,100%);margin:0 auto;padding-inline:clamp(16px,3vw,32px)}

.kopf{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:26px 8px}
.marke{display:flex;flex-direction:column;line-height:1.15;text-decoration:none}
.marke b{font:400 26px/1 var(--display)}
.marke span{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-weich);margin-top:6px}
.kopf nav{display:flex;gap:22px;flex-wrap:wrap;font-size:15px}
.kopf nav a{text-decoration:none;color:var(--tinte-weich)}
.kopf nav a:hover,.kopf nav a:focus-visible{color:var(--tinte);text-decoration:underline;text-underline-offset:.3em}


.strecke{position:relative;padding-left:var(--einzug);padding-block:56px 40px}
.gleis{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}

.baustein{position:relative;margin-left:var(--versatz,0px);width:calc(100% - var(--amp));display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,360px);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(48px,6vw,80px)}
.baustein > div{min-width:0}
.halt{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tram);margin:0 0 10px;display:flex;gap:10px;align-items:baseline}
.halt i{font:italic 400 17px/1 var(--display);letter-spacing:0;text-transform:none;color:var(--tinte-weich)}
.baustein h1,.baustein h2{font:400 clamp(30px,3.4vw,44px)/1.08 var(--display);margin:0 0 14px;letter-spacing:-.005em;text-wrap:balance;max-width:18em}
.baustein p{margin:0 0 .9em;color:var(--tinte-weich);max-width:34em}
.baustein p.leise{font:italic 400 clamp(20px,1.8vw,24px)/1.4 var(--display);color:var(--tinte)}
.baustein p:last-child{margin-bottom:0}
.zitat{position:relative;background:var(--karte);border-radius:6px;padding:14px 18px 14px 34px;margin:18px 0 0;max-width:30em;font:italic 400 20px/1.38 var(--display);color:var(--tinte)}
.zitat::before{content:"Fahrgaststimme";display:block;font:500 11px/1.4 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--tram);margin-bottom:6px}
.zitat::after{content:"";position:absolute;left:14px;top:12px;bottom:12px;border-left:2px dashed var(--linie)}
.zitat cite{display:block;font:500 12px/1.4 var(--mono);font-style:normal;color:var(--tinte-weich);margin-top:8px}

.bild{margin:0;position:relative;aspect-ratio:4/3;max-width:100%;border-radius:4px;overflow:hidden;background:var(--bild) repeating-linear-gradient(135deg,transparent 0 11px,var(--bild-strich) 11px 12px)}
.bild figcaption{position:absolute;left:12px;right:12px;bottom:10px;font:400 12px/1.4 var(--mono);color:var(--tinte-weich)}
.bild.foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.bild.foto figcaption{color:#f4f1ea;text-shadow:0 1px 6px rgba(0,0,0,.6)}

.fahrplan{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
.fahrplan caption{text-align:left;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-weich);padding-bottom:8px}
.fahrplan th,.fahrplan td{padding:9px 8px 9px 0;border-top:1px solid var(--linie);text-align:left;vertical-align:baseline}
.fahrplan th{font:400 18px/1.2 var(--display)}
.fahrplan td{font:400 13px/1.4 var(--mono);color:var(--tinte-weich)}
.fahrplan td.preis{text-align:right;color:var(--tinte);font-weight:500;white-space:nowrap}
.plan{background:var(--karte);border-radius:4px;padding:18px 18px 12px}
.plan + .plan{margin-top:12px}
.kontakt{font:400 clamp(22px,2.2vw,28px)/1.35 var(--display);color:var(--tinte);user-select:all}


/* Fahrplanaushang */
.plakat{margin-block:24px 0;background:var(--karte);border:1px solid var(--linie);border-radius:6px;overflow:hidden}
.plakat-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--schild);color:#fff;padding:12px 18px;font-family:var(--schildschrift)}
.h-schild{width:34px;height:34px;border-radius:50%;background:#f2c500;color:#1b7a3a;display:grid;place-items:center;font:700 22px/1 var(--text)}
.linie-nr{min-width:34px;height:28px;padding:0 8px;border-radius:4px;background:var(--tram);color:#fff;display:grid;place-items:center;font:600 18px/1 var(--text)}
.richtung{font:400 17px/1.3 var(--schildschrift)}
.richtung b{font-weight:600}
.aushang{margin-left:auto;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.plakat-mitte{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 28px;flex-wrap:wrap;padding:22px 18px 6px}
.plakat-mitte .marke b{font:400 clamp(30px,4vw,44px)/1 var(--display)}
.plakat-mitte nav{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.plakat-mitte nav a{text-decoration:none;color:var(--tinte-weich)}
.plakat-mitte nav a:hover,.plakat-mitte nav a:focus-visible{color:var(--tinte);text-decoration:underline;text-underline-offset:.3em}
.verlauf{list-style:none;margin:0;padding:112px 18px 14px;display:grid;grid-template-columns:repeat(var(--n,11),minmax(0,1fr));position:relative}
.verlauf::before{content:"";position:absolute;left:24px;right:calc((100% - 36px) / var(--n,11) - 6px + 18px);top:117px;height:3px;background:var(--tram)}
.verlauf li{position:relative;min-width:0}
.verlauf a{display:block;height:28px;text-decoration:none;position:relative}
.verlauf a::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--karte);border:2.5px solid var(--tram);box-sizing:border-box}
.verlauf a span{position:absolute;left:7px;bottom:36px;transform-origin:left bottom;transform:rotate(-40deg);white-space:nowrap;font:500 12px/1 var(--mono);color:var(--tinte)}
.verlauf a:hover span,.verlauf a:focus-visible span{color:var(--tram);text-decoration:underline}
.verlauf li.ende a::before{width:18px;height:18px;left:-3px;top:-3px;background:var(--tram)}
.verlauf li.ende a span{font-weight:500}
.verlauf li.ende a::after{content:"Endhaltestelle";position:absolute;left:-3px;top:20px;font:400 10px/1 var(--mono);color:var(--tinte-weich);white-space:nowrap}
.plakat-fuss{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;border-top:1px solid var(--linie);padding:10px 18px;font:400 12px/1.4 var(--mono);color:var(--tinte-weich)}
@media (max-width:760px){
  .verlauf{grid-template-columns:1fr;padding:14px 18px 14px 22px;gap:0}
  .verlauf::before{left:27px;right:auto;top:20px;bottom:36px;width:3px;height:auto}
  .verlauf a{height:auto;padding:4px 0 4px 26px}
  .verlauf a::before{top:6px}
  .verlauf li.ende a::before{top:3px}
  .verlauf a span{position:static;transform:none;font-size:13px}
  .verlauf li.ende a::after{position:static;display:inline;margin-left:8px}
  .aushang{display:none}
}
.ansage{margin:28px 0 0;font:italic 400 clamp(34px,4.6vw,56px)/1 var(--display);color:var(--tinte);display:flex;flex-direction:column;gap:10px}
.ansage span{font:500 12px/1.4 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--tram)}

.ankunft{margin-left:var(--versatz,0px);padding-block:20px 40px}
.ankunft .ansage{margin-top:0}
.ankunft p:not(.ansage){margin:14px 0 0;color:var(--tinte-weich)}
.plakat-mitte nav{row-gap:6px}

.einwand{margin-left:var(--versatz,0px);width:calc(100% - var(--amp));padding-block:4px 20px}
.sackgasse{margin:0 0 30px;padding-left:clamp(130px,24vw,280px);font:italic 400 clamp(22px,2.2vw,28px)/1.2 var(--display);color:var(--tinte-weich);display:flex;flex-direction:column;gap:6px}
.sackgasse span{font:500 11px/1.4 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase}
.antwort-titel{font:400 clamp(24px,2.4vw,30px)/1.15 var(--display);color:var(--tinte);margin:0 0 8px}
.antwort p:not(.antwort-titel){margin:0;color:var(--tinte-weich);max-width:34em}
@media (max-width:760px){.sackgasse{padding-left:96px}}
footer{padding-block:40px 70px;border-top:1px solid var(--linie);font-size:14px;color:var(--tinte-weich)}

@media (max-width:760px){
  :root{--gleis-x:12px;--einzug:38px;--amp:26px}
  .baustein{grid-template-columns:1fr;width:calc(100% - var(--amp))}
  .bild{max-width:420px}
}

.plakat-mitte nav a[aria-current="page"]{color:var(--tinte);font-weight:600;text-decoration:underline;text-decoration-color:var(--tram);text-decoration-thickness:2px;text-underline-offset:.35em}
.weiter{display:inline-block;margin-top:6px;font:500 14px/1.4 var(--text);color:var(--tram);text-decoration:none;border-bottom:1px solid currentColor}
.weiter:hover,.weiter:focus-visible{color:var(--tinte)}
.liste{margin:0 0 .9em;padding-left:1.1em;color:var(--tinte-weich);max-width:34em}
.liste li{margin-bottom:.35em}
.liste b{color:var(--tinte);font-weight:600}
.formular{display:grid;gap:12px;background:var(--karte);border-radius:4px;padding:20px}
.formular label{display:grid;gap:4px;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-weich)}
.formular input,.formular textarea{font:400 16px/1.4 var(--text);color:var(--tinte);background:var(--papier);border:1px solid var(--linie);border-radius:4px;padding:10px 12px;width:100%}
.formular input:focus-visible,.formular textarea:focus-visible{outline:2px solid var(--tram);outline-offset:1px}
.formular button{justify-self:start;font:600 15px/1 var(--text);background:var(--tram);color:#fff;border:0;border-radius:999px;padding:13px 22px;cursor:pointer}
.formular button:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}
.formular .meldung{margin:0;font-size:14px;color:var(--tinte-weich)}
.fusszeile{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
.fusszeile a{color:var(--tinte-weich)}

/* Straßenbahn-Elemente */
.anzeige{margin:18px 0 0;background:var(--anzeige);border-radius:6px;padding:12px 16px;max-width:30em;font:500 14px/1.5 var(--mono);color:var(--led);letter-spacing:.04em;display:grid;gap:2px}
.anzeige b{font-weight:500;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.anzeige small{font-size:12px;color:#c9cfd8;letter-spacing:.02em}
.halt-knopf{margin-top:18px;display:inline-flex;align-items:center;gap:14px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--tinte);text-align:left}
.halt-knopf .knopf-rund{width:52px;height:52px;flex:none;border-radius:50%;background:var(--karte);border:3px solid var(--tram);display:grid;place-items:center;font:700 11px/1 var(--text);letter-spacing:.06em;color:var(--tram);transition:background .2s,color .2s,box-shadow .2s}
.halt-knopf[aria-pressed="true"] .knopf-rund{background:var(--tram);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--tram) 25%,transparent)}
.halt-knopf .beschr{display:grid;font:400 15px/1.35 var(--text);color:var(--tinte-weich)}
.halt-knopf .beschr b{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinte)}
.halt-knopf:focus-visible .knopf-rund{outline:2px solid var(--tinte);outline-offset:3px}
.umleitung{margin-top:18px;display:inline-flex;align-items:center;gap:12px;background:var(--umleitung);color:#161b24;border-radius:4px;padding:8px 14px 8px 10px;font:600 14px/1.3 var(--text)}
.umleitung svg{flex:none}
.umleitung span{font-weight:400}
.fahrschein{position:relative;background:var(--karte);border-radius:6px;padding:18px 20px 18px 34px;font:400 14px/1.5 var(--mono);color:var(--tinte);box-shadow:0 1px 0 var(--linie)}
.fahrschein::before{content:"";position:absolute;left:14px;top:12px;bottom:12px;border-left:2px dashed var(--linie)}
.fahrschein .kopfzeile{display:flex;justify-content:space-between;gap:10px;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tram);margin-bottom:8px}
.fahrschein .titel{font:400 30px/1.05 var(--display);margin:0 0 10px}
.fahrschein dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 12px;font-variant-numeric:tabular-nums}
.fahrschein dt{color:var(--tinte-weich)}
.fahrschein dd{margin:0;text-align:right}
.fahrschein .gueltig{border-top:1px dashed var(--linie);padding-top:8px;font-size:12px;color:var(--tinte-weich)}
@media (prefers-reduced-motion: reduce){.halt-knopf .knopf-rund{transition:none}}

/* Rechtstexte */
.rechtstext{max-width:44em;padding-block:0 60px}.strecke.ohne-linie{padding-left:0}.ohne-linie .ankunft{margin-left:0}
.rechtstext h2{font:400 clamp(26px,3vw,34px)/1.1 var(--display);margin:32px 0 10px}
.rechtstext p{color:var(--tinte-weich);line-height:1.6}
.rechtstext h3{font:600 17px/1.3 var(--text);color:var(--tinte);margin:22px 0 6px}
.rechtstext a{color:var(--tinte)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ansage{margin-top:36px}

/* ============================================================
   KI Auszeichnung Bilder (wie touched to be)
   ============================================================ */
.ki-generiert{position:relative}
.ki-generiert::after{content:"AI";position:absolute;right:6px;bottom:6px;z-index:4;font-family:"Manrope","Barlow",sans-serif;font-size:10px;font-weight:400;line-height:1;letter-spacing:0.05em;color:rgba(255,255,255,0.72);pointer-events:none}

/* ============================================================
   Startseite: Kapitel als Haltestellen
   ============================================================ */
.kapitel{margin-left:var(--versatz,0px);width:calc(100% - var(--amp));padding-block:clamp(64px,8vw,112px) 0}
.kapitel .baustein,.kapitel .einwand{margin-left:0;width:100%}
.kapitel > .baustein:first-child{padding-top:0}
.kapitel .baustein{padding-block:24px}
.kapitel-kopf{min-width:0}
.haltestelle,.baustein p.haltestelle{color:#fff}
.haltestelle{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:5px 14px 5px 5px;border-radius:4px;background:var(--schild);color:#fff;font:500 15px/1 var(--schildschrift);letter-spacing:.02em}
.haltestelle .h{width:24px;height:24px;border-radius:50%;background:#f2c500;color:#1b7a3a;display:grid;place-items:center;font:700 14px/1 var(--text)}
.kapitel-kopf h1,.kapitel-kopf h2{font:400 clamp(38px,4.4vw,58px)/1.04 var(--display);margin:0 0 16px;letter-spacing:-.01em;text-wrap:balance;max-width:16em}
.kapitel-intro .kapitel-kopf h1{font-size:clamp(42px,5.2vw,70px)}
.kapitel-kopf .einleitung{font:italic 400 clamp(21px,2vw,26px)/1.4 var(--display);color:var(--tinte);margin:0 0 14px;max-width:30em;text-wrap:balance}
.baustein-intro{grid-template-columns:minmax(0,1fr) minmax(260px,500px)}
.knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:22px 0 14px}
.knopf{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:6px;background:var(--tram);color:#fff;font:600 15px/1 var(--text);text-decoration:none;border:1.5px solid var(--tram)}
.knopf:hover{background:#a81a27;border-color:#a81a27}
.knopf.leer{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.knopf.leer:hover{background:var(--tinte);color:var(--papier)}
.knopf:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}
.begruessung{margin-top:clamp(40px,6vw,72px);grid-template-columns:minmax(0,1fr) minmax(200px,300px);align-items:start}
.begruessung h2{font:400 clamp(30px,3.2vw,40px)/1.1 var(--display);margin:0 0 14px}
.unterschrift{font:italic 400 22px/1.3 var(--display);color:var(--tinte)}
.unterschrift strong{font-weight:400;font-style:normal}
.bild.hochkant{aspect-ratio:4/5}
.unterpunkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:36px 48px;margin-top:40px}
.unterpunkt h3,.schritte h3{font:400 clamp(24px,2.2vw,28px)/1.15 var(--display);margin:0 0 10px;color:var(--tinte)}
.unterpunkt p,.schritte p{color:var(--tinte-weich);margin:0 0 .8em}
.schritte{list-style:none;counter-reset:schritt;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:32px 40px}
.schritte li{counter-increment:schritt;border-top:2px solid var(--tram);padding-top:16px}
.schritte li::before{content:"Schritt " counter(schritt);display:block;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tram);margin-bottom:8px}
.durchsage{margin:clamp(56px,7vw,96px) 0 0 var(--versatz,0px);width:calc(100% - var(--amp));max-width:900px;background:var(--schild);color:#fff;border-radius:6px;padding:24px 28px;display:grid;gap:12px}
.durchsage .kennung{margin:0;display:flex;align-items:center;gap:10px;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--led)}
.durchsage blockquote{margin:0}
.durchsage blockquote p{margin:0 0 10px;font:italic 400 clamp(22px,2.4vw,30px)/1.35 var(--display);color:#fff}
.durchsage cite{font:500 12px/1.4 var(--mono);font-style:normal;letter-spacing:.08em;color:#c9cfd8}
.durchsagen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin-top:36px}
.durchsagen .durchsage{margin:0;width:auto;max-width:none;padding:20px 22px}
.durchsagen .durchsage blockquote p{font-size:20px}
@media (max-width:760px){.baustein-intro,.begruessung{grid-template-columns:1fr}}

/* Einstieg: großes Titelbild nur im ersten Kapitel */
.einstieg-gross{grid-template-columns:1fr}
.einstieg-gross > figure{order:-1;aspect-ratio:3/2;max-width:none}
.einstieg-gross > figure.bild.foto img{object-position:50% 100%}
.einstieg-gross .kapitel-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:48px;align-items:start}
.einstieg-gross .kapitel-kopf .haltestelle{grid-column:1/-1;justify-self:start;margin-top:8px}
.einstieg-gross .kapitel-kopf h1{grid-column:1;grid-row:2/5;margin:0}
.einstieg-gross .kapitel-kopf > *:not(h1):not(.haltestelle){grid-column:2}
@media (max-width:760px){
  .einstieg-gross > figure{aspect-ratio:4/3}
  .einstieg-gross .kapitel-kopf{display:block}
}

/* Zielanzeige wie an der Tram: wechselnde Zielgruppen */
.zielanzeige{display:flex;align-items:center;gap:14px;max-width:26em;margin:8px 0 28px;padding:10px 16px 10px 10px;border-radius:6px;background:var(--anzeige);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ziel-linie{flex:none;min-width:30px;height:26px;padding:0 6px;border-radius:3px;background:var(--tram);color:#fff;display:grid;place-items:center;font:600 16px/1 var(--schildschrift)}
.ziel-text{display:flex;align-items:baseline;gap:10px;overflow:hidden;height:1.5em;font:500 clamp(17px,1.7vw,20px)/1.5 var(--mono);color:var(--led);letter-spacing:.04em;text-shadow:0 0 8px rgba(255,179,71,.45)}
.ziel-fuer{opacity:.7}
.ziel-wort{display:inline-block;transition:transform .45s ease,opacity .45s ease}
.ziel-wort.raus{transform:translateY(-110%);opacity:0}
.ziel-wort.rein{transform:translateY(110%);opacity:0;transition:none}
@media (prefers-reduced-motion: reduce){.ziel-wort{transition:none}}

/* Zielanzeige als LED-Punktmatrix */
.zielanzeige.mit-matrix .ziel-wort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zielanzeige .ziel-text{flex:1;min-width:0;height:auto}
.ziel-matrix{display:block;filter:drop-shadow(0 0 3px rgba(255,179,71,.55))}
.zielanzeige{max-width:30em;padding:10px 12px 10px 10px}
.h1-vorsatz{display:block}
@media (max-width:760px){.einstieg-gross .kapitel-kopf h1{margin-bottom:18px}}
@media (max-width:760px){.plakat-kopf{flex-wrap:nowrap;align-items:center}.richtung{flex:1;min-width:0;font-size:15px;line-height:1.25}.richtung b{display:block}}
/* Einstieg: Unterzeile größer, Fließtext enger, Anzeige so groß wie der Fließtext */
.einstieg-gross .kapitel-kopf .einleitung{font-size:clamp(26px,2.7vw,34px);line-height:1.25;margin-bottom:18px}
.einstieg-gross .kapitel-kopf > p:not(.einleitung):not(.haltestelle):not(.knoepfe){line-height:1.5}
.zielanzeige.mit-matrix{padding:9px 12px 9px 9px;gap:12px}
.zielanzeige.mit-matrix .ziel-linie{min-width:24px;height:22px;font-size:14px}
.ziel-matrix{filter:drop-shadow(0 0 2px rgba(255,179,71,.5))}
/* Antworten mit mehreren Absätzen */
.antwort p:not(.antwort-titel){margin:0 0 .8em}
/* Tür öffnen / Tür schließen */
.tuer{position:relative}
.js-tuer .tuer{overflow:hidden;transition:height .45s ease}
.tuer-inhalt{padding:2px 0 4px}
.tuer-fluegel{position:absolute;top:0;bottom:0;width:50%;z-index:2;background:var(--karte);border:1px solid var(--linie);transition:transform .6s cubic-bezier(.6,0,.25,1)}
.tuer-fluegel::before{content:"";position:absolute;inset:14px 16px;border-radius:6px;background:linear-gradient(180deg,rgba(159,180,200,.45),rgba(159,180,200,.2));box-shadow:inset 0 0 0 1px rgba(29,39,64,.12)}
.tuer-fluegel::after{content:"";position:absolute;left:0;right:0;bottom:18%;height:5px;background:var(--tram);opacity:.85}
.tuer-fluegel.links{left:0;border-right:2px solid var(--tinte)}
.tuer-fluegel.rechts{right:0;border-left:2px solid var(--tinte)}
.tuer.auf .tuer-fluegel.links{transform:translateX(-102%)}
.tuer.auf .tuer-fluegel.rechts{transform:translateX(102%)}
.tuer-knopf{display:inline-flex;align-items:center;gap:10px;margin:4px 0 0;padding:4px 0;background:none;border:0;cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinte)}
.tuer-knopf[hidden]{display:none}
.tuer-symbol{position:relative;width:30px;height:30px;border-radius:50%;background:var(--tram);box-shadow:0 0 0 3px var(--papier),0 0 0 4px var(--tram);flex:none;transition:transform .2s ease}
.tuer-symbol::before,.tuer-symbol::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border-block:5px solid transparent}
.tuer-symbol::before{left:7px;border-right:6px solid #fff}
.tuer-symbol::after{right:7px;border-left:6px solid #fff}
.tuer-knopf[aria-expanded="true"] .tuer-symbol::before{left:9px;border-right:0;border-left:6px solid #fff}
.tuer-knopf[aria-expanded="true"] .tuer-symbol::after{right:9px;border-left:0;border-right:6px solid #fff}
.tuer-knopf:hover .tuer-symbol{transform:scale(1.08)}
.tuer-knopf:focus-visible{outline:2px solid var(--tinte);outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion: reduce){.js-tuer .tuer,.tuer-fluegel{transition:none}}
/* Durchsage: kleiner als Abstellgleis-Fragen, mit Anführungszeichen */
.durchsage blockquote p{font-size:clamp(20px,2vw,24px)}
.durchsage blockquote p::before{content:"„"}
.durchsage blockquote p::after{content:"“"}
.antwort .tuer{max-width:34em}
.tuer-knopf + .halt-knopf,.tuer-knopf + .umleitung{margin-top:20px}
.antwort a,.unterpunkt a{color:var(--tram);text-decoration:underline;text-underline-offset:2px}
/* Fahrkarten auf der Startseite */
.fahrkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:18px;margin-top:30px}
.fahrkarten .fahrschein .titel{font-size:28px}
.fahrkarten .fahrschein dl{margin-bottom:10px}
#fahrkarten .kapitel-kopf > p:not(.haltestelle){max-width:40em}
.fahrkarten .kopfzeile span{white-space:nowrap}
.preise-voll{grid-template-columns:1fr !important}.preise-voll > div:first-child p{max-width:40em}.preise-voll .fahrkarten{margin-top:8px}
.tuer-knopf + p{margin-top:18px}
/* Warum nur Erwachsene */
.warum{background:var(--karte);border-radius:6px;padding:20px 22px 6px;margin:6px 0 22px;box-shadow:0 1px 0 var(--linie)}
.warum h3{font:400 clamp(24px,2.2vw,28px)/1.15 var(--display);margin:0 0 8px;color:var(--tinte)}
.warum p{color:var(--tinte-weich)}
/* Umsteigen-Liste */
.umsteigen{list-style:none;padding:0;margin:0 0 18px;max-width:38em}
.umsteigen li{position:relative;padding-left:22px;margin:0 0 8px;color:var(--tinte-weich);line-height:1.6}
.umsteigen li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;border:2px solid var(--tram);background:var(--papier);box-sizing:border-box}
/* Fahrgastinfo: Infotafel, Anreise, Formular */
.infotafel{background:var(--schild);color:#fff;border-radius:6px;padding:18px 20px;margin:8px 0 26px}
.infotafel dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px 24px;margin:0}
.infotafel dt{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--led);margin-bottom:4px}
.infotafel dd{margin:0;font:400 16px/1.45 var(--text);color:#fff}
.infotafel a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.infotafel a:hover{border-bottom-color:#fff}
.anreise-titel{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tram);margin:0 0 12px}
.anreise{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:12px}
.anreise li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;color:var(--tinte-weich)}
.anreise svg{width:26px;height:26px;fill:none;stroke:var(--tinte);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.anreise b{color:var(--tinte);font-weight:600}
.anreise-orte{color:var(--tinte-weich);font-size:15px}
.formular-titel{margin:0 0 4px;font:400 clamp(22px,2vw,26px)/1.15 var(--display);color:var(--tinte)}
.formular button{border-radius:6px}
.meldung-status{background:var(--papier);border-radius:6px;padding:10px 12px;color:var(--tinte) !important}
#fahrgastinfo .baustein{align-items:start}
.fusszeile{font:400 12px/1.6 var(--mono);color:var(--tinte-weich)}
.antwort .fahrschein{max-width:340px;margin-top:6px}
.verlauf{padding-right:70px}
.faq-ende{margin-left:var(--versatz,0px);padding-block:clamp(56px,7vw,96px) 0}.faq-ende h2{margin:0 0 8px}.faq-ende p{color:var(--tinte-weich)}
/* ===== FAQ als Auskunftsautomat ===== */
.automat{margin:clamp(24px,4vw,48px) 0 0 var(--versatz,0px);width:calc(100% - var(--amp));max-width:820px;background:var(--schild);color:#fff;border-radius:10px;padding:18px clamp(16px,3vw,26px) 0;box-shadow:0 2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);position:relative;z-index:1}
.automat-kopf{display:flex;justify-content:space-between;gap:12px;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#c9cfd8;margin-bottom:14px}
.automat-kopf span:first-child{color:#fff}
.automat-display{display:block;background:var(--anzeige);border-radius:6px;padding:12px 14px 10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 8px rgba(0,0,0,.5);cursor:text}
.display-zeile{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,179,71,.65);margin-bottom:4px}
.automat-display input{width:100%;background:transparent;border:0;outline:0;padding:2px 0;font:500 clamp(18px,2.2vw,22px)/1.3 var(--mono);color:var(--led);caret-color:var(--led);text-shadow:0 0 8px rgba(255,179,71,.45);-webkit-appearance:none;appearance:none}
.automat-display input::placeholder{color:rgba(255,179,71,.35);text-shadow:none}
.automat-display input::-webkit-search-cancel-button{filter:sepia(1) saturate(4) hue-rotate(-10deg)}
.automat-display:focus-within{box-shadow:inset 0 0 0 1px rgba(255,179,71,.5),inset 0 2px 8px rgba(0,0,0,.5)}
.automat-status{margin:10px 2px 14px;font:400 12px/1.4 var(--mono);color:#c9cfd8}
.automat-tasten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:10px}
.taste{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:64px;padding:10px 12px;text-align:left;background:#f4f1ea;color:var(--schild);border:0;border-radius:6px;font:600 15px/1.2 var(--schildschrift);cursor:pointer;box-shadow:0 3px 0 #b9b2a4;transition:transform .08s,box-shadow .08s,background .15s}
.taste small{font:500 11px/1 var(--mono);color:var(--tinte-weich)}
.taste:hover{background:#fff}
.taste:active{transform:translateY(2px);box-shadow:0 1px 0 #b9b2a4}
.taste.aktiv{background:var(--tram);color:#fff;box-shadow:0 3px 0 #8e1520}
.taste.aktiv small{color:rgba(255,255,255,.8)}
.taste:focus-visible{outline:2px solid var(--led);outline-offset:3px}
.automat-schacht{margin:18px -2px 0;height:30px;display:flex;align-items:center;justify-content:center;position:relative}
.automat-schacht::before{content:"";position:absolute;left:18%;right:18%;top:8px;height:10px;border-radius:5px;background:#0d1220;box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.automat-schacht span{position:absolute;bottom:-2px;font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8d96a6}
.faq-kapitel{padding-top:clamp(48px,6vw,80px)}
.faq-kapitel .kapitel-kopf{margin-bottom:18px}
.ticket{position:relative;max-width:760px;margin:0 0 12px;background:var(--karte);border-radius:6px;box-shadow:0 1px 0 var(--linie)}
.ticket::before{content:"";position:absolute;left:14px;top:12px;bottom:12px;border-left:2px dashed var(--linie)}
.ticket summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 16px;padding:16px 18px 16px 34px;cursor:pointer}
.ticket summary::-webkit-details-marker{display:none}
.ticket-nr{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--tram);white-space:nowrap}
.ticket-frage{font:italic 400 clamp(19px,1.8vw,22px)/1.25 var(--display);color:var(--tinte)}
.ticket-pfeil{width:12px;height:12px;border-right:2px solid var(--tram);border-bottom:2px solid var(--tram);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
.ticket[open] .ticket-pfeil{transform:rotate(-135deg) translate(-3px,-3px)}
.ticket summary:focus-visible{outline:2px solid var(--tram);outline-offset:2px;border-radius:6px}
.ticket-antwort{padding:2px 22px 18px 34px;border-top:1px dashed var(--linie);margin:0 18px 0 34px;padding-left:0;padding-right:0}
.ticket-antwort .antwort-titel{margin-top:14px}
.ticket-antwort p:not(.antwort-titel){color:var(--tinte-weich);margin:0 0 .8em;max-width:40em}
.ticket-antwort .fahrschein{max-width:340px;margin-top:8px;background:var(--papier)}
.ticket[open]{box-shadow:0 1px 0 var(--linie),0 6px 18px rgba(31,29,26,.06)}
.ticket[open] .ticket-antwort{animation:ausgabe .35s ease}
@keyframes ausgabe{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.ticket[open] .ticket-antwort{animation:none}}
.ticket mark{background:rgba(255,179,71,.35);color:inherit;border-radius:2px}
.faq-leer{margin:24px 0 0 var(--versatz,0px);color:var(--tinte-weich)}
@media (max-width:760px){.ticket summary{grid-template-columns:1fr auto;padding-left:30px}.ticket-nr{grid-column:1/-1}.ticket-antwort{margin-left:30px}.automat-kopf span:last-child{display:none}}
.automat{padding-bottom:10px}
@media (max-width:760px){.automat-tasten{grid-template-columns:1fr 1fr}.automat-tasten .taste:first-child{grid-column:1/-1;min-height:48px}.taste{min-height:56px}}
/* Ausgabe-Zettel */
.zettel-rahmen{height:0;overflow:hidden;margin:-12px auto 0;width:min(92%,420px);position:relative;transition:height .7s cubic-bezier(.3,.7,.3,1)}
@media (prefers-reduced-motion: reduce){.zettel-rahmen{transition:none}}
.zettel{background:#fffdf7;color:var(--tinte);padding:16px 18px 18px;font:400 13px/1.5 var(--mono);box-shadow:0 4px 10px rgba(0,0,0,.25);border-radius:0 0 4px 4px;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;padding-bottom:26px}
.zettel-kopf{display:flex;justify-content:space-between;margin:4px 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tram)}
.zettel-titel{margin:0 0 10px;font:italic 400 20px/1.2 var(--display);border-bottom:1px dashed var(--linie);padding-bottom:8px}
.zettel ol{list-style:none;padding:0;margin:0}
.zettel li{border-bottom:1px dotted var(--linie)}
.zettel li a{display:grid;grid-template-columns:52px 1fr;gap:8px;padding:6px 0;text-decoration:none;color:var(--tinte)}
.zettel li a span{color:var(--tram)}
.zettel li a:hover{background:rgba(255,179,71,.18)}
.zettel-fuss{margin:10px 0 0;font-size:11px;color:var(--tinte-weich);text-align:center;letter-spacing:.08em}
.automat{padding-bottom:16px}
.ticket.gedruckt{animation:fahrschein-raus .45s cubic-bezier(.3,.7,.3,1) both}
@keyframes fahrschein-raus{from{opacity:0;transform:translateY(-24px) scaleY(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.ticket.gedruckt{animation:none}}
/* Ausgabeschacht: Fahrscheine fahren heraus */
.automat-schacht::before{left:4%;right:4%}
.ausgabe{position:relative;margin:-14px 4% 0;padding:14px 0 6px;overflow:hidden}
.ausgabe-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;font:500 12px/1.4 var(--mono);letter-spacing:.1em;color:var(--led)}
.ausgabe-zurueck{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:6px;padding:6px 10px;font:500 12px/1 var(--mono);cursor:pointer}
.ausgabe-zurueck:hover{background:rgba(255,255,255,.1)}
.ausgabe-stapel .ticket{max-width:none;animation:aus-schacht .7s cubic-bezier(.25,.75,.3,1) both}
@keyframes aus-schacht{from{transform:translateY(-120%);opacity:.2}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.ausgabe-stapel .ticket{animation:none}}
.ausgabe-leer{color:#c9cfd8;margin:0 0 12px}
.automat-schacht:has(+ .ausgabe:not([hidden])) span{display:none}.ausgabe-kopf{margin-top:4px}
.faq-ende{width:calc(100% - var(--amp))}
/* Hausordnung: Aushang mit nummerierten Punkten */
.hausregeln{list-style:none;counter-reset:regel;max-width:760px;margin:22px 0 0;padding:20px 22px 8px 22px;background:var(--karte);border-radius:6px;box-shadow:0 1px 0 var(--linie);border-top:6px solid var(--schild)}
.hausregeln li{counter-increment:regel;position:relative;padding:0 0 14px 46px;margin:0 0 14px;color:var(--tinte-weich);border-bottom:1px dashed var(--linie)}
.hausregeln li:last-child{border-bottom:0;margin-bottom:0}
.hausregeln li::before{content:counter(regel);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--schild);color:#fff;display:grid;place-items:center;font:600 14px/1 var(--schildschrift)}
.tuer-inhalt h3{font:400 clamp(24px,2.2vw,28px)/1.15 var(--display);color:var(--tinte);margin:22px 0 8px}
#herkunft .baustein{align-items:start}
/* Text hinter der Tür unter Text+Bild: volle Breite statt schmaler Spalte */
.tuer-breit{max-width:none}
.tuer-breit .tuer,.tuer-breit .tuer-inhalt p{max-width:none}
.tuer-breit .tuer-knopf{margin-top:0}
.baustein + .tuer-breit{margin-top:-6px}
/* Fließtext überall gleich: Größe, Zeilenabstand, Farbe */
.kapitel-kopf > p:not(.einleitung):not(.haltestelle):not(.knoepfe):not(.halt),
.tuer-inhalt p,.unterpunkt p,.schritte p,.antwort p:not(.antwort-titel),.ticket-antwort p:not(.antwort-titel),.hausregeln li,.faq-ende p,.einstieg-gross .kapitel-kopf > p:not(.einleitung):not(.haltestelle):not(.knoepfe){font-size:17px;line-height:1.6;color:var(--tinte-weich)}
.bild.foto img[src*="michael-koellner"]{object-position:50% 45%}
.begruessung{grid-template-columns:minmax(0,1fr) minmax(240px,420px)}

/* Endhaltestelle: die Türen gehen auf, wenn die Tram ankommt */
.ankunft-tuer{position:relative;display:inline-block;max-width:100%;padding:18px 32px 22px 26px;border-radius:12px;overflow:hidden}
.mit-tuer .ankunft-tuer{box-shadow:inset 0 0 0 2px var(--tinte)}
.ankunft-tuer .tuer-fluegel{transition-duration:1.1s}
.ankunft-tuer .tuer-fluegel::before{inset:16px 18px 34% 18px}
.ankunft-tuer .tuer-fluegel::after{bottom:24%}
.ankunft.auf .ankunft-tuer .tuer-fluegel.links{transform:translateX(-102%)}
.ankunft.auf .ankunft-tuer .tuer-fluegel.rechts{transform:translateX(102%)}
.mit-tuer .ankunft-tuer > p{opacity:0;transition:opacity .5s ease .5s}
.ankunft.auf .ankunft-tuer > p{opacity:1}
.ankunft.auf .ankunft-tuer{box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .4s ease 1s}
@media (prefers-reduced-motion: reduce){.ankunft-tuer .tuer-fluegel,.mit-tuer .ankunft-tuer > p{transition:none}}

/* Ansage als H1 auf den Unterseiten: sieht aus wie bisher */
h1.ansage{font-weight:400}

/* Gutscheinseite: großer Fahrschein mit Feldern für Namen */
.gutschein-karte{max-width:380px;justify-self:end;transform:rotate(-1.5deg);box-shadow:0 1px 0 var(--linie),0 14px 30px -18px rgba(29,39,64,.45)}
.gutschein-karte .titel{font-size:34px}
.gutschein-felder{display:grid;gap:10px;margin:4px 0 14px}
.gutschein-felder span{display:flex;gap:10px;align-items:flex-end;font:italic 400 19px/1 var(--display);color:var(--tinte)}
.gutschein-felder span::after{content:"";flex:1;border-bottom:1px solid var(--tinte-weich);opacity:.6;height:14px}
@media (max-width:760px){.gutschein-karte{justify-self:start;transform:none}}
#bestellen .baustein{align-items:start}
#willkommen .begruessung-weiter .unterschrift,.begruessung-weiter .unterschrift{font:italic 400 22px/1.3 var(--display);color:var(--tinte);margin-top:18px}
.begruessung-weiter .unterschrift strong{font-weight:400;font-style:normal}
@media (max-width:760px){.begruessung{grid-template-columns:1fr}}

/* Bildzeile unter dem Porträt */
.bild-mit-zeile{min-width:0}
.bild-mit-zeile .bild{width:100%}
.bildzeile{margin:8px 0 0;font:400 11px/1.4 var(--mono);letter-spacing:.04em;color:var(--tinte-weich)}

/* Überschriften etwas luftiger */
.kapitel-kopf h2{line-height:1.16}
.baustein h2,.begruessung h2{line-height:1.16}
.durchsage cite a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.durchsage blockquote p{font-size:clamp(18px,1.55vw,20px);line-height:1.4}

/* Abstellgleise: Variante B – Antworten an der Linie, alle Gleise gleich kurz */
#wunsch .sackgasse{padding-left:90px;margin-bottom:18px}

/* ===== Feinarbeit Handy ===== */
.durchsage .quelle{white-space:nowrap}
.faq-ende h2{font:400 clamp(30px,3.4vw,44px)/1.16 var(--display);letter-spacing:-.005em}
@media (max-width:760px){
  .plakat-fuss span:last-child{display:none}
}

/* ===== Feinarbeit Handy, Runde 2 ===== */
/* Menü: Hover nur bei echter Maus, damit nach dem Zurückgehen nichts unterstrichen bleibt */
.plakat-mitte nav a:hover,.kopf nav a:hover{text-decoration:none;color:var(--tinte-weich)}
@media (hover:hover){.plakat-mitte nav a:hover,.kopf nav a:hover{color:var(--tinte);text-decoration:underline;text-underline-offset:.3em}}
.plakat-mitte nav a[aria-current="page"]{color:var(--tinte)!important;text-decoration:underline!important;text-decoration-color:var(--tram)!important}
/* Unterzeile unter dem Namen etwas größer */
.marke span{font-size:13px;letter-spacing:.1em}
/* Textlinks: Unterstreichung nur unter den Wörtern, auch wenn sie umbrechen */
.weiter{display:inline;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
p > .weiter:only-child{display:inline}
/* Knöpfe nie umbrechen */
.knopf{white-space:nowrap}
/* Fahrscheine: Kopfzeile darf umbrechen, Preise nie */
.fahrschein .kopfzeile{flex-wrap:wrap}
.fahrschein .gueltig{overflow-wrap:anywhere}
/* Bildzeile mit Abstand */
.bildzeile{margin-top:12px}
/* Fußzeile: Links oben, dann Herausgeber, dann Stand */
.fusszeile{flex-direction:column;align-items:flex-start;gap:8px}
.fusszeile .fuss-links a{margin-right:2px}
@media (max-width:760px){
  /* Linienplan senkrecht, aber enger */
  .verlauf{padding:10px 18px 10px 22px}
  .verlauf a{padding:1px 0 1px 26px}
  .verlauf a::before{top:4px}
  .verlauf li.ende a::before{top:1px}
  .verlauf::before{top:16px;bottom:22px}
  .verlauf a span{font-size:12.5px;line-height:1.5}
  /* Silbentrennung im Fließtext */
  main p, main li{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .knopf{padding:0 16px;font-size:14.5px}
  .fahrschein{padding:16px 16px 16px 30px}
  .fahrschein dl{font-size:13px;gap:4px 10px}
  /* Durchsagen: Quelle in eigener Zeile, ohne verlorenen Punkt */
  .durchsage cite .trenner{display:none}
  .durchsage cite .quelle{display:block;margin-top:2px}
}
@media (max-width:760px){
  .plakat-mitte nav{gap:6px 14px;font-size:14.5px}
  .marke span{font-size:12px;letter-spacing:.08em}
}
.bild-mit-zeile .bildzeile{margin-top:14px}
@media (max-width:760px){
  .plakat-mitte nav{flex-wrap:nowrap;justify-content:space-between;width:100%;gap:8px;font-size:14px}
}
.plakat-mitte nav a{white-space:nowrap}
@media (max-width:350px){.plakat-mitte nav{font-size:13px;gap:4px}}

/* Unterschrift: Gruß normal, Name kursiv und größer wie handschriftlich */
#willkommen .begruessung-weiter .unterschrift,.begruessung-weiter .unterschrift{font:400 18px/1.4 var(--text);color:var(--tinte-weich)}
.begruessung-weiter .unterschrift strong{display:inline-block;margin-top:4px;font:italic 400 32px/1 var(--display);color:var(--tinte)}

/* Durchsagen: Name etwas größer, Quelle kleiner */
.durchsage cite{font-size:13.5px;letter-spacing:.06em;color:#e3e7ee}
.durchsage cite .trenner,.durchsage cite .quelle{font-size:11px;letter-spacing:.08em;color:#aab3c0}
/* Umleitungsschild: Symbol + „Umleitung“ in einer Zeile, Text darunter */
.umleitung{display:inline-grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px;padding:10px 16px 12px 12px;max-width:360px}
.umleitung span{grid-column:1/-1;font:400 14px/1.4 var(--text)}

/* Fahrscheine: ganze Zeile ohne Bezeichnung */
.fahrschein dd.ganz{grid-column:1/-1;text-align:left;color:var(--tinte-weich)}
@media (max-width:760px){
  /* Kopfzeile immer zweizeilig und eng zusammen */
  .fahrschein .kopfzeile{flex-direction:column;align-items:flex-start;gap:0;line-height:1.35}
}

/* Fußzeile: Links größer und mit genug Abstand für den Finger */
.fusszeile .fuss-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:6px;font:500 14px/1.4 var(--text)}
.fusszeile .fuss-links a{display:inline-block;padding:8px 0;color:var(--tinte);text-underline-offset:.25em}
@media (max-width:760px){.fusszeile .fuss-links{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;width:100%}}
/* Plakat oben: mehr Luft */
.plakat-mitte{padding:30px 22px 8px}
.plakat-fuss{padding:14px 22px}
.verlauf{padding-left:22px}
@media (max-width:760px){
  .plakat-mitte{padding:26px 18px 6px;row-gap:16px}
  .plakat-mitte nav{margin-top:2px}
  .verlauf{padding:20px 18px 18px 22px}
  .verlauf::before{top:26px;bottom:30px}
  .plakat-fuss{padding:14px 18px 16px}
}
/* Handy: Linie weiter nach links, mehr Platz für Text */
@media (max-width:760px){
  :root{--gleis-x:2px;--einzug:24px;--amp:26px}
  #wunsch .sackgasse{padding-left:70px}
}
/* Durchsagen: nichts darf aus der Kachel ragen, auch bei großer Systemschrift */
.durchsage{min-width:0;box-sizing:border-box;overflow-wrap:anywhere}
.durchsage blockquote,.durchsage blockquote p,.durchsage cite{min-width:0;max-width:100%;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:760px){
  .durchsage{padding:20px 18px}
  .durchsage cite .quelle{white-space:normal}
  .durchsage cite a.quelle{text-decoration:underline;text-underline-offset:3px}
}

/* Auskunftsautomat: deutlicher Suchen-Knopf neben dem Display */
.automat-suche{display:flex;gap:10px;align-items:stretch}
.automat-suche .automat-display{flex:1;min-width:0}
.automat-los{flex:none;min-width:96px;padding:0 18px;border:0;border-radius:6px;background:var(--tram);color:#fff;font:600 15px/1 var(--text);cursor:pointer;box-shadow:0 3px 0 #7d121c}
.automat-los:hover{background:#a81a27}
.automat-los:active{transform:translateY(2px);box-shadow:0 1px 0 #7d121c}
.automat-los:focus-visible{outline:2px solid var(--led);outline-offset:3px}
@media (max-width:420px){.automat-los{min-width:0;padding:0 14px}}
/* FAQ am Handy: Fahrscheine breiter, damit mehr Text in eine Zeile passt */
@media (max-width:760px){
  .automat{padding:14px 10px 0}
  .ausgabe{margin:-14px 0 0}
  .ticket::before{left:10px}
  .ticket summary{padding:14px 12px 14px 22px;gap:4px 10px}
  .ticket-antwort{margin:0 12px 0 22px}
  .ticket-antwort p:not(.antwort-titel){font-size:16px;line-height:1.55}
  .ticket-frage{font-size:19px}
}
@media (max-width:760px){
  .automat{width:calc(100% - var(--versatz,0px) + 8px);margin-right:-8px}
  .ticket summary{padding-left:20px}
  .ticket-antwort{margin:0 10px 0 20px}
}

/* Gutschein-Fahrschein in der FAQ: genau wie auf der Gutscheinseite, nur gerade */
.ticket-antwort .fahrschein .titel,.antwort .fahrschein .titel{font:400 30px/1.05 var(--display);color:var(--tinte);margin:0 0 10px}
.ticket-antwort .gutschein-karte{transform:none;justify-self:auto;max-width:380px}
.fahrschein dd{overflow-wrap:normal}
/* Fahrscheine dürfen nie breiter als ihr Platz werden, auch bei großer Systemschrift */
.baustein > *{min-width:0}
.fahrschein{box-sizing:border-box;max-width:100%;min-width:0}
.fahrschein dl{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
.fahrschein dt,.fahrschein dd{min-width:0;overflow-wrap:anywhere}
.fahrschein .kopfzeile span{min-width:0;overflow-wrap:anywhere}
/* Gutschein in der FAQ: exakt wie auf der Gutscheinseite und nie breiter als die Kachel */
.ticket-antwort .fahrschein.gutschein-karte{max-width:min(380px,100%);background:var(--karte);box-sizing:border-box;box-shadow:0 1px 0 var(--linie),0 14px 30px -18px rgba(29,39,64,.45)}
.ticket-antwort{min-width:0}
.fahrschein{box-sizing:border-box;max-width:100%;min-width:0}
.fahrschein dl{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
.fahrschein dt,.fahrschein dd{min-width:0;overflow-wrap:anywhere}
.baustein > *{min-width:0}
.zusage-satz{font-weight:600;color:var(--tinte);margin:18px 0 0}.gut-zu-wissen{margin-top:22px}.gut-zu-wissen li::before{transition:background-color .25s ease}.gut-zu-wissen li.beruehrt::before{background:var(--tram)}.gut-zu-wissen li{margin-bottom:12px;font-size:17px;line-height:1.6}

/* Als App speichern */
.app-speichern{width:100%;margin-top:6px}
.app-knopf{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid var(--tinte);border-radius:999px;background:transparent;color:var(--tinte);font:500 14px/1.2 var(--text);cursor:pointer}
.app-knopf img{border-radius:7px;display:block}
.app-hinweis{margin:10px 0 0;max-width:34em;font:400 14px/1.5 var(--text);color:var(--tinte-weich)}

/* Terminseite für Schülerinnen und Schüler */
.termin-karte{display:flex;flex-direction:column;gap:18px;min-width:0}
.termin-karte .fahrschein .titel{margin:0}
.termin-knoepfe{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.termin-knoepfe .knopf{justify-content:center;gap:10px;min-height:52px;font-size:16px;cursor:pointer}
.termin-knoepfe .knopf img{border-radius:5px;display:block}
.termin-oder{margin:10px 0 0;font-size:15px;color:var(--tinte-weich)}
.termin-anleitung{margin:0;font-size:15px}
.termin-weiter{color:var(--tinte-weich)}
.termin-wahl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.termin-wahl .knopf{width:100%;justify-content:center;min-height:52px}

/* ß bleibt ß, auch in Großbuchstaben-Zeilen (sonst macht der Browser SS daraus) */
.sz,.ansage span.sz{text-transform:none;letter-spacing:inherit}
/* Linienplan: Linie endet genau an der Endhaltestelle (Mitte des letzten Punkts) */
@media (min-width:761px){.verlauf::before{left:28px;right:calc(70px + (100% - 92px) / var(--n,11) - 6px)}}

.termin-geraete{display:flex;flex-direction:column;gap:10px}
.termin-gruppe{margin:14px 0 0;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tram)}
.termin-wahlreihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.termin-wahlreihe.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.termin-wahlreihe .knopf{justify-content:center;min-height:52px;padding:0 10px;font-size:16px;cursor:pointer;white-space:normal;text-align:center;line-height:1.2}
.termin-wahlreihe .knopf[aria-expanded="true"]{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.termin-wahlreihe .knopf.eigenes{border-width:2.5px}
.termin-schritte{margin:2px 0 0;padding:14px 16px 14px 36px;background:var(--karte);border-radius:6px;font-size:15px;line-height:1.55;box-shadow:0 1px 0 var(--linie)}
.termin-schritte li{margin:0 0 6px}.termin-schritte li:last-child{margin:0}
.termin-schritte .ico{vertical-align:-3px}
#zum-kalender{justify-content:center;min-height:52px;font-size:16px}
@media (max-width:340px){.termin-wahlreihe.drei{grid-template-columns:1fr}}
.termin-wahlreihe.drei .knopf{font-size:15px}
.termin-geraete p.termin-erfolg,.termin-erfolg{margin:2px 0 0;padding:12px 16px;border:1.5px solid var(--tinte);border-radius:6px;background:transparent;color:var(--tinte);font:600 15px/1.45 var(--text)}
.termin-geraete{gap:30px}
.termin-block{display:flex;flex-direction:column;gap:10px}
.termin-geraete p.termin-gruppe,.termin-gruppe{margin:0 0 2px}