/* ====================================================================
   AUTH-SEITEN — Richtung "Confident Product Showcase"

   Ersetzt drei getrennte, aber praktisch identische Dateien
   (login.css, register.css, email.css — Gradient-Icon-Kacheln,
   Schatten-Karten, ein Gelb/Amber-Ton für Tipp- und Cookie-Boxen neben
   dem eigentlichen Markenblau, bunte Blau/Grün/Lila-Feature-Icons) plus
   zwei Seiten, die gar keine eigene Datei hatten (reset.blade.php und
   confirm.blade.php verlinkten ein nicht existierendes
   "assets/css/profil.css" und fielen dadurst komplett auf unstyled
   Bootstrap-HTML mit Dutzenden Inline-styles zurück) und eine Seite
   (verify.blade.php), die die interne Dashboard-Optik (user-css/profil.css)
   einer öffentlichen Auth-Seite überstülpte.

   Jetzt EINE Datei für alle sechs Auth-Seiten (Login, Registrieren,
   Passwort anfordern, Passwort zurücksetzen, Passwort bestätigen,
   E-Mail verifizieren) mit denselben Tokens/Bausteinen wie überall
   sonst: EIN Akzentton, große Radien, Pillen-Buttons, flache
   `--faint`-Karten statt Schatten-Karten, kein Gradient, keine
   zusätzliche Amber-Farbe.
   ==================================================================== */


.auth-page {
  --paper: #ffffff;
  --faint: #f5f5f7;
  --ink: #111113;
  --ink-2: #6e6e73;
  --line: rgba(0,0,0,.09);

  --accent: #0096ff;
  --accent-dark: #0072c2;
  --accent-tint: rgba(0,150,255,.08);
  --success: #22c55e;
  --success-tint: rgba(34,197,94,.1);
  --danger: #ef4444;
  --danger-tint: rgba(239,68,68,.1);
  --placeholder: #a3a3a8;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 980px;

  --font-display: 'Nunito', 'Nunito Sans', sans-serif;
  --font-body: 'Nunito Sans', 'Nunito', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);

  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  padding: clamp(48px,6vw,80px) 0;
}
.auth-page * { box-sizing: border-box; }
.auth-page h2, .auth-page h3, .auth-page h4 { font-family: var(--font-display); font-weight: 800; color: var(--ink); }

/* ====================================================================
   LAYOUT — zwei Spalten (Formular + Sidebar) für Login/Registrieren,
   eine zentrierte Karte für die vier transaktionalen Seiten.
   ==================================================================== */
.auth-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,5vw,4.5rem); align-items: start; }
.auth-single { max-width: 480px; margin: 0 auto; }

@media (max-width: 991.98px) {
  .auth-split { grid-template-columns: 1fr; }
}

/* ====================================================================
   KARTE — flache Fläche statt Schatten-Karte (reuses .kontakt-card).
   ==================================================================== */
.auth-card { background: var(--faint); border-radius: var(--r-lg); padding: clamp(2rem,3.5vw,2.75rem); }

