/* kinux — Onboarding (Signup/Login) im Modal-Look als eigene Seite.
   Eigenstaendig, dunkel, markenkonsistent. Tabu-konform: kein Eyebrow,
   kein Punkt-Raster, keine Haarlinien-Trenner, kein Status-Punkt, keine Sidebars.
   Hintergrund = ruhige Markentiefe (Ambient-Glow), KEIN Produkt-Fake. */
:root{
  --bg:#070A12; --ink:#F2F6FC; --ink-2:#C7D2E5; --muted:#9AA7BD; --faint:#5B6880;
  --accent:#7AD4FF; --accent-ink:#03212E; --accent-hover:#A4E2FF;
  --border:#1A2436; --surface:#0E1626; --surface-2:#121B2D;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; position:relative; overflow-x:hidden;
  background:#070A12;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}

/* Ruhige Markentiefe statt Produkt-Fake.
   Drei weiche Ebenen: oberer Eisblau-Schein, gegenlaeufiger tiefer Glow,
   ganz dezente Vignette. Keine Formen, keine Linien. */
.ob-stage{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(140% 110% at 50% -8%, rgba(122,212,255,0.10) 0%, rgba(122,212,255,0.03) 26%, rgba(7,10,18,0) 52%),
    radial-gradient(120% 90% at 50% 116%, rgba(40,86,140,0.20) 0%, rgba(20,44,80,0.07) 40%, rgba(7,10,18,0) 70%),
    radial-gradient(125% 120% at 50% 0%, #0E1A30 0%, #0A1224 46%, #070A12 82%);}
.ob-stage::before{content:""; position:absolute; left:50%; top:-22vmax; width:78vmax; height:78vmax;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(122,212,255,0.14), rgba(122,212,255,0.04) 55%, rgba(7,10,18,0) 78%);
  filter:blur(8px); opacity:0.9; animation:ob-breathe 14s ease-in-out infinite;}
.ob-stage::after{content:""; position:absolute; inset:0;
  background:radial-gradient(125% 100% at 50% 42%, rgba(7,10,18,0) 38%, rgba(7,10,18,0.55) 100%);}
@keyframes ob-breathe{0%,100%{opacity:0.82; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-50%) scale(1.05);}}

/* Topbar: Home-Logo links + Zurueck-Weg */
/* Topbar links: Logo + Zurueck-Weg (beide links, konventionell, gut sichtbar) */
.ob-topbar{position:absolute; top:22px; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:flex-start; gap:24px; padding:0 34px;}

/* Marken-Logo IDENTISCH zur Startseite: gecroppte kinux-logo-weiss.png */
.logo-crop{position:relative; width:48px; height:52px; overflow:hidden; flex:none; display:block;}
.logo-crop img{position:absolute; width:93.8px; height:93.8px; left:-22.2px; top:-21.7px; max-width:none;}
.ob-home{display:inline-flex; align-items:center; text-decoration:none;}

/* Zurueck zur Startseite — GHOST-BUTTON (P2c, Owner-Kritik «winzige Links am
   Kartenende sind kaum sichtbar»): sichtbarer Rahmen + Padding + Radius,
   Hover-Aufhellung. IN der Karte, unten mittig, unter der Wechsel-Zeile.
   Gleiche Formensprache wie .kx-btn--ghost der Hauptseite. */
.ob-back{display:flex; width:fit-content; align-items:center; gap:8px; text-decoration:none; white-space:nowrap;
  margin:22px auto 0; padding:9px 16px; border:1px solid rgba(255,255,255,0.2); border-radius:11px;
  background:rgba(255,255,255,0.02); color:var(--ink-2); font-size:13.5px; font-weight:500;
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;}
.ob-back svg{flex:none; width:15px; height:15px; transition:transform .2s ease;}
.ob-back:hover{color:var(--ink); border-color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.05);}
.ob-back:hover svg{transform:translateX(-3px);}
.ob-back:active{transform:translateY(1px);}

/* zentrierte Karte */
.ob-main{flex:1; z-index:2; display:flex; align-items:center; justify-content:center; padding:104px 22px 36px; min-width:0;}
.ob-wrap{width:100%; max-width:436px; min-width:0; display:flex; flex-direction:column; align-items:center;
  animation:ob-rise .6s cubic-bezier(.2,.7,.2,1) both;}
@keyframes ob-rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.ob-card{position:relative; width:100%;
  background:linear-gradient(180deg,rgba(16,24,42,0.92),rgba(10,16,29,0.94));
  border:1px solid rgba(255,255,255,0.10); border-radius:22px; padding:38px 38px 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 40px 90px -34px rgba(0,0,0,0.78),
    0 0 0 1px rgba(122,212,255,0.04);
  -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%);
  text-align:center;}
