/* ---------------------------------------------------------------------------
   Gemeinsames Stylesheet: system-check.html (Test) und ergebnis.html
   (Ergebnisseite nach dem Double-Opt-in) laden dieselbe Datei, damit ein
   Designwechsel nicht an zwei Stellen nachgezogen werden muss.
--------------------------------------------------------------------------- */
/* Registrierter Winkel — ohne Registrierung interpoliert der Browser
     Custom Properties nicht, der Lichtrahmen würde springen statt laufen. */
  @property --a{
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  :root{
    --bg:#0a0e14; --bg-card:#141b28; --bg-soft:#111722;
    --blue:#38b6ff; --gold:#ffe6a3; --cream:#f1ede5;
    --muted:#8a93a3; --line:#232c3b;
    --red:#ff7a7a; --yellow:#ffd166; --green:#5ad19a;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{font-family:"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--cream);
    -webkit-font-smoothing:antialiased;}
  body{min-height:100vh;display:flex;flex-direction:column;align-items:center;
    padding:34px 20px 80px;position:relative;overflow-x:hidden;}
  .glow{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none;}
  .glow.b{background:var(--blue);width:380px;height:380px;opacity:.13;top:-120px;left:50%;transform:translateX(-50%);}
  .glow.g{background:var(--gold);width:300px;height:300px;opacity:.07;bottom:-120px;right:-100px;}

  .wrap{position:relative;z-index:2;width:100%;max-width:940px;}
  /* Nur auf der Weiche ist Platz für zwei Karten nebeneinander. */
  body.choosing .wrap{max-width:1040px;}
  /* Erst animieren, wenn der erste Frame steht — sonst zuckt die Breite beim Laden. */
  body.ready .wrap{transition:max-width .5s cubic-bezier(.4,0,.2,1);}
  .brand{display:flex;justify-content:space-between;align-items:center;margin-bottom:38px;}
  .logo{height:42px;width:auto;display:block;}
  .pill{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;
    color:var(--bg);background:var(--gold);padding:6px 13px;border-radius:30px;}

  .card{background:var(--bg-card);border:1px solid var(--line);border-radius:20px;
    padding:40px 36px;box-shadow:0 24px 60px rgba(0,0,0,.4);}
  @media(max-width:520px){.card{padding:30px 22px;border-radius:18px;}}

  .kicker{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--blue);font-weight:700;}
  h1{font-size:40px;line-height:1.14;font-weight:800;letter-spacing:-.5px;margin:20px 0 0;}
  @media(max-width:520px){h1{font-size:30px;}}
  .lead{font-size:17px;line-height:1.7;color:#cfd6e0;margin-top:24px;}
  .lead b{color:var(--gold);}

  .meta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap;}
  .chip{font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:11px 17px;line-height:1.3;}
  .chip b{color:var(--cream);}

  .btn{display:inline-block;width:100%;text-align:center;cursor:pointer;border:none;
    background:var(--blue);color:var(--bg);font-size:17.5px;font-weight:800;letter-spacing:.3px;
    padding:19px 26px;border-radius:14px;margin-top:28px;transition:transform .08s ease,filter .2s;
    font-family:inherit;text-decoration:none;}
  .btn:hover{filter:brightness(1.07);}
  .btn:active{transform:translateY(1px);}
  .btn.gold{background:var(--gold);}
  .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--cream);font-weight:700;font-size:14px;padding:13px;}

  /* Wandernder Lichtrahmen am CTA. Der Verlauf füllt nur den 3px-Rand:
     zwei Masken, per exclude verrechnet, stanzen die Fläche wieder aus.
     Auf dem goldenen Knopf läuft der Bogen in Blau, sonst sieht man ihn nicht. */
  #gateBtn,#bookSend{position:relative;}
  #gateBtn::after,#bookSend::after{
    content:"";position:absolute;inset:-3px;border-radius:15px;padding:3px;pointer-events:none;
    background:conic-gradient(from var(--a),
      transparent 0 58%,
      rgba(56,182,255,.95) 70%,
      #ffffff 78%,
      rgba(56,182,255,.95) 86%,
      transparent 97%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    animation:sweep-a 4.5s linear infinite;
  }
  /* Dieselbe Technik an den beiden CTAs der Weiche — dort läuft der Bogen in
     Gold, weil er auf blauem und auf dunklem Grund sitzt. */
  #startBtn,#bookBtn{position:relative;}
  #startBtn::after,#bookBtn::after{
    content:"";position:absolute;inset:-3px;border-radius:15px;padding:3px;pointer-events:none;
    background:conic-gradient(from var(--a),
      transparent 0 58%,
      rgba(255,230,163,.9) 70%,
      #ffffff 78%,
      rgba(255,230,163,.9) 86%,
      transparent 97%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    animation:sweep-a 4.5s linear infinite;
  }
  @keyframes sweep-a{to{--a:360deg;}}
  @media (prefers-reduced-motion: reduce){
    #gateBtn::after,#bookSend::after,#startBtn::after,#bookBtn::after{animation:none;}
  }

  /* progress */
  .prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
    font-size:12px;color:var(--muted);letter-spacing:.5px;}
  .prog-bar{height:6px;background:var(--bg-soft);border-radius:6px;overflow:hidden;margin-bottom:34px;border:1px solid var(--line);}
  .prog-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),#7fd0ff);
    border-radius:6px;transition:width .35s cubic-bezier(.4,0,.2,1);}

  .q-baustein{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:800;}
  .q-text{font-size:21px;line-height:1.42;font-weight:700;margin:16px 0 32px;min-height:84px;}
  @media(max-width:520px){.q-text{font-size:18px;min-height:74px;}}

  .opt{display:flex;align-items:center;gap:14px;width:100%;cursor:pointer;text-align:left;
    background:var(--bg-soft);border:1.5px solid var(--line);border-radius:13px;
    padding:19px 20px;margin-bottom:16px;color:var(--cream);font-family:inherit;font-size:15.5px;
    transition:border-color .15s,background .15s,transform .08s;}
  .opt:hover{border-color:#3a4a60;background:#16202f;}
  .opt:active{transform:scale(.99);}
  .dot{width:20px;height:20px;border-radius:50%;flex:0 0 auto;border:2px solid;}
  .opt.r .dot{border-color:var(--red);} .opt.y .dot{border-color:var(--yellow);} .opt.g .dot{border-color:var(--green);}
  .opt.r:hover{border-color:var(--red);} .opt.y:hover{border-color:var(--yellow);} .opt.g:hover{border-color:var(--green);}
  .opt small{display:block;color:var(--muted);font-size:12px;margin-top:4px;line-height:1.45;}

  .back{margin-top:14px;font-size:13px;color:var(--muted);cursor:pointer;display:inline-block;background:none;border:none;font-family:inherit;}
  .back:hover{color:var(--cream);}

  /* result */
  .score-ring{display:flex;flex-direction:column;align-items:center;margin:16px 0 8px;}
  .ring{position:relative;width:170px;height:170px;}
  .ring svg{transform:rotate(-90deg);}
  .ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .ring .num b{font-size:50px;font-weight:800;line-height:1;}
  .ring .num span{font-size:13.5px;color:var(--muted);letter-spacing:1px;margin-top:4px;}
  /* Warnhinweis bei kritischem Score (0–45): rot, aber nicht schreiend. */
  .alert-wrap{text-align:center;margin-top:18px;}
  .alert-badge{display:inline-block;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
    font-weight:800;color:#ff7a7a;background:rgba(255,122,122,.12);
    border:1px solid rgba(255,122,122,.38);padding:9px 18px;border-radius:99px;}
  @media(max-width:520px){.alert-badge{font-size:11px;letter-spacing:1.2px;padding:8px 14px;}}

  .verdict{text-align:center;font-size:26px;font-weight:800;margin:22px 0 10px;line-height:1.28;}
  .verdict-sub{text-align:center;font-size:16.5px;line-height:1.66;color:#cfd6e0;
    max-width:660px;margin-left:auto;margin-right:auto;}

  .bars{margin:36px 0 8px;}
  .bar-row{margin-bottom:20px;}
  .bar-top{display:flex;justify-content:space-between;align-items:center;font-size:15px;margin-bottom:8px;}
  .bar-top .nm{font-weight:700;color:var(--cream);}
  .bar-top .nm.weak{color:var(--gold);}
  .bar-top .vl{font-size:13px;color:var(--muted);}
  .bar-track{height:9px;background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
  .bar-fill{height:100%;border-radius:6px;width:0;transition:width .6s ease;}

  .focus{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--gold);
    border-radius:12px;padding:24px 24px;margin-top:34px;}
  .focus .lbl{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:800;}
  .focus h3{font-size:21px;margin:14px 0 12px;}
  .focus p{font-size:16px;line-height:1.7;color:#cfd6e0;}

  .cta-box{background:linear-gradient(160deg,#16202f,#0d1320);border:1px solid var(--line);
    border-radius:16px;padding:32px 28px;margin-top:34px;text-align:center;}
  .cta-box h3{font-size:23px;margin-bottom:14px;line-height:1.3;}
  .cta-box p{font-size:16px;line-height:1.7;color:#cfd6e0;}
  .cta-url{font-size:13.5px;color:var(--gold);letter-spacing:.5px;margin-top:14px;font-weight:700;}

  .greet{text-align:center;font-size:15px;color:var(--blue);font-weight:700;letter-spacing:.4px;margin:18px 0 2px;}
  .detail{margin-top:38px;}
  .detail h2{font-size:16px;color:var(--cream);font-weight:800;letter-spacing:.3px;margin-bottom:10px;}
  .di{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:12px;padding:21px 23px;margin-top:15px;}
  .di-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;}
  .di-top .nm{font-size:16.5px;font-weight:800;color:var(--cream);}
  .di-status{font-size:11.5px;font-weight:800;letter-spacing:.5px;padding:3px 10px;border-radius:20px;white-space:nowrap;}
  .di p{font-size:15px;line-height:1.7;color:#cfd6e0;}
  .di.s-low{border-left-color:var(--red);} .di.s-mid{border-left-color:var(--yellow);} .di.s-high{border-left-color:var(--green);}
  .di-status.s-low{background:rgba(255,122,122,.15);color:var(--red);}
  .di-status.s-mid{background:rgba(255,209,102,.15);color:var(--yellow);}
  .di-status.s-high{background:rgba(90,209,154,.15);color:var(--green);}

  /* email gate */
  .field{width:100%;background:var(--bg-soft);border:1.5px solid var(--line);border-radius:12px;
    padding:17px 18px;color:var(--cream);font-size:15px;font-family:inherit;margin-bottom:16px;}
  .field:focus{outline:none;border-color:var(--blue);}
  .field::placeholder{color:#6a7484;}
  .err{color:var(--red);font-size:12.5px;line-height:1.55;margin:4px 0 12px;display:none;}
  .privacy{font-size:11px;color:var(--muted);line-height:1.65;margin-top:20px;text-align:center;}

  .foot{text-align:center;font-size:11px;color:var(--muted);margin-top:32px;letter-spacing:.5px;line-height:1.6;}
  .card.start-card{position:relative;overflow:hidden;}
  .ring-deco{position:absolute;top:-70px;right:-70px;width:260px;height:260px;pointer-events:none;z-index:0;}
  .ring-deco .rd{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid var(--blue);}
  .ring-deco .rd1{width:260px;height:260px;opacity:.10;}
  .ring-deco .rd2{width:190px;height:190px;opacity:.18;}
  .ring-deco .rd3{width:125px;height:125px;opacity:.30;}
  .ring-deco .rdc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
    background:radial-gradient(circle at 38% 35%, #aee2ff, var(--blue) 60%, #1d7fc0);box-shadow:0 0 22px rgba(56,182,255,.5);}
  .ring-deco .rdd{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 7px rgba(255,230,163,.55);}
  .start-card > *:not(.ring-deco){position:relative;z-index:1;}
  /* ---------- Die Weiche: zwei Wege, die sich ins Quiz verwandeln ----------
     Der Container ist auf der Weiche breiter und schrumpft beim Start auf
     Quiz-Breite zusammen — dadurch wächst die linke Karte optisch ins Quiz. */
  .choice-head{text-align:center;margin-bottom:44px;}
  .choice-head h1{margin-top:14px;}
  .choice-sub{max-width:620px;margin-left:auto;margin-right:auto;}

  .paths{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch;}
  /* Erst ab dem zweiten Frame animieren, sonst zuckt das Raster beim Laden. */
  body.ready .paths{
    transition:grid-template-columns .5s cubic-bezier(.4,0,.2,1), gap .5s cubic-bezier(.4,0,.2,1);
  }
  .path{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:40px 38px;}
  .path-inner{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;
    transition:opacity .3s ease;}
  .path h2{font-size:27px;line-height:1.24;font-weight:800;letter-spacing:-.3px;margin-bottom:18px;}
  .path .path-lead{font-size:16px;line-height:1.72;color:#cfd6e0;flex:1;}
  .path .path-lead b{color:var(--gold);}
  .path .meta{margin-top:30px;}
  .path .btn{margin-top:30px;}

  .lead-path{border-color:rgba(56,182,255,.3);
    background:linear-gradient(165deg,rgba(56,182,255,.09),var(--bg-card) 55%);}

  /* Die Radar-Deko stammt aus dem alten, breiteren Start-Screen. In der
     schmaleren Karte muss sie weiter raus und deutlich zurückgenommen werden,
     sonst liegt der helle Kern mitten im Fließtext. */
  .lead-path .ring-deco{top:-108px;right:-118px;opacity:.5;}
  .lead-path .ring-deco .rdc{opacity:.35;}
  .lead-path .ring-deco .rdd{opacity:.5;}

  /* ---------- Sheet-Deko der rechten Karte ----------
     Gegenstueck zum Radar links: ein angedeutetes Arbeitsblatt. Zwei gestapelte,
     leicht gegeneinander gedrehte Blaetter, darauf Zeilen und abgehakte Kaestchen.
     Gold statt Blau, damit sich beide Karten farblich unterscheiden. */
  .sheet-deco{position:absolute;top:-84px;right:-70px;width:180px;height:200px;
    pointer-events:none;z-index:0;opacity:.5;}
  .sheet-deco .sh{position:absolute;border-radius:8px;border:1.5px solid var(--gold);
    background:linear-gradient(150deg,rgba(255,230,163,.05),rgba(255,230,163,.01));}
  .sheet-deco .sh-back{top:30px;right:46px;width:120px;height:156px;transform:rotate(-10deg);opacity:.20;}
  .sheet-deco .sh-front{top:20px;right:26px;width:126px;height:164px;transform:rotate(6deg);opacity:.42;}
  /* Zeilen und Kaestchen liegen im vorderen Blatt. */
  .sheet-deco .sl{position:absolute;height:2px;border-radius:2px;background:var(--gold);opacity:.5;}
  .sheet-deco .sl-title{height:3px;border-radius:3px;opacity:.75;top:20px;left:14px;width:64px;}
  .sheet-deco .sl1{top:36px;left:14px;width:92px;}
  .sheet-deco .sl2{top:47px;left:14px;width:72px;}
  .sheet-deco .sc{position:absolute;width:10px;height:10px;border-radius:3px;
    border:1.5px solid var(--gold);opacity:.72;}
  .sheet-deco .sc-done{background:var(--gold);opacity:.55;}
  .sheet-deco .sc1{top:71px;left:14px;}
  .sheet-deco .sc2{top:93px;left:14px;}
  .sheet-deco .sc3{top:115px;left:14px;}
  .sheet-deco .sl3{top:75px;left:31px;width:60px;}
  .sheet-deco .sl4{top:97px;left:31px;width:48px;}
  .sheet-deco .sl5{top:119px;left:31px;width:56px;}
  /* Auf schmalen Karten wandert das Blatt weiter aus dem Textbereich heraus. */
  @media(max-width:820px){.sheet-deco{top:-96px;right:-84px;opacity:.38;}}

  .tag{align-self:flex-start;font-size:11px;letter-spacing:2px;text-transform:uppercase;
    font-weight:800;background:var(--gold);color:var(--bg);
    padding:6px 13px;border-radius:99px;margin-bottom:16px;}

  /* Haelt in der rechten Karte exakt den Platz des "Empfohlen"-Badges frei,
     damit Ueberschrift und Text in beiden Karten auf gleicher Hoehe beginnen. */
  .tag.tag-spacer{visibility:hidden;}

  .gold-ghost{border-color:rgba(255,230,163,.45);}
  .gold-ghost:hover{background:rgba(255,230,163,.09);border-color:var(--gold);filter:none;}

  /* Der Übergang: die nicht gewählte Karte weicht, die gewählte übernimmt die
     volle Breite und wächst zugleich auf die Höhe ihres neuen Inhalts, damit
     kein leerer Kasten stehen bleibt. mergeTo() misst die Zielhöhe vorher an
     der noch versteckten Stage. */
  .path{transition:height .5s cubic-bezier(.4,0,.2,1),
    opacity .34s ease, transform .4s cubic-bezier(.4,0,.2,1);}
  .paths.merge-left{grid-template-columns:1fr 0fr;gap:0;}
  .paths.merge-right{grid-template-columns:0fr 1fr;gap:0;}
  .paths.merge-left .book-path{opacity:0;transform:translateX(22px) scale(.95);}
  .paths.merge-right .lead-path{opacity:0;transform:translateX(-22px) scale(.95);}
  .paths.merge-left .lead-path>.path-inner,
  .paths.merge-right .book-path>.path-inner{opacity:0;transition:opacity .2s ease .1s;}

  .stage{position:relative;z-index:1;}

  /* Der Weg-Wechsler unter der Karte: als Pille erkennbar und gut lesbar,
     aber ruhiger als die CTAs — er ist die Ausnahme, nicht der Hauptweg. */
  .switch{margin-top:28px;text-align:center;}
  .switch-btn{display:inline-flex;align-items:center;gap:10px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
    font-family:inherit;font-size:13.5px;font-weight:600;line-height:1.5;
    color:#c8d0da;cursor:pointer;padding:13px 22px;border-radius:99px;
    transition:color .2s ease, background .2s ease, border-color .2s ease, transform .15s ease;}
  .switch-btn::before{content:"⇄";color:var(--blue);font-size:15px;font-weight:700;line-height:1;}
  .switch-btn:hover{color:var(--cream);background:rgba(56,182,255,.11);
    border-color:rgba(56,182,255,.42);transform:translateY(-1px);}
  .switch-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  @media(max-width:520px){
    .switch-btn{font-size:13px;padding:13px 18px;text-align:left;}
  }
  @media (prefers-reduced-motion: reduce){
    .switch-btn{transition:none;}
    .switch-btn:hover{transform:none;}
  }

  /* Nach der Wahl stimmt der Untertitel nicht mehr — die Überschrift bleibt. */
  .choice-sub{overflow:hidden;max-height:200px;}
  body.ready .choice-sub{transition:opacity .3s ease, max-height .45s ease, margin-top .45s ease;}
  body.merged .choice-sub{opacity:0;max-height:0;margin-top:0;}

  @media(max-width:820px){
    .paths{grid-template-columns:1fr;gap:18px;}
    /* Untereinander gestapelt gibt es nichts mehr auszurichten — der
       Badge-Platzhalter wuerde nur eine Luecke ueber der Ueberschrift lassen. */
    .tag.tag-spacer{display:none;}
    .paths.merge-left,.paths.merge-right{grid-template-columns:1fr;}
    .paths.merge-left .book-path,
    .paths.merge-right .lead-path{max-height:0;padding-top:0;padding-bottom:0;border-width:0;}
    .book-path,.lead-path{max-height:2000px;
      transition:opacity .34s ease, transform .4s cubic-bezier(.4,0,.2,1),
      max-height .45s ease, padding .45s ease, height .5s cubic-bezier(.4,0,.2,1);}
  }

  .hidden{display:none !important;}
  .fade{animation:fade .4s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}