/* Couture Admin · Gestaltung (Runde 32: im Stil der Couture-Seite)
   Elfenbein als Grund, Marineblau als Schrift und einzige Akzentfarbe, Gold nur als feine Linie und kleine Auszeichnung.
   Schriften wie auf der Seite: Libre Caslon Display (Überschriften), EB Garamond (kursive Marke), Jost (Bedienung, Zahlen).
   Raster 8 px, Touch-Ziele mindestens 44 px. Hell ist Standard (wie die Seite); „Nacht“ wählt man im Konto (Klasse .nacht am <html>).
   Aufbau: Handy (< 768 px) eine Spalte + Leiste unten · Tablet Seitenleiste + eine Spalte · Desktop (≥ 1100 px) Seitenleiste + Liste + Detail. */

@font-face { font-family: "Libre Caslon Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/libre-caslon-display-normal-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Caslon Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/libre-caslon-display-normal-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("schriften/jost-normal-300-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("schriften/jost-normal-300-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("schriften/eb-garamond-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("schriften/eb-garamond-italic-latin.woff2") format("woff2"); }

:root {
  --navy: #1E2447;
  --elfenbein: #FBF7F0;
  --gold: #957B46;

  --grund: #FBF7F0;          /* Seitengrund wie couture-escort.com */
  --flaeche: #FFFEFB;        /* Papier: Listen, Detail, Tafeln */
  --flaeche-2: #F3ECE1;      /* Champagner: eingelassene Flächen, eingehende Nachrichten */
  --leiste: #1E2447;         /* Seitenleiste in Marineblau */
  --leiste-2: #262D55;
  --leiste-text: rgba(251, 247, 240, 0.70);
  --leiste-text-stark: #FBF7F0;
  --leiste-linie: rgba(251, 247, 240, 0.10);
  --linie: rgba(30, 36, 71, 0.10);
  --linie-stark: rgba(30, 36, 71, 0.20);
  --text: #1E2447;           /* Schrift in Marineblau wie auf der Seite */
  --text-2: #5A6080;         /* Nebentext, 5,9 : 1 auf Elfenbein */
  --akzent: #1E2447;
  --akzent-text: #FBF7F0;
  --akzent-zart: rgba(30, 36, 71, 0.05);
  --akzent-mittel: rgba(30, 36, 71, 0.10);
  --link: #2B3570;
  --gold-linie: #957B46;
  --gold-text: #7A6436;      /* Gold für kleine Schrift, 5,3 : 1 */
  --gold-zart: rgba(149, 123, 70, 0.12);
  --notiz: #F6EEDC;
  --notiz-rand: #D9C69C;
  --gefahr: #A3302A;
  --gefahr-zart: rgba(163, 48, 42, 0.08);
  --gut: #2E6B4A;
  --warn: #8A5A12;
  --schatten: 0 1px 2px rgba(30, 36, 71, 0.05), 0 12px 32px rgba(30, 36, 71, 0.08);

  --schrift: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --schrift-marke: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --schrift-titel: "Libre Caslon Display", "EB Garamond", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r: 14px;
  --r-klein: 10px;
  --unten: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

/* Nacht: tiefes Marineblau, Elfenbein-Schrift, Gold heller */
:root.nacht {
  --grund: #0F1224;
  --flaeche: #151933;
  --flaeche-2: #1E2342;
  --leiste: #0A0C1A;
  --leiste-2: #151933;
  --leiste-linie: rgba(251, 247, 240, 0.08);
  --linie: rgba(243, 238, 228, 0.09);
  --linie-stark: rgba(243, 238, 228, 0.18);
  --text: #F3EEE4;
  --text-2: #A7ABC0;
  --akzent: #E9DFC9;         /* Hauptknöpfe in hellem Champagner, Schrift Marineblau (12 : 1) */
  --akzent-text: #141833;
  --akzent-zart: rgba(233, 223, 201, 0.06);
  --akzent-mittel: rgba(233, 223, 201, 0.12);
  --link: #D9C9A3;
  --gold-linie: #C2A66B;
  --gold-text: #D2B77E;
  --gold-zart: rgba(194, 166, 107, 0.14);
  --notiz: #2B2718;
  --notiz-rand: #5C4F31;
  --gefahr: #F08A80;
  --gefahr-zart: rgba(240, 138, 128, 0.10);
  --gut: #7CC79C;
  --warn: #E2B66A;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 15px/1.5 var(--schrift); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
p { margin: 0; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.leise { color: var(--text-2); }
.noscript { padding: 24px; }

/* Logo „COUTURE Admin“: EB Garamond, Goldlinie darunter */
.logo { font-family: var(--schrift-marke); font-size: 22px; letter-spacing: 0.02em; color: var(--text); white-space: nowrap; }
.logo-wort { font-weight: 600; letter-spacing: 0.16em; }
.marke-titel { font-family: var(--schrift-marke); font-weight: 500; font-size: 28px; letter-spacing: 0.005em; }

/* Ladekreis */
.kreisel { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linie-stark); border-top-color: var(--text); animation: drehen 0.8s linear infinite; display: inline-block; }
@keyframes drehen { to { transform: rotate(360deg); } }
.start-laden { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 24px; }

/* ---------- Knöpfe & Felder ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-klein);
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text);
  font-weight: 500; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}
.knopf:hover { background: var(--akzent-zart); }
.knopf:disabled { opacity: 0.45; cursor: default; }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.knopf.haupt:hover { filter: brightness(1.12); }
.knopf.gefahr { color: var(--gefahr); border-color: color-mix(in srgb, var(--gefahr) 40%, transparent); }
.knopf.gefahr:hover { background: var(--gefahr-zart); }
.knopf.gefahr.voll { background: var(--gefahr); color: #fff; border-color: var(--gefahr); }
.nacht .knopf.gefahr.voll { color: #1a0b09; }
.knopf.still { border-color: transparent; background: transparent; }
.knopf.still:hover { background: var(--akzent-zart); }
.knopf.symbol { width: 44px; padding: 0; }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf.breit { width: 100%; }

.feld { display: grid; gap: 6px; }
.feld > span, .feld-titel { font-size: 13px; font-weight: 500; color: var(--text-2); }
.eingabe {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r-klein);
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text); font-size: 16px; /* 16 px: iOS zoomt sonst */
}
.eingabe:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--akzent-mittel); }
textarea.eingabe { min-height: 96px; resize: vertical; line-height: 1.45; }
select.eingabe { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.hinweis { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.fehler-text { color: var(--gefahr); font-size: 14px; }
.form { display: grid; gap: 16px; }
.form-reihe { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Haken und Schalter */
.haken { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.haken input { width: 20px; height: 20px; accent-color: var(--akzent); flex: none; margin: 0; }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; cursor: pointer; }
.schalter input { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 16px; background: var(--linie-stark); position: relative; cursor: pointer; flex: none; margin: 0; transition: background-color 0.2s; }
.schalter input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s; }
.schalter input:checked { background: var(--akzent); }
.schalter input:checked::after { transform: translateX(20px); }

/* Segment-Umschalter */
.segmente { display: inline-flex; padding: 2px; border-radius: var(--r-klein); background: var(--flaeche-2); gap: 2px; max-width: 100%; }
.segmente button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-weight: 500; cursor: pointer; white-space: nowrap; }
.segmente button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.segmente.voll { display: flex; width: 100%; }
.segmente.voll button { flex: 1; }

/* Marken (kleine Etiketten) */
.etikett { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; background: var(--flaeche-2); color: var(--text-2); white-space: nowrap; }
.etikett.akzent { background: var(--akzent-mittel); color: var(--text); }
.etikett.gefahr { background: var(--gefahr-zart); color: var(--gefahr); }
.etikett.gut { background: color-mix(in srgb, var(--gut) 14%, transparent); color: var(--gut); }
.etikett.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.etikett svg { width: 12px; height: 12px; }

/* ---------- Anmeldung ---------- */
.anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px calc(24px + var(--unten)); }
.anmeldung-box { width: 100%; max-width: 380px; display: grid; gap: 24px; }
.anmeldung-kopf { display: grid; gap: 12px; justify-items: center; text-align: center; }
.anmeldung-kopf .logo { font-size: 30px; }
.goldlinie { width: 48px; height: 1px; background: var(--gold-linie); }
.anmeldung-kopf p { color: var(--text-2); }
.code-eingabe { font-size: 28px; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; padding-left: 0.4em; }

