/* css/auth_v010.css
   V010 Auth Phase F - Email-First Login + Register
   Design-Tokens aus V009-Checkout (Tannengruen + Cream + Roboto Condensed)
   V=4: Background-Image (paris_l.jpg) wie Checkout V009, Eye-Icon position-fix, Trust-Strip 3-Item-Grid */

:root {
  --auth-color-primary: #002721;
  --auth-color-primary-d: #001813;
  --auth-color-primary-l: #0a3d34;
  --auth-color-primary-bg: #f5f8f6;
  --auth-color-accent: #730167;
  --auth-color-cta-gold: #d4a72c;
  --auth-color-paper: #faf8f3;
  --auth-color-bg: #f8f9fa;
  --auth-color-line: #e5e7e9;
  --auth-color-text: #212529;
  --auth-color-muted: #6c757d;
  --auth-color-success: #2d6a4f;
  --auth-color-error: #b14b3d;
  --auth-color-warn: #b8860b;
  --auth-font: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --auth-fs-h1: 28px;
  --auth-fs-h2: 22px;
  --auth-fs-body: 15px;
  --auth-fs-input: 16px;
  --auth-fs-label: 11px;
  --auth-space-xs: 4px;
  --auth-space-sm: 8px;
  --auth-space-md: 12px;
  --auth-space-lg: 16px;
  --auth-space-xl: 24px;
  --auth-space-2xl: 32px;
  --auth-space-3xl: 48px;
  --auth-radius: 6px;
  --auth-radius-lg: 10px;
  --auth-radius-xl: 14px;
  --auth-shadow-sm: 0 1px 2px rgba(0,39,33,.05);
  --auth-shadow: 0 4px 14px rgba(0,39,33,.07);
  --auth-shadow-lg: 0 18px 40px rgba(0,39,33,.10);
  --auth-shadow-focus: 0 0 0 3px rgba(0,39,33,.10);
  --auth-transition: .15s ease;
  --auth-transition-fast: .12s ease;
  --auth-touch-min: 48px;
  --auth-card-max: 420px;
}

@media (prefers-reduced-motion: reduce) {
  .auth-page *, .auth-verify-banner * { transition: none !important; animation: none !important; }
}

/* === Page-BG: Atelier-Watermark wie Checkout V009 === */
.auth-page {
  min-height: 100dvh;
  background-image:
    linear-gradient(180deg, rgba(248,249,250,0.72) 0%, rgba(248,249,250,0.80) 100%),
    url('/images/background_paris_l.jpg');
  background-size: cover;
  background-attachment: scroll;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Card oben anlegen, nicht mittig - reduziert "verloren wirken" bei kurzem Inhalt */
  justify-content: flex-start;
  padding: var(--auth-space-xl) var(--auth-space-lg) var(--auth-space-3xl);
  font-family: var(--auth-font);
  color: var(--auth-color-text);
}

.auth-card {
  background: var(--auth-color-paper);
  border-radius: var(--auth-radius-lg);
  box-shadow: var(--auth-shadow);
  padding: var(--auth-space-2xl);
  max-width: var(--auth-card-max);
  width: 100%;
  box-sizing: border-box;
}
.auth-card-wide { max-width: 800px; }

.auth-logo { text-align: center; margin-bottom: var(--auth-space-xl); }
.auth-logo img { max-width: 180px; height: auto; }

.auth-h1 {
  font-size: var(--auth-fs-h1);
  font-weight: 700;
  margin: 0 0 var(--auth-space-sm) 0;
  text-align: center;
  line-height: 1.2;
}
.auth-h2 {
  font-size: var(--auth-fs-h2);
  font-weight: 600;
  margin: 0 0 var(--auth-space-md) 0;
  text-align: center;
  color: var(--auth-color-primary);
}
.auth-sub {
  font-size: var(--auth-fs-body);
  color: var(--auth-color-muted);
  text-align: center;
  margin: 0 0 var(--auth-space-xl) 0;
}

