/* Werkstatt-Layout: links die Aufgabe, in der Mitte die Werkbank (Editor + Probleme/Konsole), rechts das Browserfenster mit der Vorschau. */
:root {
  --grund: #eef1f4;
  --flaeche: #ffffff;
  --flaeche-2: #f5f7f9;
  --tinte: #16202a;
  --leise: #5a6775;
  --linie: #d6dde5;
  --akzent: #0a6e8a;
  --akzent-tinte: #ffffff;
  --akzent-weich: #e0f0f4;
  --gut: #1d7f46;
  --gut-weich: #e2f3e8;
  --warn: #9a6206;
  --warn-weich: #fbf0d9;
  --schlecht: #b8352a;
  --schlecht-weich: #fbe6e3;
  --schatten: 0 1px 2px rgba(22, 32, 42, .06), 0 4px 16px rgba(22, 32, 42, .06);

  --schrift-anzeige: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-code: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #0f1419; --flaeche: #161c23; --flaeche-2: #1c232c; --tinte: #e4e9ef; --leise: #93a1b0; --linie: #2a333e;
    --akzent: #4cc3e0; --akzent-tinte: #08222b; --akzent-weich: #123842; --gut: #57c98f; --gut-weich: #14301f;
    --warn: #e2b04a; --warn-weich: #36290f; --schlecht: #f08174; --schlecht-weich: #3a1c19;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grund: #0f1419; --flaeche: #161c23; --flaeche-2: #1c232c; --tinte: #e4e9ef; --leise: #93a1b0; --linie: #2a333e;
  --akzent: #4cc3e0; --akzent-tinte: #08222b; --akzent-weich: #123842; --gut: #57c98f; --gut-weich: #14301f;
  --warn: #e2b04a; --warn-weich: #36290f; --schlecht: #f08174; --schlecht-weich: #3a1c19;
  --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 15px;
  line-height: 1.5;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
code, kbd, pre { font-family: var(--schrift-code); font-size: .88em; }
.zahlen { font-variant-numeric: tabular-nums; }
.leise { color: var(--leise); }
.klein { font-size: .86rem; }

/* ---------- Kopfzeile ---------- */
.kopf {
  display: flex; align-items: center; gap: 14px;
  padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  min-width: 0;
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.marke-zeichen {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
  background: var(--akzent); color: var(--akzent-tinte);
  font-family: var(--schrift-code); font-weight: 500; font-size: 20px;
}
.marke-text { display: flex; flex-direction: column; line-height: 1.1; }
.marke-text strong { font-family: var(--schrift-anzeige); font-size: 1.15rem; letter-spacing: -.01em; }
.marke-text small { color: var(--leise); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.fortschritt { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--leise); font-size: .86rem; }
.fortschritt-balken { width: 140px; height: 6px; border-radius: 3px; background: var(--flaeche-2); border: 1px solid var(--linie); overflow: hidden; }
.fortschritt-balken span { display: block; height: 100%; width: 0; background: var(--gut); transition: width .4s ease; }
.kopf-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--linie); border-radius: 8px;
  padding: 6px 12px; cursor: pointer; font-size: .9rem;
}
.kopf-knopf:hover { background: var(--flaeche-2); }
.burger, .burger::before, .burger::after { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; } .burger::after { top: 5px; }