/* feiner Lichtsaum oben auf der Karte */
.ob-card::before{content:""; position:absolute; left:18%; right:18%; top:-1px; height:1px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(122,212,255,0.55), transparent); opacity:0.7;}
.ob-h{margin:0; font-size:28px; font-weight:600; letter-spacing:-0.024em; line-height:1.08; overflow-wrap:break-word;}
.ob-sub{margin:11px 0 0; font-size:14.5px; color:var(--muted); line-height:1.5;}

/* SSO */
.sso{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:28px;}
.sso a{position:relative; display:flex; align-items:center; justify-content:center; gap:9px; padding:12px;
  border-radius:12px; border:1px solid rgba(255,255,255,0.13); background:rgba(255,255,255,0.025); color:var(--ink);
  font-size:14.5px; font-weight:500; text-decoration:none; overflow:hidden;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;}
.sso a:hover{border-color:rgba(255,255,255,0.32); background:rgba(255,255,255,0.06); transform:translateY(-1px);}
.sso a:active{transform:translateY(0);}
.sso svg{flex:none; width:17px; height:17px;}
.trenner{margin:22px 0 17px; color:var(--faint); font-size:12px; letter-spacing:0.01em;}

/* Feedback-Band über dem Formular (Fehler rot / Erfolg grün) — Rückführung vom
   Gateway (?fehler=/?ok=, _internal/onboarding-feedback.js). Gleiche Formsprache
   wie .feld: 12px-Radius, ruhige Flächen, links ausgerichtet. */
.ob-feedback{margin:20px 0 16px; padding:12px 15px; border-radius:12px;
  font-size:13.5px; line-height:1.55; text-align:left;}
