:root {
  --bg: #ffffff; --fg: #1a1a1a; --dezent: #6b6b6b; --linie: #e2e2e2;
  --akzent: #6247aa; --akzent-fg: #ffffff; --badge-bg: #efeafc; --rot: #b3261e;
  --karte-bg: #fafafa; --warn-bg: #fff3e6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a; --fg: #ececec; --dezent: #9a9a9a; --linie: #33333a;
    --akzent: #9d84d6; --akzent-fg: #16161a; --badge-bg: #2c2740; --rot: #ff7a70;
    --karte-bg: #1e1e24; --warn-bg: #3a2a1a;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 68rem; margin: 0 auto; padding: 1rem 1.25rem 4rem; }
a { color: var(--akzent); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; margin-top: 2rem; }

nav {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1.25rem; border-bottom: 1px solid var(--linie);
}
nav a { text-decoration: none; color: var(--fg); }
nav a:hover { color: var(--akzent); }
.marke { font-weight: 700; }
.marke span { color: var(--akzent); font-weight: 400; }
.logout { margin-left: auto; display: flex; gap: .6rem; align-items: center; }
.wer { color: var(--dezent); font-size: .9rem; }

table { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem; }
th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--dezent); }
th, td { padding: .45rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
tr:hover td { background: var(--karte-bg); }

.badge {
  display: inline-block; padding: .1rem .5rem; border-radius: 1rem;
  background: var(--badge-bg); color: var(--fg); font-size: .8rem; white-space: nowrap;
}
.badge.endstatus { opacity: .7; }
.passt-passt { background: #d7efd7; color: #1a4d1a; }
.passt-passt_nicht { background: #f3d6d4; color: #7a1f1a; }
.passt-unklar { background: var(--warn-bg); }
@media (prefers-color-scheme: dark) {
  .passt-passt { background: #1f3d1f; color: #b5e0b5; }
  .passt-passt_nicht { background: #452020; color: #f0b3ae; }
}

.kacheln { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.kachel {
  flex: 1 1 10rem; padding: 1rem; border: 1px solid var(--linie); border-radius: .6rem;
  text-decoration: none; color: var(--fg); background: var(--karte-bg);
}
.kachel strong { display: block; font-size: 1.8rem; color: var(--akzent); }

.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.filter { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 1rem; }
.filter input[type=search] { flex: 1 1 14rem; }

input, select, textarea, button {
  font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--linie); border-radius: .4rem; padding: .4rem .6rem;
}
textarea { width: 100%; }
button, .knopf {
  background: var(--akzent); color: var(--akzent-fg); border: none; cursor: pointer;
  text-decoration: none; display: inline-block; padding: .45rem .9rem; border-radius: .4rem;
}
button.leise, .knopf.leise, .logout button {
  background: transparent; color: var(--akzent); border: 1px solid var(--linie);
}
button.rot { color: var(--rot); }
.gefahr { margin-top: 2.5rem; }

.formular { display: flex; flex-direction: column; gap: .8rem; max-width: 34rem; }
.formular label { display: flex; flex-direction: column; gap: .25rem; }
.zeile { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.schmal { width: 5.5rem; }

.login-box { max-width: 20rem; margin: 15vh auto; }
.login-box form { display: flex; flex-direction: column; gap: .8rem; }
.login-box label { display: flex; flex-direction: column; gap: .25rem; }

.eigenschaften { display: flex; gap: 1.2rem; flex-wrap: wrap; color: var(--dezent); margin-bottom: .8rem; }
.eigenschaften a { word-break: break-all; }
.hinweise { background: var(--karte-bg); border-left: 3px solid var(--akzent); padding: .6rem .9rem; border-radius: 0 .4rem .4rem 0; }
.passt-form { margin: .6rem 0; }

.karte { border: 1px solid var(--linie); border-radius: .6rem; padding: .8rem 1rem; margin-bottom: .8rem; background: var(--karte-bg); }
.karte-kopf { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.karte-kopf .leise { margin-left: auto; }
.karte-details { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--dezent); font-size: .9rem; margin-top: .4rem; }
.verlauf { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.status-wechsel select { font-size: .85rem; padding: .2rem .4rem; }

.neu-block { margin: .5rem 0 1.5rem; }
.neu-block summary { cursor: pointer; color: var(--akzent); }
.neu-block form { margin-top: .6rem; }

.ueberfaellig td { background: var(--warn-bg); }
.fehler { color: var(--rot); }
.dezent { color: var(--dezent); }
.klein { font-size: .85rem; }
.status-zeile { display: flex; gap: .5rem; flex-wrap: wrap; }

.bewertung-karte { padding: 1.2rem 1.4rem; }
.bewertung-karte h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.bewertung-knoepfe { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.bewertung-knoepfe button { font-size: 1.05rem; padding: .6rem 1.1rem; }
button.gruen { background: #2e7d32; color: #fff; }
button.rot-voll { background: var(--rot); color: #fff; }
kbd {
  font: .75em ui-monospace, monospace; padding: .05rem .3rem; border-radius: .25rem;
  border: 1px solid currentColor; opacity: .65; margin-left: .3rem;
}
.fortschritt { margin-bottom: .5rem; }

/* Dropdown-Menü in der Navigation */
.menue { position: relative; }
.menue summary {
  cursor: pointer; list-style: none; color: var(--fg);
}
.menue summary::-webkit-details-marker { display: none; }
.menue summary::after { content: " ▾"; font-size: .7em; color: var(--dezent); }
.menue summary:hover { color: var(--akzent); }
.menue-liste {
  position: absolute; top: 1.9rem; left: -.6rem; z-index: 10;
  display: flex; flex-direction: column; min-width: 11rem;
  background: var(--bg); border: 1px solid var(--linie); border-radius: .5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); padding: .35rem;
}
.menue-liste a { padding: .4rem .7rem; border-radius: .35rem; }
.menue-liste a:hover { background: var(--karte-bg); }

/* Dokumentbaum */
.baum { list-style: none; padding-left: 1.2rem; margin: .3rem 0; }
.baum > li { padding: .15rem 0; }
.baum summary { cursor: pointer; list-style: none; }
.baum summary::-webkit-details-marker { display: none; }
.baum a { text-decoration: none; }
.baum a:hover { text-decoration: underline; }
.brotkrumen { color: var(--dezent); font-size: .9rem; margin-bottom: .2rem; }
.brotkrumen a { color: var(--dezent); }

/* Checklisten */
.checkliste { list-style: none; padding: 0; max-width: 40rem; }
.checkliste li {
  display: flex; align-items: center; gap: .6rem;
  padding: .35rem .5rem; border-bottom: 1px solid var(--linie);
}
.checkliste li.erledigt .eintrag-text { text-decoration: line-through; color: var(--dezent); }
.checkliste .eintrag-text { flex: 1; }
.eintrag-aktionen { display: flex; gap: .2rem; opacity: .35; }
.checkliste li:hover .eintrag-aktionen { opacity: 1; }
.eintrag-aktionen button { padding: .1rem .45rem; font-size: .85rem; }

/* Markdown-Ansicht */
.markdown { max-width: 46rem; }
.markdown h1 { font-size: 1.35rem; } .markdown h2 { font-size: 1.15rem; margin-top: 1.4rem; }
.markdown pre { background: var(--karte-bg); padding: .8rem; border-radius: .5rem; overflow-x: auto; }
.markdown code { background: var(--karte-bg); padding: .1rem .3rem; border-radius: .25rem; }
.markdown pre code { padding: 0; }
.markdown blockquote { border-left: 3px solid var(--akzent); margin-left: 0; padding-left: 1rem; color: var(--dezent); }
.markdown table { width: auto; }
.markdown img { max-width: 100%; }

.formular.breit { max-width: 46rem; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9rem; }

/* SunEditor: Lese-Ansicht ohne Editor-Rahmen, Farben ans Schema angepasst */
.dokument-ansicht.sun-editor-editable {
  background: transparent; color: var(--fg);
  padding: 0; max-width: 46rem; font-family: inherit;
}
.dokument-ansicht.sun-editor-editable table td,
.dokument-ansicht.sun-editor-editable table th { border-color: var(--linie); }
.sun-editor-editable img { max-width: 100%; height: auto; }

@media (prefers-color-scheme: dark) {
  /* Höhere Spezifität als suneditor.min.css (lädt nach style.css) via .formular-Prefix */
  .formular .sun-editor { border-color: var(--linie); background: var(--bg); }
  .formular .sun-editor .se-container { background: var(--bg); }
  .formular .sun-editor .se-toolbar { background: var(--karte-bg); outline-color: var(--linie); }
  .formular .sun-editor .se-btn-tray { background: transparent; }
  .formular .sun-editor .se-btn { color: var(--fg); }
  .formular .sun-editor .se-btn:enabled:hover,
  .formular .sun-editor .se-btn:enabled:focus { background: var(--badge-bg); color: var(--fg); }
  .formular .sun-editor .se-btn:enabled.active { color: var(--akzent); background: var(--badge-bg); }
  .formular .sun-editor .se-btn:disabled { color: var(--dezent); opacity: .4; }
  .formular .sun-editor .se-btn-select .txt { color: var(--fg); }
  .formular .sun-editor .se-btn-module-border { border-color: var(--linie); }
  .formular .sun-editor .se-toolbar-separator-vertical { background: var(--linie); }

  .formular .sun-editor .se-wrapper .se-wrapper-wysiwyg,
  .formular .sun-editor .sun-editor-editable { background: var(--bg); color: var(--fg); }
  .formular .sun-editor .se-wrapper .se-placeholder { color: var(--dezent); }
  .formular .sun-editor .se-wrapper .se-wrapper-code {
    background: var(--karte-bg); color: var(--fg);
  }
  .formular .sun-editor .se-resizing-bar {
    background: var(--karte-bg); border-color: var(--linie); color: var(--dezent);
  }
  .formular .sun-editor .se-resizing-bar .se-char-counter-wrapper { color: var(--dezent); }
  .formular .sun-editor .se-navigation { color: var(--dezent); }

  /* Aufklapp-Menüs (Format, Ausrichtung, Tabellen-Picker …) */
  .formular .sun-editor .se-list-layer,
  .formular .sun-editor .se-menu-list li > button { background: var(--karte-bg); color: var(--fg); }
  .formular .sun-editor .se-list-layer { border-color: var(--linie); }
  .formular .sun-editor .se-list-inner .se-menu-list li > button:enabled:hover,
  .formular .sun-editor .se-list-inner .se-menu-list li > button:enabled:focus {
    background: var(--badge-bg); color: var(--fg);
  }
  .formular .sun-editor .se-list-inner .se-menu-list li > button > .txt { color: var(--fg); }
  /* Aufklapp-Listen (Format, Ausrichtung …): Einträge samt Vorschau-Elementen lesbar machen */
  .formular .sun-editor .se-list-layer button.se-btn-list,
  .formular .sun-editor .se-list-layer button.se-btn-list * { color: var(--fg); }
  .formular .sun-editor .se-list-layer button.se-btn-list:hover,
  .formular .sun-editor .se-list-layer button.se-btn-list:focus { background: var(--badge-bg); }
  .formular .sun-editor .se-list-layer button.se-btn-list pre {
    background: var(--bg); color: var(--fg); border-color: var(--linie);
  }
  /* Aktiver Zustand des Format-/Dropdown-Buttons (Klasse "on") */
  .formular .sun-editor .se-btn:enabled.on,
  .formular .sun-editor .se-btn:enabled.on:hover,
  .formular .sun-editor .se-btn:enabled.on:focus { background: var(--badge-bg); color: var(--fg); }
  .formular .sun-editor .se-btn:enabled.on .txt { color: var(--fg); }
  .formular .sun-editor .se-submenu.se-selector-table { background: var(--karte-bg); border-color: var(--linie); }
  .formular .sun-editor .se-selector-table .se-table-size-display { color: var(--fg); }

  /* Dialoge (Link, Bild …) */
  .formular .sun-editor .se-dialog .se-dialog-inner .se-dialog-content {
    background: var(--karte-bg); color: var(--fg); border-color: var(--linie);
  }
  .formular .sun-editor .se-dialog .se-dialog-inner .se-dialog-header,
  .formular .sun-editor .se-dialog .se-dialog-inner .se-dialog-footer {
    border-color: var(--linie); color: var(--fg);
  }
  .formular .sun-editor .se-dialog .se-dialog-inner .se-dialog-header .se-modal-title { color: var(--fg); }
  .formular .sun-editor .se-dialog .se-dialog-inner label,
  .formular .sun-editor .se-dialog .se-dialog-inner .se-dialog-form-footer label { color: var(--fg); }
  .formular .sun-editor .se-dialog .se-dialog-inner input,
  .formular .sun-editor .se-dialog .se-dialog-inner textarea {
    background: var(--bg); color: var(--fg); border-color: var(--linie);
  }
  .formular .sun-editor .se-dialog .se-dialog-inner .se-dialog-tabs {
    background: var(--karte-bg); border-color: var(--linie);
  }
  .formular .sun-editor .se-dialog .se-dialog-inner .se-dialog-tabs button {
    background: var(--karte-bg); color: var(--fg); border-color: var(--linie);
  }
  .formular .sun-editor .se-dialog .se-dialog-inner .se-dialog-tabs button.active {
    background: var(--bg); color: var(--akzent);
  }
  .formular .sun-editor .se-dialog-btn-check { color: var(--akzent); }

  /* Tooltips lesbar lassen (dunkle Blase, helle Schrift ist Standard – passt) */
  .formular .sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text { color: #fff; }
}

@media (max-width: 640px) {
  th, td { padding: .35rem .4rem; }
  main { padding: .8rem .8rem 3rem; }
}