/*
 * static/haut/virtual-nature.css – die Haut „Virtual Nature" für den Marketing Hub.
 *
 * Herkunft: die Haut „Virtual Nature" des Office Hubs (dort static/haut/virtual-nature.css, aus dem
 * Designsystem der Seite BSC Virtual Nature) – pastell, gebrochene Farben, Glas mit Weichzeichnung
 * dahinter, eine helle Kante oben (Licht von oben), zwei Schatten (nah und weit), flache Verläufe auf
 * Knöpfen, drei weiche Farbflecken auf dem Grund: Wald und Moos auf Papier, Himmel und Nebel, nachts
 * dunkles Moos. Michael, 24.09.2026: „Wir haben mittlerweile viele Themes – bitte sicherstellen, dass
 * alle Hubs auf alle Themes zugreifen können."
 *
 * Geschwister: virtual-nature-berry.css (dieselbe Mechanik in Beere). Diese Datei ist aus der
 * MH-Berry-Datei abgeleitet – gleiche Selektoren auf die MH-Klassen, nur Scope, Token und die harten
 * Farbwerte (Pflaume → Rinde, Beere → Wald) zurückgetauscht wie zwischen den beiden Office-Dateien.
 * Beide bleiben diffbar; wer an der einen die Selektoren ändert, zieht die andere mit.
 *
 * Alles hier steht unter [data-haut="virtual-nature"] am <html> (Mechanik: static/haut/haut.js).
 * Ohne das Attribut ist die Datei wirkungslos – der BSC-Standard bleibt, wie er ist.
 *
 * Aufbau:
 *   1. Token: die Hub-Variablen (--bg, --surface, --primary …) bekommen die Werte der
 *      Virtual-Nature-Palette, hell und dunkel. Damit folgt alles, was schon Token nutzt, von allein.
 *   2. Glas auf die Hausklassen: Kopf, Seitenleiste, Karten, Kennzahlen, Modals, Profil, Knöpfe,
 *      Eingaben, Tabellenkopf, Unterreiter, Anmeldung, Fußzeile, Chat-Fenster.
 *   3. Blur mit Maß: backdrop-filter nur auf schwebenden Schichten (Kopf, Seitenleiste, Fußzeile,
 *      Modal, Panels, Toast). Karten bekommen Glasfläche, Kante und Schatten OHNE Weichzeichner.
 *
 * Bewusst nicht umgefärbt: die Chat-Pille (#mc-btn, kupfern wie im Office – „damit der Chat überall
 * gleich aussieht"), die Signage-Designstation und die Vorschauen von Beiträgen (die zeigen, was
 * draußen ankommt, nicht die Oberfläche).
 */

/* ── 1. Token ──────────────────────────────────────────────────────────────────────────────── */
/* `html[…]`, nicht `[…]`: die Token-Blöcke in index.html/newsletter.html (`:root`, `[data-theme]`)
   stehen HINTER dieser Datei und hätten bei gleicher Spezifität das letzte Wort. */
