/* Prototyp Appenzeller Bären – bewusst grau (Wireframe, Schritt 2 von 8).
   Gestaltung folgt in den Schritten 3–5. Haus-Regeln: keine farbigen Ränder links,
   keine Schriftschatten, Formulare über die ganze Breite, keine Inline-Styles (CSP). */

:root {
  --weiss: #ffffff;
  --grau-1: #f4f4f4;
  --grau-2: #e8e8e8;
  --grau-3: #c9c9c9;
  --grau-6: #5f5f5f;   /* Text auf Weiss: 6.4:1 */
  --grau-8: #333333;
  --grau-9: #1a1a1a;
  --abstand: 1rem;
  --breite: 62rem;
  --breite-werkzeug: 82rem; /* Einsatzplanung und Punkte-Rechner: Arbeitstabellen am Computer */
  --radius: 4px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Der klebende Kopf verdeckt nichts, was den Fokus bekommt; app.js setzt --kopf-hoehe (Meret Runde 1) */
  scroll-padding-top: calc(var(--kopf-hoehe, 4rem) + 0.75rem);
}
[hidden] { display: none !important; } /* Filter blenden Zeilen aus; keine Regel darf sie wieder einblenden */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--grau-9);
  background: var(--grau-1);
}

a { color: var(--grau-9); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--grau-9); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.2; margin: 1.5rem 0 0.75rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 0.75rem; }

.sprung { position: absolute; left: -999px; top: 0; background: var(--weiss); padding: 0.5rem 1rem; z-index: 20; display: inline-flex; align-items: center; min-height: 44px; }
.sprung:focus { left: 0.5rem; }

.prototyp-band {
  background: var(--grau-9);
  color: var(--weiss);
  font-size: 0.8rem;
  text-align: center;
  padding: 0.3rem var(--abstand);
}

/* Kopf: bleibt beim Scrollen oben, gleiche Höhe in allen Ansichten */
.kopf { position: sticky; top: 0; z-index: 10; background: var(--weiss); border-bottom: 1px solid var(--grau-3); }
.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0.5rem var(--abstand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.marke { font-weight: 700; font-size: 1.15rem; text-decoration: none; margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; }
.menue-knopf { display: inline-flex; }
.navigation { width: 100%; }
.navigation[data-offen="nein"] { display: none; }
/* Offenes Menü bei wenig Höhe (Querformat, 200 % Zoom): es scrollt in sich, statt unter den Bildschirmrand zu ragen */
.navigation[data-offen="ja"] { max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); overflow-y: auto; }
.nav-liste { list-style: none; margin: 0; padding: 0 0 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.nav-liste a, .nav-liste button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  width: 100%;
}
.nav-liste a[aria-current="page"] { border-color: var(--grau-9); font-weight: 700; }
.nav-trenner { border-top: 1px solid var(--grau-3); margin: 0.25rem 0; }

@media (min-width: 60rem) {
  .menue-knopf { display: none; }
  .navigation, .navigation[data-offen="nein"], .navigation[data-offen="ja"] { display: block; width: auto; max-height: none; overflow: visible; }
  .nav-liste { flex-direction: row; flex-wrap: wrap; padding: 0; }
  .nav-liste a, .nav-liste button { width: auto; }
  .nav-trenner { border-top: 0; border-left: 1px solid var(--grau-3); margin: 0 0.25rem; }
}

.inhalt { max-width: var(--breite); margin: 0 auto; padding: var(--abstand); min-height: 60vh; }
.werkzeug .inhalt, .werkzeug .kopf-innen, .werkzeug .fuss-innen { max-width: var(--breite-werkzeug); }
.inhalt:focus { outline: none; }

/* Bausteine */
.karte { background: var(--weiss); border: 1px solid var(--grau-3); border-radius: var(--radius); padding: var(--abstand); margin: 0 0 var(--abstand); }
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
.raster { display: grid; gap: var(--abstand); grid-template-columns: 1fr; }
@media (min-width: 45rem) { .raster-2 { grid-template-columns: 1fr 1fr; } .raster-3 { grid-template-columns: 1fr 1fr 1fr; } }
.klein { font-size: 0.875rem; color: var(--grau-6); }
.etikett { display: inline-block; border: 1px solid var(--grau-8); border-radius: var(--radius); padding: 0 0.4rem; font-size: 0.8rem; margin-right: 0.35rem; }
.etikett-stark { background: var(--grau-9); color: var(--weiss); border-color: var(--grau-9); }
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { border-top: 1px solid var(--grau-2); padding: 0.75rem 0; }
.liste > li:first-child { border-top: 0; }
/* Trefferflächen mindestens 44 px: alleinstehende Links, Links in Listen und im Fuss (Meret Runde 1) */
.linkzeile a, .liste > li > a, .liste .zeile > a, .fuss a, td > a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss a { min-width: 44px; justify-content: center; } /* kurze Fusslinks wie «Shop» auch 44 px breit (Meret Runde 3) */
.zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.leer { color: var(--grau-6); font-style: italic; }
/* Vorstand: Kennzahlen als Karten, Wert gross, Erläuterung klein */
.kennzahl > h3 { margin-top: 0; }
.kennzahl-wert { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 0.25rem 0 0.5rem; }
summary { padding: 0.625rem 0; cursor: pointer; } /* Aufklapper: Trefferfläche 44 px */
.mailtext { white-space: pre-line; overflow-wrap: anywhere; }
.spiele .spiel { display: block; margin: 0.2rem 0; }  /* Spiele als Liste: auf dem Handy ohne Querscrollen */

