/* ═══════════════════════════════════════════════════════════
   BETRIEBSPORTAL – Zentrales Stylesheet (Design 2026)
   Einbinden: <link rel="stylesheet" href="wolters.css">

   Neues Designsystem (Okt. 2026): neutrales Anthrazit, einstellbare
   Akzentfarbe je Firma (--akzent, gesetzt von wolters-theme.js aus den
   Einstellungen), Gold nur für Marke und wichtige Zahlen, Rot/Bernstein
   nur für Störung/Warnung. Hell/Dunkel über <html data-mode="hell">.
   Die alten Variablennamen (--gold, --blue, --border …) bleiben als
   Aliase erhalten, damit alle bestehenden Seiten mitziehen.
   ═══════════════════════════════════════════════════════════ */

/* ── Schriften: lokal unter fonts/ (auch ohne Internet), Aliase der alten Namen dort ── */
@import url("fonts/schriften.css");

/* ── Variablen: neues System (dunkel = Standard) ── */
:root {
    --akzent:        #c5a059;          /* je Firma, aus den Einstellungen */
    --akzent-rgb:    197,160,89;
    --gold-marke:    #d4a84b;          /* Marke, große Zahlen */
    --ok:            #5fb58a;
    --warn:          #f09a2b;
    --stoer:         #e5533d;
    --grund:         #151816;
    --flaeche:       #1d211e;
    --flaeche-2:     #252a26;
    --linie:         #323832;
    --text-1:        #e8ebe5;
    --text-2:        #a2aaa1;
    --text-3:        #6d766c;
    --feld:          rgba(255,255,255,0.04);
    --hauch-rgb:     255,255,255;      /* leichte Tönung auf Flächen */
    --f-display:     'Big Shoulders Display', 'IBM Plex Sans Condensed', sans-serif;
    --f-text:        'IBM Plex Sans', system-ui, sans-serif;
    --f-mono:        'IBM Plex Mono', ui-monospace, monospace;

    /* Alte Namen → neues System (alle Seiten ziehen mit) */
    --blue:          var(--grund);
    --blue-mid:      var(--flaeche);
    --blue-dark:     #0f1210;
    --gold:          var(--akzent);
    --gold-soft:     color-mix(in srgb, var(--akzent) 55%, var(--text-1));
    --gold-dim:      rgba(var(--akzent-rgb),0.14);
    --gold-glow:     rgba(var(--akzent-rgb),0.06);
    --green:         var(--ok);
    --yellow:        #e8b33b;
    --red:           var(--stoer);
    --orange:        var(--warn);
    --text:          var(--text-1);
    --text-dim:      var(--text-2);
    --border:        var(--linie);
    --border-hover:  rgba(var(--akzent-rgb),0.55);
    --surface:       var(--flaeche);
    --surface-hover: var(--flaeche-2);
    --wolters-blue:      var(--grund);
    --wolters-gold:      var(--akzent);
    --wolters-gold-soft: var(--gold-soft);
    --text-light:        var(--text-1);

    /* Abstände – 4er-Raster */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px;

    /* Radien & Elevation */
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
    --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px -12px rgba(0,0,0,.6);
    --shadow-2: 0 18px 40px -18px rgba(0,0,0,.7);
    --glow-gold: 0 0 0 1px var(--border-hover), 0 8px 24px -12px rgba(var(--akzent-rgb),.35);

    /* Motion */
    --t-fast: 140ms;
    --t-med:  220ms;
    --t-slow: 420ms;
    --ease-out:    cubic-bezier(.2,.7,.2,1);
    --ease-spring: cubic-bezier(.34,1.4,.44,1);

    --font-num: var(--f-mono);
    color-scheme: dark;
}

/* ── Hell (nur auf Seiten, die dafür freigegeben sind: <html data-mode="hell">) ── */
html[data-mode="hell"] {
    --grund:     #e7eae5;
    --flaeche:   #f6f7f3;
    --flaeche-2: #ffffff;
    --linie:     #d2d7cf;
    --text-1:    #1a1e1b;
    --text-2:    #4b544c;
    --text-3:    #7c867c;
    --gold-marke:#a5781c;
    --feld:      #ffffff;
    --hauch-rgb: 20,32,22;
    --blue-dark: #dfe3dc;
    --shadow-1: 0 6px 18px -14px rgba(30,40,30,.35);
    --shadow-2: 0 18px 40px -20px rgba(30,40,30,.35);
    color-scheme: light;
}

