/* ═══════════════════════════════════════════════════════════
   btbvoy — Dell 1996 Design Language
   Flache Farbblöcke, harte Kanten, kein Radius, keine
   weichen Schatten. Sans für UI, Serif für Fließtext.
   ═══════════════════════════════════════════════════════════ */

:root {
  --primary: #e91d2a;
  --on-primary: #ffffff;
  --canvas: #ffffff;
  --ink: #000000;
  --frame-ink: #000000;
  --yellow: #fcc20f;
  --purple: #6a26a4;
  --link: #0000ee;

  --tint-olive: #8e8a25;
  --tint-sage: #b3bd95;
  --tint-salmon: #d77a7a;
  --tint-peach: #e6915d;
  --tint-lime: #c0d4a7;
  --tint-sky: #9ab6c8;
  --tint-steel: #a5b8c0;
  --tint-periwinkle: #8c9ae0;

  /* Rating-Skala: grün → blau → orange → rot */
  --rate-easy: #c0d4a7;
  --rate-good: #8c9ae0;
  --rate-limit: #e6915d;
  --rate-fail: #e91d2a;

  --sans-display: "Arial Black", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: Helvetica, Arial, "Helvetica Neue", sans-serif;
  --serif: "Times New Roman", Times, serif;

  --xxs: 2px; --xs: 4px; --s: 6px; --sm: 8px; --m: 10px;
  --md: 12px; --lg: 16px; --xl: 20px; --xxl: 24px;
  --section-sm: 32px; --section: 40px;

  --frame: 8px;
  --hair: 1.5px;   /* Kantenstärke aller Kacheln, Tabellen und Eingaben */
  --gutter: 16px;  /* eine Fluchtlinie für Banner, Eyebrow, Kacheln, Footer */
}

* { box-sizing: border-box; }

/* Kein Gummiband-Scrollen, wenn der Inhalt auf den Bildschirm passt.
   Ohne das federt iOS auch auf Seiten, die gar nichts zu scrollen haben. */
html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  height: 100%;
}

body {
  margin: 0;
  background: var(--frame-ink);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
  padding: var(--frame);
  padding-top: max(var(--frame), env(safe-area-inset-top));
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* Der Rahmen ist die Marke: die Seite sitzt IN einem schwarzen Passepartout. */
#app {
  background: var(--canvas);
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) { body { --frame: 4px; } }
@media (max-width: 480px) { body { --frame: 2px; --gutter: 12px; } }

/* ─── Top-Banner ─── */
.banner {
  background: var(--frame-ink);
  color: var(--canvas);
  padding: var(--md) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--md);
}
.banner-mark {
  font-family: var(--sans-display);
  font-weight: 900;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -1.4px;
  white-space: nowrap;
}
.banner-mark sup {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: 3px;
}
.banner-spacer { flex: 1; }
.banner-clock {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  padding: var(--xs) var(--sm);
  white-space: nowrap;
}

