/* =====================================================================
   VO2max Training Engine — Stilblatt fuer dayhard.de/vo2max
   ---------------------------------------------------------------------
   Die Farben sind NICHT geschaetzt. Sie stammen eins zu eins aus dem
   dunklen Farbschema der App:
       V14/VO2maxTrainingsplan/app/src/main/java/de/dayhard/vo2max/Theme.kt
   Wer dort etwas aendert, aendert es hier mit.

   Bewusst eigenstaendig gegenueber dayhard.de/index.html: Das Wurzel-
   verzeichnis fuehrt das Ascheschwarz-und-Glut-Thema des DayZ-Servers
   (--ash / --ember, Anton + Oswald). Diese Seite gehoert zur App und
   traegt deren dunkles Blau. Kein gemeinsames Stilblatt, damit eine
   Aenderung am Server-Auftritt die App-Seite nicht mitzieht.

   Ein helles Schema gibt es hier so wenig wie in der App — das Logo ist
   fuer dunklen Grund gezeichnet, sein weisser Schriftzug verschwaende
   auf hellem Grund.
   ===================================================================== */

:root{
  /* --- Flaechen, aus Theme.kt ------------------------------------- */
  --grund:        #090F16;   /* Seitengrund, der dunkelste Ton        */
  --flaeche:      #101A23;   /* Karte                                 */
  --flaeche-hoch: #19233D;   /* hervorgehobene Karte                  */
  --rand:         #5E7290;   /* Kartenrand und Knopfumriss, 3,93:1    */

  /* Ein zweiter, schwaecherer Rand fuer Trennlinien INNERHALB einer
     Karte. Der volle Randton wirkt dort wie ein Gitter. Nur Deko,
     nie das einzige Merkmal eines Bedienelements. */
  --rand-leise:   #263243;

  /* --- Akzente ---------------------------------------------------- */
  --violett:      #7459EC;   /* linkes Ende des Knopfverlaufs         */
  --violett-hell: #9178FF;   /* derselbe Ton, hell genug fuer SCHRIFT */
  --blau:         #3B82F6;
  --cyan:         #1F769E;   /* rechtes Ende des Knopfverlaufs        */
  --gruen:        #4FBB63;
  --rot:          #E15F63;
  --dienst:       #E8C547;   /* Diensttag-Gelb                        */

  /* Schrift AUF hellen Flaechen (Knopf, Marke). Wie onPrimary in der
     App: dunkel, nicht weiss. Eine Farbe kann nicht zugleich dunkel
     genug fuer weisse Schrift und hell genug als Schrift auf Dunkel
     sein — deshalb bleiben Blau und Violett hell und die Beschriftung
     darauf wird dunkel. */
  --auf-hell:     #04121F;

  /* --- Schriftfarben ---------------------------------------------- */
  --text:         #EDF2F9;
  --text-leise:   #93A2B4;

  --maxw:         960px;
  --r:            14px;
}

*{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  /* auf BEIDE, html und body: iOS Safari beachtet body-only nicht */
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--grund);
  color:var(--text);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* 16px Grundgroesse wie bodyLarge in der App. Die App wird auf dem
     Rad benutzt, die Seite meist nicht — die Zeilenhoehe bleibt
     trotzdem grosszuegig, weil hier lange Rechtstexte stehen. */
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  min-height:100vh;
}

/* ---------------------------------------------------------------------
   Grundbausteine
   ------------------------------------------------------------------ */

.huelle{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
}

a{ color:var(--violett-hell); text-decoration:none }
a:hover{ text-decoration:underline }

/* Tastaturbedienung sichtbar lassen. Ohne das ist die Seite fuer
   jeden, der nicht tippt sondern tabbt, blind. */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:2px solid var(--violett-hell);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------------------------------------------------------------
   Kopf
   ------------------------------------------------------------------ */

.kopfleiste{
  position:sticky; top:0; z-index:50;
  background:rgba(9,15,22,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rand-leise);
}

.kopfleiste .huelle{
  display:flex; align-items:center; gap:16px;
  min-height:60px;
  flex-wrap:wrap;
}

.marke{
  display:flex; align-items:center; gap:10px;
  color:var(--text); font-weight:600; letter-spacing:.02em;
}
.marke:hover{ text-decoration:none }
.marke img{ width:32px; height:32px; display:block }
.marke span{ font-size:15px }

.kopfnav{
  margin-left:auto;
  display:flex; gap:6px; flex-wrap:wrap;
}
.kopfnav a{
  color:var(--text-leise);
  font-size:14px;
  padding:6px 10px;
  border-radius:8px;
}
.kopfnav a:hover{
  color:var(--text);
  background:var(--flaeche);
  text-decoration:none;
}
.kopfnav a[aria-current="page"]{
  color:var(--text);
  background:var(--flaeche-hoch);
}

