/* Netzplan v2. Drei feste Ansichten: Netz, Linienband, Halt. Linie = Bereich, Station = Kapitel, Halt = Lerneinheit, Abschnitt = Teilfrage. */
:root {
  --bg: #FFFFFF; --panel: #F3F4F5; --ink: #121417; --muted: #5C6168; --line: #E1E3E6; --track: #CDD1D6; --fahrt: rgba(18, 20, 23, .13); --focus: #0B57D0; --shadow: 0 8px 30px rgba(0, 0, 0, .16);
  --sans: 'Overpass', 'Helvetica Neue', Arial, sans-serif; --mono: 'Overpass Mono', ui-monospace, Menlo, monospace;
  --gut: max(16px, env(safe-area-inset-left, 0px)); --gutr: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0E1013; --panel: #191C21; --ink: #EEF0F3; --muted: #A0A6AF; --line: #2A2F36; --track: #3A4048; --fahrt: rgba(238, 240, 243, .16); --focus: #8AB4FF; --shadow: 0 8px 30px rgba(0, 0, 0, .5); color-scheme: dark } }
:root[data-theme="dark"] { --bg: #0E1013; --panel: #191C21; --ink: #EEF0F3; --muted: #A0A6AF; --line: #2A2F36; --track: #3A4048; --fahrt: rgba(238, 240, 243, .16); --focus: #8AB4FF; --shadow: 0 8px 30px rgba(0, 0, 0, .5); color-scheme: dark }
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0; height: 100% }
body { background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); overflow: hidden }
button, input { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
h1, h2, h3 { line-height: 1.15; margin: 0; text-wrap: balance; font-weight: 900; letter-spacing: -0.01em }
p { margin: 0 }
.badge { font: 700 13px/1 var(--mono); color: #fff; border-radius: 6px; padding: 5px 7px 4px; display: inline-block; letter-spacing: .04em; flex: none }
.badge.dark { color: #121417 }
.btn { border: 2px solid var(--ink); background: var(--bg); border-radius: 8px; min-height: 44px; padding: 0 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px }
.btn.go { background: var(--ink); color: var(--bg); font-weight: 900 }
.btn.flat { border-color: transparent; background: none }
.note { font-size: 15px; color: var(--muted) }
.kicker { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted) }

/* Kopf */
.bar { display: flex; align-items: center; gap: 10px; padding: 10px var(--gutr) 10px var(--gut); border-bottom: 3px solid var(--ink); background: var(--bg); position: relative; z-index: 20 }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 19px; background: none; border: 0; padding: 4px 0; min-height: 44px; flex: none }
.brand svg { flex: none }
.back { flex: none; max-width: 260px }
.back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap }
.crumbs button { border: 0; background: none; padding: 6px 8px; border-radius: 6px; min-height: 44px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.crumbs button:hover { background: var(--panel) }
.crumbs [aria-current="page"] { font-weight: 900 }
.crumbs .sep { color: var(--muted); flex: none }
.find { position: relative; flex: 0 1 300px; min-width: 170px }
#lagenBtn { white-space: nowrap; flex: none }
.find input { width: 100%; min-height: 44px; border: 2px solid var(--ink); border-radius: 8px; background: var(--bg); padding: 0 12px 0 38px }
.find svg { position: absolute; left: 12px; top: 13px; pointer-events: none }
.hits { position: absolute; right: 0; top: 50px; width: min(460px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; background: var(--bg); border: 2px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; z-index: 40 }
.hits h3 { margin: 8px 8px 4px }
.hits button { width: 100%; text-align: left; border: 0; background: none; padding: 8px; border-radius: 6px; display: flex; gap: 10px; align-items: center; min-height: 44px }
.hits button:hover, .hits button:focus-visible { background: var(--panel) }
.hits small { display: block; color: var(--muted); font-size: 14px }
.hits .empty { padding: 10px; color: var(--muted) }

/* Fahrt-Leiste */
.fahrtbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 8px var(--gutr) 8px var(--gut); background: var(--fahrt); border-bottom: 1px solid var(--line); z-index: 15 }
.fahrtbar .lab { font-weight: 800; min-width: 0 }
.fahrtbar .dots { display: flex; gap: 4px; align-items: center }
.fahrtbar .dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); display: block }
.fahrtbar .dots i.on { background: var(--ink) }
.fahrtbar .grow { flex: 1 }

#view { flex: 1; min-height: 0; overflow: auto; position: relative; padding-bottom: env(safe-area-inset-bottom, 0px) }
#view.fix { overflow: hidden }

/* ---------- Netz ---------- */
.netz { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto }
.mapwrap { position: relative; min-height: 0; overflow: hidden }
#map { width: 100%; height: 100%; display: block; user-select: none }
.trk { fill: none; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round }
.hit { fill: none; stroke: transparent; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; pointer-events: stroke }
.st { cursor: pointer }
.st .dot { fill: var(--bg); stroke-width: 4 }
.st .ring { fill: none; stroke: var(--ink); stroke-width: 2.5 }
.st text { font: 700 23px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round }
.st:focus { outline: none }
.st:focus-visible .dot { stroke: var(--focus); stroke-width: 7 }
.st:focus-visible text { fill: var(--focus) }
.st.sel .dot { stroke-width: 7 }
.st.sel text { text-decoration: underline; text-decoration-thickness: 3px }
.xfer { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round }
.route { fill: none; stroke: var(--fahrt); stroke-width: 40; stroke-linecap: round; stroke-linejoin: round }
.dim { opacity: .2 }
.lterm rect { cursor: pointer }
.lterm text { font: 700 18px var(--mono); pointer-events: none }
.lterm:focus { outline: none } .lterm:focus-visible rect { stroke: var(--focus); stroke-width: 5 }
.here-pin rect { fill: var(--ink) } .here-pin text { font: 800 17px var(--sans); fill: var(--bg) } .here-pin path { fill: var(--ink) }