/* ---------- Gerüst ---------- */
.geruest { min-height: 100dvh; }
.seitenleiste { display: none; }
.unten-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--flaeche) 92%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--linie); padding-bottom: var(--unten);
}
.unten-leiste a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; font-size: 11px; font-weight: 500; color: var(--text-2); text-decoration: none; position: relative; }
.unten-leiste a[aria-current="page"] { color: var(--text); }
.unten-leiste a[aria-current="page"] svg { color: var(--akzent); }
.nacht .unten-leiste a[aria-current="page"] svg { color: var(--link); }
.unten-leiste svg { width: 24px; height: 24px; }
.unten-leiste .zahl-punkt { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--akzent); color: var(--akzent-text); font-size: 11px; line-height: 18px; text-align: center; }
.hauptbereich { padding-bottom: calc(64px + var(--unten)); min-width: 0; }

/* Kopfzeile je Seite (Handy: klebt oben) */
.kopf {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 6px 16px; padding-top: calc(6px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--grund) 90%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linie);
}
.kopf h1 { font-size: 20px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf .zurueck { margin-left: -12px; }
.seite { padding: 16px; display: grid; gap: 24px; max-width: 960px; }
.abschnitt { display: grid; gap: 12px; }
.abschnitt-titel { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (min-width: 768px) {
  body { overflow: hidden; }
  .geruest { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100dvh; }
  .unten-leiste { display: none; }
  .hauptbereich { padding-bottom: 0; overflow: auto; height: 100dvh; }
  .seitenleiste { display: flex; flex-direction: column; background: var(--leiste); border-right: 1px solid var(--linie); height: 100dvh; overflow-y: auto; }
  .seitenleiste-logo { padding: 20px 20px 16px; display: grid; gap: 12px; }
  .seitenleiste-logo .logo { font-size: 19px; }
  .hauptbereich > .kopf { padding-left: 32px; padding-right: 24px; }
  .hauptbereich > .kopf .zurueck { margin-left: -14px; }
  .seitenleiste nav { display: grid; gap: 2px; padding: 0 8px 16px; }
  .nav-link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--r-klein); color: var(--text); text-decoration: none; font-weight: 500; }
  .nav-link svg { width: 20px; height: 20px; color: var(--text-2); flex: none; }
  .nav-link:hover { background: var(--akzent-zart); }
  .nav-link[aria-current="page"] { background: var(--akzent-mittel); }
  .nav-link[aria-current="page"] svg { color: var(--text); }
  .nav-link .zahl { margin-left: auto; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
  .nav-link .zahl.betont { color: var(--text); font-weight: 600; }
  .nav-unter { display: grid; gap: 2px; margin: 2px 0 8px; }
  .nav-unter .nav-link { padding-left: 44px; min-height: 36px; font-weight: 400; font-size: 14px; }
  .nav-trenner { height: 1px; background: var(--linie); margin: 8px 12px; }
  .seitenleiste-fuss { margin-top: auto; padding: 16px 20px; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kopf { padding-top: 6px; background: var(--grund); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .seite { padding: 24px 32px 48px; }
}

/* ---------- Posteingang ---------- */
.post { min-width: 0; }
.liste-pane { min-width: 0; }
.detail-pane { min-width: 0; background: var(--flaeche); container-type: inline-size; }
.post.hat-detail .liste-pane { display: none; }
.post:not(.hat-detail) .detail-pane { display: none; }

@media (min-width: 768px) {
  .post { height: 100dvh; }
  .liste-pane, .detail-pane { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 1100px) {
  .post { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); }
  .post.hat-detail .liste-pane, .post:not(.hat-detail) .detail-pane { display: block; }
  .liste-pane { border-right: 1px solid var(--linie); }
  .detail-pane > .kopf { display: none; }   /* Desktop: Liste steht daneben, Name steht groß im Detail */
}

/* Ordner als Leiste (nur ohne Seitenleiste) */
.ordner-leiste { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ordner-leiste::-webkit-scrollbar { display: none; }
.ordner-leiste a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--linie-stark); text-decoration: none; color: var(--text); font-size: 14px; font-weight: 500; }
.ordner-leiste a[aria-current="page"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.ordner-leiste .zahl { font-size: 12px; opacity: 0.75; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .ordner-leiste { display: none; } }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; gap: 20px; padding: 12px 16px 8px; }
.kennzahl { display: grid; gap: 0; }
.kennzahl b { font-size: 24px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahl span { font-size: 12px; color: var(--text-2); }
.balken { width: 100%; height: 36px; display: block; }
.balken rect { fill: var(--akzent); opacity: 0.28; }
.balken rect.heute { opacity: 0.9; }
.nacht .balken rect { fill: var(--link); }
.balken-wrap { display: grid; gap: 2px; min-width: 0; }
.balken-wrap span { font-size: 11px; color: var(--text-2); text-align: right; }

.suche { position: relative; padding: 4px 16px 12px; }
.suche svg { position: absolute; left: 28px; top: 50%; transform: translateY(calc(-50% - 4px)); width: 18px; height: 18px; color: var(--text-2); pointer-events: none; }
.suche .eingabe { padding-left: 38px; padding-right: 44px; background: var(--flaeche-2); border-color: transparent; }
.suche .eingabe:focus { background: var(--flaeche); }
.suche .leeren { position: absolute; right: 16px; top: 4px; }
.suche.ohne-rand { padding: 0; }
.suche.ohne-rand svg { left: 12px; transform: translateY(-50%); }

/* Listenzeile einer Anfrage */
.zeilen { border-top: 1px solid var(--linie); }
.zeile {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 8px; row-gap: 2px;
  padding: 12px 16px 12px 8px; border-bottom: 1px solid var(--linie); text-decoration: none; color: inherit; position: relative;
}
.zeile:hover { background: var(--akzent-zart); }
.zeile[aria-current="true"] { background: var(--akzent-mittel); }
.zeile > :not(.punkt) { grid-column: 2; }
.zeile .punkt { grid-row: 1; grid-column: 1; align-self: center; width: 8px; height: 8px; border-radius: 50%; margin-left: 2px; }
.zeile.ungelesen .punkt { background: var(--akzent); }
.nacht .zeile.ungelesen .punkt { background: var(--link); }
.z-kopf { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.z-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile.ungelesen .z-name { font-weight: 600; }
.z-zeit { flex: none; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.z-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); min-width: 0; }
.z-meta .z-ort { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-meta .z-zeichen { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.z-land { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--linie-stark); color: var(--text-2); }
.z-vorschau { font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.stern { width: 14px; height: 14px; color: var(--gold-linie); }
.schloss { width: 14px; height: 14px; color: var(--gefahr); }
.zeile.frisch { background: color-mix(in srgb, var(--gold-linie) 9%, transparent); }
.zeile.frisch::after { content: "Neu"; position: absolute; right: 16px; bottom: 12px; font-size: 11px; font-weight: 600; color: var(--gold-linie); letter-spacing: 0.04em; }
.zeile.frisch .z-vorschau { padding-right: 32px; }

.leer { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 48px 24px; color: var(--text-2); }
.leer svg { width: 36px; height: 36px; opacity: 0.6; }
.leer b { color: var(--text); font-weight: 500; font-size: 16px; }
.platzhalter { padding: 12px 16px; border-bottom: 1px solid var(--linie); display: grid; gap: 8px; }
.platzhalter i { display: block; height: 12px; border-radius: 6px; background: var(--flaeche-2); animation: pulsieren 1.2s ease-in-out infinite; }
.platzhalter i:nth-child(1) { width: 45%; height: 14px; }
.platzhalter i:nth-child(2) { width: 70%; }
.platzhalter i:nth-child(3) { width: 90%; }
@keyframes pulsieren { 50% { opacity: 0.5; } }
.fehler-box { margin: 16px; padding: 16px; border-radius: var(--r); background: var(--gefahr-zart); color: var(--text); display: grid; gap: 12px; justify-items: start; }

/* ---------- Anfrage-Detail ---------- */
.detail-leer { height: 100%; min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--text-2); }
.detail-leer svg { width: 40px; height: 40px; opacity: 0.5; }
.d-kopf { padding: 16px 16px 12px; display: grid; gap: 12px; border-bottom: 1px solid var(--linie); }
.d-titel { display: grid; gap: 4px; }
.d-titel h2 { font-family: var(--schrift-marke); font-weight: 500; font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; }
.d-unter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.d-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.d-aktionen .segmente { flex: none; }
.d-aktionen .rechts { display: flex; gap: 8px; flex-wrap: wrap; }
@container (min-width: 600px) { .d-aktionen .rechts { margin-left: auto; } }
.kopf .zurueck:not(.symbol) { padding: 0 12px 0 4px; gap: 2px; font-weight: 500; }
.knopf[aria-pressed="true"] .stern-voll { fill: currentColor; }
.knopf.wichtig[aria-pressed="true"] { color: var(--gold-linie); border-color: color-mix(in srgb, var(--gold-linie) 55%, transparent); }
.gesperrt-band { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-klein); background: var(--gefahr-zart); color: var(--text); font-size: 14px; }
.gesperrt-band svg { width: 18px; height: 18px; color: var(--gefahr); flex: none; margin-top: 2px; }

.d-raster { display: grid; gap: 24px; padding: 16px 16px 32px; grid-template-areas: "angaben" "verlauf" "antwort" "herkunft" "gleich"; }
.d-angaben { grid-area: angaben; } .d-verlauf { grid-area: verlauf; } .d-antwort { grid-area: antwort; } .d-herkunft { grid-area: herkunft; } .d-gleich { grid-area: gleich; }
@container (min-width: 760px) {
  .d-raster { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "verlauf angaben" "antwort herkunft" "antwort gleich" ". gleich"; align-items: start; column-gap: 32px; }
  .d-kopf { padding: 20px 32px 16px; }
  .d-raster { padding: 20px 32px 40px; }
}

.liste-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 14px; }
.liste-dl dt { color: var(--text-2); }
.liste-dl dd { margin: 0; overflow-wrap: anywhere; }
.kasten { border: 1px solid var(--linie); border-radius: var(--r); padding: 16px; display: grid; gap: 12px; background: var(--flaeche); }
.kasten.ruhig { background: var(--grund); }

/* Verlauf wie ein Chat */
.verlauf { display: grid; gap: 12px; }
.blase { max-width: 85%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; }
.blase-meta { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.msg { display: grid; justify-items: start; }
.msg.in .blase { background: var(--flaeche-2); border-bottom-left-radius: 4px; }
.msg.out { justify-items: end; }
.msg.out .blase { background: var(--akzent); color: var(--akzent-text); border-bottom-right-radius: 4px; }
.msg.out .blase-meta { text-align: right; }
.msg.notiz .blase { max-width: 100%; background: var(--notiz); border: 1px dashed var(--notiz-rand); border-radius: var(--r-klein); }
.msg.notiz .blase::before { content: "Interne Notiz"; display: block; font-size: 12px; font-weight: 600; color: var(--warn); margin-bottom: 2px; letter-spacing: 0.02em; }

.antwort { display: grid; gap: 12px; }
.antwort .eingabe { min-height: 120px; }
.antwort.notiz-modus .eingabe { background: var(--notiz); border-color: var(--notiz-rand); }
.antwort-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.antwort-fuss .hinweis { flex: 1 1 220px; }

.gleich-liste { display: grid; border-top: 1px solid var(--linie); }
.gleich-liste a { display: grid; gap: 2px; padding: 10px 0; min-height: 44px; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--text); }
.gleich-liste a:hover { background: var(--akzent-zart); }
.gleich-liste small { color: var(--text-2); font-size: 13px; }

/* ---------- Dialoge ---------- */
dialog.dialog {
  border: 0; padding: 0; border-radius: 14px; background: var(--flaeche); color: var(--text);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-shadow: var(--schatten);
}
dialog.dialog::backdrop { background: rgba(10, 12, 24, 0.45); }
.dialog-inhalt { display: grid; gap: 16px; padding: 24px; overflow-y: auto; max-height: calc(100dvh - 48px); }
.dialog-inhalt h2 { font-size: 20px; }
.dialog-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 8px; }
@media (max-width: 767px) {
  dialog.dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92dvh; }
  .dialog-inhalt { padding: 20px 16px calc(20px + var(--unten)); max-height: 92dvh; }
  .dialog-knoepfe { flex-direction: column-reverse; }
  .dialog-knoepfe .knopf { width: 100%; }
}
.passwort-gross { font-family: var(--mono); font-size: 26px; letter-spacing: 0.06em; padding: 16px; border-radius: var(--r); background: var(--flaeche-2); text-align: center; word-break: break-all; user-select: all; }

