/* hero.css — D6 Terminal-Login (Rev. 4): Produkt-Anmeldebildschirm statt Landingpage.
   Hintergrund = HLS-Video (Original der Vorlage), umgefärbt auf Marineblau.
   Login-Formular direkt sichtbar (Liquid-Glass-Panel), keine Marketing-Elemente. */

/* ── Fonts (self-hosted, DSGVO/CSP: keine externen Requests) ─────────────── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;
  src:url('/static/fonts/inter-800.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/plusjakartasans-700.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;
  src:url('/static/fonts/playfairdisplay-400-italic.woff2') format('woff2')}

:root{
  --hero-bg:#070a12;    /* dunkles Marine-Schwarz */
  --acc:#2f549f;        /* Marineblau */
  --acc-soft:#3d67c2;   /* Hover-Aufhellung */
}

body{background:var(--hero-bg);color:#eef1f8;font-family:'Inter',system-ui,sans-serif;
  letter-spacing:-0.01em}
/* Handy: Gummiband-/Overscroll-Zittern beim Runterscrollen unterbinden beim Nutzer beobachtet. */
html,body{overscroll-behavior:none}

/* ── Bühne ───────────────────────────────────────────────────────────────── */
.hero{position:relative;height:100vh;height:100dvh;overflow:hidden;background:var(--hero-bg)}
/* Hintergrund-Video (HLS). Umfärbung Grün->Marineblau OHNE Reste: erst grayscale
   (entfernt jedes Grün), dann sepia als einheitliche Basis, dann Rotation auf Blau. */
#bgvid{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:.85;
  filter:grayscale(1) sepia(1) hue-rotate(185deg) saturate(2) contrast(1.15)}
/* A1: video.js entfernt das <video> nicht mehr (mobil wird das Video erzwungen),
   sondern setzt .bg-still auf den ELTERN — im App-Rahmen .app-bg, hier auf der Login-Buehne .hero.
   Ohne diese Regel bliebe ein nicht startendes Video sichtbar stehen und iOS/Android koennten ihr
   natives PLAY-Symbol mitten in den Hero zeichnen - genau der beobachtete Fall. Unsichtbar
   ist es hier genug: den Hintergrund tragen weiterhin --hero-bg, die beiden Shades und .hero-glow. */
.hero.bg-still #bgvid{opacity:0}
.hero-shade-l{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,var(--hero-bg) 12%,rgba(7,10,18,.5) 40%,transparent 70%)}
.hero-shade-b{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,var(--hero-bg) 4%,rgba(7,10,18,.6) 26%,transparent 55%)}
.hero-glow{position:absolute;z-index:2;pointer-events:none;left:50%;top:6%;
  width:70vw;height:26vh;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(64,104,190,.20),rgba(34,58,120,.08) 60%,transparent 100%);
  filter:blur(25px)}

/* ── Kopfzeile: nur die Wortmarke (App-Titelleiste, keine Navigation) ───────── */
.hnav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  padding:1.1rem 1.4rem}
.hnav-logo{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none}
.hnav-logo svg{display:block}
.hnav-word{font-family:'Playfair Display',serif;font-style:italic;font-size:1.35rem;color:#fff}

/* ── Login-Panel (direkt sichtbar, zentriert) ────────────────────────────── */
.login-wrap{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  padding:1rem}
.lcard{position:relative;width:min(92vw,390px);border-radius:16px;padding:2.1rem 2rem 1.6rem;
  background:rgba(10,14,24,.55);background-blend-mode:luminosity;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1),0 24px 80px rgba(0,0,0,.6)}
.lcard::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1.4px;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.05));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;pointer-events:none}
.lcard h2{margin:0 0 .4rem;font-size:1.35rem;font-weight:800;color:#fff;text-transform:uppercase;
  letter-spacing:-0.01em}
.lcard .lnote{margin:0 0 1.1rem;font-size:.83rem;color:rgba(255,255,255,.6);line-height:1.55}
.lcard label{display:block;margin:.75rem 0 .3rem;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.75)}
.lcard input{width:100%;padding:.6rem .7rem;background:rgba(10,14,24,.85);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#fff;font-size:.95rem;font-family:inherit}
.lcard input:focus{outline:none;border-color:var(--acc-soft)}
.lcard button{margin-top:1.3rem;width:100%;padding:.75rem;background:var(--acc);color:#fff;
  border:0;border-radius:999px;font-weight:700;font-size:.85rem;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;font-family:inherit;transition:background .18s}
.lcard button:hover{background:var(--acc-soft)}
.lcard .err{color:#ff8a8a;font-weight:600;font-size:.85rem;margin:.2rem 0 0}
/* Software-Signal: Versions-/Charakterzeile (statt Marketing-Copy) */
.lfoot{display:flex;justify-content:space-between;gap:1rem;margin:1.4rem 0 0;
  padding-top:.9rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:.72rem;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.lfoot span{white-space:nowrap}

/* ── Footer (Lizenz-Link bleibt erreichbar, dunkel gestylt) ──────────────── */
footer.lic{color:#78829b;border-top:1px solid rgba(255,255,255,.08)}
footer.lic a,footer.lic summary{color:#a7b0c7}

/* ── Handy — NUR mobil, Desktop unveraendert ───────────── */
@media (max-width:640px){
  /* „Das Logo soll oben bleiben und nicht mitkommen": position:fixed klebte es an den Viewport, es
     wanderte also beim Scrollen mit. absolute verankert es am SEITENANFANG — es scrollt sauber weg. */
  .hnav{position:absolute}
  /* „Vibriert beim Runterscrollen": 100dvh aendert sich, sobald die Browser-Adressleiste ein-/ausblendet
     -> die Buehne wird bei JEDEM Scroll neu hoch/runter gerechnet und zappelt. 100svh ist die KLEINE
     (stabile) Viewport-Hoehe und aendert sich dabei nicht. */
  .hero{height:100svh}
}

/* ── Einblendung (dezent, einmalig) ──────────────────────────────────────── */
@keyframes heroFadeUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}
.hero-anim{opacity:0;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.16,1,0.3,1);
  animation-name:heroFadeUp;animation-duration:.9s}
.d1{animation-delay:.1s}
@media (prefers-reduced-motion:reduce){.hero-anim{animation:none;opacity:1}}