/* Zwischenprüfung Karate — Dojo Herbertshofen
   Große Flächen zum Antippen: wird am Tablet mit Prüferblick bedient,
   nicht am Schreibtisch. Deshalb überall min. 48px hohe Knöpfe. */

:root{
  --grund:#f4f5f7;
  --karte:#ffffff;
  --rand:#d8dce3;
  --text:#1b2430;
  --text-leise:#5c6672;
  --dunkel:#1b2430;
  --primaer:#2c5f9e;
  --gruen:#2e8b45;
  --gelb:#d8a020;
  --rot:#c2412d;
  --gruen-hell:#e3f3e7;
  --gelb-hell:#fcf3dd;
  --rot-hell:#fae5e1;
}

*{box-sizing:border-box}

/* Muss ganz oben stehen: eine eigene display-Regel (etwa display:grid bei
   .ampel) schlaegt sonst das hidden-Attribut und versteckte Bereiche
   bleiben sichtbar. */
[hidden]{display:none!important}

html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--grund);
  color:var(--text);
  font-size:17px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
}

/* ---------- Kopf ---------- */
#kopf{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  background:var(--dunkel);color:#fff;
  padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top));
}
#kopf h1{font-size:19px;margin:0;flex:1;font-weight:600}
.kopf-knopf{
  background:rgba(255,255,255,.14);color:#fff;border:0;
  padding:8px 14px;border-radius:8px;font-size:16px;cursor:pointer;
}
#kopf-rechts{font-size:14px;opacity:.75;white-space:nowrap}

main{padding:16px;max-width:900px;margin:0 auto;padding-bottom:60px}

.ansicht{display:none}
.ansicht.aktiv{display:block}

h2{font-size:18px;margin:22px 0 10px}
h2 small{font-weight:400;color:var(--text-leise);font-size:15px}

/* ---------- Kästen ---------- */
.block{
  background:var(--karte);border:1px solid var(--rand);
  border-radius:12px;padding:16px;margin-bottom:16px;
}
.block.klein{padding:14px}
.block-titel{
  margin:0 0 4px;font-size:14px;font-weight:600;
  color:var(--primaer);text-transform:uppercase;letter-spacing:.04em;
}
.zusatz{color:var(--text-leise);margin:4px 0 0;font-size:16px}
.hinweis{color:var(--text-leise);font-size:15px;margin:8px 0 0}

