/* Neue Agentursoftware – Apple-Look (angelehnt an die Human Interface Guidelines)
   Zwei Layouts aus demselben HTML: body.layout-sidebar (Mac) und body.layout-tabs (iPad).
   Farben als Tokens; Dunkelmodus über prefers-color-scheme oder html[data-theme]. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #f5f5f7;
  --bg-gruppe: #ffffff;
  --bg-nav: rgba(236, 236, 240, 0.86);
  --bg-toolbar: rgba(245, 245, 247, 0.82);
  --bg-feld: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --fill: rgba(120, 120, 128, 0.12);
  --fill-stark: rgba(120, 120, 128, 0.2);
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #a1a1a6;
  --trenner: rgba(60, 60, 67, 0.16);
  --trenner-stark: rgba(60, 60, 67, 0.29);
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.06);
  --schatten-sheet: 0 20px 60px rgba(0, 0, 0, 0.22);
  --blau: #007aff;
  --rot: #ff3b30;
  --gruen: #34c759;
  --orange: #ff9500;
  --radius: 12px;
  --radius-klein: 8px;

  /* Modulfarben (Apple-Systemfarben) */
  --c-start: #007aff;
  --c-kontakte: #8e8e93;
  --c-klienten: #007aff;
  --c-projekte: #5856d6;
  --c-vorschlaege: #ff2d55;
  --c-vita: #af52de;
  --c-termine: #30b0c7;
  --c-kommunikation: #ff9500;
  --c-todo: #ff3b30;
  --c-buchhaltung: #34c759;
  --c-einstellungen: #636366;

  --akzent: var(--blau);
  --nav-breite: 232px;
  --liste-breite: 320px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1c1e;
    --bg-gruppe: #2c2c2e;
    --bg-nav: rgba(40, 40, 43, 0.86);
    --bg-toolbar: rgba(28, 28, 30, 0.82);
    --bg-feld: #1c1c1e;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --fill: rgba(118, 118, 128, 0.24);
    --fill-stark: rgba(118, 118, 128, 0.36);
    --text: #f5f5f7;
    --text-2: #98989d;
    --text-3: #636366;
    --trenner: rgba(84, 84, 88, 0.55);
    --trenner-stark: rgba(84, 84, 88, 0.8);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
    --blau: #0a84ff;
    --rot: #ff453a;
    --gruen: #30d158;
    --orange: #ff9f0a;
    --c-start: #0a84ff;
    --c-klienten: #0a84ff;
    --c-projekte: #5e5ce6;
    --c-vorschlaege: #ff375f;
    --c-vita: #bf5af2;
    --c-termine: #40c8e0;
    --c-kommunikation: #ff9f0a;
    --c-todo: #ff453a;
    --c-buchhaltung: #30d158;
    --c-einstellungen: #98989d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1c1e;
  --bg-gruppe: #2c2c2e;
  --bg-nav: rgba(40, 40, 43, 0.86);
  --bg-toolbar: rgba(28, 28, 30, 0.82);
  --bg-feld: #1c1c1e;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --fill: rgba(118, 118, 128, 0.24);
  --fill-stark: rgba(118, 118, 128, 0.36);
  --text: #f5f5f7;
  --text-2: #98989d;
  --text-3: #636366;
  --trenner: rgba(84, 84, 88, 0.55);
  --trenner-stark: rgba(84, 84, 88, 0.8);
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
  --blau: #0a84ff;
  --rot: #ff453a;
  --gruen: #30d158;
  --orange: #ff9f0a;
  --c-start: #0a84ff;
  --c-klienten: #0a84ff;
  --c-projekte: #5e5ce6;
  --c-vorschlaege: #ff375f;
  --c-vita: #bf5af2;
  --c-termine: #40c8e0;
  --c-kommunikation: #ff9f0a;
  --c-todo: #ff453a;
  --c-buchhaltung: #30d158;
  --c-einstellungen: #98989d;
  color-scheme: dark;
}

body[data-modul="start"] { --akzent: var(--c-start); }
body[data-modul="kontakte"] { --akzent: var(--c-kontakte); }
body[data-modul="klienten"] { --akzent: var(--c-klienten); }
body[data-modul="projekte"] { --akzent: var(--c-projekte); }
body[data-modul="vorschlaege"] { --akzent: var(--c-vorschlaege); }
body[data-modul="vita"] { --akzent: var(--c-vita); }
body[data-modul="termine"] { --akzent: var(--c-termine); }
body[data-modul="kommunikation"] { --akzent: var(--c-kommunikation); }
body[data-modul="todo"] { --akzent: var(--c-todo); }
body[data-modul="buchhaltung"] { --akzent: var(--c-buchhaltung); }
body[data-modul="einstellungen"] { --akzent: var(--c-einstellungen); }

