/* ══════════════════════════════════════════════════════════
   100 LIEGESTÜTZE · by Geri
   style.css – Gemeinsames Design-System
   Farbpalette: Helles Flieder / Lavendel (aus dem Trainingsplan)
   Version: 1.0 · 2026-05-25
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   CSS-VARIABLEN – Flieder/Lavendel Palette
   Basiert auf den Dokumentfarben #B39DDB,
   #7358A9, #5E35B1, #EDE7F6
══════════════════════════════════════════ */
:root {
  /* Hintergründe */
  --bg:            #0a0514;
  --bg-card:       rgba(22, 8, 48, 0.92);
  --bg-card-hover: rgba(35, 15, 70, 0.95);

  /* Flieder-Akzente */
  --flieder:       #b39ddb;   /* helles Flieder – Hauptakzent */
  --flieder-bright:#ce93d8;   /* noch heller */
  --flieder-deep:  #7358a9;   /* satt */
  --flieder-glow:  rgba(179, 157, 219, 0.28);
  --flieder-dim:   rgba(179, 157, 219, 0.12);
  --flieder-border:rgba(179, 157, 219, 0.22);

  /* Text */
  --text:          #ede7f6;   /* sehr helles Lavendel */
  --text-dim:      #9575cd;   /* gedimmtes Lavendel */
  --text-muted:    #6a4fa0;   /* sehr gedimmt */

  /* Raster-Hintergrund */
  --grid-line:     rgba(179, 157, 219, 0.04);

  /* Rang-Farben (Umbenennung 2026-07-31: ROHLING entfällt, PUDDING
     rückt auf den untersten Rang, der bisherige PUDDING-Rang heißt
     jetzt LEDER – bekommt das freigewordene Terrakotta von ROHLING,
     da die Farbe laut Geri gut zum Leder-Ton passt und so kein neuer
     Farbwert getestet werden muss). */
  --rang-pudding:  #ffe082;
  --rang-leder:    #ff7043;   /* Terrakotta – vormals Rohling, jetzt Leder */
  --rang-holz:     #bcaaa4;
  --rang-stein:    #90a4ae;
  /* 2026-08-07: KUPFER/EISEN neu (Trainingsplan-Neukonzeption, siehe
     _projekt/vorschlag-trainingsplan-komplett.md) – auf Geris Wunsch
     NICHT frei gewählt, sondern per Median der helleren Kernpixel aus
     den echten Icons kupfer-icon.png/eisen-icon.png ermittelt (Python,
     Alpha==255, Helligkeitsband 120–220 = beleuchtete Fläche statt
     Glanzlicht/Schatten), auf dieselbe Leuchtdichte-Bandbreite wie die
     bestehenden Rang-Farben kalibriert (139–224). */
  --rang-kupfer:   #fe8e3a;
  --rang-eisen:    #87888c;
  --rang-stahl:    #cfd8dc;
  --rang-diamant:  #80deea;
  /* 2026-08-07: LEGENDE neu (Diamant wird echter Trainingsrang, Legende
     ist jetzt der Titel NACH dem Finale, siehe memory.md). Ursprünglich
     frei gewählt (#ffd54f), dann auf Geris Wunsch ("richte dich immer
     nach den echten Icon-Farben") ersetzt durch den Median der
     beleuchteten Pixel aus Geris eigenem legende-icon.png (Wappen mit
     Krone/Stern/Lorbeerkranz) – exakt dieselbe Methodik wie bei Kupfer/
     Eisen (Alpha==255, Helligkeitsband 120–220). Leuchtdichte 164, im
     selben 139–224-Band wie alle anderen Rang-Farben. */
  --rang-legende:  #d796e1;

  /* Timer-Phasen */
  --timer-ok:      #b39ddb;
  --timer-warn:    #ffb74d;
  --timer-crit:    #ef5350;

  /* Touch-Targets – iOS-Mindestgröße 44pt */
  --touch-min:     52px;
}

/* ══════════════════════════════════════════
   RESET & BASIS
══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Absicherung für body.seite-pruefung weiter unten: deren Hintergrund
     ist zu 8% durchscheinend (rgba(...,0.92)), damit soll dahinter
     dasselbe --bg durchschimmern wie überall sonst auf der Seite, nicht
     das Browser-Standardweiß. */
  background: var(--bg);
}

body {
  font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════
   HINTERGRUND: ANIMIERTES GITTER
══════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: gitterScroll 30s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes gitterScroll {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }
}

/* Scan-Linien */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px,
    transparent 1px, transparent 3px
  );
  z-index: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   HAUPT-WRAPPER
══════════════════════════════════════════ */
/* max-width: 1500px (vorher 960px → 1100px → 1300px → 1500px).
   Test am 2026-07-26 mit 2000px (bewusst unrealistisch hoch) hat
   am iPad KEINE Änderung gebracht – der Umbruch bei den 8-Sätze-
   Tagen (Tag 26/27/30/31, siehe 100.json) liegt damit bestätigt an
   der tatsächlichen Bildschirmbreite des iPads selbst, nicht an
   max-width oder Browser-Cache (Cache wurde vor dem Test geleert).
   max-width ist nur eine Obergrenze – mehr als die reale Gerätebreite
   bringt sie nie. Deshalb zurück auf den zuletzt sinnvollen Wert
   1500px; für einen echten Fix am iPad müssten stattdessen die
   Satz-Kästchen selbst (an 8-Sätze-Tagen) kleiner werden, siehe
   .satz-zelle. Betrifft auch die Tage-Übersicht (index.php): dort
   wird das 3-spaltige Kartenraster ab 1024px lediglich etwas
   breiter, keine Layout-Änderung. */
.wrapper {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Nur für die Übersichtsseite (index.php), eigene Klasse zusätzlich zu
   .wrapper – NICHT die Regel oben verändert, damit 100.php (Trainingstag-
   Seite, nutzt dieselbe .wrapper-Klasse) garantiert unverändert bleibt
   (Wunsch 2026-07-27: 100.php nicht mehr anfassen). Früher (vor den
   Anpassungen für die Sätze-Kästchen) lag max-width bei 960px (siehe
   Kommentar oben) – das gab am iPad einen angenehmen Rand von rund 2cm.
   Die Übersichtsseite braucht die seither eingeführte größere Breite
   nicht (dort geht es nur um das Karten-Raster, nicht um breite
   Sätze-Reihen), deshalb hier gezielt auf den alten Wert zurück. */
.wrapper-uebersicht {
  max-width: 960px;
}

/* ══════════════════════════════════════════
   HEADER / SEITENTITEL
══════════════════════════════════════════ */
.page-header {
  text-align: center;
  padding: 10px 0 4px;
}

.page-title {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--flieder);
  text-shadow:
    0 0 8px var(--flieder),
    0 0 30px var(--flieder-glow),
    0 0 60px rgba(179,157,219,0.2);
  animation: titelGlow 4s ease-in-out infinite;
  line-height: 1.1;
}

/* Wunsch Geri 2026-08-09: NUR am iPhone soll der Titel gezielt nach
   "100 TAGE –" umbrechen ("100 TAGE" / "100 LIEGESTÜTZE"), PC/iPad
   wurden gerade erst getestet und sollen unangetastet bleiben ("dort
   passt alles"). Ein unsichtbarer <br> im HTML (index.php) erzwingt
   den Umbruch nur, wenn diese Regel ihn per display sichtbar macht -
   per Default (hier, ohne Media Query) bleibt er ausgeblendet, damit
   PC/iPad exakt wie bisher umbrechen (natürlicher Zeilenumbruch,
   keine Verhaltensänderung). Schwelle 767px bewusst identisch zur
   bestehenden iPad-Grenze (min-width:768px) im Rest der Datei. */
.titel-umbruch-iphone {
  display: none;
}

@media (max-width: 767px) {
  .titel-umbruch-iphone {
    display: inline;
  }
}

@keyframes titelGlow {
  0%,100% { text-shadow: 0 0 8px var(--flieder), 0 0 30px var(--flieder-glow); }
  50%      { text-shadow: 0 0 14px var(--flieder), 0 0 50px var(--flieder-glow), 0 0 80px rgba(179,157,219,0.25); }
}

.page-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Dezenter Credit-Link zu webdesign.schoscho.at (Wunsch 2026-07-30) –
   bewusst kleiner/blasser als .page-subtitle, damit klar bleibt: das
   ist ein Nebensatz, keine zweite Überschrift. Link hebt sich erst bei
   Hover in der Flieder-Akzentfarbe hervor. */
.page-credit {
  text-align: center;
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-top: 6px;
  opacity: 0.75;
}

.page-credit a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: color 0.2s, border-color 0.2s;
}

.page-credit a:hover,
.page-credit a:focus-visible {
  color: var(--flieder);
  border-bottom-color: var(--flieder);
}

/* ══════════════════════════════════════════
   HERO-MOTIVATIONSBILD (Übersichtsseite)
══════════════════════════════════════════ */
.hero-bild-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 4px auto 0;
  border: 1px solid var(--flieder-border);
  border-radius: 8px;
  background: var(--flieder-dim);
  overflow: hidden;
  box-shadow: 0 0 30px var(--flieder-glow), 0 8px 30px rgba(0,0,0,0.4);
}

/* Eckmarkierungen im Flieder-Ton, passend zum restlichen Cyberpunk-Stil */
.hero-bild-wrap::before,
.hero-bild-wrap::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--flieder-bright);
  border-style: solid;
  z-index: 2;
}
.hero-bild-wrap::before { top: -1px;    left: -1px;  border-width: 2px 0 0 2px; }
.hero-bild-wrap::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.hero-bild-wrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
}

/* ══════════════════════════════════════════
   RANG-PFAD (Übersichts-Header)
══════════════════════════════════════════ */
.rang-pfad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 16px;
  border: 1px solid var(--flieder-border);
  border-radius: 40px;
  background: var(--flieder-dim);
}

.rang-pfad .rang-item { font-weight: 700; }
.rang-pfad .pfeil     { opacity: 0.4; }

