:root {
  --bg: #f6f5f1;
  --karte: #ffffff;
  --text: #22252a;
  --leise: #646a73;
  --linie: #e2e0da;
  --akzent: #2d5f8b;
  --akzent-hell: #e6eef6;
  --gruen: #2f7d4f;
  --gruen-hell: #e3f1e8;
  --blau: #3a5ea8;
  --blau-hell: #e7ecf8;
  --orange: #b4621b;
  --orange-hell: #fbeee1;
  --gelb: #b58a00;
  --punkt-leer: #dcdad4;
  --schatten: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17191c; --karte: #202328; --text: #e8e9eb; --leise: #a1a7b0; --linie: #33373e;
    --akzent: #7fb0dc; --akzent-hell: #223242; --gruen: #6cc28f; --gruen-hell: #1d3326;
    --blau: #93acec; --blau-hell: #232c42; --orange: #e59a5a; --orange-hell: #3a2a1b;
    --gelb: #e0b53a; --punkt-leer: #3b3f46; --schatten: none; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 1rem/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.6rem; margin: 0 0 4px; font-weight: 650; }
h2 { font-size: 1.15rem; margin: 32px 0 12px; }
.unterzeile { margin: 0; color: var(--leise); }
button, select, input { font: inherit; color: inherit; }
a { color: var(--akzent); }

/* Filter */
.filter {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 12px;
  padding: 14px 16px; margin: 20px 0 12px; box-shadow: var(--schatten);
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1fr);  /* sonst macht der längste Bereichsname die Box breiter als den Bildschirm */
}
.filter-zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-width: 0; }
.filter-zeile > * { min-width: 0; }
.regler { display: grid; gap: 4px; width: 100%; }
.regler small { color: var(--leise); font-weight: normal; }
.regler input { width: 100%; accent-color: var(--akzent); }
.schalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.schalter button { border: 0; background: transparent; padding: 7px 14px; cursor: pointer; }
.schalter button + button { border-left: 1px solid var(--linie); }
.schalter button.an { background: var(--akzent); color: #fff; }
select { padding: 7px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--karte); max-width: 100%; }
.merk-filter { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }

.erklaerung { color: var(--leise); margin: 0 0 8px; }
.erklaerung summary { cursor: pointer; color: var(--akzent); }
.erklaerung p { margin: 8px 0; }

/* Gruppen + Karten */
.gruppe-kopf { display: flex; align-items: baseline; gap: 8px; }
.gruppe-kopf small { color: var(--leise); font-weight: normal; }
.leer { color: var(--leise); background: var(--karte); border: 1px dashed var(--linie); border-radius: 12px; padding: 16px; }
.mehr { margin-top: 10px; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 14px; cursor: pointer; }

.karte {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; box-shadow: var(--schatten);
  transition: border-color .15s;
}
.karte:hover, .karte:focus-visible { border-color: var(--akzent); outline: none; }
.karte-titel { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.karte-firma { color: var(--leise); }
.karte-zeile { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; grid-column: 1 / -1; font-size: .92rem; }
.karte-datum { color: var(--leise); font-size: .85rem; margin-left: auto; }

.marke { display: inline-block; font-size: .78rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; margin-right: 6px; vertical-align: 2px; }
.marke.stelle { background: var(--gruen-hell); color: var(--gruen); }
.marke.initiativ { background: var(--blau-hell); color: var(--blau); }
.marke.neu { background: var(--orange-hell); color: var(--orange); }
.marke.bereich { background: var(--akzent-hell); color: var(--akzent); font-weight: 500; }

.stern { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--punkt-leer); padding: 0 2px; }
.stern.an { color: var(--gelb); }

.messer { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.messer .punkte { display: inline-flex; gap: 2px; }
.messer .punkte i { width: 8px; height: 8px; border-radius: 50%; background: var(--punkt-leer); display: inline-block; }
.messer.gut .punkte i.voll { background: var(--gruen); }
.messer.mittel .punkte i.voll { background: var(--gelb); }
.messer.schlecht .punkte i.voll { background: var(--orange); }
.messer .wort { color: var(--leise); }

/* Detail */
.zurueck { background: none; border: 0; color: var(--akzent); cursor: pointer; padding: 0; font-size: 1rem; margin-bottom: 16px; }
.detail-kopf h1 { margin-top: 6px; overflow-wrap: anywhere; }
.detail-kopf .karte-firma { font-size: 1.05rem; }
.detail-stern { margin-left: 8px; font-size: 1.1rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.detail-stern.an { border-color: var(--gelb); }
.block { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 16px 18px; margin-top: 16px; box-shadow: var(--schatten); }
.block h2 { margin: 0 0 10px; font-size: 1.05rem; }
.fakten { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; margin: 0; }
.fakten dt { color: var(--leise); }
.fakten dd { margin: 0; overflow-wrap: anywhere; }
.unklar { color: var(--leise); font-style: italic; }
.liste-gut, .liste-schlecht { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.liste-gut li::before { content: "✓ "; color: var(--gruen); font-weight: 700; }
.liste-schlecht li::before { content: "✗ "; color: var(--orange); font-weight: 700; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hinweis { color: var(--leise); font-size: .88rem; margin: 10px 0 0; }
.knopf { display: inline-block; background: var(--akzent); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; text-decoration: none; cursor: pointer; }
.knopf.zweit { background: var(--karte); color: var(--akzent); border: 1px solid var(--akzent); }
.knopf:disabled { opacity: .5; cursor: default; }

.vorschlag-text { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--linie); border-radius: 8px; padding: 14px; margin: 0 0 12px; }
.vorschlag-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.laedt { display: flex; align-items: center; gap: 12px; color: var(--leise); padding: 10px 0; }
.rad { width: 22px; height: 22px; border: 3px solid var(--linie); border-top-color: var(--akzent); border-radius: 50%; animation: drehen .8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .schalter, #bereich { width: 100%; }
  .schalter button { flex: 1 1 0; padding: 7px 6px; min-width: 0; }
  .fakten, .zwei { grid-template-columns: 1fr; }
  .fakten dt { margin-top: 6px; }
  .karte-datum { margin-left: 0; }
}
.liste-gut li.unklar::before, .liste-schlecht li.unklar::before { content: ""; }

/* Prüfung, Berufserklärung, "Passt nicht" */
.marke.geprueft { background: var(--gruen-hell); color: var(--gruen); font-weight: 500; }
.passt-nicht p { margin: 0 0 10px; }
.gruende { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.grund { border: 1px solid var(--linie); background: var(--karte); border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.grund.an { background: var(--orange-hell); border-color: var(--orange); color: var(--orange); }
.passt-nicht textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--linie); border-radius: 8px; background: var(--karte); color: var(--text); margin-bottom: 10px; }
.ausgeblendet { opacity: .85; }
.aus-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--karte); border: 1px dashed var(--linie); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.aus-zeile small { color: var(--leise); }

.urteil-zeile { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 0 0 10px; }
.urteil { font-size: 1.1rem; }
.urteil.passt { color: var(--gruen); }
.urteil.mittel { color: var(--gelb); }
.urteil.passt_nicht { color: var(--orange); }
.notiz { margin: 14px 0 0; }
.block .zwei { margin-top: 14px; }
.aktion { margin: 14px 0 0; }
.fakten + .aktion { margin-top: 16px; }
.block > .aktion:first-child { margin: 0; }
details.beruf summary { cursor: pointer; color: var(--akzent); }
details.beruf p { margin: 10px 0 0; }