/* ─── Sticker (harte Bevel-Kante, kein weicher Schatten) ─── */
.sticker {
  background: var(--yellow);
  color: var(--ink);
  border: var(--hair) solid var(--frame-ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  padding: var(--xs) var(--sm);
  text-transform: uppercase;
  display: inline-block;
  box-shadow: 2px 2px 0 var(--frame-ink);
}
.sticker-new { transform: rotate(-8deg); }

/* ─── Section-Eyebrow: fetter Farbblock mit Arial-Black-Titel ─── */
.eyebrow {
  font-family: var(--sans-display);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  padding: var(--xxl) var(--gutter);
  margin-bottom: var(--section-sm);
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: var(--hair) solid var(--frame-ink);
}
.eyebrow small {
  display: block;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  margin-top: var(--sm);
  line-height: 1.4;
}
@media (max-width: 480px) { .eyebrow { font-size: 26px; padding: var(--xl) var(--gutter); margin-bottom: var(--xxl); } }

.tint-olive { background: var(--tint-olive); }
.tint-sage { background: var(--tint-sage); }
.tint-salmon { background: var(--tint-salmon); }
.tint-peach { background: var(--tint-peach); }
.tint-lime { background: var(--tint-lime); }
.tint-sky { background: var(--tint-sky); }
.tint-steel { background: var(--tint-steel); }
.tint-periwinkle { background: var(--tint-periwinkle); }

/* ─── Ribbon-Card: weiße Titelleiste + getönter Body ─── */
.ribbon { border: var(--hair) solid var(--frame-ink); margin: 0 var(--gutter) var(--md); }
.ribbon-title {
  background: var(--canvas);
  border-bottom: var(--hair) solid var(--frame-ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  padding: var(--s) var(--md);
  display: flex;
  align-items: center;
  gap: var(--sm);
}
.ribbon-title .num {
  font-family: var(--sans-display);
  font-weight: 900;
  font-size: 14px;
  background: var(--frame-ink);
  color: var(--canvas);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  flex: none;
}
.ribbon-title .grow { flex: 1; }
.ribbon-body { padding: var(--md) var(--lg); }
@media (max-width: 480px) {
  .ribbon-body { padding: var(--m) var(--md); }
}

.ribbon.done .ribbon-title { opacity: .55; }
.ribbon.done .ribbon-body { display: none; }
.ribbon.collapsed .ribbon-body { display: none; }

/* ─── Roter CTA-Block: genau einer pro Seite ─── */
.cta-red {
  background: var(--primary);
  color: var(--on-primary);
  border: var(--hair) solid var(--frame-ink);
  padding: var(--lg);
  margin: 0 var(--gutter) var(--md);
}
.cta-red b { font-family: var(--sans); text-transform: uppercase; }

/* ─── Buttons ─── */
button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border: var(--hair) solid var(--frame-ink);
  border-radius: 0;
  padding: var(--s) var(--lg);
  cursor: pointer;
  background: var(--canvas);
  color: var(--ink);
  min-height: 44px;
}
button.primary { background: var(--frame-ink); color: var(--on-primary); }
button.red { background: var(--primary); color: var(--on-primary); }
button.ok { background: var(--yellow); }
button.wide { display: block; width: 100%; }
button:active { transform: translate(1px, 1px); }
button:disabled { opacity: .4; cursor: default; }

.btn-row { display: flex; gap: var(--sm); }
.btn-row > button { flex: 1; }

a, .link {
  color: var(--link);
  font-family: var(--serif);
  text-decoration: underline;
  cursor: pointer;
}

/* ─── Formularfelder ─── */
textarea {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 16px;   /* unter 16px zoomt iOS beim Fokus heran */
  line-height: 1.35;
  width: 100%;
  border: var(--hair) solid var(--frame-ink);
  border-radius: 0;
  padding: var(--s);
  background: var(--canvas);
  color: var(--ink);
  resize: vertical;
  -webkit-appearance: none;
}

.cta-red { white-space: pre-line; }

input[type="number"], input[type="text"], input[type="tel"], select {
  font-family: var(--serif);
  font-size: 16px; /* verhindert iOS-Zoom beim Fokus */
  border: var(--hair) solid var(--frame-ink);
  border-radius: 0;
  padding: var(--xs) var(--s);
  background: var(--canvas);
  color: var(--ink);
  width: 100%;
  -webkit-appearance: none;
}

/* ─── Stepper: großes Ziel für dicke Finger im Training ─── */
.stepper { display: flex; align-items: stretch; border: var(--hair) solid var(--frame-ink); background: var(--canvas); }
.stepper button {
  border: none;
  border-right: var(--hair) solid var(--frame-ink);
  font-family: var(--sans-display);
  font-weight: 900;
  font-size: 22px;
  width: 52px;
  flex: none;
  padding: 0;
  min-height: 52px;
}
.stepper button:last-child { border-right: none; border-left: var(--hair) solid var(--frame-ink); }
.stepper .val {
  flex: 1;
  display: grid;
  place-items: center;
  font-family: var(--sans-display);
  font-weight: 900;
  font-size: 24px;
  min-width: 0;
}
.stepper .val input {
  border: none;
  text-align: center;
  font-family: var(--sans-display);
  font-weight: 900;
  font-size: 24px;
  padding: 0;
  background: transparent;
}
.stepper .unit { font-family: var(--sans); font-size: 11px; font-weight: 700; }

.field-row { display: flex; gap: var(--sm); margin-bottom: var(--md); align-items: end; }
.field-row > div { flex: 1; min-width: 0; }
.field-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--xs);
}

/* ─── Empfehlungs-Zeile ─── */
.hint { border: var(--hair) solid var(--frame-ink); background: var(--canvas); padding: var(--sm) var(--md); margin-bottom: var(--md); }
.hint .move {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  padding: var(--xxs) var(--s);
  border: var(--hair) solid var(--frame-ink);
  margin-right: var(--s);
}
.move-up { background: var(--yellow); }
.move-down { background: var(--primary); color: var(--on-primary); }
.move-hold { background: var(--canvas); }
.hint p { margin: var(--s) 0 0; font-size: 13px; }
.hint .last { display: block; margin-top: var(--s); font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; }

