:root {
  --tinte: #1B2429;
  --papier: #F2F4F3;
  --weiss: #FFFFFF;
  --leitung: #1F4E5A;
  --leitung-hell: #D9E5E7;
  --gelb: #F2C230;
  --linie: #D5DBD9;
  --gruen: #3C7A4E;
  --grau: #5B676D;
  --sans: "Atkinson Hyperlegible", system-ui, sans-serif;
  --kopf: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --kopfhoehe: 3.6rem;
}
* { box-sizing: border-box; }
html { font-size: 106.25%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 1rem/1.6 var(--sans);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
svg { width: 1.25em; height: 1.25em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--leitung); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }

.rahmen { display: grid; grid-template-columns: 19rem 1fr; min-height: calc(100vh - var(--kopfhoehe)); }
main { padding: 3rem clamp(1.25rem, 5vw, 4.5rem) 5rem; }

/* Navigation: die Leitung links */
.seitennav { position: sticky; top: var(--kopfhoehe); height: calc(100vh - var(--kopfhoehe)); overflow-y: auto;
  overscroll-behavior: contain; background: var(--leitung); color: var(--weiss); padding: .8rem 0 3rem;
  border-right: 4px solid var(--gelb); }
.seitennav a { color: inherit; text-decoration: none; }
.zur-uebersicht { display: flex; align-items: center; gap: .6rem; margin: 0 .75rem .8rem; padding: .6rem .7rem;
  border-radius: 6px; background: rgba(255,255,255,.1); font: 600 1.02rem/1.2 var(--kopf); }
.zur-uebersicht:hover { background: rgba(255,255,255,.18); }
.zur-uebersicht[aria-current] { background: var(--gelb); color: var(--tinte); }
.teil { border-top: 1px solid rgba(255,255,255,.14); }
.teil > summary { cursor: pointer; list-style: none; padding: .7rem 1.25rem; font: 600 1.02rem/1.25 var(--kopf); display: flex; gap: .6rem; }
.teil > summary::-webkit-details-marker { display: none; }
.teil > summary:hover { background: rgba(255,255,255,.06); }
.teil ol { list-style: none; margin: 0 0 .6rem; padding: 0; }
.modul > a, .modul > span { display: flex; gap: .55rem; padding: .32rem 1.25rem .32rem 2.3rem; font-size: .88rem; line-height: 1.35; }
.modul > a:hover { background: rgba(255,255,255,.08); }
.modul.bald > span { opacity: .45; }
.modul.aktiv > a { background: rgba(242,194,48,.18); box-shadow: inset 3px 0 0 var(--gelb); }
.modul.done .mid::after { content: " ✓"; color: var(--gelb); }
.mid { font-family: var(--kopf); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.2em; opacity: .8; }
.teilnr { font-family: var(--kopf); font-weight: 700; color: var(--gelb); min-width: 1.1em; }
.glossarlink { display: block; margin: 1.2rem 1.25rem 0; font-size: .88rem; opacity: .8; }
/* Kopfzeile: Übersicht links, Konto rechts */
.kopfzeile { position: sticky; top: 0; z-index: 20; height: var(--kopfhoehe); display: flex; align-items: center; gap: .5rem;
  padding: 0 max(.75rem, env(safe-area-inset-right)) 0 max(.75rem, env(safe-area-inset-left));
  background: var(--leitung); color: var(--weiss); border-bottom: 4px solid var(--gelb); }
.kopfzeile .marke { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .45rem .7rem; border-radius: 6px;
  color: var(--weiss); text-decoration: none; font: 700 1.25rem/1.1 var(--kopf); }
.kopfzeile .marke:hover { background: rgba(255,255,255,.12); }
.kopfzeile .marke svg { width: 1.45em; height: 1.45em; color: var(--gelb); }
.marke-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navtoggle { display: none; }
.konto-menue { margin-left: auto; position: relative; }
.konto-knopf { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.55); background: transparent; color: var(--weiss); }
.konto-knopf:hover, .konto-knopf[aria-expanded="true"] { background: rgba(255,255,255,.15); border-color: var(--gelb); }
.konto-knopf svg { width: 1.5rem; height: 1.5rem; }
.konto-panel { position: absolute; right: 0; top: calc(100% + .5rem); width: min(18rem, calc(100vw - 1.5rem)); z-index: 30;
  background: var(--weiss); color: var(--tinte); border: 1px solid var(--linie); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: .5rem; }