/* ---------------------------------------------------------------------
   Aufmacher
   ------------------------------------------------------------------ */

.aufmacher{
  padding:56px 0 40px;
  text-align:center;
  /* Der Hauptverlauf der App, stark verduennt: violett nach cyan,
     als Schimmer hinter dem Logo statt als Flaeche. */
  background:
    radial-gradient(60% 70% at 30% 0%, rgba(116,89,236,.16), transparent 70%),
    radial-gradient(60% 70% at 75% 10%, rgba(31,118,158,.16), transparent 70%);
}

.aufmacher img.logo{
  width:min(240px,58vw);
  height:auto;
  display:block;
  margin:0 auto 22px;
}

h1{
  font-size:clamp(28px,5.5vw,42px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.01em;
}

.aufmacher .unterzeile{
  margin:16px auto 0;
  max-width:640px;
  color:var(--text-leise);
  font-size:clamp(16px,2.2vw,19px);
}

/* Die drei Merkzeilen unter dem Aufmacher: kein Netz, kein Konto,
   alles auf dem Geraet. Das ist das Verkaufsargument und steht
   deshalb ueber dem Falz. */
.merkzeilen{
  margin:26px auto 0;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.merkzeile{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--flaeche);
  border:1px solid var(--rand);
  border-radius:999px;
  padding:7px 15px;
  font-size:14px;
  color:var(--text);
}
.merkzeile b{ color:var(--gruen); font-weight:700 }

/* ---------------------------------------------------------------------
   Knoepfe
   ------------------------------------------------------------------ */

.knopfreihe{
  margin-top:28px;
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}

.knopf{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px;
  border-radius:12px;
  font-size:16px; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
}

/* Der Hauptknopf traegt den Verlauf aus der App — violett nach cyan.
   Die Schrift darauf ist WEISS, und das ist eine Abweichung von der
   App, die nachgemessen ist:
   Die App setzt auf ihre hellen Akzente dunkle Schrift (onPrimary
   04121F). Das gilt dort fuer primary = Blau 3B82F6 und error =
   Rot E15F63 — beide deutlich heller als die Enden dieses Verlaufs.
   Auf dem Verlauf selbst faellt Dunkel durch. Ueber elf Stuetzstellen
   gemessen (WCAG 2.1, noetig 4,5:1 fuer Fliesstext):
       dunkel 04121F   3,94 … 3,62:1   → durchgefallen
       weiss  FFFFFF   4,79 … 5,22:1   → bestanden
   Die schlechteste Stelle liegt nicht am Rand, sondern bei 60 %
   Verlaufsanteil — deshalb reicht es nicht, nur die beiden Enden zu
   pruefen. */
.knopf.voll{
  background:linear-gradient(90deg,var(--violett),var(--cyan));
  color:#fff;
}
.knopf.voll:hover{ filter:brightness(1.12); text-decoration:none }

.knopf.umriss{
  background:transparent;
  border-color:var(--rand);
  color:var(--text);
}
.knopf.umriss:hover{
  background:var(--flaeche);
  border-color:var(--violett-hell);
  text-decoration:none;
}

/* ---------------------------------------------------------------------
   Abschnitte und Karten
   ------------------------------------------------------------------ */

section{ padding:44px 0 }
section + section{ border-top:1px solid var(--rand-leise) }

h2{
  font-size:clamp(22px,3.4vw,27px);
  font-weight:700;
  line-height:1.25;
  margin-bottom:8px;
}
h3{
  font-size:18px;
  font-weight:600;
  margin:26px 0 8px;
}
h4{
  font-size:16px;
  font-weight:600;
  margin:18px 0 6px;
  color:var(--text);
}

.vorspann{
  color:var(--text-leise);
  max-width:70ch;
  margin-bottom:22px;
}

p{ margin:0 0 14px; max-width:74ch }
p:last-child{ margin-bottom:0 }

ul,ol{ margin:0 0 16px 22px; max-width:74ch }
li{ margin-bottom:7px }
li:last-child{ margin-bottom:0 }

strong,b{ color:#fff; font-weight:600 }

code{
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:.9em;
  background:var(--flaeche-hoch);
  border:1px solid var(--rand-leise);
  border-radius:5px;
  padding:1px 6px;
  color:var(--text);
  /* App-Kennungen brechen sonst das Layout auf dem Telefon */
  overflow-wrap:anywhere;
}

.karten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

.karte{
  background:var(--flaeche);
  border:1px solid var(--rand);
  border-radius:var(--r);
  padding:22px;
}
.karte.hoch{ background:var(--flaeche-hoch) }
.karte h3{ margin-top:0 }
.karte p{ color:var(--text-leise); margin-bottom:0 }
.karte p + p{ margin-top:10px }

/* Das kleine Schild ueber einer Kartenueberschrift: klein, gedaempft,
   weit gesperrt — wie labelMedium in der App. */
.schild{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-leise);
  margin-bottom:6px;
}
.schild.violett{ color:var(--violett-hell) }
.schild.gruen{ color:var(--gruen) }
.schild.cyan{ color:#6FC3E8 }

/* ---------------------------------------------------------------------
   Hinweiskasten
   ------------------------------------------------------------------ */

.kasten{
  background:var(--flaeche);
  border:1px solid var(--rand);
  border-left:4px solid var(--violett-hell);
  border-radius:var(--r);
  padding:18px 22px;
  margin:20px 0;
}
.kasten p{ max-width:none }

/* Warnung. Rot ist in der App die Fehler- und Warnfarbe und bleibt es
   hier. Die Farbe steht nie allein: darueber steht immer ein Wort. */
.kasten.warnung{ border-left-color:var(--rot) }
.kasten.warnung .schild{ color:var(--rot) }

/* Der Haftungskasten — dieselbe Rolle wie die Sicherheitshinweise
   beim ersten Start der App. */
.kasten.gesundheit{ border-left-color:var(--dienst) }
.kasten.gesundheit .schild{ color:var(--dienst) }

/* ---------------------------------------------------------------------
   Tabellen
   ------------------------------------------------------------------ */

/* Auf dem Telefon laeuft die Tabelle sonst aus der Seite und schiebt
   den ganzen Rumpf mit. Sie scrollt in ihrem eigenen Kasten. */
.tabellenrahmen{
  overflow-x:auto;
  border:1px solid var(--rand);
  border-radius:var(--r);
  margin:18px 0;
  -webkit-overflow-scrolling:touch;
}

table{
  border-collapse:collapse;
  width:100%;
  min-width:480px;
  font-size:15px;
}
th,td{
  text-align:left;
  padding:11px 16px;
  border-bottom:1px solid var(--rand-leise);
  vertical-align:top;
}
thead th{
  background:var(--flaeche-hoch);
  font-weight:600;
  white-space:nowrap;
}
tbody tr:last-child td{ border-bottom:none }
tbody tr:nth-child(even){ background:rgba(25,35,61,.35) }

.ja{ color:var(--gruen); font-weight:700 }
.nein{ color:var(--text-leise) }

/* ---------------------------------------------------------------------
   Rechtstexte
   ------------------------------------------------------------------ */

/* Ein Rechtstext ist eine Spalte, kein Raster. Schmaler als der Rest
   der Seite, weil 74 Zeichen je Zeile sich noch lesen lassen und 110
   nicht mehr. */
.rechtstext{ max-width:74ch }
.rechtstext h2{
  margin-top:38px;
  padding-top:22px;
  border-top:1px solid var(--rand-leise);
}
.rechtstext > h2:first-of-type{ margin-top:0; padding-top:0; border-top:none }
.rechtstext h3{ margin-top:26px }

.stand{
  color:var(--text-leise);
  font-size:14px;
  margin-bottom:26px;
}

/* Der Sprachschalter oben auf den Rechtstexten. Die Play Console nimmt
   EINE Datenschutz-Adresse je App, nicht eine je Sprache — deshalb
   stehen Deutsch und Englisch auf derselben Seite untereinander, und
   dieser Schalter springt nur hin. */
.sprachsprung{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:0 0 28px;
  padding-bottom:20px;
  border-bottom:1px solid var(--rand-leise);
}
.sprachsprung a{
  font-size:14px;
  color:var(--text-leise);
  border:1px solid var(--rand);
  border-radius:999px;
  padding:5px 14px;
}
.sprachsprung a:hover{
  color:var(--text);
  border-color:var(--violett-hell);
  text-decoration:none;
}

blockquote{
  background:var(--flaeche-hoch);
  border:1px solid var(--rand);
  border-left:4px solid var(--dienst);
  border-radius:var(--r);
  padding:16px 20px;
  margin:18px 0;
}
blockquote p{ margin-bottom:10px }
blockquote p:last-child{ margin-bottom:0 }

address{
  font-style:normal;
  background:var(--flaeche);
  border:1px solid var(--rand);
  border-radius:var(--r);
  padding:16px 20px;
  margin:12px 0 18px;
  line-height:1.8;
}

/* ---------------------------------------------------------------------
   Aufklapper — wie in der App: was lang ist, faengt zugeklappt an
   ------------------------------------------------------------------ */

details{
  background:var(--flaeche);
  border:1px solid var(--rand);
  border-radius:var(--r);
  margin:14px 0;
  overflow:hidden;
}
summary{
  cursor:pointer;
  padding:15px 20px;
  font-weight:600;
  list-style:none;
  display:flex; align-items:center; gap:10px;
}
summary::-webkit-details-marker{ display:none }
summary::before{
  content:"+";
  color:var(--violett-hell);
  font-weight:700;
  font-size:18px;
  line-height:1;
  width:14px;
}
details[open] summary::before{ content:"\2212" }   /* Minuszeichen */
details[open] summary{ border-bottom:1px solid var(--rand-leise) }
.aufklapp-inhalt{ padding:18px 20px }

/* ---------------------------------------------------------------------
   Fuss
   ------------------------------------------------------------------ */

.fuss{
  border-top:1px solid var(--rand-leise);
  padding:34px 0 44px;
  color:var(--text-leise);
  font-size:14px;
}
.fussnav{
  display:flex; gap:8px 20px; flex-wrap:wrap;
  margin-bottom:16px;
}
.fuss p{ max-width:70ch }

/* ---------------------------------------------------------------------
   Der Platzhalter, der sich nicht uebersehen laesst
   ---------------------------------------------------------------------
   ERLEDIGT. E-Mail und Telefon sind am 08.09.2026 eingesetzt worden;
   im ganzen Auftritt steht kein Platzhalter mehr. Diese Klasse bleibt
   stehen, weil der naechste Text sie wieder braucht. Solange sie im Dokument
   vorkommt, ist die Seite nicht veroeffentlichungsreif:

       grep -rn "platzhalter" D:\DayHard\Website\vo2max
   ------------------------------------------------------------------ */
.platzhalter{
  display:inline-block;
  background:var(--rot);
  color:var(--auf-hell);
  font-weight:700;
  border-radius:5px;
  padding:1px 8px;
  font-family:ui-monospace,Consolas,monospace;
  font-size:.92em;
}

/* ---------------------------------------------------------------------
   Bildschirmfotos (seit 13.09.2026)

   Es sind die ECHTEN Aufnahmen aus der Release-APK, dieselben wie im
   Play Store - nicht nachgezeichnet, nur verkleinert (WebP, 540 und
   1080 px breit). Liegen alle unter assets/bilder/, kein fremder Server.

   Auf breiten Schirmen ein Raster. Auf dem Telefon eine Leiste zum
   Wischen: vier Bildschirmfotos untereinander waeren vier Bildschirm-
   laengen Scrollen. Die Leiste scrollt IN SICH (overflow-x), die Seite
   selbst bekommt keinen waagerechten Ueberlauf.
   ------------------------------------------------------------------ */
.bilder{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:18px;
  margin:6px 0 0;
  padding:0;
  list-style:none;
  max-width:none;
}
.bilder.zwei{ grid-template-columns:repeat(auto-fill,minmax(200px,260px)) }
.bilder li{ margin:0 }
.bild{ margin:0 }
.bild a{ display:block }
.bild img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--rand);
  border-radius:var(--r);
  background:var(--flaeche);
}
.bild a:hover img{ border-color:var(--blau) }
.bild a:focus-visible{ outline:2px solid var(--blau); outline-offset:3px; border-radius:var(--r) }
.bild figcaption{
  color:var(--text-leise);
  font-size:14px;
  line-height:1.45;
  margin-top:9px;
}
.bild figcaption b{ color:var(--text); font-weight:600 }

