/* Telefontraining, Gestaltung nach references/brand.md. Handy zuerst. */
:root {
  --primaer: #253943;
  --sekundaer: #344D5C;
  --hell: #F6F6F6;
  --dunkel: #2F2F2F;
  --akzent: #9EB0B9;
  --text: #52626B;
  --linie: #E3E7E9;
  --flaeche: #FFFFFF;
  --gut: #2F6B4F;
  --gut-hell: #E8F1EC;
  --hinweis: #8A5A00;
  --hinweis-hell: #FBF3DB;
  --falsch: #9F2F2D;
  --falsch-hell: #FBEBEB;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { background: var(--hell); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--schrift); font-size: 17px; line-height: 1.55;
  color: var(--text); background: var(--hell); min-height: 100vh;
}
h1, h2, h3 { color: var(--dunkel); line-height: 1.25; margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 1em; }
a { color: var(--sekundaer); }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 10; background: var(--primaer); color: var(--hell);
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
}
.kopf img { height: 28px; width: auto; display: block; }
.kopf .titel { font-size: .95rem; font-weight: 600; letter-spacing: .01em; }
.kopf .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kopf a { color: var(--hell); text-decoration: none; font-size: .9rem; opacity: .9; }

.inhalt { max-width: 640px; margin: 0 auto; padding: 20px 16px 96px; }

/* Bausteine */
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 18px; margin-bottom: 14px;
}
.leise { color: #7A8A92; font-size: .9rem; }
.marke {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: #E9EEF0; color: var(--sekundaer);
}
.marke.gut { background: var(--gut-hell); color: var(--gut); }
.marke.hinweis { background: var(--hinweis-hell); color: var(--hinweis); }

.knopf {
  display: block; width: 100%; border: 0; border-radius: 8px; padding: 15px 18px;
  font: 600 1rem var(--schrift); text-align: center; cursor: pointer; text-decoration: none;
  background: var(--primaer); color: var(--hell); transition: transform .1s, background .15s;
}
.knopf:hover { background: var(--sekundaer); }
.knopf:active { transform: scale(.98); }
.knopf.zweit { background: var(--flaeche); color: var(--primaer); border: 1px solid var(--akzent); }
.knopf[disabled] { opacity: .45; cursor: default; }
.knopfleiste {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--hell);
  border-top: 1px solid var(--linie); padding: 12px 16px max(12px, env(safe-area-inset-bottom));
}
.knopfleiste .knopf { max-width: 608px; margin: 0 auto; }

