/* ============================================================================
   DESIGN „GLAS" — Grund (Richtung 2, gewählt am 04.10.2026)
   ----------------------------------------------------------------------------
   Diese Dateien lädt includes/_header.php NUR, wenn das Erscheinungsbild „glas"
   gewählt ist (includes/design.php) — und zwar NACH style-kollin.css. Sie
   überschreiben also Token und einzelne Bausteine; wer „klassisch" sieht, bekommt
   von alledem nichts.

   Reihenfolge = Dateiname: 00-grund zuerst, dann je Ansicht eine Datei
   (20-heute, 30-woche, …), 90-dunkel zuletzt.

   Grundsätze:
   - Milchglas (--glas) für Karten: durchscheinend, OHNE Weichzeichner. Der
     Weichzeichner (backdrop-filter) macht ein Element zum Bezugsrahmen für alles
     Feste darin und kostet auf alten Handys Tempo — er steht nur an Schiene,
     Kopf, Leiste unten und an Fenstern, die am <body> hängen.
   - --surface bleibt DECKEND: Stehende Spalten, Menüs und Blätter dürfen nicht
     durchscheinen.
   - Hell und Dunkel sind dieselben Regeln mit anderen Token. Keine Farbe steht
     hier als fester Wert in einer Regel, die es nur für einen Modus gibt.
   ============================================================================ */

