/* ══════════════════════════════════════════════════════════════════════
   FARBWELTEN NACH APPLE-ART · Rahmen (seit 2026-10-23)
   ──────────────────────────────────────────────────────────────────────
   Damit Klarheit, Gruppen, Glas und Bühne aussehen wie die Entwürfe
   11–14 der Leinwand „Dashboard-Optik“ (Vincent, 23.10.2026: „exakt so
   wie auf den Entwürfen“). Tokens: farbwelten.css. Rahmen (Navigation,
   Kopf, Reiter, Karten): farbwelten-rahmen.css. Kacheln der Übersicht:
   farbwelten-kacheln.css. Was an DOM dazukommt (Ring, Fotos, Bühne):
   farbwelten.js.

   Schriftgrößen nur über die Skala (--fs-*). Die Bühne hat drei
   Schaustufen darüber (--fs-4xl … --fs-6xl, farbwelten.css).
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   GEMEINSAME BAUTEILE
   ══════════════════════════════════════════════════════════════════════ */

/* Abschnittstitel: größer, ohne Linie darunter. */
:root:is([data-skin="klarheit"], [data-skin="glas"], [data-skin="buehne"]) .section-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: var(--sp-4);
}
@media (max-width: 900px) {
  :root:is([data-skin="klarheit"], [data-skin="glas"], [data-skin="buehne"]) .section-title { font-size: var(--fs-lg); }
}
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .section-title [data-lucide] {
  color: var(--brand);
}

:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .topbar,
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .subnav {
  border-bottom: 0;
}

/* Karten ohne Rand, nur Fläche und Schatten. Bewusst eine Liste: Karten
   mit farbiger Kante (Stufe am Todo, Behälter am Brett) behalten sie. */
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"]) :is(.metric-card, .kpi-karte, .checkin-kachel,
  .vorausschau-kachel, .t5-card, .ge-card, .m-coll-head.klapp, .gewinn-uebersicht) {
  border-color: transparent;
  box-shadow: var(--shadow);
}
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .kpi-karte {
  border-bottom-width: 1px;
}
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"]) .todo-heute-card {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"]) .todo-heute-card:not([class*="st-"]) {
  border-left-color: transparent;
}

/* Segment-Reiter (Klarheit, Gruppen): die Reiter eines Bereichs als ein
   graues Feld, der aktive als weiße Taste darin. */
:root:is([data-skin="klarheit"], [data-skin="gruppen"]) .subnav {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-3);
}
:root:is([data-skin="klarheit"], [data-skin="gruppen"]) .subnav-group.active {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-sm);
  background: var(--seg-track);
}
:root:is([data-skin="klarheit"], [data-skin="gruppen"]) .tab-btn {
  padding: 7px var(--sp-4);
  border-radius: var(--r-xs);
}
:root:is([data-skin="klarheit"], [data-skin="gruppen"]) .tab-btn::after { display: none; }
:root:is([data-skin="klarheit"], [data-skin="gruppen"]) .tab-btn.active {
  background: var(--seg-thumb);
  box-shadow: var(--seg-schatten);
  color: var(--text);
}

/* Runde Reiter und Knöpfe (Glas, Bühne). */
:root:is([data-skin="glas"], [data-skin="buehne"]) .subnav {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-3);
}
:root:is([data-skin="glas"], [data-skin="buehne"]) .subnav-group.active { gap: var(--sp-2); }
:root:is([data-skin="glas"], [data-skin="buehne"]) .tab-btn {
  padding: 8px var(--sp-4);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
}
:root:is([data-skin="glas"], [data-skin="buehne"]) .tab-btn::after { display: none; }
:root:is([data-skin="glas"], [data-skin="buehne"]) :is(.btn, .btn-sm, .monat-nav-btn) { border-radius: var(--r-full); }
:root[data-skin="buehne"] .tab-btn.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
:root[data-skin="glas"] .tab-btn.active {
  background: var(--bg-card3);
  border-color: var(--border-strong);
  color: var(--text);
}

/* ── Breite Seitenleiste (Klarheit, Gruppen, Glas) ────────────────────
   Erst ab 1200 px. Bei Vincents zweiter Fensterbreite (909 px) bliebe mit
   232 px Leiste zu wenig Inhalt, dort bleibt die schmale Schiene.       */
