@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#F4F1EA;--surface:#EBE6DB;--ink:#14110D;--ink-soft:#3B352C;--muted:#6B635A;
  --line:rgba(20,17,13,.14);--line-strong:rgba(20,17,13,.4);--accent:#9C3B23;--accent-ink:#fff;
  --display:"Instrument Serif",Georgia,serif;--sans:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --t-schnell:.24s;--t-ruhig:.32s;--kurve:cubic-bezier(.4,0,.6,1);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --takt:8px;
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-underline-offset:.15em}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0}
h1{font-size:clamp(34px,7.6vw,88px);overflow-wrap:anywhere;line-height:.94;letter-spacing:-.018em}
h2{font-size:clamp(26px,3.6vw,40px);line-height:1.05;letter-spacing:-.012em}
h3{font-size:22px;line-height:1.15}
p{margin:0 0 calc(var(--takt)*2);max-width:58ch}
.label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
.muted{color:var(--muted)}
.ziffer{font-family:var(--display);font-size:clamp(32px,5vw,56px);line-height:1;letter-spacing:-.02em}
.klein{font-size:14px}
.akzent{color:var(--accent)}
.mono{font-variant-numeric:tabular-nums}

/* Kopf */
.kopf{border-bottom:1px solid var(--line);padding:calc(var(--takt)*2) 0}
.kopf .innen{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--takt)*2);flex-wrap:wrap}
.marke{font-family:var(--display);font-size:26px;text-decoration:none;letter-spacing:-.01em}
.marke i{color:var(--accent);font-style:normal}
nav.haupt{display:flex;gap:calc(var(--takt)*3);flex-wrap:wrap;font-size:15px}
nav.haupt a{text-decoration:none;color:var(--ink-soft);padding-bottom:2px;border-bottom:1px solid transparent}
nav.haupt a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
@media(hover:hover) and (pointer:fine){nav.haupt a:hover{color:var(--ink)}}

.innen{width:min(1180px,100% - calc(var(--takt)*4));margin-inline:auto}
main{flex:1;padding:calc(var(--takt)*5) 0 calc(var(--takt)*8)}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:calc(var(--takt)*3);row-gap:calc(var(--takt)*4)}
.sp-1-8{grid-column:1/9}.sp-1-9{grid-column:1/10}.sp-9-13{grid-column:9/13}.sp-10-13{grid-column:10/13}.sp-1-13{grid-column:1/13}.sp-1-6{grid-column:1/7}.sp-7-13{grid-column:7/13}.sp-1-7{grid-column:1/8}.sp-8-13{grid-column:8/13}
@media(max-width:860px){[class^="sp-"],[class*=" sp-"]{grid-column:1/13}}

.fuss{border-top:1px solid var(--line);padding:calc(var(--takt)*3) 0;font-size:14px;color:var(--muted)}
.fuss .innen{display:flex;gap:calc(var(--takt)*3);flex-wrap:wrap;justify-content:space-between}
.fuss .zeile .feld{margin-bottom:0}
.fuss a{color:var(--muted)}

/* Hinweis */
.hinweis{border-left:2px solid var(--accent);padding:var(--takt) calc(var(--takt)*2);margin:0 0 calc(var(--takt)*4);background:var(--surface);max-width:72ch}
.fehler{border-left:2px solid var(--accent);padding:var(--takt) calc(var(--takt)*2);margin:0 0 calc(var(--takt)*3);color:var(--accent);max-width:72ch}

/* Formulare */
form{margin:0}
.feld{display:flex;flex-direction:column;gap:calc(var(--takt)/2);margin-bottom:calc(var(--takt)*3)}
.feld label,.feld>.label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{
  font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;padding:var(--takt) 0;width:100%;max-width:520px;outline:none;
  transition:border-color var(--t-schnell) var(--ease-out)}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--accent)}
textarea{min-height:120px;resize:vertical;border:1px solid var(--line-strong);padding:var(--takt)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2314110D' stroke-width='1.5'/></svg>");background-position:calc(100% - 8px) 55%;background-repeat:no-repeat;padding-right:28px}
.zeile{display:flex;gap:calc(var(--takt)*3);flex-wrap:wrap;align-items:flex-end}
.zeile .feld{flex:1 1 200px}
.wahl{display:flex;flex-wrap:wrap;gap:var(--takt) calc(var(--takt)*3);padding:var(--takt) 0}
.wahl label{display:inline-flex;align-items:center;gap:var(--takt);font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px;margin:0}
.hilfe{font-size:14px;color:var(--muted);max-width:60ch}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:var(--takt);font:inherit;font-size:15px;font-weight:500;padding:calc(var(--takt)*1.25) calc(var(--takt)*3);border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:999px;cursor:pointer;text-decoration:none;
  transition:transform .14s var(--ease-out),background var(--t-schnell) var(--ease-out),color var(--t-schnell) var(--ease-out)}