.auth-card-header { text-align: center; margin-bottom: 2rem; }
.auth-icon {
  width: 56px; height: 56px; margin: 0 auto 1.25rem; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.auth-title { font-size: clamp(1.5rem,2.6vw,1.9rem); margin: 0 0 .5rem; letter-spacing: -0.015em; }
.auth-subtitle { font-size: 1rem; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* ====================================================================
   FORMULAR
   ==================================================================== */
.auth-form { display: flex; flex-direction: column; gap: 1.5rem; }

.auth-section { display: flex; flex-direction: column; gap: 1.25rem; }
.auth-section-title { display: flex; align-items: center; gap: .65rem; font-size: 1rem; font-weight: 800; color: var(--ink); margin: 0; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.auth-section-title i { font-size: 1rem; color: var(--accent-dark); }

.auth-fields { display: flex; flex-direction: column; gap: 1.25rem; }
.auth-field { display: flex; flex-direction: column; gap: .5rem; }
.auth-field-row { display: flex; gap: 1rem; }
.auth-field--75 { flex: 0 0 calc(75% - .5rem); }
.auth-field--25 { flex: 0 0 calc(25% - .5rem); }
.auth-field--67 { flex: 0 0 calc(66.666% - .5rem); }
.auth-field--33 { flex: 0 0 calc(33.333% - .5rem); }
.auth-field--50 { flex: 0 0 calc(50% - .5rem); }

.auth-label { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 700; color: var(--ink); }
.auth-label i { font-size: .85rem; color: var(--accent-dark); }
.auth-label--small { font-size: .85rem; color: var(--ink-2); font-weight: 700; }

.auth-input {
  width: 100%; padding: .95rem 1.1rem; font-size: 1rem; font-family: var(--font-body);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.auth-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.auth-input::placeholder { color: var(--placeholder); }
.auth-input--error { border-color: var(--danger); }
.auth-input--error:focus { box-shadow: 0 0 0 4px var(--danger-tint); }

select.auth-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236e6e73'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%236e6e73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

.auth-password-wrapper { position: relative; }
.auth-input--password { padding-right: 3.25rem; }
.auth-password-toggle {
  position: absolute; right: 0; top: 0; height: 100%; width: 3.25rem;
  border: none; background: transparent; color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: color .2s var(--ease);
}
.auth-password-toggle:hover, .auth-password-toggle:focus { outline: none; color: var(--accent-dark); }

.auth-error { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--danger); font-weight: 600; }

/* Checkbox */
.auth-checkbox { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; user-select: none; position: relative; }
.auth-checkbox input { position: absolute; opacity: 0; cursor: pointer; }
.auth-checkbox-mark {
  width: 20px; height: 20px; margin-top: .1rem; border: 1.5px solid var(--line); border-radius: 6px;
  background: var(--paper); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.auth-checkbox-mark::after { content: '✓'; color: #fff; font-size: .85rem; font-weight: 700; opacity: 0; transition: opacity .2s var(--ease); }
.auth-checkbox input:checked ~ .auth-checkbox-mark { background: var(--accent); border-color: var(--accent); }
.auth-checkbox input:checked ~ .auth-checkbox-mark::after { opacity: 1; }
.auth-checkbox:hover .auth-checkbox-mark { border-color: var(--accent); }
.auth-checkbox-label { font-size: .95rem; color: var(--ink-2); line-height: 1.6; }
.auth-checkbox-label a { color: var(--accent-dark); font-weight: 700; text-decoration: none; }
.auth-checkbox-label a:hover { text-decoration: underline; }
.auth-checkbox--error .auth-checkbox-mark { border-color: var(--danger); }

.auth-agreements { display: flex; flex-direction: column; gap: 1rem; }

/* Cookie-Hinweis — dieselbe Optik wie kontakt.css .cookie-notice */
.auth-cookie-notice { display: flex; gap: 1rem; padding: 1.1rem; background: var(--accent-tint); border-radius: var(--r-sm); align-items: flex-start; }
.auth-cookie-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,150,255,.12); border-radius: var(--r-sm); color: var(--accent-dark); font-size: 1.1rem; }
.auth-cookie-content { flex: 1; font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.auth-cookie-content strong { color: var(--ink); }
.auth-cookie-btn {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem;
  padding: .6rem 1.2rem; background: var(--accent); color: #fff; border: none; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: .88rem; font-weight: 700; cursor: pointer; transition: background .2s var(--ease);
}
.auth-cookie-btn:hover { background: var(--accent-dark); }

/* Optionen-Zeile (Remember me / Passwort vergessen) */
.auth-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.auth-link { font-size: .95rem; color: var(--accent-dark); font-weight: 700; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

/* Erfolgsmeldung */
.auth-success { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: var(--success-tint); border-radius: var(--r-sm); }
.auth-success-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.auth-success-title { font-size: 1rem; font-weight: 800; color: var(--ink); margin: 0 0 .3rem; }
.auth-success-text { font-size: .92rem; color: var(--ink-2); line-height: 1.55; margin: 0; }

/* Hinweis-/Info-Panel — ersetzt die Amber-"Tipp"-Box, ein Akzentton */
.auth-note { display: flex; gap: 1rem; margin-top: 1.75rem; padding: 1.1rem 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); }
.auth-note-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.auth-note-text { font-size: .92rem; color: var(--ink-2); line-height: 1.55; }
.auth-note-text strong { color: var(--ink); }

/* Info-Box unter der Karte (Passwort-Reset "Hinweis") */
.auth-info-box { display: flex; gap: 1rem; margin-top: 1.5rem; padding: 1.25rem; background: var(--faint); border-radius: var(--r-md); }
.auth-info-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.auth-info-title { font-size: .95rem; font-weight: 800; color: var(--ink); margin: 0 0 .35rem; }
.auth-info-text { font-size: .88rem; color: var(--ink-2); line-height: 1.55; margin: 0; }

/* Nächste-Schritte-Liste (Verify) */
.auth-steps { text-align: left; color: var(--ink-2); font-size: .95rem; line-height: 1.7; padding-left: 1.4rem; margin: 0 0 1.75rem; }

/* ====================================================================
   BUTTONS — Pillen, EIN Akzentton, kein Gradient/Glow.
   ==================================================================== */
.auth-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.75rem; border-radius: var(--r-pill); font-family: var(--font-body);
  font-size: 1rem; font-weight: 700; border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.auth-btn--primary { background: var(--accent); color: #fff; }
.auth-btn--primary:hover { background: var(--accent-dark); transform: translateY(-1px); color: #fff; text-decoration: none; }
.auth-btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.auth-btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; text-decoration: none; }

/* Zurück-Link / Prompt unter der Karte */
.auth-prompt { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); text-align: center; }
.auth-prompt-text { font-size: .95rem; color: var(--ink-2); margin-right: .4rem; }
.auth-prompt-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--accent-dark); text-decoration: none; font-weight: 700; }
.auth-prompt-link:hover { text-decoration: underline; }

.auth-back { margin-top: 1.75rem; text-align: center; }
.auth-back-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--ink-2); text-decoration: none; font-weight: 700; }
.auth-back-link:hover { color: var(--accent-dark); }

