/* Gestaltung nach dem App-Design „German Method": DM Sans, Indigo, weiße Karten. */
@font-face {
  font-family: 'Uthmanic';
  src: url('../fonts/uthmanic.woff2') format('woff2'), url('../uthmanic.woff2') format('woff2');
  font-display: swap;
}
/* Ersatz, solange uthmanic.woff2 fehlt: Scheherazade New (SIL Open Font License) */
@font-face { font-family: 'Scheherazade New'; src: url('../fonts/ScheherazadeNew-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-Italic.woff2') format('woff2'); font-weight: 100 1000; font-style: italic; font-display: swap; }

:root {
  --ink: #111827;
  --muted: #6B7280;
  --muted-2: #5B5F6E;
  --primary: #26247B;
  --primary-2: #2D248A;
  --primary-soft: #7273B4;
  --lav: #E6E6FF;
  --lav-2: #EFF0FF;
  --lav-3: #C2C2F7;
  --line: #EAE8F0;
  --chip: #F0EFF5;
  --track: #E9E8F1;
  --ok: #0E9F6E;
  --ok-line: #10B981;
  --ok-bg: #E3F6EE;
  --bad: #B8463D;
  --bad-line: #CD5B52;
  --bad-bg: #FBEAE8;
  --card: #FFFFFF;
  --black: #000000;
  --ar: 'Uthmanic', 'Scheherazade New', 'Amiri Quran', 'Amiri', serif;
  --sans: 'DM Sans', -apple-system, system-ui, sans-serif;
  --bg: radial-gradient(420px 420px at 92% 10%, rgba(99,56,140,0.09), rgba(99,56,140,0) 70%),
        radial-gradient(440px 440px at 4% 50%, rgba(0,127,165,0.07), rgba(0,127,165,0) 70%),
        radial-gradient(360px 360px at 90% 94%, rgba(99,56,140,0.09), rgba(99,56,140,0) 70%),
        radial-gradient(340px 340px at 10% 92%, rgba(185,159,111,0.12), rgba(185,159,111,0) 70%),
        linear-gradient(135deg, #E8E4F0 0%, #F5F3F8 50%, #E0E8F5 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.35;
  background: #ECEAF3;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; font-size: inherit; color: inherit; }
svg { width: 1em; height: 1em; fill: currentColor; display: block; flex-shrink: 0; }

/* ---------- Arabisch ---------- */
[lang="ar"], .ar-inline, .ar-word { font-family: var(--ar); font-weight: 400; }
.ar-inline { font-size: 1.5em; line-height: 1; unicode-bidi: isolate; }
.ar-word { font-size: 1.9em; line-height: 1.6; unicode-bidi: isolate; }
.ar-text { font-family: var(--ar); font-size: 34px; line-height: 2; margin: 0; text-align: center; white-space: pre-wrap; color: var(--ink); }
.basmala { font-family: var(--ar); text-align: center; font-size: 24px; line-height: 1.8; color: var(--primary-2); margin: 4px 0 14px; }

/* ---------- Gesamtlayout ---------- */
.layout { min-height: 100%; display: flex; }
.sidebar { display: none; }
.stage { flex: 1; display: flex; min-width: 0; }
.device { position: relative; width: 100%; }
.screen-host { position: relative; height: 100%; }

/* Handy im Desktop-Browser */
body.layout-phone .layout, body.layout-desktop .layout { height: 100vh; }
/* Zwei Leisten: links die Lektionen, rechts die Einstellungen. Beide liegen
   ueber der Buehne, statt ihr Platz wegzunehmen — deshalb steht das Handy
   immer in der Mitte des Fensters, gleich wieviel offen ist. */
body.layout-phone .sidebar, body.layout-desktop .sidebar {
  display: flex; flex-direction: column; gap: 20px;
  width: 300px; flex-shrink: 0; height: 100vh; overflow-y: auto;
  padding: 24px 18px; background: #F7F6FB;
  position: fixed; top: 0; z-index: 40;
  transition: transform .22s ease;
}
body.layout-phone .sidebar.links, body.layout-desktop .sidebar.links {
  left: 0; border-right: 1px solid var(--line);
  transform: translateX(-100%); box-shadow: 20px 0 44px rgba(38, 36, 123, .10);
}
body.layout-phone .sidebar.rechts, body.layout-desktop .sidebar.rechts {
  right: 0; border-left: 1px solid var(--line);
  transform: translateX(100%); box-shadow: -20px 0 44px rgba(38, 36, 123, .10);
}
body.lektionen-offen .sidebar.links { transform: translateX(0); }
body.einstellungen-offen .sidebar.rechts { transform: translateX(0); }
/* Die Buehne weicht den offenen Leisten aus. Dadurch steht das Handy mittig
   in dem, was uebrig bleibt, und wandert mit, sobald eine Leiste auf- oder
   zugeht. */
body.layout-phone .stage, body.layout-desktop .stage { transition: margin .22s ease; }
/* Nur in den Desktop-Ansichten. Auf dem Handy gibt es keine Leisten, dort
   wuerde der Rand die Seite nur zusammenquetschen. */
body.layout-phone.lektionen-offen .stage,
body.layout-desktop.lektionen-offen .stage { margin-left: 300px; }
body.layout-phone.einstellungen-offen .stage,
body.layout-desktop.einstellungen-offen .stage { margin-right: 300px; }
/* Jeder Knopf wandert mit seiner Leiste. */
.side-toggle { position: fixed; top: 16px; z-index: 50; width: 44px; height: 44px;
  display: none; align-items: center; justify-content: center; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,.86); color: var(--primary);
  cursor: pointer; backdrop-filter: blur(6px);
  transition: left .22s ease, right .22s ease, background .12s; }
.side-toggle:hover { background: #fff; }
.side-toggle.links { left: 16px; }
.side-toggle.rechts { right: 16px; }
body.layout-phone .side-toggle, body.layout-desktop .side-toggle { display: flex; }
/* Zwei weitere Knoepfe unter den Einstellungen, nur solange eine Lektion
   im Blick ist — auch waehrend der Uebungen. */
.side-toggle.zweiter { top: 68px; }
.side-toggle.dritter { top: 120px; }
.side-toggle.vierter { top: 172px; }
.side-toggle.fuenfter { top: 224px; }
body:not(.lektion-aktiv) .side-toggle.fuer-lektion { display: none; }
body.lektionen-offen .side-toggle.links { left: 316px; }
body.einstellungen-offen .side-toggle.rechts { right: 316px; }

body.layout-phone .stage { align-items: center; justify-content: center; padding: 24px; background: var(--bg); overflow: auto; }
body.layout-phone .device {
  width: 390px; height: min(844px, calc(100vh - 48px)); flex-shrink: 0;
  border-radius: 48px; padding: 10px; background: #15142B;
  box-shadow: 0 30px 60px rgba(38,36,123,0.25), inset 0 0 0 2px #2E2C55;
}
body.layout-phone .screen-host { border-radius: 38px; overflow: hidden; background: var(--bg); }

/* Desktop-Version */
body.layout-desktop .stage { background: var(--bg); overflow: hidden; }
body.layout-desktop .device { height: 100vh; }
body.layout-desktop .screen-host { max-width: 780px; margin: 0 auto; }
body.layout-desktop .ar-text { font-size: 42px; }

/* Handy */
body.layout-mobile .layout { height: 100dvh; }
body.layout-mobile .device { height: 100dvh; }
body.layout-mobile .screen-host { background: var(--bg); }

/* ---------- Seitenmenü ---------- */
/* Die Marke fuehrt zurueck zur Startseite. */
.side-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px;
  color: var(--primary); font-family: inherit; text-align: left; width: 100%;
  padding: 6px 8px; margin: -6px -8px; border: 0; border-radius: 14px; background: none; cursor: pointer; }
.side-brand:hover { background: var(--lav-2); }
.side-brand:hover .side-logo { background: var(--primary-2); }
.side-logo { transition: background .12s; }
.side-logo { width: 36px; height: 36px; border-radius: 12px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; padding-bottom: 4px; }
.side-head { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin: 0 4px 8px; }
.side-list { display: flex; flex-direction: column; gap: 6px; }
.side-lesson { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; }
.side-lesson:hover { background: #fff; border-color: var(--line); }
.side-lesson.current { background: var(--lav); border-color: var(--primary-soft); }
.side-lesson-text { display: flex; flex-direction: column; min-width: 0; }
.side-lesson-title { font-weight: 700; font-size: 14px; }
.side-lesson-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-settings { margin-top: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Einstellungen ---------- */
.setting { display: flex; flex-direction: column; gap: 6px; }
.setting-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.setting-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.seg { display: flex; background: var(--chip); border-radius: 12px; padding: 3px; }
.seg-btn { flex: 1; border: 0; background: transparent; padding: 8px 6px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg-btn.on { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(17,24,39,0.1); }
.toggle-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.switch { appearance: none; width: 44px; height: 26px; border-radius: 13px; background: var(--lav-3); position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.sheet-backdrop { position: absolute; inset: 0; background: rgba(17,24,39,0.35); z-index: 20; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; background: #fff; border-radius: 24px 24px 0 0; padding: 18px 20px 32px; display: flex; flex-direction: column; gap: 16px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font-size: 18px; }

/* ---------- Bildschirme ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.screen.center { align-items: center; justify-content: center; padding: 24px; text-align: center; gap: 8px; }
.topbar { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 18px 16px 8px; }
body.layout-mobile .topbar { padding-top: max(14px, env(safe-area-inset-top)); }
/* Der Titel gibt nach, wenn die Knoepfe daneben viel Platz brauchen —
   lieber gekuerzt als in zwei Zeilen umgebrochen. */
.topbar-title { flex: 1; min-width: 0; margin: 0; text-align: center; font-size: 16px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-side { width: 36px; flex-shrink: 0; }
.topbar-side.count { width: auto; min-width: 36px; text-align: right; font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--chip); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; flex-shrink: 0; }
.icon-btn:hover { color: var(--primary); }
.scroll { flex: 1; overflow-y: auto; padding: 8px 16px 24px; -webkit-overflow-scrolling: touch; }
/* Zeigt an, dass unter der Kante noch etwas steht. */
.scroll.mehr-darunter { box-shadow: inset 0 -18px 14px -14px rgba(38, 36, 123, .22); }
.footer { flex-shrink: 0; padding: 12px 16px 22px; display: flex; gap: 10px; }
body.layout-mobile .footer { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.footer.two .btn { flex: 1; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 16px; border-radius: 16px; border: 2px solid var(--black); background: var(--black); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; }
.btn svg { font-size: 18px; }
.btn:disabled { background: #D6D3E0; border-color: #D6D3E0; color: #fff; cursor: default; }
.btn.secondary { background: #fff; color: var(--primary); border-color: var(--lav-3); font-size: 14px; }
.btn.ok { background: var(--ok); border-color: var(--ok); }
.btn.bad { background: var(--bad); border-color: var(--bad); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.label { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--bad); font-weight: 700; }
.chip { display: inline-flex; padding: 4px 12px; border-radius: 100px; background: rgba(107,114,128,0.1); color: var(--muted-2); font-size: 12px; font-weight: 700; font-style: italic; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--lav-3); border-top-color: var(--primary); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Startseite */
.lesson-list { display: flex; flex-direction: column; gap: 10px; }
.lesson-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 14px 16px; text-align: left; cursor: pointer; }
.lesson-card:hover { border-color: var(--lav-3); }
.lesson-card-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lesson-card-title { font-size: 16px; font-weight: 700; }
.lesson-card-sub { font-size: 14px; color: var(--muted); }
.chev { color: var(--muted); font-size: 22px; }
.dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.dot.done { border: 2px solid var(--ok-line); color: var(--ok-line); }
.dot.open { border: 2px dashed #C1C0C9; }
.dot.zu { border: 2px solid var(--line); color: var(--muted-2); }
.dot.zu svg { width: 14px; height: 14px; fill: currentColor; }
/* Gesperrte Lektionen bleiben lesbar, aber sichtbar nicht anklickbar. */
.lesson-card.gesperrt { opacity: .6; cursor: default; box-shadow: none; }
.side-lesson.gesperrt { opacity: .5; cursor: default; }

/* Lektion mit Video */
.lesson-title { margin: 6px 4px 16px; font-size: 26px; font-weight: 500; line-height: 1.15; color: var(--primary-2); }
.video-card { background: #000; border-radius: 20px; overflow: hidden; margin-bottom: 16px; }
.video-card video { display: block; width: 100%; max-height: 60vh; background: #000; }
.video-error { margin: 0; padding: 16px; background: var(--bad-bg); color: var(--bad); font-weight: 600; font-size: 14px; }
.sections { display: flex; flex-direction: column; gap: 8px; }
.section-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; font-size: 14px; font-family: inherit; color: inherit; text-align: left;
  padding: 7px 8px; margin: -1px -8px; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.section-row:hover { background: var(--lav-2); }
.section-row .label { flex: 1; }
.section-row .section-go { display: flex; width: 18px; height: 18px; color: var(--lav-3); flex-shrink: 0; }
.section-row:hover .section-go { color: var(--primary); }
.section-row .section-go svg { width: 100%; height: 100%; fill: currentColor; }

/* Pfeile zum Durchblaettern: eine Aufgabe vor oder zurueck, ohne zu antworten. */
.topbar-side.nav { display: flex; align-items: center; gap: 2px; width: auto; }
.step-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; flex-shrink: 0; }
.step-btn svg { width: 20px; height: 20px; fill: currentColor; }
.step-btn:hover:not(:disabled) { background: var(--chip); color: var(--primary); }
.step-btn:disabled { opacity: .3; cursor: default; }

/* Übungslauf */
.progress { display: flex; align-items: center; gap: 12px; padding: 4px 16px 10px; flex-shrink: 0; }
.progress-bar { flex: 1; height: 8px; border-radius: 4px; background: #fff; overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--primary-2); border-radius: 4px; transition: width .25s; }
/* Fortschritt der laufenden Aufgabenart: ein Takt je Aufgabe, gruen wenn
   richtig geloest, grau wenn danebengegangen. */
.progress-zahl { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.takte { flex: 1; display: flex; gap: 3px; min-width: 0; }
.takt { flex: 1; height: 8px; border-radius: 4px; background: var(--line); transition: background .2s; }
.takt.gut { background: var(--ok-line); }
.takt.daneben { background: var(--muted); opacity: .45; }

/* Der Kreis im Erklaerbildschirm: ein Abschnitt je Aufgabenart. */
.art-kreis { position: relative; width: 80px; height: 80px; margin: 0 auto 4px; display: block; }
.art-kreis svg { width: 80px; height: 80px; transform: rotate(-90deg); }
/* Stumpfe Enden: runde wuerden die Luecken zwischen den Abschnitten
   wieder zuwachsen lassen. */
.kreis-takt { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 5; stroke-linecap: butt; }
.kreis-takt.gut { stroke: var(--ok-line); }
.art-zahl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff; }
.art-von { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .6); }

.progress-score { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--primary-2); margin: 4px 2px 10px; }
.section-label .multi { color: var(--muted); }
/* Der Hinweis gehoert zur Frage und rueckt dicht darunter. Jede Zeile, die
   hier gespart wird, ist eine Zeile mehr fuer die Antwortmoeglichkeiten. */
.frage { font-size: 22px; font-weight: 700; line-height: 1.4; margin: 18px 2px 12px; color: var(--ink); text-align: center; }
.hinweis + .frage, .frage + .hinweis { margin-top: 0; }
.hinweis { font-size: 14px; color: var(--muted); margin: 0 2px 14px; text-align: center; }
/* Steht das Aufgabenwort allein ueber den Antworten, ohne Verskarte oder
   Aufnahme dazwischen, bekommt es oben und unten Luft: so springt es sofort
   ins Auge und klebt nicht an den Antwortmoeglichkeiten. */
.frage.allein { margin: 34px 2px 28px; }
.gap { display: inline-block; min-width: 64px; height: 1.1em; border-bottom: 2px solid var(--primary); vertical-align: -0.15em; margin: 0 4px; }
.gap.filled { height: auto; min-width: 0; border-bottom-color: var(--ok-line); color: var(--ok); font-weight: 700; padding: 0 2px; }
.text-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; margin: 6px 0 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.text-card .gap { min-width: 80px; }

.audio-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--lav-2); margin: 6px 0 14px; }
.play-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
.play-btn:disabled { background: var(--primary-soft); cursor: default; }
.audio-note { font-size: 13px; color: var(--primary-2); font-weight: 600; }

.options { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.options.ar-options { display: grid; grid-template-columns: 1fr 1fr; }
/* Kurze Antworten aus einem Wort: zwei nebeneinander statt alle untereinander. */
.options.kurz-options { display: grid; grid-template-columns: 1fr 1fr; }
/* Ganze Saetze stehen untereinander, jeder ueber die volle Breite. */
.options.ar-options.satz-options { grid-template-columns: 1fr; }
.satz-options .option { min-height: 64px; }
.option { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 2px solid var(--line); text-align: left; cursor: pointer; font-size: 16px; font-weight: 500; transition: border-color .12s, background .12s; }
.ar-options .option { justify-content: center; text-align: center; min-height: 72px; }
.option:hover:not(:disabled) { border-color: var(--lav-3); }
.option.selected { border-color: var(--primary); background: var(--lav-2); }
.option:disabled { cursor: default; }
.option.ok { border-color: var(--ok-line); background: var(--ok-bg); }
.option.bad { border-color: var(--bad-line); background: var(--bad-bg); }
.option.missed { border-color: var(--ok-line); border-style: dashed; }
.option.dim { opacity: .55; }
.option.hint { border-color: var(--ok-line); border-style: dashed; }
.option.hint::after { content: '✓'; position: absolute; top: 4px; right: 8px; font-size: 12px; font-weight: 800; color: var(--ok); }
.option-text { flex: 1; }
.ar-options .option-text { flex: 0 1 auto; }
.option .ar-word { font-size: 30px; line-height: 1.5; }
.box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--lav-3); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: #fff; color: #fff; }
.option.selected .box { background: var(--primary); border-color: var(--primary); }
.ar-options .box { position: absolute; top: 8px; left: 8px; }
.mark { font-size: 20px; }
.option.ok .mark, .option.missed .mark { color: var(--ok); }
.option.bad .mark { color: var(--bad); }
.ar-options .mark { position: absolute; top: 6px; right: 8px; }

/* Zuordnen */
.pairs { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.pair-row { display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 8px 10px 8px 14px; min-height: calc(var(--schacht-h, 55px) + 20px); transition: border-color .12s; }
.pair-row.drop-over, .cat-box.drop-over, .pool.drop-over { border-color: var(--primary); background: var(--lav-2); }
.pair-row.ok { border-color: var(--ok-line); background: var(--ok-bg); }
.pair-row.bad { border-color: var(--bad-line); background: var(--bad-bg); }
.pair-left { font-size: 16px; font-weight: 600; }
.pair-left.emoji { font-size: 34px; line-height: 1.2; }
/* Der gestrichelte Platz ist genau so hoch wie das Wort, das hineinkommt:
   26px Schrift x 1.5 Zeile + 2x4px Polster + 2x2px Rand des Wortes, dazu der
   eigene Rand. Sonst dehnt das eingesetzte Wort den Platz auf und alles
   darunter rutscht nach. */
.pairs { --schacht-h: 55px; }
.pair-slot { min-height: var(--schacht-h); border-radius: 12px; border: 2px dashed var(--lav-3); display: flex; align-items: stretch; justify-content: center; padding: 0; cursor: pointer; }
.pair-row.ok .pair-slot, .pair-row.bad .pair-slot { border: 0; }
.slot-hint { opacity: .55; color: var(--ok); font-size: 14px; }
.fix { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--ok); font-size: 14px; font-weight: 600; }
/* Auch der Vorrat behaelt seine Hoehe, wenn das letzte Wort herauswandert. */
.pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; padding: 12px; min-height: 79px; border-radius: 16px; border: 2px solid transparent; }
.how { text-align: center; font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.chip-word { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; min-width: 64px; padding: 4px 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; font-size: 15px; font-weight: 600; box-shadow: 0 2px 0 var(--line); }
.chip-word .ar-word { font-size: 26px; line-height: 1.5; }
.chip-word.selected { border-color: var(--primary); background: var(--lav-2); }
.chip-word.dragging { opacity: .35; }
.chip-word.ok { border-color: var(--ok-line); background: var(--ok-bg); box-shadow: none; }
.chip-word.bad { border-color: var(--bad-line); background: var(--bad-bg); box-shadow: none; }
.chip-word:disabled { cursor: default; color: inherit; }
.pair-slot .chip-word { width: 100%; box-shadow: none; }
.hint-tag { font-size: 10px; font-weight: 700; color: var(--ok); line-height: 1.2; }
/* Das Bild zum Wort: beim Quiz traegt es das deutsche Wort von Anfang an,
   das arabische bekommt es, sobald die Zuordnung sitzt. Auf beiden Seiten
   steht es gleich — neben dem Wort auf einer Linie. Ueber dem Wort ginge
   nur beim deutschen: das arabische ist hoch gesetzt, darueber haengt das
   Bild in der Luft, und einmal darueber, einmal daneben liest sich schief. */
.chip-word.mit-bild { flex-direction: row; gap: 8px; padding-inline: 10px; }
.chip-bild { font-size: 20px; line-height: 1; flex-shrink: 0; }
.paar-bild { font-size: 20px; line-height: 1; margin-inline-start: 8px; }
/* Beim Quiz ruecken beide Seiten zur Mitte, damit die Bilder dort
   aufeinandertreffen: das arabische Wort nach rechts, das deutsche nach
   links an den inneren Rand. */
.pairs.mit-bildern .pair-left { justify-content: flex-end; text-align: right; }
.pairs.mit-bildern .pair-slot .chip-word { justify-content: flex-start; }
.pair-left { display: flex; align-items: center; }
.sol.bad { color: var(--bad); }
.chip-word.bad .hint-tag { color: var(--bad); }
.ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: .95; box-shadow: 0 10px 24px rgba(38,36,123,.25); border-color: var(--primary); }

/* Kategorien */
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.cat-box { display: flex; flex-direction: column; gap: 8px; min-height: 170px; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 10px; cursor: pointer; transition: border-color .12s; }
.cat-head { display: flex; flex-direction: column; gap: 2px; }
.cat-name { font-size: 15px; font-weight: 700; color: var(--primary-2); }
.cat-desc { font-size: 12px; color: var(--muted); }
.cat-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cat-words .chip-word { box-shadow: none; }

/* Rückmeldung */
.feedback { flex-shrink: 0; padding: 16px 16px 22px; display: flex; flex-direction: column; gap: 10px; border-radius: 20px 20px 0 0; animation: rise .18s ease-out; max-height: 55%; overflow-y: auto; }
body.layout-mobile .feedback { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.feedback.ok { background: var(--ok-bg); }
.feedback.bad { background: var(--bad-bg); }
.feedback-head { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; }
.feedback.ok .feedback-head { color: var(--ok); }
.feedback.bad .feedback-head { color: var(--bad); }
.feedback-icon { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.reason { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.solution { display: flex; flex-direction: column; gap: 4px; }
.solution-list { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; color: var(--ok); }
.solution-list .ar-word { font-size: 26px; }

/* Auswertung */
.result { text-align: center; padding-top: 24px; }
.result-title { margin: 0; font-size: 29px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.1; }
.result-sub { margin: 8px 0 20px; font-size: 20px; font-weight: 500; color: var(--muted); }
.score-card { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.score-num { font-size: 26px; font-weight: 800; }
.score-pct { font-size: 14px; font-weight: 700; color: var(--primary-2); }
.result .card { text-align: left; }
.res-row { margin-top: 12px; }
/* Fragebogen der Testphase, unter dem Ergebnis. Im Dunkelblau des Designs,
   damit er sich von den Ergebniskarten abhebt und nicht uebersehen wird. */
.umfrage { background: var(--primary); border-color: var(--primary); color: #fff; margin-bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 16px; }
.umfrage h3 { margin: 0; font-size: 18px; font-weight: 700; }
.umfrage p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.umfrage .btn { margin-top: 6px; width: auto; align-self: stretch; text-decoration: none; }
.res-top { display: flex; justify-content: space-between; align-items: baseline; }
.res-num { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-bar { height: 6px; border-radius: 3px; background: var(--track); margin-top: 6px; overflow: hidden; }
.res-bar span { display: block; height: 100%; background: var(--ok-line); }

/* Desktop-Version: mehr Platz */
body.layout-desktop .scroll { padding: 12px 32px 32px; }
body.layout-desktop .topbar { padding: 24px 32px 8px; }
body.layout-desktop .progress { padding: 6px 32px 12px; }
body.layout-desktop .footer, body.layout-desktop .feedback { padding-left: 32px; padding-right: 32px; }
body.layout-desktop .options.ar-options { grid-template-columns: repeat(4, 1fr); }
body.layout-desktop .options.ar-options.satz-options { grid-template-columns: 1fr; }
body.layout-desktop .frage { font-size: 26px; margin: 22px 2px 14px; }
body.layout-desktop .frage.allein { margin: 40px 2px 32px; }
/* Auf dem breiten Schirm muss der Fragebogenknopf nicht die ganze Karte fuellen. */
body.layout-desktop .umfrage .btn { align-self: flex-start; padding-left: 28px; padding-right: 28px; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Audio */
.audio-text { display: flex; flex-direction: column; gap: 2px; }
.audio-reciter { font-size: 12px; color: var(--muted); }
.audio-card.error .audio-note, .audio-card.notiming .audio-note { color: var(--bad); }
.audio-card.playing .play-btn { background: var(--primary-2); box-shadow: 0 0 0 6px rgba(45,36,138,.15); }
.mini-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
.select { width: 100%; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip); font: inherit; font-size: 13px; color: var(--ink); }
.two-num { flex-direction: row; gap: 10px; }
.two-num label { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.num-wrap { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.num { width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip); font: inherit; font-size: 14px; color: var(--ink); }
.credit { margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.credit a { color: var(--primary); }
.sheet { max-height: 85%; overflow-y: auto; }

/* ---------- Auf einen Blick ---------- */
/* Alles, was eine Lektion uebt, kompakt untereinander. Platz sparen heisst
   hier: kleine Schrift, enge Zeilen, und was nebeneinander passt, steht
   nebeneinander. */
.scroll.kompakt { padding-bottom: 32px; }
.k-block { margin: 14px 0 0; }
.k-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--primary-2); }
.k-zahl { font-weight: 600; color: var(--muted); letter-spacing: 0; }
.k-titel::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.k-liste { display: flex; flex-direction: column; gap: 5px; }
.k-aufgabe { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 7px 10px; }

.k-frage { font-size: 13px; color: var(--muted-2); margin-bottom: 2px; }
.k-hoeren { font-style: italic; }
.k-satz { font-family: var(--ar); font-size: 19px; line-height: 1.55; margin: 1px 0; }
.k-loesung { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.k-treffer { font-weight: 700; color: var(--ok); }
.k-daneben { color: var(--muted); }
.sinn { font-size: 12px; font-weight: 400; color: var(--muted); margin-inline-start: 5px; }

.k-paare { display: flex; flex-direction: column; gap: 2px; }
.k-paar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }
.k-paar > :first-child { text-align: right; }
.k-pfeil { color: var(--lav-3); }

/* Die Kategorien stehen nebeneinander, ihre Woerter darunter. */
.k-kats { display: grid; grid-template-columns: repeat(var(--spalten, 2), 1fr); gap: 10px; }
.k-kat-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--primary-2); margin-bottom: 4px; }
.k-kat-woerter { display: flex; flex-direction: column; gap: 1px; }
.k-kats .ar-word, .k-paar .ar-word, .k-loesung .ar-word { font-size: 18px; line-height: 1.35; }

/* So viele Spalten, wie die Breite hergibt — auf dem Handy eine, am
   Schreibtisch mehrere. Ein Raster, keine Zeitungsspalten: gelesen wird
   von links nach rechts und am Rand weiter nach unten, nicht erst eine
   Spalte ganz hinunter.
   Im Raster liegen die einzelnen Aufgaben, nicht die Bloecke — sonst
   richtet sich jede Zeile nach dem hoechsten Block und darunter bleibt
   eine halbe Bildschirmhoehe leer. Block und Liste reichen ihre Kinder
   deshalb ans Raster durch, die Ueberschrift nimmt eine ganze Zeile. */
.scroll.kompakt { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 5px 20px; align-content: start; align-items: start; }
.scroll.kompakt .lesson-title { grid-column: 1 / -1; }
.scroll.kompakt .k-block, .scroll.kompakt .k-liste { display: contents; }
.scroll.kompakt .k-titel { grid-column: 1 / -1; margin: 14px 0 2px; }
.k-aufgabe { break-inside: avoid; }

/* Die Uebersichten sind zum Lesen da, nicht zum Vorfuehren — die einer
   Lektion wie die ueber Kategorien und Eindringling. Im Browserfenster
   faellt dafuer das abgebildete Handy weg und die Seite nimmt die Breite,
   die zwischen den Leisten uebrig ist. */
body.layout-phone.uebersicht-offen .stage { padding: 0; align-items: stretch; justify-content: stretch; }
body.layout-phone.uebersicht-offen .device,
body.layout-desktop.uebersicht-offen .device {
  width: auto; height: 100vh; flex: 1; padding: 0;
  background: none; border-radius: 0; box-shadow: none; }
body.layout-phone.uebersicht-offen .screen-host { border-radius: 0; overflow: visible; }
body.layout-desktop.uebersicht-offen .screen-host { max-width: none; }
body.layout-phone.uebersicht-offen .scroll,
body.layout-desktop.uebersicht-offen .scroll { padding-left: 28px; padding-right: 28px; }

/* ---------- Handy: enger setzen ----------
   Auf schmalen Geraeten kostet jede Zeile Platz. Je weniger Frage und
   Verskarte brauchen, desto eher stehen alle Antwortmoeglichkeiten im Bild. */
body.layout-mobile .scroll { padding: 6px 14px 20px; }
body.layout-mobile .frage { font-size: 20px; margin: 12px 2px 10px; }
body.layout-mobile .frage.allein { margin: 26px 2px 22px; }
body.layout-mobile .hinweis { margin-bottom: 12px; }
body.layout-mobile .ar-text { font-size: 27px; line-height: 1.9; }
body.layout-mobile .text-card { padding: 12px; margin: 4px 0 12px; }
body.layout-mobile .option { min-height: 52px; }
body.layout-mobile .ar-options .option { min-height: 64px; }
body.layout-mobile .cat-box { min-height: 140px; padding: 8px; }
body.layout-mobile .footer { padding: 10px 14px 18px; }
body.layout-mobile .footer .btn { font-size: 14px; padding: 14px 10px; }
body.layout-mobile .footer.two .btn { font-size: 13px; letter-spacing: 0; }
body.layout-mobile .topbar { padding: 14px 12px 6px; }
body.layout-mobile .topbar-title { font-size: 15px; }
body.layout-mobile .progress { padding: 4px 14px 8px; }
@media (max-width: 380px) {
  body.layout-mobile .ar-text { font-size: 24px; }
  body.layout-mobile .frage { font-size: 18px; }
  body.layout-mobile .option { font-size: 15px; }
}

/* ---------- Niedrige Fenster ----------
   Muss nach den Regeln der Desktopansicht stehen, um sie zu ueberschreiben. */
@media (max-height: 820px) {
  body.layout-phone .frage, body.layout-desktop .frage { font-size: 20px; margin: 12px 2px 8px; }
  /* Ohne Verskarte bleibt genug Platz, die Desktopansicht muss hier kaum sparen. */
  body.layout-desktop .frage.allein { margin: 36px 2px 28px; }
  body.layout-phone .frage.allein { margin: 26px 2px 20px; }
  body.layout-phone .hinweis, body.layout-desktop .hinweis { margin-bottom: 10px; }
  body.layout-phone .ar-text, body.layout-desktop .ar-text { font-size: 28px; line-height: 1.8; }
  body.layout-phone .text-card, body.layout-desktop .text-card { margin: 4px 0 10px; padding: 10px 14px; }
  body.layout-phone .option, body.layout-desktop .option { min-height: 50px; }
  body.layout-phone .ar-options .option, body.layout-desktop .ar-options .option { min-height: 62px; }
}
@media (max-height: 680px) {
  body.layout-mobile .frage { font-size: 18px; margin: 10px 2px 8px; }
  body.layout-mobile .frage.allein { margin: 22px 2px 18px; }
  body.layout-mobile .ar-text { font-size: 23px; line-height: 1.7; }
  body.layout-mobile .option { min-height: 46px; }
}

/* ---------- „Darunter geht es weiter" ----------
   Haengt am unteren Rand des Rollbereichs, nennt die Zahl der verdeckten
   Antwortmoeglichkeiten und rollt auf Tippen dorthin. */
.mehr-knopf { position: sticky; bottom: 0; height: 0; display: flex; justify-content: center; pointer-events: none; }
.mehr-btn { pointer-events: auto; position: relative; bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--lav-3); border-radius: 100px; background: #fff; color: var(--primary);
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(38, 36, 123, .22); }
.mehr-btn:hover { background: var(--lav-2); }
.mehr-btn svg { width: 16px; height: 16px; transform: rotate(90deg); }

/* Im Browserfenster sitzen die Einstellungen schon als fester Knopf am
   rechten Rand — das Zahnrad in der Kopfzeile waere dasselbe ein zweites
   Mal. Es bleibt stehen, aber unsichtbar, damit der Titel in der Mitte
   bleibt. Auf dem Handy gibt es den festen Knopf nicht, dort wird es
   gebraucht. */
body.layout-phone .topbar [data-act="settings"],
body.layout-desktop .topbar [data-act="settings"] { visibility: hidden; pointer-events: none; }

/* Auf dem Handy gibt es keine Leisten: dieselben beiden Knoepfe stehen dort
   oben in der Kopfzeile. */
.nur-handy { display: none; }
body.layout-mobile .topbar-lektion.nur-handy { display: flex; gap: 2px; flex-shrink: 0; }
body.layout-mobile .topbar { gap: 6px; }
body.layout-mobile .topbar .icon-btn { width: 34px; height: 34px; }
/* Fuenf Schaltflaechen fuer die Navigation passen nur verkleinert daneben. */
body.layout-mobile .step-btn { width: 25px; height: 25px; border-radius: 7px; }
body.layout-mobile .step-btn svg { width: 18px; height: 18px; }
body.layout-mobile .nav .count { font-size: 13px; }

/* ---------- Drucken: daraus macht der Browser das PDF ----------
   Die Seite steht sonst in einem abgebildeten Geraet mit eigenem
   Rollbereich — gedruckt kaeme davon nur der sichtbare Ausschnitt. Hier
   wird daraus ein fortlaufendes Dokument. Die Regeln der Geraeteansichten
   sind spezifischer als diese, deshalb „!important". */
@media print { .wf-filter { display: none !important; } }
@media print {
  @page { margin: 14mm; }
  html, body { height: auto !important; background: #fff !important; }
  .sidebar, .side-toggle, .topbar, .footer, .sheet, .sheet-backdrop,
  .mehr-knopf, .video-card, .progress { display: none !important; }
  .layout, .stage, .device, .screen-host, .screen {
    display: block !important; position: static !important;
    width: auto !important; max-width: none !important;
    height: auto !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important;
    background: #fff !important; box-shadow: none !important;
    border-radius: 0 !important; overflow: visible !important; }
  .scroll { overflow: visible !important; height: auto !important;
    max-height: none !important; padding: 0 !important; box-shadow: none !important; }
  /* Auf A4 zwei feste Spalten, in derselben Leserichtung wie am Schirm. */
  .scroll.kompakt { grid-template-columns: 1fr 1fr !important; gap: 0 10mm !important; }
  .k-block, .k-aufgabe { break-inside: avoid; }
  .lesson-title { column-span: all; margin-top: 0; }
}

/* Der grammatische Ausschlag in der richtigen arabischen Antwort. */
.ausschlag { background: rgba(16, 185, 129, .28); color: inherit; border-radius: 5px;
  padding: .02em .06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Kategorien und Eindringling, nach Lektionen geordnet. Die Ueberschrift
   soll man von weitem sehen — sie trennt die Lektionen voneinander. */
.wf-kopf { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--lav-3);
  font-size: 20px; font-weight: 700; color: var(--primary-2); }
.scroll.kompakt .k-block:first-of-type .wf-kopf { margin-top: 8px; }
.wf-unter { font-size: 14px; font-weight: 500; color: var(--muted); }
/* Die Woerter der Lektion bekommen eine Zeile fuer sich. */
.wf-woerter { grid-column: 1 / -1; background: var(--lav-2); }
.wf-woerter .k-treffer { color: var(--ink); font-weight: 600; }
.k-lektion { display: block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--lav-3); margin-bottom: 2px; }

/* ---------- Erklaerung vor einer neuen Aufgabenart ----------
   Ein ruhiger blauer Bildschirm: nur die Aufgabe in einem Satz. */
.screen.intro { background: var(--primary); color: #fff; }
.screen.intro .topbar-title { color: rgba(255, 255, 255, .72); font-weight: 600; }
.icon-btn.hell { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); }
.icon-btn.hell:hover { background: rgba(255, 255, 255, .24); color: #fff; }
/* Vor und zurueck steht auch hier oben rechts, nur in Weiss statt Grau. */
.screen.intro .step-btn { color: rgba(255, 255, 255, .72); }
.screen.intro .step-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .18); color: #fff; }
.screen.intro .nav .count { color: rgba(255, 255, 255, .72); }
.intro-mitte { display: flex; flex-direction: column; justify-content: center; gap: 16px;
  text-align: center; padding-left: 28px; padding-right: 28px; }
.intro-art { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.intro-text { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.45; color: #fff;
  max-width: 34ch; margin-inline: auto; }
.btn.hell { background: #fff; border-color: #fff; color: var(--primary); }
.btn.hell:hover { background: var(--lav-2); }
body.layout-desktop .intro-text { font-size: 26px; }
body.layout-mobile .intro-text { font-size: 20px; }
@media (max-height: 680px) { .intro-text { font-size: 18px; } }

/* ---------- Testphase: Anmeldung, Verwaltung, Fragebogen ----------
   Ohne Anmeldung ist nichts zu bedienen ausser der Maske selbst, und die
   Werkzeuge zum Pruefen gibt es nur fuer den Admin. */
body.abgemeldet .side-toggle,
body:not(.admin) .side-toggle.nur-admin { display: none; }

.screen.anmelden { background: var(--primary); color: #fff; }
.anmelde-mitte { display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 24px 28px; max-width: 420px; margin-inline: auto; width: 100%; }
.anmelde-titel { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -0.5px; }
.anmelde-sub { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.anmelde-form { display: flex; flex-direction: column; gap: 12px; }
.anmelde-form .feld > span { color: rgba(255, 255, 255, .78); }
.anmelde-form .btn.primary { margin-top: 6px; background: #fff; border-color: #fff; color: var(--primary); }

.feld { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.feld input, .zufuegen input, .bogen-text {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; }
.feld-fehler { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--bad); }
.anmelden .feld-fehler { color: #ffd4d4; }

.btn.klein { width: auto; padding: 9px 14px; font-size: 13px; }
.btn.hohl { background: none; border-color: var(--line); color: var(--ink); }
.btn.hohl:hover { border-color: var(--primary); color: var(--primary); }
.setting.konto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setting.konto > span:first-child { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
.hinweis.links { text-align: left; }

/* Beim Eindringling steht unter der Loesung, warum das Wort herausfaellt. */
.k-grund { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--muted); }

/* Umschalter ueber der Uebersicht aller Lektionen: welche Aufgabenarten
   sollen zu sehen sein. Nehmen im Raster eine ganze Zeile ein. */
.wf-filter { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.wf-schalter { padding: 9px 16px; border-radius: 999px; border: 2px solid var(--line);
  background: #fff; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.wf-schalter:hover { border-color: var(--primary); color: var(--primary); }
.wf-schalter.an { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Der Sammelschalter steht etwas abgesetzt vor den einzelnen Arten. */
.wf-schalter.rahmen { border-style: dashed; margin-right: 6px; }

/* Notiz zur Aufgabe: zugeklappt eine Zeile, aufgeklappt ein Feld. */
.notiz-zeile { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 18px;
  padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; background: none;
  color: var(--muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.notiz-zeile:hover { border-color: var(--primary); color: var(--primary); }
.notiz-zeile svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.notiz-zeile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notiz-zeile.voll { border-style: solid; border-color: var(--primary-soft); color: var(--ink); }
.notiz-feld { margin-top: 18px; padding: 14px; border: 2px solid var(--primary-soft); border-radius: 14px; background: #fff; }
.notiz-feld textarea { width: 100%; margin: 8px 0; padding: 10px 12px; border-radius: 10px;
  border: 2px solid var(--line); font: inherit; font-size: 15px; resize: vertical; }

.bogen-skala { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.bogen-frage { margin-bottom: 10px; }
.bogen-frage p { margin: 4px 0 10px; font-size: 15px; line-height: 1.45; }
.sterne { display: flex; gap: 4px; }
.stern { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: none; color: var(--line); cursor: pointer; padding: 0; }
.stern svg { width: 30px; height: 30px; fill: currentColor; }
.stern:hover { background: var(--chip); }
.stern.an { color: #E8A600; }
.bogen-text { resize: vertical; line-height: 1.5; }
.umfrage.fertig { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ink); }
.umfrage.fertig h3 { display: flex; align-items: center; gap: 8px; color: var(--ok); }
.umfrage.fertig svg { width: 20px; height: 20px; fill: currentColor; }