.card { position: absolute; top: 14px; width: 380px; max-height: calc(100% - 28px); overflow: auto; background: var(--bg); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; display: grid; gap: 14px; align-content: start; z-index: 5 }
.card.r { right: var(--gutr) } .card.l { left: var(--gut) }
.card .top { display: flex; align-items: center; gap: 8px }
.card .x { margin-left: auto; width: 44px; height: 44px; border-radius: 8px; border: 0; background: var(--panel); font-size: 22px; line-height: 1 }
.card h2 { font-size: 26px }
.card .q { font-size: 18px }
.card .acts { display: flex; gap: 8px; flex-wrap: wrap }
.halte { list-style: none; margin: 0; padding: 0; display: grid }
.halte li { position: relative; padding-left: 28px }
.halte li::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 4px; background: var(--c) }
.halte li:first-child::before { top: 16px } .halte li:last-child::before { bottom: calc(100% - 20px) }
.halte li:only-child::before { display: none }
.halte li::after { content: ""; position: absolute; left: 0; top: 11px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--c); box-sizing: border-box }
.halte li.seen::after { background: var(--c) }
.halte li.cur::after { background: var(--ink); border-color: var(--ink); transform: scale(1.2) }
.halte button { border: 0; background: none; text-align: left; padding: 6px 0; min-height: 44px; font-weight: 600; width: 100% }
.halte .tag { font: 500 12px var(--mono); color: var(--muted); margin-left: 6px; white-space: nowrap }
.xlist { display: grid; gap: 6px }
.xlist button { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 8px 10px; text-align: left; min-height: 44px; width: 100% }
.xlist small { color: var(--muted); display: block; font-size: 14px }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 6px }
.steps button { width: 100%; display: flex; gap: 10px; align-items: center; border: 0; background: var(--panel); border-radius: 8px; padding: 8px 10px; text-align: left; min-height: 44px }
.steps button::before { counter-increment: s; content: counter(s); font: 700 14px var(--mono); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--ink); flex: none }
.steps .done button::before { content: "✓"; background: var(--ink); color: var(--bg) }
.steps small { display: block; color: var(--muted); font-size: 14px }

.legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px var(--gutr) 10px var(--gut); border-top: 1px solid var(--line); background: var(--bg) }
.legend .ln { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; border-radius: 8px; padding: 6px 8px; min-height: 44px; font-weight: 700; font-size: 15px }
.legend .ln:hover { background: var(--panel) }
.legend .grow { flex: 1 }
.legend .tog[aria-pressed="true"] { background: var(--ink); color: var(--bg) }

.liste { max-width: 1100px; margin: 0 auto; padding: 24px var(--gutr) 60px var(--gut); display: grid; gap: 36px }
.liste section { display: grid; gap: 12px }
.liste .lh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.liste h2 { font-size: 28px }
.liste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; border-left: 6px solid var(--c); padding-left: 18px }
.liste li h3 { font-size: 19px }
.liste li h3 .stnr { display: block; font: 600 13px/1.4 var(--sans); color: var(--muted); letter-spacing: .02em }
.liste li p { color: var(--muted) }
.liste .hl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.liste .hl button { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 4px 12px; min-height: 44px; font-size: 15px; font-weight: 600 }
.liste .hl button.seen { border-color: var(--ink) }
.liste .hl button.seen::before { content: "✓ " }

/* ---------- Linienband ---------- */
.band { --c: #888; min-height: 100%; display: grid; grid-template-rows: auto 1fr }
.bandhead { padding: 22px var(--gutr) 8px var(--gut); display: flex; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap }
.bandhead h1 { font-size: clamp(30px, 4vw, 44px) }
.bandhead .meta { color: var(--muted); font-size: 15px; margin-top: 4px }
.bandhead .others { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; align-items: center }
.bandhead .others button { border: 0; background: none; padding: 6px; min-height: 44px; min-width: 44px; border-radius: 8px }
.bandhead .others button[aria-current="true"] { outline: 3px solid var(--ink); outline-offset: -3px }
.stops { list-style: none; margin: 0; padding: 18px var(--gutr) 40px var(--gut); display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut) }
.stop { flex: 0 0 290px; position: relative; padding: 0 22px 0 0; scroll-snap-align: start }
.stop::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 12px; background: var(--c) }
.stop:first-child::before { left: 14px; border-radius: 6px 0 0 6px } .stop:last-child::before { right: calc(100% - 30px); border-radius: 0 6px 6px 0 }
.stop .node { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; background: var(--bg); border: 5px solid var(--c); display: block }
.stop.xf .node { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--ink) }
.stop.full .node { background: var(--c) }
.stop.half .node { background: linear-gradient(var(--c) 50%, var(--bg) 50%) }
.stop.fahrt .node::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; background: var(--fahrt); z-index: -1 }
.stop .pin { position: absolute; left: 52px; top: 40px; z-index: 2; background: var(--ink); color: var(--bg); font: 800 13px var(--sans); padding: 4px 8px; border-radius: 6px; white-space: nowrap }
.stop .body { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border-radius: 12px; border: 2px solid transparent }
.stop.focus .body { border-color: var(--ink); background: var(--panel) }
.stop .code { font: 700 13px var(--mono); color: var(--muted) }
.stop h2 { font-size: 22px }
.stop .q { font-size: 16px }
.stop .xs { display: grid; gap: 4px; margin-top: 4px }
.stop .xs button { display: flex; gap: 8px; align-items: center; border: 0; background: none; padding: 4px 0; min-height: 44px; text-align: left; font-size: 15px }
.stop .xs button span:last-child { border-bottom: 1px dashed var(--muted) }

