/* Lernraum — helles, ruhiges Interface mit weichen Kanten.
   Grundsatz: klare Flächen, sanfte Rundungen, kompakte Typografie. */

:root {
  /* Ruhige, kühle Graustufen mit genau einem Akzent — die Farbe bleibt der
     Bedeutung vorbehalten, nicht der Dekoration. */
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --muted-soft: #94a3b8;
  --page: #f7f8fa;
  --panel: #ffffff;
  --surface: #f1f4f8;
  --surface-deep: #e8edf3;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: #eff5ff;
  --accent-line: #bfd6fe;
  --cyan: #0e7490;
  --green: #15803d;
  --green-soft: #f0fdf4;
  --green-line: #bbf7d0;
  --amber: #b45309;
  --amber-soft: #fffbeb;
  --amber-line: #fde68a;
  --red: #be123c;
  --red-soft: #fff1f2;
  --red-line: #fecdd3;

  /* Abstände in Vierer-Schritten, damit die Oberfläche ein gemeinsames
     Raster hat statt beliebiger Einzelwerte. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* Feine, gestaffelte Schatten statt einer harten Kante. */
  /* Sanfte Rundungen: Flaechen weicher als Bedienelemente, Dialoge am weichsten. */
  --r1: 6px; --r2: 8px; --r3: 12px; --r4: 16px; --rr: 999px;

  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
  --shadow-lift: 0 2px 4px rgba(15, 23, 42, .05), 0 4px 12px rgba(15, 23, 42, .05);
  --shadow-modal: 0 8px 16px rgba(15, 23, 42, .08), 0 24px 56px rgba(15, 23, 42, .16);
  --ring: 0 0 0 3px rgba(37, 99, 235, .16);

  color-scheme: light;
  font-family: Inter, "SF Pro Text", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: var(--page);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 320px; font-size: 1rem; line-height: 1.45; background: var(--page); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-weight: 700; }
.hidden { display: none !important; }

/* ---------- Grundelemente ---------- */

