/* ---- AUTH PAGE (Updated) ---- */
:root {
  --auth-bg: linear-gradient(135deg,#f5f7fa 0%,#e8ecf3 100%);
  --auth-fg: #0f172a;
  --auth-glass-bg: rgba(255,255,255,0.55);
  --auth-border: rgba(0,0,0,0.08);
  --auth-input-bg: rgba(255,255,255,0.9);
  --auth-input-border: rgba(0,0,0,0.15);
  --auth-primary: #2563eb;
  --auth-primary-accent: #3b82f6;
  --auth-danger: #dc2626;
  --auth-success: #16a34a;
  --auth-radius: 22px;
  --auth-shadow: 0 10px 28px -8px rgba(0,0,0,0.18), 0 6px 14px -6px rgba(0,0,0,0.12);
  --auth-transition: .5s cubic-bezier(.19,1,.22,1);
  --toggle-bg-light: #e2e8f0;
  --toggle-bg-dark: #1e293b;
  --toggle-knob: #ffffff;
}

[data-theme='dark'] {
  --auth-bg: radial-gradient(circle at 30% 20%, #0e1624, #070c14 70%);
  --auth-fg: #f1f5f9;
  --auth-glass-bg: rgba(17,25,40,0.78);
  --auth-border: rgba(255,255,255,0.08);
  --auth-input-bg: rgba(36,47,66,0.9);
  --auth-input-border: rgba(255,255,255,0.12);
  --auth-primary: #60a5fa;
  --auth-primary-accent: #3b82f6;
  --auth-shadow: 0 10px 34px -10px rgba(0,0,0,0.65), 0 6px 16px -6px rgba(0,0,0,0.5);
  --toggle-knob: #0f172a;
}

html, body { height:100%; }
body:has(.auth-page-wrapper){
  background: var(--auth-bg) fixed;
  background-size:cover;
  color: var(--auth-fg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  -webkit-font-smoothing: antialiased;
}

.auth-page-wrapper { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:clamp(1.5rem,3vw,3rem) 1rem; overflow:hidden; }

/* Subtler, lighter orbs (performance) */
.bg-orb { position:absolute; width:440px; height:440px; border-radius:50%; filter:blur(80px); opacity:.40; animation:orbFloat 26s ease-in-out infinite; mix-blend-mode:plus-lighter; }
.bg-orb.orb1 { top:-110px; left:-120px; background: radial-gradient(circle at 35% 35%, rgba(96,165,250,.55), rgba(59,130,246,0)); }
.bg-orb.orb2 { bottom:-140px; right:-140px; background: radial-gradient(circle at 65% 60%, rgba(147,51,234,.45), rgba(59,130,246,0)); animation-delay:7s; }
.bg-orb.orb3 { top:38%; left:55%; background: radial-gradient(circle at 50% 50%, rgba(16,185,129,.42), rgba(59,130,246,0)); animation-delay:14s; }
@keyframes orbFloat { 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(28px,-20px,0) scale(1.05);} }

.auth-card { position:relative; z-index:2; width:min(100%, 560px); background:var(--auth-glass-bg); backdrop-filter:blur(34px) saturate(160%); -webkit-backdrop-filter:blur(34px) saturate(160%); border:1px solid var(--auth-border); border-radius:28px; padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2.2vw,2rem) 2.4rem; box-shadow:var(--auth-shadow); animation:cardIn .7s var(--auth-transition) backwards; }
@keyframes cardIn { 0%{opacity:0; transform:translateY(32px) scale(.96);} 100%{opacity:1; transform:translateY(0) scale(1);} }

.brand-bar .brand { font-size:clamp(1.55rem,2.4vw,2.05rem); font-weight:700; letter-spacing:-.6px; background:linear-gradient(92deg,#3b82f6,#6366f1 45%,#22c55e 85%); -webkit-background-clip:text; color:transparent; }
/* Entfernt animierten Unterstrich */
.brand-bar .brand:after { content:none !important; }

/* Theme Toggle (neu) */
.theme-toggle { cursor:pointer; user-select:none; display:inline-flex; align-items:center; }
.theme-toggle input { display:none; }
.toggle-track { position:relative; width:68px; height:30px; background:linear-gradient(135deg,var(--toggle-bg-light),#ffffff); border-radius:1000px; padding:4px 8px; display:flex; align-items:center; justify-content:space-between; gap:4px; box-shadow:inset 0 1px 2px rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.15); transition:background .5s ease, box-shadow .5s ease; }
[data-theme='dark'] .toggle-track { background:linear-gradient(135deg,#1f2937,#0f172a); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.55); }
.toggle-track .icon { display:flex; width:14px; height:14px; color:#64748b; opacity:.65; transition:opacity .4s ease, transform .5s ease; }
[data-theme='dark'] .toggle-track .icon { color:#94a3b8; }
.toggle-knob { position:absolute; top:3px; left:3px; width:24px; height:24px; background:var(--toggle-knob); border-radius:50%; box-shadow:0 4px 10px -2px rgba(0,0,0,.35), 0 2px 4px -2px rgba(0,0,0,.4); transition:transform .55s var(--auth-transition), background .4s ease; }
/* Generische Animation statt ID-spezifisch, wirkt für auth & payment */
.theme-toggle input:checked + .toggle-track .toggle-knob { transform:translateX(38px); }
.theme-toggle input:not(:checked) + .toggle-track .moon { opacity:.25; }
.theme-toggle input:checked + .toggle-track .sun { opacity:.25; }
.theme-toggle input:checked + .toggle-track .moon { opacity:1; }
.theme-toggle input:not(:checked) + .toggle-track .sun { opacity:1; }

/* Tabs */
.toggle-tabs { position:relative; display:grid; grid-template-columns:repeat(2,1fr); background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.2)); border:1px solid var(--auth-border); border-radius:1000px; padding:5px; gap:6px; box-shadow:inset 0 1px 3px rgba(255,255,255,.5), 0 2px 5px rgba(0,0,0,0.08); margin-bottom:1.8rem; }
[data-theme='dark'] .toggle-tabs { background:linear-gradient(145deg,rgba(17,25,40,.85),rgba(17,25,40,.45)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.toggle-btn { border:none; background:transparent; font-weight:600; font-size:.92rem; padding:.75rem .9rem; color:var(--auth-fg); letter-spacing:.35px; position:relative; z-index:2; }
.toggle-btn:focus { outline:none; }
.active-indicator { position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 8px); border-radius:1000px; background:linear-gradient(125deg,var(--auth-primary),var(--auth-primary-accent)); transition:transform .55s var(--auth-transition); box-shadow:0 4px 14px -4px rgba(59,130,246,.55), 0 2px 6px -3px rgba(0,0,0,.55); }

/* Panels Single Layout */
.panels-wrapper { position:relative; }
.panels-wrapper.single-panel { display:block; }
.panel { transition:opacity .38s ease, transform .45s ease; will-change:opacity,transform; }
.panel.hidden { opacity:0; transform:translateY(10px); pointer-events:none; position:absolute; inset:0; }
.panel:not(.hidden) { opacity:1; transform:translateY(0); }

.panel-title { font-size:clamp(1.55rem,2.2vw,2.05rem); font-weight:700; letter-spacing:-.55px; margin-bottom:.35rem; }
.panel-sub { font-size:.9rem; opacity:.75; margin-bottom:1.5rem; }

/* Inputs */
.form-floating>.form-control, .form-floating>.form-control:focus { background:var(--auth-input-bg); border:1px solid var(--auth-input-border); box-shadow:0 1px 2px rgba(0,0,0,0.08); transition:border-color .3s ease, box-shadow .35s ease, background .4s ease; }
.form-floating>.form-control:focus { border-color:var(--auth-primary); box-shadow:0 0 0 3px rgba(59,130,246,.25); }
.form-floating label { color:var(--auth-fg); opacity:.55; font-weight:500; }

.reveal-btn { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.25); border:1px solid var(--auth-border); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px) saturate(180%); -webkit-backdrop-filter:blur(6px) saturate(180%); cursor:pointer; transition:all .4s ease; color:var(--auth-fg); }
[data-theme='dark'] .reveal-btn { background:rgba(255,255,255,0.08); }
.reveal-btn:hover { transform:translateY(-50%) scale(1.07); box-shadow:0 5px 12px -4px rgba(0,0,0,.45); }
.reveal-btn.revealed { background:linear-gradient(135deg,var(--auth-primary),var(--auth-primary-accent)); color:#fff; }

/* CTA Button */
.btn-primary-cta { --btn-grad: linear-gradient(95deg,var(--auth-primary) -10%,var(--auth-primary-accent) 60%,#10b981 120%); border:none; padding:1rem 1.15rem; font-weight:600; letter-spacing:.35px; font-size:1rem; border-radius:16px; background:var(--btn-grad); color:#fff; position:relative; overflow:hidden; box-shadow:0 10px 20px -10px rgba(59,130,246,.6), 0 6px 14px -8px rgba(0,0,0,.55); transition:transform .55s var(--auth-transition), box-shadow .55s var(--auth-transition); }
.btn-primary-cta:before { content:''; position:absolute; top:0; left:-55%; width:45%; height:100%; background:linear-gradient(100deg,rgba(255,255,255,.25),rgba(255,255,255,0)); transform:skewX(-25deg); transition:transform .85s ease; }
.btn-primary-cta:hover:before { transform:translateX(250%) skewX(-25deg); }
.btn-primary-cta:hover { transform:translateY(-3px); box-shadow:0 18px 32px -15px rgba(59,130,246,.55), 0 10px 22px -14px rgba(0,0,0,.55); }
.btn-primary-cta:active { transform:translateY(1px) scale(.985); }

/* Flash */
.flash-messages { margin-bottom:1rem; }
.auth-alert { border:none; border-radius:14px; padding:.85rem 1rem; font-size:.82rem; background:rgba(255,255,255,0.55); color:#334155; backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%); box-shadow:0 4px 10px -4px rgba(0,0,0,.25); animation:fadeSlide .45s ease; }
@keyframes fadeSlide { 0%{opacity:0; transform:translateY(-4px);} 100%{opacity:1; transform:translateY(0);} }
[data-theme='dark'] .auth-alert { background:rgba(17,25,40,0.78); color:#e2e8f0; }
.auth-alert.alert-danger { border-left:4px solid #dc2626; }
.auth-alert.alert-success { border-left:4px solid #16a34a; }

/* Referral */
.referral-box { background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(96,165,250,.28)); border:1px solid rgba(59,130,246,.35); padding:.6rem .8rem; border-radius:14px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-weight:500; }
[data-theme='dark'] .referral-box { background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(96,165,250,.12)); }

.link-inline { background:none; border:none; color:var(--auth-primary); font-weight:600; cursor:pointer; padding:0; position:relative; }
.link-inline:after { content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--auth-primary); transition:width .35s ease; }
.link-inline:hover:after { width:100%; }

.btn-link { background:none; border:none; color:var(--auth-primary); font-weight:600; }
.btn-link:hover { text-decoration:underline; }

.form-check-input { cursor:pointer; }
.form-check-input:focus { box-shadow:none; }
.form-check-input:checked { background:linear-gradient(135deg,var(--auth-primary),var(--auth-primary-accent)); border-color:var(--auth-primary-accent); }

/* Zusatz: Besser sichtbare Checkbox (Datenschutz) in beiden Themes */
body:has(.auth-page-wrapper) .form-check { display:flex; align-items:flex-start; gap:.55rem; /* sauberes Alignment */ }
body:has(.auth-page-wrapper) .form-check-input {
  width: 1.15em;
  height: 1.15em;
  position: relative;
  border: 2px solid var(--auth-input-border);
  background-color: var(--auth-input-bg);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, filter .3s ease;
  appearance: none;
  -webkit-appearance:none;
  border-radius: .28rem;
  margin-top:2px; /* optisch mittig zum Text */
  display:inline-block;
}
body:has(.auth-page-wrapper) .form-check-label { line-height:1.3; }
body:has(.auth-page-wrapper) .form-check-input:hover { filter:brightness(1.05); }
body:has(.auth-page-wrapper) .form-check-input:active { filter:brightness(.95); }
body:has(.auth-page-wrapper) .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);
  border-color: var(--auth-primary);
}
body:has(.auth-page-wrapper) .form-check-input:checked {
  background: linear-gradient(135deg,var(--auth-primary),var(--auth-primary-accent)) !important;
  border-color: var(--auth-primary-accent) !important;
}
/* Custom Haken nun exakt mittig */
body:has(.auth-page-wrapper) .form-check-input:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 12px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: translate(-50%,-56%) rotate(45deg);
  box-sizing:border-box;
}
/* Dark Theme stärkere Differenz: eigener Verlauf */
[data-theme='dark'] body:has(.auth-page-wrapper) .form-check-input:checked {
  background: linear-gradient(140deg,#3b82f6,#6366f1) !important;
  border-color:#6366f1 !important;
}
/* Dark Theme leichte Anpassung für besseren Kontrast der Umrandung */
[data-theme='dark'] body:has(.auth-page-wrapper) .form-check-input {
  border-color: rgba(255,255,255,0.25);
  background-color: var(--auth-input-bg);
}

/* --- Fallback ohne :has (Safari < 15 & ältere Browser) --- */
html[data-theme='light'] .auth-page-wrapper .form-check { display:flex; align-items:flex-start; gap:.55rem; }
html[data-theme='light'] .auth-page-wrapper .form-check-input {
  width: 1.15em;
  height: 1.15em;
  border: 2px solid var(--auth-input-border);
  background-color: var(--auth-input-bg);
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  border-radius: .28rem;
  display: inline-block;
  vertical-align: middle;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, filter .3s ease;
  margin-top:2px;
}
html[data-theme='light'] .auth-page-wrapper .form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);
  border-color: var(--auth-primary);
}
html[data-theme='light'] .auth-page-wrapper .form-check-input:checked {
  background: linear-gradient(135deg,var(--auth-primary),var(--auth-primary-accent));
  border-color: var(--auth-primary-accent);
}
html[data-theme='light'] .auth-page-wrapper .form-check-input:checked::after {
  content: '';
  position: absolute;
  top:50%; left:50%;
  width:6px; height:12px;
  border:2px solid #fff; border-top:none; border-left:none;
  transform:translate(-50%,-56%) rotate(45deg);
  box-sizing:border-box;
}

html[data-theme='dark'] .auth-page-wrapper .form-check { display:flex; align-items:flex-start; gap:.55rem; }
html[data-theme='dark'] .auth-page-wrapper .form-check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15em;
  height: 1.15em;
  border: 2px solid rgba(255,255,255,0.25);
  background: var(--auth-input-bg);
  position: relative;
  border-radius: .28rem;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, filter .3s ease;
  margin-top:2px;
}
html[data-theme='dark'] .auth-page-wrapper .form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.4);
  border-color: var(--auth-primary);
}
html[data-theme='dark'] .auth-page-wrapper .form-check-input:checked {
  background: linear-gradient(140deg,#3b82f6,#6366f1);
  border-color: #6366f1;
}
html[data-theme='dark'] .auth-page-wrapper .form-check-input:checked::after {
  content: '';
  position: absolute;
  top:50%; left:50%;
  width:6px; height:12px;
  border:2px solid #fff; border-top:none; border-left:none;
  transform:translate(-50%,-56%) rotate(45deg);
  box-sizing:border-box;
}

/* High contrast tweak if user has forced-colors active */
@media (forced-colors: active) {
  html[data-theme='light'] .auth-page-wrapper .form-check-input:checked,
  html[data-theme='dark'] .auth-page-wrapper .form-check-input:checked { background: Highlight; border-color: Highlight; }
  html[data-theme='light'] .auth-page-wrapper .form-check-input:checked::after,
  html[data-theme='dark'] .auth-page-wrapper .form-check-input:checked::after { border-color: Canvas; }
}

/* Modal */
.glass-modal { background:var(--auth-glass-bg); backdrop-filter:blur(28px) saturate(160%); -webkit-backdrop-filter:blur(28px) saturate(160%); border:1px solid var(--auth-border); border-radius:22px; overflow:hidden; }
.glass-modal .modal-header { border-bottom:1px solid rgba(255,255,255,.2); }
[data-theme='dark'] .glass-modal .modal-header { border-color:rgba(255,255,255,.05); }

/* Accessibility hidden honeypot */
.hp-wrapper { position:absolute; left:-4000px; width:1px; height:1px; overflow:hidden; }

/* Responsive */
@media (max-width: 620px){
  .auth-card { width:100%; border-radius:24px; padding:1.6rem 1.15rem 2.15rem; }
  .toggle-tabs { font-size:.85rem; padding:4px; }
  .toggle-btn { padding:.65rem .7rem; }
  .bg-orb { filter:blur(70px); opacity:.33; }
}

/* Scrollbar subtle styling */
.auth-card ::-webkit-scrollbar { width:10px; }
.auth-card ::-webkit-scrollbar-track { background:transparent; }
.auth-card ::-webkit-scrollbar-thumb { background:linear-gradient(var(--auth-primary),var(--auth-primary-accent)); border-radius:100px; border:3px solid rgba(0,0,0,0); background-clip:content-box; }

/* --- Pricing (payment.html & preis.html) --- */
.pricing-wrapper { max-width:1180px; margin:0 auto; }
.billing-toggle-wrapper { display:flex; justify-content:center; margin:0 0 2rem; }
.billing-toggle { display:inline-flex; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:4px; border-radius:40px; position:relative; backdrop-filter:blur(14px); }
.billing-toggle button { position:relative; border:0; background:transparent; color:inherit; font:600 .85rem/1 system-ui,Roboto,sans-serif; padding:.6rem 1.35rem; border-radius:30px; cursor:pointer; letter-spacing:.5px; transition:.25s; }
.billing-toggle button.active { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; box-shadow:0 4px 16px -4px rgba(99,102,241,.55); }
.billing-toggle .save-badge { font-size:.65rem; font-weight:700; margin-left:.5rem; background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; padding:3px 10px; border-radius:12px; letter-spacing:.3px; box-shadow:0 2px 8px -2px rgba(22,163,74,.5); }
.price-grid { display:grid; gap:2rem; grid-template-columns:1fr; justify-items:center; }
@media (min-width: 800px){ .price-grid { grid-template-columns:1fr; } }
.price-card.single-plan { justify-self:center; max-width:420px; }
.price-card { position:relative; background:var(--surface-glass,rgba(255,255,255,0.08)); border:1px solid rgba(255,255,255,0.12); backdrop-filter:blur(18px); border-radius:24px; padding:1.75rem 1.5rem 2rem; display:flex; flex-direction:column; box-shadow:0 4px 20px -4px rgba(0,0,0,.35); transition:.35s ease; }
.price-card:hover { transform:translateY(-6px); box-shadow:0 10px 32px -8px rgba(0,0,0,.55); }
.price-badge, .year-badge { position:absolute; top:-12px; left:16px; padding:4px 14px; font-size:.7rem; font-weight:600; letter-spacing:.5px; border-radius:14px; color:#fff; text-transform:uppercase; }
.price-badge { background:linear-gradient(135deg,#ff8a3d,#ff4d4d); box-shadow:0 4px 14px -4px rgba(255,77,77,.6); }
.year-badge { background:linear-gradient(135deg,#6366f1,#8b5cf6); box-shadow:0 4px 14px -4px rgba(99,102,241,.55); }
.discount-pill { position:absolute; top:-12px; right:16px; background:linear-gradient(135deg,#16a34a,#65a30d); color:#fff; font-size:.65rem; padding:4px 12px; font-weight:600; letter-spacing:.5px; border-radius:14px; box-shadow:0 4px 14px -4px rgba(22,163,74,.55); display:none; }
.billing-yearly .price-card .discount-pill { display:block; }
.billing-yearly .recommended .discount-pill { top:20px; }
.price-title { font-size:1.25rem; font-weight:600; margin:0 0 .25rem; display:flex; align-items:center; gap:.4rem; }
.price-sub { font-size:.75rem; opacity:.7; margin:0 0 1.1rem; letter-spacing:.5px; text-transform:uppercase; font-weight:500; }
.price-value { font-size:2.05rem; font-weight:700; margin:0 0 .35rem; }
.price-value span { font-size:1rem; font-weight:500; opacity:.65; margin-left:.25rem; }
.feature-list { list-style:none; padding:0; margin:0 0 1.5rem; font-size:.9rem; line-height:1.4; }
.feature-list li { display:flex; gap:.55rem; align-items:flex-start; margin-bottom:.55rem; }
.feature-list li .check { color:var(--accent,#35c270); font-size:1rem; line-height:1.1; }
.cta-btn { margin-top:auto; display:flex; flex-direction:column; gap:.4rem; }
.cta-btn button, .cta-btn a { width:100%; }
.recommended { border:1px solid var(--accent,#4ecb7d); }
.recommended::after { content:"Beliebt"; position:absolute; top:-13px; right:16px; background:linear-gradient(135deg,#4ecb7d,#35c270); padding:4px 14px; font-size:.65rem; font-weight:600; letter-spacing:.5px; color:#fff; border-radius:14px; box-shadow:0 4px 14px -4px rgba(0,0,0,.45); text-transform:uppercase; }
.heading-wrap { text-align:center; margin:2.8rem 0 1.6rem; }
.heading-wrap h1 { font-size:clamp(1.9rem,3.6vw,2.6rem); font-weight:700; margin:0 0 .6rem; }
.heading-wrap p { margin:0; opacity:.75; font-size:1rem; }
.disclaimer { font-size:.7rem; opacity:.55; text-align:center; margin-top:2.4rem; }
.theme-row { display:flex; justify-content:flex-end; align-items:center; margin:1.2rem 0 .5rem; }
.brand-mini { display:none; }
.price-monthly { display:block; }
.price-yearly { display:none; }
.billing-yearly .price-monthly { display:none; }
.billing-yearly .price-yearly { display:block; }
.btn-yearly { display:none; }
.billing-yearly .btn-yearly { display:block; }
.billing-yearly .btn-monthly { display:none; }
@media (prefers-color-scheme:light){ 
  .price-card{background:linear-gradient(145deg,#ffffff,#f3f5f9); border-color:#e3e8ef;} 
  .billing-toggle { background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.12); }
  .billing-toggle .save-badge { background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; }
}