.auth-cta-row {
  display: flex;
  gap: var(--auth-space-md);
  margin-top: var(--auth-space-lg);
  flex-wrap: wrap;
  justify-content: center;
}
.auth-cta-row .auth-btn { flex: 1; min-width: 200px; max-width: 280px; }

/* Topseller-Galerie nach Welcome-Card: voller Wrapper-Breite (statt Card-Breite),
   ueberschrift kleiner damit es nicht doppelt schreit. */
.auth-topseller-wrap {
  width: 100%;
  max-width: 1200px;
  margin: var(--auth-space-3xl) auto 0;
  padding: 0 var(--auth-space-lg);
  box-sizing: border-box;
}
.auth-topseller-wrap h1,
.auth-topseller-wrap h2 {
  font-size: 22px !important;
  font-weight: 600 !important;
  text-align: center;
  margin-top: 0 !important;
}

.auth-input {
  width: 100%;
  font-size: var(--auth-fs-input);
  padding: 0 14px;
  border: 1px solid var(--auth-color-line);
  border-radius: var(--auth-radius);
  /* Fix-height + line-height: 48px - SOLID damit type=password vs type=text NICHT shifted.
     Browser-Default-Style fuer type=password verwendet anderen Font/Linehoehe was zu Layout-Shift fuehrt.
     Mit explizit gesetzter line-height+height passiert nichts mehr. */
  height: 48px;
  line-height: 48px;
  font-family: var(--auth-font);
  background: #fff;
  color: var(--auth-color-text);
  transition: border-color var(--auth-transition), box-shadow var(--auth-transition);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.auth-input:focus {
  outline: none;
  border-color: var(--auth-color-primary);
  box-shadow: var(--auth-shadow-focus);
}
.auth-input[aria-invalid="true"] { border-color: var(--auth-color-error); }
/* Browser-Default Autofill-Background (Chrome blau) entfernen - fade-trick mit hoher transition */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--auth-color-text);
  transition: background-color 5000s ease-in-out 0s;
}

.auth-label {
  display: block;
  font-size: var(--auth-fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--auth-color-muted);
  margin-bottom: var(--auth-space-xs);
  font-weight: 600;
}

.auth-field { margin-bottom: var(--auth-space-lg); position: relative; }

/* Password-Field mit Eye-Toggle.
   min-height auf Container fixiert weil type=password vs type=text MINIMAL unterschiedlich rendert
   (auch mit gesetzter line-height) - Container-min-height verhindert Geschwister-Shift. */
.auth-field-pw { min-height: 90px; }
.auth-field-pw .auth-input { padding-right: 48px; }

.auth-pw-toggle {
  position: absolute;
  right: 4px;
  /* Anker am unteren Rand des Containers (Input-Bottom). Label hat 11px + 4px margin = ~17px Hoehe. Input-Hoehe ~48px. Center auf Input = (Container-Hoehe - 24)/2. Wir setzen auf bottom: spaceMicrocopy + halben Input-rest. */
  bottom: 4px;
  /* Wenn Microcopy unter Input: noch tiefer. Default: bottom of input field ~48px hoch, start oben am label (17px) -> input bottom = 17 + 48 - 4 = 61px aus container-top. */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--auth-color-muted);
  z-index: 2;
}
/* Wenn Microcopy unter dem Field steht, soll das Toggle vor der Microcopy positioniert sein (am input-Bottom). Calc: input top ist label-Hoehe (17px), input-Hoehe 48px. Wir wollen toggle-mitte = input-mitte = 17 + 24 = 41px aus container-top. Mit 44px Hoehe muss top = 41 - 22 = 19px. */
.auth-field-pw .auth-pw-toggle { top: 19px; bottom: auto; }
.auth-pw-toggle:hover { color: var(--auth-color-primary); }
.auth-pw-toggle:focus-visible { box-shadow: var(--auth-shadow-focus); border-radius: 50%; outline: none; }

