/* Alle Kommentare auf Englisch für klare Wartbarkeit. */
:root{
  --bg:#0a1122;
  --panel:#0b1730;
  --panel-2:#0a152b;
  --ink:#f2f6ff;
  --muted:#cfe0ff;
  --line:rgba(255,255,255,.26);
  --brand:#11c6ff;
  --brand-2:#2ad173;
  --shadow:0 18px 48px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(17,198,255,.30), 0 18px 52px rgba(17,198,255,.14);
  --radius:18px;
  --maxw:1080px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font:16px/1.62 Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 600px at 8% -10%, rgba(17,198,255,.12), transparent 60%),
    radial-gradient(900px 500px at 92% -8%, rgba(42,209,115,.12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 80px),
    var(--bg);
  letter-spacing:.2px;
}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:20px}

/* Header */
.header{position:static;background:none;border:none;backdrop-filter:none}
.brand{margin:auto;padding:14px 0 12px;display:grid;place-items:center;position:relative}
.brand-img{height:80px;width:auto;display:block;position:relative;z-index:1;animation:logoPulse 3.6s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(17,198,255,.55)) drop-shadow(0 0 16px rgba(42,209,115,.35));}
.brand-text{display:none;font-weight:900;font-size:1.2rem;letter-spacing:.6px;text-transform:lowercase;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:160px;height:160px;border-radius:50%;
  background:conic-gradient(from 0deg,#11c6ff,#2ad173,#11c6ff);
  filter:blur(22px);opacity:.6;pointer-events:none;z-index:0;animation:rotateHalo 12s linear infinite;
}
@keyframes rotateHalo{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes logoPulse{
  0%,100%{filter:drop-shadow(0 0 8px rgba(17,198,255,.55)) drop-shadow(0 0 16px rgba(42,209,115,.35))}
  50%{filter:drop-shadow(0 0 16px rgba(17,198,255,.85)) drop-shadow(0 0 28px rgba(42,209,115,.55))}
}

/* Hero */
.hero{padding:24px 0 10px;display:grid;gap:18px}
.title{font-weight:900;font-size:clamp(26px,4.6vw,42px);line-height:1.16}
.sub{color:var(--muted)}

.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.quizCard{display:grid;gap:16px;padding:18px}
.progress{height:9px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.bar{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.q{display:grid;gap:12px}
.qTitle{font-weight:800}
.qDesc{color:var(--muted)}
.qList{display:grid;gap:12px}
.qItem{display:flex;gap:12px;align-items:center;padding:16px;border-radius:14px;border:1px solid var(--line);
  background:rgba(6,10,20,.62);cursor:pointer;transition:.15s ease}
.qItem:hover{border-color:rgba(17,198,255,.66);background:rgba(12,18,36,.82);transform:translateY(-1px)}
.qItem:focus-visible{outline:2px solid var(--brand)}
.radio{width:22px;height:22px;border:2px solid rgba(255,255,255,.9);border-radius:999px;position:relative;flex:0 0 auto}
.qItem[aria-checked="true"] .radio::after{content:"";position:absolute;inset:4px;border-radius:999px;background:linear-gradient(180deg,var(--brand),var(--brand-2))}
.qActions{display:flex;gap:10px;flex-wrap:wrap}

.btn{-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.15rem;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  color:var(--ink);font-weight:800;cursor:pointer;transition:.18s ease;box-shadow:var(--shadow);min-height:44px}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,rgba(17,198,255,.36),rgba(17,198,255,.12));border-color:rgba(17,198,255,.55);box-shadow:var(--glow)}

.media-img{display:block;margin:14px auto 0;width:100%;max-width:960px;height:auto;border:none;border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.45);object-fit:cover;background:transparent;aspect-ratio:16/9}

.section{margin-top:26px}
.feature{display:grid;gap:16px;grid-template-columns:1.25fr .75fr}
@media (max-width:960px){.feature{grid-template-columns:1fr}}
.panel-pad{padding:18px}
.klist{display:grid;gap:12px;margin-top:12px;list-style:none;padding:0}
.kitem{display:flex;gap:10px;align-items:flex-start}
.kitem i{width:22px;height:22px;border-radius:8px;border:1px solid rgba(42,209,115,.66);
  background:linear-gradient(180deg,rgba(42,209,115,.4),rgba(42,209,115,.12));display:inline-grid;place-items:center;color:#eafff1;font-weight:800}

/* Risiko */
.risk{max-width: var(--maxw);margin: 0 auto;}
.risk .box{
  width:100%;max-width:860px;padding:22px 28px;border:1px solid rgba(255,255,255,.28);border-radius:16px;
  background:radial-gradient(120% 140% at 15% -40%, rgba(255,106,106,.22), transparent 60%), linear-gradient(180deg, rgba(24,28,48,.90), rgba(16,22,40,.96));
  box-shadow:0 10px 30px rgba(0,0,0,.45);color:var(--muted);line-height:1.6;text-align:center;margin:0 auto;
}
.risk h3{margin:0 0 10px;font-size:1.08rem;color:#ffd1d1}

/* Footer */
.footer{margin:0 0 36px;color:#b8c9f4;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.links{display:grid;grid-auto-flow:column;gap:14px}

/* Utilities */
.hide{display:none !important}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fade{animation:fade .28s ease both}

/* Cookie-Banner */
.cookie-banner{position:fixed;inset:auto 0 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;z-index:9999;background:rgba(10,17,34,.94);color:#fff;box-shadow:0 -6px 24px rgba(0,0,0,.35)}
.cookie-banner a{color:var(--brand-2);text-decoration:underline}
.cookie-banner .btn{border:none}
.cookie-text{margin:0;line-height:1.5}

/* Mobile‑Optimierung */
@media (max-width:600px){
  .wrap{padding:16px}
  .btn{width:100%}
  .quizCard{padding:14px}
  .qItem{padding:14px}
  .brand-img{height:84px}
}

/* Bessere Lesbarkeit von langen Überschriften */
.card .title{word-wrap:break-word;overflow-wrap:anywhere}


/* Small button size variant */
.btn.sm{padding:.7rem .9rem;min-height:38px;font-size:.95rem}


/* === Accessibility: improve contrast for quiz option text === */
.qItem span + span{ color:#e8efff; font-weight:600; }
.qItem{ color:#e8efff; }
.qItem .radio{ border-color:rgba(255,255,255,.9); }
.qItem:hover{ border-color:rgba(17,198,255,.8); }
.qItem[aria-checked="true"] span + span{ color:#ffffff; }



/* === Fix 1: Center Risk section === */
.risk{ display:flex; justify-content:center; align-items:center; }
.risk .box{ margin-left:auto; margin-right:auto; text-align:center; }

/* === Fix 2: Cookie banner buttons too large on mobile === */
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap }
@media (max-width:600px){
  .cookie-banner{ flex-direction:column; align-items:stretch; gap:10px }
  .cookie-actions{ display:grid; grid-auto-flow:row; gap:8px; width:100% }
  .cookie-banner .btn{ width:100%; padding:.6rem .8rem; min-height:38px; font-size:.95rem }
}



/* === Strong center alignment for Risk box === */
.risk{ display:grid; place-items:center; }
.risk .box{ margin: 0 auto !important; width: min(100%, 860px); }