/* ============================================================
   BAUSTEINE — Knöpfe, Felder, Karten, Hinweise, Fragebogen
   Nur Namen aus tokens.css, keine eigenen Farben. Die Bildschirme
   in ui/ benutzen ausschließlich diese Klassen.
   Quelle: trainingsapp-projekt/konzepte/design-grundlagen.md,
   Abschnitt 4, und entwuerfe/stilvorlage-klar.html.

   Die Bausteine für den Fragebogen (Regler, Auswahl, Wochentage,
   Zeit-Stepper, Fortschritt) stehen unten und werden mit dem
   Fragebogen benutzt.
   ============================================================ */

/* ---------- Aufbau eines Bildschirms ---------- */
.screen{ display:flex; flex-direction:column; gap:var(--s-3); padding-bottom:var(--s-4); }
.stack{ display:flex; flex-direction:column; gap:var(--s-3); }
.row{ display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center; }

/* Kopf: Zurück und Schrittzahl */
.screen-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); min-height:var(--tap); }
.screen-head .step{ font-size:var(--t-mini); line-height:var(--t-mini-lh); font-weight:600; color:var(--muted); }

/* Leiste unten mit dem Hauptknopf */
.screen-foot{ display:flex; flex-direction:column; gap:var(--s-2); padding-top:var(--s-2); }

/* ---------- Knöpfe ---------- */
.btn{
  min-height:var(--tap-gross); width:100%; padding:0 var(--s-4);
  border:0; border-radius:var(--r-m); cursor:pointer;
  background:var(--accent); color:var(--on-accent);
  font:700 var(--t-text)/1.15 var(--font);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); text-align:center;
}
.btn:active{ filter:brightness(.92); }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--field-border); }
.btn.text{ background:transparent; color:var(--accent-text); min-height:var(--tap); width:auto; padding:0 var(--s-2); }
.btn.danger{ background:var(--danger-bg); color:var(--danger-ink); }
.btn[disabled]{ background:var(--raised); color:var(--muted); box-shadow:inset 0 0 0 1.5px var(--line); cursor:not-allowed; filter:none; }
/* Ein abgeschalteter Knopf braucht immer einen Grund darunter */
.why-disabled{ font-size:var(--t-mini); line-height:var(--t-mini-lh); color:var(--muted); text-align:center; }

/* ---------- Eingabefelder ---------- */
.field{ display:flex; flex-direction:column; gap:var(--s-1); }
.field label,.field .lab{ font-size:var(--t-klein); line-height:var(--t-klein-lh); font-weight:600; }
.field input,.field select{
  min-height:var(--tap-gross); width:100%; padding:0 var(--s-3);
  border:0; border-radius:var(--r-s);
  background:var(--field); color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--field-border);
  font:400 var(--t-text)/1.3 var(--font);
}
.field input::placeholder{ color:var(--muted); }
.field input:focus,.field select:focus{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft);
}
.field input[aria-invalid="true"]{ box-shadow:inset 0 0 0 2px var(--danger-ink); }
.field .help{ font-size:var(--t-mini); line-height:var(--t-mini-lh); color:var(--muted); }
.field .err{ font-size:var(--t-mini); line-height:var(--t-mini-lh); color:var(--danger-ink); }
/* Einheit rechts im Feld */
.unit{ position:relative; }
.unit input{ padding-right:3.25rem; }
.unit .unit-text{ position:absolute; right:var(--s-3); top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }

/* ---------- Großes Zahlenfeld mit Minus und Plus ---------- */
.num-field{ height:4.5rem; width:100%; padding:0 var(--s-1);
  border:0; border-radius:var(--r-s); background:var(--field); color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--field-border);
  font:700 var(--t-num)/1 var(--font); text-align:center; font-variant-numeric:tabular-nums;
}
.num-field::-webkit-outer-spin-button,.num-field::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.num-field{ -moz-appearance:textfield; }
.num-field::placeholder{ color:var(--muted); font-weight:400; }
.num-field:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft); }
.num-field.solo{ height:5.5rem; font-size:var(--t-num-xl); }
.stepper{ display:grid; grid-template-columns:var(--tap-gross) 1fr var(--tap-gross); gap:var(--s-2); align-items:center; }
.stepper button{
  height:4.5rem; border:0; border-radius:var(--r-s);
  background:var(--raised); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line);
  font:700 1.75rem/1 var(--font); cursor:pointer;
}