/* ------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
input, select, textarea, button { font: inherit; color: inherit; min-width: 0; max-width: 100%; }
.icon { flex-shrink: 0; display: block; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blau) 45%, transparent); outline-offset: 1px; border-radius: 6px; }
.text-sekundaer { color: var(--text-2); }
.hinweis-klein { color: var(--text-2); font-size: 12px; margin: 6px 4px 14px; }
.mono { font-family: var(--mono); }
[hidden] { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------ App-Rahmen */
.app { min-height: 100vh; min-height: 100dvh; display: flex; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inhalt { flex: 1; padding: 20px 28px 48px; min-width: 0; }
.app-main:not(.breit) .inhalt > :not(.split):not(.kalender-wrap) { max-width: 1100px; }

/* Navigation – Mac-Stil (Seitenleiste) */
.layout-sidebar .app-nav {
  width: var(--nav-breite);
  flex-shrink: 0;
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg-nav);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--trenner);
  padding: 14px 10px 10px;
}
.nav-kopf { padding: 6px 10px 14px; }
.nav-marke { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav-eintrag {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px;
  color: var(--text); font-size: 13.5px; font-weight: 500;
  text-decoration: none !important;
}
.nav-eintrag:hover { background: var(--bg-hover); }
.nav-icon { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: var(--c, var(--c-kontakte)); }
.nav-icon .icon { width: 16px; height: 16px; }
.nav-eintrag[data-modul="start"] { --c: var(--c-start); }
.nav-eintrag[data-modul="kontakte"] { --c: var(--c-kontakte); }
.nav-eintrag[data-modul="klienten"] { --c: var(--c-klienten); }
.nav-eintrag[data-modul="projekte"] { --c: var(--c-projekte); }
.nav-eintrag[data-modul="vorschlaege"] { --c: var(--c-vorschlaege); }
.nav-eintrag[data-modul="vita"] { --c: var(--c-vita); }
.nav-eintrag[data-modul="termine"] { --c: var(--c-termine); }
.nav-eintrag[data-modul="kommunikation"] { --c: var(--c-kommunikation); }
.nav-eintrag[data-modul="todo"] { --c: var(--c-todo); }
.nav-eintrag[data-modul="buchhaltung"] { --c: var(--c-buchhaltung); }
.nav-eintrag[data-modul="einstellungen"] { --c: var(--c-einstellungen); }
.nav-eintrag.aktiv { background: var(--fill-stark); }
.nav-eintrag.geplant .nav-text { color: var(--text-2); }
.nav-eintrag.geplant .nav-icon { opacity: 0.55; }
.nav-fuss { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--trenner); padding-top: 10px; margin-top: 8px; }
.nav-user { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 4px 6px; border-radius: 8px; color: var(--text); text-decoration: none !important; }
.nav-user:hover { background: var(--bg-hover); }
.nav-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nav-user-text strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-user-text small { font-size: 11px; color: var(--text-2); }
.nav-abmelden { margin: 0; }