/* Fortschritt */
.balken { height: 8px; background: #DDE3E6; border-radius: 99px; overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--sekundaer); border-radius: 99px; }

/* Lernpfad */
.tag { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.tag strong { color: var(--dunkel); }
.pfad { list-style: none; margin: 0; padding: 0; position: relative; }
.pfad::before {
  content: ""; position: absolute; left: 21px; top: 20px; bottom: 20px; width: 2px; background: var(--linie);
}
.station { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 0 0 14px; }
.punkt {
  flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; background: var(--flaeche); border: 2px solid var(--linie);
  color: #9AA7AD; position: relative; z-index: 1;
}
.station.fertig .punkt { background: var(--sekundaer); border-color: var(--sekundaer); color: var(--hell); }
.station.aktiv .punkt { background: var(--primaer); border-color: var(--primaer); color: var(--hell);
  box-shadow: 0 0 0 5px rgba(52, 77, 92, .15); }
.station .karte { flex: 1; margin: 0; padding: 14px 16px; }
.station.gesperrt .karte { background: transparent; }
.station.gesperrt h3 { color: #9AA7AD; }
.stufen { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.stufe { font-size: .78rem; padding: 2px 8px; border-radius: 6px; background: #EEF1F2; color: #6B7A82; }
.stufe.ok { background: var(--gut-hell); color: var(--gut); }

/* Prüfen */
.aufgabenkopf { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.aufgabenkopf .balken { flex: 1; }
.fall {
  background: var(--flaeche); border-left: 4px solid var(--akzent); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px; margin: 14px 0 20px; color: var(--dunkel);
}
.optionen { display: grid; gap: 10px; }
.option {
  display: block; width: 100%; text-align: left; font: 500 1rem var(--schrift); color: var(--dunkel);
  background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--radius);
  padding: 15px 16px; cursor: pointer;
}
.option.gewaehlt { border-color: var(--sekundaer); }
.option.richtig { border-color: var(--gut); background: var(--gut-hell); }
.option.falsch { border-color: var(--falsch); background: var(--falsch-hell); }
.rueckmeldung { border-radius: var(--radius); padding: 14px 16px; margin-top: 16px; }
.rueckmeldung.richtig { background: var(--gut-hell); color: var(--gut); }
.rueckmeldung.falsch { background: var(--falsch-hell); color: var(--falsch); }
.rueckmeldung strong { display: block; margin-bottom: 2px; }

/* Sprechen und Ergebnis */
.kunde {
  background: var(--primaer); color: var(--hell); border-radius: 14px 14px 14px 4px;
  padding: 14px 16px; margin: 10px 0 18px; font-size: 1.05rem;
}
.kunde small { display: block; opacity: .7; font-size: .78rem; margin-bottom: 2px; letter-spacing: .04em; text-transform: uppercase; }
.wertung { display: flex; align-items: center; gap: 18px; }
.ring {
  --wert: 0; flex: 0 0 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--sekundaer) calc(var(--wert) * 1%), #DDE3E6 0);
}
.ring::before { content: ""; grid-area: 1 / 1; width: 84px; height: 84px; border-radius: 50%; background: var(--flaeche); }
.ring b { grid-area: 1 / 1; z-index: 1; font-size: 2rem; color: var(--dunkel); }
.wertung h2 { margin-bottom: 4px; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linie); }
.liste li:last-child { border-bottom: 0; }
.liste .zeichen { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; margin-top: 2px; }
.liste .ok .zeichen { background: var(--gut-hell); color: var(--gut); }
.liste .fehlt .zeichen { background: var(--falsch-hell); color: var(--falsch); }
.transkript { color: var(--dunkel); }
.transkript mark { border-radius: 3px; padding: 0 2px; }
mark.fuellwort { background: var(--hinweis-hell); color: var(--hinweis); }
mark.floskel, mark.weichmacher { background: #E9EEF0; color: var(--sekundaer); text-decoration: underline dotted; }
mark.du { background: var(--falsch-hell); color: var(--falsch); }
details { border-top: 1px solid var(--linie); padding: 12px 0; }
details summary { cursor: pointer; font-weight: 600; color: var(--primaer); list-style: none; }
details summary::after { content: "+"; float: right; font-weight: 400; }
details[open] summary::after { content: "\2212"; }
.anker { background: #EEF2F4; border-radius: 8px; padding: 12px 14px; color: var(--dunkel); }
.anker::before { content: "Ankersatz"; display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sekundaer); margin-bottom: 4px; }

.aufnahme {
  width: 88px; height: 88px; border-radius: 50%; border: 0; margin: 8px auto; display: grid; place-items: center;
  background: var(--primaer); color: var(--hell); cursor: pointer;
}
.aufnahme.laeuft { background: var(--falsch); animation: puls 1.4s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 12px rgba(159, 47, 45, .12); } }

@media (min-width: 900px) {
  body { font-size: 17.5px; }
  .inhalt { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Ergänzungen für Lernpfad und Leseseiten. */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stationstitel { font-size: 1.02rem; }
.station.gesperrt .stationstitel { color: #9AA7AD; }
.stationstitel a { color: inherit; text-decoration: none; display: block; }
.station .karte, .tag > div { min-width: 0; overflow-wrap: anywhere; }
.tag { flex-wrap: wrap; }
.lesetext { overflow-wrap: anywhere; }
.lesetext blockquote { margin: 0 0 1em; border-left: 4px solid var(--akzent); padding-left: 14px; }
.lesetext .anker { margin: 0 0 1em; }
.lesetext .anker p:last-child { margin-bottom: 0; }
.lesetext ul, .lesetext ol, .station details ul { padding-left: 22px; }
.lesetext li { margin-bottom: .4em; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

/* Ergänzungen für interaktive Prüfungen und Sprechübungen. */
[hidden] { display: none !important; }
.reihenfolgeschritt { display: flex; align-items: center; gap: 6px; }
.reihenfolgeschritt > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.reihenfolgeschritt > button { flex: 0 0 48px; width: 48px; text-align: center; }
.uebungsaktionen { display: flex; gap: 10px; max-width: 608px; margin: 0 auto; }
.uebungsaktionen > a { flex: 1; min-width: 0; }
#aufnahmebereich { margin-top: 14px; }
#aufnahme-status { margin-top: 14px; }
#ergebnis .transkript, #transkript { white-space: pre-wrap; overflow-wrap: anywhere; }
#ergebnis h2:not(:first-child) { margin-top: 14px; }
#ergebnis-titel { margin-top: 6px; }
#musterantwort { margin-top: 10px; }

/* Ergänzungen für die Verwaltung. */
.verwaltung { overflow-wrap: anywhere; }
.verwaltung .transkript { white-space: pre-wrap; }
.verwaltung h2:not(:first-child) { margin-top: 14px; }
.verwaltung .wertung > div { min-width: 0; }
.zugangsformular { display: grid; gap: 10px; }
.zugangsformular input { min-width: 0; width: 100%; padding: 12px 14px; border: 1px solid var(--akzent); border-radius: 8px; font: inherit; color: var(--dunkel); background: var(--flaeche); }

/* Ergänzungen für Tabellen, Anmeldung und Sprechfortschritt. */
.tabellenbereich { max-width: 100%; overflow-x: auto; }
.tabellenbereich table { width: 100%; border-collapse: collapse; }
.tabellenbereich th, .tabellenbereich td { border: 1px solid var(--linie); padding: 10px 12px; min-width: 140px; text-align: left; vertical-align: top; }
.tabellenbereich th { color: var(--dunkel); background: var(--hell); }
.sprechfortschritt { margin-top: 10px; }
.stufen a { text-decoration: none; }