/* Meldungen (unten, kurz) */
.meldungen { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + var(--unten)); z-index: 100; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
@media (min-width: 768px) { .meldungen { bottom: 24px; left: auto; right: 24px; transform: none; width: 360px; } }
.meldung { padding: 12px 16px; border-radius: var(--r); background: #1E2447; color: #fff; box-shadow: var(--schatten); font-size: 14px; animation: rein 0.2s ease-out; pointer-events: auto; }
.meldung.fehler { background: #8E2A24; }
@keyframes rein { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Tabellen-artige Listen (Sperren, Mitglieder, Damen, Protokoll) ---------- */
.reihen { display: grid; border-top: 1px solid var(--linie); }
.reihe { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--linie); min-width: 0; }
a.reihe, button.reihe { text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; width: 100%; font: inherit; }
a.reihe:hover, button.reihe:hover { background: var(--akzent-zart); }
.reihe-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.reihe-kopf b { font-weight: 500; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reihe-unter { font-size: 13px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.reihe-mit-knopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }

/* Mitglieder auf breiten Bildschirmen als Spalten */
@media (min-width: 1100px) {
  .mitglied-reihe { grid-template-columns: minmax(0, 2fr) 110px 120px 100px minmax(0, 1.3fr); align-items: center; gap: 16px; padding: 12px 8px; }
  .mitglied-reihe .reihe-unter { display: contents; }
  .mitglied-kopfzeile { display: grid; grid-template-columns: minmax(0, 2fr) 110px 120px 100px minmax(0, 1.3fr); gap: 16px; padding: 0 8px 8px; font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
}
@media (max-width: 1099px) { .mitglied-kopfzeile { display: none; } }
/* Newsletter: wie Mitglieder, dazu der Löschknopf rechts */
.nl-reihe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
.nl-reihe .reihe-unter { grid-column: 1; }
.nl-reihe > .knopf { grid-column: 2; grid-row: 1 / span 2; }
@media (min-width: 1100px) {
  .nl-reihe, .nl-kopfzeile { grid-template-columns: minmax(0, 2fr) 230px 90px 110px minmax(0, 1fr) 44px; }
  .nl-reihe .reihe-unter { grid-column: auto; }
  .nl-reihe > .knopf { grid-column: auto; grid-row: auto; }
  .nl-kopfzeile::after { content: ''; }
}

/* Länder */
.laender-liste { display: grid; border-top: 1px solid var(--linie); max-height: 56vh; overflow-y: auto; overscroll-behavior: contain; }
.laender-liste .haken { padding: 0 4px; border-bottom: 1px solid var(--linie); }
.laender-liste .haken .code { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: 0.04em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 6px 0 12px; border-radius: 18px; background: var(--akzent-mittel); font-size: 14px; border: 0; cursor: pointer; color: var(--text); }
.chip svg { width: 16px; height: 16px; }
.speicher-leiste { position: sticky; bottom: calc(64px + var(--unten)); display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--linie-stark); box-shadow: var(--schatten); z-index: 5; flex-wrap: wrap; }
@media (min-width: 768px) { .speicher-leiste { bottom: 16px; } }

/* Damen */
.dame-reihe { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; display: grid; }
.daumen { width: 56px; height: 72px; border-radius: 6px; object-fit: cover; background: var(--flaeche-2); }
.daumen.leer-bild { display: grid; place-items: center; color: var(--text-2); }
.daumen.leer-bild svg { width: 22px; height: 22px; }
.foto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 420px) { .foto-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foto { display: grid; gap: 4px; min-width: 0; }
.foto-bild { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-klein); overflow: hidden; background: var(--flaeche-2); }
.foto-bild img { width: 100%; height: 100%; object-fit: cover; }
.foto-bild .etikett { position: absolute; left: 8px; top: 8px; background: rgba(20, 22, 40, 0.75); color: #fff; }
.foto-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.foto-knoepfe .knopf { padding: 0; min-width: 0; }
.hochladen { display: grid; gap: 8px; padding: 16px; border: 1px dashed var(--linie-stark); border-radius: var(--r); justify-items: start; }
.fortschritt { width: 100%; height: 6px; border-radius: 3px; background: var(--flaeche-2); overflow: hidden; }
.fortschritt i { display: block; height: 100%; background: var(--akzent); transition: width 0.2s; }
.nacht .fortschritt i { background: var(--link); }

/* Konto */
.geheimnis { font-family: var(--mono); font-size: 22px; letter-spacing: 0.08em; padding: 16px; border-radius: var(--r); background: var(--flaeche-2); text-align: center; word-spacing: 0.3em; user-select: all; overflow-wrap: anywhere; }
.schritte { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============ Backend 2 · Phase 1: Rechte, Kunden, Team ============ */
.abgekuerzt-band, .freigabe-band { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); background: var(--flaeche-2); color: var(--text); margin: 12px 0 0; }
.abgekuerzt-band > span:first-of-type, .freigabe-band > span { flex: 1; font-size: 14px; line-height: 1.45; }
.abgekuerzt-band > svg, .freigabe-band > svg { flex: none; width: 20px; height: 20px; }
.freigabe-band { text-decoration: none; margin: 0 0 12px; grid-column: 1 / -1; background: color-mix(in srgb, var(--akzent) 14%, var(--flaeche)); }
.freigabe-band:hover { background: color-mix(in srgb, var(--akzent) 22%, var(--flaeche)); }
.rechte-gruppen { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.rechte-gruppen[disabled] { opacity: .6; }
.rechte-gruppe { border-top: 1px solid var(--linie); padding-top: 8px; }
.rechte-g-titel { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.rechte-gruppe .haken span { font-size: 15px; }
.team-reihe .reihe-kopf .etikett { flex: none; }
.seitenleiste-fuss { line-height: 1.4; }
@media (min-width: 1100px) {
  .kunden-reihe, .kunden-kopfzeile { grid-template-columns: minmax(0, 2fr) 120px 120px 140px minmax(0, 1fr); }
}

.nur-handy { display: none; }
@media (max-width: 767px) { .nur-handy { display: block; } }
.nur-handy .reihe svg { width: 20px; height: 20px; flex: none; }
.nur-handy .reihe-kopf { gap: 12px; }

/* ============ Backend 2 · Phase 2: Übersicht und Termine ============ */
.kopf-datum { font-size: 14px; }
.dash-gruss { font-family: 'EB Garamond', Georgia, serif; font-size: 28px; margin: 0 0 20px; }
.dash-raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.dash-k { border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); padding: 16px; display: grid; gap: 8px; min-width: 0; }
.dash-k.breit { grid-column: span 2; }
@media (max-width: 640px) { .dash-k.breit { grid-column: auto; } .dash-raster { grid-template-columns: 1fr; } }
.dash-k header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.dash-k h2 { font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.dash-k header a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); text-decoration: none; min-height: 44px; margin: -10px 0; }
.dash-k header a:hover { color: var(--text); }
.dash-k header a svg { width: 14px; height: 14px; }
.dash-zahl { font-size: 34px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 10px; }
.dash-unter { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.45; }
.trend { font-weight: 600; }
.trend.hoch { color: var(--gut, #2f8f5b); }
.trend.runter { color: var(--gefahr, #c0392b); }
.live-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gut, #2f8f5b); box-shadow: 0 0 0 0 rgba(47,143,91,.5); animation: puls 2s infinite; flex: none; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(47,143,91,.45); } 70% { box-shadow: 0 0 0 10px rgba(47,143,91,0); } 100% { box-shadow: 0 0 0 0 rgba(47,143,91,0); } }
@media (prefers-reduced-motion: reduce) { .live-punkt { animation: none; } }
.dash-paar { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.dash-paar div { display: grid; }
.dash-paar b { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dash-paar span { font-size: 13px; color: var(--text-2); }
.dash-liste { display: grid; margin-top: 4px; }
.dash-klein { font-size: 12px; color: var(--text-2); margin: 4px 0; }
.dash-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); color: inherit; text-decoration: none; min-height: 44px; }
.dash-zeile > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-zeile b { font-variant-numeric: tabular-nums; font-weight: 500; }
.dash-zeile .kurz { font-size: 13px; }
a.dash-zeile:hover { background: var(--flaeche-2); }
.dash-hinweis { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin: 4px 0 0; }
.dash-hinweis svg { width: 16px; height: 16px; flex: none; }
.dash-k.hinweis-k { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }
.diagramm { display: grid; gap: 4px; }
.diagramm svg { width: 100%; height: 72px; display: block; }
.diagramm .b { fill: var(--akzent); }
.diagramm .b.heute, .diagramm .b-g.an .b { fill: color-mix(in srgb, var(--akzent) 55%, var(--text)); }
.diagramm .b-null { fill: var(--linie); }
.diagramm .b-hit { fill: transparent; }
.diagramm-wert { font-size: 13px; color: var(--text-2); min-height: 18px; margin: 0; font-variant-numeric: tabular-nums; }
.t-zeit { display: grid; flex: none; width: 64px; }
.t-zeit b { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.t-zeit small, .t-was small { font-size: 12px; color: var(--text-2); }
.t-was { display: grid; flex: 1; min-width: 0; gap: 2px; }
.t-was > b, .t-was small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termin-reihe { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.t-betrag { font-variant-numeric: tabular-nums; font-weight: 500; }
.form-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
@media (max-width: 480px) { .form-paar { grid-template-columns: 1fr; } }

/* ============ Backend 2 · Phase 3: Messenger ============ */
.messenger { border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); padding: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(78dvh, 880px); overflow: hidden; }
.m-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.m-kopf .abschnitt-titel { margin: 0; }
.m-online, .m-offline { font-size: 13px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.m-online i { width: 8px; height: 8px; border-radius: 50%; background: var(--gut); }
.messenger .verlauf { overflow-y: auto; overscroll-behavior: contain; padding: 16px; gap: 6px; align-content: start; min-height: 160px; background: var(--grund); }
.m-leer { text-align: center; margin: 24px 0; }
.m-tag { display: flex; justify-content: center; margin: 10px 0 4px; }
.m-tag span { font-size: 12px; color: var(--text-2); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; padding: 2px 10px; }
.msg { margin-top: 4px; }
.msg .blase { box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.msg.k-email .blase { border-radius: 12px; }
.msg.in.k-email .blase { background: var(--flaeche); border: 1px solid var(--linie); }
.msg.out.k-email .blase { background: color-mix(in srgb, var(--akzent) 88%, var(--flaeche)); }
.msg.out.auto .blase { background: var(--flaeche-2); color: var(--text); border: 1px dashed var(--linie); }
.m-betreff { font-size: 12px; font-weight: 600; opacity: .8; margin-bottom: 4px; white-space: normal; }
.blase-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.msg.out .blase-meta { justify-content: flex-end; }
.m-kanal { font-weight: 500; }
.m-haken { color: var(--text-2); letter-spacing: -.12em; display: inline-flex; align-items: center; gap: 2px; }
.m-haken.an { color: var(--gut); }
.m-haken svg { width: 13px; height: 13px; }
.m-fehler { color: var(--gefahr); font-weight: 500; }
.msg.tippt .blase { display: inline-flex; gap: 4px; padding: 12px 14px; }
.msg.tippt i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); animation: tippen 1.2s infinite ease-in-out; }
.msg.tippt i:nth-child(2) { animation-delay: .15s; } .msg.tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .msg.tippt i { animation: none; opacity: .6; } }
.komponist { border-top: 1px solid var(--linie); padding: 12px 16px; gap: 10px; position: relative; background: var(--flaeche); }
.komponist .eingabe { min-height: 44px; max-height: 320px; resize: none; }
.k-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.k-leiste .segmente button { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.k-leiste .segmente svg { width: 16px; height: 16px; }
.k-vorlagen { margin-left: auto; }
.k-vorlagen svg { width: 16px; height: 16px; }
.komponist kbd { font: inherit; font-size: 11px; opacity: .7; margin-left: 6px; }
@media (hover: none) { .komponist kbd { display: none; } }
.vorlagen-pop { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 52px); z-index: 5; max-height: 280px; overflow-y: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); padding: 6px; display: grid; }
.vorlagen-pop[hidden] { display: none; }
.vp-eintrag { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; min-height: 44px; }
.vp-eintrag span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-eintrag.an, .vp-eintrag:hover { background: var(--flaeche-2); }
.vp-leer { padding: 8px 10px; margin: 0; }
@media (min-width: 1100px) { .d-raster { grid-template-areas: "verlauf angaben" "verlauf herkunft" "verlauf gleich"; } }
/* Detail schmal (Liste daneben): eine Spalte, Gespräch zuerst */
.detail-pane { container-type: inline-size; }
@container (max-width: 880px) {
  .d-raster { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "verlauf" "angaben" "herkunft" "gleich" !important; }
}
.k-leiste .segmente { flex-wrap: nowrap; }

/* ============ Backend 2 · Phasen 4–6 ============ */
.abo-kopf { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.dash-paar-k { display: grid; padding: 12px 16px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); min-width: 120px; }
.dash-paar-k b { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dash-paar-k span { font-size: 13px; color: var(--text-2); }
.dash-paar-k.warn { border-color: color-mix(in srgb, var(--warn, #b7791f) 55%, var(--linie)); }
.dash-paar-k.gefahr { border-color: color-mix(in srgb, var(--gefahr) 55%, var(--linie)); }
.dv-reihe { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
@media (max-width: 640px) { .dv-reihe { grid-template-columns: 44px minmax(0, 1fr); } .dv-push { grid-column: 1 / -1; } .dv-reihe > .knopf { grid-column: 1 / -1; justify-self: start; } }
.dv-reihe.inaktiv { opacity: .55; }
.dv-foto { position: relative; width: 52px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--flaeche-2); display: grid; place-items: center; font-family: 'EB Garamond', serif; font-size: 22px; color: var(--text-2); }
@media (max-width: 640px) { .dv-foto { width: 44px; height: 54px; } }
.dv-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.dv-reihe.versteckt .dv-foto img { filter: grayscale(1) opacity(.5); }
.dv-text { min-width: 0; display: grid; gap: 2px; }
.dv-push { display: flex; gap: 0; }
.dv-stern { width: 44px; height: 44px; border: 0; background: none; color: var(--text-2); cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.dv-stern svg { width: 22px; height: 22px; }
.dv-stern.an { color: var(--gold, #B8975A); }
.dv-stern:hover:not(:disabled) { background: var(--flaeche-2); }
.dv-stern:disabled { cursor: default; }

/* KI-Vorschlag */
.k-ki { border-color: color-mix(in srgb, var(--gold, #B8975A) 60%, var(--linie)); }
.ki-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-klein); background: color-mix(in srgb, var(--gold, #B8975A) 14%, var(--flaeche)); font-size: 14px; }
.ki-band span { flex: 1 1 200px; }

/* ======================================================================
   Runde 32 · Couture-Look: Marke, Seitenleiste, Typografie, Bedienelemente
   (steht am Ende und verfeinert die Regeln darüber)
   ====================================================================== */
body { font: 400 15px/1.55 var(--schrift); letter-spacing: 0.003em; }
h1, h2, h3 { font-weight: 500; }
::selection { background: var(--gold-zart); }

/* Wortmarke wie auf der Seite: COUTURE gesperrt, darunter Goldlinien mit kursivem „Admin“ */
.marke { display: inline-grid; justify-items: center; gap: 7px; color: inherit; text-decoration: none; }
.marke-wort { font-family: var(--schrift-titel); font-weight: 400; font-size: 22px; letter-spacing: 0.32em; padding-left: 0.32em; line-height: 1; }
.marke-zeile { display: flex; align-items: center; gap: 10px; width: 100%; }
.marke-zeile i { flex: 1; height: 1px; background: var(--gold-linie); min-width: 16px; }
.marke-zeile em { font-family: var(--schrift-marke); font-style: italic; font-size: 15px; line-height: 1; color: var(--gold-text); }
.marke.gross .marke-wort { font-size: 34px; }
.marke.gross .marke-zeile em { font-size: 19px; }
.start-laden .marke { margin-bottom: 8px; }

/* Anmeldung: ruhig, Marke groß, Formular auf Papier */
.anmeldung { background: var(--grund); }
.anmeldung-box { max-width: 400px; gap: 32px; }
.anmeldung-kopf { gap: 16px; }
.anmeldung-kopf p { font-size: 15px; }
.anmeldung-box > form, .anmeldung-box > .form { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 28px 24px; }

/* Seitenleiste in Marineblau */
@media (min-width: 768px) {
  .geruest { grid-template-columns: 248px minmax(0, 1fr); }
  .seitenleiste { background: var(--leiste); color: var(--leiste-text-stark); border-right: 0; scrollbar-width: thin; scrollbar-color: rgba(251,247,240,.2) transparent; }
  .seitenleiste-logo { padding: 32px 28px 28px; justify-items: center; display: grid; }
  .seitenleiste .marke-wort { font-size: 19px; color: var(--leiste-text-stark); }
  .seitenleiste .marke-zeile i { background: #B89B62; opacity: 0.8; }
  .seitenleiste .marke-zeile em { color: #D7BE88; font-size: 14px; }
  .seitenleiste nav { padding: 0 12px 16px; gap: 1px; }
  .nav-link { color: var(--leiste-text); font-weight: 400; font-size: 14.5px; min-height: 40px; border-radius: 8px; position: relative; gap: 12px; transition: background-color 0.15s, color 0.15s; }
  .nav-link svg { color: inherit; width: 18px; height: 18px; opacity: 0.85; }
  .nav-link:hover { background: rgba(251, 247, 240, 0.06); color: var(--leiste-text-stark); }
  .nav-link[aria-current="page"] { background: rgba(251, 247, 240, 0.10); color: var(--leiste-text-stark); }
  .nav-link[aria-current="page"] svg { color: #D7BE88; opacity: 1; }
  .nav-link[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: #C2A66B; }
  .nav-link .zahl { color: var(--leiste-text); font-size: 12.5px; }
  .nav-link .zahl.betont { color: #141833; background: #D7BE88; border-radius: 999px; padding: 0 7px; line-height: 20px; font-weight: 600; font-size: 12px; }
  .nav-unter .nav-link { padding-left: 42px; font-size: 14px; }
  .nav-trenner { background: var(--leiste-linie); margin: 10px 12px; }
  .seitenleiste-fuss { color: var(--leiste-text); border-top: 1px solid var(--leiste-linie); padding: 16px 24px 20px; font-size: 12.5px; }
  .seitenleiste :focus-visible { outline-color: #D7BE88; }
  .hauptbereich > .kopf { padding-left: 40px; padding-right: 32px; }
  .seite { padding: 32px 40px 64px; }
}

/* Kopfzeile: Seitentitel in Caslon */
.kopf { min-height: 60px; background: color-mix(in srgb, var(--grund) 88%, transparent); }
.kopf h1 { font-family: var(--schrift-titel); font-weight: 400; font-size: 22px; letter-spacing: 0.01em; }
@media (min-width: 768px) { .kopf { min-height: 76px; background: var(--grund); } .kopf h1 { font-size: 26px; } }
.kopf-datum { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }

/* Überschriften von Abschnitten: kleine gesperrte Versalien in Gold, wie „KURZ GESAGT“ auf der Seite */
.abschnitt-titel, .dash-k h2, .rechte-g-titel, .mitglied-kopfzeile { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
.mitglied-kopfzeile { color: var(--text-2); }

/* Knöpfe als Pillen wie „ANFRAGEN“ auf der Seite */
.knopf { border-radius: 999px; padding: 0 20px; font-weight: 500; font-size: 14.5px; letter-spacing: 0.01em; border-color: var(--linie-stark); background: transparent; }
.knopf:hover { background: var(--akzent-zart); border-color: color-mix(in srgb, var(--text) 35%, transparent); }
.knopf.haupt { letter-spacing: 0.04em; }
.knopf.haupt:hover { filter: none; background: color-mix(in srgb, var(--akzent) 88%, var(--gold-linie)); }
.knopf.symbol { padding: 0; border-radius: 50%; }
.knopf.still { padding: 0 14px; }
.knopf svg { width: 18px; height: 18px; }
.segmente { border-radius: 999px; padding: 3px; }
.segmente button { border-radius: 999px; min-height: 38px; padding: 0 16px; }
.segmente button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(30, 36, 71, 0.14); }
.etikett { border-radius: 999px; height: 24px; padding: 0 10px; font-size: 12px; letter-spacing: 0.01em; }
.etikett.akzent { background: var(--gold-zart); color: var(--gold-text); }

/* Felder */
.eingabe { border-radius: var(--r-klein); border-color: var(--linie-stark); background: var(--flaeche); }
.eingabe:focus { border-color: var(--gold-linie); box-shadow: 0 0 0 3px var(--gold-zart); }
.feld > span, .feld-titel { font-size: 12.5px; letter-spacing: 0.02em; }
.schalter input:checked { background: var(--akzent); }
.nacht .schalter input:checked::after { background: #141833; }

/* Flächen: Haarlinien statt Schatten */
.kasten, .dash-k, .messenger { border-radius: 16px; }
dialog.dialog { border-radius: 20px; }
.dialog-inhalt h2 { font-family: var(--schrift-titel); font-weight: 400; font-size: 22px; }
.d-titel h2 { font-family: var(--schrift-titel); font-weight: 400; font-size: 28px; }
.meldung { border-radius: 999px; padding: 12px 20px; background: #1E2447; color: #FBF7F0; }
.nacht .meldung { background: #E9DFC9; color: #141833; }
.leer b { font-family: var(--schrift-titel); font-weight: 400; font-size: 19px; }

/* Posteingang */
.zeile[aria-current="true"] { background: var(--gold-zart); box-shadow: inset 2px 0 0 var(--gold-linie); }
.zeile:hover { background: var(--akzent-zart); }
.msg.in .blase { background: var(--flaeche-2); }
.msg.out .blase { background: var(--akzent); color: var(--akzent-text); }
.z-name { font-weight: 500; }

/* Handy-Leiste unten */
.unten-leiste { background: color-mix(in srgb, var(--grund) 90%, transparent); }
.unten-leiste a[aria-current="page"] svg { color: var(--gold-linie); }

/* ======================================================================
   Übersicht (Runde 32): Begrüßung, Kennzahlen-Band, „Braucht dich“, „Gestern“, Verläufe
   ====================================================================== */
.uebersicht { display: grid; gap: 28px; max-width: 1240px; }
.held { display: grid; gap: 10px; padding-top: 4px; }
.held-datum { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.held-datum::before { content: ""; width: 28px; height: 1px; background: var(--gold-linie); }
.held h2 { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; letter-spacing: 0.005em; }
.held-lage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; color: var(--text-2); }
.lage-pille { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; text-decoration: none; }
.lage-pille svg { width: 15px; height: 15px; }
.lage-pille.gut { background: color-mix(in srgb, var(--gut) 12%, transparent); color: var(--gut); }
.lage-pille.kritisch { background: var(--gefahr-zart); color: var(--gefahr); }
.lage-pille.warnung { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }

/* Kennzahlen-Band: eine Tafel, Werte durch Haarlinien getrennt */
.kpi-band { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; }
.kpi { display: grid; align-content: start; gap: 6px; padding: 22px 24px 20px; min-width: 0; border-left: 1px solid var(--linie); color: inherit; text-decoration: none; }
.kpi:first-child { border-left: 0; }
a.kpi:hover { background: var(--akzent-zart); }
.kpi-titel { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.kpi-zahl { font-weight: 300; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 10px; }
.kpi-unter { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.kpi-unter b { color: var(--text); font-weight: 500; }
@media (max-width: 900px) {
  .kpi-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(odd) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 420px) { .kpi { padding: 18px 16px; } }
.trend { font-weight: 500; font-variant-numeric: tabular-nums; }
.trend.hoch { color: var(--gut); }
.trend.runter { color: var(--gefahr); }

/* Tafeln */
.dash-zwei { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .dash-zwei { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .dash-zwei.breit-links { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.tafel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 22px 24px 24px; display: grid; gap: 16px; min-width: 0; align-content: start; }
@media (max-width: 420px) { .tafel { padding: 18px 16px 20px; } }
.tafel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tafel-kopf h3 { font-family: var(--schrift-titel); font-weight: 400; font-size: 21px; line-height: 1.2; }
.tafel-kopf small { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 4px; }
.tafel-kopf a { font-size: 13px; color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -12px 0; }
.tafel-kopf a:hover { color: var(--text); }
.tafel-kopf a svg { width: 14px; height: 14px; }

/* Braucht dich: Probleme mit Symbol + Wort, nie nur Farbe */
.auf-liste { display: grid; }
.auf { display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linie); color: inherit; text-decoration: none; min-height: 56px; }
.auf:first-child { border-top: 0; padding-top: 4px; }
a.auf:hover .auf-titel { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-linie); }
.auf-symbol { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.auf-symbol svg { width: 18px; height: 18px; }
.auf.kritisch .auf-symbol { background: var(--gefahr-zart); color: var(--gefahr); }
.auf.warnung .auf-symbol { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.auf.hinweis .auf-symbol { background: var(--akzent-mittel); color: var(--text); }
.auf-text { display: grid; gap: 2px; min-width: 0; }
.auf-stufe { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.auf.kritisch .auf-stufe { color: var(--gefahr); }
.auf.warnung .auf-stufe { color: var(--warn); }
.auf.hinweis .auf-stufe { color: var(--text-2); }
.auf-titel { font-size: 15.5px; font-weight: 500; line-height: 1.35; }
.auf-erkl { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.auf > svg { width: 18px; height: 18px; color: var(--text-2); }
.alles-gut { display: flex; align-items: center; gap: 14px; padding: 6px 0 2px; }
.alles-gut .auf-symbol { background: color-mix(in srgb, var(--gut) 12%, transparent); color: var(--gut); }
.alles-gut b { font-weight: 500; display: block; }
.alles-gut span { font-size: 13px; color: var(--text-2); }

/* Gestern: Werte in einem ruhigen Raster */
.g-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 24px; }
.g-wert { display: grid; gap: 2px; padding: 14px 0 12px; border-top: 1px solid var(--linie); min-width: 0; }
.g-wert span { font-size: 12.5px; color: var(--text-2); }
.g-wert b { font-weight: 300; font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.g-wert small { font-size: 12.5px; color: var(--text-2); }
.g-fazit { font-family: var(--schrift-marke); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--text); padding-top: 4px; }

/* Verläufe */
.diagramm svg { height: 132px; }
.diagramm.klein svg { height: 84px; }
.diagramm .b { fill: var(--akzent); opacity: 0.82; }
.diagramm .b.heute { fill: var(--gold-linie); opacity: 1; }
.diagramm .b-g.an .b { opacity: 1; fill: var(--gold-linie); }
.diagramm-achse { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; border-top: 1px solid var(--linie); padding-top: 6px; }
.diagramm-wert { min-height: 20px; font-size: 13px; color: var(--text); }
.summe-zeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.summe-zeile b { font-weight: 300; font-size: 30px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.summe-zeile span { font-size: 13px; color: var(--text-2); }
.rang { display: grid; }
.rang-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--linie); align-items: baseline; }
.rang-zeile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang-zeile b { font-weight: 500; font-variant-numeric: tabular-nums; }
.rang-zeile small { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--flaeche-2); overflow: hidden; }
.rang-zeile small i { display: block; height: 100%; background: var(--gold-linie); border-radius: 2px; }
.termin-liste .dash-zeile { min-height: 56px; }
.dash-zeile { border-top-color: var(--linie); }
.mini-paare { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.mini-paare div { display: grid; }
.mini-paare b { font-weight: 300; font-size: 26px; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.mini-paare span { font-size: 12.5px; color: var(--text-2); }

/* ======================================================================
   Anmeldungen (nur Inhaber)
   ====================================================================== */
.kennzeile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; }
.kennzeile > div { display: grid; gap: 2px; padding: 18px 22px; border-left: 1px solid var(--linie); min-width: 0; }
.kennzeile > div:first-child { border-left: 0; }
.kennzeile b { font-weight: 300; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kennzeile span { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .kennzeile { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kennzeile > div:nth-child(odd) { border-left: 0; } .kennzeile > div:nth-child(n+3) { border-top: 1px solid var(--linie); } }
.anm-liste { display: grid; gap: 12px; }
.anm-person { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.anm-kopf { display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex-wrap: wrap; }
.anm-initial { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: var(--akzent-text); font-family: var(--schrift-titel); font-size: 18px; flex: none; }
.anm-wer { display: grid; flex: 1; min-width: 180px; }
.anm-wer b { font-weight: 500; font-size: 16px; }
.anm-wer span { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.anm-geraet { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--linie); }
.anm-geraet.auffaellig { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.status-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--linie-stark); }
.status-punkt.an { background: var(--gut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gut) 18%, transparent); }
.anm-g-text { display: grid; gap: 2px; min-width: 0; }
.anm-g-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anm-g-zeile b { font-weight: 500; }
.anm-g-unter { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--text-2); }
@media (max-width: 560px) { .anm-geraet { grid-template-columns: 10px minmax(0, 1fr); } .anm-geraet > .knopf { grid-column: 2; justify-self: start; } }
button.lage-pille { border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; }
details.mehr > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-linie); }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr[open] > summary { display: none; }
.abschnitt > .segmente { justify-self: start; }

/* KI-Konten (Konto, nur Inhaber) */
.ki-konto { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ki-wer { display: grid; gap: 4px; flex: 1; min-width: 200px; }
.ki-wer b { font-weight: 500; font-size: 16px; }
.ki-stand { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.ki-konto-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Damen-CRM (Runde 34) */
.crm-tabelle { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.crm-zeile { display: grid; grid-template-columns: minmax(150px, 1.6fr) 0.7fr 1fr 0.8fr 1fr 1.3fr 20px; align-items: center; gap: 12px; padding: 12px 20px; min-height: 56px;
  border: 0; border-top: 1px solid var(--linie); background: none; width: 100%; text-align: left; font: inherit; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.crm-termine .crm-zeile { grid-template-columns: minmax(150px, 1.5fr) 0.9fr 0.7fr 0.9fr 0.9fr 1.1fr 20px; }
.crm-klein .crm-zeile { grid-template-columns: minmax(130px, 1.5fr) 0.9fr 0.7fr 0.9fr 0.9fr 1.1fr; padding: 10px 14px; min-height: 48px; }
.crm-zeile:first-child { border-top: 0; }
a.crm-zeile, button.crm-zeile { cursor: pointer; }
a.crm-zeile:hover, button.crm-zeile:hover { background: var(--flaeche-2); }
a.crm-zeile:focus-visible, button.crm-zeile:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.crm-kopfzeile { min-height: 40px; padding-top: 10px; padding-bottom: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); background: var(--flaeche-2); }
.crm-name { display: grid; min-width: 0; }
.crm-name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-name small { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-pfeil { color: var(--text-2); display: grid; place-items: center; }
.crm-pfeil svg { width: 16px; height: 16px; }
.crm-warn { color: var(--warn); font-weight: 500; }
.crm-saldo { font-weight: 500; }
.crm-saldo.plus { color: var(--gut); }
.crm-saldo.minus { color: var(--gold-text); }
.crm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.crm-fehlt .t-zeit small { font-family: var(--mono); font-size: 11px; }
.crm-fehlt > svg { width: 16px; height: 16px; color: var(--text-2); }
.crm-alles-gut { display: flex; align-items: center; gap: 8px; color: var(--gut); font-weight: 500; }
.crm-alles-gut svg { width: 18px; height: 18px; }
.crm-anteil-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.crm-anteil-form .feld { margin: 0; }
.crm-prozent { display: inline-flex; align-items: center; gap: 8px; }
.crm-prozent .eingabe { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.crm-prozent > span { color: var(--text-2); }
.crm-abrechnen { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 12px;
  background: var(--gold-zart); border: 1px solid var(--gold-linie); border-radius: 16px; }
.crm-abrechnen > div { display: grid; gap: 2px; }
.crm-abrechnen b { font-weight: 500; font-size: 17px; }
.crm-abrechnen span { font-size: 13px; color: var(--text-2); }
.crm-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.crm-unterzeile { color: var(--text-2); margin: -8px 0 0; }
@media (max-width: 760px) {
  .crm-kopfzeile { display: none; }
  .crm-zeile, .crm-termine .crm-zeile, .crm-klein .crm-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 14px 16px; }
  .crm-zeile .crm-name { grid-column: 1 / -1; }
  .crm-zeile .crm-pfeil { display: none; }
  .crm-zeile [data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: var(--text-2); letter-spacing: 0.04em; }
}
.hinweis > svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.crm-achtung { background: color-mix(in srgb, var(--warn) 9%, var(--flaeche)); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.crm-achtung > div { max-width: 560px; }
.abschnitt p > svg, .leise > svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
h1 .etikett, h2 .etikett { font-family: var(--schrift); font-style: normal; vertical-align: middle; }
#crm { grid-template-columns: minmax(0, 1fr); }
#crm > .segmente { max-width: 100%; overflow-x: auto; scrollbar-width: none; justify-self: start; }
#crm > .segmente::-webkit-scrollbar { display: none; }
#crm > .segmente > button { flex: none; }

/* Tagesplan im CRM (Runde 35): je Dame die Kunden des Tages */
.tagplan-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tagplan-kopf .abschnitt-titel { margin: 0; }
.tagplan-nav { display: flex; align-items: center; gap: 4px; }
.tagplan { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tagplan-dame { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.tagplan-dame > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; }
.tagplan-dame > header a { color: var(--text); text-decoration: none; }
.tagplan-dame > header a:hover { text-decoration: underline; text-decoration-color: var(--gold-linie); text-underline-offset: 3px; }
.tagplan-dame > header b { font-family: var(--schrift-titel); font-weight: 400; font-size: 19px; }
.tagplan-dame > header span { font-size: 12.5px; }
.tagplan-termin { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 16px;
  border: 0; border-top: 1px solid var(--linie); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.tagplan-termin:hover { background: var(--flaeche-2); }
.tagplan-termin:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.tagplan-zeit { font-weight: 500; font-variant-numeric: tabular-nums; }
.tagplan-wer { display: grid; min-width: 0; }
.tagplan-wer b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagplan-wer small { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-gut { color: var(--gut); font-weight: 500; }
.crm-kunden .crm-zeile { grid-template-columns: minmax(150px, 1.6fr) 0.7fr 0.9fr 0.9fr 0.9fr 0.9fr 20px; }
.kunde-damen { display: inline-flex; align-items: center; gap: 4px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kunde-damen svg { width: 14px; height: 14px; flex: none; }

/* Umsatz (Runde 35) */
#umsatz { grid-template-columns: minmax(0, 1fr); }
.ums-steuerung { display: grid; gap: 12px; }
.ums-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ums-titel { font-family: var(--schrift-titel); font-weight: 400; font-size: 26px; line-height: 1.2; min-width: 0; text-align: center; padding: 0 4px; }
.ums-wahl { justify-content: space-between; }
.ums-wahl .segmente { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ums-wahl .segmente > button { flex: none; }
.ums-eigen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ums-eigen .eingabe { width: auto; min-width: 150px; }
.ums-diagramm svg { height: 180px; }
.ums-neben { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 18px 24px; justify-content: space-between; }
.ums-neben b { font-size: 22px; }
a.rang-zeile { color: inherit; text-decoration: none; }
a.rang-zeile:hover b { text-decoration: underline; text-decoration-color: var(--gold-linie); text-underline-offset: 3px; }
#umsatz-inhalt { display: grid; gap: 24px; transition: opacity 0.15s; }
@media (min-width: 900px) { #umsatz .dash-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .ums-titel { font-size: 21px; flex: 1; } .ums-eigen .eingabe { min-width: 0; flex: 1; } }
.dash-spalte { display: grid; gap: 24px; min-width: 0; align-content: start; }

/* Social-Team (Runde 36): Stempeluhr, Konten mit Ampel, Kontrollgang, Zeiten. Ampel nur als kleiner Punkt, Fläche bleibt ruhig. */
.sz-seite { grid-template-columns: minmax(0, 1fr); }
.sz-reiter { max-width: 100%; overflow-x: auto; scrollbar-width: none; justify-self: start; }
.sz-reiter a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px; color: var(--text-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
.sz-reiter a.an { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(30, 36, 71, 0.14); }
.sz-reiter a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hinweis-zeile { padding: 12px 16px; border-radius: var(--r-klein); background: var(--notiz); border: 1px solid var(--notiz-rand); font-size: 14px; }
.leer-zustand { display: grid; gap: 12px; justify-items: start; padding: 8px 0; }
.sz-klein { font-size: 12.5px; }
.formular { display: grid; gap: 16px; }
.sz-zwei { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.segmente label { flex: 1; display: flex; }
.segmente label input { position: absolute; opacity: 0; pointer-events: none; }
.segmente label span { flex: 1; display: grid; place-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; color: var(--text-2); font-weight: 500; cursor: pointer; white-space: nowrap; }
.segmente label input:checked + span { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(30, 36, 71, 0.14); }
.segmente label input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -2px; }
.segmente button small { font-size: 12px; opacity: 0.75; margin-left: 2px; }
fieldset.feld { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Ampel-Punkt */
.sz-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--linie-stark); }
.sz-punkt.gruen { background: var(--gut); }
.sz-punkt.gelb { background: #C08A2E; }
.sz-punkt.rot { background: var(--gefahr); }
.sz-punkt.aus { background: transparent; border: 1.5px solid var(--linie-stark); }

/* Stempeluhr */
.sz-uhr { border-left: 3px solid var(--linie-stark); }
.sz-uhr.laeuft { border-left-color: var(--gut); }
.sz-uhr.pause { border-left-color: var(--gold-linie); }
.sz-uhr-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sz-uhr-stand { margin-top: 6px; font-size: 17px; }
.sz-uhr-stand b { font-weight: 500; }
.sz-uhr-summe { display: grid; justify-items: end; text-align: right; }
.sz-uhr-summe b { font-family: var(--schrift-titel); font-weight: 400; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sz-uhr-form { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.sz-uhr-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; }

/* Konten-Liste */
.sz-liste { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.sz-konto { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 0; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.sz-konto:first-child { border-top: 0; }
.sz-konto-haupt { display: flex; align-items: center; gap: 14px; flex: 1 1 260px; min-width: 0; min-height: 52px; padding: 4px 0 4px 20px; color: inherit; text-decoration: none; }
.sz-konto-haupt:hover b { text-decoration: underline; text-decoration-color: var(--gold-linie); text-underline-offset: 3px; }
.sz-konto-haupt:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 8px; }
.sz-konto-name { display: grid; min-width: 0; gap: 2px; }
.sz-konto-name b { font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-konto-name small { font-size: 13px; color: var(--text-2); }
.sz-gruende.rot { color: var(--gefahr); }
.sz-gruende.gelb { color: var(--warn); }
.sz-konto-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.sz-filter { overflow-x: auto; scrollbar-width: none; }
.sz-team-zeile { grid-template-columns: minmax(150px, 1.5fr) 1fr 1fr 0.9fr 0.6fr; }
.sz-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.sz-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gut); }
.sz-live.pause::before { background: var(--gold-linie); }

/* Ein Konto */
.sz-konto-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.sz-konto-stand { display: flex; align-items: center; gap: 12px; }
.sz-konto-stand > div { display: grid; }
.sz-konto-stand b { font-weight: 500; font-size: 17px; }
.sz-hinweise { display: grid; gap: 8px; }
.sz-hinweis { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--r-klein); background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--linie-stark); font-size: 14px; }
.sz-hinweis b { font-weight: 500; }
.sz-hinweis span { color: var(--text-2); }
.sz-hinweis.rot { border-left-color: var(--gefahr); }
.sz-hinweis.gelb { border-left-color: #C08A2E; }
.sz-hinweis.gruen { border-left-color: var(--gut); }
.sz-hinweis.info { border-left-color: var(--gold-linie); }
@media (min-width: 900px) { .sz-konto-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sz-zugang { display: grid; gap: 4px; }
.sz-zugang-zeile { display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--linie); }
.sz-zugang-zeile code { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.sz-zugang-zeile code.geheim { background: var(--notiz); padding: 2px 6px; border-radius: 6px; }
.sz-zugang-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.sz-check { display: grid; }
.sz-check-punkt { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--linie); cursor: pointer; min-height: 44px; }
.sz-check-punkt:first-child { border-top: 0; }
.sz-check-punkt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--akzent); cursor: pointer; }
.sz-check-punkt span { display: grid; gap: 2px; }
.sz-check-punkt b { font-weight: 500; }
.sz-check-punkt small { font-size: 13px; }
.sz-check-punkt.fertig b { color: var(--text-2); }
.sz-kontrolle-zeile .reihe-kopf b { font-variant-numeric: tabular-nums; }
.sz-kontrolle-zeile a { display: inline-flex; align-items: center; gap: 4px; }
.sz-kontrolle-zeile svg { width: 14px; height: 14px; }
.sz-notiz { font-size: 14px; color: var(--text-2); }

/* Uploads und Zeiten */
.sz-up-gruppen, .sz-zeit-personen { display: grid; gap: 16px; }
@media (min-width: 900px) { .sz-up-gruppen, .sz-zeit-personen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.sz-zeit-steuerung { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.sz-zeit-summe b { font-family: var(--schrift-titel); font-weight: 400; font-size: 22px; font-variant-numeric: tabular-nums; }
.sz-soll { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.sz-soll label { display: grid; gap: 4px; font-size: 12.5px; }
.sz-soll .eingabe { width: 120px; }
.sz-balken { display: grid; gap: 8px; }
.sz-balken-zeile { display: grid; grid-template-columns: 130px minmax(0, 1fr) 80px; gap: 12px; align-items: center; font-size: 14px; }
.sz-balken-zeile b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.sz-balken-spur { height: 8px; border-radius: 4px; background: var(--flaeche-2); overflow: hidden; }
.sz-balken-spur i { display: block; height: 100%; background: var(--akzent); border-radius: 4px; }
.sz-eintraege summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--link); font-weight: 500; }

@media (max-width: 767px) {
  .sz-konto { padding: 8px 16px 12px 0; }
  .sz-konto .sz-konto-knoepfe { padding-left: 44px; }
  .sz-team-zeile { grid-template-columns: minmax(0, 1.4fr) 1fr 0.8fr; }
  .sz-team-zeile > :nth-child(4), .sz-team-zeile > :nth-child(5) { display: none; }
  .sz-uhr-summe { justify-items: start; text-align: left; }
  .sz-zugang-zeile { grid-template-columns: 96px minmax(0, 1fr) 44px; }
  .sz-balken-zeile { grid-template-columns: 110px minmax(0, 1fr) 70px; }
}
#sz-inhalt, #sz-konto { display: grid; gap: 24px; min-width: 0; }
.sz-zugang-zeile { grid-template-columns: 92px minmax(0, 1fr) 44px; }
.sz-zugang-zeile code { font-size: 13px; overflow-wrap: anywhere; justify-self: start; }

/* Runde 37: App, Einladung, Zugriff, Schritte, Grok */
.anmeldung-zusatz { display: grid; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.app-kasten { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.app-kasten img { border-radius: 12px; flex: none; }
.app-kasten > div { flex: 1; min-width: 180px; }
.einladung-code { font-family: var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.sz-zugriff-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); }
.sz-zugriff-zeile:first-child { border-top: 0; }
.sz-zugriff-zeile small { display: block; font-size: 13px; color: var(--text-2); }
.sz-zugriff-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
.sz-zugriff-form .schalter { min-height: 44px; }
.sz-schritt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linie); }
.sz-schritt:first-child { border-top: 0; }
.sz-schritt.aus { opacity: 0.55; }
.sz-schritt-nr { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche-2); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sz-schritt-text { display: grid; gap: 2px; min-width: 0; }
.sz-schritt-text b { font-weight: 500; }
.sz-schritt-text small { font-size: 13px; color: var(--text-2); }
.sz-schritt-knoepfe { display: flex; gap: 2px; }
.sz-grok-adresse { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; background: var(--flaeche-2); padding: 10px 12px; border-radius: var(--r-klein); }
.sz-check-punkt .sz-ab-tag { font-size: 12px; color: var(--gold-text); }
.knopf svg.hoch { transform: rotate(90deg); }
.knopf svg.runter { transform: rotate(90deg); }
@media (max-width: 767px) {
  .sz-reiter a { padding: 0 12px; }
  .sz-schritt { grid-template-columns: auto minmax(0, 1fr); }
  .sz-schritt-knoepfe { grid-column: 2; margin-left: -10px; }
}

/* Runde 38: Ablauf-Dashboard, Team der Partner-Leitung */
.sz-ablauf-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sz-ablauf-zahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; padding: 14px 16px; display: grid; gap: 2px; border-top: 3px solid var(--linie-stark); }
.sz-ablauf-zahl b { font-family: var(--schrift-titel); font-weight: 400; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sz-ablauf-zahl span { font-size: 13px; color: var(--text-2); }
.sz-ablauf-zahl.fertig { border-top-color: var(--gut); }
.sz-ablauf-zahl.laeuft { border-top-color: #C08A2E; }
.sz-ablauf-zahl.fehler { border-top-color: var(--gefahr); }
.sz-ablauf { display: grid; }
.sz-ablauf-zeile { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linie); color: inherit; text-decoration: none; min-height: 52px; }
.sz-ablauf-zeile:first-child { border-top: 0; }
.sz-ablauf-zeile:hover b { text-decoration: underline; text-decoration-color: var(--gold-linie); text-underline-offset: 3px; }
.sz-ablauf-konto { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.sz-ablauf-konto small { grid-column: 2; font-size: 13px; }
.sz-ablauf-konto b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-ablauf-schritte { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sz-ablauf-schritte > i { color: var(--text-2); font-style: normal; }
.sz-ablauf-schritt { display: grid; padding: 6px 10px; border-radius: 10px; background: var(--flaeche-2); min-width: 104px; }
.sz-ablauf-schritt b { font-weight: 500; font-size: 13.5px; display: inline-flex; align-items: center; gap: 4px; }
.sz-ablauf-schritt b svg { width: 14px; height: 14px; color: var(--gut); }
.sz-ablauf-schritt small { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sz-ablauf-schritt.ok { background: color-mix(in srgb, var(--gut) 10%, var(--flaeche)); }
.sz-konto.aus { opacity: 0.6; }
.sz-ma-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .sz-ablauf-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sz-ablauf-zeile { grid-template-columns: minmax(0, 1fr); }
}
.sz-team-liste .sz-konto-knoepfe { padding-left: 20px; }