:root {
  --bg: #f4f1ec; --flaeche: #fffdf9; --flaeche2: #ece7df; --text: #2a2622; --text2: #6b625a;
  --rand: #d8d0c4; --akzent: #8a4b2a; --akzent-text: #fff; --ok: #2f7a4d; --fehler: #b3261e; --aktiv: #f3e3d6;
  --radius: 6px; --menue-h: 44px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1916; --flaeche: #26231f; --flaeche2: #322e29; --text: #ece6dd; --text2: #a39a8f;
    --rand: #433d36; --akzent: #d28a5f; --akzent-text: #1b1916; --ok: #6cc08b; --fehler: #f2877f; --aktiv: #3d3025; }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--flaeche2); border: 1px solid var(--rand); border-radius: var(--radius); padding: 4px 10px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--akzent); }
button:disabled { opacity: .5; cursor: default; }
button.primaer { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
button.gefahr { color: var(--fehler); }
button.klein { padding: 0 6px; font-size: 13px; line-height: 22px; }
button.leer { background: none; border-color: transparent; padding: 0 5px; color: var(--text2); }
button.leer:hover:not(:disabled) { color: var(--fehler); border-color: transparent; }
input, select, textarea { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 4px 8px; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.laden { padding: 2rem; color: var(--text2); }

/* Anmeldung / Installation */
.seite-schmal { display: grid; place-items: start center; padding: 2rem 1rem; }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 1.5rem; width: min(440px, 100%); }
.karte h1 { margin-top: 0; font-size: 1.4rem; }
.karte h2 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.karte label { display: block; margin: .6rem 0; font-size: 13px; color: var(--text2); }
.karte label input { display: block; width: 100%; margin-top: 2px; color: var(--text); }
.karte button[type=submit] { margin-top: .8rem; width: 100%; padding: 8px; background: var(--akzent); color: var(--akzent-text); }
.hinweis { color: var(--text2); font-size: 13px; }
.warnung { background: var(--aktiv); border: 1px solid var(--rand); border-radius: var(--radius); padding: 6px 10px; font-size: 13px; color: var(--text2); }
.fehler { color: var(--fehler); } .ok { color: var(--ok); }

/* Hauptlayout: Menüzeile + 2 Spalten à 2 Bereiche */
.app { display: flex; flex-direction: column; height: 100vh; }
.menue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px; min-height: var(--menue-h);
  background: var(--flaeche); border-bottom: 1px solid var(--rand); }
.menue .marke { font-weight: 700; color: var(--akzent); margin-right: 6px; }
.menue .luecke { flex: 1; }
.menue input[type=search] { width: 170px; } .menue input[type=password] { width: 170px; }
.menue .status { font-size: 13px; color: var(--text2); }
.menue .status.offen { color: var(--ok); }
.spalten { flex: 1; display: flex; min-height: 0; gap: 8px; padding: 8px; }
.links { width: 300px; flex: none; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.links.alle-zu { width: 170px; }
.haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.panel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; display: flex; flex-direction: column; min-height: 0; flex: 1 1 0; }
.panel.zu { flex: 0 0 auto; }
.panel.haupt-ansicht { flex: 3 1 0; }
.panel-kopf { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; user-select: none; font-weight: 600;
  border-bottom: 1px solid var(--rand); }
.panel.zu .panel-kopf { border-bottom-color: transparent; }
.panel-kopf .pfeil { width: 1em; color: var(--text2); }
.panel-kopf .meta { color: var(--text2); font-weight: 400; font-size: 13px; }
.panel-kopf .luecke { flex: 1; }
.panel-koerper { padding: 8px 10px; overflow: auto; min-height: 0; flex: 1; }
.panel.zu .panel-koerper { display: none; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: var(--radius); cursor: pointer; }
.liste li:hover { background: var(--flaeche2); }
.liste li.aktiv { background: var(--aktiv); }
.liste li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste li .zahl { color: var(--text2); font-size: 12px; }
.neu-zeile { display: flex; gap: 4px; margin-top: 8px; } .neu-zeile input { flex: 1; min-width: 0; }

.baum { list-style: none; margin: 0; padding-left: 18px; } .baum.wurzel { padding-left: 0; }
.baum li { padding: 1px 0; } .baum .zeile { display: flex; align-items: center; gap: 4px; }
.baum .zeile a { cursor: pointer; } .baum .zeile a.aktiv { font-weight: 700; color: var(--akzent); }
.baum .zeile a:hover { text-decoration: underline; }
.struktur-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--rand); }
.nebenzeile { color: var(--text2); font-size: 13px; margin: 4px 0; }
.nebenzeile a { color: var(--akzent); cursor: pointer; }