html[data-haut="virtual-nature"]{
  --vn-papier:#f6f4ee;--vn-karte:#fbfaf7;--vn-nebel:#e5ebe3;--vn-linie:#d7ddd3;--vn-moos:#8fa98f;--vn-wald:#5f7d68;--vn-wald-d:#4d6756;
  --vn-himmel:#d6e3ea;--vn-blau:#9fbccb;--vn-sand:#ebe4d3;--vn-sonne:#efd9a8;--vn-lavendel:#cfc6dc;--vn-hagebutte:#d8a89c;--vn-rinde:#4f483f;--vn-stein:#8a857b;
  --bg:var(--vn-papier);--bg2:var(--vn-nebel);
  --surface:rgba(251,250,247,.86);--surface2:rgba(229,235,227,.55);--hover:rgba(95,125,104,.07);
  --border:var(--vn-linie);--text:var(--vn-rinde);--text-dim:var(--vn-stein);
  --primary:var(--vn-wald);--primary-h:var(--vn-wald-d);
  --success:#4f8a5e;--warning:#b08a3a;--danger:#b5655a;
  --shadow:rgba(79,72,63,.10);
  --hbg:rgba(246,244,238,.72);--htx:var(--vn-rinde);
  /* Glas */
  --haut-glas:rgba(251,250,247,.72);--haut-glas-d:rgba(251,250,247,.88);
  --haut-kante:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.35);
  --haut-schatten:0 1px 2px rgba(79,72,63,.06),0 10px 30px rgba(79,72,63,.10);
  --haut-schatten-tief:0 2px 6px rgba(79,72,63,.08),0 24px 60px rgba(79,72,63,.16);
  --haut-blur:blur(18px) saturate(1.15);
  --haut-rand:rgba(255,255,255,.7);
  --haut-knopf:linear-gradient(180deg,rgba(255,255,255,.9),rgba(251,250,247,.7));
  --haut-knopf-hover:linear-gradient(180deg,#fff,var(--vn-nebel));
  --haut-haupt:linear-gradient(180deg,#6f8d78,var(--vn-wald));
  --haut-haupt-hover:linear-gradient(180deg,#6a8873,var(--vn-wald-d));
  --haut-haupt-txt:#fff;
  --haut-haupt-schatten:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(77,103,86,.3),0 6px 16px rgba(77,103,86,.22);
  --haut-flecken:radial-gradient(60% 40% at 85% 0%,rgba(214,227,234,.9),transparent 70%),radial-gradient(50% 35% at 5% 25%,rgba(229,235,227,.95),transparent 70%),radial-gradient(45% 30% at 70% 75%,rgba(235,228,211,.8),transparent 70%);
  color-scheme:light;
}
/* Nacht: dunkles Moos statt Papier. Primär ist ein HELLES Wald – das dunkle Wald trägt auf
   dunklem Grund keinen Kontrast. Hauptknöpfe dann mit dunkler Schrift. */
html[data-haut="virtual-nature"][data-theme="dark"]{
  --bg:#1b211d;--bg2:#242c27;
  --surface:rgba(36,44,39,.88);--surface2:rgba(255,255,255,.05);--hover:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10);--text:#e6e8e2;--text-dim:#a3ab9f;
  --primary:#8fb096;--primary-h:#a3c2a9;
  --success:#7fbf8a;--warning:#d8b56a;--danger:#d98c80;
  --shadow:rgba(0,0,0,.35);
  --hbg:rgba(27,33,29,.72);--htx:#e6e8e2;
  --haut-glas:rgba(36,44,39,.66);--haut-glas-d:rgba(36,44,39,.84);
  --haut-kante:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.04);
  --haut-schatten:0 1px 2px rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.30);
  --haut-schatten-tief:0 2px 6px rgba(0,0,0,.30),0 24px 60px rgba(0,0,0,.45);
  --haut-rand:rgba(255,255,255,.10);
  --haut-knopf:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  --haut-knopf-hover:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  --haut-haupt:linear-gradient(180deg,#9dbda4,#7fa088);
  --haut-haupt-hover:linear-gradient(180deg,#a9c8b0,#8bab93);
  --haut-haupt-txt:#16201a;
  --haut-haupt-schatten:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.3),0 6px 16px rgba(143,176,150,.18);
  --haut-flecken:radial-gradient(60% 40% at 85% 0%,rgba(52,74,88,.55),transparent 70%),radial-gradient(50% 35% at 5% 25%,rgba(58,80,62,.6),transparent 70%),radial-gradient(45% 30% at 70% 75%,rgba(84,74,54,.45),transparent 70%);
  color-scheme:dark;
}

/* ── 2. Grund, Schrift ─────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] body{background-color:var(--bg);background-image:var(--haut-flecken);background-attachment:fixed}
[data-haut="virtual-nature"] body.im-rahmen{background:transparent}
[data-haut="virtual-nature"] h1,[data-haut="virtual-nature"] h2{color:var(--primary)}

/* ── Kopf: Glas statt Fläche ───────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] #topbar{background:var(--hbg);color:var(--htx);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur);border-bottom:1px solid var(--haut-rand);box-shadow:0 1px 0 rgba(79,72,63,.06),0 8px 24px rgba(79,72,63,.05)}
[data-haut="virtual-nature"] body.im-rahmen #topbar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom-color:var(--haut-rand)}
[data-haut="virtual-nature"] .tb-logo:hover{background:var(--haut-glas-d);box-shadow:var(--haut-kante)}
[data-haut="virtual-nature"] .tb-logo .tb-mark{background:var(--haut-haupt);box-shadow:var(--haut-haupt-schatten)}
[data-haut="virtual-nature"] .tb-logo .tb-txt{color:var(--primary);letter-spacing:2px}
[data-haut="virtual-nature"] .tb-title{color:var(--primary)}
[data-haut="virtual-nature"] .backlink:hover{background:var(--haut-glas-d);box-shadow:var(--haut-kante)}
[data-haut="virtual-nature"] .theme-btn,[data-haut="virtual-nature"] .meld-btn{background:var(--haut-knopf);color:var(--text);box-shadow:var(--haut-kante),0 1px 2px rgba(79,72,63,.06);border:1px solid rgba(79,72,63,.08)}
[data-haut="virtual-nature"] .theme-btn:hover,[data-haut="virtual-nature"] .meld-btn:hover{background:var(--haut-knopf-hover);color:var(--text)}
[data-haut="virtual-nature"] #meld-panel{background:var(--haut-glas-d);border:1px solid var(--haut-rand);border-radius:18px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="virtual-nature"] .tb-av{border-color:var(--haut-rand);box-shadow:0 2px 8px rgba(79,72,63,.15)}
[data-haut="virtual-nature"] .tb-profile:hover .tb-av{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}

/* ── Fußzeile ──────────────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] #footbar{background:var(--hbg);border-top:1px solid var(--haut-rand);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="virtual-nature"] .ft-gear:hover{color:var(--text);background:var(--surface2)}

/* ── Seitenleiste ──────────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] #snav{background:var(--haut-glas);border-right:1px solid var(--haut-rand);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur);box-shadow:1px 0 0 rgba(79,72,63,.05)}
[data-haut="virtual-nature"] #snav .brand{color:var(--primary)}
[data-haut="virtual-nature"] .nav-tab{transition:background .15s,color .15s,box-shadow .15s}
[data-haut="virtual-nature"] .nav-tab:hover{background:var(--haut-glas-d);box-shadow:var(--haut-kante),0 1px 3px rgba(79,72,63,.06)}
[data-haut="virtual-nature"] .nav-tab.active,[data-haut="virtual-nature"] .nav-tab.active:hover{background:var(--haut-haupt);color:var(--haut-haupt-txt);box-shadow:var(--haut-haupt-schatten)}

/* ── Karten, Kennzahlen, Bildkarten ────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] .card,[data-haut="virtual-nature"] .stat-card,[data-haut="virtual-nature"] .mcard,[data-haut="virtual-nature"] .login-box{background:var(--haut-glas);border:1px solid var(--haut-rand);border-radius:14px;box-shadow:var(--haut-kante),var(--haut-schatten)}
[data-haut="virtual-nature"] .stat-card{border-top:3px solid var(--primary)}
/* Dashboard (seit v0.134.0): Kennzahl-Kacheln und Pillen im Kopf */
[data-haut="virtual-nature"] .dash-kpi{background:var(--haut-glas);border:1px solid var(--haut-rand);border-top:3px solid var(--primary);border-radius:14px;box-shadow:var(--haut-kante),var(--haut-schatten)}
[data-haut="virtual-nature"] .dash-kpi.klick:hover{box-shadow:var(--haut-kante),0 2px 4px rgba(79,72,63,.06),0 12px 28px rgba(79,72,63,.10)}
[data-haut="virtual-nature"] .dash-pille{background:var(--haut-knopf);border-color:rgba(79,72,63,.10);box-shadow:var(--haut-kante),0 1px 2px rgba(79,72,63,.06)}
[data-haut="virtual-nature"][data-theme="dark"] .dash-pille{border-color:var(--haut-rand)}
[data-haut="virtual-nature"] .mcard:hover{box-shadow:var(--haut-kante),0 2px 4px rgba(79,72,63,.06),0 12px 28px rgba(79,72,63,.10)}
[data-haut="virtual-nature"] .card-title,[data-haut="virtual-nature"] .modal-title{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.02em;text-transform:none;font-size:15px;color:var(--text)}
[data-haut="virtual-nature"] #upd-banner{background:var(--haut-glas);border-color:var(--haut-rand);border-left:4px solid var(--primary);box-shadow:var(--haut-kante),0 1px 3px rgba(79,72,63,.06)}
[data-haut="virtual-nature"] .bl-thumb{border-color:var(--haut-rand);background:var(--surface2)}

/* ── Tabellen ──────────────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] .data-table th{background:rgba(255,255,255,.3);border-bottom-color:var(--haut-rand);font-family:'Inter',sans-serif;letter-spacing:.06em;font-size:10.5px;font-weight:600}
[data-haut="virtual-nature"][data-theme="dark"] .data-table th{background:rgba(255,255,255,.04)}
[data-haut="virtual-nature"] .data-table td{border-bottom-color:var(--haut-rand)}
[data-haut="virtual-nature"] .data-table tbody tr:hover{background:rgba(255,255,255,.35)}
[data-haut="virtual-nature"][data-theme="dark"] .data-table tbody tr:hover{background:rgba(255,255,255,.05)}

/* ── Knöpfe: flacher Verlauf, Kante oben ───────────────────────────────────────────────────── */
[data-haut="virtual-nature"] .btn{border-radius:11px;letter-spacing:.2px;background:var(--haut-knopf);border:1px solid rgba(79,72,63,.10);color:var(--text);box-shadow:var(--haut-kante),0 1px 2px rgba(79,72,63,.06),0 4px 12px rgba(79,72,63,.06);transition:background .15s,box-shadow .15s,transform .08s}
[data-haut="virtual-nature"][data-theme="dark"] .btn{border-color:var(--haut-rand)}
[data-haut="virtual-nature"] .btn:hover{background:var(--haut-knopf-hover);border-color:var(--vn-moos)}
[data-haut="virtual-nature"] .btn-primary,[data-haut="virtual-nature"] .btn-primary:hover,[data-haut="virtual-nature"] .drs-seg button.an{background:var(--haut-haupt);border-color:transparent;color:var(--haut-haupt-txt);box-shadow:var(--haut-haupt-schatten)}
[data-haut="virtual-nature"] .btn-primary:hover{background:var(--haut-haupt-hover)}
[data-haut="virtual-nature"] .btn-ghost{background:transparent;border-color:transparent;box-shadow:none}
[data-haut="virtual-nature"] .btn-ghost:hover{background:var(--haut-glas-d);box-shadow:var(--haut-kante)}
[data-haut="virtual-nature"] .subtabs{border-bottom-color:var(--haut-rand)}
[data-haut="virtual-nature"] .subtab{font-family:'Inter',sans-serif;letter-spacing:0;font-size:12.5px;font-weight:600}
[data-haut="virtual-nature"] .subtab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ── Eingaben ──────────────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] .finput,[data-haut="virtual-nature"] .fselect,[data-haut="virtual-nature"] textarea.finput{background:rgba(255,255,255,.6);border:1px solid var(--vn-linie);border-radius:10px;box-shadow:inset 0 1px 2px rgba(79,72,63,.05)}
[data-haut="virtual-nature"][data-theme="dark"] .finput,[data-haut="virtual-nature"][data-theme="dark"] .fselect,[data-haut="virtual-nature"][data-theme="dark"] textarea.finput{background:rgba(255,255,255,.06);border-color:var(--haut-rand)}
[data-haut="virtual-nature"] .finput:focus,[data-haut="virtual-nature"] .fselect:focus,[data-haut="virtual-nature"] textarea.finput:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
[data-haut="virtual-nature"] .flabel{font-family:'Inter',sans-serif;letter-spacing:.06em;font-size:10.5px;font-weight:600}
[data-haut="virtual-nature"] .mh-switch span{background:rgba(79,72,63,.18)}
[data-haut="virtual-nature"] .mh-switch input:checked+span{background:var(--primary)}

/* ── Chips ─────────────────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] .tagpill{background:var(--haut-knopf);border-color:var(--haut-rand);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(79,72,63,.06)}
[data-haut="virtual-nature"][data-theme="dark"] .tagpill{box-shadow:var(--haut-kante)}

/* ── Schwebende Schichten: Modal, Profil, Darstellung, Chat-Fenster, Toast ────────────────── */
[data-haut="virtual-nature"] .modal-overlay{background:rgba(79,72,63,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[data-haut="virtual-nature"][data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.45)}
[data-haut="virtual-nature"] .modal{background:var(--haut-glas-d);border:1px solid var(--haut-rand);border-radius:20px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="virtual-nature"] .modal-header{background:rgba(255,255,255,.3);border-bottom-color:var(--haut-rand)}
[data-haut="virtual-nature"][data-theme="dark"] .modal-header{background:rgba(255,255,255,.04)}
[data-haut="virtual-nature"] .modal-footer{border-top-color:var(--haut-rand)}
[data-haut="virtual-nature"] #pp-lokal,[data-haut="virtual-nature"] .drs-modal,[data-haut="virtual-nature"] #mc-panel{background:var(--haut-glas-d);border:1px solid var(--haut-rand);border-radius:18px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="virtual-nature"] .pp-item:hover,[data-haut="virtual-nature"] .drs-karte:hover{background:rgba(255,255,255,.35)}
[data-haut="virtual-nature"][data-theme="dark"] .pp-item:hover,[data-haut="virtual-nature"][data-theme="dark"] .drs-karte:hover{background:rgba(255,255,255,.05)}
[data-haut="virtual-nature"] .drs-karte{background:var(--haut-glas);border-color:var(--haut-rand);box-shadow:var(--haut-kante),0 1px 3px rgba(79,72,63,.06)}
[data-haut="virtual-nature"] .drs-karte.an{border-color:var(--primary)}
[data-haut="virtual-nature"] .drs-overlay{background:rgba(79,72,63,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[data-haut="virtual-nature"][data-theme="dark"] .drs-overlay{background:rgba(0,0,0,.45)}
[data-haut="virtual-nature"] .drs-fertig,[data-haut="virtual-nature"] .drs-haken{background:var(--haut-haupt);color:var(--haut-haupt-txt)}
[data-haut="virtual-nature"] .drs-seg{background:rgba(255,255,255,.5);border-color:rgba(79,72,63,.12);box-shadow:inset 0 1px 2px rgba(79,72,63,.06)}
[data-haut="virtual-nature"][data-theme="dark"] .drs-seg{background:rgba(255,255,255,.06);border-color:var(--haut-rand)}
[data-haut="virtual-nature"] #toast{background:var(--haut-glas-d);color:var(--text);border:1px solid var(--haut-rand);border-radius:14px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}

/* ── Anmeldung ─────────────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] #login-overlay{background-color:var(--bg);background-image:var(--haut-flecken)}
[data-haut="virtual-nature"] .login-box{border-radius:22px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}

/* ── Sonstiges ─────────────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] ::selection{background:color-mix(in srgb,var(--primary) 25%,transparent)}
[data-haut="virtual-nature"] ::-webkit-scrollbar-thumb{background:rgba(79,72,63,.18);border-radius:8px}

/* Ohne Weichzeichner (alte Browser): die Flächen werden dichter, damit nichts durchscheint. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-haut="virtual-nature"]{--haut-glas:rgba(251,250,247,.96);--haut-glas-d:rgba(251,250,247,.98);--hbg:rgba(246,244,238,.97)}
  html[data-haut="virtual-nature"][data-theme="dark"]{--haut-glas:rgba(36,44,39,.96);--haut-glas-d:rgba(36,44,39,.98);--hbg:rgba(27,33,29,.97)}
}
/* Wer weniger Bewegung will, bekommt sie nicht. */
@media (prefers-reduced-motion:reduce){[data-haut="virtual-nature"] .btn,[data-haut="virtual-nature"] .nav-tab{transition:none}}