.rang-pfad .rang-item.pudding  { color: var(--rang-pudding); }
.rang-pfad .rang-item.leder    { color: var(--rang-leder); }
.rang-pfad .rang-item.holz     { color: var(--rang-holz); }
.rang-pfad .rang-item.stein    { color: var(--rang-stein); }
/* 2026-08-07: KUPFER/EISEN neu, siehe --rang-kupfer/--rang-eisen oben
   (Trainingsplan-Neukonzeption, noch nicht live verwendet). */
.rang-pfad .rang-item.kupfer   { color: var(--rang-kupfer); }
.rang-pfad .rang-item.eisen    { color: var(--rang-eisen); }
.rang-pfad .rang-item.stahl    { color: var(--rang-stahl); }
.rang-pfad .rang-item.diamant  { color: var(--rang-diamant); }
.rang-pfad .rang-item.legende  { color: var(--rang-legende); }

/* Rang-Icons (2026-08-05): ersetzen Emoji an großen/prominenten Stellen
   durch die von ChatGPT erzeugten, glänzenden 3D-Icons (Original in
   images/, verkleinert nach images/rang-icons/ via
   _projekt/generator/generate_rang_icons.py). Kleine/inline Stellen
   (Karten-Badges, detail-tagnr, Sprüche) bleiben bewusst bei Emoji. */
.rang-icon {
  display: inline-block;
  vertical-align: -0.3em;
  object-fit: contain;
}
.rang-icon--pfad  { width: 22px; height: 22px; }
.rang-icon--badge { width: 34px; height: 34px; }
/* Abschluss-Screen (Wunsch 2026-08-07): großes Icon statt Emoji,
   gleiche responsive Größe wie vorher font-size auf .abschluss-emoji
   (clamp 3.5rem–7rem), jetzt als width/height auf dem <img>.
   2026-08-22 (Wunsch Geri): nochmal verdoppelt (3.5-7rem -> 7-14rem) -
   Quell-PNGs in images/rang-icons/ wurden dafür in
   generate_rang_icons.py von 240px auf 480px hochgesetzt und neu
   gerendert, damit die größere Anzeige auf Retina-Displays nicht
   unscharf wird. Betrifft nur dieses große Icon (Muskel/Trophäe/
   Legende), NICHT die kleinen Badge-Icons (.rang-icon--badge, 34px) -
   die stecken inline in schmalen Text-Pillen (z. B. "Finale · Der
   Versuch"-Badge, "RANG · Tag X"-Pille) und hätten bei Verdopplung
   Platzprobleme bekommen, v. a. am iPhone. */
.rang-icon--abschluss {
  width: clamp(7rem, 24vw, 14rem);
  height: clamp(7rem, 24vw, 14rem);
}

/* ══════════════════════════════════════════
   TRENNLINIE
══════════════════════════════════════════ */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--flieder-deep),
    var(--flieder),
    var(--flieder-deep),
    transparent
  );
  opacity: 0.5;
}

/* ══════════════════════════════════════════
   TAG-KARTEN (Übersichtsseite)
══════════════════════════════════════════ */
.tage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.tag-karte {
  display: block;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--flieder-border);
  border-radius: 12px;
  padding: 18px 20px;
  transition: all 0.22s ease;
  cursor: pointer;
  min-height: var(--touch-min);
  position: relative;
  overflow: hidden;
}

.tag-karte::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--flieder-dim), transparent);
  opacity: 0;
  transition: opacity 0.22s;
}

.tag-karte:hover,
.tag-karte:active {
  border-color: var(--flieder);
  box-shadow: 0 0 24px var(--flieder-glow), 0 4px 20px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

.tag-karte:hover::before,
.tag-karte:active::before { opacity: 1; }

/* Karte: abgeschlossen ✓ */
.tag-karte.erledigt {
  border-color: rgba(179,157,219,0.15);
  opacity: 0.5;
}

.tag-karte.erledigt::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 13px;
  font-size: 1rem;
  color: var(--flieder);
  opacity: 0.9;
}

/* Karte: nächster empfohlener Tag
   Der Hinweistext ("DU BIST HIER" / "ZULETZT GEÖFFNET") lag bisher als
   freischwebendes Label bei top:10px/right:12px genau dort, wo auch der
   Rang-Badge (.rang-badge, Teil von .karte-kopf im normalen Textfluss)
   sitzt – beide überlappten sich (Screenshot Geri 2026-07-27). Fix: statt
   eines zweiten Elements an derselben Stelle wird daraus ein durchgehendes
   Banner ÜBER der ganzen Kopfzeile (top:0, volle Breite). padding-top der
   Karte wird bei aktiver Klasse entsprechend vergrößert, damit Tag-Nr./
   Rang-Badge/restlicher Inhalt darunter Platz haben und nichts abgeschnitten
   wird (Karte hat overflow:hidden – ein negatives top würde das Banner
   also nicht "über" die Karte hinausragen lassen, sondern verschlucken). */
.tag-karte.naechster {
  border-color: var(--flieder);
  box-shadow: 0 0 28px var(--flieder-glow), 0 0 60px rgba(179,157,219,0.12);
  animation: naechsterPuls 2.5s ease-in-out infinite;
  padding-top: 40px;
}

.tag-karte.naechster::after {
  content: '▶ DU BIST HIER';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 6px 12px;
  text-align: center;
  background: var(--flieder-dim);
  border-bottom: 1px solid var(--flieder-border);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--flieder);
}

@keyframes naechsterPuls {
  0%, 100% { box-shadow: 0 0 18px var(--flieder-glow); }
  50%       { box-shadow: 0 0 40px var(--flieder-glow), 0 0 80px rgba(179,157,219,0.18); }
}

/* Karte: zuletzt geöffnet (Fallback wenn noch kein Fortschritt) –
   gleiches Banner-Prinzip wie .naechster oben. */
.tag-karte.zuletzt {
  border-color: var(--flieder);
  box-shadow: 0 0 18px var(--flieder-glow);
  padding-top: 40px;
}

.tag-karte.zuletzt::after {
  content: 'ZULETZT GEÖFFNET';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 6px 12px;
  text-align: center;
  background: var(--flieder-dim);
  border-bottom: 1px solid var(--flieder-border);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--flieder);
  opacity: 0.85;
}

/* Karte: Testtag */
.tag-karte.pruefung {
  border-color: rgba(255,183,77,0.4);
  background: rgba(30,15,5,0.92);
}

.tag-karte.pruefung:hover {
  border-color: #ffb74d;
  box-shadow: 0 0 24px rgba(255,183,77,0.25);
}

/* Karte: Finale (Tag 50 – Der Versuch) – volle Breite und
   Diamant-Farbe, damit sie sich sichtbar von allen anderen
   Karten abhebt: das ist schließlich der Höhepunkt. */
/* 2026-08-07: Cyan (Diamant) auf Gold (Legende) umgestellt – seit
   Diamant ein echter Trainingsrang ist, vergibt das Finale jetzt
   LEGENDE, siehe --rang-legende oben. */
/* 2026-08-07 (Fortsetzung 19): Farbe von Gold (#daa214) auf Flieder
   (#d796e1) geändert – Geri hat legende-icon.png neu gespeichert,
   jetzt in Flieder-Tönen, Farbe erneut aus echten Icon-Pixeln
   abgeleitet. */
.tag-karte.finale {
  grid-column: 1 / -1;
  border-color: rgba(215,150,225,0.45);
  background: rgba(24,18,30,0.92);
}

.tag-karte.finale:hover {
  border-color: var(--rang-legende);
  box-shadow: 0 0 30px rgba(215,150,225,0.3);
}

/* Karten-Inhalt */
.karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.karte-tag-nr {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rang-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
}

.rang-badge.pudding { color: var(--rang-pudding); border-color: rgba(255,224,130,0.3); background: rgba(255,224,130,0.07); }
.rang-badge.leder   { color: var(--rang-leder);   border-color: rgba(255,112,67,0.3);  background: rgba(255,112,67,0.07);  }
.rang-badge.holz    { color: var(--rang-holz);    border-color: rgba(188,170,164,0.3); background: rgba(188,170,164,0.07); }
.rang-badge.stein   { color: var(--rang-stein);   border-color: rgba(144,164,174,0.3); background: rgba(144,164,174,0.07); }
/* 2026-08-07: KUPFER/EISEN neu, RGB-Werte identisch zu --rang-kupfer/
   --rang-eisen oben (Trainingsplan-Neukonzeption, noch nicht live verwendet). */
.rang-badge.kupfer  { color: var(--rang-kupfer);  border-color: rgba(254,142,58,0.3);  background: rgba(254,142,58,0.07);  }
.rang-badge.eisen   { color: var(--rang-eisen);   border-color: rgba(135,136,140,0.3); background: rgba(135,136,140,0.07); }
.rang-badge.stahl   { color: var(--rang-stahl);   border-color: rgba(207,216,220,0.3); background: rgba(207,216,220,0.07); }
.rang-badge.diamant { color: var(--rang-diamant); border-color: rgba(128,222,234,0.3); background: rgba(128,222,234,0.07); }
.rang-badge.legende { color: var(--rang-legende); border-color: rgba(215,150,225,0.3);  background: rgba(215,150,225,0.07); }

