/* =====================================================================
   Membrix Web – Stil (Mint-Design wie im Desktop-Membrix)
   ===================================================================== */
:root {
  --mint: #34D399;
  --mint-dark: #10B981;
  --mint-darker: #047857;
  --mint-light: #D1FAE5;
  --mint-lighter: #ECFDF5;

  --weiss: #FFFFFF;
  --g25: #FCFCFD; --g50: #F9FAFB; --g100: #F3F4F6; --g150: #EBEDF0; --g200: #E5E7EB;
  --g300: #D1D5DB; --g400: #9CA3AF; --g500: #6B7280; --g600: #4B5563; --g700: #374151;
  --g800: #1F2937; --g900: #111827;

  --ok-bg: #D1FAE5; --ok-fg: #065F46;
  --warn-bg: #FEF3C7; --warn-fg: #92400E;
  --alarm-bg: #FEE2E2; --alarm-fg: #991B1B;
  --info-bg: #DBEAFE; --info-fg: #1E40AF;
  --lila-bg: #EDE9FE; --lila-fg: #5B21B6;

  --seite-bg: var(--g50);
  --karte-bg: var(--weiss);
  --linie: var(--g200);
  --text: var(--g900);
  --text2: var(--g700);
  --muted: var(--g500);

  --sb-breite: 244px;
  --radius: 10px;
  --radius-klein: 8px;
  --schatten: 0 1px 2px rgba(17, 24, 39, .05);
  --schatten-dialog: 0 20px 50px rgba(17, 24, 39, .25);
  --schrift: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--schrift); font-size: 15px; line-height: 1.45;
  color: var(--text); background: var(--seite-bg);
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
h1 { font-size: 30px; line-height: 1.15; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0; }
a { color: var(--mint-darker); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.versteckt { display: none !important; }
.muted { color: var(--muted); }
.klein { font-size: 13px; }
.rechts { text-align: right; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* ---------- Grundgerüst ---------- */
#app { min-height: 100vh; }
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sb-breite); flex: none; background: var(--weiss); border-right: 1px solid var(--linie);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.sb-kopf { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; }
.sb-kopf .logo-kreis { width: 40px; height: 40px; border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; flex: none; }
.sb-kopf .logo-kreis svg { width: 26px; height: 26px; }
.sb-kopf .titel { font-weight: 800; font-size: 17px; line-height: 1.1; }
.sb-kopf .unter { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.sb-linie { height: 1px; background: var(--g100); margin: 0 20px; }
.sb-mitte { flex: 1; overflow-y: auto; padding: 8px 12px; }
.sb-abschnitt { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); padding: 12px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 9px 12px; border-radius: var(--radius-klein); color: var(--text2); font-size: 15px; position: relative; margin: 2px 0;
}
.nav-item:hover { background: var(--g50); color: var(--text); }
.nav-item.aktiv { background: var(--mint-lighter); color: var(--mint-darker); font-weight: 700; }
.nav-item.aktiv::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--mint-dark); }
.nav-item svg.ic { color: inherit; opacity: .85; }
.nav-item .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .badge { font-size: 12px; font-weight: 700; background: var(--g100); color: var(--text2); border-radius: 999px; padding: 1px 8px; min-width: 24px; text-align: center; }
.nav-item.aktiv .badge { background: var(--mint); color: var(--weiss); }
.nav-item .bald { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--g400); border: 1px solid var(--g200); border-radius: 6px; padding: 1px 5px; }
.nav-item.ki-icon .ki { font-size: 11px; font-weight: 800; width: 18px; text-align: center; letter-spacing: -.02em; }

.sb-fuss { padding: 12px 16px 14px; }
.benutzer-karte { background: var(--g50); border-radius: var(--radius); padding: 12px 14px; }
.benutzer-karte .zeile { display: flex; align-items: center; gap: 10px; }
.benutzer-karte .name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.benutzer-karte .rolle { font-size: 12px; color: var(--muted); }
.benutzer-karte .knopf { width: 100%; margin-top: 10px; }
.status-zeile { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--mint-darker); }
.status-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-dark); }

.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mint-light); color: var(--mint-darker); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; letter-spacing: .02em; }
.avatar.gross { width: 44px; height: 44px; font-size: 15px; }
.avatar.lila { background: var(--lila-bg); color: var(--lila-fg); }
.avatar.grau { background: var(--g100); color: var(--g600); }

.haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
.inhalt { padding: 28px 40px 48px; max-width: 1240px; width: 100%; margin: 0 auto; }

.seiten-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.seiten-kopf .untertitel { color: var(--muted); margin-top: 4px; }
.seiten-kopf .aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Karten & Raster ---------- */
.karte { background: var(--karte-bg); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.karte-innen { padding: 20px 22px; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--g100); }
.karte-kopf h3 { font-size: 16px; }
.raster { display: grid; gap: 16px; }
.raster-kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.kpi { padding: 20px 22px; }
.kpi .symbol { width: 38px; height: 38px; border-radius: 50%; background: var(--mint-light); color: var(--mint-darker); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.kpi .symbol.rot { background: var(--alarm-bg); color: var(--alarm-fg); }
.kpi .symbol.blau { background: var(--info-bg); color: var(--info-fg); }
.kpi .symbol.gelb { background: var(--warn-bg); color: var(--warn-fg); }
.kpi .bez { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi .wert { font-size: 30px; font-weight: 800; margin-top: 4px; letter-spacing: -.02em; }
.kpi.hervor { background: var(--mint-lighter); border-color: var(--mint); }
.kpi.hervor .wert { color: var(--mint-darker); }

.hinweis { border-radius: var(--radius-klein); padding: 12px 16px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.hinweis svg.ic { margin-top: 2px; }
.hinweis.ok { background: var(--ok-bg); color: var(--ok-fg); }
.hinweis.warn { background: var(--warn-bg); color: var(--warn-fg); }
.hinweis.alarm { background: var(--alarm-bg); color: var(--alarm-fg); }
.hinweis.info { background: var(--info-bg); color: var(--info-fg); }
.hinweis.grau { background: var(--g100); color: var(--text2); }

.leer { text-align: center; color: var(--muted); padding: 40px 20px; }
.leer svg.ic { width: 40px; height: 40px; color: var(--g300); margin-bottom: 10px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-klein);
  padding: 9px 14px; font-weight: 600; font-size: 14px; border: 1px solid var(--g200); background: var(--weiss); color: var(--text);
  transition: background .12s, border-color .12s, transform .05s; white-space: nowrap; text-decoration: none; line-height: 1.2;
}
.knopf:hover { background: var(--g50); border-color: var(--g300); text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .55; cursor: default; transform: none; }
.knopf.primaer { background: var(--mint-dark); border-color: var(--mint-dark); color: var(--weiss); }
.knopf.primaer:hover { background: var(--mint-darker); border-color: var(--mint-darker); }
.knopf.gefahr { color: var(--alarm-fg); }
.knopf.gefahr:hover { background: var(--alarm-bg); border-color: #FCA5A5; }
.knopf.leise { border-color: transparent; background: transparent; color: var(--text2); }
.knopf.leise:hover { background: var(--g100); }
.knopf.klein { padding: 6px 10px; font-size: 13px; }
.knopf.breit { width: 100%; }
.knopf.rund { border-radius: 999px; width: 40px; height: 40px; padding: 0; }
.knopf svg.ic { width: 16px; height: 16px; }
.knopf.laedt { position: relative; color: transparent !important; }
.knopf.laedt::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.6); border-top-color: transparent; border-radius: 50%; animation: dreh .7s linear infinite; }
.knopf.laedt:not(.primaer)::after { border-color: var(--g400); border-top-color: transparent; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---------- Pillen & Tags ---------- */
.pillen { display: flex; gap: 6px; flex-wrap: wrap; }
.pille { border: 1px solid var(--g200); background: var(--weiss); color: var(--text2); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.pille:hover { background: var(--g50); }
.pille.aktiv { background: var(--mint); border-color: var(--mint); color: var(--weiss); }
.tag { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; line-height: 1.5; white-space: nowrap; }
.tag.mint { background: var(--mint-light); color: var(--mint-darker); }
.tag.lila { background: var(--lila-bg); color: var(--lila-fg); }
.tag.gelb { background: var(--warn-bg); color: var(--warn-fg); }
.tag.rot { background: var(--alarm-bg); color: var(--alarm-fg); }
.tag.blau { background: var(--info-bg); color: var(--info-fg); }
.tag.grau { background: var(--g100); color: var(--text2); }

/* ---------- Formulare ---------- */
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.feld label { font-size: 13px; font-weight: 600; color: var(--text2); }
.feld .hilfe { font-size: 12px; color: var(--muted); }
.eingabe, select.eingabe, textarea.eingabe {
  width: 100%; border: 1px solid var(--g300); border-radius: var(--radius-klein); padding: 10px 12px; background: var(--weiss);
  font-size: 15px; outline: none; transition: border-color .12s, box-shadow .12s; min-height: 42px;
}
.eingabe:focus { border-color: var(--mint-dark); box-shadow: 0 0 0 3px var(--mint-light); }
.eingabe.fehler { border-color: #EF4444; }
select.eingabe { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.pw-feld { position: relative; }
.pw-feld .eingabe { padding-right: 44px; }
.pw-feld .auge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); padding: 6px; border-radius: 6px; display: flex; }
.pw-feld .auge:hover { background: var(--g100); color: var(--text); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--mint-dark); }
.formular-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.suche { position: relative; }
.suche svg.ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--g400); }
.suche .eingabe { padding-left: 38px; }