.knopf:active{transform:scale(.97)}
.knopf.akzent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.knopf.leise{background:transparent;color:var(--ink)}
.knopf.klein{padding:calc(var(--takt)*.75) calc(var(--takt)*2);font-size:14px}
.knopf:disabled{opacity:.5;cursor:default}
@media(hover:hover) and (pointer:fine){.knopf.leise:hover{background:var(--surface)}}
.knopfzeile{display:flex;gap:calc(var(--takt)*2);flex-wrap:wrap;align-items:center;margin-top:calc(var(--takt)*2)}
.inline-form{display:inline}

/* Tabellen und Listen */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:calc(var(--takt)*1.5) calc(var(--takt)*1.5) calc(var(--takt)*1.5) 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums;padding-left:calc(var(--takt)*2);padding-right:calc(var(--takt)*2)}
td:last-child,th:last-child{padding-right:0}
.tabelle{overflow-x:auto;max-width:100%}
tr.schlecht td:first-child{box-shadow:inset 2px 0 var(--accent)}
.liste{list-style:none;margin:0;padding:0}
.liste>li{padding:calc(var(--takt)*2.5) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--takt) calc(var(--takt)*3);align-items:start}
.liste>li:first-child{border-top:1px solid var(--line)}
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:calc(var(--takt)*3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:calc(var(--takt)*3) 0;margin:calc(var(--takt)*3) 0}
.kennzahl .label{display:block;margin-bottom:var(--takt)}
.status{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:3px 0}
.status.offen{color:var(--accent)}
.status.erledigt{color:var(--muted)}
.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:var(--takt)}
.punkt.an{background:var(--accent)}

/* Balken (Statistik, reines CSS) */
.balken{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;align-items:end;height:120px;border-bottom:1px solid var(--line-strong)}
.balken.woche{grid-template-columns:repeat(7,minmax(0,1fr))}
.balken div{background:var(--ink);min-height:1px;position:relative}
.balken div.leer{background:var(--line)}
.balken div.schlecht{background:var(--accent)}
.balken div span{position:absolute;bottom:-20px;left:-10px;right:-10px;text-align:center;font-size:10px;color:var(--muted)}
.balken{overflow:visible}
.balken-legende{display:flex;gap:calc(var(--takt)*3);font-size:13px;color:var(--muted);margin-top:calc(var(--takt)*4)}

/* Vorschlagsliste Haltestellen */
.vorschlaege{list-style:none;margin:0;padding:0;border:1px solid var(--line-strong);border-top:0;max-width:520px;background:var(--paper);position:absolute;z-index:5;left:0;right:0;top:100%;max-height:320px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.vorschlaege li{padding:var(--takt) calc(var(--takt)*1.5);cursor:pointer}
.vorschlaege li[aria-selected],.vorschlaege li:hover{background:var(--surface)}
.suche{position:relative;max-width:520px}
.linienwahl{display:flex;flex-wrap:wrap;gap:var(--takt)}
.linienwahl label{border:1px solid var(--line-strong);padding:4px 12px;border-radius:999px;cursor:pointer;font-size:15px;display:inline-flex;gap:6px;align-items:center}
.linienwahl label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.linienwahl input{position:absolute;opacity:0;width:0;height:0}

pre.text{white-space:pre-wrap;font:15px/1.5 var(--sans);border:1px solid var(--line-strong);padding:calc(var(--takt)*2);background:var(--surface);max-width:72ch}
dl.regeln{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--takt) calc(var(--takt)*3);max-width:80ch;font-size:15px}
dl.regeln dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-top:3px}
dl.regeln dd{margin:0}
.schritte{counter-reset:s;list-style:none;padding:0;margin:0;max-width:60ch}
.schritte li{counter-increment:s;padding:calc(var(--takt)*1.5) 0 calc(var(--takt)*1.5) 40px;position:relative;border-bottom:1px solid var(--line)}
.schritte li::before{content:counter(s);position:absolute;left:0;top:calc(var(--takt)*1.5);font-family:var(--display);font-size:24px;line-height:1;color:var(--accent)}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}.knopf:active{transform:none}}
@media print{.kopf,.fuss,.knopf,nav{display:none}}