@media (min-width: 1200px) {
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) { --rail-w: 232px; }
  :root[data-skin="klarheit"] { --rail-w: 240px; }
  :root[data-skin="gruppen"] { --rail-w: 260px; }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) .rail {
    align-items: stretch;
    padding: var(--sp-5) var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) .rail-brand {
    width: 64px;
    margin: 0 0 var(--sp-3) var(--sp-2);
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) .rail-areas {
    align-items: stretch;
    gap: 2px;
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) .rail-area {
    width: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-3);
    padding: 9px var(--sp-3);
    font-size: var(--fs-base);
    letter-spacing: 0;
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) .rail-area.active { font-weight: var(--fw-semi); }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) .rail-area::before { display: none; }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) .rail-dot {
    top: 50%;
    right: var(--sp-3);
    transform: translateY(-50%);
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) .rail-foot {
    flex-direction: row;
    width: auto;
    padding-left: var(--sp-1);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   EIGENES JE WELT
   ══════════════════════════════════════════════════════════════════════ */

/* Klarheit: die Bereichs-Symbole in Akzentfarbe, wie die Seitenleiste im Finder. */
:root[data-skin="klarheit"] .rail-area [data-lucide] { color: var(--rail-active); }

/* Gruppen: farbige Kästchen hinter den Symbolen … */
:root[data-skin="gruppen"] .rail-area [data-lucide] {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 8px;
  box-sizing: border-box;
  stroke-width: 2.1;
  color: #ffffff;
  background: var(--q, var(--text-subtle));
}
:root[data-skin="gruppen"] .rail-area[data-area="cockpit"]   { --q: var(--q-cockpit); }
:root[data-skin="gruppen"] .rail-area[data-area="portfolio"] { --q: var(--q-portfolio); }
:root[data-skin="gruppen"] .rail-area[data-area="team"]      { --q: var(--q-team); }
:root[data-skin="gruppen"] .rail-area[data-area="finanzen"]  { --q: var(--q-finanzen); }
:root[data-skin="gruppen"] .rail-area[data-area="wachstum"]  { --q: var(--q-wachstum); }
:root[data-skin="gruppen"] .rail-area[data-area="marketing"] { --q: var(--q-marketing); }
@media (min-width: 1200px) {
  :root[data-skin="gruppen"] .rail-areas {
    flex: 0 0 auto;
    padding: 6px;
    border-radius: var(--r-md);
    background: var(--bg-card);
  }
  :root[data-skin="gruppen"] .rail-area { padding: 7px var(--sp-2); }
  :root[data-skin="gruppen"] .rail-foot { margin-top: auto; }
}
/* … und Abschnittstitel als Kopfzeile über der Gruppe. */
:root[data-skin="gruppen"] .section-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  border-bottom: 0;
  padding: 0 var(--sp-1);
  margin-bottom: var(--sp-2);
}
:root[data-skin="gruppen"] .section-title :is(.btn, .monat-nav, .section-subtitle) {
  text-transform: none;
  letter-spacing: 0;
}

/* Glas: das Foto hinter der Seite. z-index -1 liegt über dem Grund des
   Dokuments, aber unter allem Inhalt. */
:root[data-skin="glas"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--glas-schleier), url("img/farbwelt-glas.jpg") center 40% / cover no-repeat;
}
:root[data-skin="glas"] :is(.topbar, .subnav) {
  background: var(--glas-flaeche);
}
:root[data-skin="glas"] :is(.rail, .mobile-rail) {
  backdrop-filter: saturate(1.7) blur(28px);
  -webkit-backdrop-filter: saturate(1.7) blur(28px);
}
/* Milchglas nur für die großen Flächen, nicht für jede Brett-Karte:
   fünfzig Unschärfe-Ebenen machen das Scrollen am Handy zäh. Beim Brett
   liegen die Spalten unter Glas, die Karten darin nur halbdurchsichtig.
   Die Werkzeugzeile bewusst nicht: backdrop-filter macht sie zum eigenen
   Stapelkontext, und ihr ⋯-Menü lag dann hinter den Spalten.            */