/* Navigation – iPad-Stil (Tab-Leiste oben) */
.layout-tabs .app { flex-direction: column; }
.layout-tabs .app-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: var(--bg-nav);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--trenner);
}
.layout-tabs .nav-kopf { padding: 0 6px 0 0; }
.layout-tabs .nav-liste { flex-direction: row; flex-wrap: wrap; gap: 4px; overflow: visible; }
.layout-tabs .nav-eintrag { padding: 6px 12px; border-radius: 999px; font-size: 13px; gap: 6px; }
.layout-tabs .nav-icon { width: auto; height: auto; background: none; color: var(--c); }
.layout-tabs .nav-eintrag.aktiv { background: var(--c); color: #fff; }
.layout-tabs .nav-eintrag.aktiv .nav-icon { color: #fff; }
.layout-tabs .nav-fuss { border: 0; margin: 0 0 0 auto; padding: 0; }
.layout-tabs .nav-user-text { display: none; }
.layout-tabs .toolbar { top: var(--nav-h, 53px); }

/* Toolbar */
.toolbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  min-height: 56px; padding: 10px 28px;
  background: var(--bg-toolbar);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--trenner);
}
.toolbar-links { display: flex; align-items: center; gap: 12px; min-width: 0; }
.toolbar-titel { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.knopf-zurueck { display: inline-flex; align-items: center; gap: 2px; color: var(--blau); font-size: 14px; }

/* Hinweise */
.flash-bereich { padding: 0 28px; }
.flash-bereich:empty { display: none; }
.flash { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; background: var(--fill); }
.flash-erfolg { background: color-mix(in srgb, var(--gruen) 16%, transparent); }
.flash-fehler { background: color-mix(in srgb, var(--rot) 15%, transparent); }
.flash-hinweis { background: color-mix(in srgb, var(--blau) 13%, transparent); }

/* ------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; padding: 5px 14px;
  border-radius: 8px; border: 0;
  background: var(--fill); color: var(--text);
  font-size: 13.5px; font-weight: 500; cursor: pointer;
  text-decoration: none !important; white-space: nowrap;
}
.knopf:hover { background: var(--fill-stark); }
.knopf-primaer { background: var(--blau); color: #fff; }
.knopf-primaer:hover { background: color-mix(in srgb, var(--blau) 88%, #000); }
.knopf-akzent { background: var(--akzent); color: #fff; }
.knopf-gefahr { color: var(--rot); }
.knopf-gefahr-voll { background: var(--rot); color: #fff; }
.knopf-schlicht { background: none; color: var(--blau); }
.knopf-schlicht:hover { background: var(--bg-hover); }
.knopf-klein { min-height: 26px; padding: 3px 10px; font-size: 12.5px; }
.knopf-breit { width: 100%; min-height: 38px; margin-top: 6px; }
.knopf-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.knopf-icon:hover { background: var(--bg-hover); color: var(--text); }
.knopf-reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------ Gruppierte Listen & Formulare (inset grouped) */
.gruppe {
  list-style: none; margin: 0 0 22px; padding: 0;
  background: var(--bg-gruppe);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.gruppe > .zeile, .gruppe > li > a, .gruppe > li.zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 44px; padding: 9px 16px;
  border-bottom: 1px solid var(--trenner);
}
.gruppe > :last-child, .gruppe > li:last-child > a { border-bottom: 0 !important; }
.gruppe > li:last-child.zeile { border-bottom: 0; }
.zeile > span:first-child, .zeile > .label { color: var(--text); flex-shrink: 0; }
.zeile .wert { color: var(--text-2); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.zeile.leer { color: var(--text-2); justify-content: center; }
.gruppe-titel, .abschnitt-titel {
  margin: 0 0 7px 16px; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2);
}
.abschnitt-titel { margin-top: 4px; }
.gruppe-fuss { margin: -14px 16px 22px; font-size: 12px; color: var(--text-2); }

/* Formular-Zeilen: Label links, Feld rechts */
.formular .zeile { cursor: text; }
.formular .zeile > span { min-width: 150px; color: var(--text); }
.formular .zeile input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.formular .zeile select,
.formular .zeile textarea {
  flex: 1; border: 0; background: transparent; text-align: right; padding: 4px 0; outline: none; color: var(--text);
}
.formular .zeile textarea { text-align: left; resize: vertical; min-height: 70px; }
.formular .zeile.block { flex-direction: column; align-items: stretch; gap: 4px; }
.formular .zeile.block > span { min-width: 0; font-size: 12px; color: var(--text-2); }
.formular .zeile select { text-align-last: right; cursor: pointer; }
.formular .zeile input::placeholder { color: var(--text-3); }
.formular .zeile input[readonly] { color: var(--text-2); }
.formular .zeile.fehler { background: color-mix(in srgb, var(--rot) 8%, transparent); }
.formular-aktionen { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 26px; }

/* Freistehende Felder (z. B. in Dialogen, Filtern) */
.feld {
  width: 100%; min-height: 34px; padding: 6px 10px;
  border: 1px solid var(--trenner-stark); border-radius: 8px;
  background: var(--bg-feld);
}
.feld:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 25%, transparent); }
textarea.feld { resize: vertical; }
.feld-gruppe { display: flex; flex-direction: column; gap: 4px; }
.feld-gruppe > span { font-size: 12px; color: var(--text-2); font-weight: 500; }