/* ---------- Halt ---------- */
.halt { --c: #888 }
.hstrip { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutr) 6px var(--gut); display: flex; align-items: center; gap: 12px }
.hstrip .lb { flex: 1; display: flex; overflow-x: auto; min-width: 0; scrollbar-width: none; padding: 5px 4px; margin: -5px -4px }
.hstrip .lb::-webkit-scrollbar { display: none }
.lb button { flex: 1 0 96px; border: 0; background: none; display: grid; justify-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--muted); position: relative; padding: 0 4px; min-height: 44px; line-height: 1.2 }
.lb button::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 5px; background: var(--c) }
.lb button:first-child::before { left: 50% } .lb button:last-child::before { right: 50% }
.lb i { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 4px solid var(--c); position: relative; z-index: 1; box-sizing: border-box }
.lb button.full i { background: var(--c) }
.lb [aria-current="true"] { color: var(--ink); font-weight: 900 }
.lb [aria-current="true"] i { background: var(--ink); border-color: var(--ink); transform: scale(1.3) }
.hgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; max-width: 1280px; margin: 0 auto; padding: 26px var(--gutr) 80px var(--gut) }
.hgrid > * { min-width: 0 }
.hnav { position: sticky; top: 84px; align-self: start; display: grid; gap: 10px; max-height: calc(100vh - 200px); overflow: auto; padding: 4px; margin: -4px }
.hnav .sub { list-style: none; margin: 2px 0 8px; padding: 0 0 0 4px; display: grid; gap: 2px }
.hnav .sub button { border: 0; background: none; text-align: left; font-size: 14px; color: var(--muted); padding: 4px 8px; border-left: 3px solid var(--line); min-height: 44px; width: 100% }
.hnav .sub button.on { color: var(--ink); font-weight: 800; border-left-color: var(--ink) }
article { display: grid; gap: 0 }
.ahead { display: grid; gap: 12px; margin-bottom: 28px }
.ahead h1 { font-size: clamp(34px, 4.4vw, 54px) }
.ahead .lead { font-size: 21px; max-width: 46ch }
.ahead .meta { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 15px }
.entry { border-left: 6px solid var(--c); background: var(--panel); border-radius: 0 12px 12px 0; padding: 14px 18px; display: grid; gap: 8px; max-width: 70ch }
.entry b { font-family: var(--mono) }
.media { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin: 0 0 40px }
.player { background: #121417; color: #fff; border-radius: 12px; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: 16px }
.player button { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; background: none; color: #fff; font-size: 24px }
.player small { display: block; font-family: var(--mono); opacity: .85; margin-top: 8px }
.mside { display: grid; gap: 10px; align-content: start }
.audio { display: flex; gap: 10px; align-items: center; border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; background: none; width: 100%; text-align: left; min-height: 48px }
details { border: 2px solid var(--line); border-radius: 10px; padding: 10px 14px }
details summary { font-weight: 800; cursor: pointer; min-height: 30px }
details > p { margin-top: 8px; font-size: 16px }
.part { border-top: 3px solid var(--ink); padding-top: 16px; margin-bottom: 52px; display: grid; gap: 14px; scroll-margin-top: 90px }
.part .phead { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.part .no { font: 700 13px var(--mono); color: var(--muted) }
.part .when { font: 500 13px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px }
.part h2 { font-size: 31px; max-width: 26ch }
.part .leit { font-size: 21px; font-weight: 700; max-width: 52ch; border-left: 6px solid var(--c); padding-left: 14px }
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start }
.cols > * { min-width: 0 }
.cols .txt { display: grid; gap: 12px; max-width: 66ch }
.speak { justify-self: start; border: 0; background: none; color: var(--muted); font-size: 14px; padding: 4px 0; min-height: 36px }
.speak[aria-pressed="true"] { color: var(--ink); font-weight: 800 }
.term { border: 0; background: none; padding: 0; font-weight: 800; text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-thickness: 2px }
.xm { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0 2px; vertical-align: 1px; min-height: 28px }
.xm .badge { font-size: 11px; padding: 4px 5px 3px }
.xm::before { content: "↗"; font-weight: 900; font-size: 14px }
.xm-t { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 4px }
.check, .merke, .weiter { border-radius: 14px; padding: 22px; display: grid; gap: 14px; margin-bottom: 28px }
.check { border: 2px solid var(--ink) }
.check .opts { display: grid; gap: 8px }
.check .opts button { text-align: left; border: 2px solid var(--line); background: var(--bg); border-radius: 10px; padding: 10px 14px; min-height: 48px; font-weight: 600 }
.check .opts button[aria-pressed="true"] { border-color: var(--ink) }
.check .fb { font-weight: 700 }
.merke { background: var(--c); color: #fff }
.merke.dark { color: #121417 }
.merke h2 { font-size: 26px }
.merke ul { margin: 0; padding-left: 22px; font-size: 19px; font-weight: 700; display: grid; gap: 6px }
.merke .speak { color: inherit; opacity: .9 }
.weiter { background: var(--panel) }
.weiter h2 { font-size: 26px }
.wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px }
.wcard { display: grid; gap: 4px; text-align: left; border: 2px solid var(--line); background: var(--bg); border-radius: 12px; padding: 12px 14px; min-height: 64px; align-content: start }
.wcard.main { border-color: var(--ink) }
.wcard .k { display: flex; gap: 8px; align-items: center; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.wcard b { font-size: 18px }
.wcard small { color: var(--muted); font-size: 14px }
.skel { border: 2px dashed var(--track); border-radius: 12px; padding: 16px; display: grid; gap: 10px; margin-bottom: 18px; color: var(--muted) }
.skel i { display: block; height: 12px; border-radius: 6px; background: var(--line) }
.notice { background: var(--panel); border-radius: 12px; padding: 14px 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 28px }

/* Widgets aus widgets.js */
.widget { border: 2px solid var(--ink); border-radius: 12px; padding: 16px; display: grid; gap: 12px }
.w-label { font-weight: 800; margin: 0 }
.w-chips, .w-row, .w-seg { display: flex; flex-wrap: wrap; gap: 8px }
.w-chip, .w-btn, .w-seg-btn { border: 2px solid var(--ink); background: var(--bg); border-radius: 8px; padding: 6px 12px; min-height: 44px; font-weight: 700 }
.w-chip[aria-pressed="true"], .w-seg-btn[aria-checked="true"] { background: var(--ink); color: var(--bg) }
.w-btn-quiet { border-color: var(--line) }
.w-bubble { background: var(--panel); border-radius: 12px 12px 12px 2px; padding: 12px 16px; display: grid; gap: 4px }
.w-bubble-head { font: 500 12px var(--mono); color: var(--muted) }
.w-hint, .w-caption { margin: 0; color: var(--muted); font-size: 15px }
.w-lanes { display: grid; gap: 10px }
.w-lane-title { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted) }
.w-lane-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px }
.w-node { border: 2px solid var(--track); border-radius: 999px; padding: 4px 12px; font-weight: 700; color: var(--muted) }
.w-node.is-done { border-color: var(--ink); color: var(--ink) }
.w-node.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.w-arrow { color: var(--track); font-weight: 900 } .w-arrow.is-on { color: var(--ink) }
.w-record { background: var(--panel); border-radius: 10px; padding: 12px 14px; font-size: 15px }
.w-record dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 6px 0 } .w-record dt { color: var(--muted) } .w-record dd { margin: 0; font-weight: 700 } .w-record p { margin: 0 }
.w-days { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative }
.w-day { display: grid; justify-items: center; text-align: center; gap: 2px; font-size: 13px; position: relative; padding-top: 28px }
.w-day::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 5px; background: var(--track) }
.w-day::after { content: ""; position: absolute; top: 2px; left: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 4px solid var(--track); box-sizing: border-box }
.w-day.is-past::before, .w-day.is-due::before { background: var(--ink) }
.w-day.is-past::after { border-color: var(--ink) }
.w-day.is-due::after { background: var(--ink); border-color: var(--ink); transform: scale(1.3) }
.w-day-short { display: none } .w-day-name { font-weight: 800; font-size: 15px } .w-day-count { font-family: var(--mono); font-size: 11px } .w-day-detail { color: var(--muted) }
.w-due { font-weight: 900; background: var(--ink); color: var(--bg); border-radius: 4px; padding: 2px 6px; margin-top: 4px }
.w-range { width: 100%; accent-color: var(--ink); min-height: 44px }
.w-bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px }
.w-week { text-align: center; font: 500 12px var(--mono); padding: 6px 0; background: var(--panel); color: var(--muted) }
.w-week.is-on.is-betrieb { background: var(--ink); color: var(--bg) } .w-week.is-on.is-kasse { background: #1971C2; color: #fff }
.w-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted) }
.w-key::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px }
.w-key.is-betrieb::before { background: var(--ink) } .w-key.is-kasse::before { background: #1971C2 }

/* Popover, Blatt, Hinweis */
.pop { position: fixed; z-index: 60; width: min(340px, calc(100vw - 32px)); background: var(--bg); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; display: grid; gap: 10px }
.pop .acts { display: flex; gap: 8px; flex-wrap: wrap }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 50; display: grid; place-items: center; padding: 16px }
.sheet { background: var(--bg); border-radius: 16px; width: min(880px, 100%); max-height: calc(100% - 32px); overflow: auto; padding: 24px; display: grid; gap: 20px; box-shadow: var(--shadow) }
.sheet .top { display: flex; align-items: flex-start; gap: 12px }
.sheet .top h2 { font-size: 30px }
.sheet .x { margin-left: auto; width: 44px; height: 44px; border-radius: 8px; border: 0; background: var(--panel); font-size: 22px; flex: none }
.lgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px }
.lgroups section { display: grid; gap: 6px; align-content: start }
.lage { display: grid; gap: 2px; text-align: left; border: 2px solid var(--line); background: var(--bg); border-radius: 10px; padding: 10px 12px; min-height: 52px; width: 100% }
.lage:hover { border-color: var(--ink) }
.lage b { font-size: 17px }
.lage .codes { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted) }
.lage .codes .badge { font-size: 10px; padding: 3px 4px 2px }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 8px; max-width: min(520px, calc(100% - 32px)); z-index: 70; font-size: 15px }