:root[data-design="glas"] {
    --font-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
    --font-sans:    "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;

    /* Hintergrund: drei weiche Farbwolken auf einem hellen Grund */
    --grund-farbe: #f7f1f4;
    --grund: radial-gradient(1100px 620px at 8% -10%, #ffd9cf 0, transparent 60%),
             radial-gradient(1000px 640px at 100% 0, #d9e6ff 0, transparent 60%),
             radial-gradient(900px 620px at 62% 112%, #f1d9ff 0, transparent 60%);

    --paper:   #f7f1f4;
    --paper-2: rgba(40, 24, 80, 0.06);
    --surface: #ffffff;
    --glas:        rgba(255, 255, 255, 0.72);
    --glas-stark:  rgba(255, 255, 255, 0.88);
    --glas-kante:  rgba(255, 255, 255, 0.95);

    --ink:   #1b1533;
    --ink-2: #4d4669;
    --ink-3: #6b6488;
    --ink-4: #7a7396;
    --line:   rgba(40, 24, 80, 0.10);
    --line-2: rgba(40, 24, 80, 0.20);

    --m: #e0336f;
    --accent:       #e0336f;
    --accent-2:     #c2255c;
    --accent-b:     #7a4df0;
    --accent-soft:  rgba(224, 51, 111, 0.14);
    --accent-paper: #fde6ee;
    /* Der Verlauf trägt weiße Schrift — auch kleine. Seine Enden sind deshalb eigene Farben
       und nicht --accent/--accent-b: Die sind im Dunkeln als SCHRIFT auf dunklem Grund hell
       gewählt (Weiß darauf 3,7:1). Mit diesen Enden hat Weiß überall mindestens 4,6:1. */
    --verlauf-a: #d62a66;
    --verlauf-b: #7a4df0;
    --verlauf: linear-gradient(135deg, var(--verlauf-a) 0%, var(--verlauf-b) 100%);

    --success:       #17925a;
    --success-2:     #0f7446;
    --success-light: #dff5ea;
    --warning:       #a86a00;
    --warning-light: rgba(201, 138, 0, 0.14);

    --schiene:      rgba(27, 21, 51, 0.90);
    --schiene-ink:  rgba(255, 255, 255, 0.72);

    --radius:    22px;
    --radius-sm: 14px;
    --radius-lg: 28px;
    --shadow:    0 14px 30px -22px rgba(60, 30, 120, 0.45);
    --shadow-md: 0 22px 44px -26px rgba(60, 30, 120, 0.50);
    --shadow-lg: 0 40px 80px -30px rgba(40, 10, 90, 0.60);
    --feder: cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* --- Dunkel: gewählt … ---------------------------------------------------- */
/* Nur am Bildschirm — gedruckt wird immer hell (der Browser lässt Hintergründe weg). */
@media screen {
:root[data-design="glas"][data-modus="dunkel"] {
    color-scheme: dark;
    --grund-farbe: #070a22;
    --grund: radial-gradient(1100px 640px at 8% -10%, #3a1163 0, transparent 60%),
             radial-gradient(1000px 640px at 100% 0, #0b2a6b 0, transparent 60%),
             radial-gradient(900px 620px at 62% 112%, #4a0f3f 0, transparent 60%);
    --paper:   #0b0c26;
    --paper-2: rgba(255, 255, 255, 0.07);
    --surface: #1a1740;
    --glas:        rgba(255, 255, 255, 0.07);
    --glas-stark:  rgba(30, 26, 72, 0.92);
    --glas-kante:  rgba(255, 255, 255, 0.14);
    --ink:   #f5f2ff;
    --ink-2: #cfc8ea;
    --ink-3: #a9a2cc;
    --ink-4: #9a93bf;
    --line:   rgba(255, 255, 255, 0.10);
    --line-2: rgba(255, 255, 255, 0.22);
    --m: #ff5c93;
    --accent:       #e8447f;
    --accent-2:     #ff8fb4;
    --accent-b:     #8f6bff;
    --accent-soft:  rgba(255, 92, 147, 0.20);
    --accent-paper: #3d1530;
    --verlauf-a: #d6316d;
    --verlauf-b: #7650ee;
    --success:       #45c98a;
    --success-2:     #7ff0b8;
    --success-light: #123a2a;
    --warning:       #ffc94d;
    --warning-light: rgba(255, 201, 77, 0.16);
    --schiene:      rgba(255, 255, 255, 0.08);
    --schiene-ink:  rgba(255, 255, 255, 0.70);
    --shadow:    0 14px 30px -22px rgba(0, 0, 0, 0.8);
    --shadow-md: 0 22px 44px -26px rgba(0, 0, 0, 0.85);
    --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
}
/* … oder vom Gerät vorgegeben („auto"). Dieselben Werte wie oben. */
@media screen and (prefers-color-scheme: dark) {
    :root[data-design="glas"][data-modus="auto"] {
        color-scheme: dark;
        --grund-farbe: #070a22;
        --grund: radial-gradient(1100px 640px at 8% -10%, #3a1163 0, transparent 60%),
                 radial-gradient(1000px 640px at 100% 0, #0b2a6b 0, transparent 60%),
                 radial-gradient(900px 620px at 62% 112%, #4a0f3f 0, transparent 60%);
        --paper:   #0b0c26;
        --paper-2: rgba(255, 255, 255, 0.07);
        --surface: #1a1740;
        --glas:        rgba(255, 255, 255, 0.07);
        --glas-stark:  rgba(30, 26, 72, 0.92);
        --glas-kante:  rgba(255, 255, 255, 0.14);
        --ink:   #f5f2ff;
        --ink-2: #cfc8ea;
        --ink-3: #a9a2cc;
        --ink-4: #9a93bf;
        --line:   rgba(255, 255, 255, 0.10);
        --line-2: rgba(255, 255, 255, 0.22);
        --m: #ff5c93;
        --accent:       #e8447f;
        --accent-2:     #ff8fb4;
        --accent-b:     #8f6bff;
        --accent-soft:  rgba(255, 92, 147, 0.20);
        --accent-paper: #3d1530;
        --verlauf-a: #d6316d;
        --verlauf-b: #7650ee;
        --success:       #45c98a;
        --success-2:     #7ff0b8;
        --success-light: #123a2a;
        --warning:       #ffc94d;
        --warning-light: rgba(255, 201, 77, 0.16);
        --schiene:      rgba(255, 255, 255, 0.08);
        --schiene-ink:  rgba(255, 255, 255, 0.70);
        --shadow:    0 14px 30px -22px rgba(0, 0, 0, 0.8);
        --shadow-md: 0 22px 44px -26px rgba(0, 0, 0, 0.85);
        --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
    }
}

/* ============================================================================
   Seite und Hintergrund
   ============================================================================ */
html[data-design="glas"] { background: var(--grund-farbe); }
html[data-design="glas"] body {
    /* !important: Die Grundvorlage setzt den Hintergrund des body selbst mit !important.
       Der body bleibt durchsichtig — der Verlauf liegt auf einer eigenen festen Ebene. */
    background: transparent !important;
    color: var(--ink);
    font-family: var(--font-sans);
}
/* Die Ebene des Papierkorns trägt hier den Farbverlauf: fest hinter allem. Nicht
   `background-attachment: fixed` — iPhones behandeln das wie „scroll", der Verlauf
   wanderte mit der Seite. Der CMYK-Strich gehört zum klassischen Design. */
html[data-design="glas"] body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    opacity: 1; mix-blend-mode: normal;
    background-image: var(--grund); background-repeat: no-repeat;
}
html[data-design="glas"] .cmyk-strip { display: none; }
/* Der Fuß liegt AUF dem Verlauf, nicht als deckender Streifen davor: Seit er auf kurzen
   Seiten am unteren Fensterrand steht, schnitte er sonst die untere Farbwolke ab. */
html[data-design="glas"] .app-footer { background: transparent; }

html[data-design="glas"] h1,
html[data-design="glas"] .page-head h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }

/* ============================================================================
   Kopf: keine leere Leiste mehr — links die Lage, rechts eine Glas-Kapsel
   ============================================================================ */
html[data-design="glas"] .app-header {
    padding: var(--s-12) 0;
    background: transparent; border-bottom: 0;
    animation: none;
}
html[data-design="glas"] .app-header-inner { max-width: none; padding: 0 var(--s-18); gap: var(--s-14); }
html[data-design="glas"] .kopf-lage { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
html[data-design="glas"] .kopf-lage b { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
html[data-design="glas"] .kopf-lage span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-design="glas"] .app-nav {
    margin-left: auto; padding: var(--s-4); gap: var(--s-2);
    border: 1px solid var(--glas-kante); border-radius: 999px; background: var(--glas);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
html[data-design="glas"] .kopf-rund,
html[data-design="glas"] .notif-trigger {
    width: 40px; height: 40px; flex-basis: 40px;
    border: 0; background: transparent; color: var(--ink-2);
    transition: background .2s, color .2s, transform .2s var(--feder);
}
html[data-design="glas"] .kopf-rund:hover,
html[data-design="glas"] .notif-trigger:hover { background: var(--paper-2); color: var(--ink); transform: scale(1.08); }
html[data-design="glas"] .kopf-rund.is-aktiv { background: var(--verlauf); color: #fff; }
/* Mond im Hellen, Sonne im Dunkeln. */
html[data-design="glas"] .modus-sonne { display: none; }
html[data-design="glas"][data-modus="dunkel"] .modus-mond { display: none; }
html[data-design="glas"][data-modus="dunkel"] .modus-sonne { display: inline-flex; }
@media (prefers-color-scheme: dark) {
    html[data-design="glas"][data-modus="auto"] .modus-mond { display: none; }
    html[data-design="glas"][data-modus="auto"] .modus-sonne { display: inline-flex; }
}
/* Profil: klein, rund, mit Bild — es soll oben keinen Platz beanspruchen. */
html[data-design="glas"] .konto-trigger {
    position: relative; overflow: hidden; width: 40px; min-height: 40px; height: 40px; padding: 0; justify-content: center;
    border: 0; border-radius: 50%; background: var(--verlauf); color: #fff;
    font-family: var(--font-sans); font-size: 13px; font-weight: 700;
}
html[data-design="glas"] .konto-trigger:hover { background: var(--verlauf); filter: brightness(1.08); }
html[data-design="glas"] .konto-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Menüs unter der Kapsel: deckendes Glas, sie liegen über dem Inhalt. */
html[data-design="glas"] .lang-menu,
html[data-design="glas"] .notif-menu {
    /* DECKEND: Die Menüs liegen in der Kapsel, die selbst weichzeichnet — ein zweiter
       Weichzeichner darin greift nicht, durchscheinendes Glas ließe die Seite durchlesen. */
    border: 1px solid var(--line); border-radius: 22px; background: var(--surface);
    box-shadow: var(--shadow-lg);
}
html[data-design="glas"] .lang-menu { top: calc(100% + 10px); padding: var(--s-8); min-width: 230px; }
html[data-design="glas"] .lang-menu a { border-radius: 12px; }
html[data-design="glas"] .konto-modus { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: var(--s-2) var(--s-8) var(--s-6); padding: var(--s-2); border-radius: 999px; background: var(--paper-2); }
html[data-design="glas"] .konto-modus button { min-height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 600; cursor: pointer; }
html[data-design="glas"] .konto-modus button.active { background: var(--surface); color: var(--ink); box-shadow: 0 2px 6px -2px rgba(40, 24, 80, 0.35); }

/* --- Glocke: das Menü -------------------------------------------------------
   Dieselbe Sprache wie das Konto-Menü daneben: deckende Fläche, innen 6 px Luft, jede
   Zeile ein eigenes rundes Feld, das beim Überfahren aufleuchtet. Keine Trennlinien
   zwischen den Zeilen — der Abstand trennt. Aufbau und Maße: Grundvorlage. */
@media (min-width: 601px) {
    html[data-design="glas"] .notif-menu { top: calc(100% + 10px); }
}
html[data-design="glas"] .notif-head {
    padding: var(--s-8) var(--s-8) var(--s-8) var(--s-18);
    font-family: var(--font-display); font-size: 16px; font-weight: 700;
    letter-spacing: -0.015em; text-transform: none; color: var(--ink);
}
html[data-design="glas"] .notif-head-act { font-family: var(--font-sans); font-size: 12.5px; }
html[data-design="glas"] .notif-list { padding: var(--s-6); }
html[data-design="glas"] .notif-item { padding: var(--s-10); border-bottom: 0; border-radius: 16px; }
html[data-design="glas"] .notif-item + .notif-item { margin-top: var(--s-2); }
html[data-design="glas"] .notif-item.unread .notif-sym { background: var(--accent-soft); color: var(--accent-2); }
html[data-design="glas"] .notif-item.unread .notif-sym-warn { background: var(--warning-light); color: var(--warning); }
html[data-design="glas"] .notif-item-text { font-size: 13.5px; }
html[data-design="glas"] .notif-item-name { font-size: 13.5px; }
html[data-design="glas"] .notif-item-prev { font-size: 12.5px; }
html[data-design="glas"] .notif-item-when { font-family: var(--font-sans); font-size: 11.5px; font-variant-numeric: tabular-nums; }
html[data-design="glas"] .notif-item-badge { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
/* Abschnitt: nur eine feine Linie und das Wort — keine getönte Leiste im runden Menü. */
html[data-design="glas"] .notif-section {
    margin-top: var(--s-6); padding: var(--s-14) var(--s-10) var(--s-6);
    border-bottom: 0; border-top: 1px solid var(--line); background: transparent;
    font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.06em;
}
html[data-design="glas"] .notif-section:first-child { margin-top: 0; border-top: 0; padding-top: var(--s-8); }
html[data-design="glas"] .notif-all { min-height: 46px; }

/* ============================================================================
   Navigation: schwebende Schiene (breite Fenster), Glas-Leiste (schmale)
   ============================================================================ */
@media (min-width: 1081px) {
    html[data-design="glas"] .app-shell { display: block; }
    html[data-design="glas"] .app-content { margin-left: 116px; }
    /* Der Kopf läuft mit der Seite weg — durchsichtig und klebend läge er über dem Inhalt
       und schluckte dessen Klicks. Stehen bleibt nur die Kapsel.
       `relative`, nicht `static`: Der Kopf ist ohnehin ein eigener Stapel (er trägt einen
       Namen fürs Überblenden, view-transition-name) — ohne Position galt aber sein z-index
       nicht. Kapsel und Menüs (Glocke, Konto) waren darin eingeschlossen und lagen als
       Ganzes UNTER dem Seitenrahmen (.container, z-index 1): Das Glocken-Menü wurde vom
       Inhalt überdeckt. Mit Position zählt z-index 30 der Grundvorlage wieder. */
    html[data-design="glas"] .app-header { position: relative; }
    /* Der Kopf beginnt NEBEN der Schiene (wie Inhalt und Fuß), nicht über ihr: Ist ein Menü
       offen, liegt er über allem am Fenster (z-index 45, Grundvorlage) — reichte er bis zum
       linken Rand, deckte seine durchsichtige Fläche das Logo der Schiene zu, und der
       erste Klick darauf schlösse nur das Menü. */
    html[data-design="glas"] .app-header { margin-left: 116px; }
    html[data-design="glas"] .app-header-inner { min-height: 50px; }
    html[data-design="glas"] .app-nav { position: fixed; top: var(--s-12); right: var(--s-18); z-index: 32; }
    /* Das Logo sitzt in der Schiene, der Chat auch. */
    html[data-design="glas"] .app-logo { display: none; }
    html[data-design="glas"] .app-nav > a.kopf-rund[href="/chat.php"] { display: none; }

    html[data-design="glas"] .sidenav {
        position: fixed; left: var(--s-14); top: var(--s-14); bottom: var(--s-14); z-index: 31;
        width: 88px; flex: none;
        border: 1px solid var(--glas-kante); border-radius: 28px; background: var(--schiene);
        box-shadow: var(--shadow-md);
        -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    }
    html[data-design="glas"] .sidenav-inner {
        /* max-height: Die Grundvorlage deckelt die Leiste auf Fensterhöhe minus Kopf — die
           Schiene hier ist selbst fest und reicht von oben bis unten. */
        position: static; height: 100%; max-height: none; padding: var(--s-14) var(--s-8); gap: var(--s-4);
        align-items: center; overflow-y: auto; scrollbar-width: none;
    }
    /* Oben in der Schiene steht das Kollin-Logo — weiß, weil die Schiene in beiden Modi
       dunkel ist (im Dunkeln färbt 10-anmeldung.css jedes Kollin-Logo ohnehin weiß). Die
       Fläche darum ist das Tippziel (70 x 48) und leuchtet wie die Orte darunter auf. */
    html[data-design="glas"] .schiene-logo {
        flex: 0 0 auto; width: 70px; height: 48px; margin-bottom: var(--s-8);
        display: grid; place-items: center; border-radius: 18px; text-decoration: none;
        transition: background .2s, transform .2s var(--feder);
    }
    html[data-design="glas"] .schiene-logo img { display: block; width: 60px; height: auto; filter: brightness(0) invert(1); }
    html[data-design="glas"] .schiene-logo:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.04); }
    html[data-design="glas"] .sidenav .hub-list { width: 100%; align-items: center; gap: var(--s-4); }
    html[data-design="glas"] .sidenav .hub-tile {
        position: relative; width: 70px; min-height: 0; padding: var(--s-10) var(--s-2) var(--s-8);
        flex-direction: column; gap: var(--s-4); text-align: center;
        border: 0; border-radius: 18px; background: transparent; color: var(--schiene-ink);
        transition: background .2s, color .2s, transform .2s var(--feder);
    }
    html[data-design="glas"] .sidenav .hub-label { font-size: 10px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
    html[data-design="glas"] .sidenav .hub-tile:hover { background: rgba(255, 255, 255, 0.12); border-color: transparent; color: #fff; transform: scale(1.06); }
    html[data-design="glas"] .sidenav .hub-tile.active { background: var(--verlauf); color: #fff; box-shadow: 0 12px 24px -10px var(--accent); }
    html[data-design="glas"] .sidenav .hub-tile.active::before { content: none; }
    html[data-design="glas"] .sidenav .hub-fuss { margin-top: auto; padding-top: var(--s-8); border-top: 1px solid rgba(255, 255, 255, 0.12); }
    html[data-design="glas"] .sidenav .hub-badge {
        position: absolute; top: var(--s-4); right: var(--s-10); margin: 0;
        min-width: 17px; height: 17px; padding: 0 var(--s-4); border-radius: 999px;
        background: #fff; color: #1b1533; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
    }
}
@media (max-width: 1080px) {
    html[data-design="glas"] .app-header {
        background: color-mix(in srgb, var(--grund-farbe) 62%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    }
    html[data-design="glas"] .kopf-lage { display: none; }
    /* Kein Weichzeichner an der Kapsel: Er machte sie zum Bezugsrahmen für das Glocken-Menü
       (dort position: fixed über die ganze Breite) — es war auf 200 px gequetscht. Der Kopf
       zeichnet hier schon selbst weich. */
    html[data-design="glas"] .app-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glas-stark); }
    html[data-design="glas"] .unten-leiste {
        left: var(--s-10); right: var(--s-10); bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
        padding: var(--s-4); border: 1px solid var(--glas-kante); border-radius: 26px;
        background: var(--glas-stark); box-shadow: var(--shadow-md);
        -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
    }
    html[data-design="glas"] .unten-leiste .hub-tile { border-radius: 20px; }
    html[data-design="glas"] .unten-leiste .hub-tile.active { background: var(--verlauf); color: #fff; }
    /* Die Leiste schwebt: 8 px Abstand zum Rand zählen zur reservierten Höhe. */
    html[data-design="glas"] { --leiste-unten: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================================
   Flächen: Karten aus Milchglas
   ============================================================================ */
html[data-design="glas"] .form-section,
html[data-design="glas"] .stat-card,
html[data-design="glas"] .empty-state,
html[data-design="glas"] .hubk,
html[data-design="glas"] .pk-karte,
html[data-design="glas"] .pu-woche,
html[data-design="glas"] .pu-station,
html[data-design="glas"] .vl-liste,
html[data-design="glas"] .day-block,
html[data-design="glas"] .planung-grid-wrap,
html[data-design="glas"] .pool-panel,
html[data-design="glas"] .chat-shell,
html[data-design="glas"] .board-strip,
html[data-design="glas"] .second-view {
    background: var(--glas); border-color: var(--glas-kante); box-shadow: var(--shadow);
}
html[data-design="glas"] .alert { border-radius: 18px; }

/* ============================================================================
   Knöpfe
   ============================================================================ */
html[data-design="glas"] .btn { border-radius: 999px; transition: transform .2s var(--feder), box-shadow .2s, filter .2s, background .2s; }
html[data-design="glas"] .btn:active { transform: scale(0.97); }
html[data-design="glas"] .btn-primary,
html[data-design="glas"] .pk-neu {
    border-color: transparent; background: var(--verlauf); color: #fff;
    box-shadow: 0 14px 26px -14px var(--accent);
}
html[data-design="glas"] .btn-primary:hover,
html[data-design="glas"] .pk-neu:hover { background: var(--verlauf); color: #fff; filter: brightness(1.07); transform: translateY(-1px); }
html[data-design="glas"] .btn-secondary { border-color: var(--glas-kante); background: var(--glas-stark); color: var(--ink); }
html[data-design="glas"] .btn-secondary:hover { border-color: var(--line-2); background: var(--surface); }

/* Felder: deckend, damit Eingaben lesbar bleiben. */
html[data-design="glas"] .field input,
html[data-design="glas"] .field select,
html[data-design="glas"] .field textarea { border-radius: 14px; }

@media (prefers-reduced-motion: reduce) {
    html[data-design="glas"] .btn,
    html[data-design="glas"] .kopf-rund,
    html[data-design="glas"] .schiene-logo,
    html[data-design="glas"] .sidenav .hub-tile { transition: none; }
}