:root { --rand: #d8d2c4; --akzent: #6b4f2a; --hell: #faf7f0; }
* { box-sizing: border-box; }
html { overflow-y: scroll; } /* Scrollbar immer sichtbar, sonst springt der Inhalt zwischen kurzen und langen Seiten */
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: #222; background: var(--hell); }
header { background: var(--akzent); }
nav { padding: .5rem 1.5rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
nav a { color: #fff; text-decoration: none; padding: .25rem 0; }
nav a.aktiv { border-bottom: 2px solid #fff; }
nav a.marke { font-weight: 600; margin-right: .5rem; }
nav form.inline { margin-left: auto; }
.menue { display: contents; } /* breit: die Einträge liegen direkt in der Leiste */
.menue-knopf { display: none; }
/* Schmal: eine Zeile mit Wortmarke und Menü-Knopf, die Einträge klappen als Liste aus */
@media (max-width: 960px) {
  nav { padding: .5rem 1rem; justify-content: space-between; }
  .menue-knopf { display: inline-block; padding: .25rem .75rem; background: transparent; border: 1px solid rgba(255,255,255,.6); color: #fff; }
  .menue-knopf::before { content: "\2630\00a0"; } /* ☰ */
  nav.offen .menue-knopf { background: rgba(255,255,255,.15); }
  .menue { display: none; flex: 1 0 100%; flex-direction: column; padding: .25rem 0 .5rem; }
  nav.offen .menue { display: flex; }
  .menue a, .menue form.inline { padding: .6rem 0; border-top: 1px solid rgba(255,255,255,.2); margin: 0; }
  .menue a.aktiv { border-bottom: 0; font-weight: 600; }
  .menue button.leise { text-decoration: none; }
}
main { padding: 1rem 1.5rem; } /* volle Breite, der Rand kommt aus dem Padding */
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; } h2 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
.box { padding: .75rem 1rem; margin-bottom: 1rem; border-radius: 6px; }
.meldung { background: #e3f1e0; } .fehler { background: #f7dcdc; } .sperre { background: #f7e7c4; } .warnung { background: #fbe9d0; }
.hinweis { background: #dfe9f7; } .hinweis button.leise { color: #555; margin-left: .5rem; } [hidden] { display: none !important; }
.kacheln { display: flex; gap: 1rem; } .kachel { flex: 1; padding: 1rem; background: #fff; border: 1px solid var(--rand); border-radius: 6px; text-decoration: none; color: inherit; text-align: center; }
.kachel strong { display: block; font-size: 1.6rem; }
/* Jede Eingabe erbt die Schrift der Seite (16 px): iOS Safari zoomt beim Antippen eines
   kleineren Felds hinein und lässt die Seite danach versetzt stehen. Textfelder nehmen die
   volle Breite. */
input, select, textarea, button { font: inherit; }
main textarea { width: 100%; }
.formular { display: grid; gap: .75rem; max-width: 600px; }
.formular label { display: grid; gap: .25rem; font-weight: 600; }
.formular input, .formular textarea, .formular select { font: inherit; padding: .5rem; border: 1px solid var(--rand); border-radius: 4px; width: 100%; }
.formular textarea { min-height: 8rem; }
/* Haken im Formular: Kästchen und Text in einer Zeile, das Kästchen in seiner eigenen Größe. */
.formular label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.formular input[type="checkbox"] { width: auto; }
/* Eintrag der Freigabe: ein Kasten je Eintrag, die Felder untereinander. min-width: 0, sonst
   schiebt ein langes Feld den Kasten über den Bildschirmrand. */
fieldset.eintrag { display: grid; gap: .75rem; min-width: 0; margin: 0 0 1rem; }
fieldset.eintrag legend { font-weight: 600; padding: 0 .25rem; }
fieldset.eintrag .neu, fieldset.eintrag .anhaengen { display: grid; gap: .75rem; }
fieldset.eintrag .zeile { align-items: end; }
fieldset.eintrag textarea { min-height: 4rem; }
/* Filter über den Listen (ToDos, Einträge) und einzeilige Formulare (Zusammenführen,
   Anhängen): Beschriftung und Feld nebeneinander, schmal umbrechend. */
.filter { margin-bottom: 1rem; }
.filter fieldset { margin: 0 0 .5rem; padding: .25rem .75rem .5rem; border: 1px solid var(--rand); border-radius: 6px; }
.filter label, form.zeile label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; max-width: 100%; }
.filter select, form.zeile select { padding: .35rem .5rem; border: 1px solid var(--rand); border-radius: 4px; background: #fff; max-width: 100%; }
/* Knopfzeile unter einem Formular: nebeneinander mit Abstand, schmal umbrechend. */
.knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
button { font: inherit; padding: .5rem 1rem; border: 0; border-radius: 4px; background: var(--akzent); color: #fff; cursor: pointer; }
/* Hover: Hauptknopf dunkler, zweitrangiger Knopf im helleren Braunton (Grau sah wie deaktiviert aus);
   leise, Icon- und Menü-Knöpfe haben keinen Hintergrund und bleiben ausgenommen. */
button:not(:disabled, .leise, .icon, .menue-knopf):hover { background: #563f21; }
button.leise { background: transparent; color: #fff; text-decoration: underline; padding: 0; }
button.zweitrangig { background: #9c8262; }
button.zweitrangig:not(:disabled):hover { background: #866d4f; }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Hauptknopf (Freigeben, Speichern, Anlegen) fett; Gefahr (Verwerfen, Aufgehen lassen) rot
   wie der laufende Aufnahmeknopf. */
button.haupt, a.knopf.haupt { font-weight: 600; }
button.gefahr { background: #a33a2a; }
button.gefahr:not(:disabled):hover { background: #87301f; }
/* Link, der wie ein Knopf aussieht (Neues ToDo); bei Sperre trägt er aria-disabled. */
a.knopf { display: inline-block; padding: .5rem 1rem; border-radius: 4px; background: var(--akzent); color: #fff; text-decoration: none; }
a.knopf:hover { background: #563f21; }
a.knopf[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.zeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.stand { background: #fff; padding: 1rem; border-left: 4px solid var(--akzent); white-space: pre-wrap; }
.karte { background: #fff; border: 1px solid var(--rand); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.leer { color: #777; } .klein { font-size: .9rem; color: #555; } pre { white-space: pre-wrap; }
@media (max-width: 600px) { .kacheln { flex-direction: column; } th:nth-child(3), td:nth-child(3) { display: none; } }
/* Tabellen mit class="karten" stapeln sich auf dem Smartphone: je Zeile ein Kasten, die
   Zelle mit class="titel" als Überschrift (egal, in welcher Spalte sie steht), die übrigen
   mit ihrem data-label davor; leere Zellen entfallen. */
@media (max-width: 600px) {
  /* Auch tbody/thead auf Block: sonst bleibt der unsichtbare Tabellenkörper ein
     Tabellenteil, der auf Inhaltsbreite schrumpft, und die Kästen füllen die Breite nicht. */
  table.karten, .karten tbody, .karten thead, .karten td { display: block; }
  .karten tr:first-child { display: none; } /* Kopfzeile */
  .karten tr { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rand); border-radius: 6px; padding: .5rem .75rem; margin-bottom: .75rem; }
  .karten td { display: flex; gap: .5rem; padding: .15rem 0; border: 0; }
  .karten td:empty { display: none; }
  .karten td::before { content: attr(data-label); flex: 0 0 5.5rem; color: #777; font-size: .9rem; }
  .karten td.titel { display: block; order: -1; padding-bottom: .4rem; margin-bottom: .25rem; border-bottom: 1px solid var(--rand); font-size: 1.05rem; }
  .karten td.titel::before { content: none; }
  .karten td.titel .klein { overflow-wrap: anywhere; }
}
audio { width: 100%; margin: .5rem 0 1rem; }
.aufnahme-zeit { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
#aufnahme-knopf.laeuft { background: #a33a2a; }
/* Pegelbox der Aufnahme: weiß still, dann die hellen Töne von Meldung, Warnung und Fehler */
.pegel { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 3rem; padding: 0 .75rem; border: 1px solid var(--rand); border-radius: 6px; background: #fff; font-size: .85rem; color: #555; }
.pegel[data-stufe="1"] { background: #e3f1e0; } .pegel[data-stufe="2"] { background: #fbe9d0; } .pegel[data-stufe="3"] { background: #f7dcdc; }
.kategorie { display: inline-block; padding: 0 .4rem; border-radius: 4px; background: #eee3cf; font-size: .85rem; }
.erledigt { color: #3a7d3a; font-size: .85rem; }
.gespraech { display: grid; gap: .75rem; margin-bottom: 1rem; overflow-y: auto; align-content: start; padding-right: .25rem; } /* Höhe setzt das Skript der Eingabeleiste */
.nachricht { padding: .75rem 1rem; border-radius: 6px; background: #fff; border: 1px solid var(--rand); max-width: 48rem; }
.nachricht.nutzer { background: #eee3cf; justify-self: end; }
.nachricht .text { white-space: pre-wrap; }
.werkzeug { color: #777; font-style: italic; }
.vorschlag form { margin-top: .5rem; }
/* Eingabeleiste des Chats: fest am unteren Rand, darin ein weißes Feld mit zwei Zeilen Text
   und darunter die Knöpfe Leeren (links) und Abschicken (rechts, rund im Akzent). */
.chat-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: .5rem 1.5rem .75rem; background: var(--hell); border-top: 1px solid var(--rand); }
.chat-eingabe { max-width: 48rem; margin: 0 auto; padding: .5rem .75rem; background: #fff; border: 1px solid var(--rand); border-radius: 8px; display: grid; gap: .25rem; }
.chat-eingabe:focus-within { border-color: var(--akzent); }
.chat-eingabe textarea { font: inherit; width: 100%; min-height: 3.2rem; padding: .25rem 0; border: 0; outline: none; resize: none; background: transparent; }
.chat-knoepfe { display: flex; justify-content: space-between; align-items: center; }
.chat-knoepfe .senden { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1; }
.chat-laeuft { display: flex; align-items: center; gap: .75rem; }
@media (max-width: 600px) { .chat-leiste { padding: .5rem 1rem; } }
/* Menügruppen (Verwaltung): breit ein Aufklappfeld unter dem Eintrag, schmal eine
   eingerückte Liste im ausgeklappten Menü; details/summary funktioniert ohne JavaScript. */
.gruppe { position: relative; }
.gruppe summary { color: #fff; cursor: pointer; padding: .25rem 0; list-style: none; }
.gruppe summary::-webkit-details-marker { display: none; }
.gruppe summary::after { content: " \25BE"; font-size: .8em; }
.gruppe summary.aktiv { border-bottom: 2px solid #fff; }
.gruppe-liste { position: absolute; top: 100%; left: -.75rem; z-index: 5; display: flex; flex-direction: column; gap: .25rem; min-width: 11rem; padding: .5rem .75rem; background: var(--akzent); border-radius: 0 0 6px 6px; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
@media (max-width: 960px) {
  .gruppe { border-top: 1px solid rgba(255,255,255,.2); }
  .gruppe summary { padding: .6rem 0; }
  .gruppe summary.aktiv { border-bottom: 0; font-weight: 600; }
  .gruppe-liste { position: static; padding: 0 0 .25rem 1rem; box-shadow: none; border-radius: 0; }
}
footer.stand { padding: .5rem 1.5rem 1rem; font-size: .8rem; color: #888; }
a.icon { text-decoration: none; font-size: 1.2rem; line-height: 1; }
button.icon { background: transparent; color: inherit; font-size: 1.2rem; padding: 0 .25rem; line-height: 1; }
a.icon:hover, button.icon:not(:disabled):hover { background: #eee3cf; border-radius: 4px; }
.karten form.inline { display: inline; margin: 0; }