/* iOS-Schalter */
.schalter { position: relative; display: inline-block; width: 46px; height: 28px; flex-shrink: 0; }
.schalter input { opacity: 0; width: 0; height: 0; position: absolute; }
.schalter i { position: absolute; inset: 0; border-radius: 999px; background: var(--fill-stark); transition: background 0.2s; cursor: pointer; }
.schalter i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.2s; }
.schalter input:checked + i { background: var(--gruen); }
.schalter input:checked + i::after { transform: translateX(18px); }
.schalter input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--blau) 45%, transparent); }
.schalter input:disabled + i { opacity: 0.5; cursor: default; }

/* Segmented Control */
.segmente { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill); gap: 2px; margin-bottom: 18px; flex-wrap: wrap; }
.segment { padding: 4px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none !important; }
.segment.aktiv { background: var(--bg-gruppe); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.segmente-input { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill); gap: 2px; }
.segmente-input label { position: relative; }
.segmente-input input { position: absolute; opacity: 0; }
.segmente-input span { display: block; padding: 4px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; }
.segmente-input input:checked + span { background: var(--bg-gruppe); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.segmente-input input:focus-visible + span { outline: 2px solid var(--blau); }

/* Badges, Punkte, Avatare */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--fill); color: var(--text-2); white-space: nowrap; }
.badge-gruen { background: color-mix(in srgb, var(--gruen) 18%, transparent); color: color-mix(in srgb, var(--gruen) 70%, var(--text)); }
.badge-rot { background: color-mix(in srgb, var(--rot) 16%, transparent); color: color-mix(in srgb, var(--rot) 75%, var(--text)); }
.badge-blau { background: color-mix(in srgb, var(--blau) 15%, transparent); color: color-mix(in srgb, var(--blau) 75%, var(--text)); }
.badge-orange { background: color-mix(in srgb, var(--orange) 18%, transparent); color: color-mix(in srgb, var(--orange) 70%, var(--text)); }
.punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(180deg, #a6a6ab, #86868b); color: #fff;
  font-weight: 600; font-size: 14px; letter-spacing: 0.02em;
}
.avatar-klein { width: 28px; height: 28px; font-size: 11.5px; }
.avatar-gross { width: 76px; height: 76px; font-size: 28px; }

/* Listen mit Links */
.liste-link > li > a { color: var(--text); text-decoration: none !important; justify-content: flex-start !important; }
.liste-link > li > a:hover { background: var(--bg-hover); }
.liste-haupt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.liste-haupt small { color: var(--text-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-neben { color: var(--text-2); font-size: 12.5px; text-align: right; flex-shrink: 0; }
.chevron::after { content: "›"; color: var(--text-3); font-size: 20px; line-height: 1; margin-left: 4px; }

/* ------------------------------------------------------------ Start */
.begruessung { margin: 6px 0 20px; }
.gross { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 26px; }
.kachel {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--bg-gruppe); box-shadow: var(--schatten);
  color: var(--text); text-decoration: none !important;
}
.kachel:hover { transform: translateY(-1px); }
.kachel-icon { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--akzent); color: #fff; }
.kachel-zahl { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.05; }
.kachel-titel { font-size: 12.5px; color: var(--text-2); }
.kachel-warnung .kachel-zahl { color: var(--rot); }
.spalten-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 26px; }