:root[data-skin="glas"] :is(.metric-card, .kpi-karte, .checkin-kachel, .vorausschau-kachel, .t5-card,
  .todo-heute-card, .ge-card, .m-coll-head.klapp, .gewinn-uebersicht, .unit-card,
  .pb-spalte, .modal, .msheet-panel, #toast) {
  backdrop-filter: saturate(1.6) blur(24px);
  -webkit-backdrop-filter: saturate(1.6) blur(24px);
  box-shadow: var(--shadow);
}
:root[data-skin="glas"] .todo-quickadd input {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* Der Monatsumsatz im Farbverlauf: die eine Zahl, auf die es ankommt. */
:root[data-skin="buehne"] .kpi-wert {
  background: var(--buehne-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.035em;
}

/* Navigation als Leiste oben (ab 1200 px): die Schiene liegt quer, und
   --topbar-h umfasst Leiste plus Kopfleiste. Daran hängen die
   Haftpositionen darunter (Reiterzeile). */
@media (min-width: 1200px) {
  :root[data-skin="buehne"] {
    --rail-w: 0px;
    --oben-h: 52px;
    --topbar-h: 128px;
    --buehne-breite: 1240px;
  }
  :root[data-skin="buehne"] .rail {
    inset: 0 0 auto 0;
    width: auto;
    height: var(--oben-h);
    flex-direction: row;
    justify-content: space-between;
    padding: 0 var(--sp-6);
    border-right: 0;
    border-bottom: 1px solid var(--rail-line);
    backdrop-filter: saturate(1.6) blur(20px);
    -webkit-backdrop-filter: saturate(1.6) blur(20px);
  }
  :root[data-skin="buehne"] .rail-brand { width: 44px; height: 32px; margin: 0; }
  :root[data-skin="buehne"] .rail-areas {
    flex: 0 1 auto;
    flex-direction: row;
    justify-content: center;
    width: auto;
    gap: 2px;
  }
  :root[data-skin="buehne"] .rail-area {
    width: auto;
    flex-direction: row;
    gap: var(--sp-2);
    padding: 7px var(--sp-3);
    font-size: var(--fs-sm);
    border-radius: var(--r-full);
  }
  :root[data-skin="buehne"] .rail-area [data-lucide] { width: 16px; height: 16px; }
  :root[data-skin="buehne"] .rail-area::before { display: none; }
  :root[data-skin="buehne"] .rail-dot { top: 4px; right: 6px; }
  :root[data-skin="buehne"] .rail-foot {
    flex-direction: row;
    width: auto;
    padding-top: 0;
    border-top: 0;
  }
  :root[data-skin="buehne"] .topbar {
    top: var(--oben-h);
    margin-top: var(--oben-h);
    min-height: calc(var(--topbar-h) - var(--oben-h));
  }
  :root[data-skin="buehne"] :is(.topbar, .subnav) {
    padding-left: max(var(--sp-6), calc((100% - var(--buehne-breite)) / 2 + var(--sp-6)));
    padding-right: max(var(--sp-6), calc((100% - var(--buehne-breite)) / 2 + var(--sp-6)));
  }
  :root[data-skin="buehne"] main {
    max-width: var(--buehne-breite);
    margin-inline: auto;
  }
}

/* ══ KOPF ═════════════════════════════════════════════════════════════
   Großer Titel mit dem Datum in Versalien darüber (Klarheit, Gruppen,
   Glas). Die Knöpfe rechts so groß wie in den Entwürfen.              */
@media (min-width: 901px) and (max-width: 1199px) {
  :root[data-skin="buehne"] { --topbar-h: 92px; }
}
@media (min-width: 901px) {
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) { --topbar-h: 92px; }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .topbar {
    align-items: flex-end;
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-3);
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .topbar-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: -0.025em;
    line-height: 1.1;
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) .topbar-title::before {
    content: attr(data-datum);
    display: block;
    margin-bottom: 2px;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    letter-spacing: .02em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .topbar-actions .btn {
    min-height: 40px;
    padding: 0 var(--sp-4);
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) #last-update { font-size: var(--fs-sm); }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .topbar-actions .btn [data-lucide] { width: 16px; height: 16px; }
}
/* Mehr Luft zum Rand wie in den Entwürfen (die Bühne zentriert eigens). */
@media (min-width: 1200px) {
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) :is(.topbar, .subnav) {
    padding-left: var(--sp-7);
    padding-right: var(--sp-7);
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) main {
    padding-left: var(--sp-7);
    padding-right: var(--sp-7);
  }
}
:root:is([data-skin="klarheit"], [data-skin="gruppen"]) .topbar-actions .btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
}
:root[data-skin="buehne"] .topbar-actions .btn-ghost { background: var(--bg-card2); border-color: transparent; }

/* ══ ABSCHNITTE ═══════════════════════════════════════════════════════
   Titel ohne Symbol, der Verweis rechts als Textlink mit Winkel. */
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .section-title > [data-lucide]:not(.m-coll-chev),
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .section-title > span > [data-lucide] {
  display: none;
}
:root:is([data-skin="klarheit"], [data-skin="glas"], [data-skin="buehne"]) .section-subtitle { font-size: var(--fs-base); }
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .section-title a.btn { text-decoration: none; }
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"]) .section-title .btn-ghost {
  flex-direction: row-reverse;
  gap: 2px;
  min-height: 36px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--fw-link);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"]) .section-title .btn-ghost [data-lucide] { display: none; }
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"]) .section-title .btn-ghost::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--fw-i-chevron) center / contain no-repeat;
  mask: var(--fw-i-chevron) center / contain no-repeat;
}