/* ---------- Tabellen ---------- */
.tabelle-wrap { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 10px 14px; background: var(--g50); border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: 11px 14px; border-bottom: 1px solid var(--g100); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover td { background: var(--g25); }
.tabelle td.aktionen { text-align: right; white-space: nowrap; }
.tabelle td.aktionen .knopf { margin-left: 6px; }

/* ---------- Listen (Benutzer) ---------- */
.liste-karten { display: flex; flex-direction: column; gap: 10px; }
.eintrag { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.eintrag .haupttext { font-weight: 700; font-size: 15px; }
.eintrag .nebentext { font-size: 13px; color: var(--muted); }
.eintrag .mitte { flex: 1; min-width: 0; }
.eintrag .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.eintrag .aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.eintrag.inaktiv { opacity: .6; }

/* ---------- Reiter ---------- */
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 20px; overflow-x: auto; }
.reiter button { border: 0; background: transparent; padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.reiter button:hover { color: var(--text); }
.reiter button.aktiv { color: var(--mint-darker); border-bottom-color: var(--mint-dark); }

/* ---------- Dialoge ---------- */
.dialog-hintergrund { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; animation: einblenden .15s ease-out; }
.dialog { background: var(--weiss); border-radius: 14px; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: var(--schatten-dialog); animation: hoch .18s ease-out; }
.dialog.schmal { max-width: 420px; }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.dialog-kopf h2 { font-size: 19px; }
.dialog-inhalt { padding: 16px 22px 6px; }
.dialog-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 20px; flex-wrap: wrap; }
.dialog-fuss .links { margin-right: auto; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes hoch { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Meldungen (Toast) ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(380px, calc(100vw - 40px)); }
.toast { background: var(--g900); color: var(--weiss); padding: 12px 16px; border-radius: var(--radius-klein); font-size: 14px; box-shadow: var(--schatten-dialog); display: flex; gap: 10px; align-items: flex-start; animation: hoch .18s ease-out; }
.toast.ok { background: var(--mint-darker); }
.toast.fehler { background: #991B1B; }
.toast svg.ic { margin-top: 1px; }

/* ---------- Anmeldung / Einrichtung ---------- */
.auth-seite { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: linear-gradient(180deg, var(--mint-lighter) 0%, var(--g50) 55%); }
.auth-karte { width: 100%; max-width: 420px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: 32px 30px 26px; box-shadow: 0 10px 40px rgba(4, 120, 87, .10); }
.auth-karte.breit { max-width: 520px; }
.auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.auth-logo .logo-kreis { width: 52px; height: 52px; border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; }
.auth-logo .logo-kreis svg { width: 34px; height: 34px; }
.auth-logo .titel { font-size: 24px; font-weight: 800; line-height: 1.1; }
.auth-logo .unter { color: var(--muted); font-size: 13px; }
.auth-fuss { text-align: center; color: var(--muted); font-size: 12px; margin-top: 20px; }
.fehlertext { color: var(--alarm-fg); background: var(--alarm-bg); padding: 10px 12px; border-radius: var(--radius-klein); font-size: 14px; margin-bottom: 14px; }

/* ---------- Ladeanzeige ---------- */
.laden { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--muted); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--mint-light); border-top-color: var(--mint-dark); border-radius: 50%; animation: dreh .8s linear infinite; }
.lok-laden { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 20px; color: var(--muted); }
.lok-laden .schiene { width: 220px; height: 4px; background: var(--g200); border-radius: 2px; position: relative; overflow: hidden; }
.lok-laden .schiene::after { content: ""; position: absolute; left: -40%; width: 40%; height: 100%; background: var(--mint-dark); border-radius: 2px; animation: fahrt 1.2s ease-in-out infinite; }
@keyframes fahrt { to { left: 100%; } }

/* ---------- Prüfliste ---------- */
.pruefliste { display: flex; flex-direction: column; }
.pruefung { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--g100); }
.pruefung:last-child { border-bottom: 0; }
.pruefung .punkt { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.pruefung .punkt.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pruefung .punkt.nein { background: var(--alarm-bg); color: var(--alarm-fg); }
.pruefung .punkt svg.ic { width: 14px; height: 14px; stroke-width: 2.4; }
.pruefung .text { flex: 1; }
.pruefung .hinweis-klein { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-word; }

/* ---------- Bald-Seite ---------- */
.bald-seite { text-align: center; padding: 60px 20px; }
.bald-seite .gross-symbol { width: 72px; height: 72px; border-radius: 50%; background: var(--mint-light); color: var(--mint-darker); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.bald-seite .gross-symbol svg.ic { width: 32px; height: 32px; }
.bald-seite p { color: var(--muted); max-width: 440px; margin: 8px auto 0; }

/* ---------- Handy & Tablet ---------- */
@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; transform: translateX(-105%); transition: transform .2s ease-out; z-index: 40; width: min(300px, 86vw); box-shadow: none; }
  .sidebar.offen { transform: none; box-shadow: 0 0 60px rgba(17, 24, 39, .3); }
  .sb-schleier { position: fixed; inset: 0; background: rgba(17, 24, 39, .4); z-index: 39; animation: einblenden .15s ease-out; }
  .topbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--weiss); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 30; }
  .topbar .logo-kreis { width: 32px; height: 32px; border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; }
  .topbar .logo-kreis svg { width: 21px; height: 21px; }
  .topbar .titel { font-weight: 800; font-size: 16px; flex: 1; }
  .topbar .titel .unter { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
  .inhalt { padding: 18px 16px 40px; }
  h1 { font-size: 24px; }
  .seiten-kopf { margin-bottom: 16px; }
  .seiten-kopf .aktionen { width: 100%; }
  .seiten-kopf .aktionen .knopf { flex: 1; }
  .karte-innen, .karte-kopf { padding-left: 16px; padding-right: 16px; }
  .raster-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; }
  .kpi .symbol { width: 32px; height: 32px; margin-bottom: 12px; }
  .kpi .bez { font-size: 10px; }
  .kpi .wert { font-size: 24px; }
  .formular-zeile { grid-template-columns: 1fr; }
  .eintrag { flex-wrap: wrap; }
  .eintrag .aktionen { width: 100%; justify-content: flex-start; }
  .eintrag .aktionen .knopf { flex: 1; }
  .toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .dialog-hintergrund { align-items: flex-end; padding: 0; }
  .dialog { border-radius: 16px 16px 0 0; max-height: 92vh; }
  .auth-karte { padding: 26px 22px 20px; }
}
@media (min-width: 861px) {
  .sb-schleier { display: none; }
}
@media print {
  .sidebar, .topbar, .toasts { display: none !important; }
  .inhalt { padding: 0; max-width: none; }
  .karte { box-shadow: none; }
}