/* ---------- Karten ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-3);
  box-shadow:var(--shadow);
}
.card h2{ margin:0; }
.hint{ font-size:var(--t-klein); line-height:var(--t-klein-lh); color:var(--muted); }
/* Bereich mit zerstörenden Schritten (Konto löschen) */
.card.danger-zone{ border-color:var(--danger-ink); }

/* ---------- Hinweise: Symbol, Überschrift, ein Satz ---------- */
.notice{
  display:grid; grid-template-columns:1.375rem 1fr; gap:var(--s-1) var(--s-2);
  padding:var(--s-3); border-radius:var(--r-s);
  font-size:var(--t-klein); line-height:var(--t-klein-lh);
  background:var(--accent-soft); color:var(--ink);
}
.notice::before{ content:"i"; font-weight:700; text-align:center; color:var(--accent-text); }
.notice b{ display:block; }
.notice.warn{ background:var(--warn-bg); color:var(--warn-ink); }
.notice.warn::before{ content:"!"; color:var(--warn-ink); }
.notice.danger{ background:var(--danger-bg); color:var(--danger-ink); }
.notice.danger::before{ content:"!"; color:var(--danger-ink); }
.notice.ok{ background:var(--ok-bg); color:var(--ok-ink); }
.notice.ok::before{ content:"\2713"; color:var(--ok-ink); }

/* „Wofür?": aufklappbarer Kasten */
.why{ background:var(--accent-soft); border-radius:var(--r-s); padding:var(--s-2) var(--s-3); }
.why summary{
  cursor:pointer; list-style:none; font-weight:700; color:var(--accent-text);
  font-size:var(--t-klein); min-height:var(--tap); display:flex; align-items:center; gap:var(--s-2);
}
.why summary::-webkit-details-marker{ display:none; }
.why p{ font-size:var(--t-klein); line-height:var(--t-klein-lh); padding-bottom:var(--s-2); }

/* ---------- Fortschritt (neun Schritte) ---------- */
.progress{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--s-1); }
.progress i{ height:.375rem; border-radius:999px; background:var(--field-border); opacity:.5; }
.progress i.done{ background:var(--accent); opacity:1; }

/* ---------- Auswahl: eine Antwort (rund) oder mehrere (eckig) ---------- */
.opts{ display:flex; flex-direction:column; gap:var(--s-2); }
.opts.two{ display:grid; grid-template-columns:1fr 1fr; }
.opt{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:var(--tap-gross); width:100%; padding:var(--s-3);
  border:0; border-radius:var(--r-m); cursor:pointer; text-align:left;
  background:var(--surface); color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--field-border);
  font:600 var(--t-text)/1.3 var(--font);
}
.opt .mark{
  width:1.5rem; height:1.5rem; flex:none; border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--field-border);
  display:grid; place-items:center; color:var(--on-accent); font-size:var(--t-mini); font-weight:700;
}
.opt.multi .mark{ border-radius:.4375rem; }
.opt[aria-checked="true"],.opt[aria-pressed="true"]{ background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent); }
.opt[aria-checked="true"] .mark,.opt[aria-pressed="true"] .mark{ background:var(--accent); box-shadow:none; }
.opt[aria-checked="true"] .mark::after,.opt[aria-pressed="true"] .mark::after{ content:"\2713"; }
.opt .tx{ display:flex; flex-direction:column; gap:2px; }
.opt small{ font-weight:400; font-size:var(--t-klein); line-height:var(--t-klein-lh); color:var(--muted); }
.opt.tall{ align-items:flex-start; }

