/* 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; } }
@keyframes tk-rot{ to{ transform:rotate(360deg); } }
@keyframes tk-wob{
    0%,100%{ transform:scale(1,1); }
    20%{ transform:scale(1.07,.93); }
    45%{ transform:scale(.93,1.07); }
    70%{ transform:scale(1.04,.97); }
}
.tk-wob{ transform-origin:60px 60px; animation:tk-wob 2.7s ease-in-out infinite; }
.tk-spin{ transform-origin:60px 60px; animation:tk-rot 3.6s linear infinite; }

@media (prefers-reduced-motion: reduce){
    .tk-wob{ animation:none; }
    .tk-spin{ animation-duration:6s; }
}


/* ═══════════════════════════════════════════════════════════
   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; }

.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;
    background: var(--bnr-b);
    transition: --bnr-a .7s ease, --bnr-b .7s ease, --bnr-c .7s ease;
    box-shadow: 0 2px 18px rgba(0,0,0,0.28);
    animation: tkBnrIn .6s cubic-bezier(.2,.85,.25,1) both;
}
.tk-platform-banner::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0;
    width: calc(100% + 380px);
    background-image: repeating-linear-gradient(110deg,
        var(--bnr-a) 0, var(--bnr-b) 85px, var(--bnr-c) 170px, var(--bnr-b) 255px, var(--bnr-a) 340px);
    transform: translate3d(0, 0, 0);
    animation: tkBnrFlow 15s linear infinite;
    will-change: transform; z-index: 0;
}
@keyframes tkBnrFlow {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-362px, 0, 0); }   /* 340 / sin(110°) = nahtlose Periode */
}
.tk-platform-banner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
    background-size: 250% 100%;
    animation: tkBnrSheen 7s linear infinite;
}
@keyframes tkBnrSheen { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.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); clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; transform: translateY(0);     clip-path: inset(0 0 0% 0); }
}
@media (prefers-reduced-motion: reduce) {
    .tk-platform-banner, .tk-platform-banner::before, .tk-platform-banner::after { animation: none; }
    .tk-platform-banner { transition: none; }
}