/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   EmMaMaImmo – Designsystem
   Zwei Stile × Hell/Dunkel, gesetzt am <html> (window.appStil in index.html):
     data-stil="lady"       (Standard: Rosé, Altrosa, Champagner, Mauve – plüschig: Samt-Verläufe, gepolsterte Karten,
                             Chesterfield-Steppmuster in der Seitenleiste, Serifen-Überschriften)
     data-stil="gentleman"  (Männermodus, früher „Herr“: Industrie-Loft – Beton, Stahl, warmes Messing-Licht und
                             Neon-Cyan als futuristischer Akzent, kantig, schmale Versal-Überschriften)
     data-modus="hell" | "dunkel"
   Alle Farben als Variablen; die Radzen-Variablen (--rz-…) werden mitgesetzt, damit Komponenten und die
   seitenbezogenen Regeln in app.css (die var(--rz-primary) usw. verwenden) automatisch mitziehen.
   Schriften: werden nur genutzt, wenn sie auf dem Gerät vorhanden sind oder unter /fonts liegen
   (kein Laden von Google – Datenschutz). Sonst greifen die Systemschriften. Gentleman-Überschriften: Bahnschrift (Windows),
   DIN Condensed (macOS/iOS), Roboto Condensed (Android) – alle schon auf den Geräten vorhanden.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Playfair Display"; src: local("Playfair Display"), url("../fonts/PlayfairDisplay.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: local("Nunito"), url("../fonts/Nunito.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Inter"; src: local("Inter"), url("../fonts/Inter.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

/* ───────────────────────── Lady · hell (Standard) ───────────────────────── */
:root,
html[data-stil="lady"][data-modus="hell"] {
    --app-schrift-titel: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --app-schrift-text: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
    --app-radius: 20px;
    --app-radius-klein: 14px;
    --app-radius-knopf: 999px;

    --app-bg: #f9eeec;
    --app-bg-verlauf: radial-gradient(1100px 650px at 105% -15%, #f6d3de 0%, transparent 60%), radial-gradient(900px 600px at -15% 115%, #f3e0cc 0%, transparent 58%),
                      radial-gradient(700px 520px at 45% 55%, rgba(232, 212, 238, .45) 0%, transparent 70%), #f9eeec;
    --app-flaeche: #ffffff;
    --app-flaeche-2: #fdf5f4;
    --app-flaeche-verlauf: linear-gradient(180deg, #ffffff 0%, #fdf4f3 100%);
    --app-rand: #f0dfdb;
    --app-glanz: inset 0 1px 0 rgba(255, 255, 255, .95);
    --app-polster: rgba(176, 90, 120, .09);
    --app-text: #3b2b30;
    --app-text-2: #7b666b;
    --app-akzent: #b05a78;
    --app-akzent-2: #8b6a8f;
    --app-gold: #c39a5f;
    --app-schatten: 0 2px 4px rgba(176, 90, 120, .05), 0 10px 28px rgba(176, 90, 120, .11);
    --app-schatten-gross: 0 18px 52px rgba(150, 70, 95, .22);
    --app-seite-bg: rgba(255, 250, 249, .78);
    --app-seite-aktiv: rgba(176, 90, 120, .12);
    --app-seite-aktiv-text: #8f4060;
    --app-kopf-bg: rgba(248, 240, 237, .82);

    --rz-primary: #b05a78; --rz-primary-light: #c47a94; --rz-primary-lighter: rgba(176, 90, 120, .12); --rz-primary-dark: #934763; --rz-primary-darker: #7a3a52;
    --rz-on-primary: #ffffff; --rz-on-primary-lighter: #934763;
    --rz-secondary: #8b6a8f; --rz-secondary-light: #a588a9; --rz-secondary-lighter: rgba(139, 106, 143, .14); --rz-secondary-dark: #6f5374; --rz-secondary-darker: #5c4560;
    --rz-on-secondary: #ffffff; --rz-on-secondary-lighter: #6f5374;
    --rz-info: #5f86ad; --rz-info-light: #7fa0c1; --rz-info-lighter: rgba(95, 134, 173, .16); --rz-info-dark: #4a6c8e; --rz-info-darker: #3c5873;
    --rz-success: #4f8f6e; --rz-success-light: #6faa8b; --rz-success-lighter: rgba(79, 143, 110, .16); --rz-success-dark: #3e7357; --rz-success-darker: #325e47;
    --rz-warning: #c4873a; --rz-warning-light: #d4a160; --rz-warning-lighter: rgba(196, 135, 58, .18); --rz-warning-dark: #9e6b2a; --rz-warning-darker: #835822;
    --rz-danger: #c04d5d; --rz-danger-light: #cf6f7d; --rz-danger-lighter: rgba(192, 77, 93, .16); --rz-danger-dark: #9d3d4b; --rz-danger-darker: #82323e;
    --rz-base: #f1e7e4; --rz-base-50: #fdfaf9; --rz-base-100: #faf4f2; --rz-base-200: #f2e8e5; --rz-base-300: #e8d9d5; --rz-base-400: #cdb8b3;
    --rz-base-500: #a8928d; --rz-base-600: #86706b; --rz-base-700: #6c5651; --rz-base-800: #4b3a3b; --rz-base-900: #2f2427;
    --rz-base-light: #faf4f2; --rz-base-lighter: #ffffff; --rz-base-dark: #86706b; --rz-base-darker: #2f2427;
    --rz-body-background-color: transparent;
    --rz-base-background-color: var(--app-flaeche);
    --rz-text-color: var(--app-text); --rz-text-title-color: #2e2024; --rz-text-secondary-color: var(--app-text-2);
    --rz-text-font-family: var(--app-schrift-text);
    --rz-border-radius: 14px;
    --rz-input-focus-shadow: 0 0 0 3px rgba(176, 90, 120, .18);
    --rz-series-1: #b05a78; --rz-series-2: #8b6a8f; --rz-series-3: #c39a5f; --rz-series-4: #5f86ad; --rz-series-5: #4f8f6e; --rz-series-6: #d98fa6;
    color-scheme: light;
}

/* ───────────────────────── Lady · dunkel ───────────────────────── */
html[data-stil="lady"][data-modus="dunkel"] {
    --app-bg: #1d1419;
    --app-bg-verlauf: radial-gradient(1000px 560px at 105% -12%, #4a2337 0%, transparent 60%), radial-gradient(820px 540px at -12% 112%, #3a2620 0%, transparent 56%),
                      radial-gradient(700px 500px at 45% 55%, rgba(90, 50, 96, .35) 0%, transparent 70%), #1d1419;
    --app-flaeche: #2a1d24;
    --app-flaeche-2: #31222a;
    --app-flaeche-verlauf: linear-gradient(180deg, #32222b 0%, #281b22 100%);
    --app-rand: #45303b;
    --app-glanz: inset 0 1px 0 rgba(255, 220, 232, .07);
    --app-polster: rgba(226, 160, 181, .08);
    --app-text: #f1e6e9;
    --app-text-2: #bba6ac;
    --app-akzent: #e2a0b5;
    --app-akzent-2: #c7a6cb;
    --app-gold: #d8b47c;
    --app-schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --app-schatten-gross: 0 12px 44px rgba(0, 0, 0, .55);
    --app-seite-bg: rgba(36, 24, 31, .88);
    --app-seite-aktiv: rgba(226, 160, 181, .16);
    --app-seite-aktiv-text: #f0bccc;
    --app-kopf-bg: rgba(27, 22, 24, .82);

    --rz-primary: #e2a0b5; --rz-primary-light: #ebbccb; --rz-primary-lighter: rgba(226, 160, 181, .16); --rz-primary-dark: #c9839a; --rz-primary-darker: #b06e85;
    --rz-on-primary: #2a141c; --rz-on-primary-lighter: #f0bccc;
    --rz-secondary: #c7a6cb; --rz-secondary-light: #d8c0db; --rz-secondary-lighter: rgba(199, 166, 203, .16); --rz-secondary-dark: #ad8bb1; --rz-secondary-darker: #95749a;
    --rz-on-secondary: #241826; --rz-on-secondary-lighter: #d8c0db;
    --rz-info: #8fb3d9; --rz-info-lighter: rgba(143, 179, 217, .18); --rz-info-dark: #7299c2;
    --rz-success: #82c4a2; --rz-success-lighter: rgba(130, 196, 162, .18); --rz-success-dark: #66a886;
    --rz-warning: #e2b06e; --rz-warning-lighter: rgba(226, 176, 110, .2); --rz-warning-dark: #c79352;
    --rz-danger: #ec8a98; --rz-danger-lighter: rgba(236, 138, 152, .18); --rz-danger-dark: #d06f7e;
    --rz-on-info: #10202f; --rz-on-success: #0f2419; --rz-on-warning: #2a1c08; --rz-on-danger: #2c0f14;
    --rz-base: #3a2f33; --rz-base-50: #f1e6e9; --rz-base-100: #c9b6bc; --rz-base-200: #8c787e; --rz-base-300: #5d4c51; --rz-base-400: #45383c;
    --rz-base-500: #3d3236; --rz-base-600: #352b2f; --rz-base-700: #2d2528; --rz-base-800: #261f22; --rz-base-900: #1b1618;
    --rz-base-light: #c9b6bc; --rz-base-lighter: #ffffff; --rz-base-dark: #2d2528; --rz-base-darker: #000000;
    --rz-text-title-color: #fbf2f5;
    --rz-input-focus-shadow: 0 0 0 3px rgba(226, 160, 181, .22);
    --rz-series-1: #e2a0b5; --rz-series-2: #c7a6cb; --rz-series-3: #d8b47c; --rz-series-4: #8fb3d9; --rz-series-5: #82c4a2; --rz-series-6: #f2c0cf;
    color-scheme: dark;
}

/* ───────────────────────── Gentleman · hell ─────────────────────────
   Polierter Beton, Stahl-Seitenleiste, Bronze/Messing, Petrol-Cyan als Neon-Akzent. */
html[data-stil="gentleman"][data-modus="hell"] {
    --app-schrift-titel: "Bahnschrift SemiCondensed", "Bahnschrift", "DIN Condensed", "DIN Alternate", "Roboto Condensed", "Arial Narrow", sans-serif;
    --app-schrift-text: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --app-radius: 6px;
    --app-radius-klein: 4px;
    --app-radius-knopf: 4px;

    --app-bg: #e8e5e0;
    --app-koernung: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .055 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    --app-bg-verlauf: radial-gradient(1000px 420px at 50% -10%, rgba(255, 196, 120, .22) 0%, transparent 65%), var(--app-koernung),
                      linear-gradient(180deg, #ebe8e3 0%, #e2ded7 100%);
    --app-flaeche: #f7f5f1;
    --app-flaeche-2: #efebe5;
    --app-flaeche-verlauf: linear-gradient(180deg, #faf8f5 0%, #f1eee8 100%);
    --app-rand: #d4cec4;
    --app-text: #1c1b19;
    --app-text-2: #5d5850;
    --app-akzent: #94641f;
    --app-akzent-2: #0b8796;
    --app-gold: #b07e34;
    --app-messing: #b07e34;
    --app-neon: #0b8796;
    --app-neon-glow: rgba(11, 135, 150, .28);
    --app-glanz: inset 0 1px 0 rgba(255, 255, 255, .8);
    --app-schatten: 0 1px 2px rgba(40, 32, 20, .10), 0 4px 14px rgba(40, 32, 20, .08);
    --app-schatten-gross: 0 14px 40px rgba(30, 24, 16, .26);
    --app-seite-bg: #161513;
    --app-seite-aktiv: rgba(63, 207, 223, .12);
    --app-seite-aktiv-text: #8ae9f2;
    --app-kopf-bg: rgba(232, 229, 224, .9);

    --rz-primary: #94641f; --rz-primary-light: #b07e34; --rz-primary-lighter: rgba(148, 100, 31, .12); --rz-primary-dark: #7a5118; --rz-primary-darker: #613f12;
    --rz-on-primary: #ffffff; --rz-on-primary-lighter: #7a5118;
    --rz-secondary: #0b8796; --rz-secondary-light: #22a3b3; --rz-secondary-lighter: rgba(11, 135, 150, .12); --rz-secondary-dark: #086d79; --rz-secondary-darker: #06565f;
    --rz-on-secondary: #ffffff; --rz-on-secondary-lighter: #086d79;
    --rz-info: #2d6f9e; --rz-info-lighter: rgba(45, 111, 158, .14); --rz-info-dark: #225880;
    --rz-success: #3d7a4e; --rz-success-lighter: rgba(61, 122, 78, .14); --rz-success-dark: #2f613d;
    --rz-warning: #c2661f; --rz-warning-lighter: rgba(194, 102, 31, .16); --rz-warning-dark: #9c5118;
    --rz-danger: #b23a33; --rz-danger-lighter: rgba(178, 58, 51, .14); --rz-danger-dark: #8e2d27;
    --rz-base: #e2ded7; --rz-base-50: #faf9f7; --rz-base-100: #f2efea; --rz-base-200: #e5e0d8; --rz-base-300: #d4cec4; --rz-base-400: #b3ab9f;
    --rz-base-500: #8f877b; --rz-base-600: #6e675d; --rz-base-700: #524c44; --rz-base-800: #36322d; --rz-base-900: #1c1b19;
    --rz-base-light: #f2efea; --rz-base-lighter: #ffffff; --rz-base-dark: #6e675d; --rz-base-darker: #1c1b19;
    --rz-body-background-color: transparent;
    --rz-base-background-color: var(--app-flaeche);
    --rz-text-color: var(--app-text); --rz-text-title-color: #141311; --rz-text-secondary-color: var(--app-text-2);
    --rz-text-font-family: var(--app-schrift-text);
    --rz-border-radius: 4px;
    --rz-input-focus-shadow: 0 0 0 1px var(--app-neon), 0 0 10px var(--app-neon-glow);
    --rz-series-1: #94641f; --rz-series-2: #0b8796; --rz-series-3: #6e675d; --rz-series-4: #c2661f; --rz-series-5: #3d7a4e; --rz-series-6: #b3ab9f;
    color-scheme: light;
}

/* ───────────────────────── Gentleman · dunkel ─────────────────────────
   Dunkler Beton, Edison-Licht von oben (Messing/Bernstein), Neon-Cyan wie LED-Leisten. */
html[data-stil="gentleman"][data-modus="dunkel"] {
    --app-schrift-titel: "Bahnschrift SemiCondensed", "Bahnschrift", "DIN Condensed", "DIN Alternate", "Roboto Condensed", "Arial Narrow", sans-serif;
    --app-schrift-text: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --app-radius: 6px;
    --app-radius-klein: 4px;
    --app-radius-knopf: 4px;

    --app-bg: #121110;
    --app-koernung: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    --app-bg-verlauf: radial-gradient(900px 420px at 50% -8%, rgba(255, 184, 92, .13) 0%, transparent 65%),
                      radial-gradient(700px 420px at 105% 105%, rgba(63, 207, 223, .08) 0%, transparent 60%), var(--app-koernung),
                      linear-gradient(180deg, #161514 0%, #0f0e0d 100%);
    --app-flaeche: #1b1a18;
    --app-flaeche-2: #23211e;
    --app-flaeche-verlauf: linear-gradient(180deg, #22201d 0%, #191816 100%);
    --app-rand: #35322d;
    --app-text: #ece6dc;
    --app-text-2: #a59e92;
    --app-akzent: #d9a55a;
    --app-akzent-2: #3fcfdf;
    --app-gold: #d9a55a;
    --app-messing: #d9a55a;
    --app-neon: #3fcfdf;
    --app-neon-glow: rgba(63, 207, 223, .35);
    --app-glanz: inset 0 1px 0 rgba(255, 235, 205, .05);
    --app-schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .45);
    --app-schatten-gross: 0 16px 48px rgba(0, 0, 0, .7);
    --app-seite-bg: #0c0c0b;
    --app-seite-aktiv: rgba(63, 207, 223, .1);
    --app-seite-aktiv-text: #7fe6f0;
    --app-kopf-bg: rgba(18, 17, 16, .86);

    --rz-primary: #d9a55a; --rz-primary-light: #e6bd7e; --rz-primary-lighter: rgba(217, 165, 90, .16); --rz-primary-dark: #bd8a42; --rz-primary-darker: #9e7032;
    --rz-on-primary: #1a1206; --rz-on-primary-lighter: #f0cf9c;
    --rz-secondary: #3fcfdf; --rz-secondary-light: #74dde9; --rz-secondary-lighter: rgba(63, 207, 223, .14); --rz-secondary-dark: #2bb1c0; --rz-secondary-darker: #2394a1;
    --rz-on-secondary: #04181b; --rz-on-secondary-lighter: #7fe6f0;
    --rz-info: #64b8e6; --rz-info-lighter: rgba(100, 184, 230, .18); --rz-info-dark: #4a9dcb;
    --rz-success: #74c48e; --rz-success-lighter: rgba(116, 196, 142, .18); --rz-success-dark: #5aa874;
    --rz-warning: #ef9440; --rz-warning-lighter: rgba(239, 148, 64, .2); --rz-warning-dark: #d27a2a;
    --rz-danger: #e8665e; --rz-danger-lighter: rgba(232, 102, 94, .18); --rz-danger-dark: #cc4e46;
    --rz-on-info: #071a26; --rz-on-success: #0a1f12; --rz-on-warning: #241405; --rz-on-danger: #2a0b09;
    --rz-base: #35322d; --rz-base-50: #ece6dc; --rz-base-100: #bdb6aa; --rz-base-200: #827b70; --rz-base-300: #555049; --rz-base-400: #3f3b36;
    --rz-base-500: #36332f; --rz-base-600: #2d2a27; --rz-base-700: #242220; --rz-base-800: #1b1a18; --rz-base-900: #121110;
    --rz-base-light: #bdb6aa; --rz-base-lighter: #ffffff; --rz-base-dark: #242220; --rz-base-darker: #000000;
    --rz-text-title-color: #f6f0e6;
    --rz-border-radius: 4px;
    --rz-input-focus-shadow: 0 0 0 1px var(--app-neon), 0 0 12px var(--app-neon-glow);
    --rz-series-1: #d9a55a; --rz-series-2: #3fcfdf; --rz-series-3: #8f9aa3; --rz-series-4: #ef9440; --rz-series-5: #74c48e; --rz-series-6: #f0cf9c;
    color-scheme: dark;
}

/* Dunkel: Radzen-Flächen auf die Stilfarben (die dark-base.css setzt eigene) */
html[data-modus="dunkel"] {
    --rz-body-background-color: transparent;
    --rz-base-background-color: var(--app-flaeche);
    --rz-text-color: var(--app-text);
    --rz-text-secondary-color: var(--app-text-2);
    --rz-text-font-family: var(--app-schrift-text);
    --rz-card-background-color: var(--app-flaeche);
    --rz-dialog-background-color: var(--app-flaeche);
    --rz-grid-background-color: var(--app-flaeche);
}

/* ═════════════════════════════════ Grundlagen ═════════════════════════════════ */

html, body {
    background: var(--app-bg-verlauf) fixed;
    color: var(--app-text);
    font-family: var(--app-schrift-text);
}

body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, .rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6, .app-titel {
    font-family: var(--app-schrift-titel);
    color: var(--rz-text-title-color);
    letter-spacing: .01em;
}

html[data-stil="lady"] h1, html[data-stil="lady"] h2, html[data-stil="lady"] h3, html[data-stil="lady"] .rz-text-h3, html[data-stil="lady"] .rz-text-h4 { font-weight: 600; }
html[data-stil="gentleman"] h1, html[data-stil="gentleman"] h2, html[data-stil="gentleman"] h3, html[data-stil="gentleman"] .rz-text-h3, html[data-stil="gentleman"] .rz-text-h4,
html[data-stil="gentleman"] .app-titel, html[data-stil="gentleman"] .app-kopf-titel { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

a { color: var(--app-akzent); }

/* Radzen-Komponenten im Stil */
.rz-card, .rz-panel, .rz-fieldset, .rz-data-grid, .rz-datatable, .rz-tabview-panels, .rz-dialog, .rz-accordion {
    border-radius: var(--app-radius) !important;
}
.rz-card { box-shadow: var(--app-schatten); border: 1px solid var(--app-rand); }
.rz-dialog { box-shadow: var(--app-schatten-gross); }
.rz-button:not(.rz-button-icon-only):not(.rz-variant-text) { border-radius: var(--app-radius-knopf); }
html[data-stil="lady"] .rz-badge { border-radius: 999px; }
.rz-data-grid .rz-grid-table thead th { font-weight: 700; }
.rz-dialog-titlebar .rz-dialog-title { font-family: var(--app-schrift-titel); }

/* ═════════════════════════════════ App-Hülle ═════════════════════════════════
   Desktop (> 900 px): Seitenleiste links (einklappbar), Kopfzeile, Tab-Leiste, Inhalt.
   Handy (≤ 900 px): Kopfzeile oben, untere Navigationsleiste mit „Mehr“-Menü; Tabs ausgeblendet. */

:root { --app-seite-breite: 248px; --app-seite-schmal: 72px; --app-kopf-hoehe: 56px; --app-unten-hoehe: 64px; --app-tab-hoehe: 0px; }

.app-huelle {
    display: grid;
    grid-template-columns: var(--app-seite-breite) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}
.app-huelle.eingeklappt { grid-template-columns: var(--app-seite-schmal) minmax(0, 1fr); }

/* Seitenleiste */
.app-seite {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--app-seite-bg);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid var(--app-rand);
    padding: calc(12px + env(safe-area-inset-top)) 10px 10px;
    overflow: hidden;
    z-index: 20;
}
html[data-stil="gentleman"] .app-seite { border-right: 0; color: #d9d2c6; }
.app-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; text-decoration: none; color: inherit; }
/* Logo (Shared/Logo.razor, LogoZeichen.razor): Dach und Schrift in Petrol wie im Logo – auf dunklen Flächen hell */
:root { --app-logo-dach: #1E4D5C; --app-logo-haar: #1E4D5C; --app-logo-schrift: #1E4D5C; --app-logo-zusatz: #2E6474; }
html[data-modus="dunkel"], html[data-stil="gentleman"] .app-seite { --app-logo-dach: #EFE6D8; --app-logo-schrift: #F3ECE2; --app-logo-zusatz: #A8CBD4; }
html[data-stil="gentleman"] .app-seite { --app-logo-dach: #D9A55A; --app-logo-zusatz: #7FE6F0; }
.app-logo-marke { display: inline-flex; align-items: center; gap: .55em; line-height: 1; }
.app-logo-marke.untereinander { flex-direction: column; gap: .35em; text-align: center; }
.app-logo-svg { flex: none; display: block; }
.app-logo-text { display: flex; flex-direction: column; gap: .28em; min-width: 0; }
.app-logo-wort { font-family: "Nunito", var(--app-schrift-text); font-weight: 800; font-size: 1em; letter-spacing: -.01em; color: var(--app-logo-schrift); white-space: nowrap; }
.app-logo-zusatz { font-family: "Nunito", var(--app-schrift-text); font-weight: 600; font-size: .36em; letter-spacing: .42em; color: var(--app-logo-zusatz); white-space: nowrap; }
.app-logo-marke.untereinander .app-logo-zusatz { margin-left: .42em; }
.app-nav { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; scrollbar-width: thin; }
.app-nav-gruppe { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; opacity: .55; padding: 12px 12px 4px; white-space: nowrap; }
.app-nav-punkt {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--app-radius-klein);
    color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; border: 0; background: transparent; width: 100%; text-align: left; font: inherit;
    transition: background .15s ease, color .15s ease;
}
.app-nav-punkt:hover { background: color-mix(in srgb, var(--app-seite-aktiv) 70%, transparent); }
.app-nav-punkt.aktiv { background: var(--app-seite-aktiv); color: var(--app-seite-aktiv-text); font-weight: 700; }
.app-nav-punkt .rzi, .app-nav-punkt .material-icons { font-size: 21px; width: 22px; flex: none; }
.app-nav-zahl { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center;
    background: var(--rz-primary); color: var(--rz-on-primary); }
.app-nav-zahl.warn { background: var(--rz-danger); color: var(--rz-on-danger); }
.app-huelle.eingeklappt .app-logo-text, .app-huelle.eingeklappt .app-nav-gruppe, .app-huelle.eingeklappt .app-nav-text,
.app-huelle.eingeklappt .app-nav-zahl, .app-huelle.eingeklappt .app-seite-fuss-text { display: none; }
.app-huelle.eingeklappt .app-nav-punkt { justify-content: center; padding: 10px 0; }
.app-seite-fuss { border-top: 1px solid var(--app-rand); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
html[data-stil="gentleman"] .app-seite-fuss { border-top-color: rgba(217, 165, 90, .18); }
.app-seite-fuss-text { font-size: .7rem; opacity: .55; padding: 4px 12px 0; white-space: nowrap; }

/* Rechte Spalte */
.app-haupt { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.app-kopf {
    position: sticky; top: 0; z-index: 15;
    display: flex; align-items: center; gap: 10px;
    height: calc(var(--app-kopf-hoehe) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 18px 0;
    background: var(--app-kopf-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--app-rand) 70%, transparent);
}
.app-kopf-titel { font-family: var(--app-schrift-titel); font-size: 1.25rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.app-kopf-knopf { border: 0; background: transparent; color: inherit; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; position: relative; }
.app-kopf-knopf:hover { background: var(--rz-primary-lighter); }
.app-kopf-knopf .rzi { font-size: 22px; }
.app-kopf-punkt { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--rz-danger); border: 2px solid var(--app-flaeche); }
.app-benutzer-knopf { display: flex; align-items: center; gap: 8px; border: 1px solid var(--app-rand); background: var(--app-flaeche); color: inherit; border-radius: 999px; padding: 3px 10px 3px 3px; cursor: pointer; }
.app-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--rz-primary), var(--app-akzent-2)); color: var(--rz-on-primary); font-weight: 800; font-size: .85rem; }
html[data-stil="gentleman"] .app-avatar { border-radius: 4px; }
.app-benutzer-name { font-size: .88rem; font-weight: 700; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-inhalt { flex: 1; min-width: 0; padding: 18px 22px calc(24px + var(--app-tab-hoehe)); }
.app-inhalt-schmal { max-width: 1200px; margin: 0 auto; }

/* Benutzermenü (Popup) */
.app-menue { position: fixed; z-index: 1100; min-width: 280px; max-width: calc(100vw - 24px); background: var(--app-flaeche); color: var(--app-text);
    border: 1px solid var(--app-rand); border-radius: var(--app-radius); box-shadow: var(--app-schatten-gross); padding: 8px; }
.app-menue-titel { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .55; padding: 8px 8px 4px; }
.app-menue-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px 4px 6px; }
.app-menue-wahl.drei { grid-template-columns: 1fr 1fr 1fr; }
.app-wahl { border: 1px solid var(--app-rand); background: var(--app-flaeche-2); color: inherit; border-radius: var(--app-radius-klein); padding: 8px 6px; cursor: pointer; font: inherit; font-size: .82rem;
    display: flex; flex-direction: column; align-items: center; gap: 4px; }
.app-wahl.aktiv { border-color: var(--rz-primary); background: var(--rz-primary-lighter); color: var(--rz-primary-dark); font-weight: 700; }
html[data-modus="dunkel"] .app-wahl.aktiv { color: var(--app-seite-aktiv-text); }
.app-wahl-muster { width: 100%; height: 26px; border-radius: 6px; }
.app-wahl-muster.lady { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .7), transparent 45%), linear-gradient(135deg, #f6d3de, #b05a78 60%, #8b6a8f); border-radius: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(176, 90, 120, .25); }
.app-wahl-muster.gentleman { background: linear-gradient(135deg, #2a2724 0 52%, #d9a55a 52% 76%, #3fcfdf 76%); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.app-menue-punkt { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: inherit; padding: 9px 10px; border-radius: var(--app-radius-klein); cursor: pointer; font: inherit; text-align: left; }
.app-menue-punkt:hover { background: var(--rz-primary-lighter); }
.app-menue-trenner { height: 1px; background: var(--app-rand); margin: 6px 4px; }
.app-online-zeile { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: .82rem; }
.app-online-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--rz-success); flex: none; }
.app-online-punkt.dienst { background: var(--rz-info); }
.app-online-aktion { opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; text-align: right; }
.app-menue-schleier { position: fixed; inset: 0; z-index: 1099; background: transparent; }

/* Emma: schwebender Knopf + Schnellchat */
.app-emma-knopf {
    position: fixed; right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + var(--app-tab-hoehe) + env(safe-area-inset-bottom)); z-index: 900;
    width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--rz-primary), var(--app-akzent-2)); color: var(--rz-on-primary);
    box-shadow: var(--app-schatten-gross); display: grid; place-items: center;
}
html[data-stil="gentleman"] .app-emma-knopf { border-radius: 8px; }
.app-emma-knopf .rzi { font-size: 28px; }
.app-emma-knopf .app-kopf-punkt { top: 6px; right: 6px; }
.app-emma-panel {
    position: fixed; right: calc(20px + env(safe-area-inset-right)); bottom: calc(90px + var(--app-tab-hoehe) + env(safe-area-inset-bottom)); z-index: 901;
    width: min(420px, calc(100vw - 32px)); background: var(--app-flaeche); border: 1px solid var(--app-rand); border-radius: var(--app-radius);
    box-shadow: var(--app-schatten-gross); padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.app-emma-kopf { display: flex; align-items: center; gap: 8px; font-family: var(--app-schrift-titel); font-weight: 700; font-size: 1.05rem; }
.app-emma-kopf .app-avatar { width: 28px; height: 28px; font-size: .8rem; }
.app-emma-fertig { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--app-radius-klein); background: var(--rz-success-lighter); font-size: .85rem; cursor: pointer; }

/* Tab-Leiste: am Desktop oben über dem Inhalt (siehe TabLeiste.razor) */
.app-tabs-oben { position: sticky; top: calc(var(--app-kopf-hoehe) + env(safe-area-inset-top)); z-index: 14; background: var(--app-kopf-bg); backdrop-filter: blur(14px); }

/* Kacheln/Karten der neuen Seiten */
.app-seitenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.app-seitenkopf h2, .app-seitenkopf .app-titel { margin: 0; font-size: 1.6rem; }
.app-seitenkopf-text { color: var(--app-text-2); font-size: .92rem; }
.app-seitenkopf-aktionen { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Filterzeile über Listen (Status, Objekt/Mieter, Suche …) */
.app-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.app-filter .rz-form-field { margin: 0; }
.app-kanal { font-size: 18px !important; vertical-align: -4px; opacity: .65; margin-right: 4px; }
/* Überschrift in Kacheln (Icon + Titel, rechts optional ein Knopf) und Listenzeilen darin */
.app-abschnitt { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 8px; }
.app-abschnitt > .rzi { color: var(--rz-primary); }
.app-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--app-rand); cursor: pointer; border-radius: var(--app-radius-klein); }
.app-zeile:hover { background: color-mix(in srgb, var(--rz-primary) 6%, transparent); }
.app-zeile-titel { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.app-kachel { background: var(--app-flaeche); border: 1px solid var(--app-rand); border-radius: var(--app-radius); box-shadow: var(--app-schatten); padding: 16px; }
.app-kachel-wert { font-family: var(--app-schrift-titel); font-size: 1.7rem; font-weight: 700; line-height: 1.15; }
.app-kachel-name { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--app-text-2); }
.app-kachel-unter { font-size: .85rem; color: var(--app-text-2); margin-top: 2px; }
.app-kachel.klickbar { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.app-kachel.klickbar:hover { transform: translateY(-2px); box-shadow: var(--app-schatten-gross); }
.app-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.app-karte { background: var(--app-flaeche); border: 1px solid var(--app-rand); border-radius: var(--app-radius); box-shadow: var(--app-schatten); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.app-karte.klickbar { cursor: pointer; }
.app-karte.klickbar:hover { border-color: color-mix(in srgb, var(--rz-primary) 45%, var(--app-rand)); }
.app-karte-titel { font-weight: 800; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-karte-unter { color: var(--app-text-2); font-size: .86rem; }
.app-karte-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .86rem; }
.app-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--rz-base-200); color: var(--app-text); white-space: nowrap; }
html[data-modus="dunkel"] .app-chip { background: var(--rz-base-500); }
.app-chip.primaer { background: var(--rz-primary-lighter); color: var(--rz-primary-dark); }
html[data-modus="dunkel"] .app-chip.primaer { color: var(--app-seite-aktiv-text); }
.app-chip.gut { background: var(--rz-success-lighter); color: var(--rz-success-dark); }
.app-chip.warn { background: var(--rz-warning-lighter); color: var(--rz-warning-dark); }
.app-chip.schlecht { background: var(--rz-danger-lighter); color: var(--rz-danger-dark); }
.app-leer { text-align: center; color: var(--app-text-2); padding: 40px 16px; }
.app-leer .rzi { font-size: 48px; opacity: .5; display: block; margin: 0 auto 8px; }
.app-zahl-plus { color: var(--rz-success-dark); }
.app-zahl-minus { color: var(--rz-danger-dark); }
html[data-modus="dunkel"] .app-zahl-plus { color: var(--rz-success); }
html[data-modus="dunkel"] .app-zahl-minus { color: var(--rz-danger); }
.app-balken { height: 8px; border-radius: 999px; background: var(--rz-base-200); overflow: hidden; }
html[data-modus="dunkel"] .app-balken { background: var(--rz-base-500); }
.app-balken > div { height: 100%; border-radius: 999px; background: var(--rz-primary); }
.app-zweispaltig { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.app-raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }

/* Öffentliche Seiten (Meldeformular, Einladung, Mieterportal) */
.app-oeffentlich { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(24px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
.app-oeffentlich-karte { width: min(640px, 100%); background: var(--app-flaeche); border: 1px solid var(--app-rand); border-radius: calc(var(--app-radius) + 6px); box-shadow: var(--app-schatten-gross); padding: 22px; }
.app-oeffentlich-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.app-oeffentlich-fuss { margin-top: 18px; font-size: .78rem; color: var(--app-text-2); text-align: center; }

/* ═════════════════════════════════ Lady: Plüsch ═════════════════════════════════
   Samtige Verläufe, gepolsterte Karten (weiche Glanzkante oben, rosé Schatten), Kissen-Knöpfe,
   Chesterfield-Steppmuster in der Seitenleiste. */

html[data-stil="lady"] .app-kachel, html[data-stil="lady"] .app-karte, html[data-stil="lady"] .rz-card, html[data-stil="lady"] .app-emma-panel, html[data-stil="lady"] .app-menue {
    background: var(--app-flaeche-verlauf);
    border-color: color-mix(in srgb, var(--app-rand) 65%, transparent);
    box-shadow: var(--app-glanz), var(--app-schatten);
}
html[data-stil="lady"] .app-kachel.klickbar:hover, html[data-stil="lady"] .app-karte.klickbar:hover {
    transform: translateY(-3px);
    box-shadow: var(--app-glanz), 0 14px 36px color-mix(in srgb, var(--rz-primary) 22%, transparent);
    border-color: color-mix(in srgb, var(--rz-primary) 30%, var(--app-rand));
}
html[data-stil="lady"] .app-karte.klickbar { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
html[data-stil="lady"] .rz-dialog { border-radius: 24px !important; }
html[data-stil="lady"] .app-oeffentlich-karte { border-radius: 28px; background: var(--app-flaeche-verlauf); box-shadow: var(--app-glanz), var(--app-schatten-gross); }

/* Kissen-Knöpfe: heller oben, sattere Farbe unten, Glanzkante und weiches Leuchten */
html[data-stil="lady"] .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat) {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--rz-primary) 78%, #fff) 0%, var(--rz-primary) 55%, var(--rz-primary-dark) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px color-mix(in srgb, var(--rz-primary) 32%, transparent);
    border: 0;
}
html[data-stil="lady"] .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 20px color-mix(in srgb, var(--rz-primary) 42%, transparent);
}
html[data-stil="lady"] .rz-button.rz-variant-outlined { border-width: 1.5px; }

/* Seitenleiste: gesteppter Samt (Rauten + Knöpfe), aktiver Punkt als Kissen */
html[data-stil="lady"] .app-seite {
    background-color: var(--app-seite-bg);
    /* Kachel 28 px: zwei Diagonalen (Nähte) und Knöpfe in Mitte und Ecken – alles auf demselben Raster */
    background-image:
        radial-gradient(circle, var(--app-polster) 1.5px, transparent 2px),
        radial-gradient(circle, var(--app-polster) 1.5px, transparent 2px),
        linear-gradient(45deg, transparent calc(50% - .6px), color-mix(in srgb, var(--app-polster) 55%, transparent) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)),
        linear-gradient(-45deg, transparent calc(50% - .6px), color-mix(in srgb, var(--app-polster) 55%, transparent) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px));
    background-size: 28px 28px;
    background-position: 0 0, 14px 14px, 0 0, 0 0;
    border-right-color: color-mix(in srgb, var(--app-rand) 60%, transparent);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5), 6px 0 30px color-mix(in srgb, var(--rz-primary) 6%, transparent);
}
html[data-stil="lady"][data-modus="dunkel"] .app-seite { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .03), 6px 0 30px rgba(0, 0, 0, .25); }
html[data-stil="lady"] .app-nav-punkt { border-radius: 999px; }
html[data-stil="lady"] .app-nav-punkt.aktiv {
    background: linear-gradient(90deg, color-mix(in srgb, var(--rz-primary) 20%, transparent), color-mix(in srgb, var(--app-akzent-2) 10%, transparent));
    box-shadow: var(--app-glanz), 0 3px 10px color-mix(in srgb, var(--rz-primary) 14%, transparent);
}
html[data-stil="lady"] .app-kopf { border-bottom-color: transparent; box-shadow: 0 6px 24px color-mix(in srgb, var(--rz-primary) 7%, transparent); }
html[data-stil="lady"] .app-chip { padding: 2px 11px; box-shadow: var(--app-glanz); }
html[data-stil="lady"] .app-avatar, html[data-stil="lady"] .app-emma-knopf {
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45), transparent 42%), linear-gradient(135deg, var(--rz-primary), var(--app-akzent-2));
}
html[data-stil="lady"] .app-emma-knopf { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px color-mix(in srgb, var(--rz-primary) 40%, transparent); }
html[data-stil="lady"] .app-balken { height: 10px; box-shadow: inset 0 1px 2px rgba(120, 60, 80, .12); }
html[data-stil="lady"] .app-balken > div { background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 60%); }
html[data-stil="lady"] .app-wahl { border-radius: 14px; }

