/* Farbwelt: Markenfarben von lanforge.eu, damit der eingebettete Kalender
   nicht wie ein Fremdkoerper auf der Seite wirkt.
   Blau #3d5a99 traegt Flaechen und Termine, Kupfer #c17a4a markiert das,
   was der Besucher tun soll (freie Slots, Absenden). */
:root {
    --bg: #f4f6f8; --card: #ffffff; --border: #e2e8f0; --ink: #2d3748;
    --muted: #8b93a3; --accent: #3d5a99; --accent-ink: #fff;
    --accent-hover: #33497c;
    --action: #c17a4a; --action-hover: #a8663b;
    --today: #eef2fa; --today-border: #3d5a99; --hover: #f7fafc;
    --event-bg: #dde4f2; --event-bd: #3d5a99; --event-ink: #1e2b4d;
    --row: 42px;
}

/* --- Schriften ------------------------------------------------------
   Gleiche Schriften wie auf lanforge.eu, damit der eingebettete Kalender
   sich nahtlos einfuegt: Inter fuer Text, IBM Plex Sans fuer Ueberschriften.
   Selbst gehostet (kein Google Fonts), auf Latin beschraenkt, zusammen 72 KB.
   Der Systemschrift-Stapel bleibt als Rueckfall stehen. */
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/web/static/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/web/static/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/web/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

