: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; }
.kachel-datum { display: block; margin: .25rem 0 .75rem; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #777; }
.kachel-stand { display: block; text-align: left; font-size: .9rem; color: #555; white-space: pre-wrap; }
.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; }
button { font: inherit; padding: .5rem 1rem; border: 0; border-radius: 4px; background: var(--akzent); color: #fff; cursor: pointer; }
button.leise { background: transparent; color: #fff; text-decoration: underline; padding: 0; }
button.zweitrangig { background: #888; }
button:disabled { opacity: .5; cursor: not-allowed; }
.zeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pdf label { display: inline-flex; gap: .25rem; align-items: center; } .pdf input { font: inherit; padding: .35rem .5rem; border: 1px solid var(--rand); border-radius: 4px; width: auto; }
.verlauf { background: #fff; padding: 1rem; border: 1px solid var(--rand); border-radius: 6px; }
.verlauf h3 { margin-top: 1.5rem; } .verlauf blockquote { margin: .5rem 0; padding-left: 1rem; border-left: 3px solid var(--rand); color: #555; }
.verlauf h3 + p { margin-top: -.5rem; font-size: .9rem; }
.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" werden auf dem Smartphone zu Karten: eine je Zeile, die
   erste Zelle (class="titel") als Überschrift, die übrigen mit ihrem data-label davor. */
@media (max-width: 600px) {
  table.karten, .karten tr, .karten td { display: block; }
  .karten tr:first-child { display: none; } /* Kopfzeile */
  .karten tr { 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::before { content: attr(data-label); flex: 0 0 5.5rem; color: #777; font-size: .9rem; }
  .karten td.titel { display: block; 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; }
.einheit { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; padding: .75rem; margin-bottom: .5rem; background: #fff; border: 1px solid var(--rand); border-radius: 6px; }
.einheit .voll { grid-column: 1 / -1; }
.aufnahme-zeit { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
#aufnahme-knopf.laeuft { background: #a33a2a; }
.sprung { font-size: .9rem; white-space: nowrap; }
.kategorie { display: inline-block; padding: 0 .4rem; border-radius: 4px; background: #eee3cf; font-size: .85rem; }
.erledigt { color: #3a7d3a; font-size: .85rem; }
.woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.tag { background: #fff; border: 1px solid var(--rand); border-radius: 6px; padding: .5rem; min-height: 6rem; }
.tag h3 { margin: 0 0 .5rem; font-size: 1rem; } .termin { margin-bottom: .5rem; }
.tag form.inline { display: inline; margin: 0; } .tag button.leise { color: #777; font-size: .85rem; }
@media (max-width:900px) { .woche { grid-template-columns: 1fr; } }
.gespraech { display: grid; gap: .75rem; margin-bottom: 1rem; }
.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; }
.landkarte { height: 70vh; border: 1px solid var(--rand); border-radius: 6px; background: #eee; }
@media (max-width: 600px) { .landkarte { height: 60vh; } }