/* Dokumentanzeige */
.abschnitt { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rand); }
.abschnitt:last-child { border-bottom: 0; }
.abschnitt-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abschnitt-kopf h2, .abschnitt-kopf h3, .abschnitt-kopf h4 { margin: 0; flex: 1; min-width: 8ch; }
.abschnitt-kopf h2 { font-size: 1.35rem; }
.abschnitt-kopf h3 { font-size: 1.15rem; } .abschnitt-kopf h4 { font-size: 1rem; }
.text { white-space: pre-wrap; overflow-wrap: anywhere; margin: .6rem 0; }
.gesperrt { color: var(--text2); background: var(--flaeche2); border-radius: var(--radius); padding: 8px 10px; margin: .6rem 0; }
.gesperrt.fehlerbox { color: var(--fehler); }
.zutaten { border-collapse: collapse; margin: .6rem 0; }
.zutaten td { padding: 2px 12px 2px 0; vertical-align: top; }
.zutaten td.menge { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zutaten-kopf { font-weight: 600; margin-top: .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; }
.chip { background: var(--flaeche2); border: 1px solid var(--rand); border-radius: 99px; padding: 0 4px 0 10px; font-size: 13px; display: inline-flex; align-items: center; }
.chip.ohne-x { padding-right: 10px; }
.chips input { width: 120px; padding: 0 8px; font-size: 13px; }
.leer-hinweis { color: var(--text2); padding: 1rem 0; }

/* Bearbeiten */
.formular { display: grid; gap: 10px; max-width: 760px; }
.formular label { display: grid; gap: 2px; font-size: 13px; color: var(--text2); }
.formular label.inline { display: flex; align-items: center; gap: 6px; }
.formular input[type=text], .formular textarea { width: 100%; color: var(--text); }
.formular textarea { min-height: 180px; resize: vertical; }
.zutat-zeile { display: grid; grid-template-columns: 90px 110px 1fr auto; gap: 4px; margin-bottom: 4px; }
.zutat-zeile input, .zutat-zeile select { min-width: 0; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Dialog und Meldungen */
#modal:empty { display: none; }
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 20; padding: 1rem; }
.dialog { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 1.2rem; max-width: 460px; width: 100%; }
.dialog p { margin: 0 0 1rem; white-space: pre-wrap; }
.dialog .knopfreihe { justify-content: flex-end; }
#toast { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 30; display: grid; gap: 6px; justify-items: center; pointer-events: none; }
#toast div { background: var(--text); color: var(--bg); padding: 6px 14px; border-radius: 99px; font-size: 14px; max-width: 90vw; }
#toast div.fehler { background: var(--fehler); color: #fff; }

@media (max-width: 820px) {
  .app { height: auto; min-height: 100vh; }
  .spalten { flex-direction: column; }
  .links, .links.alle-zu { width: auto; }
  .panel, .panel.haupt-ansicht { flex: none; }
  .panel-koerper { max-height: 60vh; }
  .menue input[type=search], .menue input[type=password] { width: 130px; }
}

.voll { width: 100%; }
.panel.haupt-ansicht .panel-kopf { cursor: default; }

/* Anhänge */
.anhaenge { margin-top: 8px; }
.bilder { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.bild { margin: 0; max-width: 220px; }
.bild img { display: block; max-width: 220px; max-height: 170px; border-radius: var(--radius); border: 1px solid var(--rand); object-fit: contain; background: var(--flaeche2); }
.bild figcaption { font-size: 12px; overflow-wrap: anywhere; }
.dateien { list-style: none; margin: 6px 0; padding: 0; }
.dateien a { color: var(--akzent); cursor: pointer; text-decoration: underline; }
.upload-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.klein-text { font-size: 13px; color: var(--text2); display: inline-flex; align-items: center; gap: 4px; }

.sortierung { width: 100%; margin-bottom: 6px; font-size: 13px; }
.meta-zeile { margin: 2px 0 4px; }

/* Druck: nur Dokumentinhalt, schwarz auf weiß */
@media print {
  :root, :root:not([data-theme="light"]) { --bg: #fff; --flaeche: #fff; --flaeche2: #f3f3f3; --text: #000; --text2: #444; --rand: #bbb; --akzent: #000; }
  html, body { height: auto; background: #fff; color: #000; font-size: 11pt; }
  .menue, .links, #p-struktur, #toast, #modal, .panel-kopf, .abschnitt-kopf button, .chips input, .chips .leer,
  .upload-leiste, .dateien .leer, figcaption .leer, .meta-zeile, #tagliste { display: none !important; }
  .app { display: block; height: auto; }
  .spalten, .haupt { display: block; padding: 0; }
  .panel, .panel.haupt-ansicht { display: block; border: 0; flex: none; }
  .panel-koerper { overflow: visible; padding: 0; max-height: none; }
  .abschnitt { break-inside: auto; border-bottom: 1px solid #bbb; }
  .abschnitt-kopf h2, .abschnitt-kopf h3, .abschnitt-kopf h4 { break-after: avoid; }
  .zutaten, .bild { break-inside: avoid; }
  .bild img { max-height: 260px; }
  .chip { border: 1px solid #999; background: none; }
  a { color: #000; text-decoration: none; }
}