:root {
  --bg: #f6f5f1;
  --flaeche: #ffffff;
  --flaeche-2: #efede7;
  --text: #1f2328;
  --text-2: #5c6066;
  --linie: #d9d6cd;
  --akzent: #1f6f8b;
  --akzent-text: #ffffff;
  --akzent-hell: #e1eff4;
  --gut: #237a45;
  --gut-hell: #e3f3e8;
  --warn: #9a5b00;
  --warn-hell: #fdf1dc;
  --fehler: #b42318;
  --fehler-hell: #fdeceb;
  --na: #6b6f76;
  --radius: 10px;
  --schatten: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 5%);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16181c; --flaeche: #1f2228; --flaeche-2: #2a2e35; --text: #e8e6e1; --text-2: #a3a7ae;
    --linie: #3a3f47; --akzent: #5fb3d1; --akzent-text: #0d1a1f; --akzent-hell: #1d3440;
    --gut: #6fcf97; --gut-hell: #1c3326; --warn: #f2b45a; --warn-hell: #3a2c14;
    --fehler: #f28b82; --fehler-hell: #3d1d1b; --na: #9aa0a8;
    --schatten: 0 1px 2px rgb(0 0 0 / 30%); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16181c; --flaeche: #1f2228; --flaeche-2: #2a2e35; --text: #e8e6e1; --text-2: #a3a7ae;
  --linie: #3a3f47; --akzent: #5fb3d1; --akzent-text: #0d1a1f; --akzent-hell: #1d3440;
  --gut: #6fcf97; --gut-hell: #1c3326; --warn: #f2b45a; --warn-hell: #3a2c14;
  --fehler: #f28b82; --fehler-hell: #3d1d1b; --na: #9aa0a8;
  --schatten: 0 1px 2px rgb(0 0 0 / 30%); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 1rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3 { line-height: 1.2; margin: 0; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
a { color: var(--akzent); }
button, select, input, textarea { font: inherit; color: inherit; }

button {
  min-height: 2.5rem; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--linie); background: var(--flaeche);
}
button:hover { border-color: var(--akzent); }
button.primaer { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); font-weight: 600; }
button.leise { background: transparent; border-color: transparent; color: var(--akzent); padding-inline: 8px; }
button.leise:hover { background: var(--akzent-hell); }
button.gefahr { color: var(--fehler); }
button:disabled { opacity: .5; cursor: default; }
select, input[type="text"], input[type="search"], input[type="number"], input[type="url"], input[type="date"], textarea {
  min-height: 2.5rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche);
  max-width: 100%;
}
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--akzent); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 10; background: var(--flaeche); border-bottom: 1px solid var(--linie);
  padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.titel { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.kopf h1 { font-size: 1.3rem; }
.schriftwahl { display: inline-flex; gap: 4px; }
.schriftwahl button { min-width: 2.75rem; font-weight: 700; padding-inline: 8px; }
.reiter { display: flex; gap: 4px; flex-wrap: wrap; }
.reiter button { border-color: transparent; background: transparent; font-weight: 600; color: var(--text-2); }
.reiter button[aria-selected="true"] { background: var(--akzent-hell); color: var(--akzent); }

main { padding: 16px; max-width: 1400px; margin: 0 auto; }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 14px; }
.werkzeuge label { display: inline-flex; align-items: center; gap: 6px; }
.werkzeuge .zahl { color: var(--text-2); margin-left: auto; }
.leer { color: var(--text-2); padding: 24px; text-align: center; }

/* Namen */
.name-1 { font-weight: 700; }
.name-2 { color: var(--text-2); font-size: .9em; }