.karte-woche {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--flieder);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.karte-training {
  font-size: 0.78rem;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.karte-pause {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* Prüfungs-Karte Sonderstil */
.pruefung-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffb74d;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pruefung-ziel {
  font-size: 1rem;
  font-weight: 800;
  color: #ffb74d;
}

/* Finale-Karte auf der Übersicht: gleiche Struktur wie
   Prüfungs-Karte, aber in Legende-Gold statt Orange (2026-08-07:
   vorher Diamant-Cyan, aber seit Diamant ein echter Trainingsrang ist,
   vergibt das Finale jetzt LEGENDE – Farbe zeigt konsequent, was man
   beim Bestehen bekommt, nicht mehr den Rang während des Trainings). */
.finale-label { color: var(--rang-legende); }
.finale-ziel  { color: var(--rang-legende); }

/* ══════════════════════════════════════════
   WOCHEN-TRENNZEILE
══════════════════════════════════════════ */
.wochen-trenner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.wochen-trenner-linie {
  flex: 1;
  height: 1px;
  background: var(--flieder-border);
}

.wochen-trenner-text {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--flieder-deep);
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   ZURÜCK-LINK – gleicher Pill-Button-Stil wie
   .footer-link ("Noch mehr Online-Tools")
══════════════════════════════════════════ */
/* Schriftgröße auf 1.56rem angehoben – genau wie .anweisung ("Zwischen
   jedem Satz: ... Pause"), Wunsch 2026-07-26: am Handy/iPad war der
   Button kaum lesbar. Das seinerzeitige margin-top (Button war am iPad
   durch den alten 100dvh/overflow:hidden-Trick oben abgeschnitten) ist
   am 2026-07-26 wieder entfernt worden, weil die Seite seither normal
   scrollt und der Button dadurch nie mehr abgeschnitten wird – Position
   wieder wie ursprünglich, nur die Schrift bleibt größer. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.56rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--flieder);
  background: var(--flieder-dim);
  border: 1px solid var(--flieder-border);
  border-radius: 40px;
  padding: 12px 26px;
  text-decoration: none;
  opacity: 0.95;
  transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s;
  min-height: var(--touch-min);
}

.back-link:hover,
.back-link:focus-visible {
  opacity: 1;
  border-color: var(--flieder);
  box-shadow: 0 0 16px var(--flieder-glow);
}

.back-link::before { content: '←'; }

/* ══════════════════════════════════════════
   TRAININGSTAG-SEITE – DETAIL-KOPF
══════════════════════════════════════════ */
.detail-kopf {
  text-align: center;
}

/* "Woche X · Montag": beide Teile in einer Zeile statt gestapelt
   (Wunsch 2026-07-26). Trenner "·" dazwischen – gleicher Mittelpunkt,
   der als Trenner im gesamten restlichen Design dieser Seite
   verwendet wird (Seitentitel, Sätze-Label, Trainingstag-Zeile usw.),
   damit hier kein optischer Bruch entsteht. */
.detail-kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em;
  margin-bottom: 6px;
}

/* "Woche X" – bewusst im selben Stil wie .detail-titel (Wochentag)
   gehalten: gleiche Größe/Farbe, damit beide Kopfzeilen ohne Brille
   gut lesbar sind (Wunsch aus dem iPad-Training, 2026-07-26). */
.detail-woche {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--flieder);
  text-shadow: 0 0 20px var(--flieder-glow);
}

.detail-kopf-trenner {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--text-muted);
  opacity: 0.6;
}

.detail-titel {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--flieder);
  text-shadow: 0 0 20px var(--flieder-glow);
}

/* Doppelt so groß wie ursprünglich (0.68rem → 1.36rem) – ohne Brille
   beim Training schwer lesbar, siehe Feedback 2026-07-26. */
.detail-tagnr {
  font-size: 1.36rem;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Fortschritts-Leiste (Wunsch Geri 2026-08-07, 2. Anlauf): ersetzt das
   zuerst umgesetzte 10x10-Punkteraster (siehe Git-/memory.md-Historie
   "Fortsetzung 12/14") – 100 Punkte à 16-22px brauchten zwangsläufig
   10 Zeilen übereinander und schoben den kompletten Trainingsinhalt
   viel zu weit nach unten (Screenshot-Feedback). Eine dicke, animierte
   Leiste statt dessen: braucht nur eine Zeile, unabhängig von der
   Bildschirmbreite, und füllt sich beim Laden sichtbar auf – die
   Tages-Bezugnahme ("Tag X von 100") bleibt über die Beschriftung
   erhalten statt über einzelne Punkte. */
.fortschritt-balken-wrap {
  margin: 10px 0;
}

.fortschritt-balken-label {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.fortschritt-balken-spur {
  width: 100%;
  height: 18px;
  border-radius: 999px;
  background: var(--flieder-dim);
  border: 1px solid var(--flieder-border);
  overflow: hidden;
}

/* Füllung: eigene CSS-Variable --ziel-breite (per Inline-Style aus PHP
   gesetzt, siehe 100.php) + @keyframes statt transition, damit die
   Animation automatisch beim Laden der Seite abläuft (transitions
   brauchen einen ausgelösten Zustandswechsel, keyframe-Animationen
   laufen von selbst los – kein JavaScript nötig). */
.fortschritt-balken-fuellung {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--flieder-deep), var(--flieder), var(--flieder-bright));
  box-shadow: 0 0 12px var(--flieder-glow);
  width: 0;
  animation: balkenFuellen 1.1s ease-out 0.15s forwards;
}

@keyframes balkenFuellen {
  from { width: 0; }
  to   { width: var(--ziel-breite); }
}

/* ══════════════════════════════════════════
   SÄTZE-TABELLE
══════════════════════════════════════════ */
.saetze-wrap {
  background: var(--bg-card);
  border: 1px solid var(--flieder-border);
  border-radius: 12px;
  padding: 16px 20px;
}

/* Größe/Buchstabenabstand wie "SATZ 1" in den kleinen Kästchen
   (.satz-nr), Wunsch 2026-07-27 – Groß-/Kleinschreibung bleibt wie
   bisher (hier: Versalien, wie schon vorher). */
.saetze-label {
  font-size: 1.16rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-align: center;
}

.saetze-tabelle {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Alle Satz-Kästchen (aktiv wie inaktiv) sind bewusst gleich groß –
   diese "doppelte" Größe war ursprünglich nur für den aktiven Satz
   gedacht, wurde dann aber ganz auf alle Kästchen übertragen: alle
   Zahlen sollen ohne Brille lesbar sein, nicht nur der gerade
   laufende Satz (Wunsch 2026-07-26). Aktiv/inaktiv unterscheidet
   sich dadurch NUR noch über Farbe/Rahmen/Glühen, nicht mehr über
   die Größe – dadurch bleiben alle Kästchen zuverlässig quadratisch
   und es gibt keinen Größensprung mehr beim Satzwechsel. */
.satz-zelle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--flieder-dim);
  border: 1px solid var(--flieder-border);
  border-radius: 8px;
  padding: 20px 28px;
  min-width: 120px;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Nur für die 4 Tage mit 8 Sätzen (Tag 26/27/30/31, siehe 100.json):
   Geris Idee vom 2026-07-26 – statt die Kästchen zu verkleinern, damit
   alle 8 in eine Reihe passen, werden sie unterhalb der PC-Schwelle
   (unter 1400px, siehe .saetze-tabelle--kompakt-Layout weiter unten bei
   den responsiven Breakpoints) einfach symmetrisch auf 2 Zeilen zu je 4
   aufgeteilt – oben 4, unten 4. Dadurch bleiben die Kästchen in voller,
   normaler Größe (keine Verkleinerung nötig) und sind am iPad trotzdem
   gut lesbar. Am PC (ab 1400px) bleibt alles wie gehabt in einer Reihe
   mit 8 Kästchen, weil dort ohnehin genug Platz vorhanden ist. Die 23
   Tage mit 5 Sätzen sind unverändert immer in einer Reihe (eigene
   Klasse, kein Grid-Layout). */

/* Der aktuelle Satz – Gold statt Flieder, dazu das pulsierende
   Glühen. Wird bereits beim Start der Pause gesetzt (nicht erst wenn
   sie abgelaufen ist), siehe saetzeAktualisieren() weiter unten. */
.satz-zelle.aktiv-satz {
  border-color: #ffd93d;
  background: rgba(255,217,61,0.16);
  box-shadow: 0 0 22px rgba(255,217,61,0.4), 0 4px 18px rgba(0,0,0,0.35);
  animation: satzAktivPuls 1.7s ease-in-out infinite;
}

.satz-zelle.aktiv-satz .satz-nr {
  color: #ffd93d;
  opacity: 1;
  font-weight: 700;
}

.satz-zelle.aktiv-satz .satz-wdh {
  color: #ffd93d;
  text-shadow: 0 0 14px rgba(255,217,61,0.5);
}

@keyframes satzAktivPuls {
  0%, 100% { box-shadow: 0 0 22px rgba(255,217,61,0.4), 0 4px 18px rgba(0,0,0,0.35); }
  50%      { box-shadow: 0 0 34px rgba(255,217,61,0.6), 0 4px 20px rgba(0,0,0,0.4); }
}

/* Kräftigeres Glühen nur fürs große Schild (Feedback 2026-07-27) –
   das kleine Kästchen-Glühen oben wirkte bei 360px zu schwach im
   Vergleich zum Timer-Kreis. Werte proportional zur Größenzunahme
   (Kästchen → Schild ≈ 3x) hochskaliert, plus zweite weichere Schicht
   wie beim Kreis (siehe .timer-btn/btnPuls), für ähnliche Leuchtkraft. */
.satz-zelle--gross.aktiv-satz {
  box-shadow:
    0 0 50px rgba(255,217,61,0.45),
    0 0 90px rgba(255,217,61,0.15),
    0 4px 24px rgba(0,0,0,0.35);
  animation: satzAktivPulsGross 1.7s ease-in-out infinite;
}

@keyframes satzAktivPulsGross {
  0%, 100% {
    box-shadow:
      0 0 50px rgba(255,217,61,0.45),
      0 0 90px rgba(255,217,61,0.15),
      0 4px 24px rgba(0,0,0,0.35);
  }
  50% {
    box-shadow:
      0 0 75px rgba(255,217,61,0.65),
      0 0 130px rgba(255,217,61,0.22),
      0 4px 28px rgba(0,0,0,0.4);
  }
}

.satz-zelle.erledigt {
  border-color: rgba(179,157,219,0.08);
  opacity: 0.45;
}

.satz-zelle.erledigt .satz-wdh::after {
  content: ' ✓';
  font-size: 0.7rem;
  color: var(--flieder);
}

/* Schriftgröße doppelt so groß wie ursprünglich (0.58rem → 1.16rem) –
   gilt jetzt für alle Sätze gleichermaßen, siehe Kommentar bei
   .satz-zelle oben. Nur die Farbe animiert noch (Wechsel aktiv/
   inaktiv), die Größe ändert sich nicht mehr zwischen den Zuständen. */
.satz-nr {
  font-size: 1.16rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.25s ease;
}

/* Schriftgröße doppelt so groß wie ursprünglich (1.4rem → 2.8rem). */
.satz-wdh {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--flieder);
  line-height: 1;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* Größe/Buchstabenabstand wie "SATZ 1" in den kleinen Kästchen
   (.satz-nr), Wunsch 2026-07-27 – Groß-/Kleinschreibung bleibt wie
   bisher (hier: normale Schreibweise, kein text-transform). */