/* ====================================================================
   SIDEBAR (Login/Registrieren) — offen, keine Karte, wie sonst auf der
   Seite (feature-row/highlights): Karten sind für Formulare reserviert.
   ==================================================================== */
.auth-sidebar { display: flex; flex-direction: column; height: 100%; }
.auth-sidebar-header { margin-bottom: 2rem; }
.auth-sidebar-title { font-size: clamp(1.5rem,2.6vw,1.9rem); margin: 0 0 .5rem; letter-spacing: -0.015em; }
.auth-sidebar-subtitle { font-size: 1rem; color: var(--ink-2); margin: 0; }

.auth-features { display: flex; flex-direction: column; gap: 1.75rem; }
.auth-feature { display: flex; gap: 1.1rem; align-items: flex-start; }
.auth-feature-icon {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-tint); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.auth-feature-title { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin: 0 0 .35rem; }
.auth-feature-text { font-size: .92rem; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 767.98px) {
  .auth-page { padding: clamp(32px,6vw,48px) 0; }
  .auth-card { padding: 1.5rem; border-radius: var(--r-md); }
  .auth-field-row { flex-direction: column; gap: 1.25rem; }
  .auth-field--75, .auth-field--25, .auth-field--67, .auth-field--33, .auth-field--50 { flex: 1 1 100%; }
  .auth-options { flex-direction: column; align-items: flex-start; }
  .auth-cookie-notice { flex-direction: column; }
}