/* ---------------------------------------------------------------------
   Kleine Bildschirme
   ------------------------------------------------------------------ */

@media (max-width:600px){
  .huelle{ padding:0 16px }
  .aufmacher{ padding:38px 0 32px }
  section{ padding:34px 0 }
  .karte{ padding:18px }
  .knopf{ width:100%; justify-content:center }
  .kopfnav{ width:100%; margin-left:0; padding-bottom:8px }

  /* Wischleiste statt Raster. Die Leiste reicht bis an den Rand, damit
     man sieht, dass rechts noch etwas kommt. */
  .bilder,.bilder.zwei{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin:6px -16px 0;
    padding:0 16px 10px;
    scroll-padding:0 16px;
  }
  .bilder li{ flex:0 0 68%; scroll-snap-align:start }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie
   auch hier nicht. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation:none !important; transition:none !important }
}

/* Drucken: der Rechtstext soll sich ausdrucken lassen, und zwar
   lesbar. Dunkler Grund kostet dabei nur Toner. */
@media print{
  body{ background:#fff; color:#000 }
  .kopfleiste,.kopfnav,.knopfreihe,.sprachsprung,.aufmacher{ display:none }
  .karte,.kasten,address,blockquote,.tabellenrahmen{
    border:1px solid #999; background:#fff;
  }
  a{ color:#000; text-decoration:underline }
  strong,b{ color:#000 }
  details{ border:1px solid #999 }
  details .aufklapp-inhalt{ display:block }
}