/* ==========================================================================
   start.css — seitenspezifische Styles für den Hub (start.html)
   Baut auf base.css (Tokens + Karten-Bühne §13) und sidebar.css (Shell) auf.
   Warme Shila-CI: weiße Karten auf cremefarbenem Grund, Koralle sparsam.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lade- und Fehler-Zustand — ruhig zentriert, kein Layout-Springen
   -------------------------------------------------------------------------- */

.start-lade,
.start-fehler {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-s);
  text-align: center;
  padding: var(--abstand-l);
}

.start-lade {
  animation: start-pulsieren 1.6s ease-in-out infinite;
}

.start-lade-logo {
  width: 11rem;
  height: auto;
  margin-bottom: var(--abstand-s);
}

.start-fehler {
  max-width: 34rem;
  margin: 0 auto;
}

@keyframes start-pulsieren {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .start-lade { animation: none; }
}

/* --------------------------------------------------------------------------
   2. Hub-Kopf — persönliche Begrüßung + Gesamt-Fortschritt (auf der Bühne,
   bewusst ohne Karte: die Ansprache führt, die Karten folgen)
   -------------------------------------------------------------------------- */

.hub-begruessung {
  /* Größer als der Standard-h1: die Begrüßung ist der Auftakt des Hubs.
     Der Vorname darf als <em> die kursiv-Koralle-Signatur tragen (base.css). */
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  margin-bottom: var(--abstand-s);
}

/* Die eine ruhige Shila-Zeile unter der Begrüßung — gedimmt (AA auf Creme) */
.hub-zeile {
  color: var(--farbe-text-gedimmt);
  margin: 0;
  max-width: 38rem;
}

/* Gesamt-Fortschritt: „x von y Lektionen" + schmaler Koralle-Balken */
.hub-fortschritt {
  margin-top: var(--abstand-l);
  max-width: 24rem;
}

.hub-fortschritt-text {
  font-size: var(--schrift-groesse-s);
  color: var(--farbe-text-gedimmt);
  margin-bottom: var(--abstand-s);
}

.hub-fortschritt-balken {
  height: 5px;
}

.hub-fortschritt .fortschritt-mini-fuellung {
  background-color: var(--farbe-akzent-koralle);
}

/* --------------------------------------------------------------------------
   3. Inhaltsbereich — Karten untereinander mit großzügigem Rhythmus
   -------------------------------------------------------------------------- */

.start-inhalt > * + * {
  margin-top: var(--abstand-xl);
}

/* --------------------------------------------------------------------------
   4. „Dein Einstieg" — Kicker, Titel, Begrüßungsvideo (16:9), Intro-Text
   -------------------------------------------------------------------------- */

.start-einstieg-kicker {
  display: block;
  margin-bottom: var(--abstand-xs);
}

.start-einstieg-titel {
  margin-bottom: var(--abstand-l);
}

/* Responsives 16:9-Video, ruhige Fläche solange nichts geladen ist */
.start-video {
  aspect-ratio: 16 / 9;
  background-color: var(--farbe-hintergrund-leicht);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-bottom: var(--abstand-l);
}

.start-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.start-video-platzhalter {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-groesse-s);
}

/* Erstlogin-Weiter-Button: klarer nächster Schritt unter dem Video */
.start-einstieg-cta {
  margin-top: var(--abstand-l);
}

/* Intro-Text (Admin-HTML) — angenehme Lese-Typografie */
.start-intro :last-child {
  margin-bottom: 0;
}

.start-intro h2,
.start-intro h3 {
  margin-top: var(--abstand-l);
}

.start-intro ul,
.start-intro ol {
  margin-bottom: var(--abstand-m);
  padding-left: var(--abstand-m);
}

/* --------------------------------------------------------------------------
   4b/5. „Willkommen"-Zeile — der Einstiegspunkt in voller Breite über den
        Modulen (warmes Beige). Nur für Wiederkehrer sichtbar (start.js).
        Das Willkommensvideo klappt beim Klick in voller Breite darunter auf.
   -------------------------------------------------------------------------- */

.duo-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--radius-m);
  padding: var(--abstand-xl);
  min-height: 11rem;
}

.duo-karte .button {
  margin-top: auto;
  flex: none;
}

.start-weiter-text {
  min-width: 0;
  margin-bottom: var(--abstand-l);
}

/* Label über dem Titel: Koralle-Kicker (.kicker aus base.css),
   nur der enge Abstand zum Titel wird hier gesetzt. */
.start-weiter-label {
  display: block;
  margin-bottom: var(--abstand-xs);
}