/* Leerer Zustand */
.leer-zustand { text-align: center; padding: 70px 20px; color: var(--text-2); max-width: 560px; margin: 0 auto; }
.leer-zustand h2 { color: var(--text); font-size: 22px; margin: 14px 0 8px; }
.leer-icon { font-size: 40px; display: inline-grid; place-items: center; }
.leer-icon.akzent { width: 84px; height: 84px; border-radius: 22px; background: var(--akzent); color: #fff; }

/* ------------------------------------------------------------ Liste | Detail (Split) */
.split { display: grid; grid-template-columns: var(--liste-breite) minmax(0, 1fr); gap: 0; margin: -20px -28px -48px; min-height: calc(100vh - 57px); }
.split-liste { border-right: 1px solid var(--trenner); background: var(--bg-gruppe); display: flex; flex-direction: column; min-width: 0; }
.split-liste-kopf { position: sticky; top: calc(var(--nav-oben, 0px) + var(--toolbar-h, 57px)); z-index: 5; padding: 10px 12px; background: var(--bg-gruppe); border-bottom: 1px solid var(--trenner); display: flex; flex-direction: column; gap: 8px; }
.split-detail { padding: 20px 28px 48px; min-width: 0; }
.suchfeld { position: relative; }
.suchfeld .icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-2); width: 15px; height: 15px; }
.suchfeld input { width: 100%; min-height: 32px; padding: 5px 10px 5px 30px; border: 0; border-radius: 9px; background: var(--fill); outline: none; }
.suchfeld input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 25%, transparent); }
.listen-filter { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.listen-filter a { padding: 2px 10px; border-radius: 999px; background: var(--fill); color: var(--text); text-decoration: none !important; }
.listen-filter a.aktiv { background: var(--akzent); color: #fff; }
.listen-zahl { font-size: 11.5px; color: var(--text-2); padding: 0 4px; }
.eintraege { list-style: none; margin: 0; padding: 4px 8px 20px; }
.eintrag { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--text); text-decoration: none !important; }
.eintrag:hover { background: var(--bg-hover); }
.eintrag.aktiv { background: var(--akzent); color: #fff; }
.eintrag.aktiv small { color: rgba(255,255,255,0.85); }
.eintrag.aktiv .avatar { background: rgba(255,255,255,0.25); }
.eintrag-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.eintrag-text strong { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eintrag-text small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Detail-Kopf (wie Kontakte-App) */
.detail-kopf { display: flex; align-items: center; gap: 18px; margin: 4px 0 18px; flex-wrap: wrap; }
.detail-kopf h2 { font-size: 26px; font-weight: 700; }
.detail-kopf p { margin: 2px 0 0; color: var(--text-2); }
.detail-kopf .knopf-reihe { margin-left: auto; }
.detail-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 24px; align-items: start; }
.gesperrt-hinweis { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }

/* Tabellen */
.tabelle-wrap { overflow-x: auto; background: var(--bg-gruppe); border-radius: var(--radius); box-shadow: var(--schatten); margin-bottom: 22px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 12px; border-bottom: 1px solid var(--trenner); white-space: nowrap; background: var(--bg-gruppe); position: sticky; top: 0; }
.tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--trenner); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover td { background: var(--bg-hover); }
.tabelle .rechts { text-align: right; }
.tabelle .mitte { text-align: center; }
.tabelle input.feld, .tabelle select.feld { min-height: 28px; padding: 3px 7px; }

/* Rechte-Matrix */
.matrix th.dreh { text-align: center; }
.matrix td.mitte input { width: 18px; height: 18px; accent-color: var(--blau); cursor: pointer; }
.matrix .gruppenzeile td { background: var(--fill); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-2); }
.matrix .modul-geplant { color: var(--text-2); }

