:root {
  --gruen: #c9efc4;
  --gruen-dunkel: #2e7d32;
  --gelb: #fff0a3;
  --gelb-dunkel: #a68a00;
  --rot: #c62828;
  --rand: #ddd;
  --text: #222;
  --leise: #666;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: var(--text); background: #fafaf7; }
header { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .5rem 1.5rem; background: #fff; border-bottom: 1px solid var(--rand); }
nav a { margin-right: 1.2rem; color: var(--leise); text-decoration: none; font-weight: 600; }
nav a.aktiv { color: var(--text); border-bottom: 3px solid var(--gruen-dunkel); }
main { max-width: 1400px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }
h1 { font-size: 1.5rem; margin: .5rem 0; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.klein { font-size: .85rem; color: var(--leise); }
.fehler, #meldung { color: #fff; background: var(--rot); padding: .5rem 1.5rem; }
button { font: inherit; padding: .3rem .7rem; border: 1px solid var(--rand); border-radius: 6px; background: #fff; cursor: pointer; }
button:hover { background: #f0f0f0; }
button.gruen { background: var(--gruen); border-color: var(--gruen-dunkel); }
button.gelb { background: var(--gelb); border-color: var(--gelb-dunkel); }
button.rot { background: #fbe0e0; border-color: var(--rot); }
button.laut { border: none; background: none; padding: 0 .2rem; }

/* Wörter */
.wort { cursor: pointer; border-radius: 3px; padding: 0 1px; }
.wort:hover { outline: 1px solid #999; }
.wort.s-gruen { background: var(--gruen); }
.wort.s-gelb { background: var(--gelb); }
.wort.verbform { font-weight: 700; text-decoration: underline; }
.wort.s-aus { color: #999; text-decoration: line-through; }
.wort.zaehlt-nicht { color: #888; font-style: italic; }

/* Videos */
.liste { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.kachel { display: block; padding: .8rem; background: #fff; border: 1px solid var(--rand); border-radius: 10px; color: inherit; text-decoration: none; }
.kachel img { width: 100%; border-radius: 6px; }
.balken-box { margin: .5rem 0; }
.balken { display: flex; height: 10px; background: #eee; border-radius: 5px; overflow: hidden; }
.b-gruen { background: var(--gruen-dunkel); }
.b-gelb { background: #e6c200; }
.videoseite { display: grid; gap: 1.5rem; }
@media (min-width: 1100px) {
  .videoseite { grid-template-columns: minmax(420px, 45%) 1fr; }
  .videoseite .links-spalte { position: sticky; top: 4rem; align-self: start; }
}
.video { position: relative; padding-top: 56.25%; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.transkript { font-size: 1.2rem; line-height: 2; }
.transkript p { margin: 0 0 .4rem; }
.zeit { font-size: .75rem; color: #999; font-variant-numeric: tabular-nums; user-select: none; }

/* Popover */
#popover { position: absolute; z-index: 10; width: 330px; padding: .8rem; background: #fff; border: 1px solid #bbb;
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); }
#popover > * + * { margin-top: .45rem; }
.pop-kopf { display: flex; align-items: center; gap: .3rem; font-size: 1.3rem; }
.pop-kopf .zu { margin-left: auto; border: none; font-size: 1.2rem; }
.uebersetzung { font-size: 1.1rem; font-weight: 600; }
.hinweis { font-size: .85rem; background: #fff6e0; padding: .3rem .5rem; border-radius: 6px; }
.knoepfe, .links { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.links a { font-size: .85rem; }

/* Karten */
.karte { max-width: 760px; margin: 1rem 0; padding: 1.5rem; background: #fff; border: 1px solid var(--rand); border-radius: 12px; }
.karte > * + * { margin-top: 1rem; }
.satz-es { font-size: 1.6rem; line-height: 1.8; margin: 0; }
.satz-de { font-size: 1.3rem; margin: 0; }
.antwort { border-top: 1px dashed var(--rand); padding-top: 1rem; }
.antwort > * + * { margin-top: .8rem; }

/* Grammatik + Wortschatz */
details.verb { background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: .5rem .8rem; margin: .4rem 0; }
details.verb summary { cursor: pointer; }
table { border-collapse: collapse; margin-top: .5rem; }
td { padding: .25rem .8rem .25rem 0; vertical-align: top; }
.tabs a { margin-right: 1rem; font-weight: 600; color: var(--leise); text-decoration: none; }
.tabs a.aktiv { color: var(--text); border-bottom: 3px solid var(--gruen-dunkel); }
.wortliste td:first-child { min-width: 12rem; }

/* Statistik */
table.statistik th { text-align: left; font-size: .85rem; color: var(--leise); padding: .25rem .8rem .25rem 0; }
table.statistik td { font-variant-numeric: tabular-nums; }
.balken-zelle { width: 180px; }
.zeitbalken { height: 10px; min-width: 2px; background: var(--gruen-dunkel); border-radius: 5px; }

/* Lückentext */
.luecke { display: inline-block; min-width: 5em; border-bottom: 2px solid #888; text-align: center; border-radius: 3px; }
.luecke.richtig { background: var(--gruen); }
.luecke.falsch { background: #fbe0e0; }
.kreuz { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); grid-template-areas: ". o ." "l . r" ". u ."; gap: .5rem; max-width: 560px; }
.kreuz .ArrowUp { grid-area: o; }
.kreuz .ArrowLeft { grid-area: l; }
.kreuz .ArrowRight { grid-area: r; }
.kreuz .ArrowDown { grid-area: u; }
.kreuz button { font-size: 1.2rem; padding: .5rem; white-space: pre; }
.kreuz button:disabled { color: inherit; cursor: default; }
.freitext > * + * { margin-top: .5rem; }
.eingabe { font: inherit; font-size: 1.3rem; padding: .3rem .5rem; width: 14em; border: 1px solid #999; border-radius: 6px; }
.akzent { min-width: 2.4em; font-size: 1.1rem; }
.akzent-tipp { font-size: 1rem; color: var(--gruen-dunkel); font-weight: 600; }

/* Häufigste Wörter */
table.top tr.s-gruen td:nth-child(2) { background: var(--gruen); }
table.top tr.s-gelb td:nth-child(2) { background: var(--gelb); }
table.top td button { padding: .1rem .5rem; margin-right: .2rem; }
table.top tr.s-aus td:nth-child(2) { color: #999; text-decoration: line-through; }

/* Einstellungen */
.stimmen { display: grid; gap: .4rem; max-width: 560px; }
.stimme { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .4rem .8rem; background: #fff; border: 1px solid var(--rand); border-radius: 8px; }
.stimme label { display: flex; align-items: center; gap: .5rem; min-height: 2.4rem; cursor: pointer; }
.stimme input { width: 1.2rem; height: 1.2rem; margin: 0; }
.stimme button { padding: .4rem .8rem; }
p.hinweis { max-width: 560px; }

/* Anmeldung, Konto im Kopf, Fuß */
main.anmeldung { max-width: 22rem; padding-top: 3rem; }
.anmeldung form { display: grid; gap: .3rem; }
.anmeldung input { font: inherit; padding: .55rem .6rem; border: 1px solid #999; border-radius: 6px; }
.anmeldung button { margin-top: 1rem; padding: .6rem; }
.anmeldung button:disabled { opacity: .6; cursor: wait; }
#konto { white-space: nowrap; }
button.abmelden { border: none; background: none; padding: 0; color: inherit; font-size: inherit; text-decoration: underline; }
.fuss { text-align: center; padding: 0 1rem 1rem; }
.fuss a { color: inherit; }