.saetze-gesamt {
  text-align: center;
  margin-top: 12px;
  font-size: 1.16rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
}

/* ══════════════════════════════════════════
   ANWEISUNG
══════════════════════════════════════════ */
/* Doppelt so groß wie ursprünglich (0.78rem → 1.56rem), siehe
   Feedback 2026-07-26 – ohne Brille beim Training kaum lesbar. */
.anweisung {
  text-align: center;
  font-size: 1.56rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding: 0 8px;
}

/* ══════════════════════════════════════════
   TIMER-BEREICH
══════════════════════════════════════════ */
.timer-bereich {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 16px;
  padding: 10px 0;
}

/* Timer-Reihe: großes Satz-Schild links, Timer-Kreis-Bereich rechts
   (Wunsch 2026-07-27, Geris Grafik-Entwurf). flex-wrap sorgt dafür,
   dass auf sehr schmalen Screens (Handy) beides einfach untereinander
   fällt statt sich zu quetschen. */
.timer-reihe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

/* Ersetzt die Rolle, die vorher .timer-bereich direkt für Button/
   Countdown/LOS!/Fertig-Button gespielt hat (gleicher gap wie vorher). */
.timer-counter-spalte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Satz-Fortschrittsanzeige */
/* Doppelt so groß wie ursprünglich (0.72rem → 1.44rem), siehe
   Feedback 2026-07-26 – ohne Brille beim Training kaum lesbar. */
/* 2026-08-09 (Wunsch Geri, beim echten Training aufgefallen): sobald
   der letzte Satz beginnt, wechselt der Text hier per JS auf den
   rang-spezifischen Anfeuerungs-Spruch (100.php, "rangRufe") - der ist
   oft länger als die normale Fortschrittsanzeige und brach am iPhone
   in eine zweite Zeile um. Ohne feste Höhe wuchs die Box dadurch um
   genau eine Zeile, und der runde Button im .timer-bereich darunter
   sprang sichtbar nach unten. line-height fest gesetzt (statt dem
   Browser-Default zu vertrauen) + min-height für zwei Zeilen reserviert
   und der Inhalt vertikal zentriert - dadurch bleibt die Box IMMER
   gleich hoch, ob der Text 1 oder 2 Zeilen braucht, kein Sprung mehr
   (gilt für alle Bildschirmgrößen, nicht nur iPhone - bei 1-zeiligem
   Text auf PC/iPad bleibt der Text weiterhin exakt mittig, nur der
   Freiraum darunter/darüber verteilt sich gleichmäßig statt 0px zu
   sein). */