/* ── Reduced Motion: gesamtes Motion-System abschaltbar ── */
@media (prefers-reduced-motion: reduce) {
    :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
    /* Ausnahme: Lade-Indikatoren drehen weiter (Bewegung ist hier Information) */
    .w-btn .w-spinner,
    .w-loading::before {
        animation-duration: 1.2s !important;
        animation-iteration-count: infinite !important;
    }
    .w-skeleton::after {
        animation-duration: 2.4s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Body ── */
body {
    font-family: var(--f-text);
    font-size: 16px;
    line-height: 1.5;
    background: var(--grund);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── Wolters-Wappen als dezenter Marken-Hintergrund (zentral) ── */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: url('lib/wappen.png') no-repeat center 50%;
    background-size: min(680px, 72vw);
    opacity: 0.055;
}

/* Beim Drucken: Marken-Hintergrund unterdrücken (wie zuvor das Raster) */
@media print {
    body::after { display: none !important; }
    body { background: #fff !important; }
}

/* ── Topbar ── */
.topbar, .w-topbar {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--grund) 86%, transparent);
    border-bottom: 1px solid var(--linie);
    backdrop-filter: blur(12px);
    padding: 0 28px; height: 60px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 16px;
}
.topbar-left, .w-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right, .w-topbar-right { display: flex; align-items: center; gap: 10px; }

.brand-badge {
    background: var(--akzent); color: var(--grund);
    font-family: var(--f-display); font-weight: 800;
    font-size: 0.95rem; letter-spacing: 0.06em; line-height: 1;
    padding: 6px 9px 5px; border-radius: 8px; text-transform: uppercase;
    flex-shrink: 0; text-decoration: none;
}
.brand-name, .topbar-title {
    font-family: var(--f-text);
    font-size: 15px; font-weight: 600;
    letter-spacing: 0; text-transform: none;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-clock {
    font-family: var(--f-mono);
    font-size: 14px; color: var(--text-2); letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
/* Suche + Hell/Dunkel in der Kopfleiste (eingefügt von bp-suche.js) */
.bp-suche-knopf {
    display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
    border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche);
    color: var(--text-3); font: 400 14px var(--f-text); cursor: pointer; white-space: nowrap;
    transition: border-color var(--t-fast);
}
.bp-suche-knopf:hover { border-color: var(--text-3); }
.bp-suche-knopf kbd { font: 500 11px var(--f-mono); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--linie); color: var(--text-2); }
.bp-icon-knopf {
    width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0;
    border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-2); cursor: pointer;
}
.bp-icon-knopf:hover { border-color: var(--text-3); color: var(--text); }
@media (max-width: 760px) {
    .bp-suche-knopf span, .bp-suche-knopf kbd, .w-clock { display: none; }
    .topbar-right [id^="w-logininfo"] { display: none; }
}

/* ── Main Container ── */
.w-main, .w-page {
    position: relative; z-index: 1;
    max-width: 1320px; margin: 0 auto;
    padding: 28px 28px 60px;
}

/* ── Section Title ── */
.section-title, .w-section-title {
    font-family: var(--f-mono);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--linie);
}

/* ── Cards / Panels ── */
.w-card {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--r-lg);
    padding: 20px;
    isolation: isolate;
    box-shadow: var(--shadow-1);
    transition: border-color var(--t-med);
}
.w-card:hover {
    border-color: color-mix(in srgb, var(--linie) 50%, var(--text-3));
}

/* ── Buttons ── */
.w-btn {
    font-family: var(--f-text);
    font-size: 14px; font-weight: 500;
    letter-spacing: 0; text-transform: none;
    padding: 9px 16px; border-radius: 10px;
    cursor: pointer; border: 1px solid;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
    display: inline-flex; align-items: center; gap: 8px;
}
.w-btn:active { transform: scale(0.98); }
.w-btn-gold {
    background: var(--akzent); color: var(--grund);
    border-color: var(--akzent);
}
.w-btn-gold:hover { background: color-mix(in srgb, var(--akzent) 86%, var(--text-1)); }