/* ---------- Arbeitsbereich ---------- */
.arbeitsbereich {
  /* Breiten lassen sich mit den Trennern ziehen (siehe app.js) */
  --b-leiste: 250px;
  --b-aufgabe: 340px;
  --b-vorschau: 32%;
  display: grid;
  grid-template-columns: var(--b-aufgabe) 7px minmax(320px, 1fr) 7px var(--b-vorschau);
  background: var(--grund);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.arbeitsbereich.angeheftet { grid-template-columns: var(--b-leiste) 7px var(--b-aufgabe) 7px minmax(320px, 1fr) 7px var(--b-vorschau); }
.trenner { position: relative; cursor: col-resize; background: var(--grund); touch-action: none; }
.trenner::before { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: var(--linie); }
.trenner::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 28px; margin-top: -14px; border-radius: 2px; background: var(--linie); opacity: 0; transition: opacity .15s; }
.trenner:hover::after, .trenner:focus-visible::after, .trenner.aktiv::after { opacity: 1; background: var(--akzent); }
.trenner:hover::before, .trenner.aktiv::before { background: var(--akzent); }
.trenner.quer { cursor: row-resize; height: 7px; }
.trenner.quer::before { top: 3px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
.trenner.quer::after { top: 2px; left: 50%; width: 28px; height: 3px; margin: 0 0 0 -14px; }
.trenner[data-trenner="leiste"] { display: none; }
.arbeitsbereich.angeheftet .trenner[data-trenner="leiste"] { display: block; }
body.zieht { cursor: col-resize; user-select: none; }
body.zieht.quer { cursor: row-resize; }
body.zieht iframe { pointer-events: none; }
.leiste-kopf { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 8px; }
.leiste-titel { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); }
.arbeitsbereich > section { background: var(--grund); min-width: 0; min-height: 0; }

/* Seitenleiste als Schublade */
.seitenleiste {
  position: absolute; z-index: 30; top: 0; bottom: 0; left: 0;
  width: min(320px, 88vw);
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  box-shadow: var(--schatten);
  overflow-y: auto;
  padding: 12px 10px 24px max(10px, env(safe-area-inset-left, 0px));
  transform: translateX(-102%);
  transition: transform .2s ease;
  visibility: hidden;
}
.seitenleiste.offen { transform: none; visibility: visible; }
.schleier { position: absolute; inset: 0; z-index: 20; background: rgba(10, 16, 22, .35); }
.kapitel + .kapitel { margin-top: 14px; }
.kapitel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 8px; }
.kapitel-kopf h2 { margin: 0; font-family: var(--schrift-anzeige); font-size: .95rem; }
.kapitel-kopf span { color: var(--leise); font-size: .8rem; }
.kapitel ol { list-style: none; margin: 0; padding: 0; }
.kapitel li a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 7px;
  color: inherit; text-decoration: none; font-size: .92rem;
}
.kapitel li a:hover { background: var(--flaeche-2); }
.kapitel li a[aria-current="page"] { background: var(--akzent-weich); font-weight: 700; }
.status { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linie); display: grid; place-items: center; font-size: 10px; line-height: 1; }
.status.begonnen { border-color: var(--akzent); background: linear-gradient(90deg, var(--akzent) 50%, transparent 50%); }
.status.erledigt { border-color: var(--gut); background: var(--gut); color: var(--flaeche); }
.status.erledigt::after { content: "✓"; font-weight: 700; }
.marke-b { margin-left: auto; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); white-space: nowrap; }
.marke-fehler + .marke-b { margin-left: 6px; }
.ab-nr { font-family: var(--schrift-code); font-size: .75rem; color: var(--akzent); margin-right: 4px; }
.marke-fehler { margin-left: auto; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--warn); }

