.elementor-3094 .elementor-element.elementor-element-98672f7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:3rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;}body.elementor-page-3094:not(.elementor-motion-effects-element-type-background), body.elementor-page-3094 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-38de3bc );}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-e423397 */:root{
      --bg:#E9E9EC;            /* helles Grau wie auf vapic.de */
      --panel:#FFFFFF;          /* weiße Karten */
      --ink:#111418;            /* fast Schwarz für gute Lesbarkeit */
      --muted:#5A677A;          /* dezenter Sekundärton */
      --line:#E5E8EE;           /* feine Linien */
      --accent:#FFD200;         /* vapic-Gelb für CTAs */
      --accent-hover:#E5BE00;   /* Hover-Gelb */
      --accent-ink:#111418;     /* Text auf Gelb */
      --radius:10px;
      --focus:0 0 0 3px rgba(255,210,0,.35);
      --good:#2FBF71; --mix:#5AA7E6; --out:#E05E5E; /* zarte Ergebnis-Indikatoren */
    }
    *{box-sizing:border-box}
    html,body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
    .wrap{max-width:980px; margin:32px auto; padding:16px}
    .hero{position:relative; overflow:hidden; border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); padding:20px 18px}
    .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; font-size:12px; color:var(--muted)}
    .brand-bullet{width:8px;height:8px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 6px rgba(255,210,0,.18)}
    .h1{font-size:clamp(28px,5vw,38px); line-height:1.15; margin:8px 0 8px; letter-spacing:-.01em}
    .sub{color:var(--muted); max-width:65ch}

    .progress{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:12px 0 2px}
    .bar{height:8px; flex:1; background:var(--line); border-radius:99px; position:relative; overflow:hidden}
    .bar > span{display:block; height:100%; width:0%; background:var(--accent); transition:width .35s ease}
    .count{font-variant-numeric:tabular-nums; color:var(--muted); font-size:12px}

    .grid{display:grid; gap:14px; margin-top:16px}
    .question{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:16px}
    fieldset{margin:0; border:0}
    .question legend{font-weight:650; letter-spacing:.2px; padding:0 0 6px}
    .options{display:flex; gap:10px; flex-wrap:wrap}
        .opt{position:relative; display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; user-select:none; background:#FFFFFF}
    .opt:hover:not(.active){border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,210,0,.22)}
    .opt:focus-within:not(.active){border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,210,0,.30)}
    .opt input{position:absolute; inset:0; opacity:0}
    .opt .badge{width:26px;height:26px;border-radius:7px; display:grid; place-items:center; font-weight:700; font-variant-numeric:tabular-nums; background:#F1F3F7; border:1px solid #DCE1E9; color:#343B44}
    .opt .lbl{font-weight:600; color:#1B2330}
    .opt.active{border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,210,0,.35); background:#FFF7CC}
    .opt.active .badge{border-color:var(--accent); background:#FFF0A6}

    .cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
    .btn{appearance:none; border:1px solid var(--line); background:#FFFFFF; color:var(--ink); padding:10px 14px; border-radius:10px; font-weight:650; cursor:pointer}
    .btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
    .btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
    .btn.primary:disabled{opacity:.55; cursor:not-allowed}
    .btn:focus-visible{outline:none; box-shadow:var(--focus)}

    .result{display:none; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:16px; border-left:4px solid transparent}
    .result.good{border-left-color:var(--good)}
    .result.mix{border-left-color:var(--mix)}
    .result.out{border-left-color:var(--out)}
    .links .btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
    .links .btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
    .score-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#FFF0A6; color:#1B2330; font-weight:700; letter-spacing:.2px; margin:4px 0; border:1px solid #F1D86A}
    .note{color:var(--muted); font-size:12px}
    .foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px}
    .links{display:flex; gap:10px; flex-wrap:wrap}

    @media (max-width:720px){.wrap{margin:18px auto; padding:12px}}
    @media (prefers-reduced-motion: reduce){.bar > span{transition:none}}/* End custom CSS */