/* Marke – gemeinsam für Login, Ersteinrichtung und Anwendung:
   Wortmarke, Claim, gestapelter Markenblock mit Illustration und das
   Lade-Overlay, das beim Laden jeder Seite eingeblendet wird.
   Farben kommen aus den :root-Tokens der jeweiligen Seite (CI-Palette). */

.wm { font-weight: 800; font-size: 22px; line-height: 1.05; letter-spacing: -.02em; color: var(--text); }
.wm .k { color: var(--text); }
.wm .t {
  color: var(--primary);
  background: linear-gradient(90deg, #1677ff, #7c5cff, #ff9f1c);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Fallback: ohne background-clip:text bleibt "Tool" sichtbar (--primary) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .wm .t { color: transparent; } }
.claim { margin-top: 3px; text-transform: uppercase; letter-spacing: .16em; font-size: 9.5px; font-weight: 600; color: var(--muted); }

/* Markenblock auf Login/Setup: Illustration zentriert ÜBER der Wortmarke. */
.brand-stapel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 20px; }
.brand-stapel .marke-illu { width: min(250px, 80%); height: auto; display: block; margin-bottom: 6px; }

/* Lade-Overlay: liegt beim Seitenaufbau über allem, blendet sich nach dem
   Laden aus (frontend/ladeoverlay.js). Ohne Skript verschwindet es durch den
   Failsafe dort; ohne JavaScript insgesamt wird es per <noscript> verborgen. */
.lade-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #f4f6fa);
  opacity: 1; transition: opacity .3s ease;
}
.lade-overlay.aus { opacity: 0; pointer-events: none; }
.lade-inhalt {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 24px;
  animation: lade-auftritt .45s ease-out both;
}
.lade-illu { width: min(340px, 72vw); height: auto; display: block; margin-bottom: 8px; filter: drop-shadow(0 12px 28px rgba(15, 23, 42, .10)); }
.lade-overlay .wm { font-size: 26px; }
.lade-balken { width: min(220px, 50vw); height: 4px; margin-top: 18px; border-radius: 999px; background: var(--line, #e5e7eb); overflow: hidden; }
.lade-balken span {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, #1677ff, #7c5cff, #ff9f1c);
  animation: lade-lauf 1.1s ease-in-out infinite;
}
@keyframes lade-auftritt { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lade-lauf { 0% { transform: translateX(-120%); } 100% { transform: translateX(280%); } }

@media (prefers-reduced-motion: reduce) {
  .lade-overlay { transition: none; }
  .lade-inhalt { animation: none; }
  .lade-balken span { animation: none; width: 100%; }
}
@media print { .lade-overlay { display: none; } }