/* Handy-Start */
.phome { padding: 18px var(--gutr) 40px var(--gut); display: grid; gap: 24px }
.phome h2 { font-size: 22px }
.resume { display: grid; gap: 6px; text-align: left; border: 0; border-radius: 14px; background: var(--ink); color: var(--bg); padding: 16px; width: 100% }
.resume b { font-size: 21px }
.plines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.plines button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; text-align: left; border: 2px solid var(--line); border-left: 8px solid var(--c); background: var(--bg); border-radius: 10px; padding: 12px; min-height: 60px }
.plines small { grid-column: 2; color: var(--muted); font-size: 14px }
.plines .arr { grid-row: 1 / span 2; grid-column: 3; font-weight: 900 }
.pmap { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; height: 300px }

@media (min-width: 1080px) { .cols.has-w { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) } }
.crumbs button:first-child { flex: none }
@media (max-width: 900px) {
  .hgrid { grid-template-columns: 1fr; gap: 20px } .hnav { position: static; max-height: none } .hnav .others { display: none }
  .media { grid-template-columns: 1fr }
  .card { width: auto; left: var(--gut) !important; right: var(--gutr) !important; top: auto; bottom: 10px; max-height: 62% }
}
@media (max-width: 760px) {
  .crumbs { display: none } .bar { flex-wrap: wrap } .find { order: 5; flex: 1 1 100%; max-width: none } .bar .spacer { flex: 1 }
  .brand .word { display: none }
  .stops { flex-direction: column; overflow: visible; padding-top: 8px }
  .stop { flex: none; padding: 0 0 18px 60px }
  .stop::before { top: 0; bottom: 0; left: 15px; right: auto; width: 12px; height: auto }
  .stop:first-child::before { top: 20px; left: 15px; border-radius: 6px 6px 0 0 } .stop:last-child::before { bottom: calc(100% - 30px); right: auto; border-radius: 0 0 6px 6px }
  .stop .node { position: absolute; left: 0; top: 6px }
  .stop .pin { left: 60px; top: -22px }
  .stop .body { margin-top: 0; padding: 10px 12px }
  .bandhead .others { margin-left: 0 }
  .part h2 { font-size: 26px } .part .leit { font-size: 19px }
  .back { max-width: 190px }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important } }

