/* Learn GEO – Plattform-Stylesheet. Baut auf den Farbvariablen und dem
   Rahmen aus content/assets/lesson.css auf; hier stehen nur die Bausteine,
   die es in Lektionen nicht gibt (Formulare, Kursliste, Profil, Verwaltung).
   Keine eigenen Farbwerte außerhalb der Variablen (CI.md, Farbmodi). */

/* Lato, selbst gehostet wie im AI-Readiness-Check — kein Google-Fonts-Abruf.
   lesson.css nennt die Familie bereits in --schrift, hier kommen die Dateien. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/lato-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/lato-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lato-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lato-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/lato-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/lato-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

/* Nur für Vorlesewerkzeuge, unsichtbar im Layout. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Seitenkopf der Plattform-Seiten ---------- */

.seiten-titel {
  padding: 2.5rem 0 1.5rem;
  border-bottom: 1px solid var(--hellgrau);
  margin-bottom: 1.75rem;
}

/* Lesefortschritt: die Orientierung innerhalb der Lektion (PLATTFORM-DESIGN.md).
   Seit die Kopfleiste mitscrollt (2026-08-28), haftet der Balken selbst am
   oberen Rand — 2 px, die keinen Platz belegen, sonst wäre er nach dem ersten
   Scrollen unsichtbar und nutzlos. */
.lese-balken {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--cyan);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 30;
}

/* ---------- Meldungen ---------- */

.fehler {
  border-left: 4px solid var(--stark);
  background: var(--flaeche);
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}

.hinweis-block {
  border-left: 4px solid var(--cyan);
  background: var(--weiss);
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}

.randnotiz {
  font-size: 0.85rem;
  color: var(--mittelgrau);
}

/* ---------- Formulare ---------- */

.formular { margin: 1.5rem 0; }

.formular label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mittelgrau);
  margin: 1.1rem 0 0.35rem;
}

.formular input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  background: var(--weiss);
  border: 1px solid var(--hellgrau);
  border-radius: 0;
  padding: 0.65rem 0.75rem;
  /* iOS gibt Suchfeldern sonst runde Ecken — Kollision mit den eckigen Formen. */
  -webkit-appearance: none;
  appearance: none;
}

/* Ohne eigene Regel nimmt der Browser seinen Standard-Placeholder, der im
   dunklen Modus auf dem Feldgrund fast unsichtbar ist. */
.formular input::placeholder {
  color: var(--mittelgrau);
  opacity: 1;
}

.formular input:focus-visible {
  outline: 2px solid var(--cyan-text);
  outline-offset: 1px;
}

.formular .knopf { margin-top: 1.25rem; }

/* Der Knopf der Plattform: dieselbe Form wie der Weiter-Knopf im Quiz. */
.knopf {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  background: var(--invers-grund);
  color: var(--invers-text);
  border: 1px solid var(--invers-grund);
  border-radius: 0;
  padding: 0.7rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-decoration: none;
  margin: 1.5rem 0;
}

.knopf .pfeil { color: var(--akzent-invers); }
.knopf:hover { background: var(--dunkelgrau); border-color: var(--dunkelgrau); color: var(--invers-stark); }
:root[data-theme="dark"] .knopf:hover,
:root:not([data-theme="light"]) .knopf:hover { color: var(--invers-text); }
.knopf:focus-visible { outline: 2px solid var(--cyan-text); outline-offset: 2px; }

/* Ein Quiz-Weiter als Link statt Knopf (auf der Plattform). */
.quiz a.weiter { text-decoration: none; }

/* ---------- Kursseite ---------- */

.fortschritt { margin: 1.75rem 0 0; }

.fortschritt .balken {
  height: 6px;
  background: var(--hellgrau);
}

.fortschritt .fuellung {
  height: 100%;
  background: var(--cyan);
}

.fortschritt .stand {
  font-size: 0.85rem;
  color: var(--dunkelgrau);
  margin: 0.6rem 0 0;
}

.kurs-teil { margin-top: 2.75rem; }

.kurs-teil h2 { margin-bottom: 0.35rem; }

.teil-nr {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mittelgrau);
  margin-bottom: 0.2rem;
}

.teil-beschreibung {
  font-size: 0.9rem;
  color: var(--mittelgrau);
  margin: 0 0 1rem;
}

.lektionsliste {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hellgrau);
}

.lektionsliste li {
  border-bottom: 1px solid var(--hellgrau);
  margin: 0;
}

.lektionsliste a,
.lektionsliste .geplant,
.lektionsliste li > span:first-child {
  text-decoration: none;
}

.lektionsliste a,
.lektionsliste li.geplant {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "nr titel haken" "nr meta haken";
  column-gap: 0.85rem;
  align-items: baseline;
  padding: 0.8rem 0.25rem;
  color: var(--text);
}

