/*
  VocalHero – Stil-Schicht für Anmelden, Registrieren, Passwort, E-Mail-Bestätigung und Konto.
  Wird NACH styles.css und account.css geladen und ändert nur das Aussehen:
  Himmelblau, weiße Karten, Gelbgold als Akzent, Newsreader/Archivo. Kein Dunkelblau.
  Aufbau, Formulare und Skripte bleiben unverändert.
  Schriften lokal ausgeliefert (SIL OFL 1.1, siehe fonts/LIZENZ.txt).
*/

@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/newsreader-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url("fonts/newsreader-italic-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/archivo-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/archivo-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#c6e6fb; --bg2:#e4f3fe; --card:#ffffff; --text:#1c1e24; --muted:#5a5f6a;
  --border:rgba(28,30,36,.12); --primary:#f4cf62; --primary2:#7cc4f3;
  --shadow:0 50px 120px -40px rgba(38,110,170,.45); --radius:24px;
  --success:#17693c; --danger:#9c2f1b;
  --vh-gold:#e3ad34; --vh-gold-2:#f4cf62; --vh-gold-ink:#8a5f00;
  --vh-ink:#1c1e24; --vh-muted:#4b505b; --vh-faint:#5a5f6a;
  --vh-sky-1:#e4f3fe; --vh-sky-3:#a8d8f9; --vh-sun-1:#fff3cf; --vh-sun-3:#f7d572;
  --vh-line:rgba(28,30,36,.11); --vh-line-2:rgba(28,30,36,.22);
  --vh-ease:cubic-bezier(.32,.72,0,1);
  --vh-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --vh-sans:"Archivo",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

html{background:#a8d8f9}
body{min-height:100vh;min-height:100dvh}
body,body.auth-page,body.account-create-page{font-family:var(--vh-sans);color:var(--vh-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:
  radial-gradient(70% 560px at 12% -90px,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
  radial-gradient(60% 520px at 92% 100%,rgba(255,255,255,.6),rgba(255,255,255,0) 70%),
  linear-gradient(180deg,#d9eefe,#a8d8f9);background-attachment:fixed}
h1,h2,h3,.auth-card h1,.account-intro-copy h1,.account-form-head h2,.verify-email-card h1,.hero h1,.section-head h2,.parent-grid h2,.newsletter-card h2{font-family:var(--vh-serif);font-weight:500;letter-spacing:-.028em;color:var(--vh-ink);text-wrap:balance;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5}
::selection{background:var(--vh-gold-2);color:#1c1e24}
:focus-visible{outline:2px solid var(--vh-ink);outline-offset:3px}

/* ---------- Marke ---------- */
.brand,.account-brand{font-family:var(--vh-serif);font-size:1.3rem;font-weight:500;letter-spacing:-.02em;color:var(--vh-ink)}
.brand-mark,.brand-mark:not(.brand-mark-image){background:url("vocalhero-mark-96.png") center/cover;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.85),0 8px 18px -8px rgba(38,110,170,.6);font-size:0;color:transparent}
.account-brand-image{width:38px;height:38px;border:0;border-radius:11px;background:url("vocalhero-mark-96.png") center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.85),0 8px 18px -8px rgba(38,110,170,.6)}
.account-brand-image img{opacity:0}

/* ---------- Kleine Marken über Überschriften ---------- */
.eyebrow,.account-step{display:inline-flex;align-items:center;gap:.7em;margin-bottom:16px;padding:.62em 1.05em .6em;border:1px solid rgba(124,196,243,.55);border-radius:999px;background:var(--vh-sky-1);color:var(--vh-muted);font-size:.6875rem;font-weight:500;line-height:1;letter-spacing:.19em;text-transform:uppercase}
.eyebrow::before,.account-step::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--vh-gold);box-shadow:0 0 0 3px rgba(244,207,98,.35)}

/* ---------- Knöpfe ---------- */
.btn{min-height:54px;padding:0 26px;border-radius:999px;font-weight:600;letter-spacing:.005em;transition:transform .6s var(--vh-ease),box-shadow .6s var(--vh-ease),background-color .5s var(--vh-ease),border-color .5s var(--vh-ease)}
.btn:hover{transform:none}
.btn:active{transform:scale(.975)}
.primary,.btn.primary{background:linear-gradient(180deg,#fbdf86 0%,#efbf45 100%);color:#2a1c02;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(140,96,8,.26),0 14px 30px -14px rgba(214,158,30,.8)}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(140,96,8,.26),0 20px 40px -14px rgba(214,158,30,.95)}
.secondary,.btn.secondary{background:rgba(255,255,255,.6);border-color:var(--vh-line-2);color:var(--vh-ink)}
.btn.secondary:hover{background:#fff;border-color:var(--vh-ink)}
.header-account-button{min-height:44px;border-radius:999px}
.logout-button{padding:10px 18px;border:1px solid var(--vh-line-2);border-radius:999px;background:rgba(255,255,255,.6);color:var(--vh-ink);font-weight:600;transition:background-color .5s var(--vh-ease),border-color .5s var(--vh-ease)}
.logout-button:hover{background:#fff;border-color:var(--vh-ink)}

/* ---------- Karten: Schale mit Doppelrand ---------- */
.auth-card,.verify-email-card,.account-create-card{border:1px solid #fff;border-radius:30px;background:linear-gradient(180deg,#fff,#fffaf0);box-shadow:0 0 0 7px rgba(255,255,255,.32),0 0 0 8px rgba(255,255,255,.7),0 60px 120px -40px rgba(38,110,170,.55)}
.auth-card{padding:clamp(26px,4vw,40px)}
.auth-card h1{font-size:clamp(2.4rem,7vw,3.5rem);line-height:1}
.auth-lead,.verify-email-lead{color:var(--vh-muted)}
.verify-email-lead strong{color:var(--vh-ink)}

/* ---------- Formulare ---------- */
.auth-form label,.account-field>label,.account-class-field>legend,.verify-email-resend>label{color:var(--vh-ink);font-size:.875rem;font-weight:600}
.auth-form input,.account-input-wrap input,.newsletter-form input[type=email]{min-height:54px;border:1px solid var(--vh-line-2);border-radius:14px;background:#fff;color:var(--vh-ink);transition:border-color .5s var(--vh-ease),box-shadow .5s var(--vh-ease),background-color .5s var(--vh-ease)}
.auth-form input::placeholder,.account-input-wrap input::placeholder{color:#6c717c}
.auth-form input:focus,.account-input-wrap input:focus,.newsletter-form input[type=email]:focus{border-color:var(--vh-ink);background:#fff;box-shadow:0 0 0 4px rgba(244,207,98,.38)}
.account-input-symbol,.password-toggle{color:var(--vh-faint)}
.password-toggle:hover,.password-toggle:focus-visible{background:rgba(28,30,36,.06);color:var(--vh-ink)}
.field-help,.account-field>small,.account-input-wrap+small,.account-field-description,.account-class-field legend span,.account-minor-note,.account-submit-note,.auth-footnote{color:var(--vh-faint)}
.auth-link,.account-login-row a,.account-consent a,.auth-footnote a{color:var(--vh-gold-ink);font-weight:600;border-bottom:1px solid rgba(138,95,0,.35);transition:border-color .4s var(--vh-ease)}
.auth-link:hover,.account-login-row a:hover,.account-consent a:hover{border-color:var(--vh-gold-ink);text-decoration:none}
.auth-divider{color:var(--vh-faint);font-size:.8125rem}
.auth-divider:before,.auth-divider:after{background:var(--vh-line)}
.auth-alert{border-radius:16px}
.auth-alert.error{background:rgba(226,114,91,.12);border-color:rgba(200,84,62,.42);color:#9c2f1b}
.auth-alert.success{background:rgba(60,170,110,.12);border-color:rgba(40,150,90,.38);color:#17693c}

/* ---------- Registrierung ---------- */
.account-create-card{overflow:hidden}
.account-create-intro{border-right:1px solid rgba(255,255,255,.7);background:radial-gradient(90% 60% at 100% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 62%),linear-gradient(165deg,var(--vh-sun-1) 0%,var(--vh-sun-3) 100%)}
.account-create-intro::after{display:none}
.account-intro-copy h1{font-size:clamp(2.7rem,5vw,4.3rem);line-height:.96;letter-spacing:-.034em;color:var(--vh-ink)}
.account-intro-copy h1 span{color:inherit;font-style:italic;font-weight:400;margin-inline:-.07em;padding-inline:.07em;background:linear-gradient(180deg,transparent 0 66%,#fff 66% 91%,transparent 91%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.account-intro-copy p,.account-form-head p{color:var(--vh-muted)}
.account-benefit{border:1px solid rgba(255,255,255,.8);border-radius:18px;background:rgba(255,255,255,.6)}
.account-benefit-icon{border:1px solid rgba(138,95,0,.22);border-radius:12px;background:#fff;color:var(--vh-gold-ink);font-weight:500}
.account-benefit strong{color:var(--vh-ink);font-family:var(--vh-serif);font-size:1.0625rem;font-weight:500;letter-spacing:-.01em}
.account-benefit small,.account-security-note{color:var(--vh-muted)}
.account-form-panel{background:transparent}
.account-form-head h2{font-size:clamp(2rem,3.6vw,2.7rem);line-height:1.03;color:var(--vh-ink)}
.account-class-grid span{border:1px solid var(--vh-line-2);border-radius:999px;background:#fff;color:var(--vh-muted);font-weight:600;transition:background-color .5s var(--vh-ease),border-color .5s var(--vh-ease),color .4s var(--vh-ease)}
.account-class-grid input:focus-visible+span{outline:2px solid var(--vh-ink);outline-offset:2px}
.password-strength span{background:rgba(28,30,36,.1)}
.password-strength span.active{background:var(--vh-gold)}
.password-rules li{color:var(--vh-faint)}
.password-rules li::before{color:var(--vh-faint)}
.password-rules li.ok,.password-rules li.ok::before{color:#17693c}
[data-password-match].match-ok{color:#17693c!important}
[data-password-match].match-error{color:#9c2f1b!important}
.account-consent span{color:var(--vh-muted)}
.account-consent input{accent-color:var(--vh-gold)}
.account-newsletter-consent,.verify-newsletter-note,.verify-email-help{border:1px solid rgba(124,196,243,.5);border-radius:18px;background:var(--vh-sky-1)}
.account-newsletter-consent strong,.verify-newsletter-note strong,.verify-email-help strong{color:var(--vh-ink)}
.account-newsletter-consent small,.verify-newsletter-note p,.verify-email-help ul{color:var(--vh-muted)}
.account-login-row{border-top:1px solid var(--vh-line);color:var(--vh-muted)}
.verify-email-icon{border:1px solid rgba(227,173,52,.5);border-radius:18px;background:var(--vh-sun-1);color:var(--vh-gold-ink)}
.verify-email-card h1{color:var(--vh-ink);letter-spacing:-.034em}

/* ---------- Konto-Übersicht (dashboard.php) ---------- */
.site-header{background:rgba(255,255,255,.78);border-bottom:1px solid var(--vh-line);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
.main-nav{color:var(--vh-muted)}
.main-nav a:hover{color:var(--vh-ink)}
.alt{background:rgba(255,255,255,.4)}
.lead,.section-head p,.newsletter-card p{color:var(--vh-muted)}
.card,.newsletter-card,.flashcard,.phone{border:1px solid #fff;background:#fff;box-shadow:0 30px 60px -36px rgba(38,110,170,.5)}
.account-progress-grid .card strong,.weekly>strong,.price,.phone-body strong,.flashcard strong{font-family:var(--vh-serif);font-weight:500;letter-spacing:-.03em}
.account-sync-line{border:1px solid var(--vh-line);border-radius:16px;background:rgba(255,255,255,.7)}
.class-buttons button{border:1px solid var(--vh-line-2);border-radius:999px;background:#fff;color:var(--vh-muted);font-weight:600}
.class-buttons button.active{background:linear-gradient(180deg,#fbdf86,#efbf45);border-color:transparent;color:#2a1c02}
.feature-grid b,.tag{color:var(--vh-gold-ink)}
.price-card.featured{border-color:rgba(227,173,52,.8)}
.site-footer{background:rgba(255,255,255,.4);border-top:1px solid var(--vh-line)}

/* ---------- Feste dunkle Farben aus styles.css in die helle Fassung holen ---------- */
.account-email,.trust,.phone-top,.class-result,.price-card ul,.check,.footer-links{color:var(--vh-muted)}
.phone-body{background:linear-gradient(180deg,var(--vh-sky-1),var(--vh-sky-3))}
.phone-body .small,.flashcard small{color:var(--vh-faint)}
.phone-body .translation{color:var(--vh-muted)}
.flashcard span{color:var(--vh-muted)}
.flashcard strong{color:var(--vh-ink)}
.phone-btns button{border:1px solid var(--vh-line);background:#fff;color:var(--vh-ink)}
.progress{background:rgba(28,30,36,.1)}
.stat-pair div{border:1px solid rgba(124,196,243,.5);background:var(--vh-sky-1)}
.check a,.note a{color:var(--vh-gold-ink)}
.social-links a{border:1px solid rgba(124,196,243,.5);background:var(--vh-sky-1);color:var(--vh-ink)}
.consent-backdrop{background:rgba(40,74,104,.32)}
.consent-dialog{border-color:#fff;background:#fff;color:var(--vh-ink);box-shadow:0 50px 120px -30px rgba(30,84,130,.55)}
.consent-options label{border-color:var(--vh-line);background:rgba(28,30,36,.025)}
.account-class-grid input:checked+span{border-color:var(--vh-gold);background:var(--vh-sun-1);color:var(--vh-ink);box-shadow:none}

.menu-button span{background:var(--vh-ink)}
.menu-button[aria-expanded="true"]{background:rgba(28,30,36,.06)}
main .confirm-card{border:1px solid #fff;border-radius:30px;background:linear-gradient(180deg,#fff,#fffaf0);box-shadow:0 0 0 7px rgba(255,255,255,.32),0 0 0 8px rgba(255,255,255,.7),0 60px 120px -40px rgba(38,110,170,.55)}
.confirm-card .confirm-badge{border:1px solid rgba(124,196,243,.5);background:var(--vh-sky-1)}
.confirm-card .confirm-badge.success{color:#17693c}
.confirm-card .confirm-badge.error{color:#9c2f1b}
/* Handy-Menü der Konto-Seite: Kopf liegt über dem Schleier, Schleier ist hell. */
body.menu-open .site-header{z-index:90}
body.menu-open::before{background:rgba(40,74,104,.3)}
@media (max-width:820px){
  .main-nav{border-color:var(--vh-line);background:#fff;box-shadow:0 30px 60px -30px rgba(38,110,170,.55)}
}

@media (max-width:920px){
  .account-create-intro{border-right:0;border-bottom:1px solid rgba(255,255,255,.7)}
}
@media (max-width:640px){
  .auth-card,.verify-email-card,.account-create-card{box-shadow:0 30px 60px -36px rgba(38,110,170,.5)}
  .verify-email-card,.account-create-card{border:0;border-radius:0;background:#fffdf7}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Konto wiederherstellen (20.10.2026) ----------
   .auth-recover: Wege weiter bei vergebener oder unbestätigter Adresse (register.php, login.php).
   .mail-help: aufklappbare Hilfe „E-Mail nicht angekommen?“ (auth_mail_help_html in auth-bootstrap.php). */
.auth-recover{display:grid;gap:12px;margin:0 0 18px;padding:16px;border:1px solid rgba(227,173,52,.5);border-radius:18px;background:var(--vh-sun-1);color:var(--vh-muted)}
.auth-recover[hidden]{display:none}
.auth-recover>p{margin:0;line-height:1.5}
.auth-recover-form{display:grid;gap:10px}
.auth-recover-form label{display:grid;gap:6px;font-weight:600;color:var(--vh-ink)}
.auth-recover-form input[type="email"]{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--vh-line-2);border-radius:12px;background:#fff;font:inherit;color:var(--vh-ink)}
.auth-recover-note{margin:0;font-size:.9rem;line-height:1.45;color:var(--vh-muted)}
.verify-email-resend .auth-recover-note{margin-top:8px}
.verify-email-resend .btn+.btn{margin-top:10px}
.mail-help{margin:14px 0;padding:12px 16px;border:1px solid rgba(124,196,243,.5);border-radius:18px;background:var(--vh-sky-1);color:var(--vh-muted)}
.mail-help summary{cursor:pointer;font-weight:700;color:var(--vh-ink)}
.mail-help ul{margin:10px 0 0;padding-left:20px;line-height:1.55}
.mail-help a{color:var(--vh-gold-ink);font-weight:600}