/* ---------- Aufgabe ---------- */
.aufgabe { overflow-y: auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 18px; }
.eyebrow { margin: 0 0 4px; color: var(--leise); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.aufgabe h1 { margin: 0; font-family: var(--schrift-anzeige); font-size: 1.55rem; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
.art-schild { display: inline-block; margin: 8px 0 0; padding: 2px 8px; border-radius: 4px; background: var(--warn-weich); color: var(--warn); font-size: .78rem; font-weight: 700; }
.aufgabe-text { max-width: 65ch; }
.aufgabe-text p { margin: 0 0 .7em; }
.aufgabe-text ul, .aufgabe-text ol { margin: 0 0 .7em; padding-left: 1.2em; }
.aufgabe-text li { margin-bottom: .25em; }
.aufgabe-text code { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 4px; padding: 0 4px; }
.aufgabe-text pre { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 0 0 .8em; line-height: 1.45; }
.aufgabe-text kbd { border: 1px solid var(--linie); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--flaeche); }
table.mini { border-collapse: collapse; margin: 0 0 .8em; font-size: .9rem; }
table.mini th, table.mini td { border: 1px solid var(--linie); padding: 4px 10px; text-align: left; }
table.mini th { background: var(--flaeche-2); }
.block h2 { margin: 0 0 8px; font-family: var(--schrift-anzeige); font-size: 1.05rem; }
.block > p { margin: 0 0 8px; }

.ziele, .tipps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ziel {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px;
  padding: 8px 10px; border-radius: 8px; background: var(--flaeche); border: 1px solid var(--linie);
}
.ziel-marke { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linie); display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.ziel.ok { border-color: color-mix(in srgb, var(--gut) 45%, var(--linie)); background: var(--gut-weich); }
.ziel.ok .ziel-marke { background: var(--gut); border-color: var(--gut); color: var(--flaeche); }
.ziel.ok .ziel-marke::after { content: "✓"; }
.ziel.nein { border-color: color-mix(in srgb, var(--schlecht) 45%, var(--linie)); }
.ziel.nein .ziel-marke { border-color: var(--schlecht); color: var(--schlecht); }
.ziel.nein .ziel-marke::after { content: "✗"; }
.ziel:not(.ok):not(.nein) .ziel-marke::after { content: attr(data-nr); color: var(--leise); }
.ziel-inhalt { min-width: 0; }
.ziel-wenn { margin: 0 0 3px; font-size: .86rem; color: var(--leise); }
.ziel-wenn::before { content: "Du machst: "; font-weight: 700; }
.ziel-text { margin: 0; overflow-wrap: anywhere; font-weight: 600; line-height: 1.45; }
.ziel-wenn + .ziel-text::before { content: "Dann: "; color: var(--akzent); font-weight: 700; }
.ziel-hinweis { margin: 6px 0 0; color: var(--schlecht); font-size: .9rem; line-height: 1.45; }
code.genau {
  font-family: var(--schrift-code, monospace); font-size: .9em; font-weight: 500;
  padding: 1px 6px; border-radius: 5px; white-space: pre-wrap;
  background: var(--flaeche-2); border: 1px solid var(--linie);
}

.erfolg { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--gut-weich); border: 1px solid color-mix(in srgb, var(--gut) 45%, var(--linie)); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.erfolg p { margin: 0; }

.tipp { border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); overflow: hidden; }
.tipp-knopf { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.tipp-knopf:hover:not(:disabled) { background: var(--flaeche-2); }
.tipp-knopf:disabled { cursor: default; color: var(--leise); }
.tipp-knopf .schloss { font-size: .82rem; color: var(--leise); }
.tipp-inhalt { margin: 0; padding: 0 10px 10px; border-top: 1px dashed var(--linie); padding-top: 8px; background: var(--warn-weich); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 7px; border: 1px solid var(--linie);
  background: var(--flaeche); cursor: pointer; font-size: .9rem; white-space: nowrap;
}
.knopf:hover { background: var(--flaeche-2); }
.knopf-akzent { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); font-weight: 700; }
.knopf-akzent:hover { background: color-mix(in srgb, var(--akzent) 88%, black); }
.knopf-gut { background: var(--gut); border-color: var(--gut); color: var(--flaeche); font-weight: 700; }
.knopf-gut:hover { background: color-mix(in srgb, var(--gut) 88%, black); }
.knopf-gefahr { color: var(--schlecht); border-color: var(--schlecht); }
.link-knopf { background: none; border: 0; padding: 2px 4px; color: var(--leise); cursor: pointer; font-size: .85rem; text-decoration: underline; text-underline-offset: 2px; }
.link-knopf:hover { color: var(--tinte); }