/* ---------- K8, 03.11.2026: Gesamtwerk ---------- */
/* Programmatisch fokussierte Überschriften (nach Haltwechsel) ohne Rahmen */
.fz:focus { outline: none }
/* Ortspfad: Linienkürzel ohne Stationsnamen, damit der Halt-Titel Platz hat. „Netz“ übernimmt auf dem iPad das Logo. */
.crumbs .mid { padding: 6px 4px; flex: none }
@media (max-width: 1300px) { .back { max-width: 190px } .crumbs .netz:not(:last-child), .crumbs .netz:not(:last-child) + .sep { display: none } .has-back .brand .word { display: none } }
@media (max-width: 1100px) and (min-width: 761px) { .brand .word { display: none } .find { flex-basis: 190px; min-width: 150px } .back { max-width: 150px } }
/* Schalter „Bewegung“ mit sichtbarem Zustand */
.schalter { gap: 8px }
.schalter .sw { width: 38px; height: 22px; border-radius: 11px; border: 2px solid var(--ink); position: relative; flex: none; transition: background .2s ease }
.schalter .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: transform .2s ease, background .2s ease }
.schalter[aria-checked="true"] .sw { background: var(--ink) }
.schalter[aria-checked="true"] .sw::after { transform: translateX(16px); background: var(--bg) }
.schalter .swz { font: 700 13px var(--mono); min-width: 3ch; text-align: left }
/* Linienleiste: weicher Rand mit Pfeil, wenn Stationen außerhalb liegen */
.lbw { flex: 1; min-width: 0; position: relative; display: flex }
.hstrip .lb { position: relative }
.lbp { position: absolute; top: -5px; bottom: -5px; width: 48px; border: 0; padding: 0 4px; z-index: 2; display: none; align-items: center; font: 900 26px/1 var(--sans); color: var(--ink) }
.lbp.l { left: -4px; justify-content: flex-start; background: linear-gradient(90deg, var(--bg) 45%, transparent) }
.lbp.r { right: -4px; justify-content: flex-end; background: linear-gradient(270deg, var(--bg) 45%, transparent) }
.lbw.mehr-l .lbp.l, .lbw.mehr-r .lbp.r { display: flex }
/* Haltplan: auf dem Handy zugeklappt, ein Knopf zeigt „Halt 1 von 6“ */
.hnav-tog { display: none }
@media (max-width: 760px) {
  .hnav-tog { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; text-align: left; width: 100%; border: 2px solid var(--line); border-left: 6px solid var(--c); border-radius: 10px; background: var(--bg); padding: 10px 12px; min-height: 56px }
  .hnav-tog .kicker { grid-column: 1 }
  .hnav-tog b { grid-column: 1; font-size: 17px }
  .hnav-tog .arr { grid-row: 1 / span 2; grid-column: 2; width: 12px; height: 12px; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease }
  .hnav.auf .hnav-tog .arr { transform: translateY(3px) rotate(-135deg) }
  .hnav:not(.auf) > :not(.hnav-tog) { display: none }
  .hgrid { gap: 14px; padding-top: 16px }
  .ahead .meta { display: none }
}
/* Station geschafft (B3): nach dem letzten Halt einer Station */
.geschafft { border: 3px solid var(--c); border-radius: 16px; padding: 22px; display: grid; gap: 16px; margin-bottom: 28px; background: var(--bg) }
.gs-top { display: flex; gap: 14px; align-items: center }
.gs-haken { width: 48px; height: 48px; border-radius: 50%; background: var(--c); flex: none; position: relative }
.gs-haken::after { content: ""; position: absolute; left: 17px; top: 9px; width: 11px; height: 22px; border-right: 5px solid var(--bg); border-bottom: 5px solid var(--bg); transform: rotate(45deg) }
.geschafft h2 { font-size: 28px; hyphens: auto; overflow-wrap: anywhere }
.gs-merke { display: grid; gap: 8px; background: var(--panel); border-radius: 12px; padding: 14px 18px }
.gs-merke ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 18px; font-weight: 700 }
.gs-weg { display: flex; gap: 8px; flex-wrap: wrap }
/* Lebenslage zu Ende: Das tust du jetzt */
.tun { border: 2px solid var(--ink); border-radius: 14px; padding: 22px; display: grid; gap: 12px; margin-bottom: 28px; background: var(--fahrt) }
.tun h2 { font-size: 26px }
.tun ol { margin: 0; padding-left: 24px; display: grid; gap: 8px; font-size: 18px }
.tun .acts { display: flex; gap: 8px; flex-wrap: wrap }
/* B5 Lesestand sichtbar (LD-B5): gelesene Strecke kräftiger, angefangene Station mit Anteilsring */
.gel { fill: none; stroke-width: 21; stroke-linecap: round; stroke-linejoin: round }
.draw .gel { animation: gelin .5s 1.1s backwards }
@keyframes gelin { from { opacity: 0 } }
.st .teil-grund { fill: none; stroke: var(--bg); stroke-width: 9 }
.st .teil { fill: none; stroke-width: 5; stroke-linecap: round }
.lb button.half i { background: linear-gradient(90deg, var(--c) 50%, var(--bg) 50%) }
/* B4 Begriffe: im Text unauffällig gepunktet unterstrichen, Fenster als Überlagerung (.pop) */
.begr { border: 0; background: none; font: inherit; color: inherit; padding: 8px 0; margin: -8px 0; cursor: help; text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--c, var(--ink)) 75%, transparent); border-radius: 4px; -webkit-tap-highlight-color: transparent }
.begr:hover, .begr[aria-expanded="true"] { text-decoration-style: solid; background: color-mix(in srgb, var(--c, var(--ink)) 12%, transparent) }
strong .begr, .begr strong { font-weight: inherit }
.hits .alle-begr { border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; font-weight: 700; justify-content: space-between; margin-top: 4px }
.begriffe { max-width: 820px; margin: 0 auto; padding: 28px 24px 64px }
.begriffe .abc { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0; margin: 8px 0 12px; background: var(--bg); border-bottom: 2px solid var(--line) }
.begriffe .abc button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; font-weight: 800; font-family: var(--mono) }
.begriffe .bz { scroll-margin-top: 72px }
.begriffe .bz h2 { font-size: 26px; margin: 22px 0 6px; font-family: var(--mono) }
.begriffe dl { display: grid; gap: 4px; margin: 0 }
.begriffe dt { font-weight: 800; font-size: 19px; margin-top: 14px }
.begriffe dd { margin: 0; display: grid; gap: 6px; justify-items: start }
.begriffe dd p { margin: 0; max-width: 62ch }
.bz-weg { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 6px 10px; min-height: 44px; font-weight: 600; text-align: left }
.bz-weg .arr { margin-left: 4px }
@media (max-width: 759px) { .begriffe { padding: 18px 16px 48px } }
/* B7 gesperrte Linien: blass, nicht befahrbar (Hinweis „Auf dieser Linie wird noch gebaut“) */
#map g.zu, #map .st.zu > * { opacity: .32 }
#map .st.zu text { font-style: italic }
#map g.zu .hit, #map g.zu .lterm, #map .st.zu { cursor: not-allowed }
.legend .ln.zu { opacity: .5; cursor: not-allowed }
.liste section.zu { opacity: .55 }
.liste section.zu .hl button, .plines li.zu button { cursor: not-allowed }
.plines li.zu button { opacity: .55 }
/* B7 Darstellung Hell · System · Dunkel */
.thema { display: inline-flex; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; flex: none }
.thema button { min-height: 40px; min-width: 64px; padding: 0 12px; border: 0; background: var(--bg); color: var(--ink); font-weight: 700 }
.thema button + button { border-left: 2px solid var(--ink) }
.thema button[aria-checked="true"] { background: var(--ink); color: var(--bg) }
.phome .thema { justify-self: start }
.phome .thema button { min-height: 44px }
/* B7 Regler: Schiene mit Griff, Minus und Plus (je 44 px), feste Höhe */
.rg { display: grid; gap: 6px; min-width: 0 }
.rg-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 24px }
.rg-b { font-weight: 700 }
.rg-wert { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap }
.rg-zeile { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; align-items: center }
.rg-k { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 24px; font-weight: 800; line-height: 1; display: grid; place-items: center; touch-action: manipulation; user-select: none; -webkit-user-select: none }
.rg-k:disabled { opacity: .35 }
.rg-bahn { position: relative; height: 44px; display: grid; align-items: center }
.rg-mit-marken .rg-bahn { height: 64px; align-items: start; padding-top: 0 }
.rg-schiene { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; touch-action: pan-y; cursor: pointer; --p: 0%; --rc: var(--c, var(--ink)) }
.rg-schiene::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--rc) var(--p), var(--track) var(--p)) }
.rg-schiene::-moz-range-track { height: 10px; border-radius: 5px; background: var(--track) }
.rg-schiene::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--rc) }
.rg-schiene::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: var(--bg); border: 4px solid var(--rc); box-shadow: 0 1px 4px rgba(0, 0, 0, .25) }
.rg-schiene::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 4px solid var(--rc) }
.rg-schiene:focus-visible { outline: none }
.rg-schiene:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus); outline-offset: 3px }
.rg-schiene:focus-visible::-moz-range-thumb { outline: 3px solid var(--focus); outline-offset: 3px }
.rg-marken { position: absolute; left: 15px; right: 15px; top: 40px; height: 20px; font-size: 13px; color: var(--muted) }
.rg-marken span { position: absolute; transform: translateX(-50%); white-space: nowrap }
.rg-marken span::before { content: ""; position: absolute; left: 50%; top: -8px; width: 2px; height: 6px; background: var(--line) }
@media (max-width: 760px) { .rg-kopf { flex-wrap: wrap; row-gap: 2px } .rg-wert { max-width: 100%; white-space: normal; text-align: left } } /* schmal: langer Wert rutscht unter die Beschriftung statt über den Kasten hinaus */
.rg-marken span:first-child:not(:only-child) { transform: none } .rg-marken span:first-child:not(:only-child)::before { left: 0 }
.rg-marken span:last-child:not(:only-child) { transform: translateX(-100%) } .rg-marken span:last-child:not(:only-child)::before { left: auto; right: 0 }
.rg-klein .rg-kopf { font-size: 15px }

