/* ═══════════════════════════════════════════════════════════════════════════
   Stil „Messingwerk“ (Steampunk-Futurismus) – wirkt nur mit <html data-app-stil="steampunk">.
   Umschalten: Zahnrad-Knopf oben rechts (window.appStil in index.html), Hell/Dunkel bleibt unabhängig.
   Grundsatz: Der Rahmen der App (Ribbon, Tab-Leiste, Titel, Plaketten) trägt den Stil,
   Arbeitsflächen (Tabellen, Formulare) bleiben ruhig und kontrastreich.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Farben: Hell ── */
html[data-app-stil="steampunk"] {
    --sp-bg: #f1e8d6;          /* Pergament */
    --sp-flaeche: #fffaf0;     /* Arbeitsfläche */
    --sp-flaeche-2: #f7efdf;   /* Streifen, Kopfzeilen von Kacheln */
    --sp-tinte: #2b2118;
    --sp-tinte-2: #6b5a45;
    --sp-messing: #8a6424;     /* Akzent für Text/Linien – kontraststark auf Pergament */
    --sp-glanz: #c9a157;       /* Messingglanz für Kanten, Icons */
    --sp-kupfer: #a1532f;
    --sp-patina: #2f6f60;
    --sp-signal: #a8321f;
    --sp-bernstein: #d98a1c;
    --sp-rahmen: #cdb68a;
    --sp-kopf: #241e17;        /* Ribbon, Tab-Leiste, Titel – in beiden Modi dunkel */
    --sp-kopf-text: #ecdcb9;
    --sp-kopf-text-2: #a8977a;
    --sp-kopf-linie: #5a4a33;
    --sp-schatten: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 6px rgba(43, 33, 24, .12);
    --sp-zebra: color-mix(in srgb, var(--sp-rahmen) 12%, var(--sp-flaeche)); /* jede zweite Tabellenzeile, bewusst dezent */
    --sp-glow: 0 0 0 2px color-mix(in srgb, var(--sp-bernstein) 55%, transparent), 0 0 12px color-mix(in srgb, var(--sp-bernstein) 40%, transparent);
    --sp-font-display: "Cinzel", "Trajan Pro", Georgia, serif;
    --sp-font-text: "Barlow", "Segoe UI", system-ui, sans-serif;

    /* Bootstrap */
    --bs-body-bg: var(--sp-bg);
    --bs-body-color: var(--sp-tinte);
    --bs-border-color: var(--sp-rahmen);
    --bs-tertiary-bg: var(--sp-flaeche-2);
    --bs-secondary-color: var(--sp-tinte-2);
    --bs-primary: var(--sp-messing);
    --bs-link-color: var(--sp-messing);
    --bs-link-hover-color: var(--sp-kupfer);

    /* Radzen */
    --rz-primary: var(--sp-messing);
    --rz-primary-light: var(--sp-glanz);
    --rz-primary-lighter: color-mix(in srgb, var(--sp-glanz) 22%, transparent);
    --rz-primary-dark: #6e5019;
    --rz-primary-darker: #563e13;
    --rz-on-primary: #1c160f;
    --rz-secondary: var(--sp-kupfer);
    --rz-success: var(--sp-patina);
    --rz-danger: var(--sp-signal);
    --rz-warning: var(--sp-bernstein);
    --rz-info: #3d6f8a;
    --rz-base-background-color: var(--sp-bg);
    --rz-body-background-color: var(--sp-bg);
    --rz-text-color: var(--sp-tinte);
    --rz-text-secondary-color: var(--sp-tinte-2);
    --rz-text-title-color: var(--sp-tinte);
    --rz-border-color: var(--sp-rahmen);
    --rz-input-background-color: var(--sp-flaeche);
    --rz-card-background-color: var(--sp-flaeche);
    --rz-panel-background-color: var(--sp-flaeche);
    --rz-grid-background-color: var(--sp-flaeche);
    --rz-grid-stripe-background-color: var(--sp-zebra);
    --rz-dialog-title-background-color: var(--sp-kopf);
    --rz-dialog-title-color: var(--sp-glanz);
    --rz-text-font-family: var(--sp-font-text);
}