/* Buttons-Hierarchie projektweit:
   - Gold (--auth-color-cta-gold) = Haupt-CTA (Weiter, Anmelden, Konto erstellen, Magic-Link, Welcome-Buttons)
   - Tannengrün (--auth-color-primary) = Sekundär (Als Gast fortfahren, weitere Aktionen)
   - Outline = tertiär (Aendern-Link etc.)
   Konsistent mit Checkout V009 das Gold als Primary-CTA setzt. */
.auth-btn {
  width: 100%;
  background: var(--auth-color-cta-gold);
  color: var(--auth-color-text);
  border: 0;
  padding: 14px 22px;
  border-radius: var(--auth-radius);
  font-family: var(--auth-font);
  font-size: var(--auth-fs-body);
  font-weight: 700;
  min-height: var(--auth-touch-min);
  cursor: pointer;
  transition: background var(--auth-transition), transform var(--auth-transition-fast);
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
}
.auth-btn:hover { background: #b88e1f; color: var(--auth-color-text); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { background: var(--auth-color-muted); cursor: not-allowed; opacity: 0.6; }

.auth-btn-secondary {
  background: var(--auth-color-primary);
  color: #fff;
  border: 0;
}
.auth-btn-secondary:hover { background: var(--auth-color-primary-d); color: #fff; }

.auth-btn-outline {
  background: transparent;
  color: var(--auth-color-primary);
  border: 1px solid var(--auth-color-line);
}
.auth-btn-outline:hover { background: var(--auth-color-primary-bg); color: var(--auth-color-primary); }

.auth-btn-google {
  background: #fff;
  color: var(--auth-color-text);
  border: 1px solid var(--auth-color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--auth-space-md);
}
.auth-btn-google:hover { background: var(--auth-color-bg); color: var(--auth-color-text); }

.auth-divider {
  text-align: center;
  margin: var(--auth-space-xl) 0;
  position: relative;
  color: var(--auth-color-muted);
  font-size: var(--auth-fs-label);
}
.auth-divider::before, .auth-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 30px);
  height: 1px;
  background: var(--auth-color-line);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }

.auth-microcopy {
  font-size: var(--auth-fs-label);
  color: var(--auth-color-muted);
  margin: var(--auth-space-xs) 0 0;
  font-style: italic;
}
.auth-microcopy a { color: var(--auth-color-primary); }

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--auth-space-lg);
  border: 1px solid var(--auth-color-line);
  border-radius: var(--auth-radius);
  overflow: hidden;
}
.auth-tab {
  flex: 1;
  padding: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--auth-fs-body);
  font-weight: 600;
  color: var(--auth-color-muted);
  min-height: var(--auth-touch-min);
}
.auth-tab[aria-selected="true"] { background: var(--auth-color-primary); color: #fff; }

.auth-error {
  color: var(--auth-color-error);
  font-size: var(--auth-fs-body);
  margin-top: var(--auth-space-xs);
  font-weight: 600;
}

.auth-strength { height: 4px; background: var(--auth-color-line); border-radius: 2px; margin: var(--auth-space-xs) 0; overflow: hidden; }
.auth-strength-bar { height: 100%; transition: width var(--auth-transition); width: 0; }
.auth-strength-bar.weak { background: var(--auth-color-error); width: 25%; }
.auth-strength-bar.fair { background: var(--auth-color-warn); width: 50%; }
.auth-strength-bar.good { background: var(--auth-color-primary-l); width: 75%; }
.auth-strength-bar.strong { background: var(--auth-color-success); width: 100%; }

.auth-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--auth-space-sm);
  margin: var(--auth-space-md) 0;
  font-size: var(--auth-fs-body);
}
.auth-checkbox-row input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.auth-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.auth-step { display: none; }
.auth-step.active { display: block; }