/* ═════════════════════════════════ Gentleman: Loft ═════════════════════════════════
   Beton und Stahl, warmes Licht von oben, Messing-Akzente, Neon-Cyan für Aktives und Fokus,
   Nieten an den Kennzahl-Kacheln, schmale Versalien wie Hallen-Beschriftung. */

html[data-stil="gentleman"] .app-kachel, html[data-stil="gentleman"] .app-karte, html[data-stil="gentleman"] .rz-card,
html[data-stil="gentleman"] .app-emma-panel, html[data-stil="gentleman"] .app-menue {
    background: var(--app-flaeche-verlauf);
    border-color: var(--app-rand);
    border-top-color: color-mix(in srgb, var(--app-messing) 22%, var(--app-rand));
    box-shadow: var(--app-glanz), var(--app-schatten);
}
/* Kennzahl-Kacheln: vier Nieten in den Ecken wie bei einer Stahlplatte */
html[data-stil="gentleman"] .app-kachel {
    background:
        radial-gradient(circle at 9px 9px, color-mix(in srgb, var(--app-text) 22%, transparent) 1.6px, transparent 2.2px),
        radial-gradient(circle at calc(100% - 9px) 9px, color-mix(in srgb, var(--app-text) 22%, transparent) 1.6px, transparent 2.2px),
        radial-gradient(circle at 9px calc(100% - 9px), color-mix(in srgb, var(--app-text) 22%, transparent) 1.6px, transparent 2.2px),
        radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), color-mix(in srgb, var(--app-text) 22%, transparent) 1.6px, transparent 2.2px),
        var(--app-flaeche-verlauf);
}
html[data-stil="gentleman"] .app-kachel.klickbar:hover, html[data-stil="gentleman"] .app-karte.klickbar:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--app-neon) 55%, var(--app-rand));
    box-shadow: var(--app-glanz), 0 0 0 1px color-mix(in srgb, var(--app-neon) 35%, transparent), 0 0 22px var(--app-neon-glow), var(--app-schatten);
}
html[data-stil="gentleman"] .app-karte.klickbar { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
html[data-stil="gentleman"] .app-kachel-name, html[data-stil="gentleman"] .app-nav-gruppe, html[data-stil="gentleman"] .app-menue-titel, html[data-stil="gentleman"] .app-blatt-gruppe {
    color: var(--app-messing); opacity: 1; letter-spacing: .14em;
}
html[data-stil="gentleman"] .app-nav-gruppe { opacity: .85; }
html[data-stil="gentleman"] .app-kachel-wert, html[data-stil="gentleman"] .app-abschnitt, html[data-stil="gentleman"] .app-karte-titel { font-family: var(--app-schrift-titel); letter-spacing: .02em; }
html[data-stil="gentleman"] .app-abschnitt { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
html[data-stil="gentleman"] .app-abschnitt > .rzi { color: var(--app-neon); }

/* Seitenleiste: geschwärzter Stahl mit Messing-Schiene, aktiver Punkt als Neon-Leiste */
html[data-stil="gentleman"] .app-seite {
    background:
        radial-gradient(400px 260px at 50% -40px, rgba(255, 184, 92, .10), transparent 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #171614 0%, #0c0c0b 100%);
    box-shadow: inset -1px 0 0 rgba(217, 165, 90, .28), 8px 0 28px rgba(0, 0, 0, .35);
}
html[data-stil="gentleman"] .app-nav-punkt.aktiv {
    background: linear-gradient(90deg, rgba(63, 207, 223, .14), rgba(63, 207, 223, .02));
    color: #7fe6f0;
    box-shadow: inset 3px 0 0 #3fcfdf, inset 14px 0 18px -14px rgba(63, 207, 223, .55);
    text-shadow: 0 0 10px rgba(63, 207, 223, .35);
}
html[data-stil="gentleman"] .app-nav-punkt:hover:not(.aktiv) { background: rgba(217, 165, 90, .08); }
html[data-stil="gentleman"] .app-nav-zahl { border-radius: 3px; }

/* Kopfzeile: Messing-Haarlinie statt Rand */
html[data-stil="gentleman"] .app-kopf { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--app-messing) 45%, transparent), transparent) 1; }
html[data-stil="gentleman"] .app-benutzer-knopf { border-radius: 4px; }