/* ---------- KI-Chat ---------- */
.chat { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 320px; max-height: 60vh; }
.bubble-zeile { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.bubble-zeile.ich { align-self: flex-end; flex-direction: row-reverse; }
.bubble-zeile.roland { align-self: flex-start; }
.bubble { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: normal; }
.bubble.ich { background: var(--mint-dark); color: #fff; border-bottom-right-radius: 4px; }
.bubble.roland { background: var(--g100); color: var(--text); border-bottom-left-radius: 4px; }
.bubble-zeile.denkt .bubble { color: var(--muted); letter-spacing: 2px; }
.chat-eingabe { border-top: 1px solid var(--linie); padding: 12px 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chat-form { display: flex; gap: 8px; }
.chat-form .eingabe { flex: 1; }
.chat-form .knopf { flex: none; width: 44px; padding: 0; }

/* ===== E-Mail-Center ===== */
.mail-huelle { display: flex; gap: 16px; align-items: flex-start; }
.mail-ordner { flex: none; width: 210px; display: flex; flex-direction: column; gap: 2px; }
.mail-ordner-knopf { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: transparent; color: var(--text2); font-size: 14.5px; font-weight: 600; border-radius: var(--radius-klein); cursor: pointer; text-align: left; }
.mail-ordner-knopf:hover { background: var(--g50); color: var(--text); }
.mail-ordner-knopf.aktiv { background: var(--mint-lighter); color: var(--mint-darker); font-weight: 700; }
.mail-ordner-knopf .ic { width: 18px; height: 18px; flex: none; }
.mail-liste { flex: 1; min-width: 0; background: var(--karte-bg); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.mail-liste-kopf { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--g100); font-weight: 700; }
.mail-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--g100); cursor: pointer; }
.mail-zeile:last-child { border-bottom: none; }
.mail-zeile:hover { background: var(--g50); }
.mail-punkt { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: none; }
.mail-zeile.ungelesen .mail-punkt { background: var(--mint-dark); }
.mail-zeile.ungelesen .mail-von, .mail-zeile.ungelesen .mail-betreff { font-weight: 700; color: var(--text); }
.mail-mitte { flex: 1; min-width: 0; }
.mail-von { font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-betreff { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mail-datum { font-size: 12.5px; color: var(--muted); flex: none; white-space: nowrap; }
.mail-meta { background: var(--g50); border-radius: var(--radius-klein); padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.mail-meta-zeile { display: flex; gap: 8px; padding: 2px 0; }
.mail-meta-label { color: var(--muted); width: 54px; flex: none; font-weight: 600; }
.mail-anhaenge { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.anhang-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--g200); border-radius: 999px; background: var(--weiss); font-size: 13px; cursor: pointer; color: var(--text); }
.anhang-chip:hover { border-color: var(--mint); background: var(--mint-lighter); }
.anhang-chip .ic { width: 15px; height: 15px; }
.mail-koerper { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.mail-von-fest { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--g50); border-radius: var(--radius-klein); color: var(--text2); font-size: 14px; }
.mail-von-fest .ic { width: 16px; height: 16px; color: var(--muted); }
@media (max-width: 720px) {
  .mail-huelle { flex-direction: column; }
  .mail-ordner { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .mail-ordner-knopf { width: auto; padding: 7px 12px; border: 1px solid var(--g200); }
  .mail-ordner-knopf.aktiv { border-color: var(--mint); }
}

/* Zwei Felder nebeneinander (Formulare) */
.feld-reihe { display: flex; gap: 14px; }
.feld-reihe > .feld { flex: 1; min-width: 0; }
@media (max-width: 560px) { .feld-reihe { flex-direction: column; gap: 0; } }

/* ===== Benutzer-Detailseite (Backoffice) ===== */
.detail-kopf { margin-bottom: 10px; }
.detail-titel { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.detail-titel h2 { margin: 0; }
.detail-aktionen { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.aktion-link { background: none; border: none; color: var(--mint-darker); font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; }
.aktion-link:hover { color: var(--mint-dark); text-decoration: underline; }
.aktion-link .ic { width: 18px; height: 18px; }
.detail-fuss { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
@media (max-width: 560px) {
  .detail-fuss { flex-wrap: wrap; }
  .detail-fuss .knopf { flex: 1; justify-content: center; }
}

/* ===== Kalender (Termine) ===== */
.kal-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kal-nav { display: flex; align-items: center; gap: 8px; }
.kal-titel { font-size: 17px; font-weight: 700; color: var(--text); min-width: 150px; text-align: center; }
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kal-wtag { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; text-transform: uppercase; letter-spacing: .03em; }
.kal-zelle { min-height: 94px; border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 4px; background: var(--g25); display: flex; flex-direction: column; gap: 3px; }
.kal-zelle.leer { background: transparent; border: 0; }
.kal-zelle.heute { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); background: var(--mint-lighter); }
.kal-zelle:not(.leer):hover { border-color: var(--mint-dark); }
.kal-tag { font-size: 12px; font-weight: 700; color: var(--text2); padding: 0 2px; }
.kal-zelle.heute .kal-tag { color: var(--mint-darker); }
.kal-termin { font-size: 11px; line-height: 1.3; color: #fff; border-radius: 5px; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.kal-termin:hover { filter: brightness(.94); }

/* ===== Positions-Editor (Rechnung / Vermietung) ===== */
.feld-titel { font-size: 13px; font-weight: 700; color: var(--text2); margin: 8px 0; }
.pos-liste { display: flex; flex-direction: column; gap: 8px; }
.pos-zeile { display: flex; gap: 8px; align-items: center; }
.pos-zeile .eingabe { margin: 0; flex: 1; min-width: 0; }
.pos-zeile .klein-feld { flex: 0 0 84px; max-width: 84px; }
.pos-summe { font-weight: 700; color: var(--text); }

/* ===== Unterlisten (Aufgaben / Aussteller) ===== */
.sub-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.sub-zeile { display: flex; gap: 8px; align-items: center; }
.sub-zeile .eingabe { margin: 0; flex: 1; min-width: 0; }
.sub-zeile .klein-feld { flex: 0 0 84px; max-width: 84px; }
.sub-karte { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px; display: flex; flex-direction: column; gap: 8px; background: var(--g25); }
.mini-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); white-space: nowrap; }
.mini-check input { width: 18px; height: 18px; }

/* ===== Zähler-Verlauf (Ablesungen bearbeiten/löschen) ===== */
.ablese-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: var(--radius-klein); cursor: pointer; }
.ablese-zeile:hover { background: var(--g50); }
.ablese-rechts { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ablese-rechts .knopf.leise.klein { padding: 2px 6px; }
.verbrauch-zeile .klein.muted { margin-top: 2px; }

/* ===== Aktivitätsprotokoll: Karten-Liste + Detail-Popup ===== */
.prot-liste { display: flex; flex-direction: column; }
.prot-karte { padding: 12px 14px; border-bottom: 1px solid var(--linie); cursor: pointer; }
.prot-karte:last-child { border-bottom: none; }
.prot-karte:hover { background: var(--g50); }
.prot-karte.aktiv { background: var(--g50); }
.prot-karte.aktiv .prot-schlag-text { color: var(--text); }
.prot-k-kopf { display: flex; align-items: center; gap: 8px; }
.prot-punkt { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.prot-punkt.mint { background: var(--mint-dark); }
.prot-punkt.blau { background: #3B82F6; }
.prot-punkt.rot { background: #EF4444; }
.prot-schlag-text { font-weight: 600; color: var(--text); }
.prot-anz { font-size: 11px; font-weight: 700; background: var(--mint-light); color: var(--mint-darker); border-radius: 999px; padding: 0 8px; line-height: 18px; flex: 0 0 auto; white-space: nowrap; }
.prot-spacer { flex: 1 1 auto; }
.prot-pf { width: 16px; height: 16px; opacity: .5; flex: 0 0 auto; }
.prot-k-mitte { font-size: 13px; margin: 3px 0 0 17px; color: var(--muted); line-height: 1.45; }
.prot-k-obj { color: var(--text2); font-weight: 600; }
.prot-k-detail { color: var(--muted); }
.prot-k-meta { color: var(--muted); font-size: 12px; margin: 3px 0 0 17px; }
.prot-detail .prot-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.prot-tab { width: 100%; margin: 4px 0 12px; }
.prot-tab td, .prot-tab th { padding: 6px 8px; vertical-align: top; text-align: left; }
.prot-tab .prot-feld { font-weight: 600; color: var(--text2); white-space: nowrap; }
.prot-tab .prot-alt { color: var(--muted); text-decoration: line-through; }
.prot-tab .prot-neu { color: var(--text); font-weight: 600; }
.prot-tab .prot-pfeil { text-align: center; color: var(--muted); width: 30px; }
.prot-tab .prot-pfeil .ic { width: 16px; height: 16px; vertical-align: middle; }
.prot-meta { margin-top: 8px; border-top: 1px solid var(--linie); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.prot-meta-zeile { display: flex; gap: 10px; font-size: 13px; }
.prot-meta-label { color: var(--muted); min-width: 62px; flex: 0 0 auto; }

@media (max-width: 640px) {
  .kal-grid { gap: 3px; }
  .kal-zelle { min-height: 64px; padding: 3px; }
  .kal-termin { font-size: 10px; padding: 1px 4px; }
  .kal-wtag { font-size: 10px; }
  .kal-titel { font-size: 15px; min-width: 120px; }
  .pos-zeile .klein-feld, .sub-zeile .klein-feld { flex-basis: 66px; max-width: 66px; }
}

/* ===== Erscheinungsbild: Themes & Akzentfarben (Auto-generiert) ===== */
:root{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;--weiss:#1E232B;--g25:#1A1F26;--g50:#14181E;--g100:#262C35;--g150:#2E353F;--g200:#363D48;--g300:#454D5A;--g400:#6B7280;--g500:#9CA3AF;--g600:#B6BDC7;--g700:#D1D5DB;--g800:#E5E7EB;--g900:#F3F4F6;--ok-bg:#14352A;--ok-fg:#6EE7B7;--warn-bg:#3A2E12;--warn-fg:#FCD34D;--alarm-bg:#3A1A1A;--alarm-fg:#FCA5A5;--info-bg:#1A2A47;--info-fg:#93C5FD;--schatten:0 1px 2px rgba(0,0,0,.4);--schatten-dialog:0 20px 50px rgba(0,0,0,.6);}
:root[data-theme="studio"] .sidebar{--weiss:#1E232B;--g25:#1A1F26;--g50:#14181E;--g100:#262C35;--g150:#2E353F;--g200:#363D48;--g300:#454D5A;--g400:#6B7280;--g500:#9CA3AF;--g600:#B6BDC7;--g700:#D1D5DB;--g800:#E5E7EB;--g900:#F3F4F6;--ok-bg:#14352A;--ok-fg:#6EE7B7;--warn-bg:#3A2E12;--warn-fg:#FCD34D;--alarm-bg:#3A1A1A;--alarm-fg:#FCA5A5;--info-bg:#1A2A47;--info-fg:#93C5FD;--schatten:0 1px 2px rgba(0,0,0,.4);--schatten-dialog:0 20px 50px rgba(0,0,0,.6);}
:root[data-accent="mint"]{--mint:#34D399;--mint-dark:#10B981;--mint-darker:#047857;--mint-light:#D1FAE5;--mint-lighter:#ECFDF5;}
:root[data-theme="dark"][data-accent="mint"]{--mint:#10B981;--mint-dark:#34D399;--mint-darker:#6EE7B7;--mint-light:#0B3B30;--mint-lighter:#08312A;}
:root[data-theme="studio"][data-accent="mint"] .sidebar{--mint:#10B981;--mint-dark:#34D399;--mint-darker:#6EE7B7;--mint-light:#0B3B30;--mint-lighter:#08312A;}
:root[data-accent="blau"]{--mint:#3B82F6;--mint-dark:#2563EB;--mint-darker:#1D4ED8;--mint-light:#DBEAFE;--mint-lighter:#EFF6FF;}
:root[data-theme="dark"][data-accent="blau"]{--mint:#3B82F6;--mint-dark:#60A5FA;--mint-darker:#93C5FD;--mint-light:#13294B;--mint-lighter:#0F2138;}
:root[data-theme="studio"][data-accent="blau"] .sidebar{--mint:#3B82F6;--mint-dark:#60A5FA;--mint-darker:#93C5FD;--mint-light:#13294B;--mint-lighter:#0F2138;}
:root[data-accent="gruen"]{--mint:#22C55E;--mint-dark:#16A34A;--mint-darker:#15803D;--mint-light:#DCFCE7;--mint-lighter:#F0FDF4;}
:root[data-theme="dark"][data-accent="gruen"]{--mint:#22C55E;--mint-dark:#4ADE80;--mint-darker:#86EFAC;--mint-light:#0E3B23;--mint-lighter:#0A2E1B;}
:root[data-theme="studio"][data-accent="gruen"] .sidebar{--mint:#22C55E;--mint-dark:#4ADE80;--mint-darker:#86EFAC;--mint-light:#0E3B23;--mint-lighter:#0A2E1B;}
:root[data-accent="rot"]{--mint:#EF4444;--mint-dark:#DC2626;--mint-darker:#991B1B;--mint-light:#FEE2E2;--mint-lighter:#FEF2F2;}
:root[data-theme="dark"][data-accent="rot"]{--mint:#EF4444;--mint-dark:#F87171;--mint-darker:#FCA5A5;--mint-light:#3F1717;--mint-lighter:#321212;}
:root[data-theme="studio"][data-accent="rot"] .sidebar{--mint:#EF4444;--mint-dark:#F87171;--mint-darker:#FCA5A5;--mint-light:#3F1717;--mint-lighter:#321212;}
:root[data-accent="orange"]{--mint:#FB923C;--mint-dark:#EA580C;--mint-darker:#9A3412;--mint-light:#FFEDD5;--mint-lighter:#FFF7ED;}
:root[data-theme="dark"][data-accent="orange"]{--mint:#FB923C;--mint-dark:#FDBA74;--mint-darker:#FED7AA;--mint-light:#3F2410;--mint-lighter:#33200E;}
:root[data-theme="studio"][data-accent="orange"] .sidebar{--mint:#FB923C;--mint-dark:#FDBA74;--mint-darker:#FED7AA;--mint-light:#3F2410;--mint-lighter:#33200E;}
:root[data-accent="lila"]{--mint:#A855F7;--mint-dark:#7C3AED;--mint-darker:#5B21B6;--mint-light:#EDE9FE;--mint-lighter:#F5F3FF;}
:root[data-theme="dark"][data-accent="lila"]{--mint:#A855F7;--mint-dark:#C084FC;--mint-darker:#DDD6FE;--mint-light:#2C1A4D;--mint-lighter:#22153D;}
:root[data-theme="studio"][data-accent="lila"] .sidebar{--mint:#A855F7;--mint-dark:#C084FC;--mint-darker:#DDD6FE;--mint-light:#2C1A4D;--mint-lighter:#22153D;}
:root[data-accent="pink"]{--mint:#EC4899;--mint-dark:#DB2777;--mint-darker:#9D174D;--mint-light:#FCE7F3;--mint-lighter:#FDF2F8;}
:root[data-theme="dark"][data-accent="pink"]{--mint:#EC4899;--mint-dark:#F472B6;--mint-darker:#F9A8D4;--mint-light:#3F1528;--mint-lighter:#331020;}
:root[data-theme="studio"][data-accent="pink"] .sidebar{--mint:#EC4899;--mint-dark:#F472B6;--mint-darker:#F9A8D4;--mint-light:#3F1528;--mint-lighter:#331020;}
:root[data-accent="tuerkis"]{--mint:#2DD4BF;--mint-dark:#0D9488;--mint-darker:#0F766E;--mint-light:#CCFBF1;--mint-lighter:#F0FDFA;}
:root[data-theme="dark"][data-accent="tuerkis"]{--mint:#2DD4BF;--mint-dark:#5EEAD4;--mint-darker:#99F6E4;--mint-light:#0C3B38;--mint-lighter:#082E2C;}
:root[data-theme="studio"][data-accent="tuerkis"] .sidebar{--mint:#2DD4BF;--mint-dark:#5EEAD4;--mint-darker:#99F6E4;--mint-light:#0C3B38;--mint-lighter:#082E2C;}
:root[data-accent="gelb"]{--mint:#FBBF24;--mint-dark:#D97706;--mint-darker:#92400E;--mint-light:#FEF3C7;--mint-lighter:#FFFBEB;}
:root[data-theme="dark"][data-accent="gelb"]{--mint:#FBBF24;--mint-dark:#FCD34D;--mint-darker:#FDE68A;--mint-light:#3B2E0A;--mint-lighter:#2E2408;}
:root[data-theme="studio"][data-accent="gelb"] .sidebar{--mint:#FBBF24;--mint-dark:#FCD34D;--mint-darker:#FDE68A;--mint-light:#3B2E0A;--mint-lighter:#2E2408;}
:root[data-accent="indigo"]{--mint:#6366F1;--mint-dark:#4F46E5;--mint-darker:#3730A3;--mint-light:#E0E7FF;--mint-lighter:#EEF2FF;}
:root[data-theme="dark"][data-accent="indigo"]{--mint:#6366F1;--mint-dark:#818CF8;--mint-darker:#A5B4FC;--mint-light:#1E1B4B;--mint-lighter:#181544;}
:root[data-theme="studio"][data-accent="indigo"] .sidebar{--mint:#6366F1;--mint-dark:#818CF8;--mint-darker:#A5B4FC;--mint-light:#1E1B4B;--mint-lighter:#181544;}
:root[data-accent="cyan"]{--mint:#22D3EE;--mint-dark:#0891B2;--mint-darker:#155E75;--mint-light:#CFFAFE;--mint-lighter:#ECFEFF;}
:root[data-theme="dark"][data-accent="cyan"]{--mint:#22D3EE;--mint-dark:#67E8F9;--mint-darker:#A5F3FC;--mint-light:#0A3A45;--mint-lighter:#072E37;}
:root[data-theme="studio"][data-accent="cyan"] .sidebar{--mint:#22D3EE;--mint-dark:#67E8F9;--mint-darker:#A5F3FC;--mint-light:#0A3A45;--mint-lighter:#072E37;}
:root[data-accent="koralle"]{--mint:#FB7185;--mint-dark:#E11D48;--mint-darker:#9F1239;--mint-light:#FFE4E6;--mint-lighter:#FFF1F2;}
:root[data-theme="dark"][data-accent="koralle"]{--mint:#FB7185;--mint-dark:#FDA4AF;--mint-darker:#FECDD3;--mint-light:#3F1620;--mint-lighter:#33111A;}
:root[data-theme="studio"][data-accent="koralle"] .sidebar{--mint:#FB7185;--mint-dark:#FDA4AF;--mint-darker:#FECDD3;--mint-light:#3F1620;--mint-lighter:#33111A;}
:root[data-accent="petrol"]{--mint:#0EA5E9;--mint-dark:#0284C7;--mint-darker:#075985;--mint-light:#E0F2FE;--mint-lighter:#F0F9FF;}
:root[data-theme="dark"][data-accent="petrol"]{--mint:#0EA5E9;--mint-dark:#38BDF8;--mint-darker:#7DD3FC;--mint-light:#0B3A4D;--mint-lighter:#082E3D;}
:root[data-theme="studio"][data-accent="petrol"] .sidebar{--mint:#0EA5E9;--mint-dark:#38BDF8;--mint-darker:#7DD3FC;--mint-light:#0B3A4D;--mint-lighter:#082E3D;}
:root[data-accent="limette"]{--mint:#84CC16;--mint-dark:#65A30D;--mint-darker:#3F6212;--mint-light:#ECFCCB;--mint-lighter:#F7FEE7;}
:root[data-theme="dark"][data-accent="limette"]{--mint:#A3E635;--mint-dark:#BEF264;--mint-darker:#D9F99D;--mint-light:#26330A;--mint-lighter:#1E2808;}
:root[data-theme="studio"][data-accent="limette"] .sidebar{--mint:#A3E635;--mint-dark:#BEF264;--mint-darker:#D9F99D;--mint-light:#26330A;--mint-lighter:#1E2808;}
:root[data-accent="schwarz"]{--mint:#4B5563;--mint-dark:#1F2937;--mint-darker:#111827;--mint-light:#E5E7EB;--mint-lighter:#F3F4F6;}
:root[data-theme="dark"][data-accent="schwarz"]{--mint:#9CA3AF;--mint-dark:#D1D5DB;--mint-darker:#E5E7EB;--mint-light:#2A2E35;--mint-lighter:#23272D;}
:root[data-theme="studio"][data-accent="schwarz"] .sidebar{--mint:#9CA3AF;--mint-dark:#D1D5DB;--mint-darker:#E5E7EB;--mint-light:#2A2E35;--mint-lighter:#23272D;}
:root[data-accent="bordeaux"]{--mint:#B03052;--mint-dark:#8E1F3D;--mint-darker:#6B142C;--mint-light:#F6DDE4;--mint-lighter:#FCEEF2;}
:root[data-theme="dark"][data-accent="bordeaux"]{--mint:#C25470;--mint-dark:#D98098;--mint-darker:#E9AEBE;--mint-light:#3A1420;--mint-lighter:#2E0F19;}
:root[data-theme="studio"][data-accent="bordeaux"] .sidebar{--mint:#C25470;--mint-dark:#D98098;--mint-darker:#E9AEBE;--mint-light:#3A1420;--mint-lighter:#2E0F19;}
:root[data-accent="waldgruen"]{--mint:#2F8F5B;--mint-dark:#1F6B41;--mint-darker:#14502F;--mint-light:#D4EFE0;--mint-lighter:#EDF9F2;}
:root[data-theme="dark"][data-accent="waldgruen"]{--mint:#3DA76B;--mint-dark:#6FC79A;--mint-darker:#A6E0C2;--mint-light:#0E3320;--mint-lighter:#0A2818;}
:root[data-theme="studio"][data-accent="waldgruen"] .sidebar{--mint:#3DA76B;--mint-dark:#6FC79A;--mint-darker:#A6E0C2;--mint-light:#0E3320;--mint-lighter:#0A2818;}
:root[data-accent="stahlblau"]{--mint:#4B7BA8;--mint-dark:#375F84;--mint-darker:#274763;--mint-light:#DCE7F2;--mint-lighter:#EFF4FA;}
:root[data-theme="dark"][data-accent="stahlblau"]{--mint:#6B9BC8;--mint-dark:#93B8DC;--mint-darker:#BBD3EA;--mint-light:#16283A;--mint-lighter:#10202F;}
:root[data-theme="studio"][data-accent="stahlblau"] .sidebar{--mint:#6B9BC8;--mint-dark:#93B8DC;--mint-darker:#BBD3EA;--mint-light:#16283A;--mint-lighter:#10202F;}
:root[data-accent="lavendel"]{--mint:#9B8CE0;--mint-dark:#7A68C9;--mint-darker:#5B4BA0;--mint-light:#E7E2FA;--mint-lighter:#F3F1FD;}
:root[data-theme="dark"][data-accent="lavendel"]{--mint:#B0A2EC;--mint-dark:#C7BCF3;--mint-darker:#DED7F8;--mint-light:#241E42;--mint-lighter:#1C1735;}
:root[data-theme="studio"][data-accent="lavendel"] .sidebar{--mint:#B0A2EC;--mint-dark:#C7BCF3;--mint-darker:#DED7F8;--mint-light:#241E42;--mint-lighter:#1C1735;}
:root[data-accent="bernstein"]{--mint:#E0A02A;--mint-dark:#B87A14;--mint-darker:#8A5A0C;--mint-light:#FBEEC9;--mint-lighter:#FEF8E9;}
:root[data-theme="dark"][data-accent="bernstein"]{--mint:#F0B845;--mint-dark:#F6CE77;--mint-darker:#FADFA6;--mint-light:#3A2C0C;--mint-lighter:#2D2208;}
:root[data-theme="studio"][data-accent="bernstein"] .sidebar{--mint:#F0B845;--mint-dark:#F6CE77;--mint-darker:#FADFA6;--mint-light:#3A2C0C;--mint-lighter:#2D2208;}
:root[data-accent="terracotta"]{--mint:#C96A4B;--mint-dark:#A44E32;--mint-darker:#7C3A24;--mint-light:#F6DFD5;--mint-lighter:#FCF0EA;}
:root[data-theme="dark"][data-accent="terracotta"]{--mint:#D9835F;--mint-dark:#E7A987;--mint-darker:#F1C9B3;--mint-light:#3A1D12;--mint-lighter:#2D160D;}
:root[data-theme="studio"][data-accent="terracotta"] .sidebar{--mint:#D9835F;--mint-dark:#E7A987;--mint-darker:#F1C9B3;--mint-light:#3A1D12;--mint-lighter:#2D160D;}
:root[data-accent="oliv"]{--mint:#8A8B36;--mint-dark:#6C6D25;--mint-darker:#4F5018;--mint-light:#EDEDC9;--mint-lighter:#F7F7E6;}
:root[data-theme="dark"][data-accent="oliv"]{--mint:#A8A94A;--mint-dark:#C4C579;--mint-darker:#DBDBA6;--mint-light:#2C2C0E;--mint-lighter:#222208;}
:root[data-theme="studio"][data-accent="oliv"] .sidebar{--mint:#A8A94A;--mint-dark:#C4C579;--mint-darker:#DBDBA6;--mint-light:#2C2C0E;--mint-lighter:#222208;}
:root[data-accent="marine"]{--mint:#2A4A8A;--mint-dark:#1E3668;--mint-darker:#14264B;--mint-light:#D6DEF0;--mint-lighter:#EEF2FA;}
:root[data-theme="dark"][data-accent="marine"]{--mint:#4E6FB8;--mint-dark:#7E97D0;--mint-darker:#AEBEE4;--mint-light:#12203A;--mint-lighter:#0D1830;}
:root[data-theme="studio"][data-accent="marine"] .sidebar{--mint:#4E6FB8;--mint-dark:#7E97D0;--mint-darker:#AEBEE4;--mint-light:#12203A;--mint-lighter:#0D1830;}
:root[data-accent="magenta"]{--mint:#C42A8A;--mint-dark:#9E1F6E;--mint-darker:#771550;--mint-light:#F6D6EA;--mint-lighter:#FCEDF6;}
:root[data-theme="dark"][data-accent="magenta"]{--mint:#D64FA3;--mint-dark:#E784C1;--mint-darker:#F1B0D8;--mint-light:#3A1230;--mint-lighter:#2D0E25;}
:root[data-theme="studio"][data-accent="magenta"] .sidebar{--mint:#D64FA3;--mint-dark:#E784C1;--mint-darker:#F1B0D8;--mint-light:#3A1230;--mint-lighter:#2D0E25;}
:root[data-accent="schokolade"]{--mint:#7B5233;--mint-dark:#5E3D24;--mint-darker:#442B18;--mint-light:#EADFD3;--mint-lighter:#F6F0E9;}
:root[data-theme="dark"][data-accent="schokolade"]{--mint:#A9835F;--mint-dark:#C4A588;--mint-darker:#DCC6B0;--mint-light:#2E2015;--mint-lighter:#241910;}
:root[data-theme="studio"][data-accent="schokolade"] .sidebar{--mint:#A9835F;--mint-dark:#C4A588;--mint-darker:#DCC6B0;--mint-light:#2E2015;--mint-lighter:#241910;}
:root[data-accent="himbeere"]{--mint:#D63384;--mint-dark:#A61E63;--mint-darker:#7A1348;--mint-light:#F9D8E8;--mint-lighter:#FDEDF4;}
:root[data-theme="dark"][data-accent="himbeere"]{--mint:#E75DA0;--mint-dark:#F08CBE;--mint-darker:#F6BAD8;--mint-light:#3C1226;--mint-lighter:#2F0E1D;}
:root[data-theme="studio"][data-accent="himbeere"] .sidebar{--mint:#E75DA0;--mint-dark:#F08CBE;--mint-darker:#F6BAD8;--mint-light:#3C1226;--mint-lighter:#2F0E1D;}
:root[data-accent="smaragd"]{--mint:#059669;--mint-dark:#047857;--mint-darker:#065F46;--mint-light:#CCF3E4;--mint-lighter:#EBFBF4;}
:root[data-theme="dark"][data-accent="smaragd"]{--mint:#10B981;--mint-dark:#4FD7A8;--mint-darker:#8CE7C6;--mint-light:#0A3529;--mint-lighter:#07281F;}
:root[data-theme="studio"][data-accent="smaragd"] .sidebar{--mint:#10B981;--mint-dark:#4FD7A8;--mint-darker:#8CE7C6;--mint-light:#0A3529;--mint-lighter:#07281F;}

/* ===== Erscheinungsbild-Auswahl (Vereinsdaten) ===== */
.theme-wahl { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-knopf { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid var(--linie); background: var(--karte-bg); border-radius: var(--radius-klein); padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; min-width: 88px; }
.theme-knopf:hover { border-color: var(--mint); }
.theme-knopf.aktiv { border-color: var(--mint-dark); color: var(--mint-darker); box-shadow: 0 0 0 3px var(--mint-light); }
.theme-vorschau { width: 66px; height: 42px; border-radius: 6px; overflow: hidden; display: flex; border: 1px solid var(--g300); }
.theme-vorschau .tv-bar { width: 20px; }
.theme-vorschau .tv-body { flex: 1; }
.theme-knopf.light .tv-bar { background: #F9FAFB; } .theme-knopf.light .tv-body { background: #FFFFFF; }
.theme-knopf.studio .tv-bar { background: #1E232B; } .theme-knopf.studio .tv-body { background: #FFFFFF; }
.theme-knopf.dark .tv-bar { background: #14181E; } .theme-knopf.dark .tv-body { background: #1E232B; }
.accent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; max-width: 540px; }
.accent-swatch { position: relative; height: 40px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); padding: 0; transition: transform .08s; }
.accent-swatch:hover { transform: scale(1.06); }
.accent-swatch.aktiv { border-color: var(--text); }
.accent-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 17px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* ===== Rechtsklick-Menü ===== */
.kmenu { position: fixed; z-index: 200; background: var(--karte-bg); border: 1px solid var(--linie); border-radius: var(--radius-klein); box-shadow: var(--schatten-dialog); padding: 5px; min-width: 180px; }
.kmenu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 6px; font-size: 14px; color: var(--text); cursor: pointer; }
.kmenu-item:hover { background: var(--g100); }
.kmenu-item.gefahr { color: var(--alarm-fg); }
.kmenu-item.gefahr:hover { background: var(--alarm-bg); }
.kmenu-item svg.ic { width: 17px; height: 17px; opacity: .85; flex: none; }
.hat-kontext { -webkit-tap-highlight-color: transparent; }

/* ===== Roter Lösch-Dialog ===== */
.loesch-box { border: 1px solid #FCA5A5; background: var(--alarm-bg); border-radius: var(--radius-klein); padding: 14px 16px; }
.loesch-kopf { display: flex; align-items: center; gap: 10px; color: var(--alarm-fg); font-size: 16px; margin-bottom: 8px; }
.loesch-kopf svg.ic { width: 22px; height: 22px; flex: none; }
.loesch-name { font-weight: 800; }
.loesch-text { color: var(--alarm-fg); font-size: 14px; margin: 0; line-height: 1.5; }

/* ===== Farbauswahl Termine ===== */
.farb-wahl { display: flex; gap: 10px; flex-wrap: wrap; }
.farb-punkt { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); padding: 0; transition: transform .08s; }
.farb-punkt:hover { transform: scale(1.08); }
.farb-punkt.aktiv { border-color: var(--text); }
.farb-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ===== Dunkel/Studio: Seitenleisten-Schrift hell & gut lesbar ===== */
:root[data-theme="dark"] .sidebar,
:root[data-theme="studio"] .sidebar {
  --text: #F3F4F6;    /* Haupttext (z. B. Abmelden-Knopf) hell */
  --text2: #F4F6F9;   /* Navigationstext fast weiß */
  --muted: #AEB7C4;   /* Untertitel/Abschnitte deutlich heller */
  --linie: #363D48;   /* Trennlinien passend zum dunklen Hintergrund */
  --karte-bg: #1E232B;
}
:root[data-theme="dark"] .sidebar .benutzer-karte .knopf,
:root[data-theme="studio"] .sidebar .benutzer-karte .knopf { color: #F4F6F9; }
:root[data-theme="dark"] .sidebar .nav-item,
:root[data-theme="studio"] .sidebar .nav-item { color: #F4F6F9; }
:root[data-theme="dark"] .sidebar .sb-kopf .titel,
:root[data-theme="studio"] .sidebar .sb-kopf .titel,
:root[data-theme="dark"] .sidebar .benutzer-karte .name,
:root[data-theme="studio"] .sidebar .benutzer-karte .name { color: #FFFFFF; }

/* ===== Backoffice: Rechte je Benutzer (Sehen/Benutzen + Postfächer) ===== */
.rechte-liste { display: flex; flex-direction: column; padding-top: 4px; padding-bottom: 4px; }
.rechte-zeile { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.rechte-zeile:last-child { border-bottom: 0; }
.rechte-name { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); min-width: 0; }
.rechte-name svg.ic { width: 20px; height: 20px; color: var(--mint-dark); }
.rechte-name span { overflow: hidden; text-overflow: ellipsis; }
.rechte-schalter { display: flex; align-items: center; gap: 18px; flex: none; }
.rechte-schalter .check { gap: 7px; }
@media (max-width: 560px) {
  .rechte-zeile { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rechte-schalter { gap: 22px; padding-left: 30px; }
}

/* ===== E-Mail: Ordner-Baum (Kategorien + Unterordner), Suche, Stern ===== */
.mail-ordner-zeile { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-klein); padding-right: 4px; }
.mail-ordner-zeile:hover { background: var(--g50); }
.mail-ordner-zeile.aktiv { background: var(--mint-lighter); }
.mail-ordner-zeile.aktiv .mail-ordner-knopf { color: var(--mint-darker); font-weight: 700; }
.mail-ordner-zeile .mail-ordner-knopf { flex: 1; min-width: 0; padding: 8px 6px; border-radius: 0; background: transparent; }
.mail-ordner-zeile .mail-ordner-knopf:hover { background: transparent; }
.mail-ordner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-ordner-pfeil { flex: none; width: 20px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; border-radius: 6px; }
.mail-ordner-pfeil:hover { background: var(--g100); color: var(--text); }
.mail-ordner-pfeil .ic { width: 15px; height: 15px; transition: transform .15s; }
.mail-ordner-pfeil.auf .ic { transform: rotate(90deg); }
.mail-ordner-pfeil.leer { visibility: hidden; }
.mail-ordner-menu { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 6px; opacity: 0; }
.mail-ordner-zeile:hover .mail-ordner-menu { opacity: 1; }
.mail-ordner-menu:hover { background: var(--g100); color: var(--text); }
.mail-ordner-menu .ic circle { fill: currentColor; stroke: none; }
.mail-ordner-titel { display: flex; align-items: center; justify-content: space-between; margin: 14px 6px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mail-ordner-neu { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--mint-dark); cursor: pointer; border-radius: 6px; }
.mail-ordner-neu:hover { background: var(--mint-lighter); }
.mail-ordner-neu .ic { width: 16px; height: 16px; }
.mail-ordner-leer { padding: 6px 8px; font-size: 12.5px; color: var(--muted); }

.mail-suche { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--g100); }
.mail-suche .eingabe { flex: 1; }

.mail-stern { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; border-radius: 6px; color: var(--g300); }
.mail-stern:hover { background: var(--g100); }
.mail-stern .ic { width: 17px; height: 17px; }
.mail-stern.an { color: #F0A500; }
.mail-stern.an .ic { fill: #F0A500; stroke: #F0A500; }

.mail-verschieben-liste { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.mail-verschieben-ziel { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; background: transparent; color: var(--text2); font-size: 14.5px; font-weight: 600; border-radius: var(--radius-klein); cursor: pointer; text-align: left; }
.mail-verschieben-ziel:hover { background: var(--mint-lighter); color: var(--mint-darker); }
.mail-verschieben-ziel .ic { width: 18px; height: 18px; flex: none; color: var(--muted); }

@media (max-width: 720px) {
  .mail-ordner { width: 100% !important; flex-direction: column !important; flex-wrap: nowrap !important; max-height: 210px; overflow-y: auto; border: 1px solid var(--linie); border-radius: var(--radius); padding: 6px; }
  .mail-ordner-zeile { border: 0; }
}

/* ===== Veranstaltungen: Abschnitte Kommend/Vergangen ===== */
.liste-abschnitt { margin: 18px 4px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.liste-abschnitt:first-child { margin-top: 4px; }
.karte.eintrag.vergangen { opacity: .78; }
.karte.eintrag.vergangen:hover { opacity: 1; }
.tag svg.ic { width: 12px; height: 12px; vertical-align: -2px; }
.plan-einstieg { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }

/* ===== Hallenplan / Außenplan (Vollbild) ===== */
body.plan-offen { overflow: hidden; }
.plan-vollbild { position: fixed; inset: 0; z-index: 45; background: var(--seite-bg); display: flex; flex-direction: column; animation: einblenden .15s ease-out; }
.plan-kopf { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--karte-bg); border-bottom: 1px solid var(--linie); }
.plan-titel { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; }
.plan-titel h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0; white-space: nowrap; }
.plan-titel h2 svg.ic { color: var(--mint-dark); width: 20px; height: 20px; }
.plan-titel .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-reiter { display: flex; gap: 4px; background: var(--g100); padding: 3px; border-radius: 10px; }
.plan-reiter button { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-weight: 600; color: var(--text2); cursor: pointer; font-size: 13.5px; }
.plan-reiter button.aktiv { background: var(--karte-bg); color: var(--mint-darker); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.plan-reiter button svg.ic { width: 16px; height: 16px; }
.plan-werkzeuge { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 8px 16px; background: var(--karte-bg); border-bottom: 1px solid var(--linie); }
.plan-gruppe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-gruppe.rechts { margin-left: auto; }
.plan-werkzeuge .knopf { padding: 7px 11px; font-size: 13.5px; }
.plan-info { font-size: 12.5px; color: var(--muted); }
.plan-info.warn { color: var(--warn-fg); font-weight: 600; }
.plan-speichern.ungespeichert { box-shadow: 0 0 0 3px var(--mint-light); }
.plan-speichern.ungespeichert::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F0A500; margin-left: 2px; }
.plan-koerper { flex: 1; display: flex; min-height: 0; }
.plan-flaeche { flex: 1; min-width: 0; overflow: auto; padding: 12px; background: var(--g50); }
.plan-svg { display: block; background: #fbfbfa; border: 1px solid var(--linie); border-radius: 6px; box-shadow: var(--schatten); user-select: none; -webkit-user-select: none; }
.plan-seite { width: 330px; flex: none; overflow-y: auto; background: var(--karte-bg); border-left: 1px solid var(--linie); padding: 14px; display: flex; flex-direction: column; gap: 12px; }

/* Zeichnung */
.plan-raster line { vector-effect: non-scaling-stroke; stroke-width: 1; }
.plan-raster line.r1 { stroke: #e6eef7; }
.plan-raster line.r5 { stroke: #9bb7d4; }
.plan-stand { cursor: pointer; }
.plan-stand.ziehbar { cursor: grab; touch-action: none; }
.plan-stand.zieht { cursor: grabbing; opacity: .85; }
.plan-stand text { font-family: var(--schrift); pointer-events: none; }
.plan-stand-name { font-weight: 700; }
.plan-stand-flaeche { transition: filter .1s; }
.plan-stand:hover .plan-stand-flaeche { filter: brightness(.96); }
.plan-zone { cursor: pointer; }
.plan-zone.ziehbar { cursor: grab; touch-action: none; }
.plan-zone-flaeche { fill: rgba(232, 163, 61, .28); stroke: #b3722a; stroke-width: 2; }
.plan-zone.gewaehlt .plan-zone-flaeche { stroke: #1466b3; stroke-width: 3; }
.plan-zone-muster { pointer-events: none; }
.plan-zone-text { font-family: var(--schrift); font-weight: 800; fill: #8a5618; pointer-events: none; letter-spacing: .05em; }
.plan-massstab line { stroke: #374151; stroke-width: 2; }
.plan-massstab text { font-family: var(--schrift); font-weight: 700; fill: #374151; }

/* Seitenleiste */
.plan-seite-kopf h3 { margin: 0 0 6px; font-size: 16px; }
.plan-seite-kopf .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag.plan-tag-a { background: #EAF3DE; color: #3B6D11; }
.tag.plan-tag-v { background: #FCEBEB; color: #A32D2D; }
.plan-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.plan-punkt.a { background: #3B6D11; }
.plan-punkt.v { background: #A32D2D; }
.plan-auswahl { border: 1px solid #b9d3ee; background: #f2f7fd; border-radius: var(--radius-klein); padding: 10px 12px; }
.plan-auswahl.zone { border-color: #e8c28a; background: #fdf6ec; }
.plan-auswahl-name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.plan-auswahl-name svg.ic { width: 16px; height: 16px; color: #b3722a; }
.plan-auswahl-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plan-hilfe { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.plan-tabelle-wrap { border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
.plan-tabelle th, .plan-tabelle td { padding: 6px 8px; font-size: 13px; }
.plan-tabelle tbody tr { cursor: pointer; }
.plan-tabelle tbody tr:hover { background: var(--g50); }
.plan-tabelle tbody tr.aktiv { background: #e8f1fb; }
.plan-tabelle tfoot td { font-weight: 700; border-top: 2px solid var(--linie); background: var(--g50); }
.plan-leer { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--muted); padding: 20px 8px; }
.plan-leer svg.ic { width: 34px; height: 34px; color: var(--g300); }
.plan-ohne { border-top: 1px dashed var(--linie); padding-top: 10px; }
.plan-ohne h4 { margin: 0 0 6px; font-size: 13px; color: var(--text2); }
.plan-ohne-zeile { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.plan-ohne-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Stand-Dialog: Typ-Auswahl */
.plan-typ-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-typ { border: 2px solid var(--g200); background: var(--karte-bg); border-radius: 8px; padding: 7px 12px; font-weight: 600; cursor: pointer; color: var(--text2); }
.plan-typ.aussteller.aktiv { border-color: #3B6D11; background: #EAF3DE; color: #3B6D11; }
.plan-typ.verkaeufer.aktiv { border-color: #A32D2D; background: #FCEBEB; color: #A32D2D; }
.plan-typ:disabled { cursor: default; }

@media (max-width: 900px) {
  .plan-koerper { flex-direction: column; overflow-y: auto; }
  .plan-flaeche { flex: none; height: auto; max-height: 62vh; }
  .plan-seite { width: auto; border-left: 0; border-top: 1px solid var(--linie); flex: none; overflow: visible; }
  .plan-kopf { flex-wrap: wrap; gap: 8px; position: relative; }
  .plan-titel { flex-basis: 100%; order: 1; padding-right: 44px; }
  .plan-reiter { order: 2; }
  .plan-zu { order: 0; position: absolute; right: 10px; top: 8px; }
  .plan-werkzeuge .knopf span { display: none; }
  .plan-werkzeuge .knopf.primaer span { display: inline; }
}

/* Drucken: nur den Plan (quer) + Standliste */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body.plan-offen > *:not(.plan-vollbild) { display: none !important; }
  body.plan-offen { overflow: visible; background: #fff; }
  .plan-vollbild { position: static; background: #fff; display: block; }
  .plan-kopf { border: 0; padding: 0 0 6px; }
  .plan-reiter, .plan-zu, .plan-werkzeuge, .plan-hilfe, .plan-auswahl, .plan-auswahl-knoepfe, .plan-ohne button { display: none !important; }
  .plan-koerper { display: block; }
  .plan-flaeche { overflow: visible; padding: 0; background: #fff; height: auto; }
  .plan-svg { width: 100% !important; height: auto !important; box-shadow: none; }
  .plan-raster { display: none; }
  .plan-seite { width: auto; border: 0; padding: 8px 0 0; overflow: visible; display: block; }
  .plan-tabelle-wrap { break-inside: auto; }
  .plan-tabelle tr { break-inside: avoid; }
}