/* Trust-Strip - vertikal mit Icon UEBER Text, Trenner zwischen Items */
.auth-trust {
  margin-top: var(--auth-space-xl);
  padding-top: var(--auth-space-lg);
  border-top: 1px solid var(--auth-color-line);
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 0;
  align-items: stretch;
}
.auth-trust::before, .auth-trust::after { content: none; }
.auth-trust > .auth-trust-item:nth-child(1) { grid-column: 1; }
.auth-trust > .auth-trust-item:nth-child(2) { grid-column: 3; }
.auth-trust > .auth-trust-item:nth-child(3) { grid-column: 5; }
/* Trenner als Pseudo-Elemente in den Grid-Gap-Spalten */
.auth-trust { position: relative; }
.auth-trust > .auth-trust-item:not(:last-child) { position: relative; }
.auth-trust > .auth-trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: var(--auth-color-line);
}
.auth-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 8px;
  font-size: 12px;
  color: var(--auth-color-text);
}
.auth-trust-item .ic {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--auth-color-primary-bg);
  color: var(--auth-color-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 16px;
  margin-bottom: 4px;
}
.auth-trust-item strong { display: block; font-size: 12px; line-height: 1.2; font-weight: 700; }
.auth-trust-item small { display: block; font-size: 10px; color: var(--auth-color-muted); margin-top: 2px; line-height: 1.3; }
@media (max-width: 540px) {
  .auth-trust { grid-template-columns: 1fr; }
  .auth-trust > .auth-trust-item { grid-column: 1 !important; }
  .auth-trust > .auth-trust-item:not(:last-child) { border-bottom: 1px solid var(--auth-color-line); }
  .auth-trust > .auth-trust-item:not(:last-child)::after { display: none; }
}

/* Stepper - analog Checkout V009 .co-stepper, reduziert auf 2 Steps.
   Linie zwischen den Icons via Pseudo-Element des ITEMS rechts (sitzt zwischen Icon und naechstem Icon). */
.auth-stepper {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--auth-space-xl) 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.auth-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 1 auto;
  padding: 0 32px;
  color: var(--auth-color-muted);
  font-size: 11px;
  font-weight: 600;
}
/* Trenner-Linie startet rechts vom Icon, endet beim naechsten Icon.
   Icon ist 28px; Item-Padding ist 32px. Linie geht von rechts vom Icon (Mitte des Items) bis 32px+32px= 64px.
   Mit 'left: 50%' und 'width: calc(100% - 28px)' bekommt man Linie ab Icon-rechter-Kante bis zum Item-rechter-Kante.
   Aber wir wollen ueber Items hinweg. Trick: position: absolute + right: -32px; width: 64px (= 2x padding). */
.auth-step-item::after {
  content: '';
  position: absolute;
  /* von Mitte des Items (Icon-Mitte) bis Mitte des naechsten Items (naechster Icon-Mitte) */
  left: 50%;
  /* Padding-Lehrlauf rechts (32px) + Padding-Lehrlauf links naechstes Item (32px) = 64px */
  width: calc(100% + 14px);
  /* Icon ist 28px hoch + 4px gap + label, Linie auf Icon-mitte = ca. 14px aus item-top */
  top: 14px;
  height: 2px;
  background: var(--auth-color-line);
  z-index: 0;
}
.auth-step-item:last-child::after { display: none; }
.auth-step-ic {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--auth-color-line);
  color: var(--auth-color-muted);
  display: grid;
  place-items: center;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.auth-step-ic svg { width: 16px; height: 16px; }
.auth-step-item.is-active .auth-step-ic { background: var(--auth-color-primary); color: #fff; }
.auth-step-item.is-active { color: var(--auth-color-primary); }
.auth-step-item.is-done .auth-step-ic { background: var(--auth-color-primary); color: #fff; }
.auth-step-item.is-done::after { background: var(--auth-color-primary); }
.auth-step-label { line-height: 1; }

.auth-verify-banner {
  background: #fff8e6;
  border-bottom: 1px solid #f0d977;
  color: #5a4500;
  padding: 12px 16px;
  font-size: var(--auth-fs-body);
  font-family: var(--auth-font);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--auth-space-md);
  flex-wrap: wrap;
}
.auth-verify-banner button { min-height: 36px; }

@media (max-width: 540px) {
  .auth-card { padding: var(--auth-space-xl); }
  .auth-h1 { font-size: 24px; }
}