/* ─── Rating: vier Buttons, ein Tap ─── */
.rating { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s); }
.rating button { min-height: 52px; font-size: 11px; padding: var(--s); }
.rating button[data-r="easy"]  { background: var(--rate-easy); }
.rating button[data-r="good"]  { background: var(--rate-good); }
.rating button[data-r="limit"] { background: var(--rate-limit); }
.rating button[data-r="fail"]  { background: var(--rate-fail); color: var(--on-primary); }

/* Farbpunkt: in Historie und abgeschlossenem Training steht nur er, ohne Text. */
.dot {
  display: inline-block;
  width: 14px; height: 14px;
  border: var(--hair) solid var(--frame-ink);
  border-radius: 9999px;
  vertical-align: -2px;
}
.dot-easy  { background: var(--rate-easy); }
.dot-good  { background: var(--rate-good); }
.dot-limit { background: var(--rate-limit); }
.dot-fail  { background: var(--rate-fail); }
.dot-none  { background: var(--canvas); }

/* ─── Timer ─── */
.timer-block { background: var(--tint-periwinkle); border: var(--hair) solid var(--frame-ink); padding: var(--lg); text-align: center; margin: 0 var(--gutter) var(--md); }
.timer-block.run { background: var(--tint-peach); }
.timer-block.over { background: var(--primary); color: var(--on-primary); }
.timer-clock { font-family: var(--sans-display); font-weight: 900; font-size: 64px; line-height: 1; }
.timer-label { font-family: var(--sans); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: var(--sm); }
@media (max-width: 480px) { .timer-clock { font-size: 52px; } }

/* ─── Tabellen (Historie) ─── */
table { width: 100%; border-collapse: collapse; font-family: var(--serif); font-size: 13px; table-layout: fixed; }
.set-table th:first-child, .set-table td:first-child { width: 44%; }
.unit-tag { display: block; font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; opacity: .6; margin-top: 1px; }
.sub-tag { display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; opacity: .6; margin-top: 1px; }
.set-cell { white-space: nowrap; }
th {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; text-align: left;
  border-bottom: var(--hair) solid var(--frame-ink); padding: var(--s) var(--md);
  background: var(--canvas);
}
td { padding: var(--s) var(--md); border-bottom: var(--hair) solid var(--frame-ink); }
tr:last-child td { border-bottom: none; }
.hist-table th:nth-child(2) { width: 24%; }
.hist-table th:last-child { width: 108px; }
.hist-table td { padding: var(--sm) var(--md); }
.hist-table td.act { padding: var(--s); }
.hist-table td.act button { width: 100%; min-height: 40px; padding: var(--xs) var(--s); }
.num-cell { font-family: var(--sans); font-weight: 700; white-space: nowrap; }

/* ─── Footer ─── */
/* Footer und Schriftzug sitzen als Block am unteren Ende der Seite. */
.footwrap { margin-top: auto; }

.footer {
  border-top: var(--hair) solid var(--frame-ink);
  padding: var(--lg) var(--gutter);
  font-size: 12px;
}

/* Der Schriftzug läuft randlos über die volle Breite und wird von der
   Unterkante angeschnitten: die viewBox zeigt nur die oberen zwei Drittel
   der Versalhöhe, die Werte sind an den Glyphen ausgemessen. */
.footmark { display: block; }
.footmark svg { display: block; width: 100%; height: auto; }
.footmark text { fill: var(--frame-ink); }
.footmark svg { font-weight: 900; }
.footer-nav { display: flex; flex-direction: column; gap: var(--sm); }
.footer-nav button { width: 100%; }
.footer-nav button.active { background: var(--frame-ink); color: var(--on-primary); }
.footer small { display: block; font-size: 11px; margin-top: var(--md); }

/* ─── Diverses ─── */
.pad { padding: 0 var(--gutter) var(--lg); }
.stack > * + * { margin-top: var(--md); }
.muted { opacity: .7; }
.center { text-align: center; }
.hidden { display: none !important; }
.seal {
  border-radius: 9999px;
  background: var(--primary); color: var(--canvas);
  width: 64px; height: 64px;
  display: grid; place-items: center; text-align: center;
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  text-transform: uppercase; line-height: 1.1; padding: 6px;
  flex: none;
}
.rule { height: var(--hair); background: var(--frame-ink); margin: var(--md) 0; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--md); padding: var(--sm) 0; }
.toggle-row .field-label { margin: 0; }
.switch { border: var(--hair) solid var(--frame-ink); font-family: var(--sans); font-size: 11px; font-weight: 700; padding: var(--s) var(--md); min-height: 44px; min-width: 74px; }
.switch.on { background: var(--yellow); }
.switch.off { background: var(--canvas); opacity: .6; }