.w-btn-outline {
    background: var(--flaeche); color: var(--text);
    border-color: var(--linie);
}
.w-btn-outline:hover { border-color: var(--akzent); background: var(--gold-dim); }

.w-btn-ghost {
    background: transparent; color: var(--text-2);
    border-color: var(--linie);
}
.w-btn-ghost:hover { color: var(--text); border-color: var(--text-3); }

.w-btn-danger {
    background: transparent; color: var(--stoer);
    border-color: color-mix(in srgb, var(--stoer) 40%, transparent);
}
.w-btn-danger:hover { background: var(--stoer); color: #fff; border-color: var(--stoer); }

.w-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Back-Link */
.back-link, .w-back {
    font-family: var(--f-text);
    font-size: 13px; font-weight: 500; letter-spacing: 0;
    text-transform: none; text-decoration: none; white-space: nowrap;
    color: var(--text-2); border: 1px solid var(--linie); background: var(--flaeche);
    height: 36px; display: inline-flex; align-items: center;
    padding: 0 12px; border-radius: 10px; transition: border-color var(--t-fast), color var(--t-fast);
}
.back-link:hover, .w-back:hover { color: var(--text); border-color: var(--text-3); }

/* ── Formulare ── */
.w-form-group { display: flex; flex-direction: column; gap: 6px; }

.w-label, .lbl {
    font-family: var(--f-text);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.01em; text-transform: none;
    color: var(--text-2);
}

.w-input, .w-select, .w-textarea,
input[type=text].w-input,
input[type=password].w-input,
input[type=date].w-input,
input[type=number].w-input,
select.w-select,
textarea.w-textarea {
    background: var(--feld);
    border: 1px solid var(--linie);
    border-radius: 10px; color: var(--text);
    padding: 10px 14px; width: 100%;
    font-size: 15px; font-family: var(--f-text);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.w-input:focus, .w-select:focus, .w-textarea:focus {
    outline: none; border-color: var(--akzent);
    box-shadow: 0 0 0 3px rgba(var(--akzent-rgb),0.18);
}
.w-input.error, .w-select.error { border-color: var(--stoer); }
select.w-select option { background: var(--flaeche); }
textarea.w-textarea { resize: vertical; min-height: 80px; }

/* Large input (z.B. Artikelnummer-Suche) */
.w-input-lg {
    padding: 13px 16px;
    font-family: var(--f-mono);
    font-size: 1.35rem; font-weight: 500; letter-spacing: 0.02em;
}

/* ── Tabellen ── */
.w-table-wrap {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--r-lg); overflow: hidden;
}
.w-table { width: 100%; border-collapse: collapse; }
.w-table th {
    font-family: var(--f-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-3); padding: 10px 16px; text-align: left;
    border-bottom: 1px solid var(--linie);
    background: transparent;
}
.w-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--linie);
    font-size: 14px; vertical-align: middle;
}
.w-table tr:last-child td { border-bottom: none; }
.w-table tr:hover td { background: var(--flaeche-2); }

/* ── Badges / Pills ── */
.w-badge {
    font-family: var(--f-text);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0; text-transform: none;
    padding: 2px 9px; border-radius: 99px; display: inline-block;
    background: var(--gold-dim); border: 1px solid transparent;
    color: var(--text);
}
.w-badge-green  { background: color-mix(in srgb, var(--ok) 16%, transparent);    color: var(--ok); }
.w-badge-yellow { background: color-mix(in srgb, var(--yellow) 16%, transparent); color: var(--yellow); }
.w-badge-red    { background: color-mix(in srgb, var(--stoer) 16%, transparent); color: var(--stoer); }
.w-badge-gold   { background: var(--gold-dim); color: var(--akzent); }

/* ── Status-Bar ── */
.w-status-bar {
    display: flex; flex-wrap: wrap; gap: 16px;
    background: var(--flaeche); padding: 10px 18px;
    border-radius: var(--r-md); margin-bottom: 24px;
    border: 1px solid var(--linie);
}
.w-stat {
    font-family: var(--f-text);
    font-size: 13px; font-weight: 500;
    letter-spacing: 0; color: var(--text-2);
}
.w-stat.ok { color: var(--ok); }
.w-stat.err { color: var(--stoer); }