.ob-feedback--fehler{background:rgba(255,120,120,0.08); border:1px solid rgba(255,120,120,0.32); color:#FFB4B4;}
.ob-feedback--ok{background:rgba(102,224,166,0.08); border:1px solid rgba(102,224,166,0.30); color:#A5EAC8;}
.ob-feedback a{color:inherit; text-decoration:underline; text-underline-offset:2px; font-weight:500;}
.ob-feedback a:hover{color:var(--ink);}

/* Felder + Button */
/* Owner-Feedback 2026-07-05: Signup war «zusammengestaucht» → mehr vertikale
   Luft zwischen den Feldern (14 → 18px). */
.feld{display:flex; flex-direction:column; gap:7px; margin-bottom:18px; text-align:left;}
.feld:last-of-type{margin-bottom:0;}
/* Das Feld direkt VOR der Passwort-Checkliste rückt näher an sie heran, damit
   die Checkliste sichtbar zum Passwortfeld gehört (die Luft kommt darunter). */
.feld:has(+ .pw-checkliste){margin-bottom:8px;}
/* Feld-Fehler (z. B. Geburtsdatum-Validierung, _internal/geburtsdatum.js). */
.feld-fehler{margin:7px 0 0; font-size:12.5px; line-height:1.45; color:#FFB4B4;}
.feld input[aria-invalid="true"]{border-color:rgba(255,120,120,0.55);}
.feld label{font-size:13px; font-weight:500; color:var(--ink-2);}
.feld-rij{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.feld-rij a{font-size:12.5px; color:var(--accent); text-decoration:none;}
.feld-rij a:hover{text-decoration:underline;}
.feld input{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:13px 15px;
  color:var(--ink); font-size:15px; font-family:inherit; width:100%; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
.feld input::placeholder{color:var(--faint);}
/* P3 Geburtsdatum: dunkles Farbschema fuer den nativen Datums-Picker —
   sonst waere das Kalender-Icon dunkel-auf-dunkel unsichtbar. */
.feld input[type="date"]{color-scheme:dark;}
.feld input:hover{border-color:#243149;}
.feld input:focus{outline:none; border-color:var(--accent); background:#14203a; box-shadow:0 0 0 3px rgba(122,212,255,0.13);}

/* Passwort anzeigen/verbergen (_internal/pw-toggle.js): Icon-Knopf (Auge)
   rechts im Feld, gleiche Formsprache wie .feld (ruhige Flächen, weiche Radien). */
.pw-huelle{position:relative;}
.pw-huelle input{padding-right:56px;}
.pw-knopf{position:absolute; right:7px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border-radius:9px; border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.03); color:var(--muted); cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;}
.pw-knopf svg{width:18px; height:18px; display:block;}
.pw-knopf:hover{color:var(--ink-2); border-color:rgba(255,255,255,0.32); background:rgba(255,255,255,0.06);}
/* Live-Passwort-Checkliste (_internal/pw-checkliste.js): dezente Punkte unter
   dem Feld, Kreis → Häkchen sobald der Konjunkt erfüllt ist. */
.pw-checkliste{list-style:none; margin:2px 0 18px; padding:0; display:flex; flex-direction:column; gap:6px; text-align:left;}
.pw-checkliste li{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.4; color:var(--muted);
  transition:color .2s ease;}
.pw-checkliste li::before{content:''; flex:none; width:16px; height:16px; margin-top:0.5px; border-radius:50%;
  border:1.5px solid var(--faint); display:flex; align-items:center; justify-content:center;
  font-size:10px; line-height:1; color:transparent;
  transition:background .2s ease, border-color .2s ease, color .2s ease;}
.pw-checkliste li.erfuellt{color:var(--ink-2);}
/* Submit-Block (2026-07-06): offene Punkte deutlich markieren, wenn der
   Nutzer trotz unerfuellter Regeln absenden wollte. */
.pw-checkliste--fehlt li:not(.erfuellt){color:#E8A0A0;}
.pw-checkliste--fehlt li:not(.erfuellt)::before{border-color:#E8A0A0;}
.pw-checkliste li.erfuellt::before{content:'\2713'; background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

.go{display:block; width:100%; margin-top:20px; text-align:center; background:var(--accent); color:var(--accent-ink);
  font-weight:600; font-size:15.5px; padding:14px; border-radius:12px; border:0; cursor:pointer; font-family:inherit;
  text-decoration:none; box-shadow:0 10px 24px -10px rgba(122,212,255,0.38); transition:transform .15s ease, box-shadow .2s ease, background .2s ease;}
.go:hover{background:var(--accent-hover); box-shadow:0 14px 32px -10px rgba(122,212,255,0.5); transform:translateY(-1px);}
.go:active{transform:translateY(1px); box-shadow:0 6px 16px -10px rgba(122,212,255,0.42);}

.reassure{margin:16px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-2);}
.reassure b{color:var(--ink); font-weight:600;}
.consent{margin:14px 0 0; font-size:11.5px; line-height:1.55; color:var(--muted);}
.consent a{color:var(--muted); text-decoration:underline; text-underline-offset:2px;}
.consent a:hover{color:var(--ink-2);}
.consent-check{display:flex; align-items:flex-start; gap:9px; text-align:left;}
.consent-check input{width:15px; height:15px; flex:none; margin:2px 0 0; accent-color:var(--accent);}
.consent-check span{min-width:0;}
.wechsel{margin:24px 0 0; font-size:14px; color:var(--muted);}
.wechsel a{color:var(--accent); text-decoration:none; font-weight:500;}
.wechsel a:hover{text-decoration:underline;}

/* schlankes Trust-Signal unter der Karte */
.ob-trust{margin:22px 0 0; font-size:12px; color:var(--faint); text-align:center; line-height:1.7;}
.ob-trust span:not(:last-child)::after{content:' · '; white-space:pre;}

/* Fusszeile (minimal) */
.ob-foot{z-index:2; padding:0 22px 26px; text-align:center; font-size:12.5px; color:var(--faint);}
.ob-foot a{color:var(--faint); text-decoration:none; margin:0 9px;}
.ob-foot a:hover{color:var(--muted);}

@media (max-width:560px){
  .sso{grid-template-columns:1fr;}
  .ob-main{padding:92px 16px 28px;}
  .ob-card{padding:30px 22px 24px; border-radius:20px;}
  .ob-card::before{left:24%; right:24%;}
  .ob-h{font-size:24px;}
  .ob-sub{font-size:14px;}
  .ob-topbar{top:16px; padding:0 16px; gap:14px;}
  .ob-back{font-size:13px;}
  .logo-crop{width:42px; height:46px;}
  .logo-crop img{width:83px; height:83px; left:-19.6px; top:-19.2px;}
}

/* iOS-Zoom-Vermeidung (F1, Owner UI7): iOS-Safari zoomt beim Fokus auf Felder
   mit Schrift < 16px. NUR auf Touch-Geräten (pointer:coarse) auf 16px anheben —
   der Desktop-Look (15px) bleibt dadurch pixelgenau unverändert. */
@media (pointer:coarse){
  .feld input{font-size:16px;}
}

@media (prefers-reduced-motion:reduce){
  .ob-stage::before{animation:none;}
  .ob-wrap{animation:none;}
  .ob-back:hover svg, .sso a:hover, .go:hover{transform:none;}
}