/* ══ Anmelde-Seiten im neuen App-Design (Auftrag login-design, 08.11.2026) ═════
   Ausgangspunkt: Linos Entwurf (31.10.2026, Punkteraster + braun-beiger Knopf),
   weiterentwickelt, damit es zur heutigen App (css/home-neu.css) und Landingpage
   (css/landing-neu.css) passt: warmer Hintergrund mit Punkteraster, Karte mit grossen
   Rundungen und weichem Schatten, Titel in Playfair, Knoepfe wie "Kostenlos starten",
   Logo oben links wie in der App. Auf breiten Bildschirmen (Anmelden, Registrieren,
   Passwort) rechts ein ruhiges Foto aus der Landingpage, auf dem Handy nur das Formular.
   Nur Aussehen: Felder, IDs, Reihenfolge, Haken, Fehlermeldungen und Skripte bleiben
   gleich. Der Knopf "Weiter mit Google" bleibt nach Googles Richtlinien weiss mit G-Logo.
   Wird auf login, register, reset, verify, join, zugang, abmelden und wartung als
   letztes Stylesheet geladen (nach auth.css und dem eigenen <style>-Block). */

/* ── Farben und Schrift (wie App und Landingpage) ─────────────────────────── */
:root {
  --hn-bg:        #F7F3EC;
  --hn-surface:   #FBF8F2;
  --hn-field:     #FFFDF9;
  --hn-second:    #EDE2D5;
  --hn-hover:     #E5D5C5;
  --hn-line:      #DED2C5;
  --hn-primary:   #8A7765;
  --hn-primary-h: #7B6857;
  --hn-primary-p: #705E4E;
  --hn-text:      #302823;
  --hn-text-2:    #756B63;
  --hn-shadow-sm: 0 1px 2px rgba(112, 94, 78, .05), 0 10px 24px -14px rgba(112, 94, 78, .20);
  --hn-shadow-lg: 0 2px 6px rgba(112, 94, 78, .06), 0 30px 60px -24px rgba(112, 94, 78, .34);
  --font-title: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cta-mesh:
    radial-gradient(70% 120% at 8% 0%, rgba(255, 236, 214, .08) 0%, rgba(255, 236, 214, 0) 70%),
    radial-gradient(60% 140% at 18% 10%, #7A6655 0%, rgba(122, 102, 85, 0) 70%),
    radial-gradient(70% 160% at 100% 100%, #3E3229 0%, rgba(62, 50, 41, 0) 65%),
    radial-gradient(50% 120% at 62% 30%, #705E4E 0%, rgba(112, 94, 78, 0) 75%);

  /* bestehende Variablen auf die App-Toene setzen (Spinner, Haken, Fokus, Felder) */
  --bg-main: var(--hn-bg);
  --bg-second: var(--hn-second);
  --card-bg: var(--hn-surface);
  --card-border: var(--hn-line);
  --text: var(--hn-text);
  --text-secondary: var(--hn-text-2);
  --text-muted: var(--hn-text-2);
  --text-faint: var(--hn-text-2);
  --gold: var(--hn-primary);
  --gold-hover: var(--hn-primary-p);
  --gold-text: var(--hn-primary-p);
  --gold-light: var(--hn-second);
}

/* height:auto + overflow-x:clip: base.css macht sonst body zum eigenen Scroll-Bereich */
html, body { height: auto; min-height: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body); color: var(--hn-text); background: var(--hn-bg);
  -webkit-font-smoothing: antialiased;
}
/* fester Punkteraster: steht still, die Karte liegt darueber (wie App und Landingpage) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--hn-bg);
  background-image: radial-gradient(circle, rgba(138, 119, 101, .20) 1px, transparent 1.6px);
  background-size: 22px 22px;
}
::selection { background: var(--hn-hover); }

/* ── Rahmen: Logo oben links, Karte in der Mitte ──────────────────────────── */
.auth-wrap {
  min-height: 100dvh; background: none;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
  justify-items: center; align-items: center;
  padding: 16px 16px 28px;
}
.auth-top { justify-self: stretch; align-self: start; display: flex; align-items: center; padding: 6px 4px; }
.auth-brand {
  display: inline-flex; align-items: center; gap: 9px; padding: 4px 6px 4px 0; border-radius: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hn-text); text-decoration: none;
}
.auth-brand img { width: 27px; height: 27px; object-fit: contain; display: block; }
.auth-brand:focus-visible { outline: 2px solid var(--hn-primary-p); outline-offset: 3px; }

.auth-card {
  width: 100%; max-width: 440px; margin: 20px 0;
  background: var(--hn-surface); border: 1px solid rgba(222, 210, 197, .7);
  border-radius: 28px; box-shadow: var(--hn-shadow-lg);
  padding: 40px 40px 36px;
}
@media (max-width: 480px) {
  .auth-wrap { padding: 12px 16px 24px; }
  .auth-card { padding: 30px 22px 26px; border-radius: 24px; margin: 14px 0; }
}

/* Zwei Spalten (Anmelden, Registrieren, Passwort): links das Formular, rechts ein
   ruhiges Foto mit Botschaft und Animation. Das Bild ist nur Schmuck (aria-hidden) und wird
   auf schmalen Bildschirmen gar nicht geladen (display:none). */
.auth-visual { display: none; }
@media (min-width: 960px) {
  .auth-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
    column-gap: 16px; padding: 16px;
  }
  .auth-split .auth-top { grid-column: 1; grid-row: 1; padding: 10px 14px; }
  .auth-split .auth-card { grid-column: 1; grid-row: 2; }
  .auth-visual {
    display: block; grid-column: 2; grid-row: 1 / span 2; align-self: start;
    position: sticky; top: 16px; height: calc(100dvh - 32px); min-height: 560px; width: 100%;
    border-radius: 32px; overflow: hidden; isolation: isolate;
    /* Foto: FOTOGRAFÍA EDITORIAL (@fotografiaeditorial), Unsplash (unsplash.com/photos/IGsYugJSewc),
       "Young woman laughs while working on laptop", Unsplash-Lizenz (kommerziell frei, keine
       Namensnennung noetig). Von Leandro gewaehlt (08.11.2026). WebP in 960/1440/1920. */
    background-color: #4A3B30;
    background-image: url('/img/lernende-laptop-960.webp');
    background-image: image-set(url('/img/lernende-laptop-960.webp') 1x, url('/img/lernende-laptop-1440.webp') 1.5x, url('/img/lernende-laptop-1920.webp') 2x);
    background-size: cover; background-position: 50% 30%;
    box-shadow: var(--hn-shadow-lg);
  }
  /* Foto abgedunkelt und gewaermt (oben, links und in der Mitte hinter dem Titel im ruhigen
     Zustand staerker): es bleibt menschlich, Titel und Karten bleiben gut lesbar */
  .auth-visual::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(75% 26% at 35% 52%, rgba(36, 28, 22, .42) 0%, rgba(36, 28, 22, 0) 100%),
      linear-gradient(180deg, rgba(36, 28, 22, .72) 0%, rgba(36, 28, 22, .44) 34%, rgba(36, 28, 22, .40) 62%, rgba(36, 28, 22, .66) 100%),
      linear-gradient(95deg, rgba(36, 28, 22, .62) 0%, rgba(36, 28, 22, .30) 45%, rgba(36, 28, 22, 0) 80%),
      linear-gradient(135deg, rgba(160, 120, 80, .22), rgba(62, 50, 41, .18));
  }
}
@media (min-width: 1400px) {
  .auth-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* ── Titel und Texte ──────────────────────────────────────────────────────── */
.auth-title {
  font-family: var(--font-title); font-weight: 700; font-size: 31px; line-height: 1.18;
  letter-spacing: -.01em; color: var(--hn-text); text-wrap: balance;
}
@media (max-width: 480px) { .auth-title { font-size: 27px; } }
.auth-sub { color: var(--hn-text-2); font-size: 14.5px; line-height: 1.5; margin: 8px 0 26px; }
.auth-card a:not(.btn) { color: var(--hn-primary-p); }
.auth-card a:not(.btn):focus-visible, .forgot-link:focus-visible, .legal-foot a:focus-visible {
  outline: 2px solid var(--hn-primary-p); outline-offset: 2px; border-radius: 4px;
}

/* Fehlermeldung: warmes Rot, gut lesbar */
.auth-error {
  background: #FBEEEA; border: 1px solid #E9BFB4; color: #9A2E1F;
  font-size: 13px; line-height: 1.45; padding: 10px 14px; border-radius: 14px;
}

/* ── Felder ───────────────────────────────────────────────────────────────── */
.field-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--hn-text); margin-bottom: 7px;
}
.auth-card input:not([type="checkbox"]) {
  height: 50px; padding: 0 16px; font-size: 15px;
  background: var(--hn-field); color: var(--hn-text);
  border: 1px solid var(--hn-line); border-radius: 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.auth-card .pw-wrap input { padding-right: 48px; }
.auth-card input::placeholder { color: #8E847B; }
.auth-card input:hover:not(:focus) { border-color: #CDBFB0; }
.auth-card input:focus {
  background: #FFFFFF; border-color: var(--hn-primary-p);
  box-shadow: 0 0 0 3px rgba(112, 94, 78, .22);
}
.form-group { margin-bottom: 18px; }
.pw-eye { right: 8px; padding: 8px; border-radius: 10px; color: var(--hn-text-2); }
.pw-eye:hover { color: var(--hn-text); background: var(--hn-second); }
.pw-eye:focus-visible { outline: 2px solid var(--hn-primary-p); outline-offset: 0; }
.pw-hint { color: var(--hn-text-2); font-size: 12.5px; }
.pw-hint-ok { color: #2F7A47; }

/* Haken (Alter / Zustimmung) */
.consent { gap: 11px; font-size: 13px; line-height: 1.5; color: var(--hn-text-2); margin: 2px 0 14px; cursor: pointer; }
.consent input[type="checkbox"] {
  width: 18px; height: 18px; min-width: 18px; margin-top: 1px;
  background: var(--hn-field); border-color: var(--hn-line); accent-color: var(--hn-primary-p);
}
.consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--hn-primary-p); outline-offset: 2px; }
.consent a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.forgot-link { font-size: 13px; color: var(--hn-text-2); text-decoration: underline; text-decoration-color: rgba(117, 107, 99, .4); text-underline-offset: 3px; }
.forgot-link:hover { color: var(--hn-primary-p); text-decoration-color: currentColor; }

.auth-divider { margin: 20px 0; color: var(--hn-text-2); font-size: 12px; }
.auth-divider::before, .auth-divider::after { background: var(--hn-line); }

.auth-foot { margin-top: 22px; font-size: 14px; color: var(--hn-text-2); }
.auth-foot a { color: var(--hn-primary-p); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Knoepfe wie "Kostenlos starten" auf der Landingpage ──────────────────── */
.btn { font-family: var(--font-body); font-weight: 600; border-radius: 100px; }
.btn:focus-visible { outline: 2px solid var(--hn-primary-p); outline-offset: 3px; }
.btn-primary {
  height: 52px; padding: 0 26px; font-size: 15px; font-weight: 700; text-decoration: none;
  color: #FFFFFF; background-color: #6A5848; background-image: var(--cta-mesh);
  background-size: 180% 180%; background-position: 0% 0%;
  box-shadow: inset 0 1px 0 rgba(255, 240, 222, .18), 0 1px 2px rgba(48, 40, 35, .3), 0 12px 26px -12px rgba(48, 40, 35, .8);
}
.btn-primary:hover { background-color: #5E4D3F; background-image: var(--cta-mesh); box-shadow: inset 0 1px 0 rgba(255, 240, 222, .18), 0 14px 28px -10px rgba(48, 40, 35, .8); }
.btn-primary:active { background-color: #4E4035; background-image: var(--cta-mesh); opacity: 1; }
.btn-ghost {
  height: 52px; padding: 0 24px; font-size: 15px; text-decoration: none;
  background: var(--hn-field); color: var(--hn-text); border: 1px solid rgba(222, 210, 197, .9);
  box-shadow: 0 1px 2px rgba(112, 94, 78, .06), 0 8px 18px -10px rgba(112, 94, 78, .35);
}
.btn-ghost:hover { background: #FFFFFF; border-color: var(--hn-line); }

/* "Weiter mit Google": bleibt nach Googles Richtlinien weiss, Rand #747775, Text #1F1F1F,
   farbiges G - nur Hoehe und Rundung wie die anderen Knoepfe (Pillenform ist erlaubt). */
.btn-google { height: 52px; border-radius: 100px; font-size: 15px; background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775; }
.btn-google:hover { background: #F7F8FA; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease; }
  .btn:not(:disabled):hover { transform: translateY(-2px); }
  .btn:not(:disabled):active { transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary { animation: cta-flow 9s ease-in-out infinite alternate; }
}
@keyframes cta-flow { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn:hover { transform: none; }
  .fade-up { animation: none; }
}

/* ── Seiten-eigene Teile (verify, join, zugang, wartung) in den App-Toenen ── */
.verify-icon, .join-icon {
  background: var(--hn-second); border: 1px solid rgba(222, 210, 197, .7); border-radius: 18px;
  box-shadow: var(--hn-shadow-sm);
}
.verify-icon svg, .join-icon svg { color: var(--hn-primary-p); }
.email-hint, .resend-row, .invite-code-label, .invite-option-label { color: var(--hn-text-2); }
.resend-row a { color: var(--hn-primary-p); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-card .code-field {
  width: 46px; height: 58px; padding: 0; font-size: 24px;
  background: var(--hn-field); border: 1px solid var(--hn-line); border-radius: 14px; caret-color: var(--hn-primary-p);
}
.auth-card .code-field:focus, .auth-card .code-input:focus { border-color: var(--hn-primary-p); box-shadow: 0 0 0 3px rgba(112, 94, 78, .22); }
.auth-card .code-field.filled { border-color: var(--hn-primary); }
@media (max-width: 380px) { .code-fields { gap: 7px; } .auth-card .code-field { width: 40px; height: 52px; } }
.auth-card .code-input {
  height: auto; padding: 18px 12px; font-size: 24px;
  background: var(--hn-field); border: 1px solid var(--hn-line); border-radius: 16px;
}
.invite-code { background: var(--hn-second); color: var(--hn-text); border-radius: 14px; }
.success-icon { color: var(--hn-primary-p); }
.spinner { border-color: var(--hn-second); border-top-color: var(--hn-primary-p); }

/* Rechtliche Links unten */
.legal-foot { padding: 4px 16px 28px; font-size: 13px; }
.legal-foot a { color: var(--hn-text-2); }
.legal-foot a:hover { color: var(--hn-text); }

/* ══ Rechte Seite: Botschaft + Produkt-Animation (js/auth-visual.js) ══════════
   Nur ab 960px (sonst baut das Skript nichts). Animiert wird nur transform/opacity. */
.av-inner {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; padding: 52px 52px 44px;
}
.av-title {
  width: fit-content; transform-origin: left top; will-change: transform;
  transition: transform 1.1s cubic-bezier(.45, 0, .2, 1);
  font-family: var(--font-title); font-weight: 700; color: #FFF8EF;
  font-size: clamp(36px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -.02em;
  font-variant-numeric: lining-nums; text-wrap: balance; max-width: 560px;
  text-shadow: 0 2px 18px rgba(30, 22, 16, .55);
}
.av-title em { font-style: italic; font-weight: 600; color: #EBD5BA; }
.av-stage {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 14px; padding-top: 28px; width: 100%; max-width: 420px;
}

/* Karte "Mein Weg" wie in der App */
.av-panel {
  width: 100%; background: var(--hn-surface); border-radius: 24px; padding: 18px 18px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .10), 0 30px 60px -24px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.av-show .av-panel { opacity: 1; transform: none; }
.av-head { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hn-text-2); margin-bottom: 10px; }
.av-bar { height: 6px; border-radius: 99px; background: var(--hn-second); overflow: hidden; margin-bottom: 8px; }
.av-fill {
  display: block; height: 100%; border-radius: 99px; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #8A7765, #705E4E);
  transition: transform .7s cubic-bezier(.3, .7, .2, 1);
}
.av-rows { list-style: none; margin: 0; padding: 0; }
.av-row {
  display: flex; align-items: center; gap: 13px; padding: 11px 2px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.av-row + .av-row { border-top: 1px solid rgba(222, 210, 197, .6); }
.av-row.on { opacity: 1; transform: none; }
.av-txt { display: flex; flex-direction: column; min-width: 0; }
.av-txt b { font-size: 14.5px; font-weight: 600; color: var(--hn-text); }
.av-txt small { font-size: 12.5px; color: var(--hn-text-2); margin-top: 1px; }

/* Haken: Kreis fuellt sich (scale), der Haken wird von links nach rechts "gezeichnet"
   (eine Abdeckung zieht sich per scaleX zurueck) */
.av-dot {
  position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--hn-line); overflow: hidden; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.av-dot::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; background: #705E4E;
  transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.av-dot svg { position: relative; width: 15px; height: 15px; opacity: 0; transition: opacity .1s linear .15s; }
.av-wipe {
  position: absolute; left: 4px; right: 4px; top: 6px; bottom: 6px; background: #705E4E;
  transform-origin: right center; opacity: 0;
}
.av-row.done .av-dot::before { transform: scale(1); }
.av-row.done .av-dot svg { opacity: 1; }
.av-row.done .av-wipe { opacity: 1; animation: av-wipe .45s cubic-bezier(.5, 0, .3, 1) .2s both; }
@keyframes av-wipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Zum Schluss: Zusage */
.av-yes {
  position: relative; isolation: isolate; width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 22px; color: var(--hn-text);
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2, 1.3, .4, 1);
}
.av-yes-on .av-yes { opacity: 1; transform: none; }
/* Kartengrund als ::after (liegt in der Reihenfolge ueber dem Aufleuchten, unter dem Text) */
.av-yes::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #FFFDF9; border: 1px solid #EBD5BA;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .10), 0 30px 60px -24px rgba(0, 0, 0, .55);
}
.av-yes-mark {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #705E4E; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.av-yes-mark svg { width: 18px; height: 18px; }
.av-yes-txt { display: flex; flex-direction: column; min-width: 0; }
.av-yes-txt b { font-family: var(--font-title); font-size: 23px; font-weight: 700; line-height: 1.15; }
.av-yes-txt small { font-size: 13px; color: var(--hn-text-2); margin-top: 2px; }
/* sanftes Aufleuchten hinter der Karte */
.av-glow {
  position: absolute; inset: -36px -28px; z-index: -1; border-radius: 48px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(235, 213, 186, .55) 55%, rgba(235, 213, 186, 0) 100%);
  opacity: 0;
}
.av-yes-on .av-glow { animation: av-glow 2.2s ease-out .25s both; }
@keyframes av-glow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .35; } }
/* kurzer Konfetti-Strich in Markenfarben (Stellio Blue + Brauntoene), vom Haken weg nach
   oben/links/unten, nicht ueber den Text */
.av-bits { position: absolute; left: 34px; top: 50%; width: 0; height: 0; pointer-events: none; }
.av-bit {
  position: absolute; left: -2px; top: -8px; width: 4px; height: 16px; border-radius: 3px;
  opacity: 0; background: #EBD5BA;
}
.av-bit-1, .av-bit-5 { background: #2563EB; }
.av-bit-2, .av-bit-7 { background: #8A7765; }
.av-bit-4, .av-bit-8 { background: #C9A988; }
.av-yes-on .av-bit { animation: av-bit 1.4s cubic-bezier(.15, .7, .3, 1) .2s both; }
.av-bit-1 { --a: 15deg;  --d: -78px; }
.av-bit-2 { --a: -20deg;  --d: -86px; }
.av-bit-3 { --a: -50deg;    --d: -70px; }
.av-bit-4 { --a: -80deg;   --d: -82px; }
.av-bit-5 { --a: -110deg;   --d: -66px; }
.av-bit-6 { --a: -140deg;  --d: -76px; }
.av-bit-7 { --a: -170deg;  --d: -62px; }
.av-bit-8 { --a: 160deg; --d: -74px; }
@keyframes av-bit {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(-8px) scaleY(.4); }
  20%  { opacity: 1; }
  70%  { opacity: .9; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--d)) scaleY(1); }
}

/* ruhig ausblenden vor dem naechsten Durchlauf */
.av-out .av-panel, .av-out .av-yes { opacity: 0; transform: translateY(-8px); transition: opacity .9s ease, transform .9s ease; }

/* Bewegung reduziert: fertiger Endzustand, ohne Uebergaenge */
.av-static *, .av-static *::before { transition: none !important; animation: none !important; }
.av-static .av-wipe, .av-static .av-bit { display: none; }
.av-static .av-glow { opacity: .35; }