/* ── Tabs ── */
.w-tabs {
    display: flex; gap: 4px; margin-bottom: 20px;
    border-bottom: 1px solid var(--linie); padding-bottom: 0;
}
.w-tab {
    padding: 10px 16px; background: transparent; border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-2);
    font-family: var(--f-text);
    font-size: 14px; font-weight: 500; letter-spacing: 0;
    cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); margin-bottom: -1px;
    text-transform: none;
}
.w-tab:hover { color: var(--text); }
.w-tab.active { color: var(--text); border-bottom-color: var(--akzent); }

/* ── Warning Box ── */
.w-warning {
    padding: 12px 18px;
    font-family: var(--f-text);
    font-weight: 500; font-size: 15px; letter-spacing: 0;
    text-align: center; color: var(--text);
    background: color-mix(in srgb, var(--warn) 16%, var(--flaeche));
    border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--r-md);
}

/* ── Live Dot ── */
.w-live-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--ok); color: var(--ok);
    animation: wDotAtmen 2.4s ease-out infinite;
    flex-shrink: 0;
}
.w-live-dot.alarm { background: var(--stoer); color: var(--stoer); animation-duration: 1s; }
@keyframes wDotAtmen { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 7px transparent; } }

/* ── Toast ── */
.w-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.85); border: 1px solid var(--border);
    color: var(--text); padding: 10px 24px; border-radius: 8px;
    font-size: 0.88rem; z-index: 9999;
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
    font-family: 'Barlow', sans-serif;
    backdrop-filter: blur(8px);
}
.w-toast.show { opacity: 1; }

/* ── Empty State ── */
.w-empty {
    text-align: center; padding: 40px 20px;
    color: var(--text-dim); font-size: 0.88rem;
    border: 1px dashed var(--border); border-radius: 10px;
}

/* ── Zahlen / Messwerte ── */
/* Für alle KPIs, Zähler, Zeiten, Artikelnummern: monospace + tabellarische
   Ziffern, damit Live-Werte beim Aktualisieren nicht „zappeln". */
.w-num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* ── Responsive ── */
@media(max-width: 640px) {
    .topbar, .w-topbar { padding: 0 16px; }
    .w-main { padding: 16px 16px 40px; }
}

/* ═══════════════════════════════════════════════════════════
   MOTION-BAUSTEINE v2 (Leitwarte 2.0 · Konzept D2)
   Additiv – ändert nichts Bestehendes. Alle Klassen nutzen die
   Motion-Tokens und werden über den prefers-reduced-motion-Block
   (oben in :root) automatisch stillgelegt. Nur transform/opacity.
   ═══════════════════════════════════════════════════════════ */

/* ── Kaskaden-Einstieg: .w-reveal + style="--i:n" ── */
.w-reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: wReveal var(--t-slow) var(--ease-out) forwards;
    animation-delay: calc(min(var(--i, 0), 10) * 45ms);
}
@keyframes wReveal { to { opacity: 1; transform: none; } }

/* ── Live-Wert-Aktualisierung: kurzer Gold-Flash ── */
.w-tick { animation: wTick 350ms var(--ease-out); }
@keyframes wTick {
    0%   { color: var(--akzent); text-shadow: 0 0 14px rgba(var(--akzent-rgb),0.45); }
    100% { color: inherit; text-shadow: none; }
}

/* ── Aufmerksamkeits-Puls (einmalig, bei Verschlechterung) ── */
.w-alertpulse { animation: wAlert 500ms var(--ease-spring); }
@keyframes wAlert {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* ── Fehler-Shake (Formular/PIN) ── */
.w-shake { animation: wShake 400ms; }
@keyframes wShake {
    0%,100%   { transform: translateX(0); }
    20%,60%   { transform: translateX(-7px); }
    40%,80%   { transform: translateX(7px); }
}

/* ── Skeletons (Ladeplatzhalter) ── */
.w-skeleton {
    position: relative; overflow: hidden;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,0.05);
}
.w-skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--akzent-rgb),0.10), transparent);
    transform: translateX(-100%);
    animation: wShimmer 1.4s infinite;
}
@keyframes wShimmer { to { transform: translateX(100%); } }
.w-skel-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s4); background: var(--surface); }
.w-skel-line { height: 12px; margin-bottom: 10px; }
.w-skel-line.w40 { width: 40%; }
.w-skel-line.w60 { width: 60%; }
.w-skel-line.w80 { width: 80%; }
.w-skel-num  { height: 34px; width: 55%; margin-bottom: 12px; }
.w-skel-row td { padding: 10px var(--s3); border-bottom: 1px solid var(--border); }
.w-skel-row:hover td { background: none; }

