/* Tekari Warte-Overlay – systemweit (CT101/CT100/CT103). Fester Tekari-Look
   (Blau #3b82f6 → Indigo #6366f1), unabhängig von der Tenant-Markenfarbe.
   Wird von overlay.js befüllt; kein Inline-Code (CSP-freundlich). */
.tk-ovl{
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:rgba(15,23,42,0.55);
    backdrop-filter:blur(6px) saturate(120%);
    -webkit-backdrop-filter:blur(6px) saturate(120%);
    opacity:0; animation:tk-in .22s ease forwards;
}
.tk-ovl.tk-out{ animation:tk-out .38s ease forwards; }

.tk-card{
    background:rgba(255,255,255,0.10);
    border:0.5px solid rgba(255,255,255,0.22);
    border-radius:20px; padding:30px 42px;
    display:flex; flex-direction:column; align-items:center; gap:16px;
    min-width:240px; max-width:84vw;
    box-shadow:0 10px 44px rgba(0,0,0,.38);
}
.tk-cap{ color:#fff; font-size:15px; font-weight:600; text-align:center; letter-spacing:.2px; }
.tk-sub{ color:rgba(255,255,255,.62); font-size:12px; text-align:center; }
.tk-btn{
    margin-top:6px; background:rgba(255,255,255,.14); color:#fff;
    border:0.5px solid rgba(255,255,255,.3); border-radius:10px;
    padding:8px 18px; font-size:13px; cursor:pointer;
}
.tk-btn:hover{ background:rgba(255,255,255,.24); }

.tk-ok{
    width:56px; height:56px; border-radius:50%; background:#16a34a;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:30px; line-height:1;
}

/* Tekari-Modals (alert/confirm/prompt) – ersetzen native Browser-Dialoge.
   Nutzen .tk-ovl (Glas-Backdrop) + .tk-card (Glas-Karte). */
.tk-modal{ align-items:stretch; gap:14px; max-width:440px; padding:26px 30px; }
.tk-modal .tk-cap{ font-size:16px; }
.tk-modal-msg{ color:rgba(255,255,255,.85); font-size:13.5px; line-height:1.5; text-align:center; white-space:pre-wrap; }
.tk-modal-input{
    width:100%; box-sizing:border-box; padding:9px 12px; border-radius:10px;
    border:0.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
    color:#fff; font-size:14px; outline:none;
}
.tk-modal-input:focus{ border-color:rgba(255,255,255,.5); }
.tk-modal-row{ display:flex; gap:10px; justify-content:center; margin-top:4px; }
.tk-modal-row .tk-btn{ margin-top:0; min-width:104px; text-align:center; }
.tk-btn-primary{ background:linear-gradient(135deg,#3b82f6,#6366f1); border-color:transparent; color:#fff; font-weight:600; }
.tk-btn-primary:hover{ filter:brightness(1.08); background:linear-gradient(135deg,#3b82f6,#6366f1); }
.tk-btn-danger{ background:linear-gradient(135deg,#ef4444,#dc2626); border-color:transparent; color:#fff; font-weight:600; }
.tk-btn-danger:hover{ filter:brightness(1.08); background:linear-gradient(135deg,#ef4444,#dc2626); }

@keyframes tk-in{ to{ opacity:1; } }
@keyframes tk-out{ to{ opacity:0; } }
/* ── Liquid-Orbiter (Goo-Tropfen) – REINES HTML, GPU-Compositor ──────────────
   4 Verlaufs-Tropfen kreisen (.tk-gorb → rotate) und atmen radial aus der Mitte
   raus/rein (.tk-gorb b → translateY), um den pulsierenden Kern (.tk-gcore →
   scale). Eine zweite Farbschicht je Tropfen (::after, Opacity-Crossfade) lässt
   die Farben durch Blau→Indigo→Violett→Pink-Lila wandern. Verschmelzen wie
   Wasser: blur+contrast direkt auf dem TRANSPARENTEN Container.
   KEIN schwarzer Teich + KEIN mix-blend-mode (2026-07-02 rausgeworfen):
   Blend bricht unter backdrop-filter-Vorfahren (.tk-ovl!) – Chrome zeigte
   Schleier/Glow-Ring, Safari live sogar SCHWARZ (nur Screenshots korrekt).
   Ohne Teich/Blend ist nirgends Schwarz im Spiel → garantiert transparent.
   WARUM HTML statt SVG (2026-07-02, NICHT zurückbauen!): Safari rendert
   SVG-Animationen auf dem Main-Thread und PAUSIERT sie während pending
   Navigation (Form-POST-Wartezeit) → Orbiter fror ein. transform/opacity auf
   HTML + basic-Filter laufen überall auf dem GPU-Compositor weiter (Trace-
   Beweis: SVG 1/60 Frames, HTML 60/60). Abgestimmt mit Andi (Variante B). */
.tk-goo{
    position:relative; width:100px; height:100px;
    filter:blur(4px) contrast(3.2) saturate(1.08);
}
.tk-gcore{
    position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
    border-radius:50%; overflow:hidden; display:block;
    background:radial-gradient(circle at 32% 28%, #85a9fa, #3b82f6);
    animation:tk-gcore 2.4s ease-in-out infinite; will-change:transform;
}
.tk-gorb{
    position:absolute; inset:0; display:block;
    animation:tk-gorbit 3.2s linear infinite; will-change:transform;
}
.tk-go2{ animation-delay:-0.80s; }
.tk-go3{ animation-delay:-1.60s; }
.tk-go4{ animation-delay:-2.40s; }
.tk-gorb b{
    position:absolute; left:50%; top:14px; width:15px; height:15px; margin-left:-7.5px;
    border-radius:50%; overflow:hidden; display:block;
    animation:tk-gbreathe 2.4s ease-in-out infinite; will-change:transform;
}
.tk-go2 b{ animation-delay:-0.60s; }
.tk-go3 b{ animation-delay:-1.20s; }
.tk-go4 b{ animation-delay:-1.80s; }
/* Zweite Farbschicht: weicher Crossfade = wandernde Tekari-Farben */
.tk-gcore::after, .tk-gorb b::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    opacity:0; animation:tk-gfade 3.6s ease-in-out infinite alternate;
    will-change:opacity;
}
.tk-gcore::after{ background:radial-gradient(circle at 32% 28%, #9a93f8, #6366f1); animation-delay:-1.2s; }
.tk-go1 b{ background:radial-gradient(circle at 32% 28%, #85a9fa, #3b82f6); }
.tk-go1 b::after{ background:radial-gradient(circle at 32% 28%, #9a93f8, #6366f1); }
.tk-go2 b{ background:radial-gradient(circle at 32% 28%, #8f97fa, #4f74f2); }
.tk-go2 b::after{ background:radial-gradient(circle at 32% 28%, #b193f9, #8b5cf6); animation-delay:-0.9s; }
.tk-go3 b{ background:radial-gradient(circle at 32% 28%, #9a93f8, #6366f1); }
.tk-go3 b::after{ background:radial-gradient(circle at 32% 28%, #c4a4f9, #a678f5); animation-delay:-1.8s; }
.tk-go4 b{ background:radial-gradient(circle at 32% 28%, #d9a1f7, #c96ef2); }
.tk-go4 b::after{ background:radial-gradient(circle at 32% 28%, #85a9fa, #3b82f6); animation-delay:-2.7s; }
@keyframes tk-gorbit{ to{ transform:rotate(360deg); } }
@keyframes tk-gbreathe{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(23px); } }
@keyframes tk-gcore{ 0%,100%{ transform:scale(0.82); } 50%{ transform:scale(1.15); } }
@keyframes tk-gfade{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
    /* Langsamer, aber NICHT aus – ein stehender Orbiter wirkt wie eingefroren
       (genau der Bug-Eindruck, den wir beheben). */
    .tk-gorb{ animation-duration:5s; }
    .tk-gorb b{ animation-duration:3.6s; }
    .tk-gcore{ animation-duration:3.6s; }
    .tk-gcore::after, .tk-gorb b::after{ animation-duration:5.4s; }
}


/* ═══════════════════════════════════════════════════════════
   Plattform-Banner (Info/Wartung) – diagonaler Verlauf, NAHTLOS.
   Verlauf liegt auf einer eigenen ::before-Ebene und wird per transform
   (GPU, butterweich) bewegt; exakt 1 Gradient-Periode pro Zyklus →
   kein Umkehren, kein Loop-Sprung. Farb-Morph via @property-Variablen.
   ═══════════════════════════════════════════════════════════ */
@property --bnr-a { syntax: "<color>"; inherits: true; initial-value: #1d4ed8; }
@property --bnr-b { syntax: "<color>"; inherits: true; initial-value: #4f46e5; }
@property --bnr-c { syntax: "<color>"; inherits: true; initial-value: #0ea5e9; }

/* ── Banner-Effekt v3 (2026-07-08, komplett neu) ─────────────────────────────
   Ziel: butterweich auf ALLEN Geräten inkl. Safari. Alles läuft NUR über
   transform/opacity (GPU-Compositing) – KEIN background-position, KEINE
   @property-Farb-Transition (beides ruckelte/„hängte" in Safari = alter Effekt). */
.tk-platform-banner {
    position: relative; z-index: 1;
    padding: 11px 22px;
    font-size: 0.93rem; line-height: 1.4;
    color: #fff; text-align: center;
    overflow: hidden;
    --bnr-a: #1d4ed8; --bnr-b: #4f46e5; --bnr-c: #0ea5e9;
    /* Statischer Level-Verlauf (Farbwechsel snappt – passiert selten, nur bei
       Level-Wechsel der Zeile). Kein animiertes Custom-Property mehr. */
    background: linear-gradient(102deg, var(--bnr-a), var(--bnr-b) 52%, var(--bnr-c));
    box-shadow: 0 2px 18px rgba(0,0,0,0.28);
    animation: tkBnrIn .55s cubic-bezier(.2,.85,.25,1) both;
}
/* Lebendigkeit 1 – sanft driftende „Aurora"-Lichter (nur transform). */
.tk-platform-banner::before {
    content: ""; position: absolute; inset: -70% -25%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(42% 60% at 22% 50%, rgba(255,255,255,0.20), transparent 62%),
        radial-gradient(38% 58% at 78% 42%, rgba(255,255,255,0.13), transparent 62%);
    animation: tkBnrAurora 13s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes tkBnrAurora {
    from { transform: translate3d(-5%, 0, 0) scale(1.06); }
    to   { transform: translate3d(5%, 0, 0)  scale(1.16); }
}
/* Lebendigkeit 2 – ein Glanz-Streif wandert rhythmisch durch (nur translateX). */
.tk-platform-banner::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
    z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22) 50%, transparent);
    transform: translateX(-170%);
    animation: tkBnrSheen 6.5s cubic-bezier(.45,0,.15,1) infinite;
    will-change: transform;
}
@keyframes tkBnrSheen {
    0%       { transform: translateX(-170%); }
    60%,100% { transform: translateX(360%); }
}
.tk-bnr--info     { --bnr-a:#1d4ed8; --bnr-b:#4f46e5; --bnr-c:#0ea5e9; }
.tk-bnr--warn     { --bnr-a:#b45309; --bnr-b:#f59e0b; --bnr-c:#fb923c; }
.tk-bnr--critical { --bnr-a:#b91c1c; --bnr-b:#e11d48; --bnr-c:#f43f5e; }
.tk-bnr-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; }
.tk-bnr-ic   { font-size: 1.05rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.tk-bnr-line { font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.22); }
@keyframes tkBnrIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tk-platform-banner, .tk-platform-banner::before, .tk-platform-banner::after { animation: none; }
}

/* ── Liquid-Glass-Fix bei offenem Popup (2026-07-28, Andi) ──────────────────
   Elemente mit EIGENEM backdrop-filter (Sidebar, Header, Karten, Buttons, Badges …)
   bilden einen eigenen Backdrop-Kontext und werden vom Overlay-backdrop-filter NICHT
   mitgeblurrt → hinter dem Popup blieben Sidebar/Header scharf, das Glas wirkte kaputt.
   Solange ein Modal offen ist (html.tk-modal-open wird von overlay.js gesetzt, sobald
   ein sichtbares .tk-ovl existiert – deckt overlay.js- UND Inline-Modals ab), wird der
   eigene backdrop-filter aller Seiten-Elemente neutralisiert, damit der Overlay-Blur sie
   gleichmäßig erfasst. Das Modal selbst (.tk-ovl + Inhalt) ist ausgenommen und behält
   sein Glas. */
html.tk-modal-open *:not(.tk-ovl):not(.tk-ovl *) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* ⚠️ NICHT view-transition-name strippen (2026-07-28 Bugfix): Das deferNav-Warte-Overlay
   ist ebenfalls ein .tk-ovl und setzt html.tk-modal-open – aber GENAU dann läuft die
   Cross-Document-View-Transition zur Zielseite. Nahm man Header/Sidebar/Main hier den
   view-transition-name weg, brach die Header-Transition und der echte Header blieb nach
   der Navigation versteckt (Seite „rutschte nach oben"), bis man manuell neu lud. Der
   Strip brachte fürs Glas-Feeling ohnehin nichts (view-transition-name ist ohne laufende
   Transition inert – die Isolierung macht allein die backdrop-filter-Neutralisierung oben). */