/* voiceOne Gestaltung 2026 – gemeinsame Stilregeln für die Unterseiten von voice-one.ai.
   Stand 06.10.2026, Entwurf 4.1. Livebetrieb: /css/vo-2026.css?v=JJJJMMTT
   (30 Tage Zwischenspeicher, „unveränderlich“ – jede neue Fassung braucht eine neue Versionsnummer im Verweis).
   Eine Achse für alles: Schiene, Haltepunkte, Starthaltestelle und Endhaltestelle haben ihre Mitte auf der
   Innenkante des Rasters (Rand + var(--gut)). Einspaltige Raster immer mit minmax(0,1fr). */
:root{
  --blue:#0066CC; --blue-d:#004D99; --blue-l:#3399FF;
  --ink:#1A1A2E; --ink-2:#4B4B5F; --ink-3:#66667A;
  --paper:#F6F5F1; --white:#FFFFFF;
  --line:rgba(26,26,46,.14); --line-2:rgba(26,26,46,.08);
  --r:6px; --wrap:1240px; --gut:32px; --pad:112px; --kpt:56px; --kpb:104px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.75,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Sprungmarken landen unter der festen Navigation (72 px) mit Luft, nicht dahinter */
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";background:var(--paper);color:var(--ink);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance;overflow-wrap:break-word}
p,dd,td,li{text-wrap:pretty}
q{quotes:"„" "“"}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Entwurfsleiste und SEO-Ansicht (nur Vorschau, im Livebetrieb entfernen) */
.draft{background:var(--ink);color:rgba(255,255,255,.85);font-size:13px;padding:8px 16px;display:flex;justify-content:center;align-items:center;gap:8px 18px;flex-wrap:wrap}
.draft b{color:#fff;font-weight:600}
.draft a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.draft button{font:inherit;font-size:12.5px;font-weight:600;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:4px 10px;cursor:pointer}
.draft button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}
.seo-panel{background:var(--white);border-bottom:1px solid var(--line);padding:28px 0 32px;font-size:14.5px}
.seo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
.seo-panel h2{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:12px;letter-spacing:0;max-width:none}
.snippet{border:1px solid var(--line);border-radius:8px;padding:16px 18px;font-family:Arial,Helvetica,sans-serif;max-width:600px}
.snippet .url{color:#202124;font-size:14px}
.snippet .t{color:#1a0dab;font-size:20px;line-height:1.3;margin:4px 0}
.snippet .d{color:#4d5156;font-size:14px;line-height:1.58}
.checks{list-style:none;border-top:1px solid var(--line)}
.checks li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.checks li span:first-child{color:var(--ink-3)}
body.seo h1,body.seo main h2,body.seo main h3{outline:1px dashed var(--blue);outline-offset:5px}
body.seo h1::before,body.seo main h2::before,body.seo main h3::before{display:inline-block;font:600 11px/1 var(--mono);color:#fff;background:var(--blue);padding:4px 6px;border-radius:3px;margin-right:12px;vertical-align:middle;letter-spacing:0}
body.seo h1::before{content:"H1"}
body.seo main h2::before{content:"H2"}
body.seo main h3::before{content:"H3"}
body.seo [data-geo]{background:rgba(0,102,204,.07);outline:1px solid rgba(0,102,204,.4);outline-offset:8px}
body.seo [data-geo]::before{content:"Antwort-Absatz · zitierfähig für KI-Suchen";display:block;font:600 11px/1.2 var(--mono);color:var(--blue);margin-bottom:10px;letter-spacing:0}

/* Navigation */
.nav{position:sticky;top:0;z-index:20;background:rgba(246,245,241,.97);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:40px;height:72px}
.brand{flex:none}
.brand img{height:26px;width:auto}
.nav-links{display:flex;gap:28px;font-size:15px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:8px}
.nav-rechts{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-login{font-size:15px;font-weight:500;text-decoration:none;color:var(--ink-2)}
.menue{display:none;position:relative}
.menue summary{list-style:none;cursor:pointer;font-size:15px;font-weight:600;border:1px solid var(--line);border-radius:4px;padding:8px 12px;line-height:1.2}
.menue summary::-webkit-details-marker{display:none}
.menue[open] summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.menue-liste{position:absolute;right:0;top:calc(100% + 14px);width:min(320px,calc(100vw - 2 * var(--gut)));background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(26,26,46,.4);padding:8px 0}
.menue-liste a{display:block;padding:10px 18px;text-decoration:none;font-weight:500;font-size:16px}
.menue-liste a:hover{background:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:16px;font-weight:600;text-decoration:none;border-radius:var(--r);padding:14px 22px;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-d)}
.btn-hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-hell:hover{border-color:#fff}
.btn-sm{padding:10px 16px;font-size:15px}

/* Seitenkopf der Unterseiten: Starthaltestelle mit Brotkrumen, daraus läuft die Schiene durch die Seite */
.kopf{position:relative;padding:var(--kpt) 0 var(--kpb);border-bottom:1px solid var(--line)}
.kopf .schiene{top:19px;bottom:calc(-1 * var(--kpb) - 1px)}
.starthalt{position:absolute;left:-14px;top:5px;width:28px;height:28px;border-radius:50%;border:7px solid var(--ink);background:var(--paper);z-index:2}
.pfad ol{list-style:none;display:grid;gap:3px;font-size:14px;font-weight:500;line-height:20px;margin-top:9px}
.pfad li{color:var(--ink-3)}
.pfad a{color:var(--ink-2);text-decoration:none}
.pfad a:hover{color:var(--ink);text-decoration:underline}
.pfad li[aria-current]{color:var(--ink);font-weight:600}
.kicker{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--ink-2);margin-bottom:26px}
.kicker::before{content:"";width:28px;height:2px;background:var(--blue);flex:none}
.marke{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.01em;color:#fff;background:var(--blue-d);border-radius:4px;padding:2px 7px;line-height:1.4;vertical-align:middle}
.zeile{font-size:clamp(2.1rem,4.9vw,4.4rem);font-weight:600;letter-spacing:-.045em;line-height:1.02}
.zeile span{display:block}
.zeile span:last-child{color:var(--blue)}
.kopf h1{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:600;letter-spacing:-.02em;line-height:1.22;max-width:28ch}
.kopf .zeile+.kopf-grid h1,.kopf .zeile+h1{margin-top:30px}
.kopf h1.gross{font-size:clamp(2rem,4.2vw,3.7rem);letter-spacing:-.04em;line-height:1.06;max-width:22ch}
.kopf-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:start}
.lead{font-size:19px;color:var(--ink-2);max-width:54ch;margin-top:16px}
.cta-zeile{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-top:32px}
.hinweis{font-size:14px;color:var(--ink-3)}
.probe{font-size:15.5px;color:var(--ink-2);margin-top:22px}
.probe a{font-weight:600;color:var(--ink);text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
.meta-zeile{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--ink-3);margin-top:22px}

/* Abschnitte mit durchlaufender Schiene */
.sec{position:relative;padding:var(--pad) 0;border-bottom:1px solid var(--line)}
.sec-grid{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px}
.schiene{position:absolute;left:calc(var(--gut) - 1px);top:calc(-1 * var(--pad));bottom:calc(-1 * var(--pad) - 1px);width:2px;background:var(--line)}
.schiene i{position:absolute;inset:0;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .12s linear}
html:not(.js) .schiene i,.kopf .schiene i{transform:none}
.sec-label{position:relative;padding-left:30px;font-size:15px;font-weight:600;color:var(--ink);align-self:start;display:flex;flex-direction:column;align-items:flex-start}
.punkt{position:absolute;left:-7px;top:5px;width:14px;height:14px;border-radius:50%;border:2px solid var(--blue);background:var(--paper);transition:background .4s,transform .4s}
.aktiv .punkt,html:not(.js) .punkt{background:var(--blue);transform:scale(1.15)}
.sec-label .num{display:inline-block;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;background:var(--blue);border-radius:5px;padding:3px 8px 2px;margin-bottom:10px;letter-spacing:.02em}
h2{font-size:clamp(1.9rem,3.4vw,3.1rem);font-weight:600;letter-spacing:-.035em;line-height:1.07;max-width:22ch}
.antwort{font-size:20px;line-height:1.55;max-width:62ch;margin-top:26px}
.antwort.gross{font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.44;letter-spacing:-.012em;font-weight:500;max-width:36em}
.intro{font-size:19px;color:var(--ink-2);max-width:60ch;margin-top:24px}
.stand{font-size:14px;color:var(--ink-3);margin-top:20px}
.mini{font-size:14px;font-weight:600;color:var(--ink-2);margin:56px 0 16px}
.unterschrift{font-size:14px;color:var(--ink-3);margin-top:14px}
.weiter{display:inline-block;margin-top:22px;font-weight:600;color:var(--blue-d);text-decoration:none}
.weiter:hover{text-decoration:underline}
.klein{font-size:14px;color:var(--ink-3);margin-top:14px;max-width:62ch}

/* Dunkle Abschnitte */
.dunkel{background:var(--ink);color:#fff;border-bottom:0}
.dunkel .schiene{background:rgba(255,255,255,.16);bottom:calc(-1 * var(--pad))}
.dunkel .schiene i{background:var(--blue-l)}
.dunkel .punkt{border-color:var(--blue-l);background:var(--ink)}
.dunkel.aktiv .punkt{background:var(--blue-l)}
.dunkel .sec-label{color:#fff}
.dunkel .sec-label .num{background:var(--blue-l);color:var(--ink)}
.dunkel .unterschrift,.dunkel .stand{color:rgba(255,255,255,.6)}
.dunkel .antwort{color:rgba(255,255,255,.92)}
.dunkel .intro{color:rgba(255,255,255,.75)}
.dunkel .weiter{color:var(--blue-l)}
body.seo .dunkel [data-geo]{background:rgba(51,153,255,.1)}
body.seo .dunkel [data-geo]::before{color:var(--blue-l)}

/* Linienplan: Linie beginnt und endet in der Mitte der Endhaltestellen (Anzahl Haltestellen in --n).
   Haltestellen ohne Verweis stehen in .ohne – die Textregeln unten dürfen diese Hülle nicht treffen. */
.linie{--n:6;list-style:none;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative;margin-top:56px}
.linie::before{content:"";position:absolute;left:14px;right:calc(100% / var(--n) - 14px);top:9px;height:4px;background:var(--blue);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.js .linie::before{transform:scaleX(0)}
.aktiv .linie::before{transform:none}
.linie li{position:relative}
.js .linie li{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s var(--ease);transition-delay:calc(var(--i,0) * .18s + .35s)}
.aktiv .linie li{opacity:1;transform:none}
.linie a,.linie .ohne{display:block;text-decoration:none;padding-right:16px}
.halt{position:relative;display:block;width:22px;height:22px;border-radius:50%;background:var(--paper);border:4px solid var(--blue);margin-bottom:18px;transition:background .2s,transform .2s}
.linie li:first-child .halt,.linie li:last-child .halt{width:28px;height:28px;margin-top:-3px;margin-bottom:15px;border-width:6px;border-color:var(--ink)}
.linie a:hover .halt{background:var(--blue);transform:scale(1.15)}
.linie b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.linie span:not(.halt):not(.ohne){display:block;font-size:15px;color:var(--ink-2);line-height:1.45;margin-top:4px}
.linie a:hover b{color:var(--blue)}
.dunkel .halt{background:var(--ink);border-color:var(--blue-l)}
.dunkel .linie::before{background:var(--blue-l)}
.dunkel .linie li:first-child .halt,.dunkel .linie li:last-child .halt{border-color:#fff}
.dunkel .linie span:not(.halt):not(.ohne){color:rgba(255,255,255,.72)}

/* Schritte als Linie (Anzahl in --n): Linie endet in der Mitte des letzten Schritts */
.schritte{--n:5;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin-top:56px;position:relative}
.schritte::before{content:"";position:absolute;left:14px;right:calc(100% / var(--n) - 14px);top:9px;height:4px;background:var(--blue)}
.schritte li{counter-increment:s;position:relative;padding:44px 20px 0 0}
.schritte li::after{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--paper);border:4px solid var(--blue)}
.schritte li:last-child::after{width:28px;height:28px;top:-3px;border:6px solid var(--ink)}
.schritte li::before{content:counter(s,decimal-leading-zero);display:block;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--blue);margin-bottom:6px}
.schritte h3{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.schritte p{font-size:15px;color:var(--ink-2);margin-top:6px;line-height:1.45}
.schritte a{color:var(--blue-d)}

/* Fenster für Bildschirmfotos */
.fenster{margin-top:56px;background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 24px 48px -28px rgba(26,26,46,.22)}
.fenster-kopf{height:34px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:7px;padding:0 14px;background:#FBFBF9}
.fenster-kopf i{width:10px;height:10px;border-radius:50%;background:rgba(26,26,46,.12)}
.fenster-kopf span{margin-left:12px;font-size:12px;color:var(--ink-3)}
.dunkel .fenster{border-color:rgba(255,255,255,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}

/* Karten im Kopf: Zusammenfassung, Kontaktkarte, Lebenslauf, Firmenkarte, Personalakte */
.notiz{position:relative;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 30px 60px -40px rgba(26,26,46,.35);font-size:15px;overflow:hidden}
.notiz-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.notiz-kopf b{color:var(--ink);font-weight:600}
.notiz-kopf time{font-family:var(--mono);font-size:12.5px}
.notiz-titel{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3;padding:16px 18px 6px}
.notiz dl{padding:2px 18px 6px}
.notiz dl div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.notiz dl div:last-child{border-bottom:0}
.notiz dt{color:var(--ink-3);font-size:13.5px;line-height:1.5}
.notiz dd{font-size:15px;line-height:1.45}
.notiz dd a{color:var(--blue-d)}
.js .notiz.fuellt dl div,.js .notiz.fuellt .chips span{opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}
.js .notiz.fuellt dl div.da,.js .notiz.fuellt .chips span.da{opacity:1;transform:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 18px 16px}
.chips span,.tag{display:inline-block;font-size:11.5px;font-weight:600;color:var(--blue-d);background:rgba(0,102,204,.08);border-radius:4px;padding:2px 7px;white-space:nowrap;line-height:1.5}
.notiz-fuss{font-size:12.5px;color:var(--ink-3);padding:10px 18px;border-top:1px solid var(--line-2);background:#FBFBF9}
/* Stempel auf Karten (Firmenkarte, Personalakte): unterhalb der Kopfzeile, rechts neben dem Titel – in allen Breiten */
.stempel{position:absolute;right:16px;top:50px;font-size:11px;font-weight:700;color:var(--blue);border:2px solid currentColor;border-radius:4px;padding:3px 7px;transform:rotate(-6deg);line-height:1.2;background:var(--white)}
/* Senkrechte Mini-Linie (Lebenslauf eines Gesprächs): Linie von Mitte erster bis Mitte letzter Haltestelle */
.lauf{list-style:none;position:relative;padding:18px 18px 8px}
.lauf::before{content:"";position:absolute;left:31px;top:var(--l0,32px);height:var(--lh,0);width:4px;background:var(--blue)}
.lauf li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding-bottom:22px}
.lauf li:last-child{padding-bottom:12px}
.lauf .halt{margin:0;justify-self:center}
.lauf li:first-child .halt,.lauf li:last-child .halt{width:28px;height:28px;border-width:6px;border-color:var(--ink)}
.lauf li:not(:first-child):not(:last-child) .halt{margin-top:3px}
.lauf b{display:block;font-size:13px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1.4}
.lauf span{display:block;font-size:15px;line-height:1.45}

/* Fahrkarte (Testseite) */
.fahrkarte{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 128px;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 30px 60px -40px rgba(26,26,46,.35);transform:rotate(-1.2deg)}
.fk-haupt{padding:18px 20px 16px}
.fk-kopf{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-3);margin-bottom:12px}
.fk-kopf img{height:18px;width:auto}
.fk-strecke{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-bottom:10px}
.fk-strecke i{flex:1;height:2px;min-width:18px;background:var(--blue);position:relative}
.fk-strecke i::before,.fk-strecke i::after{content:"";position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--white);border:2px solid var(--blue)}
.fk-strecke i::before{left:-5px}
.fk-strecke i::after{right:-5px}
.fahrkarte dl div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px dashed var(--line);font-size:14.5px}
.fahrkarte dt{color:var(--ink-3);font-size:13px}
.fk-abschnitt{position:relative;border-left:2px dashed var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:18px 14px;text-align:center}
.fk-abschnitt::before,.fk-abschnitt::after{content:"";position:absolute;left:-9px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:1px solid var(--line)}
.fk-abschnitt::before{top:-9px}
.fk-abschnitt::after{bottom:-9px}
.fk-stempel{display:inline-block;margin:0 auto;font-size:11px;font-weight:700;color:var(--blue);border:2px solid currentColor;border-radius:4px;padding:3px 6px;transform:rotate(-6deg);line-height:1.2}
.fk-abschnitt a{display:block;font-size:13.5px;font-weight:600;color:#fff;background:var(--blue);border-radius:4px;padding:8px 6px;text-decoration:none;line-height:1.25}
.fk-abschnitt a:hover{background:var(--blue-d)}

/* Ein Tag am Telefon (Branchenseiten) */
.tag-rahmen{margin-top:48px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px 10px}
.tag-kopf{display:flex;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;font-size:14px;color:var(--ink-3);margin-bottom:20px}
.tag-kopf b{color:var(--ink);font-weight:600}
.legende{display:flex;gap:6px 16px;flex-wrap:wrap}
.legende span{display:inline-flex;align-items:center;gap:6px}
.legende i{width:12px;height:12px;border-radius:50%;border:3px solid var(--blue);background:var(--white)}
.legende i.dr{border-color:var(--ink)}
.tl{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:center}
.tl-name{font-size:13px;font-weight:600;color:var(--ink-2)}
.tl-bahn{position:relative;height:32px}
.tl-sie span{position:absolute;top:0;bottom:0;left:var(--a);width:calc(var(--b) - 3px);background:rgba(26,26,46,.07);border-radius:4px;font-size:12.5px;line-height:32px;color:var(--ink-2);padding:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tl-sie span.frei{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.tl-tel{height:40px}
.tl-tel::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--blue)}
.tl-tel button{position:absolute;left:var(--a);top:20px;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:4px solid var(--blue);background:var(--white);cursor:pointer;padding:0;transition:transform .2s,background .2s}
.tl-tel button.dr{border-color:var(--ink)}
.tl-tel button:hover,.tl-tel button[aria-pressed="true"]{background:var(--blue);transform:scale(1.2)}
.tl-tel button.dr:hover,.tl-tel button.dr[aria-pressed="true"]{background:var(--ink)}
.tl-achse{position:relative;height:16px;font:12px/16px var(--mono);color:var(--ink-3)}
.tl-achse span{position:absolute;top:0;left:var(--a);transform:translateX(-50%);white-space:nowrap}
.tl-achse span:first-child{transform:none}
.tl-achse span:last-child{transform:translateX(-100%)}
.anrufe{list-style:none;margin-top:20px;border-top:1px solid var(--line)}
.anrufe li{display:grid;grid-template-columns:62px minmax(0,1.15fr) minmax(0,1fr);gap:8px 20px;padding:14px 12px;margin:0 -12px;border-bottom:1px solid var(--line-2);border-radius:4px;transition:background .25s}
.anrufe li:last-child{border-bottom:0}
.anrufe li.an{background:rgba(0,102,204,.07)}
.anrufe time{font:13px/1.6 var(--mono);color:var(--ink-3)}
.anrufe q{display:block;font-size:16px;line-height:1.45}
.anrufe .erg{font-size:15px;color:var(--ink-2);line-height:1.45}
.anrufe .erg .tag{margin:0 4px 4px 0}

/* Netzplan aller Funktionen */
.netz-legende{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:40px;font-size:14px;font-weight:500}
.netz-legende span{display:inline-flex;align-items:center;gap:8px}
.netz-legende i{width:26px;height:6px;border-radius:3px;background:var(--c)}
.netz{margin-top:20px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:18px 18px 10px}
.netz svg{display:block;width:100%;height:auto;overflow:visible}
.nz-l{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.nz-h circle{fill:var(--paper);stroke-width:3.5;transition:fill .2s}
.nz-h.end circle{stroke:var(--ink)!important;stroke-width:5}
.nz-h text{font:500 13px Inter,sans-serif;fill:var(--ink)}
.nz-h a:hover circle,.nz-h a:focus circle,.nz-h.an circle{fill:var(--c)}
.nz-h a:hover text,.nz-h.an text{fill:var(--blue)}
.nz-hub rect{fill:var(--ink)}
.nz-hub text{font:600 15px Inter,sans-serif;fill:#fff}
.netz-fuss{font-size:13px;color:var(--ink-3);margin-top:8px}
.netz-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px;margin-top:64px}
.nl h3{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;letter-spacing:-.015em;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.nl h3 i{width:26px;height:6px;border-radius:3px;background:var(--c);flex:none}
.nl ul{list-style:none}
.nl li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid var(--line-2)}
.nl li::before{content:"";position:absolute;left:3px;top:19px;width:12px;height:12px;border-radius:50%;border:3px solid var(--c);background:var(--paper)}
.nl li.an{background:rgba(0,102,204,.05)}
.nl b{display:block;font-size:16.5px;font-weight:600}
.nl b a{text-decoration:none}
.nl b a:hover{color:var(--blue);text-decoration:underline}
.nl span{display:block;font-size:15px;color:var(--ink-2);line-height:1.45}

/* Datenschutz-Filter zum Ausprobieren */
.filter{margin-top:48px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.filter-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}
.filter-kopf b{font-size:15px;font-weight:600}
.stufen{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.stufen button{font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);background:transparent;border:0;border-left:1px solid var(--line);padding:7px 14px;cursor:pointer}
.stufen button:first-child{border-left:0}
.stufen button[aria-pressed="true"]{background:var(--ink);color:#fff}
.filter-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.filter-grid>div{padding:18px 20px 20px}
.filter-grid>div+div{border-left:1px solid var(--line);background:#FBFBF9}
.filter-grid h3{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:10px;letter-spacing:0}
.satz{font-size:17px;line-height:1.7}
.modell{font:15px/1.75 var(--mono)}
.pii{border-radius:3px;transition:background .25s}
.zaehlen .pii,.ersetzen .pii{background:rgba(0,102,204,.1);box-shadow:inset 0 -2px 0 var(--blue)}
.ersetzen .pii.ers{background:var(--ink);color:#fff;box-shadow:none;padding:0 4px}
.filter-status{padding:12px 20px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2);min-height:3.2em}
.filter-status b{color:var(--ink)}

/* Fakten, Löschfristen, Steckbrief */
.fristen{margin-top:48px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px 22px}
.fr-zeile{display:grid;grid-template-columns:120px minmax(0,1fr) 200px;gap:20px;align-items:center;padding:10px 0}
.fr-name{font-weight:600;font-size:16px}
.fr-bahn{position:relative;height:14px;background:var(--line-2);border-radius:7px}
.fr-bahn i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--blue);border-radius:7px;transform-origin:left;transition:transform 1.5s var(--ease) .3s}
.js .fr-bahn i{transform:scaleX(0)}
.aktiv .fr-bahn i{transform:none}
.fr-bahn i::after{content:"";position:absolute;right:-2px;top:-6px;width:4px;height:26px;border-radius:2px;background:var(--ink)}
.fr-ende{font-size:15px;color:var(--ink-2)}
.fr-skala{position:relative;height:20px;font:12px/1.3 var(--mono);color:var(--ink-3)}
.fr-skala span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.fr-skala span:first-child{transform:none}
.fr-skala span:last-child{transform:translateX(-100%)}
.fristen figcaption{font-size:14px;color:var(--ink-3);margin-top:10px}
.fakten{margin-top:48px;border-top:1px solid var(--ink)}
.fakt{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;padding:24px 0;border-bottom:1px solid var(--line)}
.fakt dt{font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.35}
.fakt dd{color:var(--ink-2);font-size:17px;max-width:62ch}
.fakt dd a{color:var(--blue-d)}
.dunkel .fakten{border-top-color:#fff}
.dunkel .fakt{border-bottom-color:rgba(255,255,255,.16)}
.dunkel .fakt dd{color:rgba(255,255,255,.78)}
.dunkel .fakt dd a{color:var(--blue-l)}
.steckbrief{width:100%;border-collapse:collapse;margin-top:48px;font-size:16.5px}
.steckbrief tr:first-child th,.steckbrief tr:first-child td{border-top:1px solid var(--ink)}
.steckbrief th{width:26%;text-align:left;font-weight:600;padding:15px 24px 15px 0;vertical-align:top;border-bottom:1px solid var(--line)}
.steckbrief td{padding:15px 0;color:var(--ink-2);border-bottom:1px solid var(--line)}
.steckbrief caption{caption-side:bottom;text-align:left;font-size:14px;color:var(--ink-3);padding-top:16px}
.steckbrief a{color:var(--blue-d)}
.tabelle{width:100%;border-collapse:collapse;margin-top:36px;font-size:16px}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:13px 16px 13px 0;border-bottom:1px solid var(--line)}
.tabelle thead th{font-size:13px;font-weight:600;color:var(--ink-3);border-bottom:1px solid var(--ink)}
.tabelle tbody th{font-weight:600;width:24%}
.tabelle td{color:var(--ink-2)}
.tabelle td a,.tabelle th a{color:var(--blue-d)}
.tabelle caption{caption-side:bottom;text-align:left;font-size:14px;color:var(--ink-3);padding-top:14px}

/* Häufige Fragen */
.fragen{margin-top:48px}
details{border-bottom:1px solid var(--line)}
.fragen details:first-child{border-top:1px solid var(--ink)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0}
summary::-webkit-details-marker{display:none}
summary h3{min-width:0;font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.3;-webkit-hyphens:manual;hyphens:manual}
.fragen summary::after{content:"+";font-weight:400;color:var(--blue);font-size:26px;line-height:1}
.fragen details[open] summary::after{content:"–"}
.fragen details p{padding:0 0 24px;color:var(--ink-2);max-width:68ch;font-size:17px}
.fragen details a{color:var(--blue-d)}

/* Umsteigen zu verwandten Seiten */
.umsteigen{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;list-style:none}
.umsteigen a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 10px;background:var(--white)}
.umsteigen a::before{content:"";width:10px;height:10px;border-radius:50%;border:3px solid var(--blue);background:var(--white)}
.umsteigen a:hover{border-color:var(--blue);color:var(--blue-d)}

/* Hören */
.anruf-zeile{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:36px}
.klingel{position:relative;width:72px;height:72px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;flex:none}
.klingel svg{width:30px;height:30px}
.klingel::before,.klingel::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue);opacity:0}
.aktiv .klingel::before{animation:ring 2.6s ease-out infinite}
.aktiv .klingel::after{animation:ring 2.6s 1.3s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.55}to{transform:scale(2.1);opacity:0}}
.nummer{display:inline-block;font-size:clamp(2.1rem,5vw,4.2rem);font-weight:600;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--blue);text-decoration:none;border-bottom:3px solid currentColor;white-space:nowrap}
.nummer:hover{color:var(--blue-d)}
.beispiele{list-style:none;border-top:1px solid var(--ink);margin-top:48px;max-width:760px}
.beispiele li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.play{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;background:transparent;cursor:pointer;color:var(--ink)}
.play:hover,.spielt .play{background:var(--ink);color:#fff}
.play svg{width:13px;height:13px}
.play .ii{display:none}
.spielt .play .pp{display:none}
.spielt .play .ii{display:block}
.beispiele h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.beispiele small{font-size:14px;color:var(--ink-3)}
.fort{height:2px;background:var(--line);margin-top:8px;max-width:420px}
.fort i{display:block;height:100%;width:0;background:var(--blue)}
.st{font:12px var(--mono);color:var(--ink-3);white-space:nowrap}

/* Artikel und Rechtstexte: Inhaltsverzeichnis als Haltestellen auf der Schiene */
.artikel .sec-label{position:sticky;top:96px}
.toc{list-style:none;display:grid;gap:12px;font-size:14px;font-weight:500;line-height:20px}
.toc-titel{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:2px 0 14px;line-height:20px}
.toc li{position:relative}
.toc li::before{content:"";position:absolute;left:-35px;top:5px;width:10px;height:10px;border-radius:50%;border:2px solid var(--blue);background:var(--paper);transition:background .3s}
.toc li.an::before{background:var(--blue)}
.toc a{color:var(--ink-2);text-decoration:none;display:block}
.toc a:hover,.toc li.an a{color:var(--ink)}
.text{max-width:68ch}
.text h2{font-size:clamp(1.5rem,2.4vw,2.05rem);letter-spacing:-.025em;line-height:1.15;max-width:none;margin:64px 0 0}
.text h2:first-child{margin-top:0}
.text h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:32px 0 0}
.text p,.text ul,.text ol{margin-top:18px;font-size:18px;color:var(--ink-2)}
.text ul,.text ol{padding-left:22px}
.text li{margin-top:8px}
.text li::marker{color:var(--blue)}
.text a{color:var(--blue-d)}
.text strong{color:var(--ink);font-weight:600}
.text .tabelle{margin-top:28px;font-size:16px}
.text .tabelle td,.text .tabelle th{font-size:16px}
.kurz{margin:0 0 8px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.kurz h2{font-size:13px!important;font-weight:600;color:var(--blue-d);letter-spacing:0;margin:0!important;line-height:1.4}
.kurz p{margin-top:8px!important;font-size:19px!important;color:var(--ink)!important;line-height:1.55}
.ki-vermerk{display:flex;gap:14px;align-items:flex-start;margin-top:56px;padding:18px 20px;border:1px dashed var(--line);border-radius:var(--r);font-size:14.5px;color:var(--ink-2);background:var(--white)}
.ki-vermerk b{color:var(--ink)}
.ki-vermerk .tag{flex:none;margin-top:2px}
/* Grenzen als nummerierte Liste */
.grenzen{list-style:none;padding-left:0!important;counter-reset:g;border-top:1px solid var(--ink);margin-top:28px!important}
.grenzen li{counter-increment:g;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:16px 0;margin:0!important;border-bottom:1px solid var(--line)}
.grenzen li::before{content:counter(g,decimal-leading-zero);grid-row:span 2;font:700 13px/1.9 var(--mono);color:var(--blue)}
.grenzen b{display:block;color:var(--ink);font-weight:600;font-size:18px;line-height:1.4}
.grenzen span{display:block;font-size:17px;line-height:1.55}
.recht .text h2{font-size:clamp(1.3rem,2vw,1.6rem)}
.recht .text p{font-size:16.5px}
.adresse{font-style:normal;font-size:18px;line-height:1.6;margin-top:18px}
.angaben{margin-top:22px;border-top:1px solid var(--ink)}
.angaben div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
.angaben dt{font-weight:600;color:var(--ink)}
.angaben dd{color:var(--ink-2)}
.angaben a{color:var(--blue-d)}

/* Marken */
.marken{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:48px;list-style:none}
.marken li{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 20px}
.marken b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em}
.marken span{display:block;font-size:15px;color:var(--ink-2);margin-top:6px;line-height:1.45}
.marken li:first-child{border-color:var(--blue);box-shadow:inset 0 3px 0 var(--blue)}

/* Vorlagenübersicht (nur Vorschau) */
.vorlagen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:48px;list-style:none}
.vorlagen li{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px}
.vl-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vorlagen b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.vl-zahl{font:600 13px/1.4 var(--mono);color:var(--blue-d);white-space:nowrap}
.vorlagen p{font-size:15px;color:var(--ink-2);line-height:1.45;margin-top:8px}
.vorlagen a{margin-top:auto;padding-top:14px;font-size:15px;font-weight:600;color:var(--blue-d);text-decoration:none}
.vorlagen a:hover{text-decoration:underline}
.status{display:inline-block;font-size:11.5px;font-weight:600;border-radius:4px;padding:2px 7px;line-height:1.5;white-space:nowrap}
.tabelle .status{white-space:normal;margin:0 4px 4px 0}
.status.fertig{background:var(--blue);color:#fff}
.status.neu{background:rgba(0,102,204,.08);color:var(--blue-d)}
.status.offen{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* Schluss: Endhaltestelle auf derselben Achse und in derselben Strichstärke wie die Schiene */
.schluss{position:relative;padding:130px 0 120px;background:var(--white);border-bottom:1px solid var(--line)}
.schluss .wrap{position:relative}
.endhalt{position:absolute;left:calc(var(--gut) - 1px);top:-130px;width:2px;height:166px;background:var(--blue)}
.endhalt::after{content:"";position:absolute;left:-13px;bottom:-26px;width:28px;height:28px;border-radius:50%;border:7px solid var(--ink);background:var(--white);box-sizing:border-box}
.schluss .inhalt{padding-left:64px}
.schluss .zeile{font-size:clamp(2.2rem,5vw,4.6rem)}

/* Fahrtanzeige */
.fahrt{position:fixed;left:20px;bottom:20px;z-index:9;display:flex;flex-direction:column;gap:3px;background:var(--ink);color:#fff;text-decoration:none;border-radius:8px;padding:10px 14px 11px;font-size:14px;box-shadow:0 16px 30px -18px rgba(26,26,46,.7);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s}
.fahrt.zeigen{opacity:1;transform:none;pointer-events:auto}
.fa-l{font:11.5px/1.2 var(--mono);color:rgba(255,255,255,.62)}
.fa-n{display:flex;align-items:center;gap:8px;font-weight:600}
.fa-num{background:var(--blue-l);color:var(--ink);border-radius:4px;padding:1px 6px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* Fußbereich */
footer{padding:56px 0 44px;font-size:14px;color:var(--ink-2)}
.fuss-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px}
.fuss-grid img{height:24px;width:auto;margin-bottom:14px}
footer address{font-style:normal;line-height:1.6}
footer h4{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
.fuss-unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line);margin-top:48px;padding-top:20px;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .schiene i,.js .linie li,.linie::before,.fr-bahn i,.fahrt,.js .notiz.fuellt dl div,.js .notiz.fuellt .chips span{transition:none}
  .aktiv .klingel::before,.aktiv .klingel::after{animation:none}
}

/* Mittlere Breiten */
@media (max-width:1020px){
  :root{--pad:88px;--kpb:88px}
  .seo-grid,.kopf-grid,.filter-grid{grid-template-columns:minmax(0,1fr)}
  .filter-grid>div+div{border-left:0;border-top:1px solid var(--line)}
  .sec-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .sec-grid>div:not(.sec-label):not(.schiene){padding-left:30px}
  .kopf-grid{gap:40px}
  .kopf-grid>.visual{max-width:560px}
  .nav-links{display:none}
  .menue{display:block}
  /* Linienplan und Schritte laufen hier senkrecht wie die Schiene: Teilstücke von Haltepunkt zu Haltepunkt */
  .linie{grid-template-columns:minmax(0,1fr);row-gap:22px;margin-top:44px}
  .linie::before{display:none}
  .linie a,.linie .ohne{display:grid;grid-template-columns:36px minmax(0,1fr);padding-right:0}
  .halt{grid-row:span 2;margin:4px 0 0;justify-self:center}
  .linie li:first-child .halt,.linie li:last-child .halt{margin:1px 0 0}
  .linie span:not(.halt):not(.ohne){grid-column:2;margin-top:0}
  .linie li:not(:last-child)::before{content:"";position:absolute;left:16px;top:15px;width:4px;height:calc(100% + 22px);background:var(--blue)}
  .dunkel .linie li:not(:last-child)::before{background:var(--blue-l)}
  .schritte{grid-template-columns:minmax(0,1fr);row-gap:28px;margin-top:44px}
  .schritte::before{display:none}
  .schritte li{padding:0 0 0 48px}
  .schritte li:last-child::after{left:-3px}
  .schritte li:not(:last-child) h3::before{content:"";position:absolute;left:9px;top:11px;width:4px;height:calc(100% + 28px);background:var(--blue)}
  .netz-liste{grid-template-columns:minmax(0,1fr)}
  .marken,.vorlagen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss-grid{grid-template-columns:1fr 1fr}
  .fahrt{display:none}
  .artikel .sec-label{position:relative;top:auto}
  .toc li::before{left:-35px}
  .fr-skala span:first-child{display:none}
}
@media (max-width:820px){
  .netz{display:none}
  .netz-legende{display:none}
  .netz-liste{margin-top:40px}
}
@media (max-width:640px){
  :root{--gut:20px;--pad:68px;--kpt:36px;--kpb:76px}
  html{scroll-padding-top:80px}
  body{font-size:17px}
  .nav-in{gap:12px;height:64px}
  .brand img{height:22px}
  .nav-rechts{gap:10px}
  .nav-login{display:none}
  .nav .btn-sm{padding:9px 12px;font-size:14px}
  .menue summary{font-size:14px;padding:8px 10px}
  .antwort{font-size:18px}
  .lead{font-size:17.5px}
  .fakt{grid-template-columns:minmax(0,1fr);gap:6px}
  .steckbrief th,.steckbrief td{display:block;width:auto;padding:12px 0 0;border-bottom:0}
  .steckbrief td{padding:2px 0 12px;border-bottom:1px solid var(--line)}
  .steckbrief tr:first-child td{border-top:0}
  .tabelle thead{display:none}
  .tabelle tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .tabelle th,.tabelle td,.tabelle tbody th{display:block;width:auto;border:0;padding:2px 0}
  .tabelle td::before{content:attr(data-k) ": ";font-weight:600;color:var(--ink)}
  .angaben div{grid-template-columns:minmax(0,1fr);gap:2px}
  summary h3{font-size:18.5px}
  .tag-rahmen{padding:18px 14px 8px}
  .tl{grid-template-columns:52px minmax(0,1fr);column-gap:8px}
  .tl-name{font-size:12px}
  .tl-sie span{color:transparent}
  .anrufe li{grid-template-columns:minmax(0,1fr);gap:4px}
  .fr-zeile{grid-template-columns:minmax(0,1fr);gap:6px}
  .fr-kopf>span:first-child,.fr-kopf>span:last-child{display:none}
  .notiz dl div{grid-template-columns:minmax(0,1fr);gap:0}
  .fahrkarte{grid-template-columns:minmax(0,1fr);transform:none}
  .fk-abschnitt{border-left:0;border-top:2px dashed var(--line);flex-direction:row;align-items:center;gap:12px}
  .fk-abschnitt::before,.fk-abschnitt::after{top:-9px;left:auto;bottom:auto}
  .fk-abschnitt::before{left:-9px}
  .fk-abschnitt::after{right:-9px}
  .fk-abschnitt a{flex:1}
  .fahrkarte dl div{grid-template-columns:minmax(0,1fr);gap:0}
  .marken,.vorlagen{grid-template-columns:minmax(0,1fr)}
  .anruf-zeile{gap:16px}
  .klingel{width:56px;height:56px}
  .klingel svg{width:24px;height:24px}
  .beispiele li{grid-template-columns:44px minmax(0,1fr)}
  .st{grid-column:2}
  .checks li{grid-template-columns:minmax(0,1fr);gap:2px}
  .stufen button{padding:7px 10px;font-size:13.5px}
  .fuss-grid{grid-template-columns:minmax(0,1fr)}
  .schluss{padding:110px 0 96px}
  .endhalt{top:-110px;height:146px}
  .schluss .inhalt{padding-left:44px}
}

/* Kopfzeile auf dem Handy (07.10.2026): Menüliste rechtsbündig an der Inhaltskante statt am Menüknopf, sonst ragt sie links aus dem Bild.
   Bis 400 px Breite eine etwas engere Kopfzeile, damit Logo, Menü und Knopf nicht an den Rand stoßen. */
.nav-in{position:relative}
.menue{position:static;border:0}
.menue-liste{right:var(--gut);top:100%}
@media (max-width:400px){
  .nav-in{gap:10px}
  .brand img{height:20px}
  .nav-rechts{gap:8px}
  .menue summary{padding:8px 9px}
  .nav .btn-sm{padding:9px 10px;font-size:13.5px}
}

/* Hauptnavigation mit sechs Einträgen inklusive „Partner“ (07.10.2026): Einträge brechen nie um.
   Zwischen 1021 und 1100 px rücken Logo, Leiste und Knöpfe enger zusammen. Gemessen mit pruefen-kopf.html:
   ohne diese Regeln bricht die deutsche Leiste bei 1021 px um, mit ihnen bleiben bei 1021 px noch 89 px Luft. */
.nav-links a{white-space:nowrap}
@media (min-width:1021px) and (max-width:1100px){
  .nav-in{gap:28px}
  .nav-links{gap:20px}
}