/* ---------- Schieberegler mit fünf Stufen ---------- */
.slider{ display:flex; flex-direction:column; gap:var(--s-1); }
.slider .head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-2); }
.slider .head span{ font-weight:600; }
.slider .head b{ font-size:var(--t-klein); color:var(--accent-text); }
.slider .steps{ display:grid; grid-template-columns:repeat(5,1fr); height:2.75rem; position:relative; }
.slider .steps::before{
  content:""; position:absolute; left:10%; right:10%; top:50%; height:4px; margin-top:-2px;
  background:var(--field-border); border-radius:2px; opacity:.55;
}
.slider .steps button{ background:transparent; border:0; cursor:pointer; position:relative; padding:0; }
.slider .steps button::after{
  content:""; position:absolute; left:50%; top:50%; width:.625rem; height:.625rem;
  margin:-.3125rem 0 0 -.3125rem; border-radius:50%; background:var(--field-border);
}
.slider .steps button.on::after{ background:var(--accent); }
.slider .steps button.cur::after{
  width:1.75rem; height:1.75rem; margin:-.875rem 0 0 -.875rem;
  background:var(--surface); border:3px solid var(--accent);
}
.slider .scale{ display:flex; justify-content:space-between; font-size:var(--t-mini); color:var(--muted); }

/* ---------- Wochentage und Zeit je Tag ---------- */
.days{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--s-1); }
.day{
  min-height:var(--tap); border:0; border-radius:var(--r-s); cursor:pointer;
  background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--field-border);
  font:700 var(--t-klein)/1.2 var(--font);
}
.day[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); box-shadow:none; }
.daycard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:var(--s-3); display:flex; flex-direction:column; gap:var(--s-2);
}
.daycard .head{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-2); }
.time-step{ display:grid; grid-template-columns:var(--tap) 5.5rem var(--tap); gap:var(--s-1); align-items:center; }
.time-step button{
  min-height:var(--tap); border:0; border-radius:var(--r-s); cursor:pointer;
  background:var(--raised); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line);
  font:700 1.375rem/1 var(--font);
}
.time-step output{ text-align:center; font-weight:700; font-size:var(--t-titel); }

