:root {
  --bg: #FFF8EC;
  --karte: #FFFFFF;
  --tinte: #2B2B3A;
  --tinte-leise: #5A5A6E;
  --haupt: #C2410C;
  --haupt-dunkel: #9A3412;
  --haupt-hell: #FFE8D6;
  --gelb: #FFD43B;
  --linie: #EADFCB;
  --rund: 20px;
  --schatten: 0 6px 18px rgba(120, 80, 20, 0.12);
  --kat: #D9480F;
  --schrift: "Nunito", "Quicksand", "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--bg);
  background-image: radial-gradient(circle at 20px 20px, rgba(255, 190, 90, 0.18) 3px, transparent 4px);
  background-size: 44px 44px;
}
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 800; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--haupt-dunkel); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 4px solid #1971C2;
  outline-offset: 3px;
  border-radius: 8px;
}
main#inhalt:focus, main#inhalt:focus-visible { outline: none; }

.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 0.7rem 1rem; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--haupt); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08); }
.kopf-innen { max-width: 1040px; margin: 0 auto; padding: 0.45rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; font-weight: 900; font-size: 1.5rem; letter-spacing: 0.2px; }
.logo img { width: 46px; height: 50px; }
.nav { display: flex; gap: 0.4rem; }
.nav a {
  color: #fff; text-decoration: none; font-weight: 800; padding: 0.55rem 1rem; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.14);
}
.nav a:hover { background: rgba(255, 255, 255, 0.28); }
.nav a[aria-current="page"] { background: #fff; color: var(--haupt-dunkel); }

main { max-width: 1040px; margin: 0 auto; padding: 1.5rem 1rem 3rem; min-height: 60vh; }
.laedt { text-align: center; color: var(--tinte-leise); padding: 3rem 0; }
.hinweis { background: #FFF3BF; border-radius: 12px; padding: 1rem; }

.fuss { text-align: center; color: var(--tinte-leise); padding: 1.5rem 1rem 2.5rem; font-size: 0.95rem; }

/* Startseite */
.held {
  display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center;
  background: linear-gradient(135deg, #FFE066, #FFC078);
  border-radius: 28px; padding: 1.5rem; box-shadow: var(--schatten); margin-bottom: 1.5rem;
}
.held img { width: 150px; height: auto; justify-self: center; animation: huepf 2.6s ease-in-out infinite; transform-origin: bottom center; }
.held p { font-size: 1.15rem; margin-bottom: 0; }
@keyframes huepf { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } 60% { transform: translateY(0) rotate(-3deg); } }
@media (min-width: 700px) { .held { grid-template-columns: 190px 1fr; padding: 2rem; } .held img { width: 180px; } }
@media (prefers-reduced-motion: reduce) { .held img { animation: none; } html { scroll-behavior: auto; } }

.zweispaltig { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; }
@media (min-width: 760px) { .zweispaltig { grid-template-columns: 1fr 1fr; } }

.box { background: var(--karte); border-radius: var(--rund); padding: 1.25rem; box-shadow: var(--schatten); border: 3px solid var(--linie); }
.box h2, .box h3 { margin-bottom: 0.4em; }
.box.gelb { background: #FFF9DB; border-color: #FFE066; }
.box.gruen { background: #EBFBEE; border-color: #B2F2BB; }
.box.blau { background: #E7F5FF; border-color: #A5D8FF; }
.box.rosa { background: #FFF0F6; border-color: #FCC2D7; }
.box.rot { background: #FFF5F5; border-color: #FFC9C9; }
.termin-gross { font-size: 1.35rem; font-weight: 800; margin-bottom: 0.2rem; }
.leise { color: var(--tinte-leise); }

.abschnitt-titel { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2rem 0 0.8rem; flex-wrap: wrap; }
.abschnitt-titel h2 { margin: 0; }

/* Kacheln */
.kacheln { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); padding: 0; margin: 0; list-style: none; }
.kachel {
  min-width: 0; hyphens: auto; overflow-wrap: anywhere;
  display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; text-decoration: none; color: var(--tinte);
  background: color-mix(in srgb, var(--kat) 14%, #fff); border: 3px solid color-mix(in srgb, var(--kat) 55%, #fff);
  border-radius: 20px; padding: 0.9rem; min-height: 112px; height: 100%;
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.kachel .symbol { font-size: 2rem; line-height: 1; }
.kachel .name { font-weight: 800; line-height: 1.2; }
.kachel .zahl { font-size: 0.9rem; color: var(--tinte-leise); margin-top: auto; }

.alter-reihe { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.alter-knopf {
  flex: 1 1 140px; text-decoration: none; text-align: center; font-weight: 900; font-size: 1.3rem; color: #fff; padding: 0.9rem 1rem;
  border-radius: 20px; min-height: 64px; display: flex; align-items: center; justify-content: center; box-shadow: var(--schatten);
}
.alter-knopf small { display: block; font-weight: 700; font-size: 0.85rem; opacity: 0.95; }
.alter-a { background: #0B7285; } .alter-b { background: #2B8A3E; } .alter-c { background: #7048E8; }

/* Filter */
.filter { background: var(--karte); border: 3px solid var(--linie); border-radius: var(--rund); padding: 1rem; margin-bottom: 1rem; display: grid; gap: 0.8rem; }
.filter-reihe { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.filter label { font-weight: 800; font-size: 0.95rem; }
.feld-text, .feld-wahl {
  font: inherit; color: var(--tinte); background: #fff; border: 3px solid var(--linie); border-radius: 14px; padding: 0.6rem 0.8rem; min-height: 46px; width: 100%;
}
.feld-text:focus, .feld-wahl:focus { border-color: #1971C2; }
.filter-gitter { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .filter-gitter { grid-template-columns: 2fr 1.4fr 1.4fr; } }
.chip {
  font: inherit; font-weight: 800; border: 3px solid var(--linie); background: #fff; color: var(--tinte); border-radius: 999px; padding: 0.4rem 1rem; min-height: 44px; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--haupt); border-color: var(--haupt); color: #fff; }
.anzahl { font-weight: 800; color: var(--tinte-leise); margin: 0.2rem 0 0.8rem; }

/* Karten */
.karten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: 0; margin: 0; list-style: none; }
.karte {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--tinte); background: var(--karte); border-radius: var(--rund);
  border: 3px solid var(--linie); border-top: 12px solid var(--kat); padding: 0.9rem 1rem 1rem; box-shadow: var(--schatten);
}
.karte:hover { transform: translateY(-3px); border-color: var(--kat); }
.karte .kat { font-size: 0.9rem; font-weight: 800; color: var(--tinte-leise); display: flex; gap: 0.35rem; align-items: center; margin-bottom: 0.25rem; }
.karte h3 { margin-bottom: 0.5rem; }
.plaketten { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.plakette { font-size: 0.9rem; font-weight: 800; border-radius: 999px; padding: 0.15rem 0.7rem; background: #F1F3F5; color: #343A40; white-space: nowrap; }
.plakette.alter { background: #FFF3BF; color: #5C4A00; }
.plakette.zeit { background: #D0EBFF; color: #0B4F85; }
.plakette.eltern { background: #FFDEEB; color: #8A1B4D; }
.leer { text-align: center; padding: 2rem 1rem; background: #fff; border-radius: var(--rund); border: 3px dashed var(--linie); }

/* Detail */
.zurueck { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; text-decoration: none; margin-bottom: 0.6rem; }
.detail-kopf { border-top: 14px solid var(--kat); background: var(--karte); border-radius: var(--rund); padding: 1.2rem; box-shadow: var(--schatten); margin-bottom: 1.2rem; border-left: 3px solid var(--linie); border-right: 3px solid var(--linie); border-bottom: 3px solid var(--linie); }
.kat-pille { display: inline-flex; gap: 0.4rem; align-items: center; font-weight: 800; background: color-mix(in srgb, var(--kat) 16%, #fff); border: 2px solid color-mix(in srgb, var(--kat) 55%, #fff); border-radius: 999px; padding: 0.2rem 0.8rem; text-decoration: none; color: var(--tinte); margin-bottom: 0.6rem; }
.detail-kopf .plaketten { margin-top: 0.5rem; }
.detail-gitter { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 800px) { .detail-gitter.zwei { grid-template-columns: 1fr 1fr; } }
.schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.schritte li { counter-increment: schritt; position: relative; padding: 0.2rem 0 0.2rem 3rem; min-height: 2.4rem; }
.schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--kat); color: #fff; font-weight: 900;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.liste { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.4rem; }
.material { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.material li { background: #F1F3F5; border-radius: 12px; padding: 0.25rem 0.8rem; font-weight: 700; }
.schema-box { background: #fff; border: 3px solid var(--linie); border-radius: var(--rund); padding: 0.8rem; box-shadow: var(--schatten); margin-bottom: 1rem; }
.schema-box svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.legende { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.95rem; }
.legende li { display: flex; align-items: center; gap: 0.4rem; }
.legende svg { width: 40px; height: 30px; flex: none; background: #F8F9FA; border-radius: 6px; }
.nachbarn { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.5rem; }
.knopf { display: inline-flex; align-items: center; min-height: 48px; padding: 0.6rem 1.2rem; border-radius: 999px; background: var(--haupt); color: #fff; font-weight: 800; text-decoration: none; border: 0; font: inherit; font-weight: 800; cursor: pointer; }
.knopf:hover { background: var(--haupt-dunkel); }
.knopf.hell { background: #fff; color: var(--haupt-dunkel); border: 3px solid var(--haupt); }
.knopf.hell:hover { background: var(--haupt-hell); }

/* Schema-Zeichnung */
.sz-hintergrund { fill: #FBFBF6; stroke: #D9D3C3; stroke-width: 2; }
.sz-gitter { stroke: #E7E2D3; stroke-width: 1; }
.sz-mass { fill: #6C757D; font-size: 13px; font-weight: 700; }
.sz-text { fill: #343A40; font-size: 14px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #FBFBF6; stroke-width: 4px; stroke-linejoin: round; }
.sz-mat { fill: #A5D8FF; stroke: #339AF0; stroke-width: 2.5; }
.sz-bank { fill: #E2B07A; stroke: #A5652B; stroke-width: 2.5; }
.sz-kasten { fill: #FFD8A8; stroke: #E8590C; stroke-width: 2.5; }
.sz-kasten-x { stroke: #E8590C; stroke-width: 1.5; opacity: 0.6; }
.sz-reifen { fill: rgba(255, 255, 255, 0.35); stroke: #E03131; stroke-width: 6; }
.sz-huetchen { fill: #FF922B; stroke: #D9480F; stroke-width: 2; stroke-linejoin: round; }
.sz-seil { fill: none; stroke: #8B5E3C; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sz-linie { fill: none; stroke: #5C7CFA; stroke-width: 4; stroke-dasharray: 9 7; stroke-linecap: round; }
.sz-pfeil { fill: none; stroke: #2B8A3E; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sz-pfeilkopf { fill: #2B8A3E; }
.sz-ball { fill: #FFD43B; stroke: #E67700; stroke-width: 2.5; }
.sz-ball-naht { fill: none; stroke: #E67700; stroke-width: 2; }
.sz-saeckchen { fill: #B197FC; stroke: #6741D9; stroke-width: 2.5; }
.sz-tuch { fill: #F783AC; stroke: #C2255C; stroke-width: 2.5; stroke-linejoin: round; }
.sz-eimer { fill: #63E6BE; stroke: #087F5B; stroke-width: 3; }
.sz-eimer-innen { fill: #0CA678; opacity: 0.45; }
.sz-kreis { fill: rgba(255, 224, 102, 0.18); stroke: #868E96; stroke-width: 3; stroke-dasharray: 3 8; stroke-linecap: round; }
.sz-feld { fill: rgba(255, 224, 102, 0.14); stroke: #868E96; stroke-width: 2.5; stroke-dasharray: 8 6; }
.sz-feld-nr { fill: rgba(255, 255, 255, 0.7); stroke: #5C7CFA; stroke-width: 2.5; }
.sz-start { fill: #2F9E44; stroke: #fff; stroke-width: 2.5; }
.sz-start-dreieck { fill: #fff; }
.sz-ziel-aussen { fill: #fff; stroke: #C92A2A; stroke-width: 3; }
.sz-ziel-innen { fill: #E03131; }
.sz-kind { fill: #FFA94D; stroke: #D9480F; stroke-width: 2; }
.sz-kind-auge { fill: #2B2B3A; }
.sz-trainer { fill: #7048E8; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.sz-huerde { fill: #20C997; stroke: #087F5B; stroke-width: 2; }
.sz-tor { fill: rgba(255, 255, 255, 0.6); stroke: #364FC7; stroke-width: 4; }
.sz-schraege { fill: #FFE8CC; stroke: #E8590C; stroke-width: 2.5; }
.sz-schraege-strich { stroke: #E8590C; stroke-width: 2; opacity: 0.6; }
.sz-luftballon { fill: #FF6B6B; stroke: #C92A2A; stroke-width: 2.5; }
.sz-luftballon-schnur { stroke: #6C757D; stroke-width: 2; fill: none; }
.sz-sprossen { fill: #DEE2E6; stroke: #495057; stroke-width: 2.5; }
.sz-sprossen-strich { stroke: #495057; stroke-width: 2; }
.sz-stuhl { fill: #D0BFA8; stroke: #7F5539; stroke-width: 2.5; }
.sz-kegel { fill: #fff; stroke: #E03131; stroke-width: 4; }
.sz-nr-kreis { fill: #343A40; stroke: #fff; stroke-width: 2; }
.sz-nr-text { fill: #fff; font-size: 12px; font-weight: 900; text-anchor: middle; }
.sz-wedge-a { fill: #FF8787; } .sz-wedge-b { fill: #FFE066; } .sz-wedge-c { fill: #69DB7C; } .sz-wedge-d { fill: #74C0FC; }
.sz-schwung-rand { fill: none; stroke: #868E96; stroke-width: 2.5; }

@media print {
  .kopf, .fuss, .nav, .filter, .skip { display: none; }
  body { background: #fff; }
  .box, .karte, .schema-box { box-shadow: none; }
}

/* Navigation auf kleinen Bildschirmen */
@media (max-width: 699px) {
  .kopf { position: static; }
  .kopf-innen { padding: 0.45rem 0.75rem 0.6rem; }
  .nav { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
  .nav a { justify-content: center; padding: 0.4rem 0.6rem; font-size: 0.98rem; }
}

/* Abstimmungen */
.einleitung { font-size: 1.1rem; max-width: 46rem; }
.konto { margin-bottom: 1.4rem; }
.konto-form { display: grid; gap: 0.8rem; margin-top: 0.8rem; }
.konto-felder { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .konto-felder { grid-template-columns: 1fr 1fr; } }
.konto-felder label { font-weight: 800; display: block; margin-bottom: 0.25rem; }
.pin-feld { max-width: 12rem; font-size: 1.3rem; letter-spacing: 0.35rem; font-variant-numeric: tabular-nums; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.meldung { padding: 0.7rem 1rem; border-radius: 12px; font-weight: 700; margin: 0.6rem 0 0; }
.meldung.ok { background: #D3F9D8; color: #14532D; }
.meldung.fehler { background: #FFE3E3; color: #7A1010; }
.klein { font-size: 0.95rem; }
.monat-titel { margin: 1.6rem 0 0.8rem; }
.abst-tag { background: var(--karte); border: 3px solid var(--linie); border-radius: var(--rund); padding: 1rem 1.1rem; box-shadow: var(--schatten); margin-bottom: 1rem; }
.abst-tag.offen { border-color: #8CE99A; }
.abst-tag.ausfall { background: #F8F9FA; }
.abst-kopf { list-style: none; cursor: pointer; display: grid; gap: 0.4rem; padding-right: 2.2rem; position: relative; min-height: 44px; }
.abst-kopf::-webkit-details-marker { display: none; }
.abst-kopf::after { content: "▾"; position: absolute; right: 0.2rem; top: 0.1rem; font-size: 1.4rem; color: var(--haupt-dunkel); transition: transform 0.15s; }
details:not([open]) > .abst-kopf::after { transform: rotate(-90deg); }
.abst-tag[open] > .abst-kopf { margin-bottom: 0.7rem; }
.abst-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; font-size: 1.2rem; }
.abst-titel .kw { background: var(--haupt-dunkel); color: #fff; border-radius: 999px; padding: 0.1rem 0.75rem; font-size: 1rem; font-weight: 800; }
.abst-kurz { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; }
.abst-ende { font-weight: 700; }
.status { display: inline-block; font-weight: 800; border-radius: 12px; padding: 0.15rem 0.75rem; }
.status.auf { background: #D3F9D8; color: #14532D; }
.status.zu { background: #E9ECEF; color: #343A40; }
.status.aus { background: #FFE3E3; color: #7A1010; }
.meine { font-weight: 800; color: #14532D; }
.abst-liste { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.5rem; }
.abst-zeile { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 0.8rem; align-items: center; border: 2px solid var(--linie); border-left: 8px solid var(--kat); border-radius: 14px; padding: 0.6rem 0.8rem; background: #fff; }
@media (min-width: 640px) { .abst-zeile { grid-template-columns: 1fr 11rem auto; } }
.abst-zeile.gewaehlt { background: #EBFBEE; border-color: #8CE99A; border-left-color: var(--kat); }
.abst-info { display: grid; gap: 0.1rem; min-width: 0; grid-column: 1 / -1; }
@media (min-width: 640px) { .abst-info { grid-column: auto; } }
.abst-name { font-weight: 800; overflow-wrap: anywhere; }
.abst-info small { color: var(--tinte-leise); font-weight: 700; }
.sieger { font-weight: 800; color: #7A5A00; }
.abst-zahl { display: grid; gap: 0.2rem; font-weight: 800; font-size: 0.95rem; white-space: nowrap; min-width: 6rem; }
.balken { display: block; height: 10px; background: #F1F3F5; border-radius: 999px; overflow: hidden; }
.balken-fuell { display: block; height: 100%; width: var(--anteil, 0%); background: var(--kat); border-radius: 999px; }
.abst-knopf { justify-self: end; }
.abst-knopf[aria-pressed="true"] { background: #237032; border-color: #237032; }
.abst-knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.vorbei { margin-top: 1.6rem; }
.vorbei summary { cursor: pointer; font-weight: 800; font-size: 1.1rem; padding: 0.6rem 0; min-height: 44px; }
.abst-hinweis { display: flex; gap: 0.8rem; align-items: center; text-decoration: none; color: var(--tinte); background: #EBFBEE; border: 3px solid #8CE99A; border-radius: var(--rund); padding: 0.9rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--schatten); }
.abst-hinweis:hover { border-color: #2B8A3E; }
.abst-hinweis .symbol { font-size: 2rem; }
.abst-knopf { min-width: 9.5rem; justify-content: center; text-align: center; }