.konto-panel[hidden] { display: none; }
.konto-kopf { margin: .3rem .6rem .6rem; font-size: .85rem; color: var(--grau); overflow-wrap: anywhere; }
.konto-kopf .konto-mail { color: var(--tinte); font-weight: 700; }
.konto-panel a, .konto-panel button { display: block; width: 100%; text-align: left; padding: .7rem .6rem; border-radius: 5px;
  font: inherit; color: var(--tinte); text-decoration: none; background: none; border: 0; cursor: pointer; }
.konto-panel a:hover, .konto-panel button:hover { background: var(--papier); }
.konto-panel .abmelden { border-top: 1px solid var(--linie); border-radius: 0 0 5px 5px; margin-top: .3rem; color: #8C2A1E; }

/* Startseite */
.kopf { max-width: 44rem; }
.kopf h1 { font: 700 clamp(2.4rem, 5vw, 3.6rem)/1.02 var(--kopf); margin: 0 0 1rem; color: var(--leitung); }
.lead { font-size: 1.15rem; margin: 0 0 2.2rem; max-width: 36rem; }

.zaehler { margin: 0 0 2rem; display: inline-block; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: 6px; padding: 1.1rem 1.4rem 1rem; }
.zaehlwerk { display: flex; align-items: flex-end; gap: .7rem; }
.walzen { display: inline-flex; gap: 3px; }
.walze { display: inline-block; width: 2.1rem; height: 3rem; overflow: hidden; background: #111A1E; border-radius: 3px;
  box-shadow: inset 0 6px 8px rgba(0,0,0,.55), inset 0 -6px 8px rgba(0,0,0,.55); }
.walze .band { display: flex; flex-direction: column; transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.walze .band span { height: 3rem; line-height: 3rem; text-align: center; color: var(--weiss); font: 600 2rem/3rem var(--kopf); }
.walze.letzte { background: #6B1F1F; }
.einheit { font: 600 1.1rem/1 var(--kopf); color: var(--grau); padding-bottom: .35rem; }
.zaehler figcaption { margin-top: .55rem; font-size: .92rem; color: var(--grau); }
.zaehler small { font-size: .82rem; }

.knopf, .erledigt { display: inline-block; font: 700 1.05rem/1 var(--kopf); padding: .85rem 1.3rem; border-radius: 4px;
  background: var(--gelb); color: var(--tinte); text-decoration: none; border: 0; cursor: pointer; }
.knopf:hover, .erledigt:hover { filter: brightness(.95); }

#teile { margin-top: 3.5rem; max-width: 52rem; }
#teile h2 { font: 700 1.6rem/1.2 var(--kopf); color: var(--leitung); margin: 0 0 1rem; }
.teilliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.teilkarte a { display: grid; grid-template-columns: 2.2rem 1fr auto; grid-template-rows: auto auto; column-gap: 1rem;
  padding: 1rem .25rem; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; }
.teilkarte a:hover .teiltitel { color: var(--leitung); text-decoration: underline; }
.teilkarte a[aria-disabled] { color: var(--grau); pointer-events: none; }
.teilkarte .teilnr { color: var(--leitung); font-size: 1.6rem; line-height: 1; grid-row: span 2; }
.teiltitel { font: 600 1.2rem/1.25 var(--kopf); }
.teilstand { grid-column: 3; grid-row: 1; font-size: .85rem; color: var(--grau); text-align: right; }
.notiz { display: block; }
.balken { grid-column: 2 / 4; height: 4px; background: var(--linie); margin-top: .55rem; border-radius: 2px; overflow: hidden; }
.balken span { display: block; height: 100%; width: 0; background: var(--gruen); }

/* Modulseite */
.modul-seite { max-width: 42rem; }
.ort { margin: 0 0 .4rem; font-size: .92rem; color: var(--grau); }
.modul-seite h1 { font: 700 clamp(2rem, 4vw, 2.7rem)/1.08 var(--kopf); color: var(--leitung); margin: 0 0 .8rem; display: flex; gap: .6rem; }
.modul-seite h1 .mid { color: var(--gelb); background: var(--leitung); border-radius: 4px; padding: 0 .35em; opacity: 1; height: fit-content; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 2rem; }
.tag { font-size: .8rem; padding: .15rem .55rem; border-radius: 99px; border: 1px solid var(--linie); background: var(--weiss); color: var(--grau); }
.tag.level-G { border-color: #9DBFC6; color: var(--leitung); }
.tag.level-A { background: var(--leitung-hell); border-color: var(--leitung-hell); color: var(--leitung); }
.tag.level-P { background: var(--leitung); border-color: var(--leitung); color: var(--weiss); }
.tag.ls { border-style: dashed; }

.text h2 { font: 700 1.5rem/1.2 var(--kopf); color: var(--leitung); margin: 2.4rem 0 .6rem; }
.text h3 { font: 600 1.2rem/1.25 var(--kopf); margin: 1.8rem 0 .4rem; }
.text p, .text li { max-width: 68ch; }
.text blockquote { margin: 1.4rem 0; padding: .9rem 1.2rem; background: var(--weiss); border-left: 4px solid var(--gelb); }
.text blockquote p { margin: 0; }
.text pre { background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: 1rem; overflow-x: auto; font-size: .85rem; line-height: 1.45; }
.text table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.text th, .text td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.text th { font-family: var(--kopf); font-size: 1.02rem; color: var(--leitung); }
.loesung { margin: 1rem 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; }
.loesung summary { cursor: pointer; padding: .7rem 1rem; font-weight: 700; color: var(--leitung); }
.loesung[open] summary { border-bottom: 1px solid var(--linie); }
.loesung > :not(summary) { margin-left: 1rem; margin-right: 1rem; padding: 0; }
.loesung > ol, .loesung > ul { padding-left: 1.6rem; margin-top: .9rem; margin-bottom: .9rem; }
.loesung > ol li + li, .loesung > ul li + li { margin-top: .35rem; }
.loesung summary:focus-visible { outline-offset: -3px; }

.abschluss { margin: 3rem 0 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.erledigt[aria-pressed="true"] { background: var(--gruen); color: var(--weiss); }
.blaettern { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.blaettern .vor { text-align: right; margin-left: auto; }

/* Tablet quer und kleine Laptops: Navigation etwas schmaler */
@media (max-width: 1100px) and (min-width: 861px) {
  .rahmen { grid-template-columns: 16rem 1fr; }
}

/* Handy und Tablet hochkant: Navigation als aufklappbare Liste unter der Kopfzeile */
@media (max-width: 860px) {
  .rahmen { grid-template-columns: 1fr; }
  #nav { display: none; }
  body.nav-offen #nav { display: block; position: fixed; inset: var(--kopfhoehe) 0 0 0; z-index: 15; overflow-y: auto; }
  body.nav-offen { overflow: hidden; }
  .seitennav { position: static; height: auto; min-height: 100%; border-right: 0; padding-bottom: 4rem; }
  .navtoggle { display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem; border-radius: 6px; cursor: pointer;
    font: 700 1.05rem var(--kopf); background: rgba(255,255,255,.12); color: var(--weiss); border: 0; }
  .navtoggle[aria-expanded="true"] { background: var(--gelb); color: var(--tinte); }
  .kopfzeile .marke { font-size: 1.1rem; padding: .45rem .4rem; }
  main { padding: 1.6rem 1rem 4rem; }
  .teilkarte a { grid-template-columns: 2rem 1fr; }
  .teilstand { grid-column: 2; grid-row: auto; text-align: left; }
  .blaettern { flex-direction: column; }
  .blaettern .vor { margin-left: 0; text-align: left; }
}
@media (max-width: 480px) {
  .marke-rest { display: none; }
  .zaehler { display: block; }
}
/* Finger statt Maus: größere Tippflächen in der Navigation */
@media (pointer: coarse) {
  .modul > a, .modul > span { padding-top: .6rem; padding-bottom: .6rem; }
  .teil > summary { padding-top: .9rem; padding-bottom: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .walze .band { transition: none; } }

/* Grid-Kinder dürfen schrumpfen, sonst drückt die Tabelle die Spalte breit */
.rahmen > * { min-width: 0; }
.modul-seite h1 { overflow-wrap: anywhere; }

/* Konto und Speicherhinweise */
.konto { margin: 1.4rem 1.25rem 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .82rem; line-height: 1.5; opacity: .85; }
.konto-mail { overflow-wrap: anywhere; }
.seitennav .konto a { text-decoration: underline; }
.fehler { margin: .9rem 0 0; color: #8C2A1E; font-size: .95rem; }

/* Neu für dich */
.modul[data-neu] .mid::before { content: "●"; color: var(--gelb); margin-right: .25em; }
.modul[data-neu="geändert"] .mid::before { content: "◐"; }
#neues { max-width: 44rem; margin: 0 0 1rem; padding: 1rem 1.3rem; background: var(--weiss);
  border: 1px solid var(--linie); border-left: 4px solid var(--gelb); border-radius: 4px; }
#neues h2 { font: 700 1.3rem/1.2 var(--kopf); color: var(--leitung); margin: 0 0 .2rem; }
.neues-text { margin: 0 0 .6rem; font-size: .92rem; color: var(--grau); }
.neuliste { margin: 0; padding-left: 1.2rem; }
.neumarke { font-size: .78rem; padding: .05rem .5rem; border-radius: 99px; background: var(--gelb); color: var(--tinte); }

/* Rückmeldung auf der Modulseite */
.rueckmeldung { margin: 0 0 2.5rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; }
.rueckmeldung summary { cursor: pointer; padding: .75rem 1rem; font-weight: 700; color: var(--leitung); }
.rueckmeldung form { padding: 0 1rem 1rem; }
.rueckmeldung fieldset { border: 0; margin: 0 0 .8rem; padding: 0; }
.rueckmeldung legend { font-weight: 700; margin-bottom: .3rem; }
.rueckmeldung fieldset label { display: block; padding: .2rem 0; }
.rm-label { display: block; font-weight: 700; margin-bottom: .3rem; }
.rueckmeldung textarea { width: 100%; font: inherit; font-size: max(1rem, 16px); padding: .6rem; border: 1px solid var(--linie); border-radius: 4px; margin-bottom: .8rem; }
.rm-status { margin: .7rem 0 0; font-size: .95rem; }

/* Seite Rückmeldungen */
.rm-seite { max-width: 44rem; }
.rm-seite h1 { font: 700 clamp(2rem, 4vw, 2.7rem)/1.08 var(--kopf); color: var(--leitung); margin: 0 0 .8rem; }
.rm-liste { list-style: none; margin: 0; padding: 0; }
.rm-eintrag { background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: .8rem 1rem; margin-bottom: .8rem; }
.rm-erledigt { opacity: .6; }
.rm-kopf { margin: 0; font-size: .92rem; color: var(--grau); overflow-wrap: anywhere; }
.rm-text { margin: .4rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-knopf { margin-top: .6rem; font: 600 .95rem var(--kopf); padding: .45rem .8rem; border: 1px solid var(--leitung);
  background: var(--weiss); color: var(--leitung); border-radius: 4px; cursor: pointer; }

/* Noch nicht geschriebene Module ausdrücklich kennzeichnen */
.folgt { align-self: flex-start; margin-left: auto; line-height: 1.5; font-style: normal; font-size: .72rem; padding: 0 .4rem; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; white-space: nowrap; }

/* Formulare, Karten, Unterseiten */
.schmal { max-width: 40rem; }
.unterseite h1, .auth h1 { font: 700 clamp(2rem, 4vw, 2.6rem)/1.08 var(--kopf); color: var(--leitung); margin: 0 0 1rem; }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: 1.1rem 1.2rem 1.2rem; margin: 0 0 1.2rem; }
.karte h2 { font: 700 1.3rem/1.2 var(--kopf); color: var(--leitung); margin: 0 0 .6rem; }
.karte p { margin: .3rem 0; }
form label { display: block; font-weight: 700; margin: .9rem 0 .3rem; }
form label.haken { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin: 1rem 0; cursor: pointer; }
.haken input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; accent-color: var(--leitung); }
input[type=email], input[type=password], input[type=text], input:not([type]), textarea {
  width: 100%; font: inherit; font-size: max(1rem, 16px); padding: .7rem .8rem; border: 1px solid #B8C2C0; border-radius: 6px; background: var(--weiss); color: var(--tinte); }
input:focus, textarea:focus { outline: 3px solid var(--gelb); outline-offset: 1px; border-color: var(--leitung); }
.pw-zeile { display: flex; gap: .5rem; }
.pw-zeile input { flex: 1; min-width: 0; }
.zeigen, .knopf-zwei { font: 600 .95rem var(--kopf); padding: .6rem .9rem; border: 1px solid var(--leitung); background: var(--weiss);
  color: var(--leitung); border-radius: 6px; cursor: pointer; }
.zeigen:hover, .knopf-zwei:hover { background: var(--leitung-hell); }
.knopf.breit { width: 100%; text-align: center; padding: 1rem; font-size: 1.15rem; }
.status { margin: .8rem 0 0; min-height: 1.4em; font-size: .95rem; }
button[disabled] { opacity: .6; cursor: progress; }

/* Anmeldeseiten */
body.auth { min-height: 100vh; background: var(--leitung); display: flex; justify-content: center; align-items: flex-start;
  padding: max(1.5rem, env(safe-area-inset-top)) 1rem 3rem; }
.auth-rahmen { width: 100%; max-width: 27rem; padding: 0; }
.auth-marke { display: flex; align-items: center; gap: .6rem; color: var(--weiss); font: 700 1.35rem/1.1 var(--kopf); margin: 1rem 0 1.5rem; }
.auth-marke svg { width: 1.6em; height: 1.6em; color: var(--gelb); }
.auth h1 { color: var(--weiss); }
.auth .karte { padding: 1.3rem 1.3rem 1rem; }
.auth .karte label:first-child { margin-top: 0; }
.auth-hinweis { color: #E6EEF0; font-size: .95rem; }
.auth-hinweis a { color: var(--gelb); }

/* Zugänge */
.z-text { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; line-height: 1.45; }
.z-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.z-liste { list-style: none; margin: 0; padding: 0; }
.z-eintrag { border-top: 1px solid var(--linie); padding: .8rem 0; }
.z-kopf { margin: 0; overflow-wrap: anywhere; }
.z-info { margin: .2rem 0 .5rem; font-size: .88rem; color: var(--grau); }
.z-gesperrt { opacity: .6; }

/* Sprungziele nicht unter der festen Kopfzeile verstecken */
.karte, h1, h2, [id] { scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }

/* Tabellen am Handy: jede Zeile eine Karte, Spaltennamen als Beschriftung */
@media (max-width: 600px) {
  .text table.karten { display: block; overflow: visible; border: 0; }
  .text table.karten thead { display: none; }
  .text table.karten tbody, .text table.karten tr, .text table.karten td { display: block; width: 100%; }
  .text table.karten tr { background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: .5rem .8rem; margin: 0 0 .7rem; }
  .text table.karten td { border: 0; padding: .3rem 0; }
  .text table.karten td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block;
    font: 600 .82rem/1.3 var(--kopf); color: var(--grau); text-transform: none; }
  .text table.karten td:first-child { font-weight: 700; }
}
@media (max-width: 600px) {
  .text table.karten td:first-child::before { display: none !important; }
  .text table.karten td:first-child { font-size: 1.05rem; color: var(--leitung); border-bottom: 1px solid var(--linie); padding-bottom: .45rem; margin-bottom: .2rem; }
}