/* ---------- Werkbank ---------- */
.werkbank { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.werkzeugleiste { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 8px 10px 0; background: var(--flaeche-2); border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.reiter { display: flex; gap: 2px; min-width: 0; overflow-x: auto; }
.datei-reiter {
  border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0;
  background: transparent; padding: 6px 12px; cursor: pointer;
  font-family: var(--schrift-code); font-size: .82rem; color: var(--leise);
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px;
}
.datei-reiter[aria-selected="true"] { background: var(--flaeche); border-color: var(--linie); color: var(--tinte); }
.datei-reiter .punkt { width: 8px; height: 8px; border-radius: 50%; }
.punkt.html { background: #e44d26; } .punkt.css { background: #2965f1; } .punkt.js { background: #e0b500; }
.datei-reiter .schloss-tab { font-family: var(--schrift-text); font-size: .7rem; color: var(--leise); }
.datei-reiter .fehlerzahl { font-family: var(--schrift-text); font-size: .72rem; padding: 0 5px; border-radius: 8px; background: var(--schlecht); color: var(--flaeche); }
.aktionen { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
.auto { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--leise); cursor: pointer; }
.editor { position: relative; min-height: 0; min-width: 0; overflow: hidden; background: var(--flaeche); }
.editor-laedt { margin: 0; padding: 20px; color: var(--leise); }

.unten { display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--flaeche); min-height: 0; }
.unten-reiter { display: flex; align-items: center; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }
.u-reiter { background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 10px 5px; cursor: pointer; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); }
.u-reiter.aktiv { color: var(--tinte); border-bottom-color: var(--akzent); }
.zaehler { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--linie); color: var(--tinte); font-size: .72rem; text-align: center; letter-spacing: 0; }
.zaehler.rot { background: var(--schlecht); color: var(--flaeche); }
.spacer { flex: 1; }
.ruecksetzen { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.unten-inhalt { overflow-y: auto; min-height: 0; }
.probleme, .konsole { list-style: none; margin: 0; padding: 4px 0; font-size: .86rem; }
.problem { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 5px 12px; cursor: pointer; }
.problem:hover { background: var(--flaeche-2); }
.problem .symbol { font-weight: 700; }
.problem.fehler .symbol { color: var(--schlecht); }
.problem.warnung .symbol { color: var(--warn); }
.problem .ort { color: var(--leise); font-family: var(--schrift-code); font-size: .78rem; margin-left: 6px; white-space: nowrap; }
.leer { padding: 10px 12px; color: var(--leise); }
.zeile-konsole { padding: 3px 12px; font-family: var(--schrift-code); font-size: .82rem; border-bottom: 1px solid var(--flaeche-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.zeile-konsole.info { color: var(--leise); }
.zeile-konsole.warn { background: var(--warn-weich); color: var(--warn); }
.zeile-konsole.error, .zeile-konsole.fehler { background: var(--schlecht-weich); color: var(--schlecht); }
.zeile-konsole .erklaerung { display: block; font-family: var(--schrift-text); color: var(--tinte); margin-top: 2px; }
.zeile-konsole .ort { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Vorschau ---------- */
.vorschau { --h-unten: 34%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(120px, 1fr) 7px minmax(36px, var(--h-unten)); padding: 10px 10px 0; gap: 0; }
.vorschau .unten { margin: 0 -10px; border-top: 1px solid var(--linie); }
.vorschau .trenner.quer { margin: 0 -10px; }
.vorschau .trenner.quer::before { display: none; }
.vorschau-leiste { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--flaeche-2); border: 1px solid var(--linie); border-bottom: 0; border-radius: 10px 10px 0 0; }
.punkte { display: inline-flex; gap: 5px; }
.punkte i { width: 9px; height: 9px; border-radius: 50%; background: var(--linie); }
.adresse { flex: 1; min-width: 0; padding: 2px 10px; border-radius: 6px; background: var(--flaeche); border: 1px solid var(--linie); font-family: var(--schrift-code); font-size: .78rem; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vorschau { width: 100%; height: 100%; border: 1px solid var(--linie); border-radius: 0 0 10px 10px; background: #ffffff; }
#pruef-rahmen { position: fixed; left: -10000px; top: 0; width: 800px; height: 600px; overflow: hidden; visibility: hidden; }
#pruef-rahmen iframe { width: 800px; height: 600px; border: 0; }
.zeile-konsole.dialog { color: var(--akzent); }
.blinkt { color: var(--akzent); font-weight: 700; animation: blinken 1s ease-in-out 3; }
@keyframes blinken { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .blinkt { animation: none; } }

/* ---------- Angeheftete Aufgabenliste (nur auf breiten Bildschirmen) ---------- */
@media (min-width: 1051px) {
  .arbeitsbereich.angeheftet .seitenleiste { position: static; transform: none; visibility: visible; width: auto; box-shadow: none; border-right: 0; }
  .arbeitsbereich.angeheftet ~ .schleier, .arbeitsbereich.angeheftet .schleier { display: none !important; }
}
@media (max-width: 1050px) { #anheften-knopf { display: none; } }

/* ---------- Schmale Bildschirme: alles untereinander ---------- */
@media (max-width: 1050px) {
  body { overflow: auto; display: block; }
  .arbeitsbereich { display: flex; flex-direction: column; gap: 0; background: var(--grund); position: static; }
  .arbeitsbereich > section { border-bottom: 1px solid var(--linie); }
  .trenner { display: none !important; }
  .seitenleiste { position: fixed; top: 0; bottom: 0; padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .schleier { position: fixed; }
  .aufgabe { overflow: visible; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .werkbank { grid-template-rows: auto 60vh; }
  .vorschau { grid-template-rows: auto 60vh 0 260px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .fortschritt-balken { width: 80px; }
}
@media (max-width: 560px) {
  .marke-text, .fortschritt { display: none; }
  .kopf-knopf#spielwiese-knopf { margin-left: auto; }
  .werkzeugleiste { padding-top: 6px; }
  .kopf { gap: 8px; }
  .kopf-knopf { padding: 6px 8px; }
  .aktionen .auto { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Aufgabe einklappen ---------- */
.aufgabe-kopf { position: relative; }
.aufgabe-einklappen { position: absolute; top: 0; right: 0; font-size: .78rem; text-decoration: none; }
.aufgabe-kopf .eyebrow { padding-right: 90px; }
.aufgabe-ausklappen { display: none; }
.arbeitsbereich.aufgabe-zu { --b-aufgabe: 44px !important; }
.arbeitsbereich.aufgabe-zu .aufgabe { padding: 0; overflow: hidden; }
.arbeitsbereich.aufgabe-zu .aufgabe > :not(.aufgabe-ausklappen) { display: none; }
.arbeitsbereich.aufgabe-zu .aufgabe-ausklappen {
  display: flex; align-items: center; justify-content: center; height: 100%; width: 100%;
  background: var(--flaeche); border: 0; cursor: pointer; color: var(--leise); font-size: .85rem;
}
.arbeitsbereich.aufgabe-zu .aufgabe-ausklappen span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; }
.arbeitsbereich.aufgabe-zu .aufgabe-ausklappen:hover { color: var(--tinte); background: var(--flaeche-2); }
.arbeitsbereich.aufgabe-zu .trenner[data-trenner="aufgabe"] { pointer-events: none; }
@media (max-width: 1050px) { .aufgabe-einklappen { display: none; } }

/* ---------- Punkte, Titel, Konto ---------- */
.titel-chip {
  display: inline-flex; align-items: center; gap: 10px; min-width: 210px;
  padding: 5px 14px 5px 6px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--flaeche-2); border: 1px solid var(--linie); font-size: .84rem; white-space: nowrap;
}
.titel-chip:hover { border-color: var(--akzent); }
.sechseck {
  --gold: #f2b233; --gold-dunkel: #c98712;
  display: grid; place-items: center; flex: none; width: 30px; height: 33px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #ffd56b, var(--gold) 55%, var(--gold-dunkel));
  color: #3b2400; font-weight: 700; font-size: .9rem;
}
.sechseck.gross { width: 92px; height: 102px; font-size: 2.4rem; font-family: var(--schrift-anzeige); }
.titel-mitte { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.titel-zeile { display: flex; justify-content: space-between; gap: 12px; }
.titel-name { font-weight: 700; }
.titel-xp { color: var(--gold-text, #a86d00); font-weight: 700; }
:root[data-theme="dark"] .titel-xp { --gold-text: #f2b233; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .titel-xp { --gold-text: #f2b233; } }
.titel-balken { display: block; height: 4px; border-radius: 2px; background: var(--linie); overflow: hidden; }
.titel-balken span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f2b233, #f59e0b); transition: width .5s ease; }
.titel-chip.steigt { animation: aufstieg 1.2s ease 2; }
@keyframes aufstieg { 30% { box-shadow: 0 0 0 4px var(--akzent-weich); transform: scale(1.05); } }
.konto { position: relative; }
.konto-kreis { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--akzent-weich); color: var(--akzent); font-size: .72rem; font-weight: 700; }
.konto-menue {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; box-shadow: var(--schatten); padding: 6px;
}
.konto-info { margin: 0; padding: 8px 10px 10px; display: flex; flex-direction: column; border-bottom: 1px solid var(--linie); margin-bottom: 4px; }
.konto-eintrag { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; color: inherit; text-decoration: none; font-size: .9rem; }
.konto-eintrag:hover { background: var(--flaeche-2); }
@media (max-width: 1050px) { .titel-mitte { display: none; } .titel-chip { min-width: 0; padding: 4px; } #konto-name { display: none; } }

/* ---------- Meldung (unten rechts) ---------- */
.meldung {
  position: fixed; right: 20px; bottom: 20px; z-index: 80; max-width: min(380px, calc(100vw - 40px));
  background: var(--tinte); color: var(--flaeche); border-radius: 12px; padding: 12px 16px; box-shadow: var(--schatten);
  font-size: .95rem;
}
.meldung strong { color: var(--akzent-weich); }
.meldung.fehler { background: var(--schlecht); color: #fff; }

/* ---------- Anmeldung ---------- */
.anmeldung { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: var(--grund); overflow: auto; }
.anmelde-karte {
  width: min(400px, 100%); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.anmelde-karte h1 { margin: 0; font-family: var(--schrift-anzeige); font-size: 1.8rem; }
.anmelde-karte p { margin: 0; }
.marke-zeichen.gross { width: 52px; height: 52px; font-size: 28px; border-radius: 12px; }
.anmelde-karte label, .dialog label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 700; }
.anmelde-karte input, .dialog input {
  font: inherit; font-weight: 400; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--tinte);
}
.anmelde-karte input:focus, .dialog input:focus { outline: 2px solid var(--akzent); outline-offset: 0; border-color: var(--akzent); }
.formular-fehler { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--schlecht-weich); color: var(--schlecht); font-size: .9rem; }

/* ---------- Dialoge ---------- */
.dialog {
  width: min(420px, calc(100vw - 32px)); border: 1px solid var(--linie); border-radius: 14px; padding: 22px;
  background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten);
}
.dialog.breit { width: min(560px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(10, 16, 22, .45); }
.dialog form { display: flex; flex-direction: column; gap: 12px; }
.dialog h2 { margin: 0; font-family: var(--schrift-anzeige); }
.dialog h3 { margin: 18px 0 8px; font-size: 1rem; }
.dialog p { margin: 0; }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.rang-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rang-kopf h2 { font-size: 1.6rem; }
.rang-balken { height: 8px; border-radius: 4px; background: var(--flaeche-2); border: 1px solid var(--linie); overflow: hidden; margin: 14px 0; }
.rang-balken span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f2b233, #f59e0b); transition: width .5s ease; }
.rang-leiter { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.rang-leiter li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 7px; font-size: .9rem; color: var(--leise); }
.rang-leiter li.erreicht { color: var(--tinte); }
.rang-leiter li.erreicht::before { content: "✓"; color: var(--gut); margin-right: 6px; }
.rang-leiter li.aktuell { background: var(--akzent-weich); font-weight: 700; }
.rang-leiter li span:first-child { flex: 1; }
.rangliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: platz; }
.rangliste li { display: grid; grid-template-columns: 24px 26px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 7px; font-size: .9rem; counter-increment: platz; }
.rangliste li::before { content: counter(platz) "."; color: var(--leise); font-variant-numeric: tabular-nums; }
.rangliste li.ich { background: var(--akzent-weich); font-weight: 700; }
.rangliste .rl-titel { display: block; color: var(--leise); font-size: .8rem; font-weight: 400; }

/* ---------- Startseite ---------- */
.start-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0 0 10px; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 700; background: var(--flaeche-2); }
.start-link:hover, .start-link[aria-current="page"] { background: var(--akzent-weich); }
.startseite { overflow-y: auto; min-height: 0; background: var(--grund); }
.start-innen { max-width: 1120px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 28px; }
.start-held {
  display: flex; align-items: center; gap: 28px; padding: 28px 32px; border-radius: 18px;
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.start-held-text { flex: 1; min-width: 0; }
.start-held h1 { margin: 0 0 4px; font-family: var(--schrift-anzeige); font-size: 2rem; letter-spacing: -.02em; }
.start-held p { margin: 0 0 14px; }
.start-xp { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.start-xp #start-fehlt { color: var(--leise); }
.start-held .rang-balken { margin: 8px 0 0; max-width: 520px; }
.start-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.start-raster:has(.start-rechts[hidden]) { grid-template-columns: minmax(0, 1fr); }
.start-ueberschrift { margin: 0 0 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); }
.start-links .start-ueberschrift + * { margin-bottom: 28px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; }
.weiter-karte {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; color: inherit; text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px;
}
.weiter-karte + .weiter-karte { margin-top: 8px; }
.weiter-karte:hover { border-color: var(--akzent); }
.weiter-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--akzent-weich); color: var(--akzent); font-size: 1.2rem; flex: none; }
.weiter-text { flex: 1; min-width: 0; }
.weiter-text small { display: block; color: var(--leise); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.weiter-text strong { display: block; font-size: 1.05rem; }
.weiter-marken { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.marke-klein { font-size: .74rem; padding: 1px 7px; border-radius: 6px; background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--leise); }
.marke-klein.fehler { color: var(--warn); background: var(--warn-weich); border-color: transparent; }
.marke-klein.xp { color: #a86d00; background: #fdf1d6; border-color: transparent; }
.weiter-pfeil { color: var(--leise); font-size: 1.2rem; }
.start-kapitel { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kapitel-karte { display: block; padding: 14px 16px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); color: inherit; text-decoration: none; }
.kapitel-karte:hover { border-color: var(--akzent); }
.kapitel-karte .ab-nr { display: block; margin-bottom: 2px; }
.kapitel-karte strong { display: block; font-size: .95rem; line-height: 1.25; min-height: 2.5em; }
.kapitel-karte .zeile { display: flex; justify-content: space-between; font-size: .8rem; color: var(--leise); margin: 8px 0 6px; }
.kapitel-karte .rang-balken { margin: 0; height: 6px; }
.kapitel-karte.fertig .rang-balken span { background: var(--gut); }
.start-rechts .rangliste { padding: 6px; }
.rangliste .sechseck { width: 22px; height: 24px; font-size: .72rem; }
@media (max-width: 900px) {
  .start-raster { grid-template-columns: minmax(0, 1fr); }
  .start-held { flex-direction: column; align-items: flex-start; padding: 22px; gap: 16px; }
  .sechseck.gross { width: 64px; height: 71px; font-size: 1.7rem; }
}
@media (max-width: 1050px) { .startseite { overflow: visible; } }
.kapitel-karte .rang-balken, .kapitel-karte .rang-balken span { display: block; }
.start-xp { max-width: 520px; }
#fortschritt { display: none; }
.titel-chip { margin-left: auto; }