/* ══ SEITENLEISTE: Schriftzug statt Monogramm (ab 1200 px) ══════════ */
@media (min-width: 1200px) {
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .rail-brand {
    display: flex;
    align-items: center;
    width: auto;
    height: 40px;
    padding: 0 var(--sp-2);
    text-decoration: none;
  }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .rail-brand svg { display: none; }
  :root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) .rail-brand::after {
    content: "Sarfi";
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--rail-ink);
  }
  :root[data-skin="klarheit"] .rail-brand::after { content: "Sarfi Collection"; }
  :root[data-skin="buehne"] .rail-brand::after { font-size: var(--fs-md); font-weight: var(--fw-semi); }
  :root[data-skin="buehne"] .rail-area { font-size: var(--fs-sm); }
  :root[data-skin="buehne"] .rail-area.active { background: transparent; font-weight: var(--fw-semi); }

  /* Glas: die Leiste schwebt als Glasfläche mit Abstand zum Rand. */
  :root[data-skin="glas"] { --rail-w: 264px; }
  :root[data-skin="glas"] .rail {
    inset: 16px auto 16px 16px;
    width: 232px;
    border: 1px solid var(--rail-line);
    border-radius: 28px;
    box-shadow: var(--shadow);
  }
  :root[data-skin="glas"] .rail-area { border-radius: var(--r-full); }
}

/* Gruppen: die Kästchen hinter den Symbolen in der Größe der Einstellungen. */
:root[data-skin="gruppen"] .rail-area [data-lucide] { width: 28px; height: 28px; padding: 6px; border-radius: 7px; }

/* ══ ALLE REITER (seit 23.10.2026) ═══════════════════════════════════
   Was die Übersicht hat, bekommen die übrigen Reiter auch: Karten als
   Fläche mit Schatten statt Rahmen, Tabellen als Karte, Spaltenköpfe in
   normaler Schreibweise, ruhigere Felder. Mit :where() bleibt die
   Spezifität die der Klasse selbst; jede Signalvariante (.ck-karte.rot,
   Stufen am Todo, Behälterfarben am Brett, farbige Kanten der Einheiten
   und Prioritäten) ist spezifischer und gewinnt weiter. .pl-gap-card
   fehlt in der Rand-Liste: ihre dringende Fassung .pl-gap-urgent ist eine
   Einzelklasse und würde sonst verlieren (Prüfung 23.10.2026).           */
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"])) :is(.ck-karte, .ck-kachel,
  .reco-item, .ka-wrap, .kalender-wrap, .kredit-tracker, .rm-manual-item, .ro-portfolio-bar, .ro-kanal-card, .ro-unit,
  .ops-aufgabe, .jh-card, .blog-editor-card, .sa-objekt-card, .sa-impact-metric, .komm-kpi, .fin-block,
  .st-objekt, .anf-k) {
  border-color: transparent;
  box-shadow: var(--shadow);
}
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) :is(.ck-karte,
  .ka-wrap, .kalender-wrap, .kredit-tracker, .ro-portfolio-bar, .ro-kanal-card, .ro-unit, .jh-card, .blog-editor-card,
  .sa-objekt-card, .komm-kpi, .fin-block, .st-objekt, .unit-card, .inv-card, .opp-card, .prio-card, .rm-unit, .bk-card) {
  border-radius: var(--radius);
}
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) :is(.ck-kachel, .reco-item,
  .ops-aufgabe, .ops-kpi, .pl-gap-card, .rm-manual-item, .sa-impact-metric, .anf-k) {
  border-radius: var(--r-md);
}
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"])) :is(.unit-card, .inv-card, .opp-card,
  .prio-card, .rm-unit, .bk-card, .ops-kpi) {
  box-shadow: var(--shadow);
}