.lektionsliste a:hover { background: var(--weiss); color: var(--text); }
.lektionsliste a:hover .ltitel { color: var(--stark); }
.lektionsliste a:focus-visible { outline: 2px solid var(--cyan-text); outline-offset: -2px; }

.lnr {
  grid-area: nr;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--mittelgrau);
}

.ltitel { grid-area: titel; line-height: 1.35; }

.lmeta, .lstatus {
  grid-area: meta;
  font-size: 0.8rem;
  color: var(--mittelgrau);
  margin-top: 0.1rem;
}

.haken {
  grid-area: haken;
  align-self: center;
  width: 16px;
  height: 16px;
}

.haken path {
  stroke: var(--cyan-text);
  stroke-width: 2.2;
  fill: none;
}

.lektionsliste li.geplant { color: var(--mittelgrau); }
.lektionsliste li.geplant .ltitel { color: var(--mittelgrau); }

/* ---------- Glossar ---------- */

.suche { margin: 0 0 1.5rem; }
.suche input { max-width: 22rem; }

.glossar { margin: 0; }

.glossar-eintrag {
  border-bottom: 1px solid var(--hellgrau);
  padding: 0.9rem 0;
}

.glossar-eintrag dt {
  font-weight: 700;
  color: var(--stark);
}

.glossar-eintrag dd {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
}

.lektionsverweis {
  font-size: 0.8rem;
  color: var(--dunkelgrau);
  white-space: nowrap;
}

.lektionsverweis.folgt {
  color: var(--mittelgrau);
}

/* ---------- Profil ---------- */

/* Dieselbe Form wie das Quiz-Ergebnis (lesson.css scopet .ergebnis auf
   .quiz, deshalb stehen die Regeln hier noch einmal für das Profil). */
.kennzahlen {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.kennzahlen > div {
  flex: 1;
  border: 1px solid var(--hellgrau);
  background: var(--weiss);
  padding: 0.9rem 0.5rem;
  text-align: center;
}

.kennzahlen .zahl {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--stark);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.kennzahlen .was {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mittelgrau);
}

.abzeichen-reihe {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr));
  gap: 0.6rem;
  padding: 0;
  margin: 1.25rem 0;
}

.abzeichen {
  border: 1px solid var(--hellgrau);
  background: var(--weiss);
  padding: 0.8rem 0.5rem 0.7rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
}

.abzeichen-nr {
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--mittelgrau);
  line-height: 1.2;
}

.abzeichen-titel {
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--dunkelgrau);
  min-height: 2.6em;
}

.abzeichen-stand {
  font-size: 0.7rem;
  color: var(--mittelgrau);
}

.abzeichen.erreicht {
  background: var(--invers-grund);
  border-color: var(--invers-grund);
  box-shadow: inset 0 -3px 0 var(--akzent-invers);
}

.abzeichen.erreicht .abzeichen-nr { color: var(--invers-stark); }
.abzeichen.erreicht .abzeichen-titel { color: var(--invers-text); }
.abzeichen.erreicht .abzeichen-stand { color: var(--invers-text); }

.auffrischung {
  padding-left: 1.15rem;
}

.verlauf {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--hellgrau);
}

.verlauf li {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  border-bottom: 1px solid var(--hellgrau);
  padding: 0.55rem 0.25rem;
  font-size: 0.9rem;
  margin: 0;
}

.verlauf .vdatum { color: var(--mittelgrau); font-size: 0.8rem; }
.verlauf .vergebnis { color: var(--dunkelgrau); font-size: 0.8rem; text-align: right; }
.verlauf .leer { display: block; color: var(--mittelgrau); }

.konto-bereich {
  border-top: 1px solid var(--hellgrau);
  margin-top: 2rem;
  padding-top: 1.25rem;
}

.konto-bereich summary {
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--dunkelgrau);
}

.abmelden { margin-top: 1.5rem; }

/* ---------- Verwaltung ---------- */

.kontenliste {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  border-top: 1px solid var(--hellgrau);
}

.konto-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name aktionen" "seit aktionen";
  align-items: center;
  border-bottom: 1px solid var(--hellgrau);
  padding: 0.7rem 0.25rem;
  margin: 0;
}

.konto-zeile .kname { grid-area: name; color: var(--stark); }
.konto-zeile .kseit { grid-area: seit; font-size: 0.8rem; color: var(--mittelgrau); }

.konto-zeile .rolle {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-text);
  margin-left: 0.4rem;
}

.konto-zeile .kaktionen {
  grid-area: aktionen;
  display: flex;
  gap: 0.5rem;
}

.startpasswort {
  font-size: 1rem;
  letter-spacing: 0.05em;
}

/* ---------- Breiter Bildschirm ---------- */

@media (min-width: 40rem) {
  .knopf { max-width: 26rem; }
  .formular input { max-width: 26rem; }
}