/* Steckbriefe */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten);
  border-top: 5px solid var(--klassenfarbe, var(--linie));
}
.karte header { padding: 10px 14px 6px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.karte header .name-1 { font-size: 1.25rem; }
.karte header .drucken { min-height: 2rem; font-size: .9rem; white-space: nowrap; }
.karte dl { margin: 0; padding: 4px 14px 12px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 1rem; }
.karte dt { color: var(--text-2); }
.karte dd { margin: 0; }
.karte .didaktik { margin: 0 14px 12px; }
.klassenmarke {
  display: inline-block; font-size: .9rem; padding: 1px 8px; border-radius: 99px; margin-top: 4px;
  background: color-mix(in srgb, var(--k) 18%, var(--flaeche)); color: var(--text); border: 1px solid var(--k);
}

.wert-na { color: var(--na); font-style: italic; }
.wert-na::before { content: "⊘ "; font-style: normal; }
.wert-unbekannt { color: var(--warn); font-style: italic; }
.wert-unbekannt::before { content: "? "; font-style: normal; font-weight: 700; }
.wert-sonderfall { font-weight: 600; }
.zustaende { margin: 0; padding: 0; list-style: none; }
.lehrer-hinweis { display: block; font-size: .9rem; color: var(--warn); }
.ungeprueft { font-size: .85rem; background: var(--warn-hell); color: var(--warn); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.didaktik {
  background: var(--warn-hell); color: var(--text); border-left: 4px solid var(--warn); padding: 6px 10px;
  border-radius: 6px; font-size: .95rem;
}
.didaktik::before { content: "Didaktik: "; font-weight: 700; color: var(--warn); }

.ghs { width: 2.75rem; height: 2.75rem; vertical-align: middle; }
.ghs-reihe { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }

/* Entscheidungsbaum */
.fortschritt { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; }
.fortschritt .balken { flex: 1; height: 12px; background: var(--flaeche-2); border-radius: 99px; overflow: hidden; min-width: 80px; }
.fortschritt .balken > div { height: 100%; background: var(--gut); transition: width .3s; }
.fortschritt b { white-space: nowrap; }
.baum { --einzug: 26px; }
.knoten { position: relative; margin-top: 10px; }
.kinder { margin-left: var(--einzug); padding-left: 14px; border-left: 2px solid var(--linie); }
.kinder > .knoten::before {
  content: ""; position: absolute; left: -16px; top: 22px; width: 14px; border-top: 2px solid var(--linie);
}
.knoten-box {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 12px;
  box-shadow: var(--schatten);
}
.knoten.erkannt > .knoten-box { border: 2px solid var(--gut); background: var(--gut-hell); }
.knoten-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.astlabel { font-weight: 700; }
.astlabel.na { color: var(--na); font-style: italic; }
.astlabel.unbekannt { color: var(--warn); font-style: italic; }
.anzahl { color: var(--text-2); font-size: .95rem; }
.knoten-kopf .rechts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.teilung { font-size: 1rem; color: var(--text-2); }
.teilung b { color: var(--text); }
.erkannt-marke { color: var(--gut); font-weight: 700; }
.weg { font-size: .95rem; color: var(--text-2); margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  min-height: 2.25rem; padding: 4px 12px; border-radius: 99px; font-size: 1rem;
  background: var(--flaeche-2); border: 1px solid var(--linie);
}
.chip.gefaerbt { background: color-mix(in srgb, var(--k) 22%, var(--flaeche)); border-color: var(--k); }
.chip .name-2 { margin-left: 4px; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 1rem; margin-bottom: 10px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 14px; height: 14px; border-radius: 4px; background: var(--k); display: inline-block; }

/* Dialog */
dialog {
  border: 1px solid var(--linie); border-radius: 14px; padding: 0; background: var(--flaeche); color: var(--text);
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
}
dialog::backdrop { background: rgb(0 0 0 / 35%); }
.dialog-kopf { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linie); position: sticky; top: 0; background: var(--flaeche); }
.dialog-kopf h2 { margin-right: auto; }
.dialog-inhalt { padding: 14px 16px 18px; }
.wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.wahl button { text-align: left; min-height: 3.25rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.wahl button small { color: var(--text-2); font-weight: 400; }
.wahl button.benutzt { border-style: dashed; }
.wahl button .ghs { width: 2.5rem; height: 2.5rem; }
.wahl-gruppe { margin: 12px 0 6px; color: var(--text-2); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
dialog .karte { box-shadow: none; border: 0; border-top: 5px solid var(--klassenfarbe, var(--linie)); border-radius: 0; }

/* Overlay mit weiteren Namen, Formel, molarer Masse */
[data-info] { text-decoration: underline dotted color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
#overlay {
  position: fixed; z-index: 100; max-width: min(360px, calc(100vw - 16px)); pointer-events: none;
  background: var(--text); color: var(--bg); border-radius: 10px; padding: 10px 14px; font-size: 1rem;
  box-shadow: 0 6px 24px rgb(0 0 0 / 25%);
}
#overlay dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
#overlay dt { opacity: .7; }
#overlay dd { margin: 0; }
#druck { display: none; }
.namensinfo { padding: 0 14px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--linie); }
.namensinfo > b { display: none; }
.namensinfo dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.namensinfo dt { color: var(--text-2); }
.namensinfo dd { margin: 0; }

/* Einrichten */
.einrichten { display: grid; gap: 16px; }
.eigenschaften-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px 16px; }
.eig-zeile { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; }
.eig-zeile.aus { opacity: .6; }
.eig-zeile select { width: 100%; }
.klassifikationen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 24px; }
.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.tafel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schatten); }
.tafel h2 { margin-bottom: 10px; }
.tafel p { margin: 6px 0; color: var(--text-2); font-size: .92rem; }
.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.stoffgruppe { margin: 10px 0; }
.stoffgruppe .liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 10px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabelle th, .tabelle td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle th { color: var(--text-2); font-weight: 600; font-size: .82rem; }
.tabelle select { width: 100%; }
.farbpunkt { width: 14px; height: 14px; border-radius: 4px; display: inline-block; background: var(--k); flex: none; }
.linkfeld { width: 100%; font-family: ui-monospace, monospace; font-size: .8rem; }
.meldung { padding: 8px 12px; border-radius: 8px; background: var(--gut-hell); color: var(--gut); font-size: .92rem; }
.meldung.fehler { background: var(--fehler-hell); color: var(--fehler); }

[hidden] { display: none !important; }

/* Druck: nur der gewählte Steckbrief, ohne Lehrkraft-Hinweise und Bedienelemente */
@media print {
  body.drucken > *:not(#druck) { display: none !important; }
  body.drucken { background: #fff; color: #000; }
  body.drucken #druck { display: block; }
  #druck .karte { background: #fff; color: #000; box-shadow: none; border: 1px solid #999; border-top: 8px solid var(--klassenfarbe, #999); max-width: 18cm; font-size: 14pt; }
  #druck .karte header .name-1 { font-size: 22pt; }
  #druck .karte dl { font-size: 13pt; gap: 6px 18px; }
  #druck dt { color: #444; }
  #druck .drucken, #druck .didaktik, #druck .lehrer-hinweis, #druck .ungeprueft { display: none !important; }
  #druck [data-info] { text-decoration: none; }
  #druck .ghs { width: 1.6cm; height: 1.6cm; }
}

@media (max-width: 600px) {
  .baum { --einzug: 8px; }
  .kinder { padding-left: 10px; }
  .kinder > .knoten::before { left: -12px; width: 10px; }
  .karte dl { grid-template-columns: 1fr; gap: 0; }
  .karte dd { margin-bottom: 6px; }
}