/* Knöpfe: mindestens 44 px hoch */
button, .knopf {
  font: inherit;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--grau-9);
  border-radius: var(--radius);
  background: var(--grau-2);
  color: var(--grau-9);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
button:hover, .knopf:hover { background: var(--grau-3); }
.knopf-haupt { background: var(--grau-9); color: var(--weiss); }
.knopf-haupt:hover { background: var(--grau-8); }
button[disabled] { opacity: 0.6; cursor: not-allowed; }
button[aria-disabled="true"] { opacity: 0.6; cursor: progress; } /* läuft gerade (dom.js: einmal) */
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; align-items: flex-end; }
.knopfreihe .feld { flex: 1 1 14rem; }

/* Formulare über die ganze Containerbreite */
.formular { display: grid; gap: 0.9rem; }
.feld { display: grid; gap: 0.3rem; }
.feld > label, .feldgruppe > legend { font-weight: 600; }
.feldfehler { font-weight: 600; }
.feldfehler::before { content: "Fehler: "; }
[aria-invalid="true"] { border-width: 2px; border-color: var(--grau-9); }
.bearbeitung { font-weight: 600; }
.feldgruppe { border: 1px solid var(--grau-3); border-radius: var(--radius); padding: 0.75rem; margin: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="url"],
input[type="password"], input[type="file"], select, textarea {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--grau-6);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--grau-9);
}
textarea { min-height: 7rem; resize: vertical; }
::placeholder { color: var(--grau-6); opacity: 1; } /* Safari zeigte #a9a9a9 = 2.35:1 (Meret Runde 1) */
.haken { display: flex; gap: 0.6rem; align-items: center; min-height: 44px; }
.haken input { width: 1.4rem; height: 1.4rem; margin: 0; flex: none; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Meldungen */
.meldung { border: 2px solid var(--grau-9); border-radius: var(--radius); padding: 0.75rem; margin: 0.75rem 0; background: var(--weiss); }
.meldung-fehler { border-style: double; border-width: 4px; }
.meldung:empty { display: none; }

/* Tabellen scrollen in ihrem Rahmen, nie die Seite */
.tabelle-rahmen { overflow-x: auto; margin: 0 0 var(--abstand); }
table { width: 100%; border-collapse: collapse; background: var(--weiss); font-size: 0.95rem; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--grau-2); vertical-align: top; }
/* In Tabellenzellen stehen Auswahl und Knopf neben dem Namen, statt je eine ganze Zeile zu belegen */
td select { width: auto; max-width: 100%; }
td .zeile { justify-content: flex-start; }
th { background: var(--grau-2); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
td.zahl { white-space: nowrap; }
tr.heimspiel td { font-weight: 600; }
tr.summe td { font-weight: 700; border-top: 2px solid var(--grau-8); }

meter { width: 100%; height: 1.2rem; }

/* Kalender: Liste, Tag, Woche, Monat wie im iOS-Kalender (Wunsch Wagi 26.09.2026) */
.kal-ansichten { display: flex; }
.kal-ansichten button { flex: 1 1 0; min-width: 0; padding-inline: 0.25rem; border-radius: 0; margin-left: -1px; } /* 320 px ohne Querscrollen (Meret Runde 4) */
.kal-ansichten button:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.kal-ansichten button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.kal-ansichten button[aria-pressed="true"], .kal-leistentag[aria-pressed="true"] { background: var(--grau-9); color: var(--weiss); font-weight: 700; }
.kal-ansichten button[aria-pressed="true"]:hover, .kal-leistentag[aria-pressed="true"]:hover { background: var(--grau-8); }
.kal-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; }
.kal-leiste h2 { margin: 0; font-size: 1.15rem; }
.kal-leiste .knopfreihe { margin: 0; }
.kal-pfeil { min-width: 44px; }
.kal-pfeil::before { content: ""; width: 0.55rem; height: 0.55rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(0.12rem) rotate(45deg); }
.kal-pfeil-vor::before { transform: translateX(-0.12rem) rotate(-135deg); }
.kal-monat { table-layout: fixed; background: transparent; margin: 0 0 0.25rem; }
.kal-monat th { background: transparent; text-align: center; padding: 0.25rem 0; font-size: 0.85rem; border: 0; }
.kal-monat td { padding: 1px; border: 0; }
.kal-tag { width: 100%; min-height: 3.4rem; padding: 0.25rem 0; flex-direction: column; gap: 0.2rem; background: var(--weiss); border-color: var(--grau-3); }
.kal-tag[aria-pressed="true"] { border: 2px solid var(--grau-9); }
.kal-aussen { background: var(--grau-1); }
.kal-aussen .kal-nummer { color: var(--grau-6); }
.kal-nummer { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8em; min-height: 1.8em; border-radius: 999px; }
[aria-current="date"] .kal-nummer { background: var(--grau-9); color: var(--weiss); font-weight: 700; } /* heute: gefüllter Kreis wie in iOS */
.kal-zeichen { display: flex; gap: 3px; align-items: center; justify-content: center; min-height: 0.6rem; font-size: 0.75rem; line-height: 1; }
.kal-punkt { display: inline-block; width: 0.5rem; height: 0.5rem; border: 2px solid var(--grau-9); border-radius: 50%; background: var(--grau-9); vertical-align: middle; }
.kal-punkt-aus { background: transparent; }
.kal-punkt-anlass { border-radius: 1px; transform: rotate(45deg) scale(0.85); }
.kal-legende { margin: 0 0 var(--abstand); }
.kal-woche { display: grid; gap: 0.5rem; margin: 0 0 var(--abstand); }
@media (min-width: 60rem) { .kal-woche { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.kal-wochentag { background: var(--weiss); border: 1px solid var(--grau-3); border-radius: var(--radius); padding: 0.5rem; min-width: 0; }
.kal-wochentag h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.kal-heute { border: 2px solid var(--grau-9); }
.kal-tagknopf { width: 100%; justify-content: flex-start; text-align: left; background: transparent; border-color: transparent; padding: 0.5rem 0.25rem; font-weight: 700; }
.kal-wochenleiste { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin: 0 0 0.75rem; }
.kal-leistentag { flex-direction: column; gap: 0; padding: 0.25rem 0; background: var(--weiss); border-color: var(--grau-3); font-size: 0.85rem; }
.kal-ganztaegig { background: var(--weiss); border: 1px solid var(--grau-3); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.kal-raster { --zeile: 3.25rem; position: relative; margin: 0 0 var(--abstand); background: var(--weiss); border: 1px solid var(--grau-3); border-radius: var(--radius); }
.kal-stunde { height: var(--zeile); border-top: 1px solid var(--grau-2); font-size: 0.8rem; color: var(--grau-6); padding: 0.1rem 0.3rem; box-sizing: border-box; }
.kal-stunde:first-child { border-top: 0; }
.kal-bloecke { position: absolute; inset: 0 0.25rem 0 3.5rem; }
.kal-block { position: absolute; top: calc(var(--oben) * var(--zeile) + 1px); height: calc(var(--dauer) * var(--zeile) - 3px);
  left: calc(var(--spalte) * 100% / var(--spalten)); width: calc(100% / var(--spalten) - 3px); overflow: hidden;
  background: var(--grau-2); border: 1px solid var(--grau-8); border-radius: var(--radius); padding: 0.2rem 0.35rem; font-size: 0.8rem; line-height: 1.25; }
.kal-block strong, .kal-block span { display: block; overflow-wrap: anywhere; }
.kal-block-heim { background: var(--weiss); border-width: 2px; }

/* B13 Bilder und Dokumente */
.medien { display: grid; gap: 0.75rem; margin: 0.75rem 0; }
.medien-bild { margin: 0; }
.medien-bild img { display: block; max-width: 100%; height: auto; border: 1px solid var(--grau-3); border-radius: var(--radius); }
.medien-bild figcaption { margin-top: 0.25rem; }
.medien-dokumente > li { padding: 0; }
.medien-dokumente a { display: inline-flex; align-items: center; min-height: 44px; }
.zeile > .medien-panel, li > .medien-panel { flex: 1 1 100%; margin-top: 0.25rem; }
.medien-panel > summary { font-weight: 600; }
.medien-eintrag { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.medien-vorschau { width: 8rem; height: auto; border: 1px solid var(--grau-3); border-radius: var(--radius); }

/* Notiz-Ebene für offene Fragen (Schalter im Kopf) */
.notiz { display: none; border: 2px dashed var(--grau-8); border-radius: var(--radius); background: var(--weiss); padding: 0.6rem 0.75rem; margin: 0.75rem 0; font-size: 0.9rem; }
.notiz::before { content: "Notiz: "; font-weight: 700; }
body.notizen-an .notiz { display: block; }

/* Fuss */
.fuss { border-top: 1px solid var(--grau-3); background: var(--weiss); margin-top: 2rem; }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: var(--abstand); display: grid; gap: 0.75rem; }
.vermerk { text-align: center; margin: 1rem 0 0; letter-spacing: 0.08em; }
.vermerk-titel { font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }