/*
 * static/haut/virtual-nature.css – die Haut „Virtual Nature" für den ganzen Office Hub.
 *
 * Herkunft: das Designsystem der Seite BSC Virtual Nature (static/virtual-nature/vn.css,
 * docs/virtual_nature_kontext.md §3) – pastell, gebrochene Farben, Flächen aus Glas mit
 * Weichzeichnung dahinter, eine helle Kante oben (Licht von oben), zwei Schatten (nah und weit),
 * flache Verläufe auf Knöpfen. Michael, 16.09.2026: „Das macOS-Glas-Design aus dem Virtual
 * Nature Modul bitte auch auf den kompletten Office Hub umsetzen – aber umschaltbar."
 *
 * 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 wie auf der Seite, dunkel als neue „Nacht"-Fassung.
 *      Damit folgt alles, was schon Token nutzt, von allein.
 *   2. Glas auf die Hausklassen: Kopf, Seitenleiste, Karten, Kacheln, Modals, Panels, Knöpfe,
 *      Eingaben, Tabellenkopf, Anmeldung, Fußzeile.
 *   3. Blur mit Maß: backdrop-filter nur auf schwebenden Schichten (Kopf, Seitenleiste, Modal,
 *      Panels, Toasts). Karten bekommen Glasfläche, Kante und Schatten OHNE Weichzeichner –
 *      ein Dashboard hat 30+ Karten, 30 Weichzeichner ruckeln auch am Arbeitsplatz.
 *
 * Bewusst nicht umgefärbt: Aufgaben (Asana-Optik, --as-*), Dienstplan (Ordio-Optik, --dp-*),
 * BAX (Terminal), die Aura-Kachel und die GF-/Gaming-Center-Einträge – eigene Farbwelten mit
 * Absicht. Feinschliff nach dem ersten echten Blick.
 */

/* ── 1. Token ──────────────────────────────────────────────────────────────────────────────── */
/* `html[…]`, nicht `[…]`: die Token-Blöcke in index.html/settings.html (`:root,[data-theme]`) stehen
   HINTER dieser Datei und hätten bei gleicher Spezifität das letzte Wort – der Kopf blieb orange. */
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);--bg-card:var(--surface);--bg-secondary:var(--surface2);
  --border:var(--vn-linie);--text:var(--vn-rinde);--text-dim:var(--vn-stein);
  --primary:var(--vn-wald);--primary-h:var(--vn-wald-d);--secondary:#6f8d78;--secondary-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-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: derselbe Grundsatz, dunkles Moos statt Papier. Primär ist ein helles Wald – auf
   dunklem Grund trägt das dunkle Wald 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);
  --border:rgba(255,255,255,.10);--text:#e6e8e2;--text-dim:#a3ab9f;
  --primary:#8fb096;--primary-h:#a3c2a9;--secondary:#7d9a85;--secondary-h:#8fb096;
  --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-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"] .main-scroll{background:transparent}

/* ── Kopf: Glas statt Farbfläche, Schrift in Rinde ─────────────────────────────────────────── */
[data-haut="virtual-nature"] .header{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"] .logo-main,[data-haut="virtual-nature"] .logo-main-hdr{color:var(--primary);letter-spacing:2px}
/* Das Firmenlogo (hochgeladenes Bild, weiß gezeichnet) wäre auf dem hellen Glas unsichtbar – hell wird es
   schwarz (Michael, 16.09.2026: „bei Nature das Logo auf schwarz"), in der Nacht bleibt es weiß. brightness(0)
   macht jede Zeichenfarbe schwarz und lässt die Transparenz stehen. */
[data-haut="virtual-nature"] .logo-img{filter:brightness(0);opacity:.85}
[data-haut="virtual-nature"][data-theme="dark"] .logo-img{filter:none;opacity:.9}
[data-haut="virtual-nature"] .logo-sub,[data-haut="virtual-nature"] .logo-sub-hdr{color:var(--text-dim);opacity:1}
[data-haut="virtual-nature"] .pill{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"] .hclock{opacity:.8;color:var(--text-dim)}
[data-haut="virtual-nature"] .theme-btn,[data-haut="virtual-nature"] .back-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"] .back-btn:hover,[data-haut="virtual-nature"] .meld-btn:hover{background:var(--haut-knopf-hover);color:var(--text)}
/* Glocke: die Grundregel malt sie weiß auf Weiß – im hellen Glas-Kopf unsichtbar. Strich in der Schriftfarbe. */
[data-haut="virtual-nature"] .meld-btn .meld-stumm-strich{background:currentColor}
[data-haut="virtual-nature"] .logout-btn{color:var(--text-dim)}
[data-haut="virtual-nature"] .logout-btn:hover{background:var(--surface2);color:var(--text)}
[data-haut="virtual-nature"] .profile-av{border-color:var(--haut-rand);box-shadow:0 2px 8px rgba(79,72,63,.15)}
[data-haut="virtual-nature"] .profile-av:hover{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
[data-haut="virtual-nature"] .snav-burger{color:var(--text)}
[data-haut="virtual-nature"] .nav-tab{color:var(--text-dim)}
[data-haut="virtual-nature"] .header .nav-tab:hover{color:var(--text)}
[data-haut="virtual-nature"] .header .nav-tab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ── Fußzeile ──────────────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] .footer{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"] .footer-text,[data-haut="virtual-nature"] .footer-ws,[data-haut="virtual-nature"] .footer-gear{color:var(--text-dim)}
[data-haut="virtual-nature"] .footer-gear:hover{color:var(--text);background:var(--surface2)}

/* ── Seitenleiste (index.html: .snav · settings.html: .tab-bar) ───────────────────────────── */
[data-haut="virtual-nature"] .snav,[data-haut="virtual-nature"] .tab-bar{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-search,[data-haut="virtual-nature"] .nav-search{background:rgba(255,255,255,.55);border-color:var(--haut-rand);box-shadow:inset 0 1px 2px rgba(79,72,63,.06)}
[data-haut="virtual-nature"][data-theme="dark"] .snav-search,[data-haut="virtual-nature"][data-theme="dark"] .nav-search{background:rgba(255,255,255,.06)}
[data-haut="virtual-nature"] .snav .nav-tab,[data-haut="virtual-nature"] .tab-bar .tab-btn{border-radius:10px;transition:background .15s,color .15s,box-shadow .15s}
[data-haut="virtual-nature"] .snav .nav-tab:hover,[data-haut="virtual-nature"] .tab-bar .tab-btn:hover{background:var(--haut-glas-d);box-shadow:var(--haut-kante),0 1px 3px rgba(79,72,63,.06)}
[data-haut="virtual-nature"] .snav .nav-tab.active,[data-haut="virtual-nature"] .tab-bar .tab-btn.active,[data-haut="virtual-nature"] .tab-bar .tab-btn.active:hover{background:var(--haut-haupt);color:var(--haut-haupt-txt);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(77,103,86,.3),0 6px 16px rgba(77,103,86,.25)}
[data-haut="virtual-nature"] .snav .nav-tab.active .snav-ic,[data-haut="virtual-nature"] .tab-bar .tab-btn.active .tb-ic{color:var(--haut-haupt-txt)}
[data-haut="virtual-nature"] .snav .nav-tab.active .nbadge{background:rgba(255,255,255,.28)}
[data-haut="virtual-nature"] .snav-group,[data-haut="virtual-nature"] .nav-section{color:var(--text-dim);font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.08em;font-size:10.5px}
[data-haut="virtual-nature"] .snav-collapse-btn{background:var(--haut-knopf);border-color:var(--haut-rand);box-shadow:var(--haut-kante)}
[data-haut="virtual-nature"] .snav-foot{border-top-color:var(--haut-rand)}
[data-haut="virtual-nature"] #snav-mob-overlay.show{background:rgba(79,72,63,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* ── Karten, Kacheln ───────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] .card,[data-haut="virtual-nature"] .stat-card,[data-haut="virtual-nature"] .mod-tile,[data-haut="virtual-nature"] .dash-tile,[data-haut="virtual-nature"] .kat-tile,[data-haut="virtual-nature"] .integration-item,[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,[data-haut="virtual-nature"] .mod-tile{border-top-width:3px}
[data-haut="virtual-nature"] .stat-card[onclick]:hover,[data-haut="virtual-nature"] .kat-tile: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-header{background:rgba(255,255,255,.35);border-bottom:1px solid var(--haut-rand)}
[data-haut="virtual-nature"][data-theme="dark"] .card-header{background:rgba(255,255,255,.04)}
[data-haut="virtual-nature"] .card-title,[data-haut="virtual-nature"] .modal-title,[data-haut="virtual-nature"] .settings-section-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"] .settings-section-title{background:transparent}
[data-haut="virtual-nature"] .pipeline-stage{background:var(--haut-glas);border-color:var(--haut-rand);box-shadow:var(--haut-kante),0 1px 3px rgba(79,72,63,.06);border-radius:12px}
[data-haut="virtual-nature"] .pipeline-stage:hover{background:var(--haut-glas-d)}

/* ── 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;transition:background .15s,box-shadow .15s,transform .08s}
[data-haut="virtual-nature"] .btn-primary,[data-haut="virtual-nature"] .btn-secondary,[data-haut="virtual-nature"] .drs-seg button.an{background:var(--haut-haupt);color:var(--haut-haupt-txt);box-shadow: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)}
[data-haut="virtual-nature"] .btn-primary:hover,[data-haut="virtual-nature"] .btn-secondary:hover{background:var(--haut-haupt-hover)}
[data-haut="virtual-nature"] .btn-success{background:linear-gradient(180deg,#6a9d77,var(--success));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(79,138,94,.25)}
[data-haut="virtual-nature"] .btn-danger{background:linear-gradient(180deg,#c9847a,var(--danger));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(181,101,90,.25)}
[data-haut="virtual-nature"] .btn-ghost,[data-haut="virtual-nature"] .row-btn,[data-haut="virtual-nature"] .pp-mini-btn,[data-haut="virtual-nature"] .fulf-rowbtn{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)}
[data-haut="virtual-nature"][data-theme="dark"] .btn-ghost,[data-haut="virtual-nature"][data-theme="dark"] .row-btn,[data-haut="virtual-nature"][data-theme="dark"] .pp-mini-btn{border-color:var(--haut-rand)}
[data-haut="virtual-nature"] .btn-ghost:hover,[data-haut="virtual-nature"] .row-btn:hover,[data-haut="virtual-nature"] .pp-mini-btn:hover{background:var(--haut-knopf-hover);color:var(--text);border-color:var(--vn-moos)}
[data-haut="virtual-nature"] .subtab-btn,[data-haut="virtual-nature"] .tab-btn{font-family:'Inter',sans-serif;letter-spacing:0;font-size:12.5px;font-weight:600}
[data-haut="virtual-nature"] .subtab-btn.active,[data-haut="virtual-nature"] .tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ── Eingaben ──────────────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] .finput,[data-haut="virtual-nature"] .fselect,[data-haut="virtual-nature"] .ftextarea,[data-haut="virtual-nature"] .form-control{background:rgba(255,255,255,.6);border:1px solid var(--vn-linie);border-radius:10px;font-family:'Inter',sans-serif;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"] .ftextarea,[data-haut="virtual-nature"][data-theme="dark"] .form-control{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"] .ftextarea:focus,[data-haut="virtual-nature"] .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
[data-haut="virtual-nature"] .form-label,[data-haut="virtual-nature"] .flabel{font-family:'Inter',sans-serif;letter-spacing:.06em;font-size:10.5px;font-weight:600}

/* ── Chips ─────────────────────────────────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] .dt-chip,[data-haut="virtual-nature"] .sbadge{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
[data-haut="virtual-nature"] .nbadge{background:var(--primary);color:#fff}

/* ── Schwebende Schichten: Modal, Profil-Panel, Darstellung, Toasts ───────────────────────── */
[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"] #profile-panel,[data-haut="virtual-nature"] .drs-modal{background:var(--haut-glas);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"] #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"] .pp-head{background:rgba(255,255,255,.3);border-bottom-color:var(--haut-rand)}
[data-haut="virtual-nature"][data-theme="dark"] .pp-head{background:rgba(255,255,255,.04)}
[data-haut="virtual-nature"] .pp-row.clickable:hover,[data-haut="virtual-nature"] .drs-karte:hover{background:rgba(255,255,255,.35)}
[data-haut="virtual-nature"][data-theme="dark"] .pp-row.clickable:hover,[data-haut="virtual-nature"][data-theme="dark"] .drs-karte:hover{background:rgba(255,255,255,.05)}
[data-haut="virtual-nature"] .pp-div{background:var(--haut-rand)}
[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{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);border:1px solid var(--haut-rand);border-left-width:4px;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)}
[data-haut="virtual-nature"] .login-header{background:linear-gradient(160deg,var(--vn-himmel),var(--vn-nebel) 70%,var(--vn-sand))}
[data-haut="virtual-nature"][data-theme="dark"] .login-header{background:linear-gradient(160deg,#2b3a44,#2a3a2e 70%,#3a3529)}
[data-haut="virtual-nature"] .login-logo{color:var(--primary);letter-spacing:3px}
[data-haut="virtual-nature"] .login-sub{color:var(--text-dim)}

/* ── Sonstiges aus dem gemeinsamen CSS ─────────────────────────────────────────────────────── */
[data-haut="virtual-nature"] .pp-track.on{background:var(--primary)}
[data-haut="virtual-nature"] .tsm-type-btn.selected{background:var(--haut-glas-d)}
[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"] .snav .nav-tab{transition:none}}

/* ══ Mobile App (frontend/app/, eigene Klassen und Token – docs/pwa_neubau_konzept.md) ═══════
   Dieselbe Palette, dieselben Glas-Regeln. Kopf und Leiste haben in der App schon Blur; Karten,
   Listen, Kacheln, Menü-Einträge und Blätter bekommen Glasfläche, Kante und Schatten. */
html[data-haut="virtual-nature"]{
  --primary-soft:rgba(95,125,104,.14);--on-primary:#fff;
  --border-soft:rgba(79,72,63,.10);--text-faint:#a8a397;
  --success-soft:rgba(79,138,94,.14);--warning-soft:rgba(176,138,58,.16);--danger-soft:rgba(181,101,90,.12);
  --leiste-bg:rgba(251,250,247,.72);--kopf-bg:rgba(246,244,238,.72);
  --shadow-1:var(--haut-schatten);--shadow-2:var(--haut-schatten-tief);
  --skelett:linear-gradient(90deg,var(--vn-nebel) 25%,var(--vn-karte) 40%,var(--vn-nebel) 55%);
}
html[data-haut="virtual-nature"][data-theme="dark"]{
  --primary-soft:rgba(143,176,150,.18);--on-primary:#16201a;
  --border-soft:rgba(255,255,255,.08);--text-faint:#727a6e;
  --success-soft:rgba(127,191,138,.18);--warning-soft:rgba(216,181,106,.18);--danger-soft:rgba(217,140,128,.16);
  --leiste-bg:rgba(27,33,29,.74);--kopf-bg:rgba(27,33,29,.74);
  --skelett:linear-gradient(90deg,#242c27 25%,#2c3630 40%,#242c27 55%);
}
[data-haut="virtual-nature"] .kopf{background:var(--kopf-bg);border-bottom:1px solid var(--haut-rand);box-shadow:0 1px 0 rgba(79,72,63,.05),0 8px 24px rgba(79,72,63,.05)}
[data-haut="virtual-nature"] .leiste{background:var(--leiste-bg);border-top:1px solid var(--haut-rand)}
[data-haut="virtual-nature"] .karte,[data-haut="virtual-nature"] .liste,[data-haut="virtual-nature"] .kachel,[data-haut="virtual-nature"] .menue-eintrag{background:var(--haut-glas);border:1px solid var(--haut-rand);box-shadow:var(--haut-kante),var(--haut-schatten)}
[data-haut="virtual-nature"] .karte.flach{box-shadow:var(--haut-kante);border-color:var(--haut-rand)}
[data-haut="virtual-nature"] .karte.akzent{background:var(--haut-haupt);color:var(--haut-haupt-txt);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(77,103,86,.28)}
[data-haut="virtual-nature"] .zeile{border-bottom-color:var(--haut-rand)}
[data-haut="virtual-nature"] .zeile:active{background:rgba(255,255,255,.35)}
[data-haut="virtual-nature"][data-theme="dark"] .zeile:active{background:rgba(255,255,255,.05)}
[data-haut="virtual-nature"] .knopf{background:var(--haut-haupt);color:var(--haut-haupt-txt);box-shadow: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)}
[data-haut="virtual-nature"] .knopf.zweit{background:var(--haut-knopf);color:var(--text);border:1px solid rgba(79,72,63,.10);box-shadow:var(--haut-kante),0 1px 2px rgba(79,72,63,.06),0 4px 12px rgba(79,72,63,.06)}
[data-haut="virtual-nature"][data-theme="dark"] .knopf.zweit{border-color:var(--haut-rand)}
[data-haut="virtual-nature"] .knopf.still{background:transparent;color:var(--primary);box-shadow:none}
[data-haut="virtual-nature"] .knopf.gefahr{background:linear-gradient(180deg,#c9847a,var(--danger));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(181,101,90,.25)}
[data-haut="virtual-nature"] .knopf.gefahr.zweit{background:var(--danger-soft);color:var(--danger);box-shadow:none;border:none}
[data-haut="virtual-nature"] .chip{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"] .chip{box-shadow:var(--haut-kante)}
[data-haut="virtual-nature"] .chip.aktiv{background:var(--haut-haupt);color:var(--haut-haupt-txt);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
[data-haut="virtual-nature"] .eingabe,[data-haut="virtual-nature"] .auswahl,[data-haut="virtual-nature"] .textfeld{background:rgba(255,255,255,.6);border-color:var(--vn-linie);box-shadow:inset 0 1px 2px rgba(79,72,63,.05)}
[data-haut="virtual-nature"][data-theme="dark"] .eingabe,[data-haut="virtual-nature"][data-theme="dark"] .auswahl,[data-haut="virtual-nature"][data-theme="dark"] .textfeld{background:rgba(255,255,255,.06);border-color:var(--haut-rand)}
[data-haut="virtual-nature"] .sheet-hintergrund{background:rgba(79,72,63,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[data-haut="virtual-nature"][data-theme="dark"] .sheet-hintergrund{background:rgba(0,0,0,.45)}
[data-haut="virtual-nature"] .sheet{background:var(--haut-glas-d);border:1px solid var(--haut-rand);border-bottom:none;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="virtual-nature"] .toast{background:var(--haut-glas-d);color:var(--text);border:1px solid var(--haut-rand);box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="virtual-nature"] .anmeldung-logo{background:var(--haut-haupt);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(77,103,86,.28)}
[data-haut="virtual-nature"] .anmeldung,[data-haut="virtual-nature"] .splash{background-color:var(--bg);background-image:var(--haut-flecken)}
[data-haut="virtual-nature"] .schalter[aria-checked="true"]{background:var(--primary)}
[data-haut="virtual-nature"] .abzeichen{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}