/* Tabellen: frei stehende Tabellen als Karte, Köpfe ohne Versalien. */
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) .ck-tabelle-rahmen:not(.ck-karte .ck-tabelle-rahmen, .modal .ck-tabelle-rahmen) {
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
:where(:root[data-skin="glas"]) .ck-tabelle-rahmen:not(.ck-karte .ck-tabelle-rahmen, .modal .ck-tabelle-rahmen) { border: 1px solid var(--border); }
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) :is(.ck-tabelle, .pl-table,
  .pe-table, .kosten-table, .kosten-dyn-table, .pnl-table, .kredit-table, .festmieten-table, .prio-rest-table,
  .ops-wartung-table, .blog-posts-table, .komm-table) th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

/* Felder: runder, mit der leisen Kante statt der starken. */
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) :is(input[type="text"],
  input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="search"],
  input[type="url"], input[type="time"], input[type="month"], select, textarea) {
  border-color: var(--border);
  border-radius: var(--r-sm);
}

/* Dialoge: der Grund dahinter verschwimmt wie in macOS. */
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) .modal-overlay {
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

/* Glas: Auf den Arbeitsreitern tritt das Foto zurück. Dort stehen lange
   Listen auf halbdurchsichtigen Karten, und hundert Unschärfe-Ebenen
   (eine je Befund) wären zu schwer; ein dichterer Schleier hält sie lesbar. */
:root[data-skin="glas"]:not(:has(#tab-uebersicht.active)) body::before {
  background: var(--glas-schleier-arbeit), url("img/farbwelt-glas.jpg") center 40% / cover no-repeat;
}

/* Abschnitte ohne eigene Karten (Rechnungs-Engine, Betrieb, Meldewesen …)
   werden selbst zur Karte, wie gruppierte Einstellungen. Wer schon Karten
   oder Tabellen enthält, bleibt offen; die Übersicht hat ihre eigene Ordnung. */
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) .tab-panel:not(#tab-uebersicht) > section:not(:has(.ck-karte, .ck-kachel,
  .ck-tabelle-rahmen, .unit-card, .inv-card, .opp-card, .prio-card, .rm-unit, .ops-kpi, .bk-card, .pb-spalte, .todo-card,
  .kpi-karte, .metric-card, .fin-block, .jh-card, .ka-wrap, .kalender-wrap, .ro-kanal-card, .ro-unit,
  .gewinn-uebersicht, .ge-card, .t5-card, .st-objekt, .blog-editor-card, .sa-paper, .lco-plakat,
  .mw-qr-karte, .komm-kpi, .ck-bereich, .ops-aufgabe, .reco-item, .pl-gap-card, .anf-k, section)) {
  padding: var(--fw-pad);
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Am Mac der Glasrand nur hier, wo der Abschnitt Fläche und Rundung hat.
     Die Randregel darunter hat die kürzere Ausnahmeliste: Abschnitte mit
     Kennzahl-Kacheln (Betriebs-Cockpit, Geldeingang) bekamen einen eckigen
     Kasten ohne Fläche. :where hält die Spezifität der Randregel. */
  :where(html.mac[data-skin="glas"]) & { border: 1px solid var(--border); }
}
:where(:root[data-skin="glas"]:not(.mac)) .tab-panel:not(#tab-uebersicht) > section:not(:has(.ck-karte, .ck-kachel, .ck-tabelle-rahmen,
  .unit-card, .inv-card, .pb-spalte, .todo-card, .fin-block, .ck-bereich, .sa-paper, .lco-plakat,
  .ops-aufgabe, .reco-item, .pl-gap-card, .anf-k, section)) {
  border: 1px solid var(--border);
}
/* Innenflächen in Karten: grau gefüllt statt umrandet. */
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) :is(.kredit-hero-item,
  .liq-kredit-item) {
  background: var(--bg-card2);
  border-color: transparent;
  border-radius: var(--r-md);
}

/* iPhone: breite Tabellen ohne eigenen Rahmen (Rechnungsläufe) scrollen in
   ihrer Karte statt die Seite zu verbreitern; Hinweise mit Pfaden brechen
   um (in .komm-hint war jedes Textstück ein Flex-Element in einer Zeile). */
@media (max-width: 900px) {
  :where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) .tab-panel:not(#tab-uebersicht) > section:has(table):not(:has(.ck-tabelle-rahmen)) {
    overflow-x: auto;
  }
}
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) .komm-hint { display: block; }
:where(:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"])) .komm-hint > :is(i, svg) {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -3px;
}

/* Glas: Das Foto gehört nicht aufs Papier. Die Druckregel in styles.css
   setzt print-color-adjust: exact für alles, ohne diese Zeile stand das
   A-Frame hinter Mietaufstellung, Bank-PDF und Meldewesen-Aushang.       */
@media print {
  :root[data-skin="glas"] body::before { content: none !important; }
}