/* ── Farben: Dunkel (Rauchgrau) ── */
html[data-app-stil="steampunk"][data-bs-theme="dark"] {
    --sp-bg: #181612;
    --sp-flaeche: #221f1a;
    --sp-flaeche-2: #2a2620;
    --sp-tinte: #ecdcb9;
    --sp-tinte-2: #b3a385;
    --sp-messing: #d2ab5e;
    --sp-glanz: #e6c47d;
    --sp-kupfer: #d27a4c;
    --sp-patina: #5fae99;
    --sp-signal: #e0614a;
    --sp-bernstein: #ffb347;
    --sp-rahmen: #4a4033;
    --sp-kopf: #11100d;
    --sp-kopf-linie: #3a3226;
    --sp-schatten: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 2px 8px rgba(0, 0, 0, .45);
    --sp-zebra: color-mix(in srgb, #ffffff 2.5%, var(--sp-flaeche));
    --rz-on-primary: #1c160f;
    --rz-primary-dark: #b88a39;
    --rz-primary-darker: #96702c;
    color-scheme: dark;
}

/* ── Grundflächen und Schrift ── */
html[data-app-stil="steampunk"] body,
html[data-app-stil="steampunk"] .rz-body.app-body,
html[data-app-stil="steampunk"] .rz-layout {
    background-color: var(--sp-bg);
    color: var(--sp-tinte);
    font-family: var(--sp-font-text);
}

html[data-app-stil="steampunk"] h1, html[data-app-stil="steampunk"] h2, html[data-app-stil="steampunk"] h3,
html[data-app-stil="steampunk"] h4, html[data-app-stil="steampunk"] h5,
html[data-app-stil="steampunk"] .rz-text-h3, html[data-app-stil="steampunk"] .rz-text-h4,
html[data-app-stil="steampunk"] .rz-text-h5, html[data-app-stil="steampunk"] .rz-text-h6 {
    font-family: var(--sp-font-display);
    letter-spacing: .03em;
    color: var(--sp-messing);
}

/* Zahlen in Tabellen untereinander */
html[data-app-stil="steampunk"] .rz-grid-table td,
html[data-app-stil="steampunk"] .rz-numeric-input {
    font-variant-numeric: tabular-nums;
}

/* ── Ribbon (Metro) als Instrumententafel ── */
html[data-app-stil="steampunk"] .rz-header {
    background-color: var(--sp-kopf);
    border-bottom: 3px solid var(--sp-glanz);
}

html[data-app-stil="steampunk"] .ribbon-menu .tabs-holder {
    background-color: var(--sp-kopf);
}

html[data-app-stil="steampunk"] .ribbon-menu .tabs-holder li {
    background-color: var(--sp-kopf);
    color: var(--sp-kopf-text-2);
    border-color: transparent;
    font-family: var(--sp-font-display);
    letter-spacing: .08em;
}

html[data-app-stil="steampunk"] .ribbon-menu .tabs-holder li a {
    color: inherit;
}

html[data-app-stil="steampunk"] .ribbon-menu .tabs-holder li:hover {
    color: var(--sp-kopf-text);
}

html[data-app-stil="steampunk"] .ribbon-menu .tabs-holder .active {
    background-color: #2e271e;
    color: var(--sp-glanz);
    border-color: var(--sp-kopf-linie);
    border-bottom-color: transparent;
    box-shadow: inset 0 2px 0 var(--sp-glanz);
}

html[data-app-stil="steampunk"] .ribbon-menu .content-holder {
    background-color: #2e271e;
    color: var(--sp-kopf-text);
    border-color: var(--sp-kopf-linie);
}

/* Gruppen als Messingtafel mit zwei Nieten (ohne Pseudo-Elemente, damit Metro nicht kollidiert) */
html[data-app-stil="steampunk"] .ribbon-menu .content-holder .group {
    border: 1px solid var(--sp-kopf-linie);
    border-radius: 6px;
    margin: 2px 3px;
    background-color: transparent;
    background-image:
        radial-gradient(circle at 6px 6px, #f0d79a 0, #7a5a22 2.5px, transparent 3.2px),
        radial-gradient(circle at calc(100% - 6px) 6px, #f0d79a 0, #7a5a22 2.5px, transparent 3.2px),
        linear-gradient(#ffffff08, #00000024);
}

html[data-app-stil="steampunk"] .ribbon-menu .content-holder .group + .group {
    border-left: 1px solid var(--sp-kopf-linie);
}

html[data-app-stil="steampunk"] .ribbon-menu .content-holder .section {
    border-color: var(--sp-kopf-linie);
}

html[data-app-stil="steampunk"] .ribbon-menu .content-holder .group .group-divider {
    background-color: var(--sp-kopf-linie);
}

html[data-app-stil="steampunk"] .ribbon-menu .caption {
    color: var(--sp-kopf-text);
}

html[data-app-stil="steampunk"] .header,
html[data-app-stil="steampunk"] .overlay-container {
    background-color: var(--sp-bg);
}

html[data-app-stil="steampunk"] .footer {
    background-color: var(--sp-kopf);
    color: var(--sp-kopf-text);
}

html[data-app-stil="steampunk"] .ribbon-menu .content-holder .group .title {
    font-family: var(--sp-font-display);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sp-kopf-text-2);
    border-color: transparent;
}

html[data-app-stil="steampunk"] .ribbon-button,
html[data-app-stil="steampunk"] .ribbon-tool-button,
html[data-app-stil="steampunk"] .ribbon-icon-button,
html[data-app-stil="steampunk"] .ribbon-button-dropdown {
    background-color: transparent;
    color: var(--sp-kopf-text);
    border-color: transparent;
    border-radius: 5px;
}

html[data-app-stil="steampunk"] .ribbon-button:hover:enabled,
html[data-app-stil="steampunk"] .ribbon-tool-button:hover:enabled,
html[data-app-stil="steampunk"] .ribbon-icon-button:hover:enabled {
    background-color: #ffffff10;
    border-color: var(--sp-glanz);
}

/* Bunte PNG-Icons einheitlich in Messing tönen */
html[data-app-stil="steampunk"] .ribbon-button img,
html[data-app-stil="steampunk"] .ribbon-icon-button img,
html[data-app-stil="steampunk"] .ribbon-tool-button img {
    filter: sepia(1) saturate(1.7) hue-rotate(-14deg) brightness(.98) contrast(1.05);
}

/* Version/Sitzung und Schalter oben rechts sitzen auf dem dunklen Kopf */
html[data-app-stil="steampunk"] .app-kopf-info,
html[data-app-stil="steampunk"] .app-kopf-info a {
    color: var(--sp-kopf-text-2);
}

html[data-app-stil="steampunk"] .theme-toggle .rz-button {
    color: var(--sp-glanz) !important;
}

/* ── Tab-Leiste unten: Messingplaketten ── */
html[data-app-stil="steampunk"] .app-tab-leiste {
    background: var(--sp-kopf);
    border-top: 2px solid var(--sp-glanz);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, .25);
}

html[data-app-stil="steampunk"] .app-tab {
    color: var(--sp-kopf-text);
    border-color: var(--sp-kopf-linie);
    background: linear-gradient(#ffffff0a, #00000030);
}

html[data-app-stil="steampunk"] .app-tab:hover {
    background: #ffffff12;
}

html[data-app-stil="steampunk"] .app-tab.aktiv {
    color: var(--sp-glanz);
    border-color: var(--sp-glanz);
    background: #2e271e;
    box-shadow: 0 0 10px color-mix(in srgb, var(--sp-bernstein) 35%, transparent);
}

html[data-app-stil="steampunk"] .app-tab-x {
    color: var(--sp-kopf-text-2);
}

html[data-app-stil="steampunk"] .app-tab-alle {
    color: var(--sp-kopf-text-2);
}

/* ── Dialoge / Overlays: Messinggehäuse ──
   Titelbalken dunkel mit zwei Nieten, Menüleiste (DialogMenue) direkt darunter aus einem Guss,
   Inhalt ruhig auf der Arbeitsfläche. Gilt auch für Bestätigen/Hinweis (Confirm/Alert) und Seiten-Dialoge. */

/* Abgedunkelter Hintergrund: warmer Rauch statt Grau */
html[data-app-stil="steampunk"] .rz-dialog-mask {
    background-color: rgba(17, 13, 8, .62) !important;
    backdrop-filter: blur(2px) sepia(.35);
    -webkit-backdrop-filter: blur(2px) sepia(.35);
}

html[data-app-stil="steampunk"] .rz-dialog,
html[data-app-stil="steampunk"] .rz-dialog-side {
    background-color: var(--sp-flaeche);
    color: var(--sp-tinte);
    border: 1px solid var(--sp-kopf-linie);
    border-radius: 10px; /* kein overflow:hidden – sonst würden aufklappende Listen im Dialog abgeschnitten */
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--sp-glanz) 45%, transparent),
        0 0 0 4px color-mix(in srgb, var(--sp-kopf) 85%, transparent),
        0 0 0 5px color-mix(in srgb, var(--sp-glanz) 25%, transparent),
        0 18px 48px rgba(0, 0, 0, .5);
}

html[data-app-stil="steampunk"] .rz-dialog-side {
    border-radius: 0;
    border-left: 3px solid var(--sp-glanz);
}

html[data-app-stil="steampunk"] .rz-dialog-titlebar,
html[data-app-stil="steampunk"] .rz-dialog-side-titlebar {
    background-color: var(--sp-kopf);
    background-image:
        radial-gradient(circle at 8px 50%, #f0d79a 0, #7a5a22 2.5px, transparent 3.2px),
        radial-gradient(circle at calc(100% - 8px) 50%, #f0d79a 0, #7a5a22 2.5px, transparent 3.2px),
        linear-gradient(#ffffff0d, #00000033);
    color: var(--sp-glanz);
    border-bottom: 2px solid var(--sp-glanz);
    border-radius: 9px 9px 0 0;
}

html[data-app-stil="steampunk"] .rz-dialog-side-titlebar {
    border-radius: 0;
}

/* Folgt direkt die Menüleiste, trägt sie die Messinglinie (siehe unten) */
html[data-app-stil="steampunk"] .rz-dialog:has(.rz-dialog-content > .app-dialog-menue) .rz-dialog-titlebar {
    border-bottom: none;
}

html[data-app-stil="steampunk"] .rz-dialog-title,
html[data-app-stil="steampunk"] .rz-dialog-side-title {
    font-family: var(--sp-font-display);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--sp-glanz);
}

html[data-app-stil="steampunk"] .rz-dialog-titlebar-close,
html[data-app-stil="steampunk"] .rz-dialog-titlebar .rz-dialog-titlebar-close,
html[data-app-stil="steampunk"] .rz-dialog-side-titlebar .rz-dialog-titlebar-close {
    color: var(--sp-kopf-text-2) !important;
    background: transparent !important;
    border-radius: 50%;
}

html[data-app-stil="steampunk"] .rz-dialog-titlebar-close:hover {
    color: var(--sp-glanz) !important;
    box-shadow: 0 0 0 1px var(--sp-glanz);
}

html[data-app-stil="steampunk"] .rz-dialog-content,
html[data-app-stil="steampunk"] .rz-dialog-side-content {
    background-color: var(--sp-flaeche);
    color: var(--sp-tinte);
}

/* Menüleiste unter dem Titel (Shared/DialogMenue.razor) */
html[data-app-stil="steampunk"] .app-dialog-menue {
    background: linear-gradient(#2e271e, var(--sp-kopf));
    color: var(--sp-kopf-text);
    border-bottom: 2px solid var(--sp-glanz);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}

html[data-app-stil="steampunk"] .app-dialog-menue-punkt {
    font-family: var(--sp-font-text);
    font-weight: 500;
    letter-spacing: .02em;
    border: 1px solid transparent;
}

html[data-app-stil="steampunk"] .app-dialog-menue-punkt .rzi,
html[data-app-stil="steampunk"] .app-dialog-menue-punkt .rz-icon {
    color: var(--sp-glanz);
}

html[data-app-stil="steampunk"] .app-dialog-menue-punkt:hover:not(:disabled),
html[data-app-stil="steampunk"] .app-dialog-menue-punkt:focus-visible {
    background: color-mix(in srgb, var(--sp-glanz) 16%, transparent);
    border-color: color-mix(in srgb, var(--sp-glanz) 55%, transparent);
}

html[data-app-stil="steampunk"] .app-dialog-menue-punkt.hervorgehoben {
    color: var(--sp-glanz);
    text-shadow: 0 0 8px color-mix(in srgb, var(--sp-bernstein) 45%, transparent);
}

/* Bestätigen / Hinweis */
html[data-app-stil="steampunk"] .rz-dialog-confirm-message,
html[data-app-stil="steampunk"] .rz-dialog-alert-message {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--sp-tinte);
}

html[data-app-stil="steampunk"] .rz-dialog-confirm-buttons,
html[data-app-stil="steampunk"] .rz-dialog-alert-buttons {
    border-top: 1px solid var(--sp-rahmen);
    padding-top: .75rem;
}

/* Größe ziehen: Griff in Messing */
html[data-app-stil="steampunk"] .rz-dialog-resize-handle {
    color: var(--sp-glanz);
    border-color: var(--sp-glanz);
}

/* ── Kacheln und Fieldsets: Plaketten mit Nieten ── */
html[data-app-stil="steampunk"] .rz-card {
    background-color: var(--sp-flaeche);
    border: 1px solid var(--sp-rahmen);
    border-radius: 8px;
    box-shadow: var(--sp-schatten);
    background-image:
        radial-gradient(circle at 7px 7px, var(--sp-glanz) 0, var(--sp-messing) 2.5px, transparent 3.2px),
        radial-gradient(circle at calc(100% - 7px) 7px, var(--sp-glanz) 0, var(--sp-messing) 2.5px, transparent 3.2px);
    background-repeat: no-repeat;
}

html[data-app-stil="steampunk"] .rz-fieldset {
    border-color: var(--sp-rahmen);
    border-radius: 8px;
    background-color: var(--sp-flaeche);
}

html[data-app-stil="steampunk"] .rz-fieldset-legend,
html[data-app-stil="steampunk"] .rz-fieldset legend {
    font-family: var(--sp-font-display);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sp-messing);
}

/* ── Tabellen: dunkler Messingkopf, ruhige Zeilen ── */
html[data-app-stil="steampunk"] .rz-grid-table thead th,
html[data-app-stil="steampunk"] .rz-grid-table thead th .rz-column-title {
    background-color: var(--sp-kopf);
    color: var(--sp-kopf-text);
}

html[data-app-stil="steampunk"] .rz-grid-table thead th {
    border-bottom: 2px solid var(--sp-glanz);
}

html[data-app-stil="steampunk"] .rz-grid-table thead th .rz-column-title-content {
    font-family: var(--sp-font-display);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

html[data-app-stil="steampunk"] .rz-grid-table thead th .rz-sortable-column-icon,
html[data-app-stil="steampunk"] .rz-grid-table thead th .rzi {
    color: var(--sp-glanz);
}

/* Hintergrund an der Zeile, nicht an der Zelle – sonst überdecken die Zellen die farbigen
   Zeilenmarkierungen aus RowRender (dringend, überfällig, Fehler). */
html[data-app-stil="steampunk"] .rz-data-row {
    background-color: var(--sp-flaeche);
}

html[data-app-stil="steampunk"] .rz-data-row > td {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--sp-rahmen) 60%, transparent);
}

html[data-app-stil="steampunk"] .rz-grid-table-striped .rz-data-row:nth-child(even) {
    background-color: var(--sp-zebra);
}

html[data-app-stil="steampunk"] .rz-data-row:hover > td {
    background-color: color-mix(in srgb, var(--sp-bernstein) 14%, var(--sp-flaeche)) !important;
}

html[data-app-stil="steampunk"] .rz-state-highlight > td {
    background-color: color-mix(in srgb, var(--sp-glanz) 26%, var(--sp-flaeche)) !important;
}

/* Bootstrap-Tabellen (ältere Seiten) */
html[data-app-stil="steampunk"] .table thead th {
    background-color: var(--sp-kopf);
    color: var(--sp-kopf-text);
    border-bottom: 2px solid var(--sp-glanz);
}

/* ── Knöpfe: eine Metall-Familie für Radzen (gefüllt) und Bootstrap (.btn-*) ──
   Je Farbe nur vier Werte (Verlauf oben/unten, Kante, Schrift), die gemeinsame Regel darunter baut den Knopf.
   Text- und Outline-Varianten von Radzen bleiben flach und nehmen die Akzentfarben aus --rz-*. */
html[data-app-stil="steampunk"] :is(.rz-button.rz-primary, .btn-primary) {
    --spk-a: #e6c47d; --spk-b: #b88a39; --spk-rand: #6e5019; --spk-text: #1c160f;  /* Messing */
}
html[data-app-stil="steampunk"] :is(.rz-button.rz-secondary, .btn-secondary) {
    --spk-a: #c97a52; --spk-b: #a1532f; --spk-rand: #6f351b; --spk-text: #fff6ea;  /* Kupfer */
}
html[data-app-stil="steampunk"] :is(.rz-button.rz-success, .btn-success) {
    --spk-a: #4f9c88; --spk-b: #2f6f60; --spk-rand: #1f4a40; --spk-text: #f1fbf7;  /* Patina */
}
html[data-app-stil="steampunk"] :is(.rz-button.rz-danger, .btn-danger) {
    --spk-a: #c9553d; --spk-b: #962d1c; --spk-rand: #5e1a0f; --spk-text: #fff3ec;  /* Signalrot */
}
html[data-app-stil="steampunk"] :is(.rz-button.rz-warning, .btn-warning) {
    --spk-a: #f3b04a; --spk-b: #c97d14; --spk-rand: #7a4a08; --spk-text: #1c160f;  /* Bernstein */
}
html[data-app-stil="steampunk"] :is(.rz-button.rz-info, .btn-info) {
    --spk-a: #5e8aa3; --spk-b: #3d6a82; --spk-rand: #24485a; --spk-text: #f0f6fa;  /* Stahlblau */
}
html[data-app-stil="steampunk"] :is(.rz-button.rz-dark, .btn-dark) {
    --spk-a: #3a3226; --spk-b: #241e17; --spk-rand: #11100d; --spk-text: #e6c47d;  /* Gusseisen */
}
html[data-app-stil="steampunk"] :is(.rz-button.rz-light, .rz-button.rz-base, .btn-light, .btn-default, .btn-outline-dark) {
    --spk-a: #fffaf0; --spk-b: #efe3c9; --spk-rand: #cdb68a; --spk-text: #2b2118;  /* Pergament-Blech */
}
html[data-app-stil="steampunk"][data-bs-theme="dark"] :is(.rz-button.rz-light, .rz-button.rz-base, .btn-light, .btn-default, .btn-outline-dark) {
    --spk-a: #3a3329; --spk-b: #2a2620; --spk-rand: #5a4a33; --spk-text: #ecdcb9;  /* brüniert */
}

html[data-app-stil="steampunk"] :is(.rz-button:is(.rz-primary, .rz-secondary, .rz-success, .rz-danger, .rz-warning, .rz-info, .rz-dark, .rz-light, .rz-base):not(.rz-variant-text):not(.rz-variant-outlined),
                                    .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light, .btn-default, .btn-outline-dark)) {
    color: var(--spk-text) !important;
    background: linear-gradient(var(--spk-a), var(--spk-b)) !important;
    border: 1px solid var(--spk-rand) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 0 var(--spk-rand);
    text-shadow: none;
}