/* ------------------------------------------------------------ Dialog (Sheet) */
dialog.sheet {
  border: 0; padding: 0; border-radius: 14px;
  width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 40px);
  background: var(--bg-gruppe); color: var(--text);
  box-shadow: var(--schatten-sheet);
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(2px); }
.sheet-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--trenner); }
.sheet-kopf h2 { font-size: 16px; font-weight: 600; }
.sheet-kopf small { color: var(--text-2); font-weight: 400; margin-left: 8px; }
.sheet-inhalt { padding: 16px 18px; overflow-y: auto; max-height: calc(100dvh - 170px); }
.sheet-fuss { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 18px; border-top: 1px solid var(--trenner); flex-wrap: wrap; }
.sheet-fuss .links { margin-right: auto; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.raster-2 .ganz { grid-column: 1 / -1; }
.check-zeile { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check-zeile input { width: 17px; height: 17px; accent-color: var(--blau); }
.meta-zeile { font-size: 12px; color: var(--text-2); }

/* ------------------------------------------------------------ Kalender */
.kalender-wrap { max-width: none; }
.kal-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kal-leiste h2 { font-size: 22px; font-weight: 700; margin: 0 8px; min-width: 190px; }
.kal-leiste .rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.kal-nav { display: inline-flex; border-radius: 8px; background: var(--fill); }
.kal-nav a { display: grid; place-items: center; width: 32px; height: 30px; color: var(--text); text-decoration: none !important; }
.kal-nav a:hover { background: var(--fill-stark); border-radius: 8px; }
.kalender { background: var(--bg-gruppe); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.kal-kopf, .kal-woche { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
.kal-kopf div { padding: 8px 10px; font-size: 11.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--trenner); }
.kal-kw { font-size: 11px; color: var(--text-3); padding: 8px 6px; border-right: 1px solid var(--trenner); border-bottom: 1px solid var(--trenner); text-align: center; }
.kal-tag { min-height: 112px; padding: 4px 4px 6px; border-right: 1px solid var(--trenner); border-bottom: 1px solid var(--trenner); min-width: 0; position: relative; }
.kal-tag:last-child { border-right: 0; }
.kal-woche:last-child .kal-tag, .kal-woche:last-child .kal-kw { border-bottom: 0; }
.kal-tag.anderer-monat { background: color-mix(in srgb, var(--fill) 40%, transparent); }
.kal-tag.anderer-monat .kal-zahl { color: var(--text-3); }
.kal-tag.wochenende { background: color-mix(in srgb, var(--fill) 25%, transparent); }
.kal-zahl { display: flex; justify-content: flex-end; font-size: 12.5px; font-weight: 500; padding: 1px 4px 3px; }
.kal-zahl a { color: inherit; text-decoration: none !important; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.kal-zahl a:hover { background: var(--fill); }
.kal-tag.heute .kal-zahl a { background: var(--rot); color: #fff; font-weight: 700; }
.kal-termin {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  margin: 0 0 2px; padding: 2px 6px; border-radius: 5px;
  font-size: 11.5px; line-height: 1.35; font-weight: 500;
  background: color-mix(in srgb, var(--tf) 18%, var(--bg-gruppe));
  color: color-mix(in srgb, var(--tf) 70%, var(--text));
  border-left: 3px solid var(--tf);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kal-termin:hover { background: color-mix(in srgb, var(--tf) 30%, var(--bg-gruppe)); }
.kal-termin.voll { background: var(--tf); color: #fff; }
.kal-mehr { font-size: 11px; color: var(--text-2); padding: 0 6px; }
/* Wochenansicht */
.kal-wochenansicht .kal-tag { min-height: 360px; }
.kal-wochenansicht .kal-termin { white-space: normal; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 4px; font-size: 12px; color: var(--text-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }

/* Termine ausgeben */
.ausgabe-raster { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; }
.ausgabe-text { width: 100%; min-height: 340px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre; }
.arten-liste { max-height: 340px; overflow-y: auto; border: 1px solid var(--trenner-stark); border-radius: 8px; padding: 6px 10px; }
.arten-liste .gruppe-name { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-2); margin: 8px 0 2px; }

/* ------------------------------------------------------------ Login & Installer */
body.schlicht { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; }
.schlicht-karte { width: min(400px, 100%); }
.schlicht-karte.breit { width: min(620px, 100%); }
.schlicht-marke { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-2); margin-bottom: 20px; }
.schlicht-karte h1 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 14px; }
.schlicht-karte > p { text-align: center; }
.schlicht-link { text-align: center; margin-top: 18px; font-size: 13.5px; }
.code-feld { font-family: var(--mono); letter-spacing: 0.2em; font-size: 18px !important; }
.qr-box { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 16px; }
.qr-box svg { width: 180px; height: 180px; border-radius: 8px; flex-shrink: 0; }
.codes-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; font-family: var(--mono); font-size: 14px; padding: 14px 16px; }

/* ------------------------------------------------------------ Kleinere Bildschirme */
@media (max-width: 1100px) {
  :root { --liste-breite: 280px; }
}
@media (max-width: 900px) {
  .layout-sidebar .app { flex-direction: column; }
  .layout-sidebar .app-nav { width: auto; height: auto; position: sticky; top: 0; z-index: 30; flex-direction: row; align-items: center; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--trenner); }
  .layout-sidebar .nav-kopf { display: none; }
  .layout-sidebar .nav-liste { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .layout-sidebar .nav-text, .layout-tabs .nav-text { display: none; }
  .layout-sidebar .nav-eintrag { padding: 4px; }
  .layout-sidebar .nav-fuss { border: 0; margin: 0 0 0 6px; padding: 0; }
  .layout-sidebar .nav-user-text { display: none; }
  .layout-sidebar .toolbar, .layout-tabs .toolbar { top: var(--nav-h, 47px); }
  .toolbar, .inhalt, .flash-bereich { padding-left: 16px; padding-right: 16px; }
  .split { grid-template-columns: 1fr; margin: -20px -16px -48px; }
  .split.mit-detail .split-liste { display: none; }
  .split:not(.mit-detail) .split-detail { display: none; }
  .split-detail { padding: 16px; }
  .ausgabe-raster, .raster-2 { grid-template-columns: 1fr; }
  .kal-kopf, .kal-woche { grid-template-columns: 0 repeat(7, minmax(0, 1fr)); }
  .kal-kw { visibility: hidden; padding: 0; border: 0; }
  .kal-tag { min-height: 74px; padding: 2px; }
  .kal-termin { font-size: 0; height: 6px; padding: 0; border-left: 0; background: var(--tf); }
  .kal-wochenansicht .kal-termin { font-size: 11px; height: auto; padding: 2px 4px; }
  .formular .zeile > span { min-width: 110px; }
}
@media (max-width: 520px) {
  .formular .zeile:not(.block) { flex-wrap: wrap; }
  .formular .zeile:not(.block) > span { min-width: 100%; font-size: 12px; color: var(--text-2); }
  .formular .zeile input:not([type="checkbox"]), .formular .zeile select { text-align: left; }
  .toolbar-titel { font-size: 17px; }
  .gross { font-size: 24px; }
}

@media print {
  .app-nav, .toolbar-rechts, .flash-bereich { display: none !important; }
  .toolbar { position: static; border: 0; }
  body { background: #fff; }
}

/* ------------------------------------------------------------ Ergänzungen */
.kal-segmente { margin: 0; }
.einstellungen-liste .nav-icon { width: 30px; height: 30px; border-radius: 8px; color: #fff; }
.einstellungen-liste > li > a { gap: 12px; }
.neue-zeile td { background: color-mix(in srgb, var(--blau) 5%, transparent); }
.layout-wahl { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.layout-option { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 12px; border-radius: var(--radius); background: var(--bg-gruppe); box-shadow: var(--schatten); border: 2px solid transparent; min-width: 180px; }
.layout-option:has(input:checked) { border-color: var(--blau); }
.layout-option input { position: absolute; opacity: 0; }
.layout-option small { color: var(--text-2); font-size: 12px; }
.layout-vorschau { position: relative; display: block; width: 150px; height: 96px; border-radius: 8px; background: var(--bg); border: 1px solid var(--trenner-stark); overflow: hidden; margin-bottom: 6px; }
.layout-vorschau i { position: absolute; background: var(--fill-stark); }
.layout-vorschau b { position: absolute; background: var(--bg-gruppe); border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.vorschau-sidebar i { left: 0; top: 0; bottom: 0; width: 34px; }
.vorschau-sidebar b:nth-of-type(1) { left: 40px; top: 8px; width: 34px; bottom: 8px; }
.vorschau-sidebar b:nth-of-type(2) { left: 80px; top: 8px; right: 8px; bottom: 8px; }
.vorschau-tabs i { left: 0; right: 0; top: 0; height: 16px; }
.vorschau-tabs b:nth-of-type(1) { left: 8px; top: 24px; width: 40px; bottom: 8px; }
.vorschau-tabs b:nth-of-type(2) { left: 54px; top: 24px; right: 8px; bottom: 8px; }
/* Lange Werte umbrechen statt abschneiden */
.zeile.block > span, .zeile.block > div { flex-shrink: 1 !important; min-width: 0; overflow-wrap: anywhere; }
.gruppe > .zeile > span:last-child:not(:first-child) { min-width: 0; overflow-wrap: anywhere; text-align: right; }
@media (max-width: 900px) {
  .layout-tabs .nav-kopf { display: none; }
  .layout-tabs .nav-liste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
  .layout-tabs .nav-eintrag { padding: 6px 9px; }
  /* Wochenansicht am Handy als Tagesliste */
  .kal-wochenansicht .kal-kopf { display: none; }
  .kal-wochenansicht .kal-woche { grid-template-columns: 1fr; }
  .kal-wochenansicht .kal-kw { display: none; }
  .kal-wochenansicht .kal-tag { min-height: 40px; position: relative; padding: 8px 10px 6px 88px; border-right: 0; }
  .kal-wochenansicht .kal-tag::before { content: attr(data-wt); position: absolute; left: 12px; top: 11px; font-weight: 600; font-size: 13px; }
  .kal-wochenansicht .kal-zahl { display: none; }
  .kal-wochenansicht .kal-termin { font-size: 13px; height: auto; padding: 4px 8px; white-space: normal; border-left: 3px solid var(--tf); background: color-mix(in srgb, var(--tf) 16%, var(--bg-gruppe)); color: var(--text); }
  .kal-wochenansicht .kal-termin.voll { background: var(--tf); color: #fff; }
}