/* ── Speichern-Button-Zustand ── */
.w-btn .w-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(21,24,22,0.3); border-top-color: var(--blue);
    border-radius: 50%; animation: wSpin 0.7s linear infinite;
    display: inline-block;
}
@keyframes wSpin { to { transform: rotate(360deg); } }
.w-btn.w-done { background: var(--green); border-color: var(--green); color: #fff; }
.w-btn .w-check { display: inline-block; animation: wPop 400ms var(--ease-spring); }
@keyframes wPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

/* ── Busy / Mehrfachklick-Sperre (zentral, für WOLTERS.withBusy/speichernMit) ──
   Jedes Element mit [data-busy] ist gesperrt: matt, nicht klickbar. Gilt
   portalweit, unabhängig von der Seite. Die Sperre IST die Funktion,
   die Animation nur ihr sichtbarer Beweis. */
[data-busy], .w-btn[aria-busy="true"] {
    cursor: not-allowed; opacity: 0.85; pointer-events: none;
}
.w-btn[aria-busy="true"] { filter: none; }

/* w-loading: Spinner links vor dem Text, ohne Breitensprung.
   Für Öffnen-/Navigations-Buttons, die kein Häkchen-Feedback brauchen. */
.w-loading { position: relative; pointer-events: none; }
.w-loading::before {
    content: ''; width: 14px; height: 14px;
    display: inline-block; vertical-align: -2px; margin-right: 8px;
    border: 2px solid rgba(var(--akzent-rgb),0.25); border-top-color: currentColor;
    border-radius: 50%; animation: wSpin 0.7s linear infinite;
}
.w-btn-gold.w-loading::before { border-color: rgba(21,24,22,0.3); border-top-color: var(--blue); }

/* ── Toast v2 (neue Struktur, eigene Klassen – ändert .w-toast NICHT) ── */
.w-toast-wrap {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; flex-direction: column; gap: 10px; align-items: center;
    pointer-events: none;
}
.w-toast-item {
    background: var(--flaeche-2); border: 1px solid var(--linie);
    border-radius: var(--r-md); padding: 12px 20px; box-shadow: var(--shadow-2);
    display: flex; align-items: center; gap: 10px; font-size: 0.9rem;
    font-family: var(--f-text); color: var(--text);
    pointer-events: auto;
    animation: wToastIn var(--t-med) var(--ease-out);
}
.w-toast-item.w-raus { animation: wToastOut var(--t-fast) ease-in forwards; }
.w-toast-item .w-t-ico { font-weight: 700; animation: wPop 400ms var(--ease-spring); }
.w-toast-item.ok   { border-color: rgba(39,174,96,0.5); }
.w-toast-item.ok   .w-t-ico { color: var(--green); }
.w-toast-item.err  { border-color: rgba(231,76,60,0.5); }
.w-toast-item.err  .w-t-ico { color: var(--red); }
.w-toast-item.info .w-t-ico { color: var(--gold-soft); }
@keyframes wToastIn  { from { opacity: 0; transform: translateY(16px); } }
@keyframes wToastOut { to   { opacity: 0; transform: translateY(10px); } }

/* ── Fokus-Boden (global) ── */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }

/* ═══════════════════════════════════════════════════════════
   THEME AHLERS – Farbüberschreibung via <html data-theme="ahlers">
   Aktiviert durch wolters-theme.js (zentrale systemconfig-Einstellung).
   Ohne Attribut bleibt alles beim Wolters-Standard (Navy/Gold).
   Struktur/Layout/Motion bleiben identisch – nur Farben + Logo wechseln.
   ═══════════════════════════════════════════════════════════ */
