/*
  Handy zuerst. Systemschriften, keine Webschriften: nichts wird nachgeladen,
  nichts springt beim Laden. Helligkeit richtet sich nach dem Geraet.
  Tippziele mindestens 44 mal 44 Pixel, ohne Ausnahme.
*/

:root {
  --grund: #ffffff;
  --grund-karte: #f4f4f6;
  --grund-tief: #eaeaee;
  --schrift: #17171b;
  --schrift-leise: #5c5c66;
  --linie: #d9d9e0;
  --betont: #1b6ef3;
  --betont-schrift: #ffffff;
  --gut: #17794a;
  --warnung: #8a5a00;
  --schlecht: #b3261e;
  --tippziel: 44px;
  --rand: 16px;
  --leiste-hoehe: 62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #121216;
    --grund-karte: #1c1c22;
    --grund-tief: #26262e;
    --schrift: #f2f2f5;
    --schrift-leise: #a6a6b2;
    --linie: #33333d;
    --betont: #4a8dff;
    --betont-schrift: #0b0b0f;
    --gut: #5ed49a;
    --warnung: #ffc267;
    --schlecht: #ff8a80;
  }
}

* { box-sizing: border-box; }

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

h1, h2, h3 { margin: 0; font-weight: 700; }

/* Anmeldung */

.tor {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--grund);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rand);
}

.tor[hidden] { display: none; }

.tor-inhalt { width: 100%; max-width: 420px; }
.tor-inhalt h1 { font-size: 26px; margin-bottom: 10px; }
.tor-hinweis { color: var(--schrift-leise); margin: 0 0 20px; }
.tor-hinweis.fehler { color: var(--schlecht); }

#tor-formular { display: flex; flex-direction: column; gap: 12px; }

input, textarea {
  font: inherit;
  color: var(--schrift);
  background: var(--grund-karte);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: var(--tippziel);
  width: 100%;
}

textarea { min-height: 160px; resize: vertical; }

/* Knoepfe */

.knopf {
  font: inherit;
  font-weight: 600;
  color: var(--schrift);
  background: var(--grund-tief);
  border: 1px solid var(--linie);
  border-radius: 12px;
  min-height: var(--tippziel);
  min-width: var(--tippziel);
  padding: 11px 16px;
  cursor: pointer;
  touch-action: manipulation;
}

.knopf:disabled { opacity: 0.5; cursor: default; }
.knopf-klein { padding: 8px 12px; font-size: 15px; }

.knopf-gross {
  background: var(--betont);
  color: var(--betont-schrift);
  border-color: transparent;
  font-size: 18px;
  min-height: 52px;
}

/* Der entscheidende Knopf: sichtbar das Groesste auf seiner Karte. */
.knopf-freigeben {
  background: var(--betont);
  color: var(--betont-schrift);
  border-color: transparent;
  font-size: 20px;
  font-weight: 700;
  min-height: 60px;
  width: 100%;
}

.knopf-abbrechen { background: transparent; }

/* Geruest */

.rahmen[hidden] { display: none; }

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) var(--rand) 10px;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}

.kopf h1 { font-size: 22px; }

#haupt {
  padding: var(--rand);
  padding-bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom) + 28px);
}

.bereich[hidden] { display: none; }

.leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  background: var(--grund);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}