.primary, .secondary {  border-radius: var(--r2);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; letter-spacing: -.1px;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.primary { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: var(--shadow); }
.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: var(--shadow-lift); }
.primary:active { background: #1e40af; box-shadow: none; }
.primary[disabled] { background: var(--line-strong); border-color: var(--line-strong); box-shadow: none; cursor: not-allowed; }
.secondary { color: var(--ink-soft); background: var(--panel); border-color: var(--line-strong); box-shadow: var(--shadow); }
.secondary:hover { color: var(--ink); background: var(--surface); border-color: var(--muted-soft); }
.secondary:active { background: var(--surface-deep); box-shadow: none; }
/* Ein Knopf, der einen eingeschalteten Zustand anzeigt — etwa „Auswählen“. */
.secondary.aktiv { color: var(--accent-dark); background: var(--accent-soft); border-color: var(--accent); }
.secondary.aktiv:hover { background: var(--accent-soft); border-color: var(--accent); }
.secondary.danger { color: var(--red); border-color: var(--red-line); }
.secondary.danger:hover { color: var(--red); background: var(--red-soft); border-color: #fb7185; }
.primary svg, .secondary svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.text-button { padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 650; }
.text-button:hover { color: var(--accent-dark); text-decoration: underline; }
/* Ohne eigene Grösse zieht ein SVG in einem Textknopf auf die Vorgabe des
   Browsers auf und wird riesig. */
.text-button svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

.icon-button { border-radius: var(--r1); display: grid; place-items: center; padding: 4px; border: 0; background: transparent; color: var(--muted); }
.icon-button:hover { color: var(--accent); background: var(--accent-soft); }
.icon-button svg { display: block; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.select {  border-radius: var(--r2);
  min-height: 32px; padding: 6px 26px 6px 9px; font-size: 12.5px;
  color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line-strong);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%2364748b' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 11px;
}
.select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.pill { border-radius: var(--rr); display: inline-flex; align-items: center; width: max-content; padding: 2px 6px; font-size: 10.5px; font-weight: 650; border: 1px solid transparent; }
.pill.due { color: var(--red); background: var(--red-soft); border-color: #f2ccd4; }
.pill.safe { color: var(--green); background: var(--green-soft); border-color: #c7e8d2; }
.pill.new { color: var(--accent-dark); background: var(--accent-soft); border-color: #ccdefb; }

.progress-line { border-radius: var(--rr); overflow: hidden; margin-top: 8px; height: 4px; background: #e6ecf3; }
.progress-line > span { border-radius: inherit; display: block; height: 100%; width: var(--value); background: var(--accent); }

.empty { padding: 22px 14px; color: var(--muted); text-align: center; font-size: 12.5px; }

/* ---------- Layout ---------- */

.app-layout { min-height: 100vh; display: grid; grid-template-columns: var(--navbreite, 206px) minmax(0, 1fr); }

.sidebar { display: flex; flex-direction: column; gap: 18px; padding: 16px 11px; background: var(--panel); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 15px; font-weight: 750; letter-spacing: -.3px; color: var(--ink); }
.brand-mark { border-radius: var(--r2); display: grid; place-items: center; width: 26px; height: 26px; color: #fff; background: var(--accent); }
.brand-mark svg { width: 15px; }

.nav { display: grid; gap: 1px; }
.nav button { border-radius: var(--r2); display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 0; background: transparent; color: var(--ink-soft); font-size: 12.5px; font-weight: 550; text-align: left; transition: background .13s ease, color .13s ease; }
.nav button:hover { background: var(--surface); color: var(--ink); }
.nav button.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 650; box-shadow: inset 2px 0 0 var(--accent); }
.nav svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; flex-shrink: 0; }
.nav button.active svg { stroke-width: 2; }

.sidebar-bottom { margin-top: auto; display: grid; gap: 11px; }
.mini-progress { border-radius: var(--r3); padding: 10px; background: var(--surface); border: 1px solid var(--line); }
.mini-progress p { margin: 0 0 4px; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.mini-progress strong { font-size: 12.5px; }
.user-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px; color: var(--muted); font-size: 12px; }
.user-row .user-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 0; border: 0; background: transparent; color: inherit; text-align: left; }
.user-row .user-name:hover, .user-row button:hover { color: var(--accent); }
.user-row > button { padding: 4px; border: 0; background: transparent; color: var(--muted); }
.user-row svg { display: block; width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.main { min-width: 0; padding: 20px clamp(14px, 2.6vw, 34px) 32px; background: var(--page); }
.page { max-width: 1120px; margin: 0 auto; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.eyebrow { margin: 0 0 3px; color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
h1 { margin: 0; font-size: 22px; letter-spacing: -.5px; line-height: 1.2; }
.subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.subtitle.leise { color: var(--muted-soft); font-size: 11.5px; }

/* ---------- Karten und Panels ---------- */

.panel, .stat-card { border-radius: var(--r3); border-radius: var(--r3); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.panel { padding: var(--s4); }
.panel h2 { margin: 0; font-size: 13.5px; letter-spacing: -.2px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }

/* Gleichmässiger Abstand zwischen allen Blöcken der Statistik. */
.stats-seite { display: grid; gap: var(--s4); }
.stats-seite > .fach-statistik { margin-bottom: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.stat-card { position: relative; min-height: 86px; padding: var(--s3); border-top: 2px solid var(--tone, var(--accent)); transition: box-shadow .14s ease, border-color .14s ease; }
.stat-card:hover { box-shadow: var(--shadow-lift); }
.stat-card p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 550; letter-spacing: .01em; }
.stat-card strong { display: block; margin-top: var(--s1); font-size: 23px; font-weight: 660; letter-spacing: -.9px; line-height: 1.1; }
.stat-card span { display: block; margin-top: 3px; color: var(--muted-soft); font-size: 10.5px; }

.overview-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin-top: 10px; }
.plan-list { display: grid; gap: 5px; }
.plan-row { border-radius: var(--r2); display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: 9px; padding: 8px 9px; background: var(--surface); border: 1px solid var(--line); }
.plan-dot { border-radius: var(--rr); width: 4px; height: 26px; background: var(--color); }
.plan-row h3 { margin: 0; font-size: 12.5px; }
.plan-row p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.plan-row strong { color: var(--amber); font-size: 11px; }

.next-card { display: grid; place-content: center; min-height: 170px; text-align: center; background: var(--panel); }
.next-card .orb, .study-complete .orb { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 8px; color: var(--accent); background: var(--accent-soft); }
.next-card .orb svg, .study-complete .orb svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.next-card h2 { font-size: 14px; }
.next-card p { margin: 5px 0 11px; color: var(--muted); font-size: 12px; }
.next-card .primary { margin: 0 auto; }

/* ---------- Kartenliste ---------- */

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.cards-table { padding: 0; overflow: hidden; }
.card-row { display: grid; grid-template-columns: minmax(170px, 1.7fr) .8fr .6fr .7fr 34px; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.card-row:last-child { border-bottom: 0; }
.card-row:hover { background: var(--surface); }
.card-question { min-width: 0; }
.card-question strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.card-question span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.tag { border-radius: var(--r1); display: inline-flex; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 6px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); font-size: 10.5px; }
.metric { color: var(--muted); font-size: 10.5px; }
.metric strong { display: block; color: var(--ink); font-size: 12.5px; }

/* ---------- Lernpläne ---------- */

.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.plan-card { position: relative; padding: 13px 13px 13px 16px; overflow: hidden; }
.plan-card .color-bar { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--color); }
.plan-card h2 { margin: 0 22px 3px 0; font-size: 13.5px; }
.plan-card p { margin: 0; min-height: 17px; color: var(--muted); font-size: 11.5px; }
.plan-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: var(--muted); font-size: 11px; }
.plan-card-footer strong { color: var(--amber); }

/* ---------- Lernmodus ---------- */

/* Im Lernmodus soll die Karte den Bildschirm ausfüllen. */
.study-wrap { max-width: 1000px; margin: 4px auto 0; }
.study-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.study-head { margin-bottom: 8px; }
.study-card { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 150px); padding: 36px clamp(20px, 4vw, 52px); text-align: center; }
.study-card .card-label { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.study-card h2 { max-width: 820px; margin: 20px auto 26px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.25; letter-spacing: -.8px; white-space: pre-wrap; }
.hinweis { margin: 6px 0 0; color: var(--muted); font-size: 11.5px; }
.optional { font-weight: 400; color: var(--muted); }

.response-form { display: grid; gap: 7px; width: min(640px, 100%); margin: 0 auto; text-align: left; }
.response-form label, .answer-review > span { color: var(--ink-soft); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.response-form textarea { border-radius: var(--r2); min-height: 110px; padding: 11px 12px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); resize: vertical; line-height: 1.5; font-size: 15px; }
.response-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.response-form .primary { justify-self: start; margin-top: 4px; }

.answer-review { width: min(680px, 100%); margin: 0 auto; text-align: left; }
.answer-review p { border-radius: var(--r2); margin: 4px 0 14px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; font-size: 15px; line-height: 1.55; }
.answer-review .answer { border-radius: var(--r2); margin: 4px 0 0; padding: 11px 12px; color: var(--ink); background: var(--accent-soft); border: 1px solid #ccdefb; white-space: pre-wrap; font-size: 16px; line-height: 1.55; }

/* Wortweiser Abgleich: Treffer grün, Abweichungen rot. */
.diff mark { background: none; padding: 1px 2px; }
.diff mark.ok { color: #14532d; background: #dcfce7; }
.diff mark.weg { color: #9f1239; background: #ffe4e6; text-decoration: line-through; text-decoration-color: #fda4af; }
.vergleich-kopf { border-radius: var(--r2); display: grid; gap: 3px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid transparent; font-size: 13px; }
.vergleich-kopf strong { font-size: 14.5px; }
.vergleich-kopf.correct { color: var(--green); background: var(--green-soft); border-color: #c7e8d2; }
.vergleich-kopf.teilweise { color: var(--amber); background: var(--amber-soft); border-color: #edd2ac; }
.vergleich-kopf.incorrect { color: var(--red); background: var(--red-soft); border-color: #f2ccd4; }

.choice-list { display: grid; gap: 7px; width: min(700px, 100%); margin: 0 auto; text-align: left; }
.choice-list.answered { margin-top: 9px; margin-bottom: 14px; }
.choice { border-radius: var(--r2); display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 11px; width: 100%; min-height: 48px; padding: 10px 12px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); text-align: left; font-size: 15px; }
button.choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.choice.gewaehlt { border-color: var(--accent); background: var(--accent-soft); }
.choice b { border-radius: var(--r1); display: grid; place-items: center; width: 24px; height: 24px; color: var(--accent-dark); background: var(--accent-soft); font-size: 12px; }
.choice .haken { font-style: normal; font-size: 15px; font-weight: 700; }
.choice.correct { color: var(--green); background: var(--green-soft); border-color: #a8dcba; }
.choice.correct b { color: var(--green); background: #d8f0e0; }
.choice.incorrect { color: var(--red); background: var(--red-soft); border-color: #eeb9c5; }
.choice.incorrect b { color: var(--red); background: #f8dbe2; }
.choice-feedback { border-radius: var(--r2); display: grid; gap: 3px; width: min(700px, 100%); margin: 0 auto 10px; padding: 10px 12px; text-align: left; font-size: 13px; border: 1px solid transparent; }
.choice-feedback strong { font-size: 14.5px; }
.choice-feedback.correct { color: var(--green); background: var(--green-soft); border-color: #c7e8d2; }
.choice-feedback.teilweise { color: var(--amber); background: var(--amber-soft); border-color: #edd2ac; }
.choice-feedback.incorrect { color: var(--red); background: var(--red-soft); border-color: #f2ccd4; }

/* Beschriftungsübungen */
.label-uebung { display: grid; gap: 12px; width: min(760px, 100%); margin: 0 auto; justify-items: center; }
.formen-flaeche { border-radius: var(--r3); position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--line); }
.formen-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.formen-svg .form { fill: rgba(37, 99, 235, .07); stroke: var(--accent); stroke-width: .6; vector-effect: non-scaling-stroke; }
.formen-svg .form-linie { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.formen-svg .form-spitze { fill: var(--accent); }
.form-feld { position: absolute; display: grid; place-items: center; padding: 2px; }
.form-feld .label-feld { border-radius: var(--r1); width: 100%; max-width: 100%; min-width: 0; padding: 4px 6px; text-align: center; font-size: 13px; background: var(--panel); border: 1px solid var(--line-strong); }
.form-feld .label-feld:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.label-ergebnis { border-radius: var(--r1); display: grid; gap: 1px; padding: 3px 6px; font-size: 12.5px; text-align: center; border: 1px solid transparent; }
.label-ergebnis.ok { color: #14532d; background: #dcfce7; border-color: #a8dcba; }
.label-ergebnis.weg { color: #9f1239; background: #ffe4e6; border-color: #eeb9c5; }
.label-ergebnis em { font-style: normal; font-weight: 700; color: var(--green); font-size: 11.5px; }
/* Die Bewertung: über jedem Knopf steht, wann die Karte wiederkommt. Die
   Knöpfe selbst bleiben ruhig und gleich — die Farbe kommt erst beim
   Darüberfahren, damit keine der vier Antworten schon vorweg drängt. */
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); width: min(760px, 100%); margin: 20px auto 0; }
.grade-feld { display: grid; justify-items: center; gap: 6px; }
.grade-wann { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.grade { border-radius: var(--rr); width: 100%; min-height: 48px; padding: 8px 14px;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  font-size: 15px; font-weight: 650; box-shadow: var(--shadow);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.grade:hover { box-shadow: var(--shadow-lift); }
.grade.again:hover { color: var(--red); border-color: #eeb9c5; background: var(--red-soft); }
.grade.hard:hover { color: var(--amber); border-color: #edd2ac; background: var(--amber-soft); }
.grade.good:hover { color: var(--green); border-color: #a8dcba; background: var(--green-soft); }
.grade.easy:hover { color: var(--cyan); border-color: #a8d3dd; background: #eff9fb; }

.study-complete { padding: 42px 20px; text-align: center; }
.study-complete .orb { width: 40px; height: 40px; color: var(--green); background: var(--green-soft); }
.study-complete .orb svg { width: 20px; height: 20px; }
.study-complete h2 { margin: 0; font-size: 17px; }
.study-complete p { margin: 6px 0 12px; color: var(--muted); font-size: 12.5px; }
.study-complete .primary { margin: 0 auto; }

/* ---------- Statistik ---------- */

.stats-top { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s4); align-items: start; }
.chart { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; height: 128px; margin-top: 9px; }
.bar-wrap { display: grid; grid-template-rows: 1fr auto; gap: 5px; height: 100%; text-align: center; color: var(--muted); font-size: 10.5px; }
.bar-area { border-radius: var(--r1); display: flex; align-items: end; min-height: 12px; background: var(--surface); }
.bar { border-radius: var(--r1) var(--r1) 0 0; width: 100%; min-height: 3px; background: var(--accent); }

.retention { display: grid; gap: 10px; margin-top: 10px; }
.retention-bar { border-radius: var(--rr); display: flex; overflow: hidden; height: 12px; background: var(--surface); border: 1px solid var(--line); }
.retention-bar span { display: block; height: 100%; }
.retention-bar .seg-mastered { background: var(--green); }
.retention-bar .seg-learning { background: #d9a441; }
.retention-bar .seg-new { background: var(--accent); }
.retention-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.retention-head strong { font-size: 20px; letter-spacing: -.8px; }
.retention-head span { color: var(--muted); font-size: 11px; }
.legend { display: grid; gap: 6px; font-size: 11.5px; }
.legend div { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; color: var(--muted); }
.legend i { border-radius: var(--rr); width: 8px; height: 8px; background: var(--color); }
.legend strong { color: var(--ink); }

.analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
.analysis-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.analysis-row:last-child { border-bottom: 0; }
.analysis-row strong { font-size: 12px; }
.analysis-row p { margin: 2px 0 0; color: var(--muted); font-size: 10.5px; }
.score { align-self: center; font-size: 12.5px; font-weight: 750; }
.score.low { color: var(--red); }
.score.high { color: var(--green); }

/* ---------- Fächer und Themen ----------------------------------------------

   Je Fach eine Karte: Kopf mit Namen und Zahlen, darunter ein Balken für die
   durchgearbeiteten Themen und die Themenliste. Ein abgehaktes Thema tritt
   zurück, ohne zu verschwinden — man soll sehen, was man geschafft hat.
--------------------------------------------------------------------------- */

.fach-uebersicht { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.fach-gitter { display: grid; gap: var(--s3); }

.fach-karte { position: relative; padding: 0; overflow: hidden; }
.fach-karte .color-bar { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--color, var(--accent)); z-index: 1; }
.fach-karte.fertig .color-bar { background: var(--green); }

.fach-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 16px; align-items: center;
  gap: var(--s3); padding: 12px 14px 12px 17px; cursor: pointer; }
.fach-kopf:hover { background: var(--surface); }
.fach-name { min-width: 0; }
.fach-name h2 { margin: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fach-name p { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; }
.fach-karte.fertig .fach-name p { color: var(--green); font-weight: 600; }

.fach-zahlen { display: grid; justify-items: end; gap: 1px; font-size: 11.5px; color: var(--muted); }
.fach-zahlen .faellig { color: var(--amber, #b45309); font-weight: 650; }
.fach-zahlen em { font-style: normal; color: var(--muted-soft); }
.fach-knoepfe { display: flex; align-items: center; gap: 6px; flex: none; }
.fach-knoepfe .schmal-knopf { margin-top: 0; }

/* Der Balken sitzt zwischen Kopf und Liste — er gehört zu beidem. */
.fach-fortschritt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  padding: 0 14px 10px 17px; }
.fach-fortschritt .progress-line { margin-top: 0; height: 6px; }
.fach-fortschritt b { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fach-karte.fertig .fach-fortschritt .progress-line > span { background: var(--green); }

.themen-liste { display: grid; border-top: 1px solid var(--line); }
.thema-zeile { display: grid; grid-template-columns: auto minmax(140px, 1fr) auto auto; align-items: center;
  gap: var(--s3); padding: 9px 14px 9px 17px; border-bottom: 1px solid var(--line); transition: background .13s ease; }
.thema-zeile:last-child { border-bottom: 0; }
.thema-zeile:hover { background: var(--surface); }
.thema-haken { display: grid; place-items: center; cursor: pointer; }
.thema-haken input { position: absolute; opacity: 0; width: 0; height: 0; }
.thema-name { min-width: 0; }
.thema-name strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thema-name span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
/* Erledigt heisst: zurückgenommen, nicht durchgestrichen — die Karten darin
   bleiben ja weiter zu lernen. */
.thema-zeile.erledigt { background: color-mix(in srgb, var(--green) 5%, transparent); }
.thema-zeile.erledigt .thema-name strong { color: var(--muted); }
.thema-zeile .thema-knoepfe { display: flex; align-items: center; gap: 6px; flex: none; }
.thema-zeile .thema-knoepfe .schmal-knopf { margin-top: 0; }
.thema-zeile .secondary { border-radius: var(--r1); min-height: 28px; padding: 4px 9px; font-size: 11.5px; }
.thema-zeile .secondary[disabled] { opacity: .45; cursor: not-allowed; }

.fach-leer { display: grid; justify-items: start; gap: var(--s2); padding: var(--s3) 14px var(--s4) 17px;
  border-top: 1px solid var(--line); }
.fach-leer .hinweis { margin: 0; }

@media (max-width: 900px) {
  .fach-uebersicht { grid-template-columns: 1fr; }
  .fach-kopf { grid-template-columns: minmax(0, 1fr) 16px; row-gap: var(--s2); }
  .fach-zahlen { grid-column: 1; justify-items: start; }
  .fach-knoepfe { grid-column: 1; }
  .thema-zeile { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  .thema-zeile .pill { grid-column: 2; justify-self: start; }
  .thema-zeile .thema-knoepfe { grid-column: 2; }
}

.plan-card .plan-edit { position: absolute; right: 8px; top: 8px; }
.plan-card .plan-study { width: 100%; margin-top: 10px; }
/* Schlanke Leiste statt der grossen Kopfzeile, wenn das Lernen in einem
   Lernplan eingebettet ist. */
.lern-leiste { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3);
  font-size: 12px; color: var(--muted); }

/* --- Auswahlflächen ---------------------------------------------------------

   Überall dort, wo mehrere Einträge angekreuzt werden: Themen im Lernplan,
   Themen eines Ablaufabschnitts, Antwortmöglichkeiten.

   Das Kästchen wird selbst gezeichnet. Das Systemkästchen ist auf jedem
   Rechner anders gross, und im Formularbereich zog es sich zudem auf die
   Mindesthöhe der Eingabefelder auseinander — daher die stehende Pille.
--------------------------------------------------------------------------- */

.thema-auswahl, .block-themen {
  display: grid; gap: var(--s3); max-height: 280px; overflow-y: auto;
  padding: var(--s3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r2);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.thema-auswahl::-webkit-scrollbar, .block-themen::-webkit-scrollbar { width: 10px; }
.thema-auswahl::-webkit-scrollbar-track, .block-themen::-webkit-scrollbar-track { background: transparent; }
.thema-auswahl::-webkit-scrollbar-thumb, .block-themen::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}

.thema-gruppe { display: grid; gap: 5px; }
/* Die Fachüberschrift bleibt beim Blättern am oberen Rand stehen — sonst
   weiss man in einer langen Liste nicht mehr, wozu ein Thema gehört. */
.thema-gruppe p {
  position: sticky; top: calc(var(--s3) * -1); z-index: 1;
  margin: 0; padding: 4px 2px;
  color: var(--muted); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--surface);
}

/* Ein Fach in der Auswahl eines Lernplans: Kästchen, Farbpunkt, Name und
   rechts, was darin steckt. */
.fach-option .plan-dot { flex: none; }
.fach-option span { flex: 1; font-weight: 600; }
.fach-option em { font-style: normal; color: var(--muted); font-size: 11px; }

.thema-option {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px 11px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r2);
  font-size: 12.5px; cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.thema-option > span { flex: 1; min-width: 0; }
.thema-option em { flex: none; font-style: normal; color: var(--muted); font-size: 11px; }
.thema-option:hover { border-color: var(--accent-line); box-shadow: var(--shadow); }
/* Angekreuzt hebt sich die ganze Zeile ab, nicht nur das Kästchen. */
.thema-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.thema-option:has(input:checked) em { color: var(--accent-dark); }

/* --- Das Kästchen ----------------------------------------------------------

   Ein Haken sieht in der ganzen Anwendung gleich aus: ein quadratisches
   Feld, angekreuzt in der Betonfarbe, darin eine gedrehte Ecke aus zwei
   Linien. Kein Kreuz — ein Kreuz liest sich als „weg damit“.

   Zwei Bauarten kommen vor. Meist wird das Feld selbst umgestaltet. Muss es
   unter einer ganzen anklickbaren Zeile liegen, zeichnet ein „haken-kasten“
   daneben dasselbe Bild.
--------------------------------------------------------------------------- */

.thema-option input[type="checkbox"],
.wahl-zeile input[type="checkbox"],
.wahl input[type="checkbox"],
.art-haken,
.bk-haken,
.haken-kasten {
  flex: none; display: grid; place-items: center;
  width: 17px; height: 17px; min-width: 17px; min-height: 17px;
  margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none;
  background: var(--panel); border: 1.5px solid var(--line-strong);
  border-radius: 5px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.thema-option input[type="checkbox"]:hover,
.wahl-zeile input[type="checkbox"]:hover,
.wahl input[type="checkbox"]:hover,
.bk-haken:hover,
label:hover > .haken-kasten { border-color: var(--accent); }

.thema-option input[type="checkbox"]:checked,
.wahl-zeile input[type="checkbox"]:checked,
.wahl input[type="checkbox"]:checked,
.bk-haken:checked,
input:checked + .haken-kasten { background: var(--accent); border-color: var(--accent); }

/* Der Haken selbst — dieselbe Ecke an allen Stellen. */
.thema-option input[type="checkbox"]:checked::after,
.wahl-zeile input[type="checkbox"]:checked::after,
.wahl input[type="checkbox"]:checked::after,
.art-haken:checked::after,
.bk-haken:checked::after,
input:checked + .haken-kasten::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.thema-option input[type="checkbox"]:focus-visible,
.wahl input[type="checkbox"]:focus-visible,
.bk-haken:focus-visible,
input:focus-visible + .haken-kasten { box-shadow: var(--ring); }

/* ---------- Erweiterte Statistik ---------- */

.chart-14 { grid-template-columns: repeat(14, 1fr); gap: 3px; }
.chart-14 .bar-wrap span { font-size: 9px; }
.chart-fuss { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.tageszeiten { display: grid; gap: 7px; margin-top: 10px; }
.tageszeit { display: grid; grid-template-columns: 78px 1fr 28px; align-items: center; gap: 9px; font-size: 11.5px; }
.tageszeit-name { color: var(--muted); }
.tageszeit-balken { border-radius: var(--rr); height: 12px; background: var(--surface); border: 1px solid var(--line); }
.tageszeit-balken span { border-radius: inherit; display: block; height: 100%; background: var(--accent); }
.tageszeit strong { text-align: right; font-size: 12px; }
.verlauf { display: grid; }
.verlauf-zeile { display: grid; grid-template-columns: minmax(110px, 1fr) auto auto 44px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.verlauf-zeile:last-child { border-bottom: 0; }
.verlauf-zeile strong { color: var(--ink); font-size: 12.5px; }
.verlauf-zeile p { margin: 1px 0 0; font-size: 10.5px; }
.verlauf-zeile .score { text-align: right; }
.panel-head .pill svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ---------- Dialoge ---------- */


/* Die nächsten Termine in der Übersicht. */
.termin-liste { display: grid; gap: 3px; }
.termin-zeile { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: var(--s3);
  padding: 7px var(--s2); text-align: left; background: none; border: 0;
  border-radius: var(--r2); cursor: pointer; }
.termin-zeile:hover { background: var(--surface); }
.termin-tag { display: grid; justify-items: center; padding: 3px 0; border-radius: var(--r1);
  background: color-mix(in srgb, var(--ton) 12%, transparent); color: var(--ton); }
.termin-tag em { font-style: normal; font-size: 9.5px; font-weight: 600; text-transform: uppercase; }
.termin-tag strong { font-size: 14px; line-height: 1.1; }
.termin-text { display: grid; gap: 1px; min-width: 0; }
.termin-text strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termin-text span { font-size: 11px; color: var(--muted); }
.termin-art { font-size: 10.5px; font-weight: 600; color: var(--ton); white-space: nowrap; }

/* --- Ladefenster --------------------------------------------------------

   Steht, solange etwas dauert. Der Kreis dreht sich, darunter läuft die
   verstrichene Zeit — so sieht man, dass es weitergeht, und kann
   einschätzen, wie lange es noch dauert.
---------------------------------------------------------------------- */

.ladekasten { width: min(420px, 100%); padding: var(--s6) var(--s5) var(--s5);
  display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.ladekasten h2 { margin: var(--s2) 0 0; font-size: 16px; }
.ladekasten p { margin: 0; font-size: 13px; color: var(--muted); max-width: 34ch; line-height: 1.55; }
.ladekasten .ladezeit { margin-top: var(--s2); font-size: 11.5px; color: var(--muted-soft);
  font-variant-numeric: tabular-nums; }

/* Der Kreis: ein Ring, dessen sichtbarer Teil umläuft. */
.ladekreis { width: 42px; height: 42px; border-radius: 999px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: ladekreis-dreht .9s linear infinite; }
@keyframes ladekreis-dreht { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  /* Ohne Drehung bleibt ein pulsierender Ring — ganz ohne Bewegung wüsste
     niemand, ob noch etwas läuft. */
  .ladekreis { animation: ladekreis-pulst 1.6s ease-in-out infinite; }
  @keyframes ladekreis-pulst { 50% { opacity: .35; } }
}

/* --- PDF einlesen und markieren ---------------------------------------- */

.pdf-raster { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s4); align-items: start; }
.pdf-blatt { padding: var(--s2); }
.pdf-seite-rechts { display: grid; gap: var(--s3); position: sticky; top: var(--s3); }

/* Bei Vergrösserung wächst die Seite über das Fenster hinaus und lässt sich
   in beide Richtungen schieben. */
.pdf-rahmen { max-height: calc(100vh - 230px); min-height: 340px; overflow: auto;
  background: var(--surface); border-radius: var(--r2);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.pdf-rahmen::-webkit-scrollbar { width: 10px; height: 10px; }
.pdf-rahmen::-webkit-scrollbar-track { background: transparent; }
.pdf-rahmen::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box; }
.pdf-lupe { display: flex; align-items: center; gap: 1px; white-space: nowrap; }
.pdf-lupe .icon-button { width: 22px; height: 22px; font-size: 14px; line-height: 1; }
.pdf-lupe b { min-width: 40px; text-align: center; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Die Seite als Bild, darüber die Wortkästchen. */
.pdf-seite { position: relative; user-select: none; touch-action: none; cursor: crosshair;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.pdf-seite img { display: block; width: 100%; height: auto; }
.wort-schicht { position: absolute; inset: 0; }
/* Unsichtbar, aber beim Überfahren erkennbar — so sieht man, was erkannt wurde. */
.wort { position: absolute; border-radius: 2px; background: transparent; transition: background .1s ease; }
.pdf-seite:hover .wort { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.auswahl-rahmen { position: absolute; border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 2px; pointer-events: none; }

/* Umschalter zwischen den Betriebsarten. */
.pdf-betriebsart { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); }
.art-knopf { padding: 8px 10px; font-size: 12.5px; font-weight: 550; color: var(--muted);
  background: none; border: 0; border-radius: var(--r1); cursor: pointer; }
.art-knopf:hover { color: var(--ink); }
.art-knopf.aktiv { color: var(--accent-dark); background: var(--panel); box-shadow: var(--shadow); font-weight: 600; }

/* Farbpunkt vor der Feldbeschriftung — dieselbe Farbe wie im Menü. */
.rollen-punkt { display: inline-block; width: 8px; height: 8px; margin-right: 7px;
  background: var(--ton); border-radius: 999px; vertical-align: middle; }
.field.schmal input { max-width: 120px; }
.primary.breit { width: 100%; justify-content: center; margin-top: var(--s2); }

/* Das Menü nach dem Aufziehen. */
.rollen-menue { position: fixed; z-index: 60; width: 250px; padding: 8px; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: var(--r2); box-shadow: var(--shadow-modal);
  display: grid; gap: 2px; }
.rollen-vorschau { margin: 0 0 6px; padding: 7px 9px; font-size: 11.5px; line-height: 1.45; color: var(--muted);
  background: var(--surface); border-radius: var(--r1); max-height: 74px; overflow: hidden; }
.rollen-eintrag { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  text-align: left; font-size: 12.5px; color: var(--ink); background: none; border: 0;
  border-radius: var(--r1); cursor: pointer; }
.rollen-eintrag i { flex: none; width: 9px; height: 9px; background: var(--ton); border-radius: 999px; }
.rollen-eintrag:hover { background: color-mix(in srgb, var(--ton, var(--accent)) 12%, transparent); }
.rollen-eintrag.leise { color: var(--muted); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.rollen-eintrag.leise:hover { background: var(--surface); }

/* Die Aufgabenliste beim Zuordnen von Lösungen. */
.loesungs-liste { display: grid; gap: 3px; max-height: 420px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.loesungs-zeile { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--s2);
  padding: 8px 9px; text-align: left; background: none; border: 1px solid transparent;
  border-radius: var(--r2); cursor: pointer; }
.loesungs-zeile:hover { background: var(--surface); }
.loesungs-zeile.gewaehlt { background: var(--accent-soft); border-color: var(--accent); }
.loesungs-nummer { display: grid; place-items: center; width: 22px; height: 22px; font-size: 11px;
  font-weight: 600; color: var(--muted); background: var(--surface-deep, var(--surface)); border-radius: var(--r1); }
.loesungs-zeile.gewaehlt .loesungs-nummer { color: #fff; background: var(--accent); }
.loesungs-text { display: grid; gap: 1px; min-width: 0; }
.loesungs-text strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loesungs-text span { font-size: 11px; color: var(--muted); }
.loesungs-marke { color: var(--green); display: grid; place-items: center; }
.loesungs-marke svg { width: 15px; height: 15px; }

.anleitung { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.anhang-knopf.laeuft { opacity: .55; pointer-events: none; }

@media (max-width: 1100px) {
  .pdf-raster { grid-template-columns: 1fr; }
  .pdf-seite-rechts { position: static; }
}

/* Zwei Dokumente nebeneinander. */
.pdf-raster.zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 330px; gap: var(--s3); }
.pdf-blatt-kopf { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.pdf-blatt-kopf .select { flex: 1; min-width: 0; min-height: 30px; padding: 4px 8px; font-size: 12px; }
.pdf-seitenzahl { display: flex; align-items: center; gap: 2px; font-size: 11.5px; white-space: nowrap; }
.pdf-seitenzahl .icon-button { width: 24px; height: 24px; }
.pdf-seitenzahl b { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.pdf-herkunft { font-size: 10.5px; color: var(--muted); white-space: nowrap; }

/* Ausschnitte im Editor. */
.schnitt-liste { display: flex; flex-wrap: wrap; gap: var(--s2); }
.schnitt { position: relative; margin: 0; width: 120px; border: 1px solid var(--line); border-radius: var(--r1); overflow: hidden; background: var(--panel); }
.schnitt img { display: block; width: 100%; height: auto; }
.schnitt .icon-button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; background: var(--panel); }

/* Antwortmöglichkeiten und Paare. */
.pdf-optionen { display: grid; gap: 3px; }
.pdf-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s2);
  padding: 6px 8px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r1); }
.pdf-option.ist-richtig { background: var(--green-soft); border-color: var(--green-line); }
.pdf-option.offen { border-style: dashed; }
.pdf-option b { display: grid; place-items: center; width: 20px; height: 20px; font-size: 11px;
  color: var(--muted); background: var(--panel); border-radius: var(--r1); }
.pdf-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.empty.klein { padding: var(--s3); font-size: 12px; }

@media (max-width: 1400px) {
  .pdf-raster.zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pdf-raster.zwei .pdf-seite-rechts { grid-column: 1 / -1; }
}

/* --- Kalender ---------------------------------------------------------- */

/* Sieben Tagesspalten nebeneinander brauchen mehr Breite als eine Textseite.
   Im Kalender fällt die Begrenzung der Arbeitsfläche deshalb weg: Die Tafel
   nimmt die ganze Fensterbreite, und die Spalten werden entsprechend breit. */
body.volle-breite .page { max-width: none; }

.kalender-raster { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.kalender-seite { display: grid; gap: var(--s3); }
.kalender-haupt { display: grid; gap: var(--s3); min-width: 0; }

/* Kopfzeile mit Blättern, Zeitraum und Neuanlage. */
.kalender-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.kalender-kopf h1 { margin: 0; font-size: 21px; letter-spacing: -.4px; }
.kalender-navigation { display: flex; gap: 2px; }
.kalender-navigation .icon-button { width: 30px; height: 30px; }
.wochen-marke { padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px; }
.kalender-kopf .primary { margin-left: auto; }

/* Beim Wochenwechsel wandert die alte Tafel hinaus und die neue herein.
   Beide liegen im selben Rasterfeld, damit nichts springt. */
.kalender-buehne { display: grid; overflow: hidden; border-radius: var(--r3); }
.kalender-buehne > .kalender-tafel { grid-area: 1 / 1; }
.kalender-buehne.wechselt { pointer-events: none; }

@keyframes tafel-hinaus-links { to { transform: translateX(-102%); opacity: .35; } }
@keyframes tafel-hinaus-rechts { to { transform: translateX(102%); opacity: .35; } }
@keyframes tafel-herein-rechts { from { transform: translateX(102%); opacity: .35; } to { transform: translateX(0); opacity: 1; } }
@keyframes tafel-herein-links { from { transform: translateX(-102%); opacity: .35; } to { transform: translateX(0); opacity: 1; } }

.tafel-hinaus-links { animation: tafel-hinaus-links .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.tafel-hinaus-rechts { animation: tafel-hinaus-rechts .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.tafel-herein-rechts { animation: tafel-herein-rechts .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.tafel-herein-links { animation: tafel-herein-links .3s cubic-bezier(.4, 0, .2, 1) forwards; }

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .tafel-hinaus-links, .tafel-hinaus-rechts, .tafel-herein-rechts, .tafel-herein-links { animation-duration: .01ms; }
}

/* Die Tafel selbst. */
.kalender-tafel { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r3);
  box-shadow: var(--shadow); overflow: hidden; }
.kalender-kopfzeile { display: grid; grid-template-columns: 62px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line); background: var(--surface); }
.tag-kopf { display: grid; justify-items: center; gap: 1px; padding: 9px 4px; border-left: 1px solid var(--line); }
.tag-kopf span { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; color: var(--muted); }
.tag-kopf strong { font-size: 19px; font-weight: 600; letter-spacing: -.5px; }
.tag-kopf.heute strong { display: grid; place-items: center; width: 30px; height: 30px; color: #fff;
  background: var(--accent); border-radius: 999px; font-size: 15px; }

/* Ganztägige Einträge über dem Raster. */
.ganztags-zeile { display: grid; grid-template-columns: 62px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line); background: var(--surface); }
.ganztags-zeile .zeit-spalte { display: grid; place-items: center; font-size: 9.5px; color: var(--muted-soft);
  text-transform: uppercase; letter-spacing: .05em; }
.ganztags-feld { display: grid; gap: 2px; padding: 4px; border-left: 1px solid var(--line); min-height: 26px; }
.ganztags-marke { padding: 3px 7px; font-size: 11px; font-weight: 600; color: var(--ton);
  background: color-mix(in srgb, var(--ton) 14%, transparent); border-left: 3px solid var(--ton);
  border-radius: var(--r1); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Das Stundenraster. */
.kalender-koerper { position: relative; display: grid; grid-template-columns: 62px repeat(7, minmax(0, 1fr));
  /* Nimmt die Höhe des Fensters mit; der Rest der Seite bleibt sichtbar. */
  height: calc(100vh - 160px); min-height: 460px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.kalender-koerper::-webkit-scrollbar { width: 10px; }
.kalender-koerper::-webkit-scrollbar-track { background: transparent; }
.kalender-koerper::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box; }

.zeit-spalte { background: var(--panel); }
.zeit-marke { position: relative; }
.zeit-marke span { position: absolute; top: -7px; right: 9px; font-size: 10.5px; color: var(--muted-soft);
  font-variant-numeric: tabular-nums; }
.zeit-marke:first-child span { top: 2px; }

.tag-spalte { position: relative; border-left: 1px solid var(--line); }
.tag-spalte.heute { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.stunden-feld { border-bottom: 1px solid var(--line); }
.stunden-feld:nth-child(odd) { border-bottom-style: dashed; }

/* Ein gesperrter Tag ist schraffiert und nimmt nichts an. */
.tag-spalte.gesperrt { background: repeating-linear-gradient(135deg, transparent, transparent 7px,
  color-mix(in srgb, var(--muted-soft) 16%, transparent) 7px, color-mix(in srgb, var(--muted-soft) 16%, transparent) 14px); cursor: not-allowed; }
.tag-spalte.gesperrt .stunden-feld { border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }

/* Ein Termin. */
.termin { position: absolute; left: 3px; right: 3px; display: flex; overflow: hidden;
  background: color-mix(in srgb, var(--ton) 11%, var(--panel));
  /* Links eckig: dort sitzt der Farbstreifen und schliesst bündig ab. */
  border-radius: 0 var(--r2) var(--r2) 0; cursor: grab; user-select: none;
  transition: box-shadow .14s ease; }
.termin:hover { box-shadow: var(--shadow-lift); z-index: 3; }
.termin.wird-gezogen { cursor: grabbing; opacity: .9; box-shadow: var(--shadow-modal); z-index: 5; }
.termin-streifen { flex: none; width: 4px; background: var(--ton); }
.termin-inhalt { display: grid; align-content: start; gap: 2px; padding: 5px 8px; min-width: 0; }
.termin-inhalt strong { font-size: 12px; font-weight: 600; color: var(--ton); line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.termin-zeit { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Der Ort steht nur da, wo der Block hoch genug ist — bei kurzen Terminen
   würde er die Uhrzeit verdrängen. */
.termin-ort { font-size: 10px; color: var(--muted-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termin.kurz .termin-ort { display: none; }
.termin.kurz .termin-inhalt { padding: 2px 8px; }
.termin.kurz .termin-zeit { display: none; }
.termin.sperre { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ton) 13%, var(--panel)),
  color-mix(in srgb, var(--ton) 13%, var(--panel)) 6px, color-mix(in srgb, var(--ton) 6%, var(--panel)) 6px,
  color-mix(in srgb, var(--ton) 6%, var(--panel)) 12px); }
/* Die Anfasser zum Dehnen sitzen an der Unterkante. */
.termin-griff { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.termin-griff::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 2px;
  transform: translateX(-50%); background: var(--ton); opacity: 0; border-radius: 999px; transition: opacity .14s ease; }
.termin:hover .termin-griff::after { opacity: .5; }

/* Hängt eine Notiz am Termin, steht das als kleines Zeichen in der Ecke —
   sonst wäre die Verknüpfung im Kalender unsichtbar. */
.termin-notiz-zeichen { position: absolute; top: 3px; right: 4px; display: grid; place-items: center;
  width: 14px; height: 14px; color: var(--ton); opacity: .7; pointer-events: none; }
.termin-notiz-zeichen svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.termin.kurz .termin-notiz-zeichen { top: 2px; }

.termin-vorschau { position: absolute; left: 3px; right: 3px; display: grid; place-items: center;
  padding: 2px; font-size: 10.5px; color: var(--accent-dark);
  background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: var(--r2); pointer-events: none; }

.jetzt-linie { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--red); z-index: 4; pointer-events: none; }
.jetzt-linie i { position: absolute; left: -4px; top: -4px; width: 7px; height: 7px; background: var(--red); border-radius: 999px; }

/* Das Monatsblatt links. */
.monats-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
.monats-kopf strong { font-size: 14px; }
.monats-kopf span { display: flex; gap: 2px; }
.monats-kopf .icon-button { width: 26px; height: 26px; }
.monats-namen, .monats-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* Beim Monatswechsel wandert das alte Raster hinaus und das neue herein.
   Beide liegen im selben Feld, damit das Blatt nicht springt — dasselbe
   Vorgehen wie bei der Wochentafel. */
.monats-buehne { display: grid; overflow: hidden; }
.monats-buehne > .monats-raster { grid-area: 1 / 1; }
.monats-buehne.wechselt { pointer-events: none; }
.monats-namen span { text-align: center; font-size: 10px; font-weight: 600; color: var(--muted-soft); padding-bottom: 3px; }
.monats-tag { position: relative; display: grid; place-items: center; height: 30px; padding: 0;
  font-size: 12px; color: var(--ink); background: none; border: 0; border-radius: var(--r1); cursor: pointer; }
.monats-tag:hover { background: var(--surface); }
.monats-tag.fremd { color: var(--muted-soft); }
.monats-tag.in-woche { background: var(--accent-soft); }
.monats-tag.heute { color: #fff; background: var(--accent); font-weight: 600; }
.tag-punkte { position: absolute; bottom: 3px; display: flex; gap: 2px; }
.tag-punkte b { width: 4px; height: 4px; background: var(--ton); border-radius: 999px; }
.monats-tag.heute .tag-punkte b { background: #fff; }

/* Die Arten mit ihren Zeiten. */
.arten-liste { display: grid; gap: 4px; }
.art-zeile { display: flex; align-items: center; gap: var(--s3); padding: 6px 4px; font-size: 12.5px; cursor: pointer; }
.art-zeile span { flex: 1; }
.art-zeile em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; color: var(--muted); }
/* Der Stift an einer eigenen Art erscheint erst beim Darüberfahren — die
   Liste soll ruhig bleiben. */
.art-zeile .icon-button { width: 22px; height: 22px; flex: none; opacity: 0; transition: opacity .13s ease; }
.art-zeile:hover .icon-button, .art-zeile:focus-within .icon-button { opacity: 1; }
.art-zeile em svg { width: 12px; height: 12px; }
/* Wie jedes Kästchen, nur in der Farbe seiner Terminart. */
.art-haken { border-color: var(--ton); }
.art-haken:checked { background: var(--ton); border-color: var(--ton); }

/* Die Auswahl der Art im Dialog. */
.art-wahl { display: flex; flex-wrap: wrap; gap: var(--s2); }
.art-karte { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 12.5px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: border-color .14s ease, background .14s ease; }
.art-karte input { position: absolute; opacity: 0; width: 0; height: 0; }
.art-punkt { width: 10px; height: 10px; background: var(--ton); border-radius: 999px; }
.art-karte:has(input:checked) { border-color: var(--ton); background: color-mix(in srgb, var(--ton) 10%, transparent); font-weight: 600; }
.wahl-zeile { display: flex; align-items: center; gap: var(--s2); cursor: pointer; }


@media (max-width: 1100px) {
  .kalender-raster { grid-template-columns: 1fr; }
}

/* Die eingelesenen Pläne in der linken Spalte des Kalenders. */
.import-liste { display: grid; gap: 2px; margin-bottom: var(--s2); }
.import-zeile { display: flex; align-items: flex-start; gap: var(--s2); padding: 5px 2px 5px 6px;
  border-radius: var(--r2); border-left: 3px solid var(--accent); background: var(--surface); }
.import-text { flex: 1; display: grid; gap: 1px; min-width: 0; }
.import-text strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-text em { font-style: normal; font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.import-zeile .icon-button { flex: none; width: 22px; height: 22px; }

/* --- Eingelesener Stundenplan ------------------------------------------- */

.plan-leiste { display: flex; align-items: center; gap: var(--s3); }
.plan-zahl { margin-left: auto; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.plan-liste { display: grid; gap: 2px; max-height: 52vh; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.plan-zeile { display: grid; grid-template-columns: 16px 62px 1fr auto; align-items: center; gap: var(--s3);
  padding: 7px 10px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ton);
  border-radius: var(--r2); cursor: pointer; transition: border-color .13s ease, background .13s ease; }
.plan-zeile:hover { background: var(--surface); }
.plan-zeile input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Was schon im Kalender steht, tritt zurück. */
.plan-zeile.schon-da { opacity: .55; }
.plan-tag { display: grid; justify-items: center; line-height: 1.15; }
.plan-tag em { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-soft); }
.plan-tag strong { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.plan-tag i { font-style: normal; font-size: 9.5px; color: var(--muted-soft); }
.plan-text { display: grid; gap: 1px; min-width: 0; }
.plan-text strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-text em { font-style: normal; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-art { flex: none; padding: 2px 9px; color: var(--ton); background: color-mix(in srgb, var(--ton) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ton) 26%, transparent); border-radius: var(--rr); font-size: 10.5px; font-weight: 600; }
.plan-zeile.ist-pruefung .plan-text strong { color: var(--ton); }

@media (max-width: 700px) {
  .plan-zeile { grid-template-columns: 16px 56px 1fr; }
  .plan-art { grid-column: 3; justify-self: start; }
}

/* --- Notizen ------------------------------------------------------------ */

.notiz-leiste { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.notiz-leiste .bk-suche { flex: 1; max-width: 420px; }
.notiz-zahl { color: var(--muted); font-size: 11.5px; }

/* Die Karten füllen die Breite; auf schmalen Schirmen greift der Umbruch von
   selbst, weil die Spalten eine Mindestbreite haben. */
.notiz-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); align-items: start; }
.notiz-karte { position: relative; display: grid; gap: var(--s2); padding: var(--s3) var(--s3) var(--s3) var(--s4); overflow: hidden; }
.notiz-karte .color-bar { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ton); }
.notiz-kopf { display: flex; align-items: flex-start; gap: var(--s2); }
.notiz-titel { flex: 1; padding: 0; text-align: left; font-size: 13.5px; font-weight: 650; color: var(--ink);
  background: none; border: 0; cursor: pointer; line-height: 1.3; }
.notiz-titel:hover { color: var(--ton); }
.notiz-knoepfe { display: flex; gap: 2px; flex: none; }
.notiz-knoepfe .icon-button { width: 24px; height: 24px; }

/* Die Vorschau zeigt den Anfang. Wer mehr will, öffnet die Notiz. */
.notiz-text { max-height: 132px; overflow: hidden; font-size: 12.5px; color: var(--ink-soft);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.notiz-text .hinweis { margin: 0; }

.notiz-termine { display: flex; flex-wrap: wrap; gap: 4px; }
.notiz-ohne { margin: 0; }
.notiz-mehr { align-self: center; color: var(--muted-soft); font-size: 10.5px; }
.notiz-fuss { display: flex; justify-content: space-between; gap: var(--s2); color: var(--muted-soft);
  font-size: 10.5px; padding-top: 4px; border-top: 1px solid var(--line); }

/* Ein verknüpfter Termin: Datum, Name, Uhrzeit — anklickbar. */
.termin-marke { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; padding: 3px 8px;
  color: var(--ton); background: color-mix(in srgb, var(--ton) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ton) 26%, transparent); border-radius: var(--rr);
  font-size: 10.5px; cursor: pointer; transition: background .13s ease; }
.termin-marke:hover { background: color-mix(in srgb, var(--ton) 22%, transparent); }
.termin-marke b { font-variant-numeric: tabular-nums; font-weight: 700; }
.termin-marke span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.termin-marke em { flex: none; font-style: normal; color: var(--muted); }

/* Im Terminfenster stehen umgekehrt die Notizen. */
.notiz-marken { display: flex; flex-wrap: wrap; gap: 5px; }
.notiz-marke { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 10px;
  color: var(--ton); background: color-mix(in srgb, var(--ton) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ton) 26%, transparent); border-radius: var(--rr);
  font-size: 11.5px; font-weight: 600; cursor: pointer; }
.notiz-marke:hover { background: color-mix(in srgb, var(--ton) 22%, transparent); }
.notiz-marke svg { width: 13px; height: 13px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* Die Farbwahl im Notizdialog — dieselbe Machart wie die Art-Wahl beim
   Termin, nur ohne Beschriftung. */
.farb-wahl { display: flex; flex-wrap: wrap; gap: var(--s2); }
.farb-karte { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r2);
  border: 1px solid var(--line); cursor: pointer; transition: border-color .13s ease, background .13s ease; }
.farb-karte input { position: absolute; opacity: 0; width: 0; height: 0; }
.farb-punkt { width: 16px; height: 16px; background: var(--ton); border-radius: 999px; }
/* Die gewählte Farbe muss man sehen: kräftiger Rahmen, hinterlegte Fläche
   und ein Haken auf dem Punkt. Ein dünner Rahmen allein war zu wenig — man
   klickte und meinte, es sei nichts geschehen. */
.farb-karte:has(input:checked), .farb-karte.gewaehlt, .farb-frei.gewaehlt {
  border-color: var(--ton); background: color-mix(in srgb, var(--ton) 16%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ton) 28%, transparent);
}
.farb-karte:has(input:checked) .farb-punkt::after,
.farb-karte.gewaehlt .farb-punkt::after,
.farb-frei.gewaehlt .farb-punkt::after {
  content: ""; display: block; width: 8px; height: 4px; margin: 4px auto 0;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.farb-karte:has(input:focus-visible), .farb-karte:focus-visible, .farb-frei:focus-within { box-shadow: var(--ring); }

/* Eine schon vergebene Farbe lässt sich nicht wählen — sie steht nur da,
   damit man sieht, warum. */
.farb-karte.belegt { cursor: not-allowed; opacity: .35; }
.farb-karte.belegt .farb-punkt { position: relative; }
.farb-karte.belegt .farb-punkt::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: 50%;
  height: 2px; background: var(--ink); transform: rotate(-45deg); border-radius: 2px;
}
.hinweis.warnend { color: var(--red); font-weight: 600; }

/* Die freie Farbe: dasselbe Kästchen, darin das Farbfeld des Browsers. */
.farb-frei { position: relative; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--r2); border: 1px solid var(--line); cursor: pointer; overflow: hidden;
  transition: border-color .13s ease, background .13s ease; }
.farb-frei input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; opacity: 0; cursor: pointer; }
.farb-frei .farb-punkt { background: var(--ton);
  background-image: conic-gradient(from 220deg, #be123c, #b45309, #15803d, #0f766e, #2563eb, #7c3aed, #c026d3, #be123c); }
.farb-frei.gewaehlt .farb-punkt { background-image: none; }

/* Ein Suchfeld unmittelbar in einem Dialogblock nimmt dessen Breite. */
.dialog-block > .bk-suche { width: 100%; }

/* Die Terminauswahl im Notizdialog. Eine eigene Blätterfläche, damit der
   Dialog nicht mit jedem Termin länger wird. */
.termin-wahl { display: grid; gap: 3px; max-height: 300px; margin-top: var(--s2); padding-right: 4px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.termin-wahl-zeile { display: grid; grid-template-columns: 17px 10px 1fr auto; align-items: center; gap: var(--s2);
  padding: 7px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); cursor: pointer;
  transition: border-color .13s ease, background .13s ease; }
.termin-wahl-zeile:hover { border-color: var(--muted-soft); }
.termin-wahl-zeile input { position: absolute; opacity: 0; width: 0; height: 0; }
.termin-wahl-punkt { width: 10px; height: 10px; background: var(--ton); border-radius: 999px; opacity: .45; }
.termin-wahl-zeile.gewaehlt { border-color: var(--ton); background: color-mix(in srgb, var(--ton) 9%, transparent); }
.termin-wahl-zeile.gewaehlt .termin-wahl-punkt { opacity: 1; }
.termin-wahl-text { display: grid; gap: 1px; min-width: 0; }
.termin-wahl-text strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termin-wahl-text em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.termin-wahl-art { flex: none; color: var(--muted-soft); font-size: 10.5px; }

/* --- Das geöffnete Heft ------------------------------------------------- */

/* Kopfzeile: links Rückweg, Titel und Umfang, rechts Farbe, Stand und
   Löschen. Der Titel ist ein Feld ohne Rahmen — er sieht aus wie eine
   Überschrift und lässt sich trotzdem tippen. */
.notiz-kopfzeile { align-items: flex-end; }
.notiz-kopf-links { min-width: 0; flex: 1; }
.notiz-name { width: 100%; max-width: 640px; padding: 2px 0; margin: 2px 0;
  font-size: 22px; font-weight: 650; letter-spacing: -.5px; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; }
.notiz-name:hover { border-bottom-color: var(--line); }
.notiz-name:focus { outline: none; border-bottom-color: var(--ton, var(--accent)); box-shadow: none; }
.notiz-kopf-rechts { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.farb-wahl.klein { gap: 4px; }
.farb-wahl.klein .farb-karte { width: 22px; height: 22px; }
.farb-wahl.klein .farb-punkt { width: 12px; height: 12px; }

/* Der Stand des Speicherns steht dort, wo man ihn beim Schreiben streift. */
.speicher-stand { font-size: 11px; color: var(--muted-soft); font-variant-numeric: tabular-nums; }
.speicher-stand.laeuft { color: var(--accent); }
.speicher-stand.offen { color: var(--amber, #b45309); }
.speicher-stand.fehler { color: var(--red); font-weight: 600; }

.notiz-arbeit { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: var(--s4); align-items: start; }
/* min-width: 0 — sonst weigert sich ein Rasterfeld, unter die Mindestbreite
   seines Inhalts zu gehen, und die Kachel ragt über die Spalte hinaus. */
.notiz-spalte { display: grid; gap: var(--s3); min-width: 0; }
.notiz-spalte > .panel { min-width: 0; }
.notiz-blatt { display: grid; gap: var(--s3); align-content: start; }

/* Die Seitenliste: Nummer, Überschrift, und rechts das Werkzeug, das erst
   beim Darüberfahren erscheint — sonst wäre die Liste voller Knöpfe. */
.seiten-liste { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.seiten-zeile { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 2px 4px 2px 0;
  border-radius: var(--r2); transition: background .13s ease; }
.seiten-zeile:hover { background: var(--surface); }
.seiten-zeile.aktiv { background: var(--accent-soft); }
.seiten-knopf { flex: 1; display: flex; align-items: center; gap: var(--s2); min-width: 0;
  padding: 7px 8px; text-align: left; background: none; border: 0; cursor: pointer; font-size: 12.5px; color: var(--ink-soft); }
.seiten-knopf b { flex: none; display: grid; place-items: center; width: 20px; height: 20px;
  color: var(--muted); background: var(--surface-deep, var(--surface)); border-radius: var(--r1);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Ohne min-width bleibt ein Feld so breit wie sein längstes Wort — die
   Auslassungspunkte greifen nie, und die Zeile sprengt die Kachel. */
.seiten-knopf span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seiten-zeile.aktiv .seiten-knopf { color: var(--accent-dark); font-weight: 600; }
.seiten-zeile.aktiv .seiten-knopf b { color: #fff; background: var(--accent); }
.seiten-werkzeug { display: flex; gap: 0; opacity: 0; transition: opacity .13s ease; }
.seiten-zeile:hover .seiten-werkzeug, .seiten-zeile:focus-within .seiten-werkzeug { opacity: 1; }
.seiten-werkzeug .icon-button { width: 22px; height: 22px; }

/* Das Blatt selbst: Überschrift ohne Rahmen, darunter der Editor, der mit
   dem Text wächst statt in einem Kästchen zu blättern. */
.seiten-name { width: 100%; padding: 4px 0; font-size: 16px; font-weight: 600; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.seiten-name:focus { outline: none; border-bottom-color: var(--accent); box-shadow: none; }
.seiten-name::placeholder { font-weight: 500; color: var(--muted-soft); }
.notiz-blatt .rtf { border-color: var(--line); }
.notiz-blatt .rtf-flaeche { max-height: none; font-size: 14px; }

.termin-wahl-block { display: grid; gap: var(--s2); margin-top: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--line); }
.termin-wahl-block .bk-suche { width: 100%; }
.termin-wahl-block .termin-wahl { max-height: 260px; margin-top: 0; }

@media (max-width: 1100px) {
  .notiz-arbeit { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .notiz-leiste { flex-wrap: wrap; }
  .notiz-leiste .bk-suche { max-width: none; }
  .notiz-kopf-rechts { width: 100%; justify-content: space-between; }
}

/* --- Statistik je Fach --- */
.fach-statistik { margin-bottom: var(--s4); }
.fach-statistik .legende { display: flex; gap: var(--s3); font-size: 11px; color: var(--muted); }
.punkt.lernkarten { background: var(--accent); }
.punkt.pruefungen { background: #7c3aed; }

.fach-liste { display: grid; gap: var(--s3); }
.fach-eintrag {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5);
  padding: var(--s4); background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--fach, var(--accent));
  border-radius: var(--r2);
}
.fach-kopf { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); }
.fach-punkt { width: 9px; height: 9px; background: var(--fach, var(--accent)); border-radius: 999px; }
.fach-kopf strong { font-size: 13.5px; }
.fach-umfang { margin-left: auto; font-size: 11px; color: var(--muted); }

/* Ein Messwert: Name, Balken, Zahl, darunter die Erläuterung. */
.fach-messwert { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s2) var(--s3); }
.messwert-name { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.messwert-balken { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.messwert-balken span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.messwert-balken.lernkarten span { background: linear-gradient(90deg, var(--accent), #60a5fa); }
.messwert-balken.pruefungen span { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.messwert-balken.leer { background: var(--line); }
.messwert-zahl { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.messwert-zahl.leer { color: var(--muted-soft); font-weight: 500; }
.messwert-fuss { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.messwert-fuss .offen { font-style: normal; color: var(--amber, #b45309); font-weight: 600; }

@media (max-width: 900px) {
  .fach-eintrag { grid-template-columns: 1fr; }
}

/* --- Abgegebene Prüfungen --- */
.pruefungs-liste { display: grid; gap: 2px; }
.pruefungs-zeile {
  display: grid; grid-template-columns: 1fr auto auto 56px; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border-radius: var(--r2);
}
.pruefungs-zeile:hover { background: var(--surface); }
.pruefung-namen strong { display: block; font-size: 12.5px; }
.pruefung-namen p { margin: 1px 0 0; font-size: 11px; color: var(--muted); }
.pruefung-punkte { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pruefungs-zeile .score { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Lernplan: Ablauf zusammenstellen --- */
#block-liste { display: grid; gap: var(--s2); margin-bottom: var(--s2); }
.block-zeile { padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); }
.block-kopf { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.block-nummer { display: grid; place-items: center; width: 24px; height: 24px; font-size: 11.5px; font-weight: 600;
  color: #fff; background: var(--accent); border-radius: var(--r1); }
.block-kopf .block-art { flex: 1; min-height: 32px; padding: 5px 9px; font-size: 12.5px; }
.block-zeit { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.block-zeit input { width: 68px; min-height: 32px; padding: 5px 8px; font-size: 12.5px; }
.block-dauer { font-size: 12px; color: var(--muted); white-space: nowrap; }
.block-pfeile { display: flex; gap: 2px; }

/* --- Lernplan: Ablauf in der Kachel --- */
.plan-ablauf { display: grid; gap: 4px; margin: var(--s2) 0; padding: 0; list-style: none; }
.plan-ablauf li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: var(--s2);
  font-size: 11.5px; color: var(--muted); }
.ablauf-nummer { display: grid; place-items: center; width: 18px; height: 18px; font-size: 10px; font-weight: 600;
  color: var(--accent-dark); background: var(--accent-soft); border-radius: var(--r1); }

/* --- Lernplan: Durchführung --- */
.plan-lauf { display: grid; gap: var(--s4); }
/* Der Kopf bleibt beim Blättern oben stehen. Pause und Abbrechen müssen
   jederzeit erreichbar sein — auch mitten im Lernen oder in der Prüfung, wo
   der Inhalt darunter über die Fensterhöhe hinausgeht. */
.plan-lauf-kopf { position: sticky; top: var(--s2); z-index: 12;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5);
  background: var(--panel); border: 1px solid var(--line-strong); border-left: 4px solid var(--color, var(--accent));
  border-radius: var(--r3); box-shadow: var(--shadow); }
.plan-lauf-kopf > div:first-child { flex: 1; min-width: 200px; }
.plan-lauf-kopf h1 { margin: 2px 0; font-size: 20px; }
.plan-uhr { display: grid; justify-items: center; padding: var(--s2) var(--s4); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r2); }
.plan-uhr span { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.plan-uhr em { font-size: 10.5px; font-style: normal; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.plan-uhr.pausiert span { color: var(--muted); }
.plan-lauf-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); }
.plan-lauf-knoepfe svg { width: 15px; height: 15px; }

.plan-lauf .lauf-kopf { position: static; }

.plan-schritte { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.plan-schritte li { display: flex; align-items: center; gap: var(--s2); padding: 7px var(--s3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); font-size: 11.5px; color: var(--muted); }
.plan-schritte li.laeuft { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.plan-schritte li.fertig { opacity: .6; }
.plan-schritte li.fertig .schritt-nummer { background: var(--green, #15803d); }
.schritt-nummer { display: grid; place-items: center; width: 18px; height: 18px; font-size: 10px; font-weight: 600;
  color: #fff; background: var(--muted-soft); border-radius: 999px; }
.plan-schritte li.laeuft .schritt-nummer { background: var(--accent); }
.schritt-name em { display: block; font-style: normal; font-size: 10.5px; opacity: .8; }
.schritt-zeit { white-space: nowrap; }
.empty.gross { padding: var(--s6) var(--s5); font-size: 14px; }

/* --- Mehrere Antwortfelder --- */
.felder-block { display: grid; gap: var(--s2); }
#felder-liste { display: grid; gap: var(--s2); }
.feld-zeile { display: grid; gap: 5px; padding: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); }
.feld-kopf { display: flex; align-items: center; gap: var(--s2); }
.feld-kopf .feld-titel { flex: 1; min-height: 30px; padding: 5px 9px; font-size: 12.5px; }
.feld-marke { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Die Eingabefelder des Lernenden, eines je erwarteter Antwort. */
.response-form.mehrfeld { display: grid; gap: var(--s3); }
.antwortfeld { display: grid; gap: 4px; }

/* Mehrteilige Antworten in Auswertung und Korrektur. */
.feld-antwort { display: grid; gap: 3px; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.feld-antwort:last-child { border-bottom: 0; padding-bottom: 0; }
.feld-antwort:first-child { padding-top: 0; }
.feld-antwort em { color: var(--muted-soft); }

/* Dateien im Aufgabendialog. */
.datei-liste { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); }
.datei-liste .hinweis { margin: 0; }
.wartet-anhang { border-style: dashed; }
.wartet-anhang em { margin-left: 5px; font-size: 10.5px; font-style: normal; color: var(--muted); }

.feld-vergleich { display: grid; gap: 4px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.feld-vergleich:last-child { border-bottom: 0; padding-bottom: 0; }
.feld-vergleich .feld-marke { color: var(--accent-dark); }

/* --- Markieren, Menü zur rechten Maustaste, Streifen --- */
.wahl { display: inline-flex; align-items: center; justify-content: center; padding: 2px; cursor: pointer; }
.wahl { flex: none; }
.spalte-wahl { width: 30px; padding-right: 0 !important; }
.ist-markiert { background: var(--accent-soft) !important; box-shadow: inset 3px 0 0 var(--accent); }
tr.ist-markiert td { background: var(--accent-soft); }

.kontextmenue { position: fixed; z-index: 60; min-width: 190px; padding: 5px; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: var(--r2); box-shadow: var(--shadow-modal); display: grid; gap: 1px; }
.menue-eintrag { display: block; width: 100%; padding: 7px 11px; text-align: left; font-size: 12.5px; color: var(--ink);
  background: none; border: 0; border-radius: var(--r1); cursor: pointer; }
.menue-eintrag:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-dark); }
.menue-eintrag:disabled { color: var(--muted-soft); cursor: default; }
/* Löschen hebt sich durch die Schriftfarbe hervor, nicht durch eine rote
   Fläche — im Menü wäre das ein sehr lauter Block. */
.menue-eintrag.gefahr { color: var(--red); background: none; border-color: transparent; box-shadow: none; }
.menue-eintrag.gefahr:hover:not(:disabled) { background: var(--surface); color: var(--red); }
.menue-trenner { height: 1px; margin: 3px 6px; background: var(--line); }

.auswahl-streifen { position: fixed; left: 50%; bottom: 18px; z-index: 55; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s2); padding: 8px 10px 8px 16px; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: var(--r3); box-shadow: var(--shadow-modal); font-size: 12.5px; }
.auswahl-streifen span { margin-right: var(--s2); color: var(--muted); }
.auswahl-streifen .secondary, .auswahl-streifen .text-button { min-height: 30px; padding: 5px 11px; font-size: 12px; }

/* Der Kopf eines Fachs ist jetzt aufklappbar. */
.fach-klapp > summary { list-style: none; cursor: pointer; }
.fach-klapp > summary::-webkit-details-marker { display: none; }
.fach-klapp[open] > summary .ka-pfeil { transform: rotate(180deg); }
.modal-layer { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--s4); background: rgba(15, 23, 42, .38); backdrop-filter: blur(2px); animation: schleier .16s ease; }
.modal { border-radius: var(--r4); width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow-modal); animation: aufblenden .18s ease; }

/* Solange ein Fenster offen ist, wird nur darin markiert. Zieht die Maus
   dabei über den Rand hinaus, darf sie weder den Schleier noch die Seite
   dahinter erfassen — sonst reisst die Markierung quer durch die Anwendung. */
body:has(#modal-root .modal-layer) #app,
.modal-layer { user-select: none; -webkit-user-select: none; }
.modal-layer .modal { user-select: text; -webkit-user-select: text; }
@keyframes schleier { from { opacity: 0; } }
@keyframes aufblenden { from { opacity: 0; transform: translateY(6px); } }

/* Kopf und Fuss bleiben beim Blättern stehen. */
/* Ein langes Dialogfenster scrollt. Der übliche Bildlaufbalken legt eine
   graue Bahn an den rechten Rand und schneidet damit die runden Ecken ab —
   genau das war beim Aufgabenfenster zu sehen. Mit durchsichtiger Bahn und
   eingerücktem Griff bleiben die Ecken sichtbar. */
.modal, .weites-fenster > form { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.modal::-webkit-scrollbar, .weites-fenster > form::-webkit-scrollbar { width: 12px; }
.modal::-webkit-scrollbar-track, .weites-fenster > form::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb, .weites-fenster > form::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
.modal::-webkit-scrollbar-thumb:hover,
.weites-fenster > form::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); background-clip: content-box; }

/* Die langen Fenster — Aufgabe und Notiz — bekommen mehr Breite und einen
   eigenen Blätterbereich: Kopf und Fussleiste stehen fest, gescrollt wird
   allein das Formular dazwischen. Der Bildlaufbalken läuft damit genau über
   den beweglichen Teil und nicht mehr über die runden Ecken des Fensters.
   „scrollbar-gutter“ hält seine Bahn frei, sodass der Inhalt beim Erscheinen
   des Balkens nicht springt.
   Voraussetzung ist der Aufbau: Kopf, Formular und Fussleiste als drei
   Geschwister, die Schaltfläche zum Speichern über „form“ am Formular. */
.modal.weites-fenster { width: min(1180px, 100%); display: flex; flex-direction: column; overflow: hidden; }
/* Kopf und Fuss rücken um die Breite der Balkenbahn ein, damit ihr rechter
   Rand mit dem des Formulars auf einer Linie steht. */
.modal.weites-fenster > .modal-head,
.modal.weites-fenster > .modal-actions { position: static; flex: none; padding-right: calc(var(--s5) + 12px); }
.modal.weites-fenster > form { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
/* Der letzte Block im Formular grenzt jetzt an die Fussleiste; sein Strich
   wäre einer zu viel. */
.modal.weites-fenster > form > .dialog-block:last-child { border-bottom: 0; }

.modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--panel); border-bottom: 1px solid var(--line); }
.modal h2 { margin: 0; font-size: 16px; letter-spacing: -.3px; }
.modal-unter { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.modal-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s5); background: var(--panel); border-top: 1px solid var(--line); }
.modal-actions .danger { margin-right: auto; }

/* Der Dialog führt in nummerierten Schritten durch die Eingabe. */
/* Ein Formularblock, der unmittelbar im Fenster steht statt in einem
   dialog-block, hat sonst keinen Abstand — sein Inhalt klebte am Rand.
   Genau das war an den Fenstern für Fach, Thema, Lernplan und Passwort zu
   sehen. */
.modal > form > .form-grid { padding: var(--s4) var(--s5); }
.modal > form > .subtitle { padding: var(--s4) var(--s5) 0; }
.modal > form > .subtitle + .form-grid { padding-top: var(--s3); }

.dialog-block { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.dialog-block.schmal { padding-top: var(--s3); padding-bottom: var(--s3); }
.block-kopf { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.block-nummer { border-radius: var(--r1); display: grid; place-items: center; width: 19px; height: 19px; color: var(--accent-dark); background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 11px; font-weight: 700; }
.block-kopf h3 { margin: 0; font-size: 12.5px; font-weight: 650; color: var(--ink); }

.format-wahl { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.format-karte { border-radius: var(--r3); display: grid; gap: 3px; padding: var(--s3) var(--s2); text-align: left; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow); transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.format-karte:hover { border-color: var(--muted-soft); box-shadow: var(--shadow-lift); }
.format-karte.aktiv { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--ring); }
.format-karte strong { font-size: 12px; }
.format-karte small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.format-karte.aktiv strong { color: var(--accent-dark); }
.format-bild { display: block; margin-bottom: var(--s1); }
.format-bild svg { width: 32px; height: 24px; }
.format-bild .rahmen { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.format-bild .strich { fill: none; stroke: var(--muted-soft); stroke-width: 1.6; stroke-linecap: round; }
.format-bild .haken { fill: none; stroke: var(--panel); stroke-width: 1.6; stroke-linecap: round; }
.format-bild .voll { fill: var(--muted); }
.format-bild .cursor { stroke: var(--accent); stroke-width: 1.6; }
.format-karte.aktiv .format-bild .rahmen { stroke: var(--accent); }
.format-karte.aktiv .format-bild .strich { stroke: var(--accent-line); }
.format-karte.aktiv .format-bild .voll { fill: var(--accent); }

.hinweis.oben { margin: 0 0 var(--s2); }
.schmal-knopf { margin-top: var(--s2); }

/* Antwortmöglichkeiten */
.choice-editor-list { display: grid; gap: var(--s1); }
.choice-editor { border-radius: var(--r2); display: grid; grid-template-columns: 22px 18px 1fr 26px; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); background: var(--panel); border: 1px solid var(--line); transition: border-color .14s ease, background .14s ease; }
.choice-editor:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.choice-editor.ist-richtig { background: var(--green-soft); border-color: var(--green-line); }
.choice-editor .marke { display: grid; place-items: center; cursor: pointer; }
.choice-editor .marke input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Dasselbe Aussehen wie das Kästchen der Auswahlflächen, nur gezeichnet:
   Hier liegt das echte Feld unsichtbar darunter. */
.marke-bild { display: grid; place-items: center; width: 17px; height: 17px;
  background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: 5px;
  transition: background .14s ease, border-color .14s ease; }
.marke input:checked + .marke-bild { background: var(--green); border-color: var(--green); }
.marke input:checked + .marke-bild::after { content: ""; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px); }
.marke input:focus-visible + .marke-bild { box-shadow: var(--ring); }
.choice-editor b { color: var(--muted); font-size: 11px; }
.choice-editor.ist-richtig b { color: var(--green); }
.choice-editor .choice-text { padding: 6px 8px; background: transparent; border: 0; font-size: 12.5px; }
.choice-editor .choice-text:focus { outline: none; }

/* Formen-Editor */
.formen-werkzeug { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1); margin-bottom: var(--s3); }
.werkzeug-knopf { border-radius: var(--r2); display: grid; justify-items: center; gap: 3px; padding: var(--s2) var(--s1); color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line-strong); font-size: 11px; font-weight: 600; box-shadow: var(--shadow); transition: border-color .14s ease, background .14s ease, color .14s ease; }
.werkzeug-knopf:hover { color: var(--accent-dark); background: var(--accent-soft); border-color: var(--accent); }
.werkzeug-bild svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.formen-leer { border-radius: var(--r3); padding: var(--s5) var(--s4); text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); }
.formen-leer p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.formen-leer strong { color: var(--ink-soft); }
.formen-flaeche.bearbeitbar { background: var(--panel); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 10% 10%; }
.formen-flaeche.bearbeitbar .form-feld { display: grid; place-items: center; cursor: grab; border: 1px dashed transparent; }
.formen-flaeche.bearbeitbar .form-feld:hover { border-color: var(--muted-soft); }
.formen-flaeche.bearbeitbar .form-feld.gewaehlt { border: 1px solid var(--accent); background: rgba(37, 99, 235, .06); }
.formen-flaeche.bearbeitbar .form-feld.aktiv { cursor: grabbing; }
.form-nummer { border-radius: var(--r1) 0 var(--r1) 0; position: absolute; top: -1px; left: -1px; display: grid; place-items: center; width: 16px; height: 16px; color: #fff; background: var(--muted); font-size: 10px; font-weight: 700; }
.form-feld.gewaehlt .form-nummer { background: var(--accent); }
.form-text { padding: 0 var(--s1); color: var(--ink); font-size: 11.5px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.anfasser { border-radius: var(--rr); position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; background: var(--accent); border: 2px solid var(--panel); cursor: nwse-resize; }
.formen-svg .form.gewaehlt { fill: rgba(37, 99, 235, .12); stroke-width: 1; }
.formen-svg .form-linie.gewaehlt { stroke-width: 3; }
.formen-liste { display: grid; gap: var(--s1); margin-top: var(--s3); }
.formen-zeile { border-radius: var(--r2); display: grid; grid-template-columns: 20px 62px 1fr 26px; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.formen-zeile.gewaehlt { background: var(--accent-soft); border-color: var(--accent-line); }
.formen-zeile b { border-radius: var(--r1); display: grid; place-items: center; width: 20px; height: 20px; color: #fff; background: var(--muted); font-size: 10.5px; }
.formen-zeile.gewaehlt b { background: var(--accent); }
.formen-art { color: var(--muted); font-size: 11px; }
.formen-zeile .shape-label { padding: 5px 7px; background: transparent; border: 0; font-size: 12.5px; }
.formen-zeile .shape-label:focus { outline: none; }
.formen-zeile:focus-within { border-color: var(--accent); box-shadow: var(--ring); }

.form-grid { display: grid; gap: var(--s3); }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 5px; }
.field label { color: var(--ink-soft); font-size: 11.5px; font-weight: 650; }
.field input, .field textarea, .field select {  border-radius: var(--r2);
  width: 100%; min-height: 34px; padding: 8px 10px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-strong); outline: none; font-size: 12.5px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-soft); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--muted-soft); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: var(--ring); }
.field textarea { min-height: 64px; resize: vertical; line-height: 1.5; }
.field input[type="color"] { width: 76px; height: 38px; padding: 3px; cursor: pointer; }
/* Farbe und Name stehen nebeneinander, damit das Farbfeld nicht die ganze
   Zeile einnimmt und wie ein leerer Balken wirkt. */
.farbfeld { display: flex; align-items: center; gap: var(--s3); }
.farbfeld .hinweis { margin: 0; }


/* ---------- Anmeldung ---------- */

.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--page); }
.login-art { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(26px, 4vw, 52px); background: var(--accent-soft); border-right: 1px solid var(--line); }
.login-art h1 { max-width: 420px; font-size: clamp(23px, 2.4vw, 31px); line-height: 1.15; letter-spacing: -.7px; }
.login-art p { max-width: 420px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.login-features { display: flex; flex-wrap: wrap; gap: 16px; color: var(--ink-soft); font-size: 11.5px; }
.login-features span::before { content: "✓"; margin-right: 5px; color: var(--accent); font-weight: 700; }
.login-form-wrap { border-radius: 0; display: grid; place-items: center; padding: 26px; background: var(--panel); }
.login-form { width: min(340px, 100%); }
.login-form .brand { padding: 0; margin-bottom: 26px; }
.login-form h2 { margin: 0; font-size: 20px; letter-spacing: -.5px; }
.login-form .subtitle { margin: 4px 0 18px; }
.login-form .primary { width: 100%; margin-top: 12px; }
.login-notice { min-height: 16px; margin: 10px 0 0; color: var(--red); font-size: 12px; text-align: center; }

/* ---------- Hinweise ---------- */

.toast { border-radius: var(--r2); position: fixed; z-index: 30; right: 16px; bottom: 16px; padding: 9px 12px; color: #fff; background: var(--ink); border: 1px solid var(--ink); font-size: 12px; box-shadow: 0 6px 18px rgba(15, 23, 42, .2); animation: pop .18s ease; }
.toast.error { background: var(--red); border-color: var(--red); }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Responsiv ---------- */

@media (max-width: 980px) {
  .app-layout { grid-template-columns: 58px minmax(0, 1fr); }
  .sidebar { align-items: center; padding: 14px 7px; }
  .brand span, .nav span, .sidebar-bottom { display: none; }
  .brand { padding: 0; }
  .nav button { justify-content: center; padding: 9px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-grid, .stats-top { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .app-layout { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 10; flex-direction: row; justify-content: space-between; height: 50px; padding: 7px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .plan-lauf-kopf { top: 50px; }
  .brand-mark { width: 24px; height: 24px; }
  .nav { display: flex; gap: 0; }
  .nav button { padding: 8px; }
  .nav button.active { box-shadow: inset 0 -2px 0 var(--accent); }
  .main { padding: 16px 11px 26px; }
  .page-head { margin-bottom: 13px; }
  .page-head .primary { padding: 8px; font-size: 0; }
  .page-head .primary svg { margin: 0; }
  .card-row { grid-template-columns: 1fr auto; gap: 9px; }
  .card-row .metric, .card-row .tag { display: none; }
  .plan-grid, .analysis-grid, .form-grid.two { grid-template-columns: 1fr; }
  .grades { grid-template-columns: repeat(2, 1fr); }
  .study-card { min-height: calc(100vh - 130px); padding: 22px 14px; }
  .study-card h2 { margin: 14px auto 18px; font-size: 23px; }
  .grades { grid-template-columns: repeat(2, 1fr); margin-top: 14px; }
  .response-form textarea { font-size: 15px; }
  .formen-zeile { grid-template-columns: 18px 1fr 60px 60px 24px; }
  .login-page { grid-template-columns: 1fr; }
  .login-art { min-height: 210px; gap: 18px; padding: 24px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .login-features { display: none; }
  .login-form-wrap { padding: 26px 20px; }
  .modal { padding: 13px; }
}

/* ---------- Aufgewertete Kacheln und Diagramme ---------- */

/* Kennzahl-Kachel: farbiges Sinnbild oben, grosse Zahl, Verlaufshinweis. */
.stat-card { border-top: 0; padding: var(--s4); }
.stat-kopf { display: flex; align-items: center; gap: var(--s2); }
.stat-zeichen { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r2); background: color-mix(in srgb, var(--tone, var(--accent)) 12%, transparent); color: var(--tone, var(--accent)); flex-shrink: 0; }
.stat-zeichen svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.stat-card .stat-kopf p { margin: 0; font-size: 11.5px; color: var(--muted); font-weight: 550; }
.stat-card strong { margin-top: var(--s3); font-size: 26px; }
.stat-fuss { display: flex; align-items: center; gap: 5px; margin-top: var(--s1); }
.trend { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: var(--rr); font-size: 10.5px; font-weight: 650; }
.trend.hoch { color: var(--green); background: var(--green-soft); }
.trend.runter { color: var(--red); background: var(--red-soft); }
.trend.neutral { color: var(--muted); background: var(--surface); }
.trend svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* Balken mit weichem Verlauf statt flacher Farbe. */
.bar { background: linear-gradient(180deg, #60a5fa 0%, var(--accent) 100%); transition: opacity .14s ease; }
.bar-wrap:hover .bar { opacity: .82; }
.bar-area { background: var(--surface); }
.chart { align-items: end; }

/* Flächendiagramm für den Zeitverlauf. */
.flaeche-diagramm { position: relative; width: 100%; height: 150px; margin-top: var(--s3); }
.flaeche-diagramm svg { width: 100%; height: 100%; overflow: visible; }
.flaeche-fuellung { fill: url(#verlaufBlau); }
.flaeche-linie { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.flaeche-punkt { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.flaeche-raster { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.flaeche-achse { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted-soft); font-size: 10px; }

/* Ringdiagramm für Anteile. */
.ring-bereich { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.ring { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 13; stroke-linecap: round; }
.ring-spur { stroke: var(--surface-deep); }
.ring-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-mitte strong { font-size: 22px; font-weight: 660; letter-spacing: -.7px; }
.ring-mitte span { color: var(--muted); font-size: 10.5px; }
.ring-legende { display: grid; gap: var(--s2); flex: 1; min-width: 140px; }
.ring-legende div { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: var(--s2); font-size: 12px; color: var(--muted); }
.ring-legende i { width: 9px; height: 9px; border-radius: var(--rr); background: var(--color); }
.ring-legende strong { color: var(--ink); font-size: 12.5px; }

/* ---------- Dialoge im Stil der Vorlage ---------- */

.modal-head { padding: var(--s5) var(--s5) var(--s4); }
.dialog-block { padding: var(--s4) var(--s5); }
.modal-actions { padding: var(--s4) var(--s5); gap: var(--s3); }
.modal-actions .primary, .modal-actions .secondary { min-height: 38px; padding: 9px 18px; }

/* Bestätigungsdialog: Sinnbild, Frage, zwei klare Wege. */
.bestaetigung { width: min(400px, 100%); padding: var(--s5); text-align: left; }
.bestaetigung .zeichen { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s4); border-radius: var(--r3); background: var(--surface); color: var(--ink-soft); }
.bestaetigung.warnend .zeichen { background: var(--red-soft); color: var(--red); }
.bestaetigung .zeichen svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.bestaetigung h2 { margin: 0 0 var(--s2); font-size: 17px; letter-spacing: -.3px; }
.bestaetigung p { margin: 0 0 var(--s5); color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.bestaetigung .wege { display: flex; justify-content: flex-end; gap: var(--s2); }
.bestaetigung .wege button { min-height: 38px; padding: 9px 18px; }
.gefahr { color: #fff; background: var(--red); border-color: var(--red); box-shadow: var(--shadow); }
.gefahr:hover { background: #9f1239; border-color: #9f1239; box-shadow: var(--shadow-lift); }

/* ---------- Prüfungen ---------- */

.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s3); }
.exam-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); transition: box-shadow .14s ease, transform .14s ease; }
.exam-card:hover { box-shadow: var(--shadow-lift); }
.exam-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.exam-kopf h2 { margin: 0; font-size: 15px; letter-spacing: -.2px; }
.exam-kopf p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; }
.exam-text { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.exam-werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.exam-werte div { display: grid; gap: 2px; }
.exam-werte span { color: var(--muted); font-size: 10px; }
.exam-werte strong { font-size: 13.5px; }
.exam-werte .gut { color: var(--green); }
.exam-werte .schwach { color: var(--amber); }
.exam-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: auto; }

.leerzustand { display: grid; justify-items: center; gap: var(--s3); padding: var(--s6) var(--s5); text-align: center; }
.leer-zeichen { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r3); background: var(--accent-soft); color: var(--accent); }
.leer-zeichen svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.leerzustand h2 { margin: 0; font-size: 16px; }
.leerzustand p { max-width: 420px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

/* Schalter statt nackter Kästchen */
.schalter-reihe { display: grid; gap: var(--s2); }
.schalter { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); cursor: pointer; }
.schalter:hover { border-color: var(--muted-soft); }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter-bild { position: relative; width: 34px; height: 19px; background: var(--line-strong); border-radius: var(--rr); transition: background .16s ease; }
.schalter-bild::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; background: #fff; border-radius: var(--rr); box-shadow: var(--shadow); transition: transform .16s ease; }
.schalter input:checked + .schalter-bild { background: var(--accent); }
.schalter input:checked + .schalter-bild::after { transform: translateX(15px); }
.schalter input:focus-visible + .schalter-bild { box-shadow: var(--ring); }
.schalter strong { display: block; font-size: 12.5px; }
.schalter small { color: var(--muted); font-size: 11px; }

/* Aufgabenliste im Dialog */
.aufgaben { display: grid; gap: var(--s1); }
.aufgabe-zeile { display: grid; grid-template-columns: 22px 1fr 26px 26px; align-items: center; gap: var(--s2); padding: var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); }
.aufgabe-zeile:hover { border-color: var(--line-strong); }
.aufgabe-zeile b { display: grid; place-items: center; width: 22px; height: 22px; color: #fff; background: var(--muted); border-radius: var(--r1); font-size: 11px; }
.aufgabe-text strong { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aufgabe-text span { color: var(--muted); font-size: 11px; }
.versuch-liste { display: grid; gap: var(--s1); }
.versuch-zeile { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s3); padding: var(--s2); background: var(--surface); border-radius: var(--r2); font-size: 11.5px; color: var(--muted); }
.versuch-zeile strong { color: var(--ink); font-size: 12.5px; }
.versuch-zeile p { margin: 1px 0 0; font-size: 10.5px; }
.format-wahl.drei { grid-template-columns: repeat(3, 1fr); }
.task-eingabe { margin-top: var(--s3); }

/* --- Prüfungslauf --- */

body.pruefungsmodus .sidebar { pointer-events: none; opacity: .5; }
.pruefung-lauf { display: grid; gap: var(--s3); }
.lauf-kopf { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow); position: sticky; top: var(--s2); z-index: 5; }
.lauf-titel { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.lauf-titel h1 { margin: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lauf-fortschritt { display: grid; gap: 4px; min-width: 190px; }
.fortschritt-zahl { color: var(--muted); font-size: 11px; }
.lauf-fortschritt .progress-line { margin-top: 0; }
.lauf-rechts { display: flex; align-items: center; gap: var(--s3); }
.uhr { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); font-variant-numeric: tabular-nums; }
.uhr strong { font-size: 16px; letter-spacing: -.3px; }
.uhr-zeichen svg { display: block; width: 15px; height: 15px; stroke: var(--muted); fill: none; stroke-width: 1.8; }
.uhr.knapp { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.uhr.knapp .uhr-zeichen svg { stroke: var(--amber); }
.uhr.kritisch { background: var(--red-soft); border-color: var(--red-line); color: var(--red); animation: pochen 1s ease-in-out infinite; }
.uhr.kritisch .uhr-zeichen svg { stroke: var(--red); }
@keyframes pochen { 50% { opacity: .55; } }

.aufgaben-navigation { display: flex; flex-wrap: wrap; gap: 5px; padding: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow); }
.nummer { width: 32px; height: 32px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); font-size: 12px; font-weight: 650; transition: all .13s ease; }
.nummer:hover { border-color: var(--accent); color: var(--accent); }
.nummer.fertig { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.nummer.aktiv { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: var(--ring); }

.aufgabe-karte { display: flex; flex-direction: column; min-height: 340px; padding: var(--s5); }
.aufgabe-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.aufgabe-zaehler { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aufgabe-punkte { padding: 3px 9px; color: var(--ink-soft); background: var(--surface); border-radius: var(--rr); font-size: 11px; font-weight: 650; }
.aufgabe-karte h2 { margin: 0 0 var(--s5); font-size: 21px; line-height: 1.35; letter-spacing: -.3px; white-space: pre-wrap; }
.aufgabe-karte .response-form, .aufgabe-karte .choice-list { width: 100%; max-width: 760px; }
.hinweis.mitte { text-align: center; }
.lauf-fuss { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow); }
.lauf-hinweis { color: var(--muted-soft); font-size: 11px; text-align: center; }

/* --- Auswertung --- */

.ergebnis { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s5); padding: var(--s5); margin-bottom: var(--s3); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--r3); box-shadow: var(--shadow); }
.ergebnis.nicht-bestanden { border-left-color: var(--red); }
.ergebnis-ring { position: relative; width: 124px; height: 124px; flex-shrink: 0; }
.ergebnis-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ergebnis-ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.ergebnis-ring .ring-spur { stroke: var(--surface-deep); }
.ergebnis-text h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.4px; }
.ergebnis.bestanden .ergebnis-text h2 { color: var(--green); }
.ergebnis.nicht-bestanden .ergebnis-text h2 { color: var(--red); }
.ergebnis-text > p { margin: 0 0 var(--s3); color: var(--muted); font-size: 12.5px; }
.ergebnis-werte { display: flex; flex-wrap: wrap; gap: var(--s5); }
.ergebnis-werte div { display: grid; gap: 2px; }
.ergebnis-werte span { color: var(--muted); font-size: 10.5px; }
.ergebnis-werte strong { font-size: 12.5px; }

.auswertung-liste { display: grid; gap: var(--s2); }
.auswertung-zeile { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r2); overflow: hidden; }
.auswertung-zeile.richtig { border-left-color: var(--green); }
.auswertung-zeile.falsch { border-left-color: var(--red); }
.auswertung-zeile.offen { border-left-color: var(--amber); }
.auswertung-kopf { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--s3); padding: var(--s3); background: var(--surface); }
.auswertung-kopf strong { font-size: 12.5px; }
.auswertung-nummer { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; background: var(--muted); border-radius: var(--r1); font-size: 11px; font-weight: 650; }
.auswertung-zeile.richtig .auswertung-nummer { background: var(--green); }
.auswertung-zeile.falsch .auswertung-nummer { background: var(--red); }
.auswertung-zeile.offen .auswertung-nummer { background: var(--amber); }
.auswertung-punkte { color: var(--muted); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.auswertung-inhalt { display: grid; gap: var(--s3); padding: var(--s3); }
.antwort-block span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.antwort-block p { margin: 0; padding: var(--s2) var(--s3); background: var(--surface); border-radius: var(--r2); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }
.antwort-block.loesung p { color: var(--ink); background: var(--green-soft); border: 1px solid var(--green-line); }

@media (max-width: 900px) {
  .lauf-kopf { grid-template-columns: 1fr; gap: var(--s2); }
  .lauf-rechts { justify-content: space-between; }
  .ergebnis { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ergebnis-werte { justify-content: center; }
  .exam-werte { grid-template-columns: repeat(2, 1fr); }
  .format-wahl, .format-wahl.drei { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Aufgabenreiter mit Titel ---------- */

.aufgaben-navigation { flex-wrap: wrap; }
.aufgaben-reiter { display: flex; align-items: center; gap: 7px; max-width: 210px; padding: 6px 11px 6px 7px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); font-size: 11.5px; transition: all .13s ease; }
.aufgaben-reiter:hover { border-color: var(--accent); color: var(--accent-dark); }
.reiter-nummer { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r1); font-size: 10.5px; font-weight: 700; }
.reiter-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aufgaben-reiter.fertig { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.aufgaben-reiter.fertig .reiter-nummer { color: var(--green); border-color: var(--green-line); }
.aufgaben-reiter.aktiv { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: var(--ring); }
.aufgaben-reiter.aktiv .reiter-nummer { color: var(--accent); background: #fff; border-color: transparent; }

/* Ausgangslage vor der eigentlichen Frage */
.ausgangslage { margin-bottom: var(--s4); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r2); }
.ausgangslage summary { padding: var(--s2) var(--s3); color: var(--accent-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ausgangslage > div { padding: 0 var(--s3) var(--s3); color: var(--ink-soft); font-size: 13px; line-height: 1.65; white-space: pre-wrap; }

/* ---------- Zuordnung ---------- */

.zuordnung { display: grid; gap: var(--s2); width: 100%; max-width: 760px; text-align: left; }
.zuordnung-zeile { display: grid; grid-template-columns: minmax(120px, 1fr) 18px minmax(150px, 1.2fr); align-items: center; gap: var(--s2); padding: var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); }
.zuordnung-zeile.gesetzt { border-color: var(--accent-line); background: var(--accent-soft); }
.zuordnung-links { font-size: 13px; font-weight: 600; }
.zuordnung-pfeil { color: var(--muted-soft); text-align: center; }
.zuordnung-wahl { width: 100%; }
.zuordnung-ergebnis { display: grid; gap: var(--s1); }
.zuordnung-ergebnis .zuordnung-zeile { grid-template-columns: minmax(90px, 1fr) 16px minmax(120px, 1fr) auto; font-size: 12px; }
.zuordnung-zeile.korrekt { background: var(--green-soft); border-color: var(--green-line); }
.zuordnung-zeile.daneben { background: var(--red-soft); border-color: var(--red-line); }
.zuordnung-antwort { font-size: 12.5px; }
.zuordnung-richtig { padding: 2px 7px; color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); border-radius: var(--rr); font-size: 11px; font-weight: 650; }
.zeichen-ok { color: var(--green); font-weight: 700; }

/* ---------- Reihenfolge ---------- */

.reihenfolge { display: grid; gap: 6px; width: 100%; max-width: 640px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.reihenfolge-eintrag { display: grid; grid-template-columns: 16px 24px 1fr auto; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r2); cursor: grab; transition: border-color .13s ease, box-shadow .13s ease; }
.reihenfolge-eintrag:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.reihenfolge-eintrag.zieht { opacity: .45; }
.reihenfolge-eintrag.ziel { border-color: var(--accent); box-shadow: var(--ring); }
.griff { color: var(--muted-soft); font-size: 12px; letter-spacing: -2px; }
.reihenfolge-nummer { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; background: var(--accent); border-radius: var(--r1); font-size: 11px; font-weight: 700; }
.reihenfolge-text { font-size: 13px; }
.reihenfolge-pfeile { display: flex; gap: 2px; }
.reihenfolge-pfeile .icon-button { padding: 2px 5px; font-size: 9px; }
.reihenfolge-pfeile .icon-button[disabled] { opacity: .3; cursor: not-allowed; }
.abfolge-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.abfolge-vergleich span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.abfolge-vergleich ol { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.abfolge-vergleich li { font-size: 12.5px; padding: 2px 5px; border-radius: var(--r1); }
.abfolge-vergleich li.ok { background: var(--green-soft); }
.abfolge-vergleich li.weg { background: var(--red-soft); }

@media (max-width: 700px) {
  .zuordnung-zeile { grid-template-columns: 1fr; }
  .zuordnung-pfeil { display: none; }
  .abfolge-vergleich { grid-template-columns: 1fr; }
}

/* Editoren für Zuordnung und Reihenfolge im Aufgabendialog */
.format-wahl.fuenf { grid-template-columns: repeat(5, 1fr); }
.paar-liste, .schritt-liste { display: grid; gap: var(--s1); }
.paar-kopf { display: grid; grid-template-columns: 1fr 18px 1.3fr 26px; gap: var(--s2); padding: 0 var(--s2); color: var(--muted); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.paar-zeile { display: grid; grid-template-columns: 1fr 18px 1.3fr 26px; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); }
.paar-zeile:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.paar-zeile input { padding: 6px 8px; background: transparent; border: 0; font-size: 12.5px; }
.paar-zeile input:focus { outline: none; }
.schritt-zeile { display: grid; grid-template-columns: 24px 1fr 26px; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); }
.schritt-zeile:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.schritt-nummer { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; background: var(--accent); border-radius: var(--r1); font-size: 11px; font-weight: 700; }
.schritt-zeile input { padding: 6px 8px; background: transparent; border: 0; font-size: 12.5px; }
.schritt-zeile input:focus { outline: none; }
@media (max-width: 900px) { .format-wahl.fuenf { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Prüfungs-Editor als eigene Seite ---------- */

.zurueck { display: inline-block; margin-bottom: 6px; }
.kopf-knoepfe { display: flex; gap: var(--s2); flex-wrap: wrap; }
.editor-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); gap: var(--s3); align-items: start; }
.editor-seite { display: grid; gap: var(--s3); position: sticky; top: var(--s3); }
.rahmen-form { display: grid; gap: var(--s3); margin-top: var(--s3); }
.rahmen-fuss { display: flex; justify-content: space-between; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }

.aufgaben-tafel { display: grid; gap: var(--s2); }
.aufgaben-karte { padding: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); transition: border-color .13s ease, box-shadow .13s ease; }
.aufgaben-karte:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.karte-kopf { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--s2); }
.karte-nummer { display: grid; place-items: center; width: 26px; height: 26px; color: #fff; background: var(--accent); border-radius: var(--r1); font-size: 11.5px; font-weight: 700; }
.karte-titel strong { display: block; font-size: 13px; }
.karte-titel span { color: var(--muted); font-size: 11px; }
.karte-knoepfe { display: flex; gap: 1px; }
.karte-knoepfe .icon-button { padding: 3px 6px; font-size: 10px; }
.karte-knoepfe .icon-button[disabled] { opacity: .28; cursor: not-allowed; }
.karte-frage { margin: var(--s2) 0 0 34px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.karte-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0 0 34px; }
.anhang { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rr); font-size: 11px; text-decoration: none; }
.anhang svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.anhang .icon-button { padding: 0 2px; }
.anhang.hochgeladen { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.datei-link:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.anhang-knopf { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; color: var(--accent); background: var(--accent-soft); border: 1px dashed var(--accent-line); border-radius: var(--rr); font-size: 11px; font-weight: 600; cursor: pointer; }
.anhang-knopf:hover { background: #dbeafe; }
.anhang-knopf svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.leerzustand.klein { padding: var(--s5) var(--s4); }

/* Merkzettel und Vorschau beim Einlesen */
.merkzettel { margin-top: var(--s3); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r2); }
.merkzettel.oben { margin: 0 0 var(--s3); }
.merkzettel strong { display: block; margin-bottom: 4px; font-size: 12.5px; }
.merkzettel p { margin: 0 0 4px; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.merkzettel code { padding: 1px 5px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r1); font-size: 11px; }
.merkzettel .warnen { color: var(--amber); }
.vorschau { margin-top: var(--s3); }
.vorschau-liste { display: grid; gap: 2px; max-height: 260px; overflow: auto; margin-top: var(--s2); padding: var(--s2); background: var(--surface); border-radius: var(--r2); }
.vorschau-zeile { display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: var(--s2); padding: 4px 6px; background: var(--panel); border-radius: var(--r1); font-size: 11.5px; }
.vorschau-zeile b { color: var(--accent); font-size: 11px; }
.vorschau-zeile em { color: var(--muted); font-style: normal; font-size: 10.5px; }

/* ---------- Korrektur ---------- */

.korrektur-liste { display: grid; gap: var(--s1); }
.korrektur-kopf, .korrektur-zeile { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(120px, 1fr) auto minmax(110px, auto) auto; align-items: center; gap: var(--s3); }
.korrektur-kopf { padding: 0 var(--s3) var(--s1); color: var(--muted); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.korrektur-zeile { padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); font-size: 11.5px; color: var(--muted); }
.korrektur-zeile:hover { border-color: var(--line-strong); }
.korrektur-zeile strong { color: var(--ink); font-size: 12.5px; }
.korrektur-zeile p { margin: 1px 0 0; font-size: 10.5px; }
.punktestand { display: grid; justify-items: end; gap: 1px; padding: var(--s2) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow); }
.punktestand span { color: var(--muted); font-size: 10.5px; }
.punktestand strong { font-size: 20px; letter-spacing: -.5px; }
.punktestand em { font-style: normal; font-size: 11.5px; font-weight: 650; }
.punktestand .gut { color: var(--green); }
.punktestand .schwach { color: var(--red); }

.korrektur-aufgaben { display: grid; gap: var(--s2); }
.korrektur-aufgabe { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r2); overflow: hidden; }
.korrektur-aufgabe.offen { border-left-color: var(--amber); }
.korrektur-aufgabe.bewertet { border-left-color: var(--green); }
.korrektur-aufgabe.richtig { border-left-color: var(--green); }
.korrektur-aufgabe.falsch { border-left-color: var(--red); }
.ka-kopf { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--s3); padding: var(--s3); background: var(--surface); }
.ka-kopf strong { font-size: 12.5px; }
.ka-punkte { padding: 3px 10px; color: var(--accent-dark); background: var(--accent-soft); border-radius: var(--rr); font-size: 11.5px; font-weight: 700; }
.ka-punkte.fest { color: var(--muted); background: var(--panel); font-weight: 600; }
.ka-inhalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); padding: var(--s3); }
.ka-spalte span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.ka-text { margin: 0; padding: var(--s2) var(--s3); background: var(--surface); border-radius: var(--r2); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; }
.ka-text.antwort { background: var(--panel); border: 1px solid var(--line-strong); }
.ka-text.loesung { color: var(--ink); background: var(--green-soft); border: 1px solid var(--green-line); }
.ka-bewertung { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); padding: var(--s3); border-top: 1px solid var(--line); background: var(--panel); }
.ka-bewertung label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.punkte-feld { width: 74px; padding: 7px 9px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r2); font-size: 13px; font-weight: 700; text-align: center; }
.punkte-feld:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.bemerkung-feld { padding: 7px 10px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r2); font-size: 12px; }
.bemerkung-feld:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.lauf-anhaenge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); margin-bottom: var(--s4); }
.lauf-anhaenge > span { color: var(--muted); font-size: 11px; font-weight: 650; }
.abgabe-bereich { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s3); }

@media (max-width: 980px) {
  .editor-raster { grid-template-columns: 1fr; }
  .editor-seite { position: static; }
  .korrektur-kopf { display: none; }
  .korrektur-zeile { grid-template-columns: 1fr auto; row-gap: 6px; }
  .ka-bewertung { grid-template-columns: 1fr; }
}

/* ---------- Prüfungslauf mit Aufgabenleiste links ---------- */

.pruefung-lauf.mit-leiste {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-areas: "kopf kopf" "leiste karte" "leiste fuss";
  gap: var(--s3);
  align-items: start;
}
.pruefung-lauf.mit-leiste .lauf-kopf { grid-area: kopf; }
.pruefung-lauf.mit-leiste .aufgaben-leiste { grid-area: leiste; }
.pruefung-lauf.mit-leiste .aufgabe-karte { grid-area: karte; }
.pruefung-lauf.mit-leiste .lauf-fuss { grid-area: fuss; }

.aufgaben-leiste {
  position: sticky; top: 84px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 110px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow);
  overflow: hidden;
}
.leiste-kopf { display: flex; align-items: center; justify-content: space-between; padding: var(--s3); border-bottom: 1px solid var(--line); }
.leiste-kopf > span:first-child { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.leiste-stand { padding: 2px 8px; color: var(--accent-dark); background: var(--accent-soft); border-radius: var(--rr); font-size: 11px; font-weight: 700; }

.leiste-liste { display: flex; flex-direction: column; gap: 2px; padding: var(--s2); overflow-y: auto; flex: 1; }
.leiste-eintrag {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--s2);
  padding: 7px 9px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r2);
  font-size: 12px; color: var(--ink-soft); transition: background .12s ease, border-color .12s ease;
}
.leiste-eintrag:hover { background: var(--surface); border-color: var(--line); }

/* Grün, sobald etwas eingetragen ist — rot, solange die Aufgabe offen ist. */
.leiste-nummer { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r1); font-size: 11px; font-weight: 700; }
.leiste-eintrag.fertig .leiste-nummer { color: #fff; background: var(--green); }
.leiste-eintrag.leer .leiste-nummer { color: #fff; background: var(--red); }
.leiste-eintrag.fertig { background: var(--green-soft); }
.leiste-eintrag.leer { background: var(--red-soft); }
.leiste-eintrag.fertig:hover { border-color: var(--green-line); }
.leiste-eintrag.leer:hover { border-color: var(--red-line); }
.leiste-eintrag.aktiv { border-color: var(--accent); box-shadow: var(--ring); background: var(--accent-soft); }
.leiste-eintrag.aktiv .leiste-titel { color: var(--accent-dark); font-weight: 650; }
.leiste-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste-punkte { color: var(--muted); font-size: 10.5px; font-weight: 650; }

.leiste-fuss { display: flex; flex-wrap: wrap; gap: var(--s3); padding: var(--s2) var(--s3); border-top: 1px solid var(--line); background: var(--surface); }
.legende-eintrag { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10.5px; }
.punkt { width: 9px; height: 9px; border-radius: var(--rr); }
.punkt.gruen { background: var(--green); }
.punkt.rot { background: var(--red); }

/* ---------- Ausgangslage lesbar setzen ---------- */

.ausgangslage {
  margin: 0 auto var(--s5); padding: var(--s4) var(--s5);
  max-width: 820px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r2);
}
.ausgangslage-marke { display: block; margin-bottom: var(--s2); color: var(--accent-dark); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ausgangslage p { margin: 0 0 var(--s3); color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; }
.ausgangslage p:last-child { margin-bottom: 0; }
.ausgangslage ul { margin: 0 0 var(--s3); padding-left: 20px; display: grid; gap: 5px; }
.ausgangslage li { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.ausgangslage ul:last-child { margin-bottom: 0; }

.aufgabe-karte { text-align: left; }
.aufgabe-karte h2 { max-width: 820px; margin-left: auto; margin-right: auto; }
.aufgabe-karte .response-form, .aufgabe-karte .choice-list, .aufgabe-karte .zuordnung, .aufgabe-karte .reihenfolge { margin-left: auto; margin-right: auto; }

@media (max-width: 1000px) {
  .pruefung-lauf.mit-leiste { grid-template-columns: 1fr; grid-template-areas: "kopf" "leiste" "karte" "fuss"; }
  .aufgaben-leiste { position: static; max-height: none; }
  .leiste-liste { flex-direction: row; flex-wrap: wrap; }
  .leiste-eintrag { grid-template-columns: 24px auto; }
  .leiste-titel { display: none; }
}

/* ---------- Klappbare Navigation und volle Arbeitsfläche ---------- */

.brand-reihe { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.klapp-knopf {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: var(--r1);
  transition: background .13s ease, color .13s ease, transform .2s ease;
}
.klapp-knopf:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.klapp-knopf svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

.sidebar { transition: padding .18s ease; }

/* Eingeklappt: nur die Sinnbilder, der Inhalt bekommt den Platz. */
body.nav-zu { --navbreite: 58px; }
body.nav-zu .sidebar { padding: 16px 8px; align-items: center; }
body.nav-zu .brand span:not(.brand-mark),
body.nav-zu .nav button span,
body.nav-zu .mini-progress,
body.nav-zu .user-row .user-name { display: none; }
body.nav-zu .brand-reihe { flex-direction: column; gap: var(--s2); }
body.nav-zu .brand { padding: 0; }
body.nav-zu .nav button { justify-content: center; padding: 9px; }
body.nav-zu .klapp-knopf { transform: rotate(180deg); }
body.nav-zu .user-row { justify-content: center; }

/* Die Arbeitsfläche wird ausgenutzt statt auf eine schmale Mitte begrenzt. */
.page { max-width: 1680px; }
.main { padding: 20px clamp(14px, 2vw, 28px) 32px; }
.study-wrap { max-width: 1180px; }
.aufgabe-karte h2 { max-width: none; }
.aufgabe-karte .response-form { width: 100%; max-width: none; }
.aufgabe-karte .choice-list { width: 100%; max-width: none; }
.aufgabe-karte .zuordnung { max-width: none; }
.aufgabe-karte .reihenfolge { max-width: none; }
.ausgangslage { max-width: none; }
.grades { width: 100%; max-width: none; }

/* Auf sehr breiten Schirmen zwei Spalten: Ausgangslage neben der Aufgabe. */
@media (min-width: 1500px) {
  .aufgabe-karte.mit-lage { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.1fr); gap: var(--s5); align-items: start; }
  .aufgabe-karte.mit-lage .ausgangslage { grid-row: span 3; margin-bottom: 0; align-self: stretch; }
}

/* Aufgabenstellung als Fliesstext, nicht als Überschrift. */
.aufgabe-frage { max-width: none; margin: 0 0 var(--s5); text-align: left; }
.aufgabe-frage p { margin: 0 0 var(--s3); font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--ink); letter-spacing: 0; }
.aufgabe-frage p:first-child { font-size: 17px; font-weight: 600; color: var(--ink); }
.aufgabe-frage p:last-child { margin-bottom: 0; }
.aufgabe-frage ul { margin: 0 0 var(--s3); padding-left: 22px; display: grid; gap: 5px; }
.aufgabe-frage li { font-size: 15px; line-height: 1.6; }

/* ---------- Korrektur: aufklappbare Aufgaben ---------- */

details.korrektur-aufgabe { border-radius: var(--r2); }
details.korrektur-aufgabe > summary {
  display: grid; grid-template-columns: 24px 1fr auto auto 16px; align-items: center; gap: var(--s3);
  padding: var(--s3); background: var(--surface); cursor: pointer; list-style: none;
  transition: background .13s ease;
}
details.korrektur-aufgabe > summary::-webkit-details-marker { display: none; }
details.korrektur-aufgabe > summary:hover { background: var(--surface-deep); }
.ka-pfeil { color: var(--muted); font-size: 11px; transition: transform .16s ease; }
details.korrektur-aufgabe[open] > summary .ka-pfeil { transform: rotate(180deg); }
.ka-art { padding: 2px 8px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: var(--rr); font-size: 10.5px; white-space: nowrap; }
.ka-punkte.von-hand { color: #fff; background: var(--accent); }
.ka-koerper { border-top: 1px solid var(--line); }
.ka-fuss { margin: 0; padding: 0 var(--s3) var(--s3); color: var(--muted); font-size: 11px; }

/* Der Inhalt bleibt in der Höhe begrenzt, damit die Liste überschaubar bleibt. */
.ka-text { max-height: 320px; overflow-y: auto; }
.ka-text p { margin: 0 0 var(--s2); font-size: 12.5px; line-height: 1.6; }
.ka-text p:last-child { margin-bottom: 0; }
.ka-text ul { margin: 0 0 var(--s2); padding-left: 18px; }
.ka-text li { font-size: 12.5px; line-height: 1.55; }

/* Antworten der Auswahlarten in der Korrektur */
.ka-liste { display: grid; gap: 3px; max-height: 320px; overflow-y: auto; }
.ka-liste.nummeriert { margin: 0; padding-left: 20px; }
.ka-liste.nummeriert li { padding: 3px 6px; border-radius: var(--r1); font-size: 12px; }
.ka-liste.nummeriert li.ok { background: var(--green-soft); }
.ka-liste.nummeriert li.weg { background: var(--red-soft); }
.ka-zeile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s2); padding: 5px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r1); font-size: 12px; }
.ka-zeile b { color: var(--muted); font-size: 11px; }
.ka-zeile i { font-style: normal; font-weight: 700; }
.ka-zeile.ok { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.ka-zeile.weg { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.ka-zeile.fehlt { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }
.ka-zeile i.richtig { padding: 1px 6px; color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); border-radius: var(--rr); font-size: 10.5px; font-weight: 650; }
.ka-bewertung { grid-template-columns: auto 1fr auto auto; }

@media (max-width: 900px) {
  details.korrektur-aufgabe > summary { grid-template-columns: 24px 1fr auto; row-gap: 5px; }
  .ka-art, .ka-pfeil { display: none; }
  .ka-bewertung { grid-template-columns: 1fr; }
}

/* Musterlösung im Antwortbereich hervorheben */
.musterloesung { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px dashed var(--line-strong); }
.musterloesung label { color: var(--accent-dark); }
.musterloesung textarea { background: var(--accent-soft); border-color: var(--accent-line); }
.musterloesung textarea:focus { background: var(--panel); }

/* Rückmeldung, wenn eine Datei nicht eingelesen werden kann */
.merkzettel.warnend { border-left-color: var(--red); background: var(--red-soft); }
.merkzettel.warnend strong { color: var(--red); }

/* ---------- Kartenliste nach Fach und Thema ---------- */

.fach-gruppe { margin-bottom: var(--s2); background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--color, var(--accent)); border-radius: var(--r3); box-shadow: var(--shadow); overflow: hidden; }
.gruppen-kopf { display: grid; grid-template-columns: 22px 10px 1fr auto auto 16px; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); cursor: pointer; list-style: none; }
.gruppen-kopf::-webkit-details-marker { display: none; }
.gruppen-kopf:hover { background: var(--surface); }
.gruppen-kopf .plan-dot { width: 10px; height: 10px; background: var(--color, var(--accent)); }
.gruppen-kopf strong { display: block; font-size: 14px; }
.gruppen-kopf span:not(.pill):not(.ka-pfeil) { color: var(--muted); font-size: 11.5px; }
.gruppen-inhalt { padding: 0 var(--s3) var(--s3); }

.thema-gruppe-liste { margin-top: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
/* Karten lassen sich in ein anderes Thema ziehen. */
.karten-tabelle tr[draggable="true"] { cursor: grab; }
.zieh-griff { margin-right: 6px; color: var(--muted-soft); letter-spacing: -2px; cursor: grab; user-select: none; }
.karten-tabelle tr.wird-gezogen { opacity: 0.4; }
.thema-gruppe-liste.ablage-bereit { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }

.thema-kopf { display: grid; grid-template-columns: 22px minmax(120px, 1fr) auto auto 16px; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); cursor: pointer; list-style: none; }
.thema-kopf::-webkit-details-marker { display: none; }
.thema-kopf:hover { background: var(--surface-deep); }
.thema-kopf strong { font-size: 12.5px; }
.thema-zahlen { color: var(--muted); font-size: 11px; white-space: nowrap; }
.thema-knoepfe { display: flex; gap: 4px; }
.thema-knoepfe .secondary { min-height: 26px; padding: 3px 9px; font-size: 11px; }
details.thema-gruppe-liste[open] > .thema-kopf .ka-pfeil,
details.fach-gruppe[open] > .gruppen-kopf .ka-pfeil { transform: rotate(180deg); }

.karten-tabelle { width: 100%; border-collapse: collapse; background: var(--panel); }
.karten-tabelle th { padding: var(--s2) var(--s3); color: var(--muted); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; text-align: left; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.karten-tabelle td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; }
.karten-tabelle tr:last-child td { border-bottom: 0; }
.karten-tabelle tr:hover td { background: var(--surface); }
.spalte-frage strong { display: block; font-weight: 550; }
.spalte-frage .tag { margin-top: 3px; }
.spalte-zahl { font-variant-numeric: tabular-nums; }
.spalte-knoepfe { text-align: right; white-space: nowrap; }
.spalte-knoepfe .icon-button { padding: 4px 6px; font-size: 13px; }
.art-marke { padding: 2px 8px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rr); font-size: 10.5px; white-space: nowrap; }

@media (max-width: 820px) {
  .thema-kopf { grid-template-columns: 1fr auto; row-gap: 5px; }
  .thema-zahlen { grid-column: 1 / -1; }
  .karten-tabelle thead { display: none; }
  .karten-tabelle td { display: block; border-bottom: 0; padding: 3px var(--s3); }
  .karten-tabelle tr { display: block; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Bilder an Karten und Aufgaben ---------- */

.bild-feld { margin-top: 2px; }
.bild-waehlen {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s4); color: var(--accent); background: var(--accent-soft);
  border: 1px dashed var(--accent-line); border-radius: var(--r2);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .13s ease;
}
.bild-waehlen:hover { background: #dbeafe; }
.bild-waehlen svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.bild-vorschau { margin: 0; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--surface); }
.bild-vorschau img { display: block; width: 100%; max-height: 260px; object-fit: contain; background: var(--panel); }
.bild-vorschau figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 6px var(--s2); color: var(--muted); font-size: 11px; border-top: 1px solid var(--line);
}
.bild-vorschau .wartet { color: var(--amber); font-style: italic; }

/* Bild bei der Frage — im Lernmodus und in der Prüfung */
.frage-bild { margin: 0 auto var(--s4); max-width: 760px; }
.frage-bild img {
  display: block; width: 100%; height: auto; max-height: 46vh; object-fit: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2);
}
.aufgabe-bilder { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.aufgabe-bilder .frage-bild { max-width: none; margin-bottom: 0; }

/* Kleine Vorschau im Prüfungs-Editor */
.karte-bilder { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 0 34px; }
.mini-bild { position: relative; margin: 0; width: 108px; }
.mini-bild img { display: block; width: 100%; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); }
.mini-bild .icon-button { position: absolute; top: 2px; right: 2px; padding: 2px; background: rgba(255, 255, 255, .9); border-radius: var(--r1); }
.mini-bild .icon-button:hover { background: var(--red-soft); color: var(--red); }

@media (max-width: 700px) {
  .frage-bild img { max-height: 34vh; }
}

/* ---------- Aufgaben-Baukasten ---------- */

.baukasten { display: grid; gap: var(--s3); padding: var(--s4) var(--s5); }
.baukasten-filter { display: grid; grid-template-columns: 1fr 170px; gap: var(--s2); }
.bk-suche { padding: 8px 12px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r2); font-size: 12.5px; }
.bk-suche:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.baukasten-faecher { display: flex; flex-wrap: wrap; gap: 5px; }
.fach-marke {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--rr); font-size: 12px; transition: all .13s ease;
}
.fach-marke em { font-style: normal; color: var(--muted); font-size: 10.5px; }
.fach-marke:hover { border-color: var(--accent); color: var(--accent-dark); }
.fach-marke.aktiv { color: #fff; background: var(--accent); border-color: var(--accent); }
.fach-marke.aktiv em { color: rgba(255, 255, 255, .8); }

.baukasten-liste { display: grid; gap: var(--s3); max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.bk-gruppe { display: grid; gap: 3px; }
.bk-gruppe-kopf { display: flex; align-items: baseline; gap: var(--s2); padding: 0 2px 4px; border-bottom: 1px solid var(--line); }
.bk-gruppe-kopf strong { font-size: 12.5px; }
.bk-gruppe-kopf span { flex: 1; color: var(--muted); font-size: 11px; }

.bk-zeile {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: start; gap: var(--s3);
  padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r2); cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.bk-zeile:hover { border-color: var(--line-strong); background: var(--surface); }
.bk-zeile.gewaehlt { background: var(--accent-soft); border-color: var(--accent-line); }
.bk-zeile .bk-haken { position: absolute; opacity: 0; width: 0; height: 0; }
.bk-zeile .marke-bild { margin-top: 1px; }
.bk-zeile .bk-haken:checked + .marke-bild { background: var(--accent); border-color: var(--accent); }
.bk-zeile .bk-haken:checked + .marke-bild::after { content: ""; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px); }
.bk-inhalt { display: grid; gap: 2px; min-width: 0; }
.bk-inhalt strong { font-size: 12.5px; }
.bk-frage { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.bk-merkmale { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.bk-merkmale em { font-style: normal; padding: 1px 7px; color: var(--muted); background: var(--surface); border-radius: var(--rr); font-size: 10px; }
.bk-merkmale .art-marke { color: var(--accent-dark); background: var(--accent-soft); }
.bk-herkunft { color: var(--muted-soft) !important; background: transparent !important; padding-left: 0 !important; }
.bk-stand { flex: 1; color: var(--muted); font-size: 11.5px; }

@media (max-width: 700px) {
  .baukasten-filter { grid-template-columns: 1fr; }
  .baukasten-liste { max-height: 40vh; }
}

/* ---------- Texteditor mit Auszeichnungen ---------- */

.rtf { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r2); overflow: hidden; transition: border-color .14s ease, box-shadow .14s ease; }
.rtf:focus-within { border-color: var(--accent); box-shadow: var(--ring); }

.rtf-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: 4px 6px; background: var(--surface); border-bottom: 1px solid var(--line); }
.rtf-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 28px; height: 28px; padding: 0 5px; color: var(--ink-soft);
  background: transparent; border: 1px solid transparent; border-radius: var(--r1);
  transition: background .12s ease, color .12s ease;
}
.rtf-knopf:hover { color: var(--accent-dark); background: var(--accent-soft); }
.rtf-knopf.aktiv { color: var(--accent-dark); background: var(--accent-soft); border-color: var(--accent-line); }
.rtf-knopf svg { width: 17px; height: 17px; }
.rtf-pfeil { font-size: 8px; font-style: normal; color: var(--muted); }
.rtf-trenner { width: 1px; height: 18px; margin: 0 4px; background: var(--line-strong); }

.rtf-farbe { position: relative; display: inline-flex; }
.rtf-palette {
  position: absolute; top: 32px; left: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 24px); gap: 4px; padding: 7px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r2); box-shadow: var(--shadow-lift);
}
/* Ohne diese Zeile bliebe die Farbtafel immer offen: das display der Klasse
   oben sticht das hidden-Attribut aus, mit dem sie zugeklappt wird. */
/* Steht an einer eigenen Regel „display“, ist sie stärker als das „hidden“
   des Browsers — das Element bliebe im Fluss und schöbe alles auseinander.
   Genau das schnitt die Kacheln in der Notizspalte ab. Diese Regel gilt für
   alles und muss deshalb Vorrang haben. */
[hidden] { display: none !important; }
.rtf-tupfer { width: 24px; height: 24px; background: var(--tupfer); border: 1px solid var(--line-strong); border-radius: var(--r1); cursor: pointer; }
.rtf-tupfer:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.rtf-tupfer.ohne { position: relative; background: var(--panel); }
.rtf-tupfer.ohne::after { content: ""; position: absolute; inset: 3px; background: linear-gradient(to bottom right, transparent 44%, var(--red) 44%, var(--red) 56%, transparent 56%); }

.rtf-flaeche { padding: 10px 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink); outline: none; overflow-y: auto; max-height: 340px; }
.rtf-flaeche:empty::before { content: attr(data-platzhalter); color: var(--muted-soft); pointer-events: none; }
.rtf-flaeche p { margin: 0 0 8px; }
.rtf-flaeche p:last-child { margin-bottom: 0; }
.rtf-flaeche ul, .rtf-flaeche ol { margin: 0 0 8px; padding-left: 22px; }
.rtf-flaeche li { margin-bottom: 3px; }
.rtf-flaeche blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.rtf.klein .rtf-flaeche { font-size: 12.5px; }
.rtf.klein .rtf-knopf { min-width: 26px; height: 26px; }

/* Ausgabe von formatiertem Text */
.rtf-anzeige { line-height: 1.65; }
.rtf-anzeige p { margin: 0 0 10px; }
.rtf-anzeige p:last-child { margin-bottom: 0; }
.rtf-anzeige ul, .rtf-anzeige ol { margin: 0 0 10px; padding-left: 24px; display: grid; gap: 4px; }
.rtf-anzeige blockquote { margin: 0 0 10px; padding: 4px 0 4px 14px; border-left: 3px solid var(--accent-line); color: var(--ink-soft); }
.rtf-anzeige code { padding: 1px 5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r1); font-size: .92em; }
.rtf-anzeige u { text-underline-offset: 2px; }

/* Kartenfrage im Lernmodus */
.karten-frage { max-width: 820px; margin: 20px auto 26px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 650; line-height: 1.3; letter-spacing: -.5px; text-align: center; }
.karten-frage p { margin: 0 0 10px; }
.karten-frage ul, .karten-frage ol { text-align: left; font-size: 17px; font-weight: 400; max-width: 620px; margin: 12px auto; }

.aufgabe-frage.rtf-anzeige { font-size: 15px; }
.aufgabe-frage.rtf-anzeige p:first-child { font-size: 17px; font-weight: 600; }
.ausgangslage .rtf-anzeige { color: var(--ink-soft); font-size: 13.5px; }

@media (max-width: 700px) {
  .rtf-leiste { gap: 0; }
  .rtf-knopf { min-width: 26px; padding: 0 3px; }
  .rtf-trenner { margin: 0 2px; }
}

/* --- Einstellungen, Konten und Rollen -----------------------------------

   Unten in der Menüleiste sitzt das Zahnrad, darunter die Zeile mit dem
   eigenen Konto. Beide führen an dieselbe Stelle.
---------------------------------------------------------------------- */

.nav-unten { padding-top: var(--s3); border-top: 1px solid var(--line); }

.user-row { display: flex; align-items: center; gap: var(--s1); padding: 0; }
.user-row .user-name { border-radius: var(--r2); display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0; max-width: none; padding: 6px 7px; border: 0; background: transparent;
  text-align: left; transition: background .13s ease; }
.user-row .user-name:hover { background: var(--surface); color: inherit; }
.user-zeichen { border-radius: var(--rr); display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; background: var(--accent-soft); color: var(--accent-dark);
  font-size: 12px; font-weight: 700; }
.user-text { display: grid; min-width: 0; line-height: 1.25; }
.user-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--ink); }
.user-text em { font-style: normal; font-size: 10.5px; color: var(--muted); }

/* Abmelden: ein eigener runder Knopf statt eines nackten Zeichens. */
.user-row .abmelden { border-radius: var(--r2); display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--muted);
  transition: background .13s ease, color .13s ease; }
.user-row .abmelden:hover { background: var(--red-soft); color: var(--red); }
.user-row .abmelden svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* --- Die Seite selbst --- */

.einstell-raster { display: grid; gap: var(--s4); align-content: start; }
.einstell-raster .panel { padding: var(--s5); }

.panel-kopf { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4); }
.panel-kopf h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; }
.panel-kopf .hinweis { margin: 0; max-width: 62ch; }
.kopf-zeichen { display: grid; place-items: center; }
.kopf-zeichen svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.7; }

.konto-kopf { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.konto-kopf h2 { margin: 0 0 5px; font-size: 17px; }
.konto-zeichen { border-radius: var(--rr); display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; background: var(--accent-soft); color: var(--accent-dark);
  font-size: 19px; font-weight: 700; }
.konto-zeichen.klein { width: 28px; height: 28px; font-size: 12px; }

.rollen-marke { border-radius: var(--rr); display: inline-block; padding: 2px 9px;
  font-size: 11px; font-weight: 650; letter-spacing: .02em;
  background: var(--surface-deep); color: var(--ink-soft); border: 1px solid var(--line); }
.rollen-marke.admin { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-line); }

.konto-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s3); margin: 0 0 var(--s4); padding: var(--s4); border-radius: var(--r3);
  background: var(--surface); border: 1px solid var(--line); }
.konto-werte dt { margin-bottom: 3px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 650; color: var(--muted); }
.konto-werte dd { margin: 0; font-size: 13px; font-weight: 550; color: var(--ink); }

.konto-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); }
.konto-knoepfe .secondary { display: inline-flex; align-items: center; gap: 7px; }
.konto-knoepfe svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.konto-fuss { margin: var(--s3) 0 0; font-size: 12px; color: var(--muted); }

/* --- Kontenliste --- */

.tabelle-rand { border-radius: var(--r3); overflow-x: auto; border: 1px solid var(--line); }
.konten-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.konten-tabelle th { padding: 9px var(--s3); background: var(--surface);
  border-bottom: 1px solid var(--line); text-align: left; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 650; color: var(--muted); white-space: nowrap; }
.konten-tabelle td { padding: 10px var(--s3); border-top: 1px solid var(--line); vertical-align: middle; }
.konten-tabelle tbody tr:hover { background: var(--surface); }
.konten-tabelle .zahlen { color: var(--muted); font-size: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.konto-name { display: flex; align-items: center; gap: 9px; }
.konto-name strong { display: block; font-size: 13px; font-weight: 600; }
.konto-name em { font-style: normal; font-size: 11px; color: var(--muted); }
.konto-name em.warnen { color: var(--amber); }
.konto-tun { display: flex; justify-content: flex-end; gap: 2px; }
.konto-tun .icon-button:hover { background: var(--surface-deep); }
.konto-tun .icon-button.loeschen:hover { background: var(--red-soft); color: var(--red); }

/* --- Protokoll --- */

.ereignis-liste { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ereignis-liste li { display: grid; grid-template-columns: 132px 1fr auto; gap: var(--s3);
  align-items: baseline; padding: 7px var(--s2); border-radius: var(--r1); font-size: 12.5px; }
.ereignis-liste li:hover { background: var(--surface); }
.ereignis-zeit { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ereignis-text { color: var(--ink-soft); }
.ereignis-text strong { font-weight: 600; color: var(--ink); }
.ereignis-text em { font-style: normal; color: var(--muted); }
.ereignis-ort { color: var(--muted-soft); font-size: 11px; white-space: nowrap; }
.ereignis-liste li.konto-geloescht .ereignis-text strong { color: var(--red); }

.merkzettel-karte h2 { margin: 0 0 6px; font-size: 15px; }
.merkzettel-karte p { margin: 0; color: var(--muted); font-size: 13px; max-width: 62ch; }

/* --- Kleinteile in den Dialogen --- */

.regel-liste { display: grid; gap: 2px; margin: 7px 0 0; padding-left: 17px;
  color: var(--muted); font-size: 11.5px; }
.mit-knopf { display: flex; gap: var(--s2); }
.mit-knopf input { flex: 1; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 12.5px; letter-spacing: .01em; }
.mit-knopf .secondary { flex-shrink: 0; white-space: nowrap; }
.primary.warnend { background: var(--red); border-color: var(--red); }
.primary.warnend:hover { background: #b91c1c; border-color: #b91c1c; }

@media (max-width: 720px) {
  .ereignis-liste li { grid-template-columns: 1fr; gap: 2px; }
  .ereignis-ort { display: none; }
}

/* Zusammengeklappte Leiste: Das Kürzel des Kontos bleibt stehen, damit der
   Weg zu den Einstellungen nicht verschwindet. Nebeneinander wäre zu eng,
   also stehen Kürzel und Abmelden übereinander. */
body.nav-zu .user-row { flex-direction: column; gap: var(--s1); }
body.nav-zu .user-row .user-name { display: grid; place-items: center; flex: 0; padding: 3px; }
body.nav-zu .user-text { display: none; }

/* Auf schmalen Fenstern verbirgt die Regel weiter oben den ganzen unteren
   Bereich der Leiste. Der Fortschrittskasten hat dort tatsächlich keinen
   Platz — das Zahnrad und das Abmelden müssen aber erreichbar bleiben. */
@media (max-width: 980px) {
  .sidebar-bottom { display: grid; gap: var(--s2); }
  .sidebar-bottom .mini-progress, .sidebar-bottom .user-text { display: none; }
  .nav-unten { width: 100%; }
  .user-row { flex-direction: column; gap: var(--s1); }
  .user-row .user-name { display: grid; place-items: center; flex: 0; padding: 3px; }
}

/* Auf dem Handy wird die Leiste zur Kopfzeile: Zahnrad und Abmelden rücken
   ans rechte Ende, nebeneinander. */
@media (max-width: 640px) {
  .sidebar-bottom { grid-auto-flow: column; align-items: center; margin: 0 0 0 auto; }
  .nav-unten { width: auto; padding-top: 0; border-top: 0; border-left: 1px solid var(--line); padding-left: var(--s2); }
  .user-row { flex-direction: row; }
}

/* Die Leiste bleibt stehen, während der Inhalt scrollt. Sonst wandert das
   Zahnrad unten aus dem Bild, sobald eine Seite länger wird als das Fenster.
   Auf dem Handy ist die Leiste bereits eine klebende Kopfzeile. */
@media (min-width: 641px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

/* Auf dem Handy trägt die Kopfzeile neun Menüpunkte. Damit das Zahnrad und
   das Abmelden am rechten Rand stehen bleiben, scrollt allein die
   Menüreihe seitwärts — die Bildlaufleiste selbst bleibt unsichtbar. */
@media (max-width: 640px) {
  .sidebar { gap: var(--s2); }
  .nav:not(.nav-unten) { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .nav:not(.nav-unten)::-webkit-scrollbar { display: none; }
  .sidebar-bottom { flex-shrink: 0; }
}

/* --- Passwortfeld mit Auge ------------------------------------------- */

.passwortfeld { position: relative; display: grid; }
.passwortfeld input { padding-right: 40px; }
/* Edge blendet ein eigenes Auge ein — zwei nebeneinander verwirren nur. */
.passwortfeld input::-ms-reveal, .passwortfeld input::-ms-clear { display: none; }

.augenknopf { position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  border-radius: var(--r1); display: grid; place-items: center; width: 28px; height: 28px;
  padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .13s ease, color .13s ease; }
.augenknopf:hover { background: var(--surface-deep); color: var(--ink-soft); }
.augenknopf svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.mit-knopf > .passwortfeld { flex: 1; min-width: 0; }

/* ---------- Vorschau einer Aufgabe ---------- */

/* Klappt unter der Zeile auf, in der sie steht — in der Prüfung, im Baukasten
   und im PDF-Import dieselbe Darstellung. */
.vorschau-halter { display: block; }
.vorschau-knopf.aktiv { color: var(--accent); background: var(--accent-soft); }
/* Die volle Pupille unterscheidet dieses Auge vom Auge am Passwortfeld. */
.vorschau-knopf svg circle { fill: currentColor; }
.bk-zeile .vorschau-knopf { margin-top: 1px; }
.loesungs-reihe { display: flex; align-items: center; gap: 2px; }
.loesungs-reihe .loesungs-zeile { flex: 1; min-width: 0; }

.aufgaben-vorschau { display: grid; gap: var(--s2); margin: var(--s2) 0 var(--s3);
  padding: var(--s3); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r2); font-size: 12.5px; }
.aufgaben-vorschau .empty { padding: var(--s3); }
.vs-kopf { display: grid; gap: 1px; }
.vs-kopf strong { font-size: 13px; }
.vs-kopf > span { color: var(--muted); font-size: 11px; }
.vs-teil { display: grid; gap: 5px; padding: var(--s2) var(--s3); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r2); }
.vs-marke { color: var(--muted); font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .05em; }
.vs-teil .rtf-anzeige { font-size: 12.5px; line-height: 1.55; }
.vs-loesung { background: var(--green-soft); border-color: var(--green-line); }
.vs-loesung .vs-marke { color: var(--green); }

.vs-wahl { display: grid; gap: 3px; }
.vs-option { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: var(--s2);
  padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--r1); }
.vs-option b { color: var(--muted); font-size: 11px; }
.vs-option.richtig { background: var(--green-soft); border-color: var(--green-line); }
.vs-option.richtig b { color: var(--green); }
.vs-option i { display: grid; place-items: center; color: var(--green); }
.vs-option i svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.vs-abfolge { display: grid; gap: 3px; margin: 0; padding-left: 20px; }
.vs-paare { display: grid; gap: 3px; }
.vs-paar { display: grid; grid-template-columns: 1fr 16px 1fr; align-items: center; gap: var(--s2);
  padding: 5px 7px; background: var(--surface); border-radius: var(--r1); }
.vs-paar i { color: var(--muted); font-style: normal; text-align: center; }
.vs-felder { display: grid; gap: 4px; }
.vs-feld { display: grid; gap: 2px; padding: 5px 7px; background: var(--surface); border-radius: var(--r1); }
.vs-feld strong { font-size: 11.5px; }

.vs-bilder, .vs-anhaenge { display: flex; flex-wrap: wrap; gap: var(--s2); }
.vs-bilder img { max-width: 220px; max-height: 160px; border: 1px solid var(--line); border-radius: var(--r1); }

/* ---------- Einladungen ---------- */

.einladungs-liste .konto-name em { display: block; color: var(--muted); font-size: 11px; }
.einladungs-liste .zahlen em { font-style: normal; }
.einladungs-liste .zahlen em.gruen { color: var(--green); }
.einladungs-liste .zahlen em.warnen { color: var(--amber); }

/* ---------- Server: Auslastung, Speicher, Anmeldeversuche ---------- */

.mess-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.mess-karte { display: grid; gap: 8px; align-content: start; padding: var(--s4); }
.mess-titel { margin: 0; color: var(--muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.mess-zahl { font-size: 25px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mess-fuss { margin: 0; color: var(--muted); font-size: 11.5px; }

.mess-balken { height: 6px; border-radius: 999px; background: var(--surface-deep); overflow: hidden; }
.mess-balken span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.mess-balken.knapp span { background: var(--amber); }
.mess-balken.voll span { background: var(--red); }
.konten-tabelle .mess-balken { margin-top: 5px; max-width: 130px; }

.blass { color: var(--muted-soft); font-style: normal; font-size: 11px; }
.versuche-tabelle td { font-size: 12px; }
.versuche-tabelle em { font-style: normal; }
.versuche-tabelle em.gruen { color: var(--green); }
.versuche-tabelle em.warnen { color: var(--amber); }
.versuche-tabelle tr.misslungen td:first-child { box-shadow: inset 2px 0 0 var(--amber-line); }
.server-verweis .panel-kopf { margin-bottom: 0; }
.server-verweis .kopf-zeichen svg { width: 17px; height: 17px; }
.server-verweis .secondary svg { width: 14px; height: 14px; }
#server-teil { display: grid; gap: var(--s3); }
#server-teil .mess-reihe { margin-bottom: 0; }

/* ---------- Schlagwörter an Aufgaben ---------- */

.schlagwoerter { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.schlagwort {
  display: inline-flex; align-items: center; padding: 2px 8px;
  color: var(--cyan); background: #ecfeff; border: 1px solid #a5f3fc;
  border-radius: 999px; font-size: 10.5px; font-style: normal; font-weight: 600;
}
.schlagwoerter.in-karte { margin: var(--s2) 0 0 34px; }
.baukasten-marken { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--s2); }
.baukasten-marken .hinweis { margin: 0; }
.bk-zeile.schon-drin { opacity: .62; cursor: default; }
.bk-zeile.schon-drin:hover { background: var(--panel); border-color: var(--line); }
.bk-zeile.schon-drin .marke-bild { opacity: .5; }
.bk-drin { color: var(--accent); font-style: normal; font-weight: 600; }

/* ---------- Schlagwörter: Vorschläge beim Tippen ---------- */

.wort-feld { position: relative; }
.wort-vorschlag {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% - 34px);
  display: grid; gap: 1px; max-height: 210px; overflow-y: auto; padding: 4px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r2);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.wort-vorschlag button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  width: 100%; padding: 7px 10px; text-align: left; font: inherit; font-size: 13px;
  color: var(--ink); background: none; border: 0; border-radius: var(--r1); cursor: pointer;
}
.wort-vorschlag button:hover, .wort-vorschlag button:first-child { background: var(--accent-soft); }
.wort-vorschlag button em { color: var(--muted); font-style: normal; font-size: 11px; }
.verwendung-marke {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 5px; margin-left: 6px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 999px; font-size: 10.5px; font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums; vertical-align: middle; cursor: default;
}
.bk-merkmale .verwendung-marke { margin-left: 0; }