* { box-sizing: border-box; }
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0; padding: 24px; background: var(--bg); color: var(--ink);
}
.app { max-width: 1040px; margin: 0 auto; }
.app-header { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.app-header h1 { font-size: 20px; font-weight: 600; margin: 0; flex: 1; }
.app-header a { font-size: 14px; color: var(--accent); text-decoration: none; border: 1px solid var(--border); background: var(--card); padding: 7px 12px; border-radius: 6px; }
.app-header a:hover { background: var(--hover); }

/* Toolbar */
.cal-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-title { font-size: 17px; font-weight: 600; margin: 0; flex: 1; min-width: 180px; }
.cal-nav, .cal-views { display: flex; gap: 4px; }
.cal button { background: var(--card); color: var(--ink); border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px; font-size: 14px; cursor: pointer; line-height: 1; }
.cal button:hover { background: var(--hover); }
.cal-views button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Month grid */
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.weekday { background: var(--card); text-align: center; padding: 8px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.day-cell { background: var(--card); min-width: 0; min-height: 96px; padding: 5px 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.day-cell:hover { background: var(--hover); }
.day-cell.muted { color: var(--muted); background: #fbfcfd; }
.day-cell.today { background: var(--today); box-shadow: inset 0 0 0 2px var(--today-border); }
.dc-top { display: flex; align-items: center; gap: 5px; }
.day-num { font-size: 13px; font-weight: 600; }
.blk-dot { width: 7px; height: 7px; border-radius: 50%; background: repeating-linear-gradient(45deg,#cbd5e0,#cbd5e0 2px,#a0aec0 2px,#a0aec0 4px); }
.day-events { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.chip { font-size: 11px; line-height: 1.3; padding: 1px 5px; border-radius: 4px; background: var(--event-bg); color: var(--event-ink); border-left: 3px solid var(--event-bd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-time { font-weight: 600; }
.chip.allday { background: #c6f6d5; border-left-color: #38a169; color: #22543d; }
.chip.more { background: transparent; border-left: 0; color: var(--muted); padding-left: 2px; }

/* Time grid (week/day) */
.tgrid { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.t-headrow { display: grid; background: var(--card); border-bottom: 1px solid var(--border); }
.t-headrow-week { grid-template-columns: 56px repeat(7, 1fr); }
.t-headrow-day  { grid-template-columns: 56px 1fr; }
.t-corner { background: var(--card); }
.t-dayhead { padding: 7px 6px; border-left: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.t-dayhead:hover { background: var(--hover); }
.t-dayhead.today { background: var(--today); }
.t-dayhead.off { background: repeating-linear-gradient(135deg, #fff5f5, #fff5f5 9px, #fed7d7 9px, #fed7d7 12px); }
[data-theme="dark"] .t-dayhead.off { background: repeating-linear-gradient(135deg,#2a1c1f,#2a1c1f 9px,#3a2226 9px,#3a2226 12px); }
.dh-name { color: var(--muted); font-weight: 600; }
.dh-num { font-weight: 600; }
.t-dayhead .chip.allday { margin-top: 3px; }

.tcal { display: grid; grid-template-columns: 56px 1fr; }
.t-axis { display: flex; flex-direction: column; }
/* Die Stundenbeschriftung gehoert MITTIG auf ihre Trennlinie, nicht darunter.
   Stand sie oben in der Zelle, wirkten alle Termine rund sieben Pixel zu
   hoch, obwohl sie korrekt positioniert waren. */
.t-hour { height: var(--row); font-size: 11px; color: var(--muted); text-align: right; padding: 0 6px 0 0; border-top: 1px solid var(--border); }
.t-hour span { display: block; transform: translateY(-50%); }
/* Die erste Stunde hat keine Linie ueber sich, ihr Label bliebe sonst
   halb ausserhalb des Rasters. */
.t-hour:first-child span { transform: none; padding-top: 2px; }
.t-hour:first-child { border-top: 0; }
.t-cols { position: relative; display: grid; }
.t-cols-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.t-cols-day  { grid-template-columns: 1fr; }
.t-col { position: relative; min-width: 0; border-left: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row) - 1px), var(--border) calc(var(--row) - 1px), var(--border) var(--row)); }
.t-col:first-child { border-left: 0; }
.t-block { position: absolute; left: 0; width: 100%; border-radius: 4px; padding: 1px 5px; font-size: 11px; line-height: 1.25; overflow: hidden; }
.t-block.event { background: var(--event-bg); border-left: 3px solid var(--event-bd); color: var(--event-ink); z-index: 1; }
.t-block.block { background: repeating-linear-gradient(45deg, #edf2f7, #edf2f7 6px, #e2e8f0 6px, #e2e8f0 12px); color: #718096; z-index: 0; }
.ev-time { font-weight: 600; }

/* Settings */
.settings-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.settings-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 3px; }
.settings-form select, .settings-form input { border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; font-size: 14px; }
/* Der Hinzufügen-Button nutzt .btn-primary (siehe unten). */
.err { background: #fed7d7; color: #822727; border: 1px solid #fc8181; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
.wd-group { margin-bottom: 14px; }
.wd-group h3 { font-size: 14px; margin: 0 0 6px; }
.rule { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; margin-bottom: 4px; }
.rule .r-time { font-weight: 600; min-width: 110px; }
.rule .r-label { color: var(--muted); flex: 1; }
.rule button { margin-left: auto; background: transparent; border: 1px solid var(--border); color: #c53030; border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 13px; }
.rule button:hover { background: #fff5f5; }
.empty { color: var(--muted); font-size: 14px; }

/* === Header / Navigation (überarbeitet) ============================== */
.app-header { justify-content: space-between; flex-wrap: wrap; }
.app-header .brand { font-size: 20px; font-weight: 600; color: var(--ink); border: 0; background: transparent; padding: 0; }
.app-header .brand:hover { background: transparent; }
.topnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.langsw { display: inline-flex; gap: 4px; margin-left: 4px; }
.langsw a { font-size: 12px; padding: 5px 8px; min-width: 34px; text-align: center; }
.langsw a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* === Wochenende (5-Tage-Woche) ====================================== */
.day-cell.off {
    cursor: default;
    background: repeating-linear-gradient(135deg, #fff5f5, #fff5f5 9px, #fed7d7 9px, #fed7d7 12px);
    color: #c53030;
}
.day-cell.off .day-num { color: #c53030; opacity: .75; }
.t-col.col-off {
    background: repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(197,48,48,.10) 9px, rgba(197,48,48,.10) 12px);
}
.off-note { font-size: 11px; color: #c53030; margin-top: 2px; }

/* === Banner / Status ================================================ */
.banner { border-radius: 6px; padding: 9px 12px; margin-bottom: 12px; font-size: 14px; }
.banner.ok   { background: #c6f6d5; color: #22543d; border: 1px solid #68d391; }
.banner.err  { background: #fed7d7; color: #822727; border: 1px solid #fc8181; }
.banner.warn { background: #feebc8; color: #7b341e; border: 1px solid #f6ad55; }
.status { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.status.ok-text { color: #22543d; }

/* === Karten / Formulare (Login + Admin) ============================= */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.card h3 { margin: 0 0 12px; font-size: 15px; }
.admin-wrap { max-width: 640px; }
.admin-wrap > h2 { font-size: 20px; margin: 0 0 16px; }
.admin-wrap form { display: flex; flex-direction: column; gap: 12px; }
.admin-wrap form label, .auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.admin-wrap input, .admin-wrap select, .auth-card input, .auth-card select {
    border: 1px solid var(--border); border-radius: 6px; padding: 9px 10px; font-size: 14px; color: var(--ink); background: #fff;
}
.admin-wrap fieldset { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin: 0; }
.admin-wrap legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.admin-wrap .radio { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }
/* Handlungsschaltflaechen (buchen, absenden) tragen die Akzentfarbe Kupfer,
   Navigation und Zustaende bleiben im Markenblau. */
.btn-primary { background: var(--action); color: #fff; border: 0; border-radius: 6px; padding: 10px 16px; font-size: 14px; cursor: pointer; align-self: flex-start; }
.btn-primary:hover { background: var(--action-hover); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* === Login ========================================================== */
.auth-wrap { display: flex; justify-content: center; padding-top: 32px; }
.auth-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.auth-card h2 { margin: 0; font-size: 18px; }

.hint { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--fg-soft, #6b7280); }

/* Zugangsdaten je Provider */
.cred-item { border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 0.85rem 1rem; margin-top: 0.75rem; }
.cred-item.active { border-color: var(--accent, #4a5568); box-shadow: 0 0 0 1px var(--accent, #4a5568) inset; }
.cred-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.cred-head .badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--accent, #4a5568); color: #fff; border-radius: 999px; padding: 0.1rem 0.5rem; }
.cred-head .ok-text { color: #2f855a; font-size: 0.85rem; }
.cred-head .muted { color: var(--fg-soft, #6b7280); font-size: 0.85rem; }

/* === Theme-Umschalter ============================================== */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { transition: background-color .2s ease, color .2s ease; }

.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 32px; padding: 0;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.theme-toggle:hover { background: var(--hover); }
.theme-toggle .icon { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* === Dark Theme ===================================================== */
:root[data-theme="dark"] {
    --bg: #1e293b; --card: #273449; --border: #334155; --ink: #e2e8f0;
    --muted: #94a3b8; --accent: #43619f; --accent-ink: #ffffff;
    --today: #26324d; --today-border: #8b9cc2; --hover: #2e3c54;
    --event-bg: #2a3552; --event-bd: #8b9cc2; --event-ink: #d5deef;
    --accent-hover: #4f6bab; --action: #c98a5f; --action-hover: #d99b70;
}
/* Eingabefelder mit fest verdrahtetem Weiß überschreiben */
[data-theme="dark"] .admin-wrap input,
[data-theme="dark"] .admin-wrap select,
[data-theme="dark"] .auth-card input,
[data-theme="dark"] .auth-card select,
[data-theme="dark"] .settings-form input,
[data-theme="dark"] .settings-form select {
    background: #1b2636; color: var(--ink);
}
/* Flächen/Schraffuren, die im Light-Theme hell verdrahtet sind */
[data-theme="dark"] .day-cell.muted { background: #1b2533; }
[data-theme="dark"] .blk-dot { background: repeating-linear-gradient(45deg,#4a5568,#4a5568 2px,#718096 2px,#718096 4px); }
[data-theme="dark"] .t-block.block {
    background: repeating-linear-gradient(45deg,#2a323e,#2a323e 6px,#222933 6px,#222933 12px);
    color: #aab3c0;
}
[data-theme="dark"] .day-cell.off {
    background: repeating-linear-gradient(135deg,#2a1c1f,#2a1c1f 9px,#3a2226 9px,#3a2226 12px);
    color: #f6a5a5;
}
[data-theme="dark"] .day-cell.off .day-num { color: #f6a5a5; }
[data-theme="dark"] .off-note { color: #f6a5a5; }
[data-theme="dark"] .t-col.col-off {
    background: repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(246,165,165,.10) 9px, rgba(246,165,165,.10) 12px);
}
/* Erfolgs-Grün auf dunklem Grund aufhellen */
[data-theme="dark"] .status.ok-text,
[data-theme="dark"] .cred-head .ok-text { color: #68d391; }

/* Reservierungs-Aktionen */
.actions-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.actions-row form { display: inline; }
.block-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.block-add label { flex: 1 1 140px; }
.block-add button { flex: 0 0 auto; }
.btn-soft { background: var(--card); color: var(--ink); border: 1px solid var(--border); border-radius: 6px; padding: 10px 16px; font-size: 14px; cursor: pointer; }
.btn-soft:hover { background: var(--hover); }
.auth-card textarea, .admin-wrap textarea { border: 1px solid var(--border); border-radius: 6px; padding: 9px 10px; font-size: 14px; font-family: inherit; color: var(--ink); background: #fff; resize: vertical; }
[data-theme="dark"] .auth-card textarea, [data-theme="dark"] .admin-wrap textarea { background: #1b2636; }

/* Freie, buchbare 30-Minuten-Slots im Zeitraster (Woche/Tag). Nur tatsächlich
   freie Slots werden hier überhaupt gerendert (siehe calendar.html) — alles
   andere im Raster ist bewusst nicht klickbar, damit die Wochenansicht nicht
   suggeriert, jede Uhrzeit sei buchbar. */
.t-slot.free {
    position: absolute; left: 1px; right: 1px; width: auto; z-index: 0; cursor: pointer;
    background: #dcfce7; border: 1px solid #86efac; border-radius: 3px;
    color: #14532d; font-size: 10px; font-weight: 600; line-height: 1;
    padding: 2px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.t-slot.free:hover { background: #bbf7d0; border-color: #22c55e; }
[data-theme="dark"] .t-slot.free { background: #14532d; border-color: #22c55e; color: #bbf7d0; }
[data-theme="dark"] .t-slot.free:hover { background: #166534; border-color: #4ade80; }

/* Reservierungs-Modal */
.modal { position: fixed; inset: 0; z-index: 1000; }
.modal[hidden] { display: none; }
.modal:not([hidden]) { display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.72); }
.reserve-host { position: relative; z-index: 1; width: 100%; max-width: 460px; }
.reserve-card { position: relative; }
.modal-close { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 6px; }
.modal-close:hover { background: var(--hover); color: var(--ink); }
body.modal-open { overflow: hidden; }

/* Monats-/Tagesansicht mit Slot-Spalte (Calendly-Stil) */
.cal-with-slots { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: stretch; }
@media (max-width: 820px) { .cal-with-slots { grid-template-columns: 1fr; } }
.cal-main { min-width: 0; }
.day-cell.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.slots-panel { position: relative; border-left: 1px solid var(--border); }
.slots-inner { position: absolute; inset: 0; padding-left: 16px; display: flex; flex-direction: column; }
@media (max-width: 820px) {
  .slots-panel { border-left: 0; border-top: 1px solid var(--border); }
  .slots-inner { position: static; padding-left: 0; padding-top: 16px; }
}
.slots-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.slots-day { font-weight: 600; font-size: 15px; }
.seg-group { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg { border: 0; background: var(--card); color: var(--muted); padding: 5px 10px; font-size: 12px; cursor: pointer; }
.seg + .seg { border-left: 1px solid var(--border); }
.seg.active { background: var(--accent); color: var(--accent-ink); }
.slots-today { width: 100%; margin-bottom: 12px; }
.slots { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-height: 0; overflow: auto; }
.slot { width: 100%; text-align: center; padding: 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); font-weight: 600; cursor: pointer; }
.slot:hover { border-color: var(--action); background: var(--hover); color: var(--action); }
.slot:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.slots-empty { color: var(--muted); }
.slots .t12 { display: none; }
.slots.fmt12 .t24 { display: none; }
.slots.fmt12 .t12 { display: inline; }
/* WICHTIG: diese Regel muss NACH der Basis-.slots-Regel oben stehen — bei
   gleicher Spezifität gewinnt sonst die spätere (die Basisregel), egal ob
   ihre eigene @media-Bedingung zutrifft. Stand die mobile Regel vor der
   Basisregel, wurde .slots auf dem Handy nie auf ihre Höhe begrenzt: die
   Liste bekam height:0 (flex-basis 0 in einem auto-hohen Flex-Container ohne
   verfügbaren Platz) und freie Termine waren unsichtbar. */
@media (max-width: 820px) {
  .slots { flex: none; max-height: 70vh; }
}

/* Verfügbarkeits-Editor (Admin) */
.avail-table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; }
.avail-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 8px; }
.avail-table td { padding: 5px 8px; border-top: 1px solid var(--border); }
.avail-table .avail-day { font-weight: 600; }
.avail-table input[type="time"] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--ink); }
[data-theme="dark"] .avail-table input[type="time"] { background: #1b2636; }

/* Embed-Modus (eingebettet per <iframe>/<div>): keine Kopfzeile, kompakt.
   WICHTIG: echte Hintergrundfarbe statt transparent — sonst rendert das iframe
   bei color-scheme:dark einen fast schwarzen Standard-Hintergrund. var(--bg)
   ist im Dark das gleiche Navy wie die Seite, im Light das helle Grau. */
body.embed { background: var(--bg); }
body.embed .app { max-width: none; margin: 0; padding: 12px; }

/* Dezenter Admin-Einstieg im Embed-Modus (unten rechts) */
.embed-admin {
  position: fixed; right: 10px; bottom: 10px; z-index: 50;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1; letter-spacing: .5px;
  padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--muted); text-decoration: none;
  opacity: .4; transition: opacity .15s ease, color .15s ease;
}
.embed-admin:hover { opacity: 1; color: var(--ink); }

/* "Nur eine Nachricht schreiben"-Einstieg unter dem Kalender */
.msg-cta { text-align: center; margin: 14px 0 4px; }
.msg-link {
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 14px; padding: 6px 8px;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .15s ease;
}
.msg-link:hover { color: var(--ink); }

/* Inline-Nachrichtenformular unter dem Kalender (Admin-Option) */
.msg-sep {
  text-align: center; margin: 56px 0 48px; color: var(--muted);
  font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.msg-panel { max-width: 820px; margin: 0 auto 12px; }
.msg-form-inline {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--card); display: block;
}
.msg-form-inline .msg-head {
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 20px 24px; text-align: center;
}
.msg-form-inline .msg-head h2 { margin: 0; font-size: 18px; color: var(--ink); }
.msg-form-inline .msg-head .status { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.msg-form-inline .msg-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.msg-form-inline .msg-row { display: flex; gap: 16px; flex-wrap: wrap; }
.msg-form-inline .msg-row > label { flex: 1; min-width: 200px; }
.msg-form-inline label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.msg-form-inline input, .msg-form-inline textarea {
  border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px;
  font-size: 14px; font-family: inherit; color: var(--ink); background: #fff; resize: vertical;
}
[data-theme="dark"] .msg-form-inline input,
[data-theme="dark"] .msg-form-inline textarea { background: #1b2636; }
.msg-form-inline .btn-primary { width: 100%; align-self: stretch; text-align: center; padding: 13px; font-size: 15px; }

/* Admin: Checkbox-Zeile linksbündig, größere Box */
.admin-wrap .check {
  flex-direction: row; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink); font-weight: 500;
}
.admin-wrap .check input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: 0; }

/* --- Farbige Deko-Termine (c1..c6) ------------------------------------ */
/* Hell: sanfte Flächen mit kräftigem linken Rand. */
.chip.c1, .t-block.c1 { background: #e0e7ff; color: #312e81; border-left: 3px solid #6366f1; }
.chip.c2, .t-block.c2 { background: #dcfce7; color: #14532d; border-left: 3px solid #22c55e; }
.chip.c3, .t-block.c3 { background: #fef3c7; color: #78350f; border-left: 3px solid #f59e0b; }
.chip.c4, .t-block.c4 { background: #ffe4e6; color: #881337; border-left: 3px solid #f43f5e; }
.chip.c5, .t-block.c5 { background: #ccfbf1; color: #134e4a; border-left: 3px solid #14b8a6; }
.chip.c6, .t-block.c6 { background: #ede9fe; color: #4c1d95; border-left: 3px solid #8b5cf6; }

/* Dunkel: gedämpfte Flächen, helle Schrift. */
[data-theme="dark"] .chip.c1, [data-theme="dark"] .t-block.c1 { background: #312e81; color: #c7d2fe; border-left-color: #818cf8; }
[data-theme="dark"] .chip.c2, [data-theme="dark"] .t-block.c2 { background: #14532d; color: #bbf7d0; border-left-color: #4ade80; }
[data-theme="dark"] .chip.c3, [data-theme="dark"] .t-block.c3 { background: #78350f; color: #fde68a; border-left-color: #fbbf24; }
[data-theme="dark"] .chip.c4, [data-theme="dark"] .t-block.c4 { background: #881337; color: #fecdd3; border-left-color: #fb7185; }
[data-theme="dark"] .chip.c5, [data-theme="dark"] .t-block.c5 { background: #134e4a; color: #99f6e4; border-left-color: #2dd4bf; }
[data-theme="dark"] .chip.c6, [data-theme="dark"] .t-block.c6 { background: #4c1d95; color: #ddd6fe; border-left-color: #a78bfa; }

/* --- Angefragte, noch unbestätigte Termine ---------------------------- */
/* Bewusst als "vorläufig" lesbar: schraffiert, gestrichelter Rand. */
.chip.req, .t-block.req {
    background: repeating-linear-gradient(45deg, #fff7ed, #fff7ed 6px, #ffedd5 6px, #ffedd5 12px);
    color: #7c2d12;
    border-left: 3px dashed #c17a4a;
}
[data-theme="dark"] .chip.req, [data-theme="dark"] .t-block.req {
    background: repeating-linear-gradient(45deg, #431407, #431407 6px, #572008 6px, #572008 12px);
    color: #fed7aa;
    border-left-color: #fb923c;
}

/* Ueberschriften im Kalender und in den Formularen tragen IBM Plex Sans. */
h1, h2, h3, h4,
.cal-title, .slots-head, .card-header h2 {
    font-family: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
}