.leiste-knopf {
  flex: 1 1 0;
  min-height: var(--leiste-hoehe);
  min-width: var(--tippziel);
  border: 0;
  background: transparent;
  color: var(--schrift-leise);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.leiste-knopf[aria-current="true"] {
  color: var(--betont);
  box-shadow: inset 0 3px 0 0 var(--betont);
}

/* Karten und Listen */

.karte {
  background: var(--grund-karte);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
}

.karte-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.marke {
  display: inline-block;
  background: var(--grund-tief);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
}

/* Ohne diese Zeile bliebe die KI-Marke sichtbar: das display der Klasse
   schlaegt das display: none, das der Browser einem hidden-Element gibt.
   Dieselbe Zeile gibt es aus demselben Grund fuer .tor, .rahmen, .bereich
   und .sprechtext. */
.marke[hidden] { display: none; }

.leise { color: var(--schrift-leise); font-size: 14px; }

/* Beschriftung ueber einem bearbeitbaren Feld (etwa "Text im Video"), damit
   klar ist, was dort steht, ohne dass jemand "Hook" oder "Caption" lesen
   muss. Klein und leise wie .fussnote, aber davor statt danach. */
.feld-label { color: var(--schrift-leise); font-size: 13px; font-weight: 700; margin: 0 0 4px; }

/* Der Hook ist jetzt antippbar, siehe hookTeil in app.js. */
.hook { font-size: 19px; font-weight: 700; margin: 0 0 8px; cursor: pointer; }

/* Das Eingabefeld, das an die Stelle von .hook tritt, sobald sie angetippt
   wird: gleiche Schriftgroesse und gleiches Gewicht, damit der Wechsel nicht
   wie ein Sprung wirkt (siehe .sprechtext-feld weiter unten fuer denselben
   Gedanken beim Sprechtext). */
.hook-feld { font-size: 19px; font-weight: 700; margin: 0 0 8px; }

/* Die Caption: derselbe Kasten wie .sprechtext (Rahmen, Hintergrund,
   Innenabstand), aber in normaler Schriftgroesse statt der auf Armlaenge
   vergroesserten Sprechtext-Schrift: sie wird beim Pruefen vor der Freigabe
   gelesen, nicht beim Filmen aus der Distanz. */
.caption {
  margin-top: 6px;
  padding: 14px;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  cursor: pointer;
}

.caption-feld { margin-top: 6px; min-height: 140px; }

/* Das Kommentar-Keyword: bewusst auffaelliger als Hook und Caption (breiterer
   Rahmen in der Akzentfarbe, groessere, weit gesetzte Schrift), damit Jan es
   vor dem Filmen auf einen Blick findet und laut vorlesen kann, statt es im
   Fliesstext der Caption zu suchen. Nicht antippbar zum Bearbeiten wie .hook
   und .caption, sondern zum Kopieren, siehe keywordTeil in app.js. */
.keyword {
  margin-top: 6px;
  padding: 14px;
  background: var(--grund);
  border: 2px solid var(--betont);
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: var(--tippziel);
  display: flex;
  align-items: center;
}

/* Der fertig zusammengesetzte lead-Befehl fuer den Mac: Monospace wie in
   einem Terminal, damit klar ist, dass es ein Befehl zum Abtippen bzw.
   Kopieren ist, keine Anzeige eines Textfelds. Bricht um statt seitlich zu
   scrollen (siehe .sprechtext), 390px Handybreite reicht sonst nicht. */
.befehl {
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  cursor: pointer;
  min-height: var(--tippziel);
  display: flex;
  align-items: center;
}

.zeile { margin: 0 0 6px; }
.abstand { margin-top: 12px; }

.knopfreihe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.knopfreihe .knopf { flex: 1 1 140px; }

/* Zwei Knoepfe nebeneinander mit laengerer Beschriftung ("Roh hochladen" und
   "Fertig hochladen", "Ja, anschalten" und "Abbrechen"): bei schmalen Handys
   (390px) reicht die Breite sonst nur fuer den kuerzeren Text auf einer Zeile,
   der laengere bricht um, und das Paar wirkt schief. Etwas weniger
   Innenabstand statt kuerzerer Beschriftung. Hiess bis Stufe 3
   .knopfreihe-video, weil es zuerst nur das Upload-Paar betraf. */
.knopfreihe-eng { gap: 8px; }
.knopfreihe-eng .knopf { padding-left: 10px; padding-right: 10px; }

/* Der Sprechtext: gross genug, um ihn beim Aufnehmen aus Armlaenge zu lesen,
   und antippbar, siehe sprechtextTeil in app.js: ein Tipp verwandelt genau
   diesen Kasten in ein Textfeld, an derselben Stelle. */
.sprechtext {
  margin-top: 12px;
  padding: 14px;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 12px;
  font-size: 25px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  hyphens: none;
  cursor: pointer;
}

.sprechtext[hidden] { display: none; }

/* Der Text einer gespeicherten Notiz: Jans eigene Worte, so wie er sie
   getippt oder diktiert hat, mit seinen Zeilenumbruechen. Nicht so gross wie
   .sprechtext, den er beim Filmen ablesen muss, sondern normale Lesegroesse:
   eine Notiz wird gelesen, nicht vorgelesen. */
.notiz-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Die Herkunftszeile einer Notiz aus dem Themen-Radar oder einer Claude-Sitzung
   (herkunft ungleich 'jan', siehe notizHerkunftZeileBauen in app.js). Der Link
   zur Quelle hebt sich farblich ab, sonst sieht er wie normaler leiser Text aus
   und niemand tippt ihn an. */
.notiz-herkunft { margin-top: 6px; }
.notiz-herkunft a { color: var(--betont); }

/* Das Textfeld, das an die Stelle von .sprechtext tritt, sobald sie
   angetippt wird: gleiche Schriftgroesse und gleicher Zeilenabstand, damit
   der Wechsel nicht wie ein Sprung wirkt. */
.sprechtext-feld {
  margin-top: 12px;
  font-size: 25px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  min-height: 220px;
}

/* Die Bildseiten eines Karussells, waagerecht zum Wischen (siehe seitenTeil
   in app.js). scroll-snap laesst jede Seite einrasten, statt irgendwo
   zwischen zwei Seiten stehen zu bleiben: auf dem Handy ist das der
   Unterschied zwischen "durchblaettern" und "herumschieben".

   Eine Seite ist etwas schmaler als der Streifen (86 Prozent), damit die
   naechste am Rand angeschnitten sichtbar bleibt. Ohne diesen Anschnitt sieht
   ein Karussell aus wie ein einzelnes Bild, und niemand wischt weiter.

   aspect-ratio haelt den Platz frei, bevor das Bild da ist: sonst springt die
   ganze Karte, sobald die erste Seite geladen ist. 1080 zu 1350 ist genau das
   Format, in dem gerendert wird (BREITE und HOEHE in src/karussell/rendern.ts). */
.seiten {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.seite-bild {
  flex: 0 0 86%;
  width: 86%;
  aspect-ratio: 1080 / 1350;
  scroll-snap-align: center;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: var(--grund);
  object-fit: contain;
}

/* Befund 1 der Endpruefung Stufe 5: die eingebettete Videovorschau auf der
   Konzept-Karte (siehe videoVorschau in web/app.js). Breite 100 Prozent und
   das Hochformat der Reels (1080 zu 1920, siehe BREITE/HOEHE in
   src/reel/textebene.ts) als aspect-ratio, damit die Karte auf dem Handy
   nicht gesprengt wird und schon vor dem Laden Platz freihaelt. */
.karte-video {
  display: block;
  width: 100%;
  aspect-ratio: 1080 / 1920;
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: var(--grund);
  object-fit: contain;
}

/* Zustaende */

.hinweis {
  padding: 16px;
  border-radius: 12px;
  background: var(--grund-karte);
  border: 1px solid var(--linie);
  color: var(--schrift-leise);
}

.hinweis-fehler { color: var(--schlecht); }
.hinweis-gut { color: var(--gut); }
/* overflow-wrap, weil in einer Fehlermeldung die Antwort des Servers steckt
   und darin ein Stueck ohne Leerzeichen stehen kann (eine Anfrage-Kennung,
   eine Adresse). Ohne diese Zeile laeuft so ein Stueck bei 375 Pixeln aus der
   Karte heraus, und der Rest des Satzes ist nicht mehr zu lesen. */
.meldung { margin: 10px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.meldung-fehler { color: var(--schlecht); }
.meldung-gut { color: var(--gut); }

.kacheln { display: flex; gap: 12px; margin-top: 8px; }
.kachel { flex: 1 1 0; }
.kachel-zahl { font-size: 27px; font-weight: 700; }

/* Die oberste Reihe auf Heute: vier Kacheln, zwei mal zwei. Nebeneinander
   waeren sie bei 375px keine 80 Pixel breit, und eine zweistellige Zahl mit
   Beschriftung passt dort nicht hinein. Grid statt flex-wrap, damit beide
   Zeilen gleich hoch sind, auch wenn eine Unterzeile umbricht. */
.kacheln-vier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Eine antippbare Kachel. Ein button bringt eigene Voreinstellungen mit
   (mittige Schrift, Systemschriftart, eigener Rahmen), die hier alle
   zurueckgesetzt werden: sichtbar soll sie genau wie eine .karte aussehen,
   sich aber wie ein Knopf verhalten. */
.kachel-knopf {
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  touch-action: manipulation;
  margin-bottom: 0;
  /* Ein button zentriert seinen Inhalt senkrecht. In einer Reihe aus zwei
     Kacheln, von denen eine eine umgebrochene Unterzeile hat, stuenden die
     beiden Beschriftungen dann auf verschiedenen Hoehen: die Reihe saehe
     schief aus. Diese drei Zeilen setzen den Inhalt nach oben. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Eine Kachel mit dem Wert 0 wird gezeigt, aber gedaempft: eine leere
   Uebersicht ist auch eine Auskunft, sie soll den Blick nur nicht auf sich
   ziehen. */
.kachel-null { opacity: 0.55; }

/* Ueberschrift eines ganzen Abschnitts ("Als Naechstes", "Schon
   rausgegangen"), deutlich groesser als die Tagesueberschriften darunter
   (.tag-kopf): stuenden beide gleich da, waere nicht zu erkennen, wo ein
   Abschnitt aufhoert und der naechste anfaengt. */
.abschnitt-kopf {
  margin: 30px 0 12px;
  font-size: 20px;
  font-weight: 700;
}

.abschnitt-kopf:first-child { margin-top: 0; }

.balken {
  height: 10px;
  border-radius: 999px;
  background: var(--grund-tief);
  overflow: hidden;
  margin-top: 10px;
}

.balken-fuell { height: 100%; background: var(--gut); }
.balken-fuell.warnung { background: var(--warnung); }
.balken-fuell.schlecht { background: var(--schlecht); }

.fortschritt {
  height: 12px;
  border-radius: 999px;
  background: var(--grund-tief);
  overflow: hidden;
  margin-top: 12px;
}

.fortschritt-fuell {
  height: 100%;
  width: 0%;
  background: var(--betont);
  transition: width 0.2s linear;
}

.tag-kopf {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--schrift-leise);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tag-kopf:first-child { margin-top: 0; }

.eintrag {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}

.eintrag:last-child { border-bottom: 0; }
.eintrag-zeit { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 58px; }
.eintrag-text { flex: 1 1 auto; }

.fussnote { color: var(--schrift-leise); font-size: 14px; margin-top: 8px; }

/* Der Zeichenzaehler beim Hook, sobald die Grenze ueberschritten ist
   (HOOK_MAX_ZEICHEN in app.js). Ersetzt nur die Farbe von .fussnote. */
.fussnote-fehler { color: var(--schlecht); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}