:root{
  --rot:#C8102E;
  --rot-dunkel:#96061F;
  --tinte:#14161A;
  --papier:#F5F3F0;
  --karte:#FFFFFF;
  --linie:#DED8D1;
  --grau:#6B6B6B;
  --achtung:#B8720B;
  /* Tagesfarben */
  --fr:#C8102E;      --fr-dunkel:#8E0A20;  --fr-tint:#FBE8EB;
  --sa:#27457E;      --sa-dunkel:#162C57;  --sa-tint:#E7ECF5;
  --so:#1B7A55;      --so-dunkel:#0F5138;  --so-tint:#E4F1EA;
  --bau:#77808A;
  --achtung-bg:#FDF1DC;
  --gut:#1F6B4A;
  --gut-bg:#E4F1EA;
  --radius:10px;
  --schatten:0 1px 2px rgba(20,22,26,.06), 0 4px 14px rgba(20,22,26,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;
}
h1,h2,h3,.display{font-family:"Oswald",Impact,sans-serif;font-weight:600;letter-spacing:.01em;margin:0}
a{color:var(--rot)}

/* ---------- Kopf ---------- */
header{
  background:var(--rot);color:#fff;padding:22px 18px 20px;
  border-bottom:5px solid var(--tinte);
}
.wrap{max-width:1080px;margin:0 auto}
.verein{font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.92;font-weight:600}
h1{font-size:clamp(30px,8vw,50px);text-transform:uppercase;line-height:1;margin:6px 0 8px;font-weight:700}
.untertitel{font-size:15px;opacity:.95;max-width:52ch}
.meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.pill{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;
}
.pill a{color:#fff;text-decoration:underline}
.cta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;width:100%;max-width:460px;
  background:#fff;color:var(--rot);text-decoration:none;
  border-radius:12px;padding:14px 18px;
  box-shadow:0 3px 0 var(--tinte), 0 10px 22px rgba(0,0,0,.18);
}
.cta-text{font-family:"Oswald";font-weight:600;font-size:19px;text-transform:uppercase;letter-spacing:.02em;line-height:1.15}
.cta-text em{display:block;font-family:"Barlow";font-style:normal;font-weight:500;font-size:13px;
  text-transform:none;letter-spacing:0;color:var(--tinte);opacity:.72;margin-top:3px}
.cta-pfeil{font-size:26px;line-height:1;flex:0 0 auto;color:var(--rot)}
.cta:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--tinte), 0 14px 26px rgba(0,0,0,.22)}
.cta:active{transform:translateY(1px);box-shadow:0 1px 0 var(--tinte), 0 6px 14px rgba(0,0,0,.2)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---------- Kennzahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 4px}
@media(min-width:640px){.zahlen{grid-template-columns:repeat(4,1fr)}}
.zahl{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--schatten)}
.zahl b{font-family:"Oswald";font-size:30px;font-weight:600;display:block;line-height:1.05}
.zahl span{font-size:12.5px;color:var(--grau);text-transform:uppercase;letter-spacing:.07em;font-weight:600}

main{padding:0 18px 60px}
section{margin-top:34px}
h2{
  font-size:20px;text-transform:uppercase;letter-spacing:.05em;
  padding-bottom:8px;border-bottom:3px solid var(--rot);margin-bottom:6px;
}
.hinweis{font-size:14px;color:var(--grau);margin:8px 0 16px}

/* ---------- Tag-Filter ---------- */
.tage{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 20px;position:sticky;top:0;z-index:20;
  background:var(--papier);padding:10px 0;border-bottom:1px solid var(--linie)}