/* B7 Papier: helles Papier bleibt hell, Teile frei kombinierbar */
:root { --pp-grund: var(--bg) } /* Seitengrund für die Lochung, bevor .pp die Farben umstellt */
.pp { --pp-bg: #FBFAF6; --pp-ink: #1A1C1F; --pp-mut: #5B6068; --pp-line: #D9D5CA; --pp-rot: #B3261E; --pp-blau: #1F4FA8; --pp-gruen: #1B6B3A;
  --bg: var(--pp-bg); --ink: var(--pp-ink); --muted: var(--pp-mut); --line: var(--pp-line); --panel: #F1EFE8; --track: #CBC6BA; --focus: #0B57D0; color-scheme: light;
  position: relative; background: var(--pp-bg); color: var(--pp-ink); border: 1px solid var(--pp-line); border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); padding: 22px 26px; display: grid; gap: 12px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; font-size: 16px }
:root[data-theme="dark"] .pp { --pp-bg: #ECEAE3; box-shadow: 0 2px 14px rgba(0, 0, 0, .55) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp { --pp-bg: #ECEAE3; box-shadow: 0 2px 14px rgba(0, 0, 0, .55) } }
.pp p { margin: 0 }
.pp-kopf { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 2px solid var(--pp-ink) }
.pp-logo { width: 38px; height: 38px; border-radius: 8px; background: var(--pp-ink); color: var(--pp-bg); display: grid; place-items: center; font-weight: 900; flex: none }
.pp-abs { display: grid } .pp-abs small { color: var(--pp-mut) }
.pp-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px }
.pp-an { display: grid } .pp-dat { display: grid; text-align: right; color: var(--pp-mut) }
.pp-betreff { font-weight: 800 }
.pp-inhalt { display: grid; gap: 8px }
.pp-fuss { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 6px }
.pp-unter { display: grid; min-width: 160px }
.pp-sig { font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive; font-size: 22px; line-height: 1.1; color: var(--pp-blau); transform: rotate(-3deg); transform-origin: left bottom }
.pp-linie { height: 1px; background: var(--pp-ink); margin: 2px 0 4px }
.pp-unter small { color: var(--pp-mut) }
.pp-stempel { --s: var(--pp-rot); display: inline-grid; place-items: center; text-align: center; color: var(--s); border: 3px double var(--s); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; transform: rotate(-8deg); opacity: .85; padding: 6px 10px }
.pp-fuss > .pp-stempel { margin-left: auto }
.pp-stempel.rund { width: 92px; height: 92px; border-radius: 50%; padding: 8px }
.pp-stempel.eckig { border-radius: 4px }
.pp-stempel.blau { --s: var(--pp-blau) } .pp-stempel.gruen { --s: var(--pp-gruen) }
.pp-seite { position: absolute; right: 14px; bottom: 8px; font-size: 12px; color: var(--pp-mut) }
.pp-loch::before, .pp-loch::after { content: ""; position: absolute; left: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--pp-grund); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35) }
.pp-loch::before { top: 30% } .pp-loch::after { top: 60% }
.pp-loch { padding-left: 34px }
.pp-falzmarke { position: absolute; left: 0; top: 33.3%; width: 12px; height: 0; border-top: 1px solid var(--pp-mut) }
/* Arten */
.pp-bescheid .pp-kopf { border-bottom: 4px double var(--pp-ink) }
.pp-bescheid .pp-logo { border-radius: 2px; background: none; color: var(--pp-ink); border: 2px solid var(--pp-ink) }
.pp-bescheid .pp-betreff { text-transform: uppercase; letter-spacing: .04em; font-size: 15px }
.pp-formular { background-image: repeating-linear-gradient(transparent 0 31px, var(--pp-line) 31px 32px); font-family: var(--mono); font-size: 15px }
.pp-formular .pp-kopf { border-bottom: 0; background: var(--pp-ink); color: var(--pp-bg); margin: -22px -26px 0; padding: 10px 26px; border-radius: 4px 4px 0 0 }
.pp-formular .pp-logo { background: var(--pp-bg); color: var(--pp-ink) }
.pp-formular .pp-abs small { color: inherit; opacity: .8 }
.pp-bon { max-width: 340px; font-family: var(--mono); font-size: 14px; border-radius: 0; padding: 18px 18px 26px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 6px 100%, transparent 98%, #000) bottom / 12px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 6px 100%, transparent 98%, #000) bottom / 12px 8px repeat-x }
.pp-bon .pp-kopf { justify-content: center; text-align: center; border-bottom: 1px dashed var(--pp-ink) }
.pp-bon .pp-logo { display: none }
.pp-bon .pp-fuss { border-top: 1px dashed var(--pp-ink); padding-top: 8px }
.pp-notiz { --pp-bg: #FFF3A8; max-width: 360px; font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; font-size: 18px; transform: rotate(-1.2deg); box-shadow: 2px 4px 10px rgba(0, 0, 0, .18); border: 0 }
:root[data-theme="dark"] .pp-notiz { --pp-bg: #EFE08F }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-notiz { --pp-bg: #EFE08F } }
@media (max-width: 759px) { .pp { padding: 16px 16px } .pp-formular .pp-kopf { margin: -16px -16px 0; padding: 10px 16px } .pp-loch { padding-left: 28px } }
/* Prüfungen (Schritt 3, K8): Prüfungskarte im Netz und Schild am Stationsende */
#map .prz circle { fill: var(--ink) }
#map .prz circle { stroke: var(--bg); stroke-width: 2.5 }
#map .st .prz text, #map .st:focus-visible .prz text { fill: var(--bg); font: 800 19px var(--mono); stroke: none }
#map .st.pr-kein > * { opacity: .3 }
.pr-kartinfo { position: absolute; top: 12px; right: 12px; max-width: 320px; display: grid; gap: 4px; background: var(--bg); border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.4; box-shadow: var(--shadow); pointer-events: none }
.pr-schild { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--panel); color: var(--ink); text-align: left; font: inherit; cursor: pointer }
.pr-schild:hover { background: var(--bg) }
.pr-schild-zahl { min-width: 36px; height: 36px; padding: 0 6px; border-radius: 18px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font: 800 16px var(--mono) }
.pr-schild-text { display: grid; gap: 2px; min-width: 0 }
.pr-schild-text small { color: var(--muted) }
.pr-schild-pfeil { font-weight: 900; font-size: 20px }

/* Mein Beruf: Knopf in der Leiste und Auswahl (Eike, 03.11.2026); jeder Beruf in männlicher und weiblicher Form */
.beruf-knopf { gap: 6px; white-space: nowrap }
.beruf-knopf .bk-k { font-weight: 600; color: var(--muted) }
.bwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px }
.bkarte { display: grid; align-content: start; gap: 6px; border: 2px solid var(--line); border-radius: 10px; padding: 6px }
.bkarte.an { border-color: var(--ink) }
.bform { text-align: left; border: 2px solid transparent; background: var(--panel); border-radius: 7px; min-height: 44px; padding: 8px 10px; font-weight: 700; font-size: 16px; line-height: 1.25 }
.bform:hover { border-color: var(--ink) }
.bform.an { background: var(--ink); color: var(--bg) }
.bk-hinweis { font-size: 13px; color: var(--muted); padding: 0 4px 2px }
.bkarte.an .bk-hinweis { color: var(--ink); font-weight: 700 }
.bwahl-fuss { display: flex; gap: 14px; align-items: center; flex-wrap: wrap }
.bwahl-fuss .note { flex: 1 1 260px; margin: 0 }
@media (max-width: 1240px) { .beruf-knopf:not(.leer) .bk-k { display: none } }
@media (max-width: 900px) { .beruf-knopf { padding: 0 10px } .bar { gap: 8px } }

/* Lesestand zurücksetzen und Bänder ziehen (Eike, 04.11.2026) */
.halte li:has(> .hgo) { display: flex; align-items: center; gap: 6px }
.halte button.hgo { flex: 1; width: auto }
.halte button.tag.ungelesen { flex: none; width: auto; min-height: 44px; padding: 0 8px; margin: 0; border: 1px solid transparent; border-radius: 8px; font: 500 12px var(--mono); color: var(--muted); display: inline-flex; align-items: center; gap: 4px }
.halte button.tag.ungelesen .tx { font: 700 15px var(--sans); line-height: 1; opacity: .55 }
.halte button.tag.ungelesen:hover, .halte button.tag.ungelesen:focus-visible { border-color: var(--ink); color: var(--ink) }
.halte button.tag.ungelesen:hover .tx { opacity: 1 }
.bandhead .lesestand { min-height: 44px; margin-top: 4px; padding: 0 6px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px }
.stops.zieht, .hstrip .lb.zieht { cursor: grabbing; scroll-snap-type: none; user-select: none }
@media (hover: hover) and (pointer: fine) { .stops { cursor: grab } .stops button, .stops a { cursor: pointer } }

/* Kopfzeile: Zurück ganz links, Schullogo BSDGG (Eike, 04.11.2026). Im dunklen Design ein helles Schild hinter dem Logo. */
.brand .logo { display: inline-flex; align-items: center; flex: none; padding: 3px 0 }
.brand .logo img { display: block; height: 30px; width: auto }
/* Schullogo freigestellt: im Dunkelmodus die helle Fassung (Dunkelblau wird hell, Türkis heller), ohne Platte */
.brand .logo img.dunkel { display: none }
:root[data-theme="dark"] .brand .logo img.hell { display: none } :root[data-theme="dark"] .brand .logo img.dunkel { display: block }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .logo img.hell { display: none } :root:not([data-theme="light"]) .brand .logo img.dunkel { display: block } }
@media (max-width: 1100px) { .brand .logo img { height: 26px } }
/* Schmalere Kopfzeile: Zurück nur als Pfeil wie im Browser, ab iPad hochkant rutscht die Auskunft in eine eigene Zeile */
.back .pf { flex: none }
@media (max-width: 1100px) { .back { max-width: none; padding: 0 12px } .back span { display: none } }
@media (max-width: 1000px) and (min-width: 761px) { .bar { flex-wrap: wrap } .crumbs { display: none } .bar .spacer { flex: 1 } .find { order: 5; flex: 1 1 100%; max-width: none } }
@media (max-width: 760px) { .bar { gap: 6px } .beruf-knopf b, .pr-knopf span { display: none } .beruf-knopf, .pr-knopf { padding: 0 12px } .brand .logo img { height: 24px } }
/* Wartekästen (ALLE-26): bis zum ersten Wechsel nur der sichtbare Platzhalter, die verdeckten Fassungen halten noch keinen Platz */
.fest.wartet > .fest-s, .lg.wartet > .lg-s.off { display: none }