/* Titel in der Display-Schrift — trägt die Zeile optisch */
.start-weiter-titel {
  font-family: var(--schrift-familie-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 600;
  line-height: var(--schrift-zeilenhoehe-titel);
  text-wrap: balance;
  margin: 0;
}

/* Beige Karte: warm, klar — das Beige aus dem Shila-CI */
.duo-beige {
  background-color: var(--farbe-buehne);
  border: 1px solid transparent;
}

/* „Weiter hier"-Markierung: hebt die Modul-Kachel hervor, bei der das
   Mitglied weitermacht (ersetzt die frühere „Weitermachen"-Karte). */
.kachel-weiter {
  border-color: var(--farbe-akzent-koralle);
  box-shadow: 0 0 0 1px var(--farbe-akzent-koralle);
}

.kachel-weiter-badge {
  font-size: var(--schrift-groesse-xs);
  font-weight: var(--schrift-gewicht-stark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-invers);
  background-color: var(--farbe-akzent-koralle);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}

/* Aufgeklapptes Willkommensvideo: volle Breite unter dem Duo */
.start-willkommen-video {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  background-color: var(--farbe-hintergrund-leicht);
}

.start-willkommen-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Modul-Bereich — Überschrift + Kachel-Raster (Klassen aus base.css §13)
   -------------------------------------------------------------------------- */

.start-module-titel {
  margin-bottom: var(--abstand-l);
}

/* Kopf einer Kachel: Modul-Nummer links, Häkchen/Schloss rechts */
.kachel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s);
}

.kachel-nummer {
  font-size: var(--schrift-groesse-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}

/* Klickbare Kachel: Hover-Rahmen wandert zu Koralle (statt neutralem Grau),
   und die Status-Zeile („Ansehen"/„Weiterlernen") greift den Akzent auf —
   dezentes Signal, dass die Kachel klickbar ist. Übergang via base.css. */
a.kachel:hover {
  border-color: var(--farbe-akzent-koralle);
}

a.kachel:hover .kachel-status {
  color: var(--farbe-akzent-koralle);
}

/* Gesperrte Kacheln liegen auf Beige — leise Meta/Nummer auf gedimmt heben
   (AA-Kontrast auf warmem Grund). */
.kachel-gesperrt .kachel-nummer,
.kachel-gesperrt .kachel-meta {
  color: var(--farbe-text-gedimmt);
}

.kachel-schloss-icon,
.kachel-fertig-haken svg {
  width: 0.75rem;
  height: 0.75rem;
}

.kachel-schloss-icon {
  color: var(--farbe-text-leise);
}

.kachel-titel {
  /* Bewusst Fließtext-Schrift (Montserrat) in Fett statt der Display-Serifen,
     die h3 sonst erbt — Kachel-Titel sollen wie die Beschreibung wirken
     (Max' Design-Vorgabe 04.08.). */
  font-family: var(--schrift-familie);
  font-size: var(--schrift-groesse-m);
  font-weight: var(--schrift-gewicht-stark);
  line-height: var(--schrift-zeilenhoehe-titel);
  margin: 0;
}

.kachel-beschreibung {
  font-size: var(--schrift-groesse-s);
  color: var(--farbe-text-gedimmt);
  margin: 0;
}

/* Fortschritts-Füllung der Kacheln in Koralle (Spur bleibt warm-neutral) —
   lebendiger Akzent genau da, wo Fortschritt gefeiert wird. */
.kachel .fortschritt-mini-fuellung {
  background-color: var(--farbe-akzent-koralle);
}

/* Meta + Fortschritt an den unteren Rand der Kachel schieben */
.kachel-fuss {
  margin-top: auto;
  padding-top: var(--abstand-s);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.kachel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s);
  font-size: var(--schrift-groesse-xs);
  color: var(--farbe-text-leise);
}

/* Statuszeile: „Ansehen" / „Weiterlernen" / „Abgeschlossen" / Freischalt-Datum */
.kachel-status {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  font-size: var(--schrift-groesse-s);
  font-weight: var(--schrift-gewicht-mittel);
  color: var(--farbe-text);
}

.kachel-status svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* In gesperrten/fertigen Kacheln wirkt die Statuszeile ruhiger */
.kachel-gesperrt .kachel-status {
  color: var(--farbe-text-gedimmt);
  font-weight: var(--schrift-gewicht-normal);
}

/* --------------------------------------------------------------------------
   7. Fußzeile — Impressum/Datenschutz, dezent
   -------------------------------------------------------------------------- */

.start-fuss {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-xl) var(--abstand-l) var(--abstand-xxl);
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  flex-wrap: wrap;
  font-size: var(--schrift-groesse-xs);
  color: var(--farbe-text-leise);
}

.start-fuss a {
  color: var(--farbe-text-leise);
}

.start-fuss a:hover {
  color: var(--farbe-text-gedimmt);
}

.start-fuss-trenner {
  color: var(--farbe-rahmen-warm);
}