.tag-btn{
  font-family:"Oswald";font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:#fff;background:var(--chip,var(--tinte));border:2.5px solid transparent;
  border-radius:999px;padding:8px 16px;cursor:pointer;
}
.tag-btn[data-tag="alle"]{--chip:var(--tinte)}
.tag-btn[data-tag="fr"]{--chip:var(--fr)}
.tag-btn[data-tag="sa"]{--chip:var(--sa)}
.tag-btn[data-tag="so"]{--chip:var(--so)}
.tag-btn[aria-pressed="false"]{filter:saturate(.55) brightness(1.28)}
.tag-btn[data-tag="alle"][aria-pressed="false"]{--chip:#666C75;filter:none}
.tag-btn[aria-pressed="true"]{border-color:var(--tinte);box-shadow:0 2px 9px rgba(20,22,26,.22)}
.tag-btn:hover{filter:none}
.tag-btn:focus-visible{outline:3px solid var(--tinte);outline-offset:2px}

/* ---------- Zeitband (Signature) ---------- */
.band{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:14px 14px 10px;margin-bottom:14px;box-shadow:var(--schatten)}
.band{border-top:4px solid var(--tag)}
.band h3{font-size:15px;text-transform:uppercase;letter-spacing:.07em;color:var(--tag);margin-bottom:10px}
.band-spur{position:relative;height:80px;background:var(--papier);border-radius:6px}
.band-block{
  position:absolute;top:0;bottom:0;border-radius:5px;background:var(--rot);color:#fff;
  border:none;cursor:pointer;padding:4px 6px;overflow:hidden;text-align:left;
  font-family:"Oswald";font-size:11.5px;font-weight:500;line-height:1.15;letter-spacing:.02em;
}
.band-block{background:var(--tag)}
.band-block.turnier{background:var(--tag-dunkel)}
.band-block.bau{background:var(--bau)}
.band-block:focus-visible{outline:3px solid var(--achtung);outline-offset:1px}
.band-block em{display:block;font-style:normal;opacity:.88;font-size:10.5px;white-space:nowrap}
.band-block.schmal{font-size:10px;padding:4px 4px;letter-spacing:-.01em}
.band-block.schmal em{font-size:9.5px}
.band-achse{display:flex;justify-content:space-between;font-size:11px;color:var(--grau);margin-top:5px;font-variant-numeric:tabular-nums}

/* ---------- Schichtkarten ---------- */
.schicht{background:var(--karte);border:1px solid var(--linie);border-left:5px solid var(--tag);
  border-radius:var(--radius);margin-bottom:14px;box-shadow:var(--schatten);overflow:hidden}
.schicht.turnier{border-left-color:var(--tag-dunkel)}
.schicht.bau{border-left-color:var(--bau)}
.schicht.extern{border-left-style:dashed;border-left-color:var(--bau);background:#FCFBFA}
.schicht.extern .schicht-kopf h3{color:#4A5058}
.band-block.extern{background:repeating-linear-gradient(135deg,var(--bau),var(--bau) 6px,#8A929C 6px,#8A929C 12px)}
.anzahl.ohne{background:transparent;border:1.5px dashed var(--bau);color:#4A5058;padding:6px 11px}
.anzahl.ohne b{font-size:13px;letter-spacing:.04em}
.schicht-kopf h3{color:var(--tag)}
.schicht-kopf{padding:14px 16px;display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.schicht-kopf h3{font-size:18px;line-height:1.2}
.zeit{font-size:14px;color:var(--grau);font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px}
.anzahl{background:var(--tag);color:#fff;border-radius:8px;padding:6px 10px;text-align:center;flex:0 0 auto}
.anzahl b{font-family:"Oswald";font-size:20px;display:block;line-height:1}
.anzahl span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.info{margin:0 16px 12px;background:var(--papier);border-radius:8px;padding:10px 12px;font-size:14px}
.info ul{margin:6px 0 0;padding-left:18px}

table{width:100%;border-collapse:collapse}
.stationen th{
  text-align:left;font-family:"Oswald";font-weight:500;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--grau);padding:8px 16px;border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);background:var(--papier);
}
.stationen td{padding:10px 16px;border-bottom:1px solid var(--linie);vertical-align:top;font-size:15px}
.stationen tr:last-child td{border-bottom:none}
.st-name{font-weight:600}
.st-detail{display:block;color:var(--grau);font-size:13.5px;margin-top:2px}
.stationen tr.schluessel{background:#FFFDF6;box-shadow:inset 4px 0 0 var(--achtung)}
.stationen tr.schluessel .st-name{color:#7A4B05}
.key{display:inline-block;margin-left:8px;font-family:"Barlow";font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:#8A5A08;background:var(--achtung-bg);
  border:1px solid #EBCB93;border-radius:5px;padding:2px 7px;vertical-align:2px;white-space:nowrap}
.matrix tbody tr.schluessel th{color:#7A4B05;box-shadow:inset 4px 0 0 var(--achtung), 1px 0 0 var(--linie)}
.matrix tbody tr.schluessel th::after{content:"★";margin-left:6px;color:var(--achtung);font-size:12px}
.merker{background:#FFFDF6;border:1px solid #EBCB93;border-left:5px solid var(--achtung);
  border-radius:var(--radius);padding:13px 16px;margin:16px 0 4px;box-shadow:var(--schatten)}
.merker h3{font-family:"Oswald";font-size:15.5px;text-transform:uppercase;letter-spacing:.05em;color:#8A5A08;margin-bottom:5px}
.merker p{margin:0;font-size:14.5px}
.merker b{color:#7A4B05}
.st-anzahl{font-family:"Oswald";font-weight:600;font-size:17px;text-align:right;white-space:nowrap;width:1%}
.st-anzahl span{font-size:12px;color:var(--grau);font-family:"Barlow";font-weight:600}
.marke{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:3px 8px;border-radius:5px;background:var(--gut-bg);color:var(--gut);vertical-align:middle;
  font-family:"Barlow";white-space:nowrap}

/* ---------- Matrix ---------- */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--linie);
  border-radius:var(--radius);background:var(--karte);box-shadow:var(--schatten)}
.matrix{min-width:880px;font-size:14px}
.matrix th,.matrix td{padding:9px 6px;border-bottom:1px solid var(--linie);text-align:center;white-space:nowrap}
.matrix thead th{background:var(--tinte);color:#fff;font-family:"Oswald";font-weight:500;
  font-size:12px;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0}
.matrix thead th.fr{background:var(--fr)}
.matrix thead th.sa{background:var(--sa)}
.matrix thead th.so{background:var(--so)}
.matrix td.fr{background:var(--fr-tint)}
.matrix td.sa{background:var(--sa-tint)}
.matrix td.so{background:var(--so-tint)}
.matrix .grenze{border-right:3px solid var(--tinte)}
.matrix td.null{background:var(--achtung-bg);color:var(--achtung);font-weight:700;box-shadow:inset 0 0 0 1px #EBCB93}
.matrix tbody tr:hover td.fr{background:#F6DBE0}
.matrix tbody tr:hover td.sa{background:#DCE4F1}
.matrix tbody tr:hover td.so{background:#D7EBE1}
.matrix tbody th{text-align:left;font-weight:600;background:var(--karte);position:sticky;left:0;
  box-shadow:1px 0 0 var(--linie);min-width:132px}
.matrix thead th:first-child{left:0;z-index:3;position:sticky}
.matrix .null{color:var(--achtung);background:var(--achtung-bg);font-weight:700}
.matrix .leer{color:#C4C0BA}
.matrix tfoot td,.matrix tfoot th{font-weight:700;background:var(--papier)}
.matrix tbody tr:hover td{background:#FBF9F7}
.tagleiste{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;font-weight:600;margin:0 0 14px}
.tagleiste span{display:inline-flex;align-items:center;gap:7px}
.tagleiste i{width:13px;height:13px;border-radius:4px;display:inline-block}

footer{border-top:1px solid var(--linie);margin-top:40px;padding:20px 18px 40px;font-size:13.5px;color:var(--grau)}

@media(min-width:760px){
  header{padding:34px 24px 30px}
  main{padding:0 24px 70px}
  .band-block{font-size:12.5px}
}
@media print{
  header{background:#fff;color:var(--tinte);border-bottom:3px solid var(--tinte)}
  .pill,.tage{display:none}
  .cta{box-shadow:none;border:2px solid var(--tinte);max-width:none}
  .cta-pfeil{display:none}
  .schicht,.zahl,.scroll{box-shadow:none;break-inside:avoid}
  .band{break-inside:avoid}
}
@media(prefers-reduced-motion:no-preference){
  .schicht{transition:box-shadow .18s ease}
  .cta{transition:transform .15s ease, box-shadow .15s ease}
}
@media(prefers-reduced-motion:reduce){
  .cta:hover,.cta:active{transform:none}
}

/* ================= Website-Rahmen (mehrere Seiten) ================= */
.nav{position:sticky;top:0;z-index:60;background:var(--tinte);color:#fff;
  border-bottom:3px solid var(--rot)}
.nav-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:6px;
  padding:9px 14px;flex-wrap:wrap}
.nav-marke{font-family:"Oswald";font-weight:600;font-size:15px;text-transform:uppercase;
  letter-spacing:.07em;color:#fff;text-decoration:none;margin-right:auto;white-space:nowrap}
.nav-marke span{color:var(--rot)}
.nav a.nav-link{font-family:"Barlow";font-weight:600;font-size:14px;color:#fff;text-decoration:none;
  padding:7px 12px;border-radius:999px;opacity:.72;white-space:nowrap}
.nav a.nav-link:hover{opacity:1;background:rgba(255,255,255,.12)}
.nav a.nav-link[aria-current="page"]{opacity:1;background:var(--rot)}
.nav a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Startseite */
.hero{background:var(--rot);color:#fff;padding:34px 18px 30px;border-bottom:5px solid var(--tinte)}
.hero .datum{font-family:"Oswald";font-size:clamp(17px,4.4vw,22px);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;margin:10px 0 0}
.countdown{display:inline-flex;align-items:baseline;gap:9px;background:#fff;color:var(--rot);
  border-radius:12px;padding:10px 16px;margin-top:16px;box-shadow:0 3px 0 var(--tinte)}
.countdown b{font-family:"Oswald";font-size:32px;line-height:1}
.countdown span{font-size:13.5px;font-weight:600;color:var(--tinte)}

.kacheln{display:grid;gap:12px;margin:18px 0 4px}
@media(min-width:700px){.kacheln{grid-template-columns:repeat(3,1fr)}}
.kachel{display:block;background:var(--karte);border:1px solid var(--linie);
  border-left:5px solid var(--tag,var(--rot));border-radius:var(--radius);padding:16px 18px;
  text-decoration:none;color:var(--tinte);box-shadow:var(--schatten)}
.kachel h3{font-size:18px;text-transform:uppercase;letter-spacing:.03em;color:var(--tag,var(--rot))}
.kachel p{margin:6px 0 0;font-size:14.5px;color:var(--grau)}
.kachel:hover{box-shadow:0 2px 4px rgba(20,22,26,.08),0 10px 20px rgba(20,22,26,.09)}
.kachel:focus-visible{outline:3px solid var(--rot);outline-offset:2px}

/* Programm-Tabelle auf der Startseite */
.programm{width:100%;border-collapse:collapse;background:var(--karte);
  border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.programm th{background:var(--tag);color:#fff;font-family:"Oswald";font-weight:500;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:9px 14px}
.programm td{padding:10px 14px;border-bottom:1px solid var(--linie);font-size:15px;vertical-align:top}
.programm tr:last-child td{border-bottom:none}
.programm .zeit-sp{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums;width:1%;padding-right:18px}
.programm .offen{color:var(--grau);font-size:13px;display:block}
.programm-block{margin-bottom:14px}

.infobox{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--schatten)}
.infobox h3{font-size:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--rot);margin-bottom:8px}
.infobox ul{margin:0;padding-left:20px;font-size:15px}
.infobox li{margin-bottom:4px}

/* Checkliste */
.fortschritt{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--schatten);margin-bottom:16px}
.fortschritt-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.fortschritt-kopf b{font-family:"Oswald";font-size:22px}
.balken{height:10px;border-radius:999px;background:#E7E3DE;overflow:hidden}
.balken i{display:block;height:100%;background:var(--gut);width:0;transition:width .25s ease}
.aufgabe{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:10px;box-shadow:var(--schatten);display:block}
.a-thema{font-family:"Oswald";font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.02em}
.a-text{font-size:14.5px;margin:3px 0 0}
.a-fuss{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.a-termin{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:var(--papier);border:1px solid var(--linie);border-radius:5px;padding:3px 8px;white-space:nowrap}
.a-termin.faellig{background:var(--achtung-bg);border-color:#EBCB93;color:var(--achtung)}
.a-name{flex:1;min-width:150px;font-family:"Barlow";font-size:14px;padding:6px 9px;
  border:1px solid var(--linie);border-radius:6px;background:var(--papier)}
.a-name:focus{outline:2px solid var(--rot);outline-offset:1px;background:#fff}
.block-kopf{font-family:"Oswald";font-size:17px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--rot);margin:22px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--linie)}
.werkzeuge{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.knopf{font-family:"Barlow";font-weight:600;font-size:14px;background:var(--karte);
  border:1.5px solid var(--linie);border-radius:999px;padding:8px 14px;cursor:pointer;color:var(--tinte)}
.knopf:hover{border-color:var(--tinte)}
.knopf:focus-visible{outline:3px solid var(--rot);outline-offset:2px}
.speicherhinweis{font-size:13px;color:var(--grau);margin-top:14px}

@media print{
  .nav,.werkzeuge,.kacheln{display:none}
  .aufgabe,.fortschritt,.programm,.infobox{box-shadow:none;break-inside:avoid}
}

/* Speicherstatus der Aufgabenliste */
.status{font-size:13.5px;font-weight:600;color:var(--grau)}
.status.ok{color:var(--gut)}
.status.fehler{color:var(--rot)}

/* Erfüllungsgrad und Kommentar in der Aufgabenliste */
.a-kopf{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.a-prozent{font-family:"Oswald";font-weight:600;font-size:15px;color:var(--grau);
  white-space:nowrap;padding-top:2px}
.aufgabe[data-grad="100"] .a-prozent{color:var(--gut)}
.aufgabe[data-grad="25"] .a-prozent,
.aufgabe[data-grad="50"] .a-prozent,
.aufgabe[data-grad="75"] .a-prozent{color:var(--achtung)}
.grad{display:flex;gap:0;margin-top:10px;border:1.5px solid var(--linie);border-radius:8px;overflow:hidden}
.grad button{flex:1;font-family:"Barlow";font-weight:600;font-size:13px;padding:8px 4px;
  background:var(--karte);border:none;border-right:1px solid var(--linie);cursor:pointer;color:var(--grau)}
.grad button:last-child{border-right:none}
.grad button[aria-pressed="true"]{background:var(--tinte);color:#fff}
.grad button[data-grad="100"][aria-pressed="true"]{background:var(--gut)}
.grad button[data-grad="25"][aria-pressed="true"],
.grad button[data-grad="50"][aria-pressed="true"],
.grad button[data-grad="75"][aria-pressed="true"]{background:var(--achtung)}
.grad button:focus-visible{outline:3px solid var(--rot);outline-offset:-3px}
.a-kommentar{width:100%;margin-top:9px;font-family:"Barlow";font-size:14px;line-height:1.45;
  padding:8px 10px;border:1px solid var(--linie);border-radius:6px;background:var(--papier);
  resize:vertical;min-height:38px}
.a-kommentar:focus{outline:2px solid var(--rot);outline-offset:1px;background:#fff}
.a-zeile{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px}
.aufgabe.fertig{opacity:.72}
.aufgabe.fertig .a-thema{text-decoration:line-through}
.balken i.teil{background:linear-gradient(90deg,var(--gut) 0 var(--anteil,0%),var(--achtung) var(--anteil,0%) 100%)}
.diagnose{font-size:13px;color:var(--rot);background:#FDECEE;border:1px solid #F0BCC3;
  border-radius:8px;padding:10px 12px;margin-top:10px}
.diagnose code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:#fff;padding:1px 5px;border-radius:4px}