.satz-fortschritt {
  font-size: 1.44rem;
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

/* Größe von Kreis UND großem Satz-Schild an EINER Stelle definiert
   (hier + an jedem responsiven Breakpoint weiter unten dieselbe
   Kombination aus .timer-btn und .satz-zelle--gross) – so bleiben
   beide garantiert immer exakt gleich groß, ohne zwei Stellen
   parallel pflegen zu müssen (Wunsch 2026-07-27). */
.timer-btn,
.satz-zelle--gross,
.fertig-btn-kreis {
  width: clamp(180px, 38vw, 260px);
  height: clamp(180px, 38vw, 260px);
}

/* Runder "TRAINING/PRÜFUNG/VERSUCH GESCHAFFT"-Button (2026-07-30,
   Wortlaut seit 2026-07-31 "GESCHAFFT" statt "ABSCHLIESSEN" – klingt
   freundlicher und ist mit 9 statt 12 Zeichen kürzer): erbt Form/Glow/
   Puls komplett von .timer-btn (siehe Klassen-Kombination im HTML),
   hier nur der zweizeilige Text mit derselben fetten Zahlen-Schrift wie
   .timer-btn-zahl. Seit der Umbenennung ist "GESCHAFFT" (9 Zeichen) das
   längste vorkommende Wort überhaupt (länger als "TRAINING"/8,
   "PRÜFUNG"/"VERSUCH"/je 7) – oben und unten bekommen deshalb an jedem
   Breakpoint dieselbe Schriftgröße (Wunsch 2026-07-31: "vielleicht
   sogar gleiche Größe wie PRÜFUNG"), durchgerechnet auf ca. 15%
   Sicherheitsabstand für "GESCHAFFT" an der jeweils engeren
   Kreissehnen-Position (siehe Breakpoint-Kommentare unten). */
.fertig-btn-kreis {
  padding: 12px;
  gap: 4px;
}

.fertig-btn-kreis-oben,
.fertig-btn-kreis-unten {
  font-weight: 900;
  color: var(--flieder);
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
}

.fertig-btn-kreis-oben  { font-size: clamp(1.55rem, 5.3vw, 2.25rem); letter-spacing: 0.04em; }

.fertig-btn-kreis-unten { font-size: clamp(1.55rem, 5.3vw, 2.25rem); letter-spacing: 0.06em; }

/* Satz-Zelle-Sonderfall: Basis-.satz-zelle hat kein justify-content
   (dort reicht die kleine Kästchenhöhe von selbst) – bei der riesigen
   Gross-Version muss der Inhalt aber aktiv vertikal zentriert werden.
   Rahmen (1px→3px, wie beim Timer-Kreis) und Eckenradius (8px→20px)
   ebenfalls angepasst – bei der viel größeren Fläche wirkten die vom
   kleinen Kästchen geerbten Werte zu dünn/kantig (Feedback 2026-07-27). */
.satz-zelle--gross {
  position: relative;
  justify-content: center;
  border-width: 3px;
  border-radius: 20px;
}

/* Runder Timer-Button */
.timer-btn {
  position: relative;
  border-radius: 50%;
  background: var(--flieder-dim);
  border: 3px solid var(--flieder);
  box-shadow:
    0 0 30px var(--flieder-glow),
    0 0 60px rgba(179,157,219,0.12),
    inset 0 0 30px rgba(179,157,219,0.06);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s ease;
  animation: btnPuls 3s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

@keyframes btnPuls {
  0%,100% { box-shadow: 0 0 30px var(--flieder-glow), 0 0 60px rgba(179,157,219,0.12), inset 0 0 30px rgba(179,157,219,0.06); }
  50%      { box-shadow: 0 0 50px var(--flieder-glow), 0 0 100px rgba(179,157,219,0.2), inset 0 0 40px rgba(179,157,219,0.1); }
}

/* Mouseover-Animation für den runden Button (Wunsch 2026-07-31): gilt
   automatisch für ALLE drei Varianten auf allen Seiten, weil "TRAINING
   GESCHAFFT" (.timer-btn.fertig-btn-kreis im Trainings-Zweig), "PRÜFUNG
   GESCHAFFT" (Test-Zweig) und "VERSUCH GESCHAFFT" (Finale-Zweig)
   dieselbe .timer-btn-Klasse tragen. Deutlich
   stärkerer/schnellerer Puls (eigenes Keyframe statt des normalen
   btnPuls) plus Skalierung und hellerer Rand – muss VOR der
   .timer-btn:active-Regel stehen, damit ein Klick während des Hovers
   weiterhin die kurze "Gedrückt"-Verkleinerung zeigt (spätere Regel
   gewinnt bei gleicher Spezifität). */
.timer-btn:hover {
  transform: scale(1.06);
  border-color: var(--flieder-bright);
  animation: btnPulsHover 1s ease-in-out infinite;
}

@keyframes btnPulsHover {
  0%,100% { box-shadow: 0 0 45px var(--flieder-glow), 0 0 90px rgba(179,157,219,0.3), inset 0 0 35px rgba(179,157,219,0.12); }
  50%      { box-shadow: 0 0 65px var(--flieder-glow), 0 0 130px rgba(179,157,219,0.4), inset 0 0 50px rgba(179,157,219,0.18); }
}

.timer-btn:active {
  transform: scale(0.94);
  box-shadow: 0 0 20px var(--flieder-glow);
}

/* Tastendruck-Blitz (Wunsch 2026-07-31): garantiert sichtbare
   Druck-Rückmeldung für alle 4 runden Buttons (Countdown-Start +
   Training/Prüfung/Finale GESCHAFFT), unabhängig von der tatsächlichen
   Tipp-Dauer – siehe die JS-Logik in 100.php (pointerdown setzt diese
   Klasse, ein fester 250ms-Timeout entfernt sie wieder). Grund: das
   .timer-btn:active oben kommt am Touchscreen kaum an, weil zum einen
   der native Tipp-Blitz per -webkit-tap-highlight-color:transparent
   abgeschaltet ist, zum anderen :active nur so lange wirkt, wie der
   Finger wirklich aufliegt (oft nur 80-100ms bei einem schnellen
   Tipper – zu kurz fürs Auge).
   Muss NACH .timer-btn:hover UND .timer-btn:active im Quellcode stehen,
   damit die Klasse bei gleicher Spezifität (Klasse+Pseudoklasse) in
   beiden Fällen gewinnt: schnellerer/knackigerer Scale (0.90 statt
   0.94, 80ms statt der üblichen 250ms-Transition) plus ein heller
   Blitz von Rand/Glow, der über 250ms wieder auf die Normalstärke
   abklingt. */
.timer-btn.tastendruck {
  transform: scale(0.90);
  transition: transform 0.08s ease-out;
  animation: tastendruckBlitz 0.25s ease-out;
}

@keyframes tastendruckBlitz {
  0% {
    border-color: var(--flieder-bright);
    box-shadow: 0 0 70px var(--flieder-bright), 0 0 140px rgba(179,157,219,0.5), inset 0 0 50px rgba(179,157,219,0.2);
  }
  100% {
    border-color: var(--flieder);
    box-shadow: 0 0 30px var(--flieder-glow), 0 0 60px rgba(179,157,219,0.12), inset 0 0 30px rgba(179,157,219,0.06);
  }
}

/* Schriftgröße gemeinsam mit dem Satz-Schild (.satz-zelle--gross
   .satz-wdh) definiert – aus demselben Grund wie bei der Kreisgröße
   oben: die Zahl im Schild soll immer genauso groß wirken wie die
   Zahl im Kreis. Restliche Eigenschaften (Farbe, Gewicht) kommen
   weiterhin unabhängig von .satz-wdh/.aktiv-satz. */
.timer-btn-zahl,
.satz-zelle--gross .satz-wdh {
  /* Wunsch 2026-07-30: +20% (durchgerechnet, Sicherheitsabstand bleibt
     erhalten – siehe Absprache) gegenüber vorheriger Basis-Größe
     (3.5–5.5rem). Gilt für Basis-Stufe, Kreis UND Schild identisch. */
  font-size: clamp(4.2rem, 14.4vw, 6.6rem);
}

.timer-btn-zahl {
  font-weight: 900;
  color: var(--flieder);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* Weicher Farbwechsel bei Warn-/Krit-Zustand in den letzten Sekunden
     (Wunsch 2026-07-30: Countdown zählt jetzt direkt in dieser Zahl mit,
     vorher an .countdown-zahl gebunden). */
  transition: color 0.4s, text-shadow 0.4s;
}

/* Gleiches Prinzip für das Label ("SEK. PAUSE" / "Satz X"). */
.timer-btn-label,
.satz-zelle--gross .satz-nr {
  font-size: 0.65rem;
}

/* Wunsch 2026-07-30: gleicher Zentrierungs-Fix wie beim Kreis
   (.timer-btn-label weiter unten) – "Satz X" steht im Schild VOR der
   großen Zahl (.satz-wdh), drückt sie also beim gemeinsamen
   Flex-Zentrieren optisch nach unten. Label per position:absolute aus
   dem Fluss nehmen und nahe am oberen Rand platzieren (bezogen auf
   .satz-zelle--gross, jetzt position:relative), damit .satz-wdh als
   einziges Flex-Kind exakt mittig sitzt – dieselbe 13%-Randdistanz wie
   beim Kreis, damit "Satz X" oben und "SEK. PAUSE" unten optisch
   gleich weit vom Rand stehen und die große Zahl hier UND im Kreis auf
   exakt derselben Höhe liegt ("eine Flucht").
   Update 2026-07-30 (Fortsetzung 4): zweites Label "STÜCK" unten dazu
   (analog zum Kreis mit PAUSE/SEKUNDEN) – bewusst dasselbe kurze Wort
   auf allen Bildschirmgrößen statt "LIEGESTÜTZE" (durchgerechnet: bei
   den kompakten Stufen wäre "LIEGESTÜTZE" zu breit für das feste
   Padding des Schilds, "STÜCK" ist kürzer als "Satz X" und passt daher
   überall sicher, wo auch "Satz X" passt). Beide Labels teilen sich
   die Klasse .satz-nr (gleiche Schriftgröße/Farbe/Goldton bei
   aktiv-satz), die Position kommt über die Modifier-Klassen
   --oben/--unten, genau wie bei .timer-btn-label. */
.satz-zelle--gross .satz-nr {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.satz-zelle--gross .satz-nr--oben {
  top: 13%;
}

.satz-zelle--gross .satz-nr--unten {
  bottom: 13%;
}

/* Wunsch 2026-07-30: die Zahl (.timer-btn-zahl) war nicht exakt im
   Kreismittelpunkt, sondern wirkte in der oberen Hälfte, weil Zahl UND
   Label als gemeinsamer Flex-Block zentriert wurden – das Label unten
   drückt die Zahl optisch nach oben, besonders am iPad, wo das Label
   bis zu 2.4rem groß wird. Fix: Label per position:absolute aus dem
   Flex-Fluss herausnehmen (bezogen auf .timer-btn, das bereits
   position:relative hat). Dadurch bleibt .timer-btn-zahl als einziges
   Flex-Kind übrig und wird von .timer-btn (align-items/justify-
   content:center) exakt mittig zentriert – unabhängig von der
   Label-Größe. Prozentwert statt fixer px-Zahl, damit es bei jeder
   Kreisgröße (140–430px) proportional passt, ohne jede Breakpoint-
   Stufe einzeln nachziehen zu müssen.
   Update 2026-07-30 (Fortsetzung): aus dem einen Label sind jetzt zwei
   geworden ("PAUSE" oben / "SEKUNDEN" unten, Wunsch 2026-07-30) – damit
   liest sich der Kreis von oben nach unten schlüssig als "PAUSE · 60 ·
   SEKUNDEN". Gemeinsame Optik bleibt in dieser Basis-Regel, die Position
   (oben/unten) kommt über die beiden Modifier-Klassen direkt danach. */
.timer-btn-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: opacity 0.2s;
}

.timer-btn-label--oben {
  top: 13%;
}

.timer-btn-label--unten {
  bottom: 13%;
}

/* Während "LOS!" angezeigt wird, ergibt "SEK. PAUSE" darunter keinen
   Sinn (Wunsch 2026-07-30) – kurz ausgeblendet statt entfernt, damit die
   Kreis-Höhe/Zentrierung stabil bleibt. */
.timer-btn-label.ausgeblendet { opacity: 0; }

/* Countdown läuft jetzt direkt in .timer-btn-zahl mit (Wunsch 2026-07-30,
   siehe Kommentar bei .timer-btn-zahl weiter oben) – die früheren
   separaten Elemente .countdown-anzeige/.countdown-info/.countdown-zahl
   und der nie verwendete .countdown-ring* (totes CSS ohne zugehöriges
   HTML/JS) sind dadurch komplett entfallen. Warn-/Krit-Färbung in den
   letzten Sekunden hängt jetzt direkt an .timer-btn-zahl: */
.timer-btn-zahl.warn {
  color: var(--timer-warn);
  text-shadow: 0 0 30px rgba(255,183,77,0.4);
  animation: zahlWackeln 0.5s ease-in-out infinite;
}

.timer-btn-zahl.crit {
  color: var(--timer-crit);
  text-shadow: 0 0 30px rgba(239,83,80,0.5);
  animation: zahlPuls 0.3s ease-in-out infinite;
}

@keyframes zahlWackeln {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

@keyframes zahlPuls {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* "LOS!" läuft jetzt direkt in .timer-btn-zahl mit statt in einem eigenen
   .los-flash-Element (Wunsch 2026-07-30) – Kreis bleibt für Ruhezustand,
   Countdown UND LOS! durchgehend dasselbe Element. */
.timer-btn-zahl.los {
  color: var(--flieder-bright);
  text-shadow: 0 0 40px rgba(206,147,216,0.6);
  animation: losAuftauchen 0.4s ease-out;
}

@keyframes losAuftauchen {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Letzter Satz – Fertig-Button */
.fertig-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.fertig-btn.sichtbar { display: flex; }

/* .fertig-btn-text (rang-spezifischer Spruch über dem Kreis) entfernt
   2026-08-09 (Wunsch Geri) - siehe Kommentar in 100.php an der
   entsprechenden Stelle. Sicherungskopie: _projekt/style.css-vor-
   rangspruch-entfernung.css. */

/* ══════════════════════════════════════════
   MOTIVATIONS-ZITAT
══════════════════════════════════════════ */
.zitat {
  text-align: center;
  font-size: 1.35rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 12px 16px;
  border-left: 2px solid var(--flieder-border);
  margin: 0 auto;
  /* Wunsch 2026-07-30: über die ganze Kartenbreite statt schmaler
     Spalte (vorher max-width: 520px) – dadurch auch mehr Platz für
     eine größere Schrift. */
  max-width: 100%;
}

/* ══════════════════════════════════════════
   ABSCHLUSS-ANIMATION
══════════════════════════════════════════ */
.abschluss-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 5, 20, 0.96);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  padding: 32px;
}

.abschluss-screen.sichtbar { display: flex; }

.abschluss-emoji {
  animation: emojiHuepfen 0.6s ease-out both;
}

@keyframes emojiHuepfen {
  0%   { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.abschluss-titel {
  font-size: clamp(1.8rem, 6vw, 3.5rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--flieder);
  text-shadow: 0 0 30px var(--flieder-glow);
  animation: abschlussTitel 0.6s ease-out 0.3s both;
}

@keyframes abschlussTitel {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.abschluss-rang {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: abschlussTitel 0.6s ease-out 0.5s both;
}

.abschluss-gesamt {
  font-size: 1.15rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  animation: abschlussTitel 0.6s ease-out 0.7s both;
}

.abschluss-zurueck {
  margin-top: 12px;
  padding: 16px 40px;
  background: var(--flieder-dim);
  border: 2px solid var(--flieder);
  border-radius: 50px;
  color: var(--flieder);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
  animation: abschlussTitel 0.6s ease-out 0.9s both;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}

.abschluss-zurueck:active {
  transform: scale(0.96);
}

/* Konfetti-Canvas – initial versteckt, wird per JS aktiviert */
#konfetti-canvas {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
}

/* ══════════════════════════════════════════
   TESTTAG-BEREICH
══════════════════════════════════════════ */

/* Prüfungsseite komplett einfärben (Wunsch 2026-07-31, Variante B nach
   Vorschau-Vergleich mit Geri): dieselbe rotbraune Farbe wie
   .tag-karte.pruefung auf der index.php, aber über die ganze Seite
   gelegt statt nur ins goldene Quadrat – dadurch scheint sie durch die
   ohnehin durchscheinenden Hintergründe von Quadrat (.satz-zelle--gross
   .aktiv-satz) und Kreis (.timer-btn/.fertig-btn-kreis) hindurch, statt
   isoliert in einem der beiden Elemente zu sitzen. Klasse wird von
   100.php nur bei $tag['typ']==='test' auf <body> gesetzt (die 4
   Testtage), NICHT bei 'training' oder 'finale'. */
.seite-pruefung {
  background: rgba(30, 15, 5, 0.92);
}

/* Finale-Seite komplett einfärben (Wunsch 2026-07-31): gleiches Prinzip
   wie .seite-pruefung oben, aber mit der schon bestehenden dunklen
   Diamant-/Grün-Farbe (bisher nur in der Finale-Karte auf der index.php,
   .tag-karte.finale, verwendet – von Geri als "Grün" bezeichnet und per
   Screenshot bestätigt). Klasse wird von 100.php nur bei
   $tag['typ']==='finale' auf <body> gesetzt (Tag 50). */
/* 2026-08-07 (Fortsetzung 23): war immer noch die alte dunkelgrüne
   Diamant-Farbe (rgba(10,30,32,...) = Grünton) - erneut als "grün"
   von Geri gemeldet (Screenshot der Detailseite 100.php, Tag 100).
   Jetzt auf denselben dunklen Flieder-Ton wie .tag-karte.finale
   (index.php, siehe Fortsetzung 19) umgestellt. */
.seite-finale {
  background: rgba(24, 18, 30, 0.92);
}

.test-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffb74d;
  border: 1px solid rgba(255,183,77,0.4);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 16px;
}

/* Prüfungsseite (Wunsch 2026-07-31): Badge steht jetzt freistehend direkt
   im .wrapper (Flex-Spalte) – align-self:center hält die Zentrierung
   trotzdem (wirkt nur im Flex-Kontext). Gilt seit dem Finale-Umbau
   (2026-07-31) identisch für Testtag UND Finale, beide nutzen dieselbe
   .test-badge.test-badge--frei-Kombination. Schrift wie an anderer
   Stelle in diesem Projekt verdoppelt (0.65rem → 1.2rem), damit sie im
   größeren Layout nicht verloren wirkt. */
.test-badge--frei {
  align-self: center;
  font-size: 1.2rem;
  padding: 6px 20px;
}

/* ══════════════════════════════════════════
   PDF DOWNLOAD BUTTON – fixiert rechts oben
══════════════════════════════════════════ */
.pdf-download-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--flieder-border);
  border-radius: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.35;
  transition: all 0.22s ease;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-height: var(--touch-min);
}

.pdf-download-btn:hover,
.pdf-download-btn:active {
  border-color: var(--flieder);
  color: var(--flieder);
  box-shadow: 0 0 20px var(--flieder-glow), 0 4px 20px rgba(0,0,0,0.5);
  transform: translateY(-1px);
}

.pdf-btn-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.pdf-btn-text {
  text-transform: uppercase;
  font-weight: 500;
}

.pdf-btn-text strong {
  display: block;
  color: var(--flieder);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  font-weight: 800;
}

/* Auf kleinen Bildschirmen: nur Icon + PDF anzeigen */
@media (max-width: 480px) {
  .pdf-download-btn { padding: 10px 12px; gap: 6px; }
  .pdf-btn-text { display: none; }
  .pdf-btn-icon { font-size: 1.6rem; }
}

/* ══════════════════════════════════════════
   NACH-OBEN-BUTTON – fixiert rechts unten
   Wunsch Geri 2026-08-08: die Seite ist inzwischen sehr lang (100
   Tage), zurueck nach oben scrollen dauert lange. Vorlage/Idee aus
   webdesign/index.html (dort .float-nav__oben, siehe auch
   webdesign/_projekt/floating-nav-standalone.html) - hier nur der
   reine Nach-oben-Button uebernommen (keine Schnellnavigation noetig,
   die 100-Tage-Uebersicht hat keine eigenen Ankerpunkte), Farben/Optik
   an das Flieder-Design dieser Seite angepasst. Blendet sich erst ab
   200px Scrolltiefe ein (siehe JS in index.php), damit er ganz oben
   nicht unnoetig im Weg steht. Nur auf index.php - die Trainingstag-
   Seite (100.php) ist kurz genug, dort nicht noetig. */
.nach-oben-btn {
  position: fixed;
  bottom: 24px;
  right: 18px;
  z-index: 50;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--flieder-border);
  color: var(--flieder);
  cursor: pointer;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.nach-oben-btn.sichtbar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nach-oben-btn:hover,
.nach-oben-btn:active {
  border-color: var(--flieder);
  box-shadow: 0 0 20px var(--flieder-glow), 0 4px 20px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}

.nach-oben-btn svg {
  width: 22px;
  height: 22px;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer {
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 16px;
  border-top: 1px solid var(--flieder-border);
  opacity: 0.6;
}

/* Link zur Hauptseite schoscho.at – als kleiner Flieder-Button
   (Pille), damit auch Direkt-Besucher von 100.schoscho.at sehen,
   dass es dahinter eine ganze Tool-Sammlung gibt. Formulierung
   bewusst als Einladung ("Noch mehr …"), nicht als "zurück",
   da viele Besucher nie auf schoscho.at waren. */
.footer-link {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 24px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--flieder);
  background: var(--flieder-dim);
  border: 1px solid var(--flieder-border);
  border-radius: 40px;
  text-decoration: none;
  opacity: 0.95;
  transition: all 0.2s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
  opacity: 1;
  border-color: var(--flieder);
  box-shadow: 0 0 16px var(--flieder-glow);
}

/* ══════════════════════════════════════════
   RESPONSIVE – Breiten-Breakpoints
══════════════════════════════════════════ */
@media (max-width: 640px) {
  .wrapper { padding: 16px 14px 48px; gap: 14px; }
  .tage-grid { grid-template-columns: 1fr; }
  .saetze-tabelle { gap: 6px; }
  .satz-zelle { min-width: 52px; padding: 8px 10px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* iPad-spezifische Optimierungen */
  .tage-grid { grid-template-columns: repeat(2, 1fr); }

  /* Timer-Kreis für iPad */
  .timer-btn,
  .satz-zelle--gross,
  .fertig-btn-kreis {
    width: 220px;
    height: 220px;
  }

  /* "TRAINING"/"PRÜFUNG"/"VERSUCH" + "GESCHAFFT" im Kreis (Wunsch
     2026-07-31, zwei Runden Feedback: erst Größe pro Zeile einzeln
     nachgezogen, dann "ABSCHLIESSEN"→"GESCHAFFT" umbenannt). Seit der
     Umbenennung ist "GESCHAFFT" (9 Zeichen) das längste Wort – beide
     Zeilen bekommen deshalb dieselbe Größe. Durchgerechnet mit
     derselben Zeichenbreiten-Schätzung wie beim PC (~0,674em/Zeichen):
     bei 1.9rem bleiben bei diesem 220px-Kreis ca. 15% Sicherheitsabstand
     für "GESCHAFFT". */
  .fertig-btn-kreis-oben {
    font-size: 1.9rem;
  }
  .fertig-btn-kreis-unten {
    font-size: 1.9rem;
  }
}

@media (min-width: 1024px) {
  .tage-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════
   8-SÄTZE-TAGE: 2 Zeilen zu je 4 (nur nicht-PC)
   Wunsch 2026-07-26: an den 4 Tagen mit 8 Sätzen
   (Tag 26/27/30/31) auf allem, was kein PC ist
   (also auch iPad), die Kästchen symmetrisch auf
   2 Zeilen aufteilen – oben 4, unten 4 – statt sie
   zu verkleinern. grid-template-columns mit
   max-content lässt jede Spalte genau so breit
   werden wie ihr Inhalt (gleiche Größe wie bisher),
   justify-content:center hält den Block mittig.
   Ab 1400px (siehe PC-SKALIERUNG weiter unten)
   greift diese Regel nicht mehr – dort bleibt die
   normale .saetze-tabelle-Reihe mit allen 8 in
   einer Zeile, weil dort genug Platz ist.
══════════════════════════════════════════ */
@media (max-width: 1399px) {
  .saetze-tabelle--kompakt {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: center;
    gap: 8px;
  }
}

/* ══════════════════════════════════════════
   PC-SKALIERUNG: Basis-Schriftgröße erhöhen
   22px ≈ 137% von default 16px (≈ Zoom 140%)
   Alle rem-Werte skalieren automatisch mit.
   Feste px-Werte werden manuell angepasst.
   Schwelle am 2026-07-26 von 1025px auf 1400px
   angehoben: die alte Annahme "iPad max. 1024px"
   stimmt nicht mehr – aktuelle iPads liegen im
   Querformat zwischen 1133px (iPad mini) und
   1376px (iPad Pro 13"), lagen also bisher
   fälschlich SCHON in dieser PC-Regel und wurden
   dadurch unnötig groß skaliert (22px Grundschrift,
   164px Satz-Kästchen-Mindestbreite) – das war die
   eigentliche Ursache des Zeilenumbruchs bei den
   8-Sätze-Tagen. 1400px liegt über dem größten
   aktuellen iPad und trifft nur noch echte PCs.
══════════════════════════════════════════ */
@media (min-width: 1400px) {
  /* Basis-Schriftgröße: alle rem-Werte skalieren automatisch */
  html { font-size: 22px; }

  /* Wunsch Geri 2026-08-07: Seitentitel "100 TAGE – 100 LIEGESTÜTZE"
     brach am PC in zwei Zeilen um (Basisregel .page-title deckelt bei
     3rem = 66px, dafür war kein Platz mehr). Einfach verkleinert, bis
     er in eine Zeile passt. Erster Versuch 2.4rem reichte laut Geri
     noch nicht (Screenshot) -> weiter auf 1.8rem runter. */
  .page-title {
    font-size: 1.8rem;
  }

  /* Timer-Kreis: fixer px-Wert manuell hochskaliert (260 × 1.37 ≈ 360px).
     Satz-Schild (.satz-zelle--gross) wächst hier automatisch mit, weil
     PC laut Geri ebenfalls das neue Schild bekommen soll (2026-07-27). */
  .timer-btn,
  .satz-zelle--gross,
  .fertig-btn-kreis {
    width: 360px;
    height: 360px;
  }

  /* Fortschritts-Leiste am PC etwas dicker + Beschriftung etwas größer,
     analog zu den anderen PC-Feinanpassungen in diesem Block. */
  .fortschritt-balken-spur { height: 22px; }
  .fortschritt-balken-label { font-size: 0.8rem; }

  /* Satz-Zellen in der Tabelle: neue Basis 120px → 164px auf PC
     (gleiches Verhältnis wie zuvor 60px → 82px) */
  .satz-zelle {
    min-width: 164px;
  }

  /* "SATZ 1" im großen Schild war am PC noch zu klein (Feedback
     2026-07-27 – "SEK. PAUSE" blieb damals bewusst unverändert, nur das
     Schild-Label wurde größer). Ca. 15% der 360px-Schildbreite,
     gleiches Verhältnis wie beim ursprünglichen kleinen Kästchen. */
  .satz-zelle--gross .satz-nr {
    font-size: 2.2rem;
    font-weight: 800;
  }

  /* Update 2026-07-30: "PAUSE"/"SEKUNDEN" im Kreis waren am PC dadurch
     winzig neben "SATZ 1" (Feedback nach Screenshot). Bewusst NICHT
     einfach dieselben 2.2rem wie beim Schild übernommen: anders als
     das Quadrat verliert der Kreis an dieser Randposition deutlich an
     Breite (Kreissehne), 2.2rem wäre hier rechnerisch zu breit für
     "SEKUNDEN" geworden und wäre über den Rand hinausgelaufen. 1.5rem
     entspricht stattdessen demselben Größenverhältnis zum Kreis-
     Durchmesser, das am iPad bereits nachweislich gut funktioniert
     (dort 2.4rem bei 430px-Kreis ≈ 8,9% des Durchmessers – hier
     genauso auf die 360px übertragen). Deutlich größer als vorher
     (0,65rem), aber mit Sicherheitsabstand zum Kreisrand. */
  .timer-btn-label {
    font-size: 1.5rem;
    font-weight: 800;
  }

  /* "TRAINING"/"PRÜFUNG"/"VERSUCH" + "GESCHAFFT" im Kreis waren am PC
     noch winzig (Feedback 2026-07-31). Nach mehreren Korrekturrunden
     ("da geht noch was") zuletzt bei 2.0/1.4rem (oben/unten
     unterschiedlich groß, weil "ABSCHLIESSEN" mit 12 Zeichen viel
     länger war als "PRÜFUNG" mit 7). Seit der Umbenennung
     "ABSCHLIESSEN"→"GESCHAFFT" (Wunsch 2026-07-31, freundlicher und mit
     9 statt 12 Zeichen kürzer) ist "GESCHAFFT" das längste vorkommende
     Wort – beide Zeilen bekommen deshalb dieselbe Schriftgröße
     (Geris Vorschlag: "vielleicht in der gleichen Größe wie PRÜFUNG").
     Durchgerechnet mit Zeichenbreiten-Schätzung (0,674em/Zeichen,
     kalibriert an den bisherigen Werten): bei 2.25rem bleiben im
     360px-Kreis ca. 15-16% Sicherheitsabstand für "GESCHAFFT". Text
     sitzt mittig im Kreis wie die Zahl (.timer-btn-zahl), nicht randnah
     wie .timer-btn-label – dadurch bleibt trotz der Vergrößerung
     ausreichend Sicherheitsabstand. */
  .fertig-btn-kreis-oben {
    font-size: 2.25rem;
  }
  .fertig-btn-kreis-unten {
    font-size: 2.25rem;
  }

  /* Credit-Link "webdesign.schoscho.at" am PC vergrößern (Wunsch
     2026-08-07, Folgeauftrag zur iPad-Vergrößerung: "dann passt das
     wieder zusammen"). Ohne diese Regel bleibt die Basisgröße
     0.62rem bei PC-Root 22px nur ≈13,6px – kleiner als die neue
     iPad-Größe (1rem × 16px Root = 16px). 0.73rem × 22px ≈ 16,1px,
     trifft also (bewusst berechnet, nicht nur "ein bisschen mehr")
     wieder fast exakt dieselbe optische Größe wie am iPad. */
  .page-credit {
    font-size: 0.73rem;
  }

  /* Wunsch Geri 2026-08-07: NUR auf 100.php nochmal doppelt so groß
     wie die 0.73rem oben – index.php bleibt bei der normalen Größe. */
  .page-credit--gross {
    font-size: 1.46rem;
  }
}

/* ══════════════════════════════════════════
   HÖHEN-RESPONSIVE – Kompaktmodus
   Greift bei iPad Landscape und kleinen
   Bildschirmen (Höhe unter 850px)
   Ziel: alles auf einen Blick ohne Scrollen
══════════════════════════════════════════ */
@media (max-height: 850px) {
  /* Kopfbereich komprimieren */
  .detail-kopf-zeile { margin-bottom: 2px; }
  .detail-woche    { font-size: clamp(1.3rem, 3.5vw, 2rem); }
  .detail-kopf-trenner { font-size: clamp(1.3rem, 3.5vw, 2rem); }
  .detail-titel    { font-size: clamp(1.3rem, 3.5vw, 2rem); }
  .detail-tagnr    { font-size: 1.36rem; margin-bottom: 4px; }
  .fortschritt-balken-wrap { margin: 4px 0; }
  .fortschritt-balken-spur { height: 14px; }
  .fortschritt-balken-label { font-size: 0.62rem; margin-bottom: 4px; }

  /* Sätze-Karte komprimieren: fällt bei wenig Höhe auf die
     ursprüngliche (nicht verdoppelte) Größe zurück, statt noch
     kleiner zu werden – Lesbarkeit bleibt so auch im Kompaktmodus
     wenigstens auf dem alten Stand (Wunsch 2026-07-26: Zahlen
     sollen nicht wieder zu klein werden). */
  .saetze-wrap     { padding: 10px 16px; }
  .saetze-label    { margin-bottom: 6px; }
  .saetze-gesamt   { margin-top: 6px; }
  .satz-zelle      { padding: 10px 14px; min-width: 60px; }
  .satz-nr         { font-size: 0.58rem; }
  .satz-wdh        { font-size: 1.4rem; }

  /* Anweisung ausblenden – spart ~45px, Info steht im Trainingsplan */
  .anweisung { display: none; }

  /* Timer-Kreis kleiner */
  .timer-btn,
  .satz-zelle--gross,
  .fertig-btn-kreis {
    width: clamp(140px, 28vw, 190px);
    height: clamp(140px, 28vw, 190px);
  }
  /* Schild-Schrift proportional mitverkleinert (gleiches Verhältnis
     wie beim ursprünglich kleinen Kästchen), sonst würde die Zahl bei
     diesem kleineren Kreis über den Rand hinausragen.
     2026-08-09 (Wunsch Geri, iPhone-Screenshot): der Kommentar hier
     sagte bisher ".timer-btn-zahl bleibt unberührt" - das war aber
     genau der Bug, den Geri am iPhone gemeldet hat (Pause-Zahl im
     Kreis viel zu groß, ragt über den Rand). .timer-btn-zahl jetzt mit
     in diese Regel aufgenommen, schrumpft ab jetzt zusammen mit dem
     Kreis wie überall sonst in der Datei auch. */
  /* +20% (Wunsch 2026-07-30), gleiches Prinzip wie bei der Basis-Stufe. */
  .timer-btn-zahl,
  .satz-zelle--gross .satz-wdh { font-size: clamp(3.96rem, 13.2vw, 5.28rem); }
  .satz-zelle--gross .satz-nr  { font-size: clamp(1.4rem, 5vw, 1.8rem); }

  /* 2026-08-09 (Wunsch Geri, iPhone-Screenshot): "PRÜFUNG GESCHAFFT" /
     "VERSUCH GESCHAFFT" wurde bei diesem kleineren Kreis (140-190px)
     nirgends verkleinert und ragte über den Rand. Gleiche Berechnung
     wie bei den bestehenden iPad-Stufen weiter unten (Kreis-Durchmesser
     ÷ ca. 7,3 ≈ Schriftgröße mit ~15% Sicherheitsabstand für
     "GESCHAFFT", das längste vorkommende Wort). */
  .fertig-btn-kreis-oben,
  .fertig-btn-kreis-unten {
    font-size: clamp(1.2rem, 3.8vw, 1.6rem);
  }

  /* Zitat kompakter (aber im selben Verhältnis mitvergrößert wie die
     Basis-Schriftgröße oben, Wunsch 2026-07-30: 0.7 → 0.85rem) */
  .zitat { font-size: 0.85rem; }
}

/* Noch kompakter für Landscape auf kleinen iPads / iPhone Landscape */
@media (max-height: 700px) {
  .detail-woche    { font-size: clamp(1.1rem, 3vw, 1.6rem); }
  .detail-kopf-trenner { font-size: clamp(1.1rem, 3vw, 1.6rem); }
  .detail-titel    { font-size: clamp(1.1rem, 3vw, 1.6rem); }
  /* Die Leiste (nur noch ~30px hoch inkl. Beschriftung) bleibt jetzt
     auch im extremsten Kompaktmodus sichtbar – anders als das frühere
     10x10-Punkteraster, das hier komplett weggelassen werden musste,
     braucht sie kaum noch Platz. */
  .fortschritt-balken-wrap { margin: 3px 0; }
  .fortschritt-balken-spur { height: 12px; }
  .fortschritt-balken-label { font-size: 0.58rem; margin-bottom: 3px; }
  .saetze-wrap     { padding: 8px 12px; }
  .timer-btn,
  .satz-zelle--gross,
  .fertig-btn-kreis {
    width: clamp(120px, 25vw, 160px);
    height: clamp(120px, 25vw, 160px);
  }
  /* +20% (Wunsch 2026-07-30), gleiches Prinzip wie bei der Basis-Stufe.
     2026-08-09: .timer-btn-zahl hier ergänzt, gleicher Grund wie bei
     der 850px-Stufe oben (Wunsch Geri, iPhone-Screenshot). */
  .timer-btn-zahl,
  .satz-zelle--gross .satz-wdh { font-size: clamp(3.36rem, 10.8vw, 4.44rem); }
  .satz-zelle--gross .satz-nr  { font-size: clamp(1.2rem, 4vw, 1.6rem); }

  /* 2026-08-09 (Wunsch Geri, iPhone-Screenshot): gleiches Prinzip wie
     bei der 850px-Stufe oben, hier proportional zur kleineren
     Kreisstufe (120-160px statt 140-190px). */
  .fertig-btn-kreis-oben,
  .fertig-btn-kreis-unten {
    font-size: clamp(1.05rem, 3.4vw, 1.37rem);
  }
  .zitat { display: none; }
}

/* ══════════════════════════════════════════
   TIMER-KREIS AM IPAD: nochmal größer (2026-07-27)
   Wunsch 2026-07-27 (Screenshot nach echtem Training):
   die Pause-Zahl (45/60/90/120) darf noch größer sein,
   dafür auch der Kreis drumherum – am iPad ist nach
   allen Seiten reichlich Platz frei (im Screenshot ca.
   30% der Bildschirmhöhe komplett leer unterhalb des
   Zitats). Berechnung: die breiteste Zahl "120" braucht
   selbst bei der größten Stufe unten (Kreis max. 430px)
   nur rund 230px Breite (Schriftschätzung inkl.
   Sicherheitsaufschlag) – passt also mit viel Luft in
   den Kreis, auch weil Zahl+Label zusammen nur ca. 30%
   der Kreis-Höhe brauchen (der Rest ist Kreis-Rand ohne
   Text). Nur am iPad (1024–1399px, siehe Begründung
   weiter oben), am PC bleibt alles exakt wie bisher
   (eigene @media-Regeln, PC-Bereich ab 1400px wird hier
   nicht berührt). 3 Stufen je nach Bildschirmhöhe wie
   gehabt, jetzt zusätzlich auch mit größerer Zahl
   (.timer-btn-zahl), nicht nur größerem Kreis. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .timer-btn,
  .satz-zelle--gross,
  .fertig-btn-kreis {
    width: clamp(300px, 63vw, 430px);
    height: clamp(300px, 63vw, 430px);
  }
  /* Zahl am 2026-07-27 noch ein Stück größer (2. Anpassung, +12%
     gegenüber der vorherigen Stufe). Kreis bleibt exakt gleich, "120"
     passt bei 9.5rem noch mit spürbarem Sicherheitsabstand in den
     430px-Kreis. Satz-Schild (.satz-zelle--gross) ist ein abgerundetes
     Quadrat statt eines Kreises und hat bei gleicher Größe dadurch an
     jeder Stelle mindestens so viel Platz wie der Kreis – die Zahl
     "60" (größte Wdh.-Zahl im Plan) passt hier also sicher mit. */
  /* +20% (Wunsch 2026-07-30, durchgerechnet: "120" behält bei 11.4rem
     im 430px-Kreis noch rund 29% Sicherheitsabstand statt vorher 43%
     – ausreichend Luft, deutlich sichtbare Vergrößerung). */
  .timer-btn-zahl,
  .satz-zelle--gross .satz-wdh {
    font-size: clamp(7.68rem, 25.2vw, 11.4rem);
  }
  /* "SEK. PAUSE" jetzt genau in Schriftgröße/-schnitt von "Woche X ·
     Wochentag" (Wunsch 2026-07-27): gleiches clamp() und font-weight
     wie .detail-woche/.detail-titel. Passt bei dieser (größten)
     Kreisstufe noch in den 430px-Kreis, wenn auch mit weniger Luft
     als bei der Zahl – Farbe/letter-spacing bleiben bewusst wie
     bisher (eigener "Label"-Look, kein Duplikat des Titels). Gilt
     genauso für "Satz X" im Schild. */
  .timer-btn-label,
  .satz-zelle--gross .satz-nr {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
  }

  /* "TRAINING"/"PRÜFUNG"/"VERSUCH" + "GESCHAFFT"-Kreis am iPad. Seit
     der Umbenennung "ABSCHLIESSEN"→"GESCHAFFT" (Wunsch 2026-07-31,
     freundlicher und mit 9 statt 12 Zeichen deutlich kürzer) ist
     "GESCHAFFT" das längste vorkommende Wort – beide Zeilen bekommen
     deshalb dieselbe Schriftgröße statt wie bisher zwei unterschiedliche
     (oben war für die kürzeren Wörter TRAINING/PRÜFUNG/VERSUCH
     großzügiger dimensioniert). Durchgerechnet mit derselben
     Zeichenbreiten-Schätzung wie immer (0,674em/Zeichen), inkl.
     Kreissehnen-Verengung an der tatsächlichen Zeilenposition: bei
     3.7rem bleiben im 430px-Kreis ca. 15% Sicherheitsabstand für
     "GESCHAFFT". */
  .fertig-btn-kreis-oben {
    font-size: clamp(2.47rem, 6.17vw, 3.7rem);
  }
  .fertig-btn-kreis-unten {
    font-size: clamp(2.47rem, 6.17vw, 3.7rem);
  }
}
@media (min-width: 1024px) and (max-width: 1399px) and (max-height: 850px) {
  .timer-btn,
  .satz-zelle--gross,
  .fertig-btn-kreis {
    width: clamp(230px, 46vw, 315px);
    height: clamp(230px, 46vw, 315px);
  }
  /* +20% (Wunsch 2026-07-30), gleiches Prinzip wie bei der iPad-Basis-Stufe. */
  .timer-btn-zahl,
  .satz-zelle--gross .satz-wdh {
    font-size: clamp(6.36rem, 21.6vw, 9.36rem);
  }
  /* Kleinerer Kreis hier (315px) – "Woche X"-Größe 1:1 würde den
     Kreisrand sprengen, deshalb im selben Verhältnis wie die Zahl
     oben (7.8/9.5 ≈ 82%) mitskaliert statt 1:1 übernommen. */
  .timer-btn-label,
  .satz-zelle--gross .satz-nr {
    font-size: clamp(1.3rem, 3.3vw, 2rem);
    font-weight: 800;
  }

  /* Gleiches Prinzip wie bei der iPad-Basis-Stufe oben, nur proportional
     zu dieser kleineren Kreisstufe (315px) – "GESCHAFFT" ist seit der
     Umbenennung das längste Wort, beide Zeilen bekommen deshalb
     dieselbe Größe. */
  .fertig-btn-kreis-oben {
    font-size: clamp(1.76rem, 4.46vw, 2.7rem);
  }
  .fertig-btn-kreis-unten {
    font-size: clamp(1.76rem, 4.46vw, 2.7rem);
  }
}
@media (min-width: 1024px) and (max-width: 1399px) and (max-height: 700px) {
  .timer-btn,
  .satz-zelle--gross,
  .fertig-btn-kreis {
    width: clamp(195px, 39vw, 260px);
    height: clamp(195px, 39vw, 260px);
  }
  /* Hier nur +8% statt +12% – bei dieser kleinsten Kreisstufe (260px)
     ist sonst zu wenig Sicherheitsabstand zum Kreisrand übrig. */
  /* +20% (Wunsch 2026-07-30), gleiches Prinzip wie bei der iPad-Basis-Stufe. */
  .timer-btn-zahl,
  .satz-zelle--gross .satz-wdh {
    font-size: clamp(5.4rem, 18vw, 7.56rem);
  }
  /* Gleiches Prinzip wie bei 850px-Stufe, hier proportional zur
     kleinsten Zahl-Stufe (6.3/9.5 ≈ 66%). */
  .timer-btn-label,
  .satz-zelle--gross .satz-nr {
    font-size: clamp(1.1rem, 2.7vw, 1.6rem);
    font-weight: 800;
  }

  /* Gleiches Prinzip wie bei den anderen iPad-Stufen, hier proportional
     zur kleinsten Kreisstufe (260px) – "GESCHAFFT" ist seit der
     Umbenennung das längste Wort, beide Zeilen bekommen deshalb
     dieselbe Größe. */
  .fertig-btn-kreis-oben {
    font-size: clamp(1.51rem, 3.71vw, 2.2rem);
  }
  .fertig-btn-kreis-unten {
    font-size: clamp(1.51rem, 3.71vw, 2.2rem);
  }
}

/* MOTIVATIONS-ZITAT AM IPAD: gleiche größere Schriftgröße wie .anweisung
   (Wunsch 2026-07-26) – 0.82rem war ohne Brille kaum lesbar. Bewusst
   dieselbe Zahl (1.56rem) wie oben verwendet statt einen neuen eigenen
   Wert zu erfinden (Einheitlichkeit). Gilt unabhängig von der Höhe –
   überschreibt damit auch die 0.7rem-Verkleinerung im Kompaktmodus; bei
   ganz wenig Höhe (max-height:700px) bleibt das Zitat wie bisher
   komplett ausgeblendet. Nur im iPad-Breitenbereich, PC bleibt bei
   0.82rem wie gehabt.
   Update 2026-07-30: Zitat läuft jetzt über die volle Kartenbreite
   (siehe .zitat Basisregel, max-width: 100%) statt in einer schmalen
   520px-Spalte – dadurch nochmal weiter vergrößert (1.56 → 1.9rem).
   Update 2026-08-06: nochmal ein Stück größer (Wunsch Geri: "am iPad
   kann der Text größer sein, damit er auch zur Geltung kommt") –
   1.9 → 2.15rem (+ca. 13%).
   Update 2026-08-07: erneut eine Spur größer (Wunsch Geri: Lesbarkeit
   der Motivationszitate weiter verbessern) – 2.15 → 2.4rem (+ca. 12%,
   gleiche Größenordnung wie die vorherige Erhöhung). */
@media (min-width: 1024px) and (max-width: 1399px) {
  .zitat { font-size: 2.4rem; }
}

/* Abstand des Zitats zum unteren Bildschirmrand (Wunsch 2026-07-27) –
   Text soll nicht ganz unten "kleben". Nur am iPad, per margin statt
   über das .wrapper-Padding in 100.php (das bleibt unangetastet). */
@media (min-width: 1024px) and (max-width: 1399px) {
  .zitat { margin-bottom: 28px; }
}

/* Credit-Link "webdesign.schoscho.at" am iPad vergrößern (Wunsch
   2026-08-07: auf 100.php "winzig und unleserlich", auf index.php
   "auch noch eine Spur zu klein") – Basisgröße 0.62rem (≈9.9px bei
   16px Root-Schriftgröße, die am iPad-Breitenbereich unverändert
   bleibt, siehe html-Basisregel) ist am iPad deutlich zu klein zum
   Lesen. Auf 1rem (16px, +ca. 61%) angehoben – bewusst weiterhin
   unter .page-subtitle (0.78rem × 22px PC bzw. 0.78rem × 16px sonst)
   an anderen Breakpoints, aber am iPad jetzt klar lesbar. Farbe/
   Opacity (dezent, blass) bewusst unverändert – nur die Größe war das
   Problem, nicht die Auffälligkeit. Gilt für beide Seiten (index.php
   und 100.php), da beide dieselbe .page-credit-Klasse teilen. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .page-credit { font-size: 1rem; }

  /* Wunsch Geri 2026-08-07: NUR auf 100.php (Fußzeilen-Variante am Ende
     von .wrapper, siehe dort) nochmal doppelt so groß wie die 1rem
     oben – index.php nutzt weiterhin die normale .page-credit-Größe. */
  .page-credit--gross { font-size: 2rem; }
}