html[data-app-stil="steampunk"] :is(.rz-button:is(.rz-primary, .rz-secondary, .rz-success, .rz-danger, .rz-warning, .rz-info, .rz-dark, .rz-light, .rz-base):not(.rz-variant-text):not(.rz-variant-outlined),
                                    .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light, .btn-default, .btn-outline-dark)):is(:hover, :focus-visible):not(:disabled):not(.rz-state-disabled) {
    filter: brightness(1.08);
}

html[data-app-stil="steampunk"] :is(.rz-button:is(.rz-primary, .rz-secondary, .rz-success, .rz-danger, .rz-warning, .rz-info, .rz-dark, .rz-light, .rz-base):not(.rz-variant-text):not(.rz-variant-outlined),
                                    .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light, .btn-default, .btn-outline-dark)):active:not(:disabled):not(.rz-state-disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 1px 0 var(--spk-rand);
}

html[data-app-stil="steampunk"] :is(.rz-button.rz-state-disabled, .btn:disabled, .btn.disabled) {
    opacity: .55;
    filter: saturate(.6);
}

/* Radzen-Outline: Rahmen und Schrift in der Akzentfarbe */
html[data-app-stil="steampunk"] .rz-button.rz-variant-outlined.rz-light,
html[data-app-stil="steampunk"] .rz-button.rz-variant-outlined.rz-base {
    color: var(--sp-tinte);
    border-color: var(--sp-rahmen);
}

html[data-app-stil="steampunk"] .rz-button:focus-visible,
html[data-app-stil="steampunk"] .rz-textbox:focus,
html[data-app-stil="steampunk"] .rz-textarea:focus,
html[data-app-stil="steampunk"] .rz-numeric:focus-within,
html[data-app-stil="steampunk"] .rz-dropdown.rz-state-focused,
html[data-app-stil="steampunk"] .rz-datepicker:focus-within {
    outline: none;
    box-shadow: var(--sp-glow) !important;
    border-color: var(--sp-bernstein) !important;
}

/* ── Meldungen (Radzen Notify): dunkle Messingplakette mit Signallampe je Art ──
   Wie Ribbon und Tab-Leiste in Hell und Dunkel gleich dunkel – gehört zum „Rahmen“ der App. */