html[data-theme="ahlers"] {
    --blue:          #0d2b45;   /* Ahlers-Marineblau */
    --blue-mid:      #0f3050;
    --blue-dark:     #071a2b;

    --gold:          #c1121f;   /* Ahlers-Rot (gedämpft), ersetzt Gold als Akzent */
    --gold-soft:     #e8636b;
    --gold-dim:      rgba(193,18,31,0.12);
    --gold-glow:     rgba(193,18,31,0.06);

    --border:        rgba(255,255,255,0.14);
    --border-hover:  rgba(193,18,31,0.55);

    /* Kompatibilitäts-Aliase mitziehen */
    --wolters-blue:  #071a2b;
    --wolters-gold:  #c1121f;
    --wolters-gold-soft: #e8636b;

    --glow-gold:     0 0 0 1px var(--border-hover), 0 4px 20px rgba(193,18,31,0.10);
    /* Status grün/gelb/rot bleiben unverändert (universelle Bedeutung) */
}

/* Wolters-Wappen im Ahlers-Theme ausblenden (passt markentechnisch nicht) */
html[data-theme="ahlers"] body::after { display: none !important; }

/* HBW-Badge im Ahlers-Theme ausblenden – dort zeigt die Topbar das Ahlers-Logo.
   (Seiten mit Ahlers-Logo-Element blenden dieses per .ahlers-only ein.) */
html[data-theme="ahlers"] .brand-badge { display: none; }

/* Logo-Umschaltung: .wolters-only / .ahlers-only steuern Sichtbarkeit je Theme */
.ahlers-only { display: none; }
html[data-theme="ahlers"] .ahlers-only { display: inline-flex; }
html[data-theme="ahlers"] .wolters-only { display: none; }

/* ═══════════════════════════════════════════════════════════
   BEAMER-/PRÄSENTATIONSMODUS – Kontrast/Lesbarkeit anheben
   Aktivierung: <html data-beamer> (gesetzt durch wolters-core.js,
   gerätelokal via localStorage, Umschalten mit Taste F9).
   Hebt nur Kontrast + Linienstärke an – Layout, Schriftgrößen und
   Farb-Bedeutung (grün/gelb/rot) bleiben unverändert.
   Kombinierbar mit data-theme="ahlers" (zwei getrennte Attribute).
   ═══════════════════════════════════════════════════════════ */
html[data-beamer] {
    --text-dim:      #aebfd0;   /* war #6b7f96 (Kontrast 4.1) -> ~9.0 */
    --border:        rgba(var(--akzent-rgb),0.38);
    --border-hover:  rgba(var(--akzent-rgb),0.65);
    --surface:       rgba(255,255,255,0.06);
    --surface-hover: rgba(255,255,255,0.10);
}
html[data-theme="ahlers"][data-beamer] {
    --text-dim:      #b6c6d6;
    --border:        rgba(255,255,255,0.30);
    --border-hover:  rgba(193,18,31,0.70);
}

/* ═══════════════════════════════════════════════════════════
   Tank-Bläschen (aufsteigende Partikel in belegten Tank-Kacheln)
   ───────────────────────────────────────────────────────────
   Zentral, damit Gär- und Filterkeller dieselbe Optik ziehen.
   Träger-Kachel braucht: position:relative; overflow:hidden.
   Auslösen über Klasse .w-blasen an der Kachel + 3x <span class="w-blase">.
   Bedeutung ist seitenspezifisch:
     Gärkeller  = aktive Hauptgärung (Information)
     Filterkeller = belegter Tank / Restmenge (dekorativ)
   Nur transform/opacity animiert (GPU). Reduced-motion stoppt es. */
.w-blasen .w-blase {
    position: absolute; bottom: -8px; border-radius: 50%;
    background: rgba(var(--akzent-rgb),0.22); border: 1px solid rgba(var(--akzent-rgb),0.28);
    animation: wSteigt linear infinite; pointer-events: none; z-index: 0;
}
.w-blasen .w-blase:nth-child(1) { left: 18%; width: 6px; height: 6px; animation-duration: 5s; }
.w-blasen .w-blase:nth-child(2) { left: 52%; width: 9px; height: 9px; animation-duration: 7s; animation-delay: 1.6s; }
.w-blasen .w-blase:nth-child(3) { left: 78%; width: 5px; height: 5px; animation-duration: 6s; animation-delay: 3.1s; }
@keyframes wSteigt {
    0%   { transform: translateY(0);      opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translateY(-130px); opacity: 0; }
}
/* Inhalt der Kachel über den Bläschen halten */
.w-blasen > *:not(.w-blase) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    .w-blasen .w-blase { animation: none; opacity: 0; }  /* keine Bewegung -> ganz ausblenden */
}