/* ---------- Knöpfe ---------- */
button{
  font-family:inherit;font-size:17px;
  background:var(--karte);color:var(--text);
  border:1px solid var(--rand);border-radius:10px;
  padding:13px 16px;margin:0 8px 8px 0;
  cursor:pointer;min-height:48px;
}
button:active{transform:translateY(1px)}
button.primaer{background:var(--primaer);color:#fff;border-color:var(--primaer)}
button.warnung{color:var(--rot);border-color:#e8b8b0}
button.gross{display:block;width:100%;margin:0 0 10px;text-align:left;padding:16px}
button.gross strong{display:block;font-size:18px}
button.gross small{display:block;opacity:.85;font-weight:400;margin-top:3px;font-size:15px}
button:disabled{opacity:.45;cursor:default}

label{display:block;margin-bottom:12px;font-size:15px;color:var(--text-leise)}
input[type=text],input[type=date],input[type=number],textarea,select{
  display:block;width:100%;margin-top:5px;
  font-family:inherit;font-size:17px;color:var(--text);
  padding:12px;border:1px solid var(--rand);border-radius:9px;
  background:#fff;min-height:48px;
}
textarea{min-height:80px;resize:vertical}

/* ---------- Stufenwahl ---------- */
.stufen-wahl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.stufen-wahl button{
  margin:0;text-align:center;font-weight:600;
  border-left:7px solid var(--rand);
}
.stufen-wahl button.gewaehlt{
  background:var(--primaer);color:#fff;border-color:var(--primaer);
}

/* ---------- Kinderfelder ---------- */
.kind-zeile{
  display:grid;grid-template-columns:1fr 1fr 78px 44px;gap:8px;
  align-items:end;margin-bottom:10px;
}
.kind-zeile label{margin:0}
.kind-zeile .weg{
  min-height:48px;padding:0;margin:0;
  color:var(--rot);border-color:#e8b8b0;font-size:20px;line-height:1;
}
/* Technikprüfung: kein Altersfeld, mehr Platz für die Namen */
.ohne-alter .kind-zeile{grid-template-columns:1fr 1fr 44px}

@media(max-width:560px){
  .kind-zeile{grid-template-columns:1fr 1fr;grid-template-areas:"v n" "a w"}
  .kind-zeile .f-vor{grid-area:v}.kind-zeile .f-nach{grid-area:n}
  .kind-zeile .f-alt{grid-area:a}.kind-zeile .weg{grid-area:w}
  .ohne-alter .kind-zeile{grid-template-columns:1fr 1fr;grid-template-areas:"v n" "w w"}
}

/* ---------- Fortschritt ---------- */
#fortschritt-leiste{
  height:6px;background:var(--rand);border-radius:3px;
  overflow:hidden;margin-bottom:14px;
}
#fortschritt-balken{height:100%;background:var(--primaer);width:0;transition:width .2s}

/* ---------- Bewertung ---------- */
.bew-karte{
  background:var(--karte);border:1px solid var(--rand);
  border-radius:12px;padding:10px 12px;margin-bottom:10px;
}
.bew-name{font-weight:600;font-size:17px;margin:0;display:flex;
  align-items:center;gap:8px}
.bew-name .nam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bew-name .stufe-tag{font-weight:400;font-size:14px;color:var(--text-leise);white-space:nowrap}
.ampel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:7px}
.ampel button{margin:0;font-weight:600;font-size:16px;padding:12px 6px}
.ampel button[data-w=gruen].an{background:var(--gruen);color:#fff;border-color:var(--gruen)}
.ampel button[data-w=gelb].an {background:var(--gelb); color:#fff;border-color:var(--gelb)}
.ampel button[data-w=rot].an  {background:var(--rot);  color:#fff;border-color:var(--rot)}

/* Gerechnete Ampel beim Fitnesstest: eine farbige Zeile statt drei Knöpfe.
   Der Knopf rechts öffnet die Bewertung von Hand. */
.auto-ampel{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;padding:9px 12px;border-radius:9px;
  background:var(--grund);border:1px solid var(--rand);font-size:16px;
}
.auto-ampel.gruen{background:var(--gruen-hell);border-color:#b9dcc3;color:#1d6b32}
.auto-ampel.gelb {background:var(--gelb-hell); border-color:#e8d59a;color:#8a6812}
.auto-ampel.rot  {background:var(--rot-hell);  border-color:#e8b8b0;color:var(--rot)}
.auto-ampel .anders{
  margin:0;padding:6px 10px;min-height:34px;font-size:14px;
  background:rgba(255,255,255,.7);color:inherit;border-color:currentColor;
}

.messfeld{display:flex;gap:10px;align-items:flex-end;margin-top:10px;flex-wrap:wrap}
.messfeld label{flex:1;min-width:110px;margin:0}
.zielwert{
  font-size:14px;color:var(--text-leise);
  background:var(--grund);border-radius:8px;padding:8px 10px;margin-top:8px;
}
.zielwert b{color:var(--text)}
/* Notizknopf sitzt rechts in der Namenszeile und kostet keine eigene Zeile.
   Mit Notiz wird er breiter und zeigt sie an, ohne Notiz bleibt er schmal. */
.notiz-auf{
  font-size:14px;padding:7px 10px;min-height:34px;margin:0;
  max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text-leise);
}
.notiz-feld{margin-top:8px}

/* ---------- Übersicht / Tabelle ---------- */
.tab-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.uebersicht{border-collapse:collapse;width:100%;font-size:15px;background:var(--karte)}
table.uebersicht th,table.uebersicht td{
  border:1px solid var(--rand);padding:8px 10px;text-align:left;vertical-align:top;
}
table.uebersicht th{background:var(--grund);font-weight:600;position:sticky;top:0}
/* Ohne Mindestbreite quetscht sich der Übungstext am Handy auf vier
   Zeilen und die Tabelle wird unlesbar hoch. Lieber seitlich scrollen. */
table.uebersicht th:first-child,
table.uebersicht td:first-child{min-width:230px}
table.uebersicht td.z{text-align:center;font-weight:700;width:46px}
td.z.gruen{background:var(--gruen-hell);color:var(--gruen)}
td.z.gelb {background:var(--gelb-hell); color:#9a7415}
td.z.rot  {background:var(--rot-hell);  color:var(--rot)}
.gruppe-zeile td{background:#eef1f5;font-weight:600}

/* ---------- DKV-Prüfungsordnung ---------- */
.grad-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:6px}
.grad-knopf{
  margin:0;text-align:left;border-left:7px solid var(--rand);
  display:flex;flex-direction:column;justify-content:center;
}
.grad-knopf strong{font-size:17px}
.grad-knopf small{color:var(--text-leise);font-size:14px}

.grad-kopf{border-left:7px solid var(--rand)}
.grad-kopf h2{margin:0;font-size:24px}
.grad-kopf .hinweis{margin-top:2px}
.grad-kopf button{margin-top:12px}

.grad-fest{
  border:1px solid var(--rand);border-left:7px solid var(--rand);
  border-radius:10px;padding:12px;margin-top:6px;
}
.grad-fest strong{display:block;font-size:17px}
.grad-fest small{color:var(--text-leise)}

.klarstellung{
  background:var(--gelb-hell);border:1px solid #e8d59a;border-radius:8px;
  padding:9px 12px;margin:10px 0 0;font-size:15px;
}

.kihon-liste{margin:6px 0 0;padding-left:24px}
.kihon-liste li{margin-bottom:9px;line-height:1.5}
.kihon-stand{
  display:inline-block;min-width:52px;font-weight:700;color:var(--primaer);
  font-variant-numeric:tabular-nums;
}
.kata-text{margin:4px 0;font-size:17px}
.kumite-form{margin:4px 0 10px;font-size:17px}
.kumite-dazu{margin:10px 0 0}

table.kumite-tab{border-collapse:collapse;width:100%;font-size:15px;background:var(--karte)}
table.kumite-tab th,table.kumite-tab td{
  border:1px solid var(--rand);padding:8px 10px;text-align:left;vertical-align:top;
}
table.kumite-tab thead th{background:var(--grund)}
table.kumite-tab tbody th{
  background:var(--grund);font-weight:600;white-space:nowrap;width:1%;
}
table.kumite-tab td{min-width:190px}

.gruppen-text{margin:8px 0;line-height:1.5}
.leg-zeile{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid #eceef1;font-size:16px}
.leg-z{
  flex:0 0 54px;font-weight:700;color:var(--primaer);
  text-align:center;background:var(--grund);border-radius:6px;padding:2px 4px;
}
#po-grundsaetze{margin:8px 0 0;padding-left:22px}
#po-grundsaetze li{margin-bottom:8px;line-height:1.5}

details.block summary{
  cursor:pointer;font-weight:600;font-size:17px;list-style-position:outside;
}
details.block[open] summary{margin-bottom:8px}

.treffer{
  border-top:1px solid var(--rand);padding:11px 0;cursor:pointer;
}
.treffer strong{display:block;color:var(--primaer)}
.treffer small{display:block;color:var(--text-leise);font-size:15px;margin-top:2px}
mark{background:#ffe680;color:inherit;border-radius:3px;padding:0 2px}
.quelle{font-size:14px;padding:0 4px 10px}

/* ---------- Prüfungsliste ---------- */
.p-eintrag{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--karte);border:1px solid var(--rand);
  border-radius:12px;padding:14px;margin-bottom:10px;
}
.p-eintrag .p-text{flex:1;cursor:pointer}
.p-eintrag strong{display:block}
.p-eintrag small{color:var(--text-leise)}
.p-eintrag .p-weg{color:var(--rot);border-color:#e8b8b0;margin:0}
.leer{color:var(--text-leise);text-align:center;padding:26px 10px}

/* ---------- Ergebnisblatt ---------- */
.blatt{
  background:#fff;border:1px solid var(--rand);border-radius:12px;
  padding:20px;margin-bottom:18px;
}
.blatt-kopf{border-bottom:2px solid var(--dunkel);padding-bottom:10px;margin-bottom:14px}
.blatt-kopf h2{margin:0;font-size:22px}
.blatt-kopf p{margin:4px 0 0;color:var(--text-leise);font-size:15px}
.blatt h3{font-size:16px;margin:18px 0 8px;color:var(--primaer)}
.blatt-zeile{
  display:flex;gap:10px;align-items:flex-start;
  padding:7px 0;border-bottom:1px solid #eceef1;
}
.blatt-zeile .marke{
  flex:0 0 26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;color:#fff;
}
.marke.gruen{background:var(--gruen)}.marke.gelb{background:var(--gelb)}
/* "ohne" statt "leer": .leer ist der Platzhaltertext auf der Startseite
   und hat 26px Innenabstand — der hat die Marke doppelt so hoch gemacht. */
.marke.rot{background:var(--rot)}.marke.ohne{background:var(--rand);color:var(--text-leise)}
.blatt-zeile .inhalt{flex:1}
.blatt-zeile .inhalt em{color:var(--text-leise);font-style:normal;font-size:15px}
.blatt-zeile .inhalt .notiz{color:var(--rot);font-size:15px}
.bilanz{display:flex;gap:14px;margin:10px 0 0;flex-wrap:wrap}
.bilanz span{
  background:var(--grund);border-radius:8px;padding:6px 12px;font-size:15px;font-weight:600;
}
.schluss{margin-top:16px}
.schluss textarea{min-height:90px}
.schluss-druck{display:none}   /* nur beim Drucken, siehe @media print */

/* ---------- Navigation ---------- */
/* Bleibt am unteren Rand kleben: bei acht Kindern liegt das Ende der
   Liste sonst weit unterhalb des Bildschirms und "Weiter" wäre jedes
   Mal ein Scrollweg. */
.navi{
  display:flex;align-items:center;gap:10px;margin:12px 0 0;
  position:sticky;bottom:0;z-index:15;
  background:var(--grund);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 12px -8px rgba(20,26,34,.25);
}
.navi button{flex:1;margin:0}
.navi #u-zaehler{
  flex:0 0 auto;color:var(--text-leise);font-size:15px;
  min-width:64px;text-align:center;
}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--dunkel);color:#fff;padding:12px 20px;border-radius:10px;
  font-size:16px;opacity:0;pointer-events:none;transition:.22s;z-index:60;
  max-width:88vw;text-align:center;
}
#toast.an{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Dialog ---------- */
#dialog{
  position:fixed;inset:0;background:rgba(20,26,34,.55);z-index:70;
  display:flex;align-items:center;justify-content:center;padding:18px;
}
#dialog[hidden]{display:none}
.dialog-kasten{
  background:var(--karte);border-radius:14px;padding:20px;
  max-width:440px;width:100%;max-height:86vh;overflow:auto;
}
.dialog-kasten h2{margin:0 0 8px}
.dialog-knoepfe button.loeschen{background:var(--rot);border-color:var(--rot);color:#fff}
.dialog-knoepfe{display:flex;gap:10px;margin-top:16px}
.dialog-knoepfe button{flex:1;margin:0}

/* ---------- Drucken ---------- */
@media print{
  /* Ohne das lassen Browser alle Hintergrundfarben weg — die farbigen
     Ampelmarken kamen als weiße Kreise aus dem Drucker. */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  #kopf,.navi,.nicht-drucken,#toast,#dialog{display:none!important}
  body{background:#fff;font-size:12pt}
  main{padding:0;max-width:none}
  .blatt{
    border:0;padding:0;margin:0;
    page-break-after:always;break-after:page;
  }
  .blatt:last-child{page-break-after:auto;break-after:auto}
  .blatt-zeile{break-inside:avoid}
  /* Auf Papier den Text selbst zeigen, nicht das Eingabefeld —
     ein textarea schneidet längeren Text ab. */
  .schluss textarea{display:none}
  .schluss-druck{
    display:block;border:1px solid #999;border-radius:4px;
    padding:8px;min-height:60px;white-space:pre-wrap;
  }
}