html[data-app-stil="steampunk"] .rz-notification-item-wrapper { --spn: var(--sp-glanz); }
html[data-app-stil="steampunk"] .rz-notification-success { --spn: #5fae99; }
html[data-app-stil="steampunk"] .rz-notification-error { --spn: #e0614a; }
html[data-app-stil="steampunk"] .rz-notification-warn { --spn: #ffb347; }
html[data-app-stil="steampunk"] .rz-notification-info { --spn: #7fb0cc; }

html[data-app-stil="steampunk"] .rz-notification-item-wrapper {
    background-color: var(--sp-kopf) !important;
    background-image:
        radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #f0d79a 0, #7a5a22 2.5px, transparent 3.2px),
        linear-gradient(#ffffff0a, #00000030) !important; /* oben rechts keine Niete – dort sitzt das X */
    color: var(--sp-kopf-text) !important;
    border: 1px solid var(--sp-kopf-linie);
    border-left: 5px solid var(--spn);
    border-radius: 8px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sp-glanz) 30%, transparent), 0 8px 22px rgba(0, 0, 0, .45);
}

html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-item,
html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-message,
html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-content {
    background: transparent !important;
    color: var(--sp-kopf-text) !important;
}

html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-title,
html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-summary {
    font-family: var(--sp-font-display);
    letter-spacing: .08em;
    color: var(--spn) !important;
}

/* Symbol als leuchtende Lampe */
html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-item > .rzi,
html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-icon,
html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-item > .notranslate {
    color: var(--spn) !important;
    text-shadow: 0 0 8px var(--spn);
}

html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-close,
html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-close .rzi {
    color: var(--sp-kopf-text-2) !important;
}

html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-close:hover .rzi {
    color: var(--sp-glanz) !important;
}

/* Fortschrittsbalken (falls eingeblendet) in Lampenfarbe */
html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-notification-progress,
html[data-app-stil="steampunk"] .rz-notification-item-wrapper .rz-progressbar-value {
    background-color: var(--spn) !important;
}

/* ── Badges als Signallampen ── */
html[data-app-stil="steampunk"] .rz-badge-danger {
    box-shadow: 0 0 8px color-mix(in srgb, var(--sp-signal) 70%, transparent);
}

html[data-app-stil="steampunk"] .rz-badge-warning {
    box-shadow: 0 0 8px color-mix(in srgb, var(--sp-bernstein) 70%, transparent);
}

/* ── Splitter, Fahnen ── */
html[data-app-stil="steampunk"] .rz-splitter-bar {
    background-color: var(--sp-rahmen);
}

html[data-app-stil="steampunk"] .rz-splitter-bar:hover {
    background-color: var(--sp-glanz);
}

html[data-app-stil="steampunk"] .auftrag-fahne.aktiv {
    color: #1c160f;
    background: linear-gradient(90deg, #b88a39, #e6c47d);
    border-color: #6e5019;
}

/* ── IT-Dashboard: Kachelköpfe wie Messingschilder ── */
html[data-app-stil="steampunk"] .itdb-kopf {
    padding: 0 .25rem .45rem .9rem;
    border-bottom: 1px solid var(--sp-rahmen);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--sp-glanz) 35%, transparent);
}

html[data-app-stil="steampunk"] .itdb-kopf > .rzi,
html[data-app-stil="steampunk"] .itdb-kopf > .rz-icon {
    color: var(--sp-messing);
}

html[data-app-stil="steampunk"] .itdb-titel {
    font-family: var(--sp-font-display);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sp-messing);
}

html[data-app-stil="steampunk"] .itdb-info,
html[data-app-stil="steampunk"] .itdb-klein {
    color: var(--sp-tinte-2);
    opacity: 1;
}

/* Anzahl-Plaketten als Signallampen (Grün = Patina) */
html[data-app-stil="steampunk"] .itdb-kopf .rz-badge {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    border: 1px solid color-mix(in srgb, var(--sp-tinte) 25%, transparent);
}

html[data-app-stil="steampunk"] .rz-badge-success {
    background-color: var(--sp-patina);
    box-shadow: 0 0 6px color-mix(in srgb, var(--sp-patina) 55%, transparent);
}

html[data-app-stil="steampunk"] .rz-badge-danger {
    background-color: var(--sp-signal);
}

html[data-app-stil="steampunk"] .rz-badge-warning {
    background-color: var(--sp-bernstein);
    color: #1c160f;
}

html[data-app-stil="steampunk"] .rz-badge-info {
    background-color: var(--sp-kupfer);
}

/* ── Diagramme (Radzen): Reihenfolge Messing, Kupfer, Patina, Bernstein, Signal ── */
html[data-app-stil="steampunk"] {
    --rz-series-1: var(--sp-messing);
    --rz-series-2: var(--sp-kupfer);
    --rz-series-3: var(--sp-patina);
    --rz-series-4: var(--sp-bernstein);
    --rz-series-5: var(--sp-signal);
    --rz-series-6: var(--sp-tinte-2);
    --rz-series-7: var(--sp-glanz);
    --rz-series-8: var(--sp-rahmen);
}

/* Finanz-Dashboard (Benutzer): „Ziel verbleibend“ gedämpft, „Ertrag“ in Messing */
html[data-app-stil="steampunk"] .ertrag-diagramm {
    --rz-series-1: var(--sp-rahmen);
    --rz-series-2: var(--sp-messing);
}

html[data-app-stil="steampunk"] .rz-chart text {
    fill: var(--sp-tinte);
    font-family: var(--sp-font-text);
}

/* Dashboard-Karussell: Leiste und Seitenpunkte */
html[data-app-stil="steampunk"] .dashboard-leiste-titel {
    font-family: var(--sp-font-display);
    letter-spacing: .06em;
    color: var(--sp-messing);
}

html[data-app-stil="steampunk"] .rz-carousel-pager-button {
    background-color: var(--sp-rahmen);
}

html[data-app-stil="steampunk"] .rz-carousel-pager-button.rz-state-active {
    background-color: var(--sp-glanz);
    box-shadow: 0 0 6px color-mix(in srgb, var(--sp-bernstein) 60%, transparent);
}

/* ── Ladeanzeige: Zahnräder statt Ring ── */
html[data-app-stil="steampunk"] .lade-ring {
    display: none !important;
}

html[data-app-stil="steampunk"] .lade-zahnrad {
    display: inline-block !important; /* Drehung per SMIL in LadeSpinner.razor */
}
/* ── Telefon: weniger Zierrat, mehr Platz ── */
@media (max-width: 600px) {
    html[data-app-stil="steampunk"] .ribbon-menu .content-holder .group {
        background-image: linear-gradient(#ffffff08, #00000024);
    }

    html[data-app-stil="steampunk"] .rz-card {
        background-image: none;
    }
}

/* Leere Ribbon-Gruppen nicht als leere Messingtafel zeigen */
html[data-app-stil="steampunk"] .ribbon-menu .content-holder .group:empty {
    display: none;
}

/* ── Stilweiche: .nur-klassisch / .nur-steampunk (Grundregel in app.css) ── */
html[data-app-stil="steampunk"] .nur-klassisch {
    display: none !important;
}

html[data-app-stil="steampunk"] .nur-steampunk {
    display: block;
}

/* ── Manometer (Shared/Manometer.razor) statt Tortendiagramm ── */
html[data-app-stil="steampunk"] {
    --sp-zifferblatt: #f6ecd6;
}

html[data-app-stil="steampunk"][data-bs-theme="dark"] {
    --sp-zifferblatt: #26211a;
}

.manometer {
    width: 100%;
    margin: 0 auto;
}

.manometer svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
}

.manometer-blatt {
    fill: var(--sp-zifferblatt, #f6ecd6);
}

.manometer-zone {
    fill: none;
    stroke-width: 6;
    opacity: .85;
}

.manometer-strich {
    stroke: var(--sp-tinte, #2b2118);
}

.manometer-zahl {
    font: 600 10px "IBM Plex Mono", ui-monospace, monospace;
    fill: var(--sp-tinte-2, #6b5a45);
    text-anchor: middle;
}

.manometer-titel {
    font: 700 8.5px "Cinzel", Georgia, serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    fill: var(--sp-messing, #8a6424);
    text-anchor: middle;
}

.manometer-fenster {
    fill: #14110d;
    stroke: #7a5a22;
    stroke-width: 1;
}

.manometer-ziffern {
    font: 500 11px "IBM Plex Mono", ui-monospace, monospace;
    fill: #ffb347;
    text-anchor: middle;
    filter: drop-shadow(0 0 3px rgba(255, 179, 71, .8));
}

.manometer-betrag {
    font: 500 7.5px "Barlow", system-ui, sans-serif;
    fill: var(--sp-tinte-2, #6b5a45);
    text-anchor: middle;
}

/* Zeiger dreht um die Nabe und schwingt beim Laden leicht über */
.manometer-zeiger {
    transform-origin: 100px 96px;
    transition: transform 1.6s cubic-bezier(.34, 1.56, .64, 1);
    filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .4));
}

/* Dampf hinter dem Gehäuse (nur gerendert, wenn das Ziel erreicht ist) */
.manometer-dampf {
    fill: var(--sp-dampf, #d9d1c1);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: mano-dampf 3.2s ease-out infinite; /* Dauer/Verzögerung je Wolke inline (Manometer.razor) */
}

html[data-bs-theme="dark"] .manometer-dampf {
    --sp-dampf: #f4efe6;
}

.manometer-erreicht-text {
    font: 700 6px "Cinzel", Georgia, serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    fill: var(--sp-patina, #2f6f60);
    text-anchor: middle;
}

/* ── Ziel erreicht ── */
.manometer.erreicht .manometer-fenster {
    stroke: #5fae99;
}

.manometer.erreicht .manometer-ziffern {
    fill: #8ff0d2;
    filter: drop-shadow(0 0 3px rgba(95, 174, 153, .9));
}

.manometer.erreicht .manometer-erreicht-text {
    animation: mano-pulsieren 1.6s ease-in-out infinite;
}

/* Zeiger zittert am Anschlag – erst nach dem Einschwingen */
.manometer.erreicht .manometer-zeiger-spitze {
    transform-origin: 100px 96px;
    animation: mano-zittern .16s ease-in-out 1.7s infinite alternate;
}

@keyframes mano-pulsieren {
    50% { opacity: .55; }
}

/* Über 125 %: mehr Druck – schnellerer, dichterer Dampf, Zeiger zittert stärker */
.manometer.gerissen {
    --dampf-tempo: .6; /* mehr Druck: alle Wolken schneller */
}

.manometer.gerissen .manometer-zeiger-spitze {
    animation-name: mano-zittern-stark;
    animation-duration: .1s;
}

/* Glasriss: helle Sprünge mit dunklem Schatten (auf hellem und dunklem Zifferblatt sichtbar) */
.manometer-sprung {
    fill: none;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: .7;
    stroke-linejoin: bevel;
}

.manometer-sprung-schatten {
    fill: none;
    stroke: rgba(0, 0, 0, .45);
    stroke-width: 1.4;
    stroke-linejoin: bevel;
    transform: translate(.5px, .6px);
}

.manometer-scherbe {
    fill: rgba(255, 255, 255, .16);
}

.manometer-einschlag {
    fill: rgba(255, 255, 255, .85);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9));
}

/* Riss erscheint mit einem kurzen „Knack“ */
.manometer.gerissen .manometer-riss {
    animation: mano-knack .35s ease-out 1.4s both;
}

@keyframes mano-dampf {
    0% { opacity: 0; transform: translate(0, 0) scale(.35); }
    15% { opacity: .75; }
    50% { opacity: .55; transform: translate(calc(var(--dx, 0px) * .5 + var(--wx, 0px)), calc(var(--dy, -24px) * .5)) scale(1.5); }
    100% { opacity: 0; transform: translate(calc(var(--dx, 0px) - var(--wx, 0px) * .5), var(--dy, -24px)) scale(2.8); }
}

@keyframes mano-zittern-stark {
    from { transform: rotate(-1.8deg); }
    to { transform: rotate(1.8deg); }
}

@keyframes mano-knack {
    0% { opacity: 0; }
    30% { opacity: 1; transform: translate(.8px, -.6px); }
    60% { transform: translate(-.6px, .4px); }
    100% { opacity: 1; transform: none; }
}

@keyframes mano-zittern {
    from { transform: rotate(-.9deg); }
    to { transform: rotate(.9deg); }
}

@media (prefers-reduced-motion: reduce) {
    .manometer-zeiger {
        transition: none;
    }

    .manometer-dampf,
    .manometer.gerissen .manometer-riss,
    .manometer.erreicht .manometer-erreicht-text,
    .manometer.erreicht .manometer-zeiger-spitze {
        animation: none;
    }

    .manometer-dampf {
        opacity: .4;
    }
}

/* ── Bogenanzeige (Shared/Bogenanzeige.razor): Halbkreis mit Zeiger, z. B. „Bezahlt von abgerechnet“ ──
   Grundregeln gelten in beiden Stilen (Fallbacks = klassisch), Messingwerk macht daraus eine dunkle Plakette. */
.bogenanzeige {
    width: 100%;
    margin: 0 auto;
    padding: .25rem .5rem;
    text-align: center; /* ohne Rahmen und eigenen Hintergrund – steht frei auf der Seite */
}

.bogenanzeige svg {
    display: block;
    width: 100%;
    height: auto;
}

.bogenanzeige-spur,
.bogenanzeige-wert {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
}

.bogenanzeige-spur {
    stroke: var(--rz-base-300, #e0e0e0);
}

.bogenanzeige-wert {
    stroke: var(--rz-primary, #1976d2);
    transition: stroke-dasharray 1.4s ease-out;
}

.bogenanzeige-zeiger {
    transform-origin: 100px 100px;
    transition: transform 1.4s cubic-bezier(.34, 1.4, .64, 1);
}

.bogenanzeige-zeiger line {
    stroke: var(--rz-secondary, #e65100);
    stroke-width: 3;
    stroke-linecap: round;
}

.bogenanzeige-nabe {
    fill: var(--rz-primary, #1976d2);
}

.bogenanzeige-zahl {
    margin-top: .1rem;
    font: 500 1.7rem/1.1 "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.bogenanzeige-titel {
    margin-top: .2rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .8;
}

.bogenanzeige-unterzeile {
    margin-top: .15rem;
    font-size: .78rem;
    opacity: .7;
}

html[data-app-stil="steampunk"] .bogenanzeige {
    color: var(--sp-tinte);
}

html[data-app-stil="steampunk"] .bogenanzeige-spur {
    stroke: color-mix(in srgb, var(--sp-rahmen) 70%, var(--sp-tinte-2));
}

html[data-app-stil="steampunk"] .bogenanzeige-wert {
    stroke: var(--sp-glanz);
}

html[data-app-stil="steampunk"] .bogenanzeige-zeiger line {
    stroke: #d27a4c;
}

html[data-app-stil="steampunk"] .bogenanzeige-nabe {
    fill: #c9a157;
}

html[data-app-stil="steampunk"] .bogenanzeige-zahl {
    color: var(--sp-tinte);
}

html[data-app-stil="steampunk"] .bogenanzeige-titel {
    font-family: var(--sp-font-display);
    color: var(--sp-messing);
    opacity: 1;
}

html[data-app-stil="steampunk"] .bogenanzeige-unterzeile {
    color: var(--sp-tinte-2);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .bogenanzeige-wert,
    .bogenanzeige-zeiger {
        transition: none;
    }
}

/* Ribbon „Online“: Signallampen statt Punkte */
html[data-app-stil="steampunk"] .ribbon-online {
    color: var(--sp-kopf-text);
}

html[data-app-stil="steampunk"] .ribbon-online-punkt {
    background: #5fae99;
    box-shadow: 0 0 6px #5fae99;
}

html[data-app-stil="steampunk"] .ribbon-online-punkt.dienst {
    background: #e6c47d;
    box-shadow: 0 0 6px #e6c47d;
}

/* ── Finanz-Dashboard: Manometer ═ Zählwerk ═ Bezahlt in einer Reihe; im Messingwerk durch zwei Rohrabschnitte verbunden ── */
.messgeraete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.messgeraete-mano {
    position: relative;
    z-index: 1; /* Rohr verschwindet hinter dem Gehäuse */
    flex: 1 1 200px;
    min-width: 160px;
    max-width: 260px;
}

.messgeraete-bogen {
    position: relative;
    z-index: 1; /* Bogen liegt über dem Rohrende */
    flex: 1 1 190px;
    min-width: 150px;
    max-width: 240px;
}

html[data-app-stil="steampunk"] .messgeraete {
    flex-wrap: nowrap;
    gap: 0;
}

/* Rohr: Zylinder-Schattierung. Abschnitt a: 40px ins Manometer-Gehäuse, Ende unter der Tafel;
   Abschnitt b: Anfang unter der Tafel, Ende am Fuß des Bogens. */
html[data-app-stil="steampunk"] .messing-rohr {
    position: relative;
    z-index: 0;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(to bottom, #4a3714 0%, #b88a39 18%, #f6e2a8 38%, #c9a157 55%, #8a6424 78%, #3a2a10 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, .35);
}

html[data-app-stil="steampunk"] .messing-rohr.rohr-a {
    flex: 1 1 90px;
    min-width: 70px;
    max-width: 110px;
    margin: 0 -8px 0 -40px;
}

html[data-app-stil="steampunk"] .messing-rohr.rohr-b {
    flex: 1 1 76px;
    min-width: 58px;
    max-width: 96px;
    margin: 0 -26px 0 -8px;
}

.rohr-flansch {
    position: absolute;
    top: -5px;
    width: 7px;
    height: 24px;
    border-radius: 2px;
    background: linear-gradient(to right, #6e5019, #f0d79a 40%, #b88a39 70%, #4a3714);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

/* Flansche je Abschnitt: am Gerät und kurz vor der Tafel */
.rohr-a .rohr-flansch.links { left: 38px; }
.rohr-a .rohr-flansch.rechts { right: 12px; }
.rohr-b .rohr-flansch.links { left: 12px; }
.rohr-b .rohr-flansch.rechts { right: 30px; }

/* ── Zählwerk (Mittelstück): Gesamt angelegt + abgerechnet, netto/brutto ──
   Klassisch: schlichter Block zwischen den Anzeigen. Messingwerk: Messingtafel mit Nieten und Ziffernfenstern. */
.zaehlwerk {
    position: relative;
    z-index: 2; /* deckt die Rohrenden ab */
    flex: 0 0 auto;
    padding: .45rem .7rem .55rem;
    text-align: center;
}

.zaehlwerk-titel {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.zaehlwerk-untertitel {
    font-size: .66rem;
    letter-spacing: .06em;
    opacity: .75;
}

.zaehlwerk-werte {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: .35rem;
}

.zaehlwerk-wert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

.zaehlwerk-label {
    font-size: .64rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
}

.zaehlwerk-spalten {
    display: flex;
    align-items: stretch;
    gap: .7rem;
}

.zaehlwerk-spalte { min-width: 0; }

.zaehlwerk-trenner {
    flex: none;
    width: 0;
    border-left: 1px solid currentColor;
    opacity: .3;
}

.zaehlwerk-ziffern {
    font: 600 .88rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* feste Mindestbreite (bis „999.999,99 €“): Laden („…“ → Betrag) verschiebt die Anzeigen daneben nicht */
    display: inline-block;
    min-width: 12.5ch;
    text-align: right;
}

html[data-app-stil="steampunk"] .zaehlwerk {
    border: 1px solid #4a3714;
    border-radius: 8px;
    color: #1c160f;
    background:
        radial-gradient(circle at 7px 7px, #f6e2a8 0, #6e5019 2.2px, transparent 2.8px),
        radial-gradient(circle at calc(100% - 7px) 7px, #f6e2a8 0, #6e5019 2.2px, transparent 2.8px),
        radial-gradient(circle at 7px calc(100% - 7px), #f6e2a8 0, #6e5019 2.2px, transparent 2.8px),
        radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #f6e2a8 0, #6e5019 2.2px, transparent 2.8px),
        linear-gradient(160deg, #f0d79a 0%, #c9a157 35%, #a87d32 65%, #d9b56a 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 4px 10px rgba(0, 0, 0, .35);
}

/* Gravur: dunkle, kräftige Schrift mit hellem Lichtrand darunter – auf dem Messing gut lesbar */
html[data-app-stil="steampunk"] .zaehlwerk-titel,
html[data-app-stil="steampunk"] .zaehlwerk-untertitel,
html[data-app-stil="steampunk"] .zaehlwerk-label {
    color: #120d07;
    opacity: 1;
    text-shadow: 0 1px 0 rgba(255, 244, 214, .7);
}

html[data-app-stil="steampunk"] .zaehlwerk-titel {
    font-family: var(--sp-font-display);
    font-size: .95rem;
    font-weight: 700;
}

html[data-app-stil="steampunk"] .zaehlwerk-trenner {
    border-left: 2px groove #8a6424;
    opacity: 1;
}

html[data-app-stil="steampunk"] .zaehlwerk-untertitel {
    font-size: .74rem;
    font-weight: 600;
}

html[data-app-stil="steampunk"] .zaehlwerk-label {
    font-family: var(--sp-font-display);
    font-size: .74rem;
    font-weight: 700;
}

html[data-app-stil="steampunk"] .zaehlwerk-ziffern {
    font-size: .95rem;
}

/* Ziffernfenster wie am Manometer */
html[data-app-stil="steampunk"] .zaehlwerk-ziffern {
    padding: .05rem .4rem;
    border: 1px solid #7a5a22;
    border-radius: 3px;
    background: #14110d;
    color: #ffb347;
    text-shadow: 0 0 6px rgba(255, 179, 71, .7);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .6) inset;
}

/* Schmal: untereinander, Rohre weg */
@media (max-width: 991.98px) {
    html[data-app-stil="steampunk"] .messgeraete {
        flex-wrap: wrap;
        gap: 1rem;
    }

    html[data-app-stil="steampunk"] .messing-rohr {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tagesplan (Pages/Tagesplan/TagesplanAnsicht.razor)
   Grundgestaltung für beide Stile – darunter das Messingwerk: Kopf als dunkle Plakette mit Ziffernfenstern,
   Zeitleiste als Messinglineal, Tätigkeiten als Messingplaketten mit Nieten, Pausen in Kupfer, Termine als
   dunkle Plaketten mit Bernsteinkante, „jetzt“ als roter Zeiger mit Messingknopf.
   ═══════════════════════════════════════════════════════════════════════════ */
.tp { display: flex; flex-direction: column; gap: .75rem; }

.tp-kopf {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
    padding: .55rem .8rem; border: 1px solid var(--rz-border-color, #dee2e6); border-radius: 8px;
}
.tp-datum { display: flex; align-items: center; gap: .35rem; }
.tp-zaehler { display: flex; flex-wrap: wrap; gap: .5rem; }
.tp-zaehler-feld { display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.tp-zaehler-titel { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.tp-zaehler-wert { font: 600 1.05rem/1.2 "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.tp-aktionen { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }

.tp-haupt { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 1rem; align-items: start; }
.tp.kompakt .tp-haupt { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .tp-haupt { grid-template-columns: 1fr; } }

.tp-zeitleiste {
    position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr);
    border: 1px solid var(--rz-border-color, #dee2e6); border-radius: 8px; overflow: hidden;
    background: var(--rz-base-background-color, #fff);
}
.tp-lineal { position: relative; border-right: 1px solid var(--rz-border-color, #dee2e6); }
/* Stunde aufklappen: Klick auf die Stundenzahl; aufgeklappte Stunde markiert */
.tp-stunde-knopf { cursor: zoom-in; border-radius: 4px; padding: 0 2px; }
.tp-stunde-knopf:hover { background: color-mix(in srgb, var(--rz-primary, #1976d2) 14%, transparent); }
.tp-stunde.aufgeklappt { background: color-mix(in srgb, var(--rz-primary, #1976d2) 7%, transparent); }
.tp-stunde.aufgeklappt .tp-stunde-knopf { cursor: zoom-out; font-weight: 700; color: var(--rz-primary, #1976d2); }
.tp-anker { position: absolute; left: 0; height: 0; width: 0; pointer-events: none; }
.tp-stunde { position: absolute; left: 0; right: 0; border-top: 1px solid var(--rz-border-color, #dee2e6); padding: 1px 6px;
             font: 500 .72rem "IBM Plex Mono", ui-monospace, monospace; }
.tp-spur { position: relative; height: 100%; }
.tp-plan { cursor: copy; }
.tp-kalender { border-left: 1px dashed var(--rz-border-color, #dee2e6); }
.tp-linie { position: absolute; left: 0; right: 0; border-top: 1px solid color-mix(in srgb, var(--rz-border-color, #ccc) 80%, transparent); pointer-events: none; }
.tp-linie.halb { border-top-style: dotted; opacity: .6; }

.tp-band { position: absolute; left: 0; right: 0; z-index: 0; cursor: pointer;
           background: color-mix(in srgb, var(--rz-success, #2e7d32) 9%, transparent); border-left: 4px solid var(--rz-success, #2e7d32); }
/* Klicks gehen durch das Band auf die Spur (neue Tätigkeit) – nur die Beschriftung öffnet die Arbeitszeit. */
.tp-band { pointer-events: none; }
.tp-band-text { position: absolute; right: 6px; top: 2px; font-size: .68rem; opacity: .7; pointer-events: auto; cursor: pointer; text-decoration: underline dotted; }

.tp-block, .tp-termin { position: absolute; left: 6px; right: 6px; z-index: 2; padding: 2px 6px; border-radius: 6px; overflow: hidden;
                        font-size: .78rem; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.tp-block.taetigkeit { background: color-mix(in srgb, var(--rz-primary, #1976d2) 16%, var(--rz-base-background-color, #fff)); border: 1px solid var(--rz-primary, #1976d2); }
.tp-block.taetigkeit.abgerechnet { background: color-mix(in srgb, var(--rz-success, #2e7d32) 14%, var(--rz-base-background-color, #fff)); border-color: var(--rz-success, #2e7d32); }
.tp-block.pause { border: 1px solid var(--rz-secondary, #e65100);
                  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--rz-secondary, #e65100) 22%, transparent) 0 6px, transparent 6px 12px); }
.tp-block.frei { border: 1px dashed var(--rz-info, #0288d1); background: color-mix(in srgb, var(--rz-info, #0288d1) 7%, transparent); }
.tp-luecke { z-index: 1; display: flex; align-items: center; justify-content: center; box-shadow: none; font-size: .7rem;
             border: 1px dashed color-mix(in srgb, var(--rz-warning, #f9a825) 75%, transparent); background: transparent; opacity: .85; }
.tp-luecke:hover { background: color-mix(in srgb, var(--rz-warning, #f9a825) 12%, transparent); opacity: 1; }
.tp-termin { background: color-mix(in srgb, var(--rz-info, #0288d1) 13%, var(--rz-base-background-color, #fff)); border-left: 4px solid var(--rz-info, #0288d1); cursor: pointer; }
.tp.kompakt .tp-termin { cursor: default; }
.tp-termin-icon { margin-left: auto; font-size: .95rem !important; opacity: .75; }
/* Calendly-Buchung (eigene Farbe, damit sie neben Outlook-Terminen auffällt) */
.tp-termin.tp-calendly { background: color-mix(in srgb, #006bff 12%, var(--rz-base-background-color, #fff)); border-left-color: #006bff; }
.tp-block-kunde { font-size: .72rem; font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kunde in der Kopfzeile kurzer Einträge: nach dem Titel, gibt zuerst nach (Titel behält Vorrang), mit Trennpunkt */
.tp-block-kunde-kopf { flex: 0 1 auto; min-width: 0; max-width: 45%; }
.tp-block-kunde-kopf::before { content: "· "; opacity: .6; }
.tp-termin.uebernommen { opacity: .45; }
.tp .gewaehlt { box-shadow: 0 0 0 2px var(--rz-warning, #f9a825) !important; }

/* Kopf: Zeit + Titel in einer Zeile, Umbruch nur bei Platzmangel; Aktionen (Status, ↗, €/✓) rechts */
.tp-block-kopf { display: flex; flex-wrap: wrap; align-items: center; column-gap: .35rem; row-gap: 0; min-width: 0; }
.tp-block-zeit { font: 600 .7rem "IBM Plex Mono", ui-monospace, monospace; opacity: .8; white-space: nowrap; }
.tp-block-titel { flex: 1 1 7rem; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-block-aktionen { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; flex: none; }
.tp-block-aktionen .tp-plakette, .tp-block-aktionen .tp-abrechnen, .tp-block-aktionen .tp-termin-icon { margin-left: 0; }
.tp-plakette.zu { background: var(--rz-info, #0288d1); color: #fff; }
.tp-block.ticket-zu { border-style: dashed; }
/* Abgerechnet: schmal am rechten Rand, etwas zurückgenommen */
.tp-block.taetigkeit.abgerechnet { font-size: .72rem; opacity: .85; }
/* ±2 Std. um „jetzt“: vergrößert, leicht hinterlegt, mit Viertelstundenlinien */
.tp-zoom { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
           background: color-mix(in srgb, var(--rz-primary, #1976d2) 5%, transparent);
           border-top: 1px dashed color-mix(in srgb, var(--rz-primary, #1976d2) 30%, transparent);
           border-bottom: 1px dashed color-mix(in srgb, var(--rz-primary, #1976d2) 30%, transparent); }
.tp-linie.viertel { border-top-style: dotted; opacity: .35; }
.tp-block-text { font-size: .72rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-abrechnen { margin-left: auto; padding: 0 6px; border: 1px solid currentColor; border-radius: 10px; background: transparent; color: inherit;
                font: 700 .7rem/1.4 "IBM Plex Mono", ui-monospace, monospace; cursor: pointer; }
/* Für heute erledigt: Haken-Knopf + zurückgenommene Kachel (durchgestrichen, gedimmt) */
.tp-erledigt-knopf { padding: 0 5px; border: 1px solid currentColor; border-radius: 10px; background: transparent; color: inherit; opacity: .45;
                     font: 700 .72rem/1.4 "IBM Plex Mono", ui-monospace, monospace; cursor: pointer; }
.tp-erledigt-knopf:hover { opacity: .9; }
.tp-erledigt-knopf.an { opacity: 1; background: var(--rz-success, #2e7d32); color: #fff; border-color: var(--rz-success, #2e7d32); }
.tp-block.tp-erledigt { opacity: .6; }
.tp-block.tp-erledigt .tp-block-titel, .tp-block.tp-erledigt .tp-block-kunde, .tp-block.tp-erledigt .tp-block-text { text-decoration: line-through; }
.tp-plakette { margin-left: auto; padding: 0 6px; border-radius: 8px; font-size: .65rem; white-space: nowrap; }
.tp-plakette.ok { background: var(--rz-success, #2e7d32); color: #fff; }

.tp-jetzt { position: absolute; left: 0; right: 0; z-index: 5; border-top: 2px solid var(--rz-danger, #d32f2f); pointer-events: none; }
.tp-jetzt::before { content: ""; position: absolute; left: -2px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--rz-danger, #d32f2f); }
.tp-laedt { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; gap: .5rem;
            background: color-mix(in srgb, var(--rz-base-background-color, #fff) 70%, transparent); }

.tp-seite { display: flex; flex-direction: column; gap: .75rem; }
/* Seitenteil bleibt stehen, wenn der Kalender nach unten gescrollt wird; ist er selbst länger als das Fenster, scrollt er für sich */
@media (min-width: 1101px) {
    .tp-seite { position: sticky; top: .5rem; align-self: start; max-height: calc(100dvh - 9rem); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
}
.tp-hinweis { display: flex; align-items: flex-start; gap: .4rem; font-size: .8rem; opacity: .85; }
.tp-editor { padding: .6rem .75rem; border: 1px solid var(--rz-border-color, #dee2e6); border-radius: 8px; }
.tp-editor-titel { margin-bottom: .45rem; font-weight: 700; }
.tp-editor input[type="time"] { width: 100%; }
.tp-dauer { font: 600 .85rem "IBM Plex Mono", ui-monospace, monospace; }
.tp-bezug { display: flex; flex-direction: column; font-size: .85rem; }
.tp-klein { font-size: .75rem; opacity: .75; }

.tp-liste { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
.tp-liste-zeile { display: flex; align-items: center; gap: .5rem; padding: 3px 6px; border-left: 3px solid transparent; border-radius: 4px; font-size: .8rem; cursor: pointer; }
.tp-liste-zeile:hover { background: color-mix(in srgb, var(--rz-primary, #1976d2) 8%, transparent); }
.tp-liste-zeile.arbeitszeit { border-left-color: var(--rz-success, #2e7d32); }
.tp-liste-zeile.pause { border-left-color: var(--rz-secondary, #e65100); }
.tp-liste-zeile.taetigkeit { border-left-color: var(--rz-primary, #1976d2); }
.tp-liste-zeile.frei { border-left-color: var(--rz-info, #0288d1); }
.tp-liste-zeit, .tp-liste-dauer { font: .75rem "IBM Plex Mono", ui-monospace, monospace; white-space: nowrap; }
.tp-liste-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───── Messingwerk ───── */
html[data-app-stil="steampunk"] .tp-kopf {
    border: 1px solid var(--sp-kopf-linie); border-bottom: 2px solid var(--sp-messing); color: var(--sp-kopf-text);
    background: linear-gradient(#2e271e, var(--sp-kopf));
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
html[data-app-stil="steampunk"] .tp-zaehler-titel { font-family: var(--sp-font-display); color: var(--sp-kopf-text-2); opacity: 1; }
html[data-app-stil="steampunk"] .tp-zaehler-wert {
    min-width: 64px; padding: .05rem .45rem; text-align: center; border: 1px solid #7a5a22; border-radius: 3px;
    background: #14110d; color: #ffb347; text-shadow: 0 0 6px rgba(255, 179, 71, .7); box-shadow: 0 1px 2px rgba(0, 0, 0, .6) inset;
}

html[data-app-stil="steampunk"] .tp-zeitleiste {
    border: 1px solid var(--sp-rahmen); background: var(--sp-flaeche);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}
/* Dezentes Lineal mit schlichten Stundenlinien (kein Messinglineal mehr) */
html[data-app-stil="steampunk"] .tp-lineal {
    border-right: 1px solid var(--sp-rahmen);
    background: color-mix(in srgb, var(--sp-kopf) 7%, var(--sp-flaeche));
}
html[data-app-stil="steampunk"] .tp-stunde {
    border-top: 1px solid var(--sp-rahmen); color: var(--sp-tinte-2); font-weight: 600;
    text-shadow: none;
}
html[data-app-stil="steampunk"] .tp-linie { border-top-color: color-mix(in srgb, var(--sp-rahmen) 85%, transparent); }
html[data-app-stil="steampunk"] .tp-kalender { border-left: 1px dashed var(--sp-glanz); background: color-mix(in srgb, var(--sp-kopf) 6%, transparent); }

html[data-app-stil="steampunk"] .tp-band {
    background: color-mix(in srgb, var(--sp-patina) 10%, transparent); border-left: 4px solid var(--sp-patina);
}
html[data-app-stil="steampunk"] .tp-band-text { font-family: var(--sp-font-display); color: var(--sp-patina); opacity: 1; }

/* Tätigkeit = schlichte Kachel mit Messing-Akzent links (statt Messingplakette mit Nieten) */
html[data-app-stil="steampunk"] .tp-block.taetigkeit {
    color: var(--sp-tinte); border: 1px solid var(--sp-rahmen); border-left: 4px solid var(--sp-messing);
    background: color-mix(in srgb, var(--sp-glanz) 13%, var(--sp-flaeche));
    box-shadow: none;
    padding-left: 10px;
}
/* Abgerechnet = Patina-Akzent, dezent getönt */
html[data-app-stil="steampunk"] .tp-block.taetigkeit.abgerechnet {
    color: var(--sp-tinte); border-color: var(--sp-rahmen); border-left-color: var(--sp-patina);
    background: color-mix(in srgb, var(--sp-patina) 13%, var(--sp-flaeche));
}
/* Pause = Kupfer-Akzent, dezent getönt (keine Schraffur) */
html[data-app-stil="steampunk"] .tp-block.pause {
    color: var(--sp-tinte); border: 1px solid var(--sp-rahmen); border-left: 4px solid var(--sp-kupfer);
    background: color-mix(in srgb, var(--sp-kupfer) 13%, var(--sp-flaeche));
}
html[data-app-stil="steampunk"] .tp-block.frei {
    color: var(--sp-tinte-2); border: 1px dashed var(--sp-glanz); background: color-mix(in srgb, var(--sp-glanz) 8%, transparent);
}
html[data-app-stil="steampunk"] .tp-luecke {
    color: var(--sp-bernstein); border: 1px dashed var(--sp-bernstein); font-family: var(--sp-font-display); letter-spacing: .06em;
}
html[data-app-stil="steampunk"] .tp-luecke:hover { box-shadow: 0 0 10px color-mix(in srgb, var(--sp-bernstein) 45%, transparent); }

/* Outlook-Termine wie in Outlook: heller Block, kräftiger Farbbalken links, dunkle gut lesbare Schrift */
html[data-app-stil="steampunk"] .tp-termin {
    color: var(--sp-tinte); border: 1px solid var(--sp-rahmen); border-left: 5px solid var(--sp-patina);
    background: color-mix(in srgb, var(--sp-patina) 14%, var(--sp-flaeche));
}
html[data-app-stil="steampunk"] .tp-termin .tp-block-zeit { color: var(--sp-patina); opacity: 1; }
html[data-app-stil="steampunk"] .tp-termin .tp-block-titel,
html[data-app-stil="steampunk"] .tp-termin .tp-block-text { color: var(--sp-tinte); }
html[data-app-stil="steampunk"] .tp-termin-icon { color: var(--sp-patina); }

html[data-app-stil="steampunk"] .tp .gewaehlt { box-shadow: var(--sp-glow) !important; }

html[data-app-stil="steampunk"] .tp-abrechnen {
    width: 18px; height: 18px; padding: 0; border: 1px solid var(--sp-messing); border-radius: 50%; color: var(--sp-messing);
    background: color-mix(in srgb, var(--sp-glanz) 16%, var(--sp-flaeche));
    box-shadow: none;
}
html[data-app-stil="steampunk"] .tp-termin .tp-abrechnen { color: var(--sp-messing); }
html[data-app-stil="steampunk"] .tp-plakette.ok { background: var(--sp-patina); box-shadow: 0 0 6px var(--sp-patina); }

/* „jetzt“ = roter Zeiger mit Messingknopf */
html[data-app-stil="steampunk"] .tp-jetzt { border-top: 2px solid var(--sp-signal); box-shadow: 0 0 8px color-mix(in srgb, var(--sp-signal) 70%, transparent); }
html[data-app-stil="steampunk"] .tp-jetzt::before {
    width: 10px; height: 10px; top: -6px; left: -2px;
    background: var(--sp-signal); border: none;
}

html[data-app-stil="steampunk"] .tp-editor {
    border: 1px solid var(--sp-rahmen); background-color: var(--sp-flaeche); box-shadow: var(--sp-schatten);
    background-image: none;
}
html[data-app-stil="steampunk"] .tp-editor-titel { font-family: var(--sp-font-display); letter-spacing: .08em; color: var(--sp-messing); padding-left: .6rem; }
html[data-app-stil="steampunk"] .tp-dauer { color: var(--sp-messing); }
html[data-app-stil="steampunk"] .tp-liste-zeile.arbeitszeit { border-left-color: var(--sp-patina); }
html[data-app-stil="steampunk"] .tp-liste-zeile.pause { border-left-color: var(--sp-kupfer); }
html[data-app-stil="steampunk"] .tp-liste-zeile.taetigkeit { border-left-color: var(--sp-glanz); }
html[data-app-stil="steampunk"] .tp-liste-zeile.frei { border-left-color: var(--sp-bernstein); }
html[data-app-stil="steampunk"] .tp-liste-zeile:hover { background: color-mix(in srgb, var(--sp-bernstein) 12%, transparent); }

/* ── Ticket-Dialog: Sidebar als Messingtafel ── */
html[data-app-stil="steampunk"] .ticket-sidebar {
    background: var(--sp-flaeche-2);
    border: 1px solid var(--sp-rahmen);
    border-left: 3px solid var(--sp-messing);
    border-radius: 8px;
    box-shadow: var(--sp-schatten);
}
html[data-app-stil="steampunk"] .ticket-sidebar-titel {
    font-family: var(--sp-font-display);
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--sp-messing);
    opacity: 1;
    border-bottom: 1px solid var(--sp-rahmen);
    padding-bottom: 2px;
}

/* ───── Tagesplan: Drag & Drop, Bezug-Auswahl (Overlay), „Zum Tagesplan“ ───── */
.tp-plan [data-tp-id] { touch-action: none; user-select: none; }
.tp-block[data-tp-id] { cursor: grab; }
.tp-griff { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; z-index: 3; }
.tp-griff::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 26px; margin-left: -13px; border-top: 3px double currentColor; opacity: 0; transition: opacity .15s; }
.tp-block:hover .tp-griff::after, .tp-band:hover .tp-griff::after { opacity: .55; }
.tp-band .tp-griff { pointer-events: auto; }
.tp-zieht { cursor: grabbing !important; opacity: .85; z-index: 6 !important; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .3) !important; transition: none !important; }
.tp-zieh-info { position: absolute; right: 8px; z-index: 7; transform: translateY(-110%); padding: 1px 8px; border-radius: 10px; pointer-events: none;
                font: 600 .75rem "IBM Plex Mono", ui-monospace, monospace; background: var(--rz-text-color, #222); color: var(--rz-base-background-color, #fff); white-space: nowrap; }
.tp-ziel { outline: 3px solid var(--rz-warning, #f9a825) !important; outline-offset: 2px; transform: scale(1.12); }
/* Bezug als kleines Symbol vor dem Titel */
.tp-block[class*="bezug-"] .tp-block-titel::before { font-family: var(--rz-icon-font-family, "Material Symbols"), "Material Symbols Outlined", "Material Icons"; font-weight: normal; font-feature-settings: "liga"; margin-right: 3px; vertical-align: -2px; font-size: .9rem; }
.tp-block.bezug-ticket .tp-block-titel::before { content: "confirmation_number"; }
.tp-block.bezug-auftrag .tp-block-titel::before { content: "receipt_long"; }
.tp-block.bezug-kunde .tp-block-titel::before { content: "business"; }
.tp-block.bezug-todo .tp-block-titel::before { content: "checklist"; }
.tp-block.bezug-mail .tp-block-titel::before { content: "mail"; }
.tp-block.bezug-whatsapp .tp-block-titel::before { content: "chat"; }

/* Bezug im Editor/„Zum Tagesplan“: Symbol + Text über die volle Breite (normal umbrechen), Knöpfe darunter */
.tp-bezug-zeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem .5rem; padding: .45rem .6rem; border: 1px dashed var(--rz-border-color, #ccc); border-radius: 8px; }
.tp-bezug-zeile > .rzi { flex: none; margin-top: 1px; }
.tp-bezug-text { flex: 1 1 calc(100% - 2rem); min-width: 0; font-size: .85rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; white-space: normal; }

.tp-schnell { display: flex; gap: 4px; flex-wrap: wrap; align-self: center; }
.tp-schnell-knopf { padding: 2px 9px; border: 1px solid var(--rz-border-color, #ccc); border-radius: 12px; background: transparent; color: inherit;
                    font: 600 .75rem "IBM Plex Mono", ui-monospace, monospace; cursor: pointer; }
.tp-schnell-knopf:hover { background: color-mix(in srgb, var(--rz-primary, #1976d2) 12%, transparent); }

.tpb { display: flex; flex-direction: column; gap: .6rem; height: 100%; min-height: 0; }
.rz-dialog-content:has(.tpb) { display: flex; flex-direction: column; overflow: hidden; }
.rz-dialog-content:has(.tpb) > .tpb { flex: 1 1 auto; }
.tpb-reiter { display: flex; flex-wrap: wrap; gap: 4px; }
.tpb-reiter-knopf { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--rz-border-color, #ccc); border-radius: 16px;
                    background: transparent; color: inherit; font-size: .85rem; cursor: pointer; }
.tpb-reiter-knopf .rzi { font-size: 1.05rem; }
.tpb-reiter-knopf.aktiv { background: var(--rz-primary, #1976d2); border-color: var(--rz-primary, #1976d2); color: var(--rz-on-primary, #fff); }
.tpb-suche { display: flex; align-items: center; gap: .4rem; }
.tpb-eingabe { flex: 1; min-width: 0; }
.tpb-liste { flex: 1 1 auto; min-height: 200px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; }
.tpb-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; text-align: left; padding: 5px 8px; border: 0;
             border-left: 3px solid transparent; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.tpb-zeile:hover, .tpb-zeile:focus-visible { background: color-mix(in srgb, var(--rz-primary, #1976d2) 10%, transparent); border-left-color: var(--rz-primary, #1976d2); outline: none; }
.tpb-zeile-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpb-zeile-rechts { font: .72rem "IBM Plex Mono", ui-monospace, monospace; opacity: .7; white-space: nowrap; }
.tpb-zeile-unter { grid-column: 1 / -1; font-size: .75rem; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpb-leer { display: flex; align-items: center; gap: .5rem; padding: 1rem; opacity: .7; }

html[data-app-stil="steampunk"] .tp-zieh-info { background: var(--sp-kopf); color: var(--sp-glanz); border: 1px solid var(--sp-messing); }
html[data-app-stil="steampunk"] .tp-ziel { outline-color: var(--sp-bernstein) !important; box-shadow: var(--sp-glow) !important; }
html[data-app-stil="steampunk"] .tp-bezug-zeile { border-color: var(--sp-glanz); background: var(--sp-flaeche-2); }
html[data-app-stil="steampunk"] .tp-bezug-zeile .rzi { color: var(--sp-messing); }
html[data-app-stil="steampunk"] .tp-schnell-knopf { border-color: var(--sp-rahmen); color: var(--sp-tinte); background: var(--sp-flaeche); }
html[data-app-stil="steampunk"] .tp-schnell-knopf:hover { border-color: var(--sp-messing); box-shadow: var(--sp-glow); }
html[data-app-stil="steampunk"] .tpb-reiter-knopf { border-color: var(--sp-rahmen); color: var(--sp-tinte); font-family: var(--sp-font-text); }
html[data-app-stil="steampunk"] .tpb-reiter-knopf.aktiv {
    background: linear-gradient(180deg, var(--sp-glanz), var(--sp-messing));
    border-color: var(--sp-messing); color: #1c160f; box-shadow: var(--sp-schatten);
}
html[data-app-stil="steampunk"] .tpb-zeile:hover, html[data-app-stil="steampunk"] .tpb-zeile:focus-visible {
    background: color-mix(in srgb, var(--sp-bernstein) 12%, transparent); border-left-color: var(--sp-messing);
}
html[data-app-stil="steampunk"] .tpb-zeile-rechts { color: var(--sp-messing); opacity: 1; }
.tpb-filter { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 0 .25rem; font-size: .8rem; white-space: nowrap; cursor: pointer; }
html[data-app-stil="steampunk"] .tpb-filter { color: var(--sp-tinte-2); }
.tpb-tickets { display: block; }
.tp-doppelt { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; padding: .4rem .6rem; border-radius: 8px; font-size: .82rem;
              background: color-mix(in srgb, var(--rz-info, #0288d1) 10%, transparent); }
.tp-doppelt.fehler { background: color-mix(in srgb, var(--rz-danger, #d32f2f) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rz-danger, #d32f2f) 45%, transparent); }
.tp-doppelt span { flex: 1; }
html[data-app-stil="steampunk"] .tp-doppelt { background: color-mix(in srgb, var(--sp-patina) 12%, var(--sp-flaeche)); }
html[data-app-stil="steampunk"] .tp-doppelt.fehler { background: color-mix(in srgb, var(--sp-signal) 14%, var(--sp-flaeche)); border-color: var(--sp-signal); }

/* Zählwerk schmal: Spalten untereinander */
@media (max-width: 575.98px) {
    .zaehlwerk-spalten { flex-direction: column; gap: .4rem; }
    .zaehlwerk-trenner { width: auto; border-left: 0; border-top: 1px solid currentColor; }
    html[data-app-stil="steampunk"] .zaehlwerk-trenner { border-left: 0; border-top: 2px groove #8a6424; }
}

html[data-app-stil="steampunk"] .tp-block-kunde { color: var(--sp-kupfer); opacity: 1; }
html[data-app-stil="steampunk"] .tp-termin-icon { color: var(--sp-messing); opacity: 1; }
.tp-block.bezug-backup .tp-block-titel::before { content: "backup"; }
.tp-block.bezug-wartung .tp-block-titel::before { content: "build"; }
.tp-oeffnen { padding: 0 5px; border: 1px solid currentColor; border-radius: 10px; background: transparent; color: inherit; font: 700 .7rem/1.4 sans-serif; cursor: pointer; opacity: .75; }
.tp-oeffnen:hover { opacity: 1; }
html[data-app-stil="steampunk"] .tp-oeffnen { color: var(--sp-messing); border-color: var(--sp-glanz); }
.auftrag-overlay { min-height: 70vh; }
html[data-app-stil="steampunk"] .ticket-tagesplan { color: var(--sp-messing); }
html[data-app-stil="steampunk"] .ticket-tagesplan-hinweis { background: color-mix(in srgb, var(--sp-bernstein) 16%, var(--sp-flaeche)); border: 1px solid var(--sp-rahmen); color: var(--sp-tinte); }
html[data-app-stil="steampunk"] .mbx-ticket-nr { background: var(--sp-patina); color: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sp-glanz) 60%, transparent); }

html[data-app-stil="steampunk"] .tp-plakette.zu { background: var(--sp-kupfer); color: #fff; box-shadow: 0 0 6px color-mix(in srgb, var(--sp-kupfer) 60%, transparent); }
html[data-app-stil="steampunk"] .tp-zoom { background: color-mix(in srgb, var(--sp-bernstein) 7%, transparent); border-color: color-mix(in srgb, var(--sp-bernstein) 45%, transparent); }
html[data-app-stil="steampunk"] .prj-eintrag { border-color: var(--sp-rahmen); background: var(--sp-flaeche); }
html[data-app-stil="steampunk"] .prj-eintrag.aktiv { border-left-color: var(--sp-messing); background: color-mix(in srgb, var(--sp-bernstein) 14%, var(--sp-flaeche)); box-shadow: var(--sp-schatten); }
html[data-app-stil="steampunk"] .prj-zahl { background: var(--sp-kupfer); }
html[data-app-stil="steampunk"] .prj-bereich { border-color: var(--sp-rahmen); color: var(--sp-tinte); font-family: var(--sp-font-text); }
html[data-app-stil="steampunk"] .prj-bereich.aktiv { background: linear-gradient(180deg, var(--sp-glanz), var(--sp-messing)); border-color: var(--sp-messing); color: #1c160f; box-shadow: var(--sp-schatten); }
html[data-app-stil="steampunk"] .prj-bereich.aktiv .prj-zahl { background: #1c160f; color: var(--sp-glanz); }
html[data-app-stil="steampunk"] .prj-unterliste { border-left-color: var(--sp-rahmen); }
html[data-app-stil="steampunk"] .prj-unter-name, html[data-app-stil="steampunk"] .prj-unter-neu { font-family: var(--sp-font-text); color: var(--sp-tinte); }
html[data-app-stil="steampunk"] .prj-unter.aktiv { background: color-mix(in srgb, var(--sp-bernstein) 14%, var(--sp-flaeche)); box-shadow: inset 3px 0 0 var(--sp-messing); }
html[data-app-stil="steampunk"] .prj-unter-neu { border-color: var(--sp-rahmen); }
html[data-app-stil="steampunk"] .prj-zahnrad, html[data-app-stil="steampunk"] .prj-pfeil { color: var(--sp-messing); }
html[data-app-stil="steampunk"] .prj-gruppe-titel { font-family: var(--sp-font-display); letter-spacing: .06em; color: var(--sp-messing); border-color: var(--sp-rahmen); }
/* Notizen im Messingwerk: Messing statt Apple-Gelb */
html[data-app-stil="steampunk"] .nz { border-color: var(--sp-rahmen); background: var(--sp-flaeche); box-shadow: var(--sp-schatten); }
html[data-app-stil="steampunk"] .nz-ordner { background: var(--sp-flaeche-2); border-color: var(--sp-rahmen); }
html[data-app-stil="steampunk"] .nz-liste, html[data-app-stil="steampunk"] .nz-liste-kopf, html[data-app-stil="steampunk"] .nz-editor-kopf { border-color: var(--sp-rahmen); }
html[data-app-stil="steampunk"] .nz-ordner-eintrag.aktiv, html[data-app-stil="steampunk"] .nz-eintrag.aktiv { background: linear-gradient(180deg, var(--sp-glanz), var(--sp-messing)); color: #1c160f; }
html[data-app-stil="steampunk"] .nz-ordner-eintrag .rzi, html[data-app-stil="steampunk"] .nz-neu .rzi { color: var(--sp-messing); }
html[data-app-stil="steampunk"] .nz-liste-titel, html[data-app-stil="steampunk"] .nz-spalten-titel { font-family: var(--sp-font-display); color: var(--sp-messing); opacity: 1; }
html[data-app-stil="steampunk"] ul.nz-check > li.erledigt::before { background: var(--sp-messing); border-color: var(--sp-glanz); }
html[data-app-stil="steampunk"] .nz-editor .rz-html-editor-content > :first-child { font-family: var(--sp-font-display); color: var(--sp-messing); }
html[data-app-stil="steampunk"] .tkd-empf { border-color: var(--sp-rahmen); background: var(--sp-flaeche); }
html[data-app-stil="steampunk"] .tkd-chip { background: color-mix(in srgb, var(--sp-bernstein) 18%, var(--sp-flaeche)); border: 1px solid var(--sp-rahmen); }
html[data-app-stil="steampunk"] .tkd-chip.kontakt { background: color-mix(in srgb, var(--sp-patina) 18%, var(--sp-flaeche)); }

/* ───────── Ladebildschirm „Messingwerk“ (index.html, vor dem Start der App) ───────── */
.app-laden-messing { display: none; }
html[data-app-stil="steampunk"] .app-laden-klassisch { display: none; }
html[data-app-stil="steampunk"] .app-laden-messing {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
    min-height: 100vh; min-height: 100dvh; padding: 1rem; box-sizing: border-box; overflow: hidden;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--sp-bernstein) 12%, transparent), transparent 60%);
}
.ml-buehne { position: relative; width: min(300px, 70vw); aspect-ratio: 1; }
.ml-uhr { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); }
.ml-ring { fill: none; stroke: #5a4321; stroke-width: 3; }
.ml-blatt { fill: var(--sp-zifferblatt, #f6ecd6); stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.ml-rohr { fill: #8a6424; stroke: #4d3814; stroke-width: 1.5; }
.ml-bogen-grund { fill: none; stroke: color-mix(in srgb, var(--sp-tinte) 15%, transparent); stroke-width: 6; stroke-linecap: round; }
.ml-bogen { fill: none; stroke: var(--sp-bernstein, #d98a1c); stroke-width: 6; stroke-linecap: round;
            stroke-dasharray: calc(var(--sp-lade-wert, 0) * 1) 100; transition: stroke-dasharray .35s ease-out;
            filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sp-bernstein, #d98a1c) 70%, transparent)); }
.ml-strich { stroke: var(--sp-tinte, #2b2118); stroke-width: 1; opacity: .6; }
.ml-strich-gross { stroke: var(--sp-tinte, #2b2118); stroke-width: 2.4; }
.ml-zahl { font: 600 10px var(--sp-font-text, sans-serif); fill: var(--sp-tinte, #2b2118); text-anchor: middle; }
.ml-einheit { font: 700 8px var(--sp-font-display, serif); letter-spacing: .18em; fill: var(--sp-messing, #8a6424); text-anchor: middle; }
.ml-zeiger { transform-origin: 100px 100px; transform: rotate(var(--sp-lade-grad, -120deg));
             transition: transform .45s cubic-bezier(.3, 1.7, .45, 1); } /* federt etwas nach – wie eine echte Nadel */
.ml-zeiger polygon { fill: var(--sp-signal, #a8321f); filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35)); }
.ml-nabe-uhr { stroke: #4d3814; stroke-width: 1.5; }

.ml-zahnrad { position: absolute; z-index: 0; }
.ml-zahnrad .ml-zaehne { fill: none; stroke: #8a6424; stroke-width: 12; stroke-dasharray: .5 .5; }
.ml-zahnrad .ml-scheibe { fill: #b08a45; stroke: #5a4321; stroke-width: 2; }
.ml-zahnrad .ml-nabe { fill: #5a4321; }
.ml-z1 { width: 62%; left: -34%; top: 2%; animation: ml-drehen 9s linear infinite; }
.ml-z2 { width: 44%; right: -24%; top: 48%; animation: ml-drehen 6s linear infinite reverse; }
.ml-z3 { width: 30%; left: -6%; bottom: -14%; animation: ml-drehen 4.5s linear infinite reverse; }
@keyframes ml-drehen { to { transform: rotate(360deg); } }

.ml-dampf { position: absolute; left: 50%; top: -4%; width: 0; height: 0; z-index: 2; }
.ml-dampf span { position: absolute; left: -14px; top: 0; width: 28px; height: 28px; border-radius: 50%;
                 background: radial-gradient(circle, rgba(240, 236, 228, .75), rgba(240, 236, 228, 0) 70%);
                 animation: ml-dampf 3s ease-out infinite; opacity: 0; }
.ml-dampf span:nth-child(2) { animation-delay: 1s; }
.ml-dampf span:nth-child(3) { animation-delay: 2s; }
@keyframes ml-dampf {
    0% { transform: translate(0, 0) scale(.4); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: translate(18px, -90px) scale(2.4); opacity: 0; }
}

.ml-text { margin-top: 25px; font-family: var(--sp-font-display, serif); letter-spacing: .08em; color: var(--sp-tinte, #2b2118); font-size: 1.05rem; text-align: center; }
.ml-prozent { font-family: "IBM Plex Mono", monospace; color: var(--sp-messing, #8a6424); margin-left: .4rem; }
html[data-app-stil="steampunk"][data-bs-theme="dark"] .ml-text { color: var(--sp-kopf-text, #ecdcb9); }

@media (prefers-reduced-motion: reduce) {
    .ml-zahnrad, .ml-dampf span { animation: none; }
    .ml-zeiger, .ml-bogen { transition: none; }
}


/* Tagesplan: Einträge ohne feste Zeit (als Chips im Seitenteil) */
.tp-ohnezeit-liste { margin-bottom: .5rem; }
.tp-ohnezeit-titel { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .75; display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.tp-ohnezeit-titel .rzi { font-size: 1rem; }
.tp-ohnezeit-chip { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; cursor: pointer; margin-bottom: 3px;
                    border: 1px solid var(--rz-border-color, #ccc); border-left-width: 4px; background: var(--rz-base-background-color, #fff); }
.tp-ohnezeit-chip:hover { box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.tp-ohnezeit-chip.taetigkeit { border-left-color: var(--rz-primary, #1976d2); }
.tp-ohnezeit-chip.pause { border-left-color: var(--rz-secondary, #e65100); }
.tp-ohnezeit-chip.frei { border-left-color: var(--rz-info, #0288d1); }
.tp-ohnezeit-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
label.tp-ohnezeit { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; white-space: nowrap; }
/* Outlook-Termin-Zeit in der Zeitleiste kräftiger (gut lesbar) */
.tp-termin .tp-block-zeit { font-weight: 700; opacity: 1; }

/* ── Tagesplan: Wochenansicht (TagesplanWoche.razor) ── */
.tp-ansicht-wahl { display: inline-flex; gap: 2px; margin-left: .5rem; }
.tpw { position: relative; border: 1px solid var(--rz-border-color, #dee2e6); border-radius: 8px; background: var(--rz-base-background-color, #fff); }
.tpw-laedt { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding-top: 4rem; gap: .5rem;
             background: color-mix(in srgb, var(--rz-base-background-color, #fff) 65%, transparent); }
.tpw-kopf { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr));
            background: var(--rz-base-background-color, #fff); border-bottom: 1px solid var(--rz-border-color, #dee2e6); border-radius: 8px 8px 0 0; }
.tpw-ecke { padding: 6px; font: 600 .72rem "IBM Plex Mono", ui-monospace, monospace; opacity: .7; }
.tpw-tagkopf { padding: 4px 6px; border-left: 1px solid var(--rz-border-color, #dee2e6); cursor: pointer; min-width: 0; }
.tpw-tagkopf:hover { background: color-mix(in srgb, var(--rz-primary, #1976d2) 8%, transparent); }
.tpw-tagkopf.heute { background: color-mix(in srgb, var(--rz-primary, #1976d2) 12%, transparent); }
.tpw-tagkopf.heute .tpw-tagname { color: var(--rz-primary, #1976d2); }
.tpw-tagkopf.wochenende, .tpw-spalte.wochenende { background-color: color-mix(in srgb, currentColor 3%, transparent); }
.tpw-tagname { font-weight: 700; font-size: .85rem; }
.tpw-tagsumme { font-size: .7rem; opacity: .7; min-height: 1em; }
.tpw-chip { margin-top: 2px; padding: 0 5px; border-radius: 4px; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            background: color-mix(in srgb, var(--rz-primary, #1976d2) 12%, transparent); }
.tpw-chip.termin { background: color-mix(in srgb, var(--rz-info, #0288d1) 18%, transparent); }
.tpw-raster { position: relative; display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr)); }
.tpw-lineal { position: relative; border-right: 1px solid var(--rz-border-color, #dee2e6); }
.tpw-spalte { position: relative; border-left: 1px solid var(--rz-border-color, #dee2e6); min-width: 0; }
.tpw-spalte.heute { background: color-mix(in srgb, var(--rz-primary, #1976d2) 4%, transparent); }
.tpw-band { position: absolute; left: 0; right: 0; z-index: 0; background: color-mix(in srgb, var(--rz-success, #2e7d32) 10%, transparent); pointer-events: none; }
.tpw-band.pause { background: repeating-linear-gradient(45deg, color-mix(in srgb, currentColor 10%, transparent) 0 4px, transparent 4px 8px); }
.tpw-kachel { position: absolute; z-index: 2; padding: 1px 4px; border-radius: 5px; overflow: hidden; cursor: pointer; font-size: .7rem; line-height: 1.2;
              background: color-mix(in srgb, var(--rz-primary, #1976d2) 16%, var(--rz-base-background-color, #fff)); border-left: 3px solid var(--rz-primary, #1976d2); }
.tpw-kachel:hover { z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.tpw-kachel.termin { background: color-mix(in srgb, var(--rz-info, #0288d1) 14%, var(--rz-base-background-color, #fff)); border-left-color: var(--rz-info, #0288d1); }
.tpw-kachel.frei { background: color-mix(in srgb, var(--rz-warning, #f9a825) 16%, var(--rz-base-background-color, #fff)); border-left-color: var(--rz-warning, #f9a825); }
.tpw-kachel.erledigt { opacity: .6; text-decoration: line-through; }
.tpw-zeit { font: 600 .66rem "IBM Plex Mono", ui-monospace, monospace; opacity: .75; }
@media (max-width: 900px) { .tpw-kopf, .tpw-raster { grid-template-columns: 40px repeat(7, minmax(70px, 1fr)); } .tpw { overflow-x: auto; } }