/* ---------- Chips (Zusammenfassung) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s-1); }
.chips span{
  font-size:var(--t-mini); padding:var(--s-1) var(--s-2); border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
}

/* ---------- Plan-Vorschläge und Woche (design-grundlagen.md, Abschnitt 4 und 7) ---------- */
.kick{ font-size:var(--t-mini); line-height:var(--t-mini-lh); font-weight:600; color:var(--muted); }
.forwho{ font-size:var(--t-klein); line-height:var(--t-klein-lh); }
/* Wochenstreifen: feste Tage gefüllt, optionaler Tag mit Rahmen und Schraffur, freie nur Linie */
.wstrip{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.wstrip span{
  height:1.875rem; border-radius:var(--r-s); display:grid; place-items:center;
  font-size:var(--t-mini); font-weight:700; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line);
}
.wstrip span.fix{ background:var(--accent); color:var(--on-accent); box-shadow:none; }
.wstrip span.opt-day{
  color:var(--accent-text); box-shadow:inset 0 0 0 2px var(--accent);
  background-image:repeating-linear-gradient(135deg,transparent 0 5px,var(--accent-soft) 5px 9px);
}
.plan-day{ display:grid; grid-template-columns:3.5rem 1fr; gap:var(--s-2); padding:var(--s-2) 0; border-top:1px solid var(--line); }
.plan-day .d b{ display:block; font-size:var(--t-text); }
.plan-day .d small{ font-size:var(--t-mini); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.blocks{ display:flex; flex-direction:column; gap:var(--s-1); }
.blk{ font-size:var(--t-klein); line-height:var(--t-klein-lh); }
.blk .min{ color:var(--muted); font-variant-numeric:tabular-nums; }
.blk small{ display:block; color:var(--muted); font-size:var(--t-mini); line-height:var(--t-mini-lh); }
.tag{
  display:inline-block; font-size:var(--t-mini); font-weight:700; padding:0 var(--s-1); margin-left:var(--s-1);
  border-radius:var(--r-s); color:var(--accent-text); box-shadow:inset 0 0 0 1.5px var(--accent);
}
.extab{ width:100%; margin-top:var(--s-1); border-collapse:collapse; font-size:var(--t-mini); line-height:var(--t-mini-lh); }
.extab th, .extab td{ padding:2px 0; text-align:left; vertical-align:top; }
.extab th{ font-weight:400; }
.extab td{ color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:var(--s-2); text-align:right; width:1%; }
.extab tr + tr th, .extab tr + tr td{ border-top:1px solid var(--line); }
.exlist{ list-style:none; margin:var(--s-1) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--s-1); }
.exlist li b{ font-weight:600; }
.exlist li small{ display:block; }
details.reasons summary{
  cursor:pointer; list-style:none; color:var(--accent-text); font-weight:700;
  font-size:var(--t-klein); min-height:var(--tap); display:flex; align-items:center;
}
details.reasons summary::-webkit-details-marker{ display:none; }
details.reasons ul{ margin:0; padding-left:var(--s-4); font-size:var(--t-mini); line-height:var(--t-mini-lh); color:var(--muted); display:flex; flex-direction:column; gap:var(--s-1); }
/* Handy: eine Karte, Pfeile und Punkte. Breit: alle drei nebeneinander */
.pager{ display:grid; grid-template-columns:var(--tap) 1fr var(--tap); align-items:center; }
.pager button{
  height:var(--tap); border:0; border-radius:50%; cursor:pointer; background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line); font:700 1.5rem/1 var(--font);
}
.pager button[disabled]{ opacity:.4; cursor:default; }
.dots{ display:flex; justify-content:center; align-items:center; gap:var(--s-2); }
.dots i{ width:.5rem; height:.5rem; border-radius:50%; background:var(--field-border); }
.dots i.on{ background:var(--accent); width:1.375rem; border-radius:.25rem; }
.deck{ display:grid; gap:var(--s-3); }
.deck .plan-card:not(.current){ display:none; }
@media (min-width:45rem){
  .pager{ display:none; }
  .deck{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
  .deck .plan-card:not(.current){ display:flex; }
}
/* Auf breiten Bildschirmen brauchen drei Karten mehr als die Lesebreite */
@media (min-width:45rem){ main:has(.deck){ max-width:75rem; } }

/* ---------- Training eintragen (Etappe 5a) ---------- */
.tpart{ display:flex; flex-direction:column; gap:var(--s-3); padding-top:var(--s-4); border-top:1px solid var(--line); }
.tpart h2 .min{ color:var(--muted); font-weight:400; font-size:var(--t-klein); font-variant-numeric:tabular-nums; }
.exentry{ display:flex; flex-direction:column; gap:var(--s-2); }
.exentry h3{ margin:0; }
/* Ein Satz: Nummer, dann die Felder der Messart nebeneinander */
.setrow{ display:grid; grid-template-columns:3.5rem 1fr; gap:var(--s-2); align-items:end; }
.setrow.f2{ grid-template-columns:3.5rem 1fr 1fr; }
.setrow.two{ grid-template-columns:repeat(auto-fit, minmax(8rem, 1fr)); }
.setno{ font-size:var(--t-klein); line-height:4.5rem; color:var(--muted); font-variant-numeric:tabular-nums; }
/* Satz mit Gewicht: Gewicht mit Plus/Minus, daneben die Wdh. bzw. Strecke */
.setrow.wt{ grid-template-columns:1.7fr 1fr; }
.stepper.klein{ grid-template-columns:3rem 1fr 3rem; gap:var(--s-1); }
.stepper.klein .num-field{ padding:0; }