/* Knöpfe: gebürstetes Messing, schmale Versalien; Umriss-Knöpfe mit Neon beim Überfahren */
html[data-stil="gentleman"] .rz-button:not(.rz-button-icon-only):not(.rz-variant-text) { font-family: var(--app-schrift-titel); text-transform: uppercase; letter-spacing: .07em; }
html[data-stil="gentleman"] .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat) {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--rz-primary) 80%, #fff) 0%, var(--rz-primary) 45%, var(--rz-primary-dark) 100%);
    border: 0;
    box-shadow: inset 0 1px 0 rgba(255, 240, 210, .35), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .3);
}
html[data-stil="gentleman"] .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover {
    box-shadow: inset 0 1px 0 rgba(255, 240, 210, .4), 0 0 16px color-mix(in srgb, var(--rz-primary) 45%, transparent);
}
html[data-stil="gentleman"] .rz-button.rz-variant-outlined:hover { border-color: var(--app-neon); box-shadow: 0 0 12px var(--app-neon-glow); }

html[data-stil="gentleman"] .app-chip { border-radius: 3px; }
html[data-stil="gentleman"] .app-balken { border-radius: 2px; height: 6px; }
html[data-stil="gentleman"] .app-balken > div { border-radius: 2px; background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25)); box-shadow: 0 0 8px color-mix(in srgb, var(--rz-primary) 50%, transparent); }
html[data-stil="gentleman"] .app-avatar { background: linear-gradient(135deg, #e6bd7e, #9e7032); color: #1a1206; }
html[data-stil="gentleman"] .app-emma-knopf {
    background: linear-gradient(160deg, #2a2724, #121110); color: #7fe6f0;
    box-shadow: 0 0 0 1px rgba(63, 207, 223, .55), 0 0 22px rgba(63, 207, 223, .35), var(--app-schatten-gross);
}
html[data-stil="gentleman"] .app-wahl { border-radius: 4px; }
html[data-stil="gentleman"] .app-oeffentlich-karte { border-radius: 8px; background: var(--app-flaeche-verlauf); }
@media (max-width: 900px) {
    html[data-stil="gentleman"] .app-unten { border-top: 1px solid color-mix(in srgb, var(--app-messing) 35%, transparent); }
    html[data-stil="gentleman"] .app-unten-punkt.aktiv { color: var(--app-neon); text-shadow: 0 0 10px var(--app-neon-glow); }
    html[data-stil="gentleman"] .app-unten-punkt.aktiv::before { border-radius: 4px; background: color-mix(in srgb, var(--app-neon) 12%, transparent); box-shadow: inset 0 -2px 0 var(--app-neon); }
    html[data-stil="gentleman"] .app-blatt { border-radius: 8px 8px 0 0; }
    html[data-stil="lady"] .app-unten { border-radius: 22px 22px 0 0; border-top-color: transparent; box-shadow: 0 -8px 30px color-mix(in srgb, var(--rz-primary) 10%, transparent); }
    html[data-stil="lady"] .app-blatt { border-radius: 26px 26px 0 0; }
}

/* ═════════════════════════════════ Handy / Tablet ═════════════════════════════════ */

.app-unten { display: none; }

@media (max-width: 900px) {
    .app-huelle, .app-huelle.eingeklappt { grid-template-columns: minmax(0, 1fr); }
    .app-seite { display: none; }
    .app-kopf { padding: env(safe-area-inset-top) 10px 0 12px; }
    .app-kopf-titel { font-size: 1.12rem; }
    .app-benutzer-name, .app-nur-desktop { display: none !important; }
    .app-benutzer-knopf { padding: 3px; border: 0; background: transparent; }
    .app-inhalt { padding: 12px 12px calc(var(--app-unten-hoehe) + 24px + env(safe-area-inset-bottom)); }
    .app-tabs-oben { display: none; }

    .app-unten {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        height: calc(var(--app-unten-hoehe) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: var(--app-kopf-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--app-rand);
    }
    .app-unten-punkt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--app-text-2);
        font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; position: relative; padding: 0; }
    .app-unten-punkt .rzi { font-size: 25px; }
    .app-unten-punkt.aktiv { color: var(--rz-primary); }
    html[data-modus="dunkel"] .app-unten-punkt.aktiv { color: var(--app-seite-aktiv-text); }
    .app-unten-punkt.aktiv::before { content: ""; position: absolute; top: 6px; width: 54px; height: 32px; border-radius: 16px; background: var(--rz-primary-lighter); z-index: -1; }
    .app-unten-punkt .app-nav-zahl { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; font-size: .62rem; line-height: 16px; min-width: 18px; padding: 0 5px; }

    /* „Mehr“: Blatt von unten */
    .app-blatt-schleier { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .35); }
    .app-blatt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; max-height: 82vh; overflow-y: auto;
        background: var(--app-flaeche); border-radius: 20px 20px 0 0; padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--app-schatten-gross); }
    .app-blatt-griff { width: 42px; height: 5px; border-radius: 3px; background: var(--rz-base-400); margin: 0 auto 10px; }
    .app-blatt-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .app-blatt-punkt { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; color: inherit; font: inherit; font-size: .74rem; font-weight: 700;
        padding: 10px 4px; border-radius: var(--app-radius-klein); cursor: pointer; text-align: center; }
    .app-blatt-punkt .rzi { font-size: 26px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: var(--rz-primary-lighter); color: var(--rz-primary-dark); }
    html[data-modus="dunkel"] .app-blatt-punkt .rzi { color: var(--app-seite-aktiv-text); }
    html[data-stil="gentleman"] .app-blatt-punkt .rzi { border-radius: 4px; }
    .app-blatt-gruppe { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .55; padding: 12px 4px 4px; }

    .app-emma-knopf { width: 52px; height: 52px; bottom: calc(var(--app-unten-hoehe) + 14px + env(safe-area-inset-bottom)); right: 14px; }
    .app-emma-panel { bottom: calc(var(--app-unten-hoehe) + 76px + env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; }

    .app-zweispaltig { grid-template-columns: minmax(0, 1fr); }
    .app-seitenkopf h2, .app-seitenkopf .app-titel { font-size: 1.35rem; }
    .app-seitenkopf-aktionen { margin-left: 0; width: 100%; }
    .app-karten { grid-template-columns: minmax(0, 1fr); }
    .app-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .app-kachel { padding: 12px; }
    .app-kachel-wert { font-size: 1.3rem; }

    /* Dialoge im Vollbild */
    .rz-dialog-wrapper .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        width: 100vw !important; max-width: 100vw !important; height: 100% !important; max-height: 100% !important;
        top: 0 !important; left: 0 !important; border-radius: 0 !important; padding-top: env(safe-area-inset-top);
    }
    .rz-dialog-confirm, .rz-dialog-alert { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }

    /* Tabellen als Karten: Zeilen untereinander, Spaltenname über dem Wert (Klasse .app-tabelle-karten am Grid) */
    .app-tabelle-karten .rz-grid-table thead { display: none; }
    .app-tabelle-karten .rz-grid-table, .app-tabelle-karten .rz-grid-table tbody, .app-tabelle-karten .rz-grid-table tr, .app-tabelle-karten .rz-grid-table td { display: block; width: 100% !important; }
    .app-tabelle-karten .rz-grid-table tr { background: var(--app-flaeche); border: 1px solid var(--app-rand); border-radius: var(--app-radius); margin-bottom: 10px; padding: 6px 4px; box-shadow: var(--app-schatten); }
    .app-tabelle-karten .rz-grid-table td { border: 0 !important; padding: 3px 10px !important; }
    .app-tabelle-karten .rz-grid-table td[data-titel]::before { content: attr(data-titel); display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .55; }
}

@media (max-width: 600px) {
    input, select, textarea,
    .rz-textbox, .rz-textarea, .rz-numeric input, .rz-dropdown, .rz-datepicker input, .rz-autocomplete input { font-size: 16px !important; }
    .rz-button.rz-button-sm, .rz-button.rz-button-xs { min-height: 36px; min-width: 36px; }
}

@media (display-mode: standalone) {
    html, body { overscroll-behavior-y: none; }
}

/* Ausgedocktes Fenster (window.appFenster): nur die Ansicht */
html.app-ausgedockt .app-seite, html.app-ausgedockt .app-unten, html.app-ausgedockt .app-tabs-oben, html.app-ausgedockt .app-emma-knopf { display: none !important; }
html.app-ausgedockt .app-huelle { grid-template-columns: minmax(0, 1fr); }

/* Druck */
@media print {
    .app-seite, .app-kopf, .app-unten, .app-tabs-oben, .app-emma-knopf, .app-emma-panel { display: none !important; }
    .app-huelle { display: block; }
    html, body { background: #fff !important; }
}

/* Sichtbarkeit je Gerät */
@media (min-width: 901px) { .app-nur-handy { display: none !important; } }