/* ==========================================================================
   Funkenart Sichtbarkeits-Check — Premium-Redesign
   Reduziert, editorial, souverän. Cremetöne, warme Tinte, Orange als
   einziger Akzent. Tiefe über Layout, Abstände und Typografie statt Deko.
   Schrift Manrope lokal (DSGVO).
   ========================================================================== */

@font-face{font-family:"Manrope";src:url("../fonts/manrope-400.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-500.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-600.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-700.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-800.woff2") format("woff2");font-weight:800;font-display:swap;}

:root{
  /* Exakt die Markenwerte von funkenart.de, damit das Tool wie eine Unterseite wirkt. */
  --bg:#F7F2E8; --bg-2:#F0E8DA; --surface:#FFFFFF; --surface-2:#FFFFFF;
  --ink:#1E160E; --ink-2:#463C30; --muted:#766A5A; --faint:#9C8F7C;
  --line:rgba(30,22,14,.12); --line-2:rgba(30,22,14,.07); --line-3:rgba(30,22,14,.04);
  --accent:#EB4E1C; --accent-deep:#D8431A; --accent-ink:#96300F;
  --accent-soft:rgba(235,78,28,.08); --accent-soft-2:rgba(235,78,28,.16);
  --dark:#1B140C; --dark-2:#251B11; --dk-text:#F6F0E6; --dk-muted:#B8A88F; --dk-faint:#7C7060;
  --dk-line:rgba(255,255,255,.13);
  --good:#3F7A54; --good-soft:rgba(63,122,84,.10);
  --warn:#B0742A; --warn-soft:rgba(176,116,42,.10);
  --bad:#C0432A; --bad-soft:rgba(192,67,42,.08);
  /* identisch mit funkenart.de, damit die Seite als Unterseite bündig sitzt */
  --maxw:1200px; --readw:720px;
  --r-lg:18px; --r-md:12px; --r-sm:9px; --r-xs:6px;
  --ease:cubic-bezier(.22,.61,.24,1);
  --sh-xs:0 1px 2px rgba(30,22,14,.05);
  --sh-sm:0 1px 3px rgba(30,22,14,.05),0 8px 24px -18px rgba(30,22,14,.20);
  --sh:0 2px 8px -4px rgba(30,22,14,.12),0 24px 50px -34px rgba(30,22,14,.28);
  --sh-dark:0 30px 80px -40px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:"Manrope",system-ui,sans-serif;color:var(--ink);
  background:var(--bg);line-height:1.62;font-size:17px;letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-weight:800;line-height:1.05;letter-spacing:-.035em;margin:0;}
h1 em,h2 em{font-style:normal;color:var(--accent);}
p{margin:0;text-wrap:pretty;}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:28px;}
.is-hidden{display:none !important;}

/* ---- Header: 1:1 die schwebende Glas-Bar von funkenart.de,
   inkl. Ausblenden beim Runterscrollen / Einblenden beim Hochscrollen ---- */
:root{--head-h:104px;}
body{padding-top:var(--head-h);}
.site-header{position:fixed;top:0;left:0;right:0;z-index:70;transition:transform .35s var(--ease);}
.site-header.hidden{transform:translateY(-100%);}
/* Minimal satterer Cremeton + feine Kontur: löst die Bar ruhig vom Grund */
.site-header .bar{margin:16px auto 0;width:calc(100% - 32px);max-width:var(--maxw);
  display:flex;align-items:center;justify-content:space-between;gap:26px;height:74px;
  padding:0 16px 0 28px;border-radius:16px;background:rgba(240,231,215,.72);
  border:1px solid rgba(30,22,14,.06);backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 14px 40px -22px rgba(30,22,14,.35);transition:background .35s,box-shadow .35s;}
.site-header.scrolled .bar{background:rgba(240,231,215,.88);box-shadow:0 18px 50px -26px rgba(30,22,14,.45);}
.brand{display:inline-flex;align-items:center;}
.brand img{height:50px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:34px;margin-left:auto;}
.nav-links a{font-size:15.5px;font-weight:600;color:var(--ink-2);position:relative;padding:6px 0;transition:color .2s;}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:50% 50%;transition:transform .3s var(--ease);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{display:flex;align-items:center;gap:12px;margin-left:6px;}
.nav-cta .btn{padding:11px 20px;font-size:14.5px;}
.nav-cta .nav-toggle{display:none;}
.nav-links a.nav-mob-cta{display:none;}
.nav-scrim{position:fixed;inset:0;z-index:60;background:rgba(20,14,8,.32);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;}
.nav-scrim.show{opacity:1;pointer-events:auto;}
@media(min-width:901px){ .nav-scrim{display:none;} }
@media(max-width:900px){
  .nav-links{position:fixed;inset:calc(var(--head-h) - 8px) 14px auto 14px;flex-direction:column;align-items:stretch;gap:0;
    padding:10px 22px 22px;background:#1d150d;border:1px solid rgba(255,255,255,.12);border-radius:22px;
    box-shadow:0 34px 80px -30px rgba(0,0,0,.7);
    transform:translateY(-14px) scale(.985);opacity:0;pointer-events:none;
    transition:transform .35s var(--ease),opacity .3s;}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto;}
  .site-header .nav-links a:not(.nav-mob-cta){padding:16px 2px;width:100%;
    border-bottom:1px solid rgba(255,255,255,.1);font-size:17px;font-weight:600;color:#F4ECDF;letter-spacing:-.01em;}
  .site-header .nav-links a:not(.nav-mob-cta):hover{color:#fff;}
  .nav-links a:not(.nav-mob-cta):last-of-type{border-bottom:0;}
  .nav-links a::after{display:none;}
  .nav-links a.nav-mob-cta{display:inline-flex;width:100%;margin-top:18px;padding:14px 22px;
    font-size:15px;color:#fff;border-radius:12px;}
  .nav-cta .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    border:1px solid var(--line);border-radius:13px;background:transparent;color:var(--ink);padding:0;}
  .nav-cta .btn:not(.nav-toggle){display:none;}
}
@media(max-width:620px){ :root{--head-h:92px;} }

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-sm);border:1px solid transparent;
  font-weight:700;font-size:15px;letter-spacing:-.012em;
  transition:transform .3s var(--ease),background .25s,box-shadow .35s,filter .2s;}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(143,44,14,.3),0 10px 24px -14px rgba(232,72,26,.6);}
.btn-accent:hover{background:var(--accent-deep);transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(143,44,14,.35),0 18px 34px -14px rgba(232,72,26,.65);}
.btn-accent:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface);}
.btn-lg{padding:18px 34px;font-size:16px;width:100%;}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);}

/* ---- Hero / Suche ---- */
.hero{padding:clamp(40px,6vw,88px) 0 clamp(64px,10vw,132px);text-align:center;}
.hero h1{font-size:clamp(38px,6.2vw,68px);margin:20px auto 0;max-width:19ch;line-height:1.02;}
.hero .sub{margin:24px auto 0;max-width:48ch;font-size:clamp(16px,1.7vw,20px);
  color:var(--muted);font-weight:500;line-height:1.55;}
.search-box{margin:46px auto 0;max-width:620px;position:relative;text-align:left;}
.search-wrap{position:relative;display:flex;align-items:center;}
.search-ico{position:absolute;left:26px;color:var(--faint);pointer-events:none;transition:color .2s;}
.search-wrap:focus-within .search-ico{color:var(--accent);}
.search-input{width:100%;padding:22px 26px 22px 60px;font-size:17px;font-weight:500;font-family:inherit;
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh);transition:border-color .2s,box-shadow .2s;}
.search-input::placeholder{color:var(--faint);font-weight:500;}
.search-input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft),var(--sh);}
.suggestions{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:20;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  box-shadow:var(--sh);overflow:hidden;padding:6px;}
.suggestion{display:flex;flex-direction:column;gap:2px;padding:14px 18px;cursor:pointer;
  border-radius:var(--r-sm);transition:background .14s;}
.suggestion:hover,.suggestion.active{background:var(--bg);}
.suggestion .s-name{font-weight:700;font-size:15px;letter-spacing:-.02em;}
.suggestion .s-addr{font-size:13px;color:var(--muted);}
/* Hero-Button: gehört zum Suchfeld, auf Desktop bewusst schmaler und
   mittig, mit sehr dezentem Puls */
.search-go{margin:14px auto 0;display:flex;width:min(400px,100%);}
@media(max-width:680px){
  .search-go{width:100%;padding:15px 20px;font-size:15.5px;}
  .choice-grid .choice{padding:13px 16px;gap:12px;}
  .choice-grid .choice span{font-size:15px;}
  .qform .btn-lg,.fq-next{padding:15px 20px;font-size:15.5px;}
  /* uebliche Touch-Masse (~54px) statt Desktop-Hero-Dimension; 16px Font,
     damit iOS beim Fokus nicht hineinzoomt */
  .search-input{padding:15px 18px 15px 50px;font-size:16px;}
  .search-ico{left:20px;}
}
@media (prefers-reduced-motion: no-preference){
  .search-go{animation:ctaPulse 4.5s var(--ease) 1.5s infinite;}
}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 1px 2px rgba(143,44,14,.3),0 10px 24px -14px rgba(232,72,26,.6);}
  50%{box-shadow:0 1px 2px rgba(143,44,14,.3),0 14px 34px -12px rgba(232,72,26,.85),0 0 0 6px rgba(235,78,28,.05);}
}
/* Vertrauenselemente: sichtbar, aber keine Buttons */
.trust-row{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;
  font-size:14.5px;color:var(--ink-2);font-weight:650;}
.trust-row span{display:inline-flex;align-items:center;gap:9px;}
.trust-row svg{width:20px;height:20px;padding:3px;border-radius:50%;flex:none;
  background:var(--good-soft);color:var(--good);}

/* Zweiter Weg: dezenter Hinweis statt Button-Reihe, das Panel trägt die Substanz */
.fallback-hint{margin-top:36px;font-size:14px;color:var(--faint);font-weight:500;}
.fallback-open{background:none;border:none;padding:0;font-size:14px;font-weight:600;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);transition:color .2s;}
.fallback-open:hover{color:var(--ink);text-decoration-color:var(--ink);}
.fallback-panel{margin:26px auto 0;max-width:560px;text-align:left;background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:clamp(28px,4vw,38px) clamp(24px,4vw,36px);
  box-shadow:var(--sh-sm);animation:riseIn .4s var(--ease);}
.fallback-panel h3{font-size:20px;margin-bottom:10px;letter-spacing:-.03em;line-height:1.2;text-wrap:balance;}
.fallback-panel > p{color:var(--muted);font-size:15px;line-height:1.65;margin-bottom:22px;}
.fallback-panel .url-field{display:flex;flex-direction:column;gap:12px;}
.fallback-panel input{width:100%;padding:16px 18px;font-size:16px;font-family:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);}
.fallback-panel input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);background:var(--surface-2);}
/* Hinweis gehört optisch zum Button darüber: gleiche Breite, zentriert */
.fb-note{text-align:center;font-size:12.5px;color:var(--faint);margin:0;line-height:1.5;}
.url-field .fb-note{margin-top:-2px;}
.fb-nosite{margin-top:14px;background:none;border:none;padding:4px 0;align-self:center;
  font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line);transition:color .2s;}
.fb-nosite:hover{color:var(--ink);text-decoration-color:var(--ink);}
.fallback-panel .field input{background:var(--bg);}
.fallback-panel form .fb-note{margin-top:12px;}
/* Die vier Qualifikationsfragen im Panel: kompakter als im großen CTA-Block */
.fallback-panel .qhead{margin-bottom:22px;}
.fallback-panel .qstep{min-height:0;}
.fallback-panel .q-question{font-size:19px;}
.label-opt{font-weight:500;color:var(--faint);text-transform:none;letter-spacing:0;}

/* ---- Loader ---- */
.loader{padding:clamp(64px,10vw,130px) 0;text-align:center;}
.loader .eyebrow{margin-bottom:18px;}
.loader h2{font-size:clamp(28px,4vw,42px);letter-spacing:-.035em;max-width:22ch;
  margin-left:auto;margin-right:auto;text-wrap:balance;}
.progress{margin:40px auto 0;max-width:460px;height:4px;border-radius:999px;
  background:var(--line-2);overflow:hidden;}
.progress-bar{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-deep));transition:width .4s var(--ease);
  position:relative;overflow:hidden;}
.progress-bar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  animation:shimmer 1.5s linear infinite;}
@keyframes shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
.progress-pct{margin-top:18px;font-weight:800;font-size:22px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.quip{margin:16px auto 0;max-width:440px;color:var(--muted);font-size:15.5px;font-weight:600;
  min-height:26px;transition:opacity .28s ease;letter-spacing:-.01em;}
.quip.fade{opacity:0;}
.steps{margin:44px auto 0;max-width:380px;text-align:left;display:flex;flex-direction:column;}
.step{display:flex;align-items:center;gap:15px;color:var(--faint);transition:color .3s;
  font-weight:600;font-size:14.5px;padding:12px 4px;border-bottom:1px solid var(--line-3);}
.step:last-child{border-bottom:none;}
.step .dot{width:23px;height:23px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;flex:none;transition:all .3s;background:var(--surface-2);}
.step.done{color:var(--ink);}
.step.done .dot{background:var(--ink);border-color:var(--ink);}
.step.done .dot::after{content:"";width:8px;height:4.5px;border-left:2px solid var(--bg);
  border-bottom:2px solid var(--bg);transform:rotate(-45deg) translate(0,-1px);}
/* echte Prüfergebnisse am Ende der Analyse */
.step.done.ok .dot{background:var(--good);border-color:var(--good);}
.step.done.ok .dot::after{border-color:#fff;}
.step.done.fail .dot{background:var(--bad);border-color:var(--bad);}
.step.done.fail .dot::after{content:"✕";border:none;width:auto;height:auto;transform:none;
  color:#fff;font-size:11px;font-weight:800;line-height:1;}
.step.done.fail .step-label{color:var(--bad);font-weight:700;}
.step-label{flex:1;}
.step-status{font-size:12px;font-weight:700;letter-spacing:.02em;opacity:0;transition:opacity .3s;}
.step.done.ok .step-status{opacity:1;color:var(--good);}
.step.done.fail .step-status{opacity:1;color:var(--bad);}
.step.active{color:var(--ink);}
.step.active .dot{border-color:var(--accent);}
.step.active .dot::after{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);animation:pulse 1.1s ease infinite;}
@keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}}

/* ---- Ergebnis ---- */
.result{padding:clamp(32px,5vw,56px) 0 90px;}
.result-head{text-align:center;margin-bottom:26px;}
.result-head .eyebrow{color:var(--muted);}
.biz-name{font-size:clamp(28px,4.4vw,46px);margin-top:10px;letter-spacing:-.04em;}
.biz-meta{color:var(--muted);font-size:14px;margin-top:12px;font-weight:500;}
.biz-meta .meta-part{display:block;line-height:1.6;overflow-wrap:anywhere;}

/* ---- Score-Bühne ---- */
.score-stage{position:relative;background:
    radial-gradient(120% 110% at 50% 40%,#241a10 0%,var(--dark-2) 46%,var(--dark) 100%);
  color:var(--dk-text);border-radius:var(--r-lg);padding:clamp(52px,7vw,84px) clamp(28px,5vw,64px);
  text-align:center;margin:26px 0;overflow:hidden;box-shadow:var(--sh-dark);
  border:1px solid rgba(255,255,255,.06);}
.score-inner{position:relative;z-index:1;}
/* Statusfarbe des Ergebnisses: Ring, Glow und Zonenband sprechen dieselbe
   Sprache. Orange = kaum sichtbar, Amber = ausbaufähig, helles Grün = gut,
   dunkleres Grün = sehr gut. */
.score-stage{--ring:var(--accent);}
.score-stage.z1{--ring:#EB4E1C;}
.score-stage.z2{--ring:#D9962E;}
.score-stage.z3{--ring:#6FB284;}
.score-stage.z4{--ring:#3E8E5F;}
.score-ring{position:relative;width:220px;height:220px;margin:0 auto;}
/* Glow sitzt eng und kontrolliert direkt hinter Ring und Zahl, kein Auslaufen */
.score-aura{position:absolute;inset:-8%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--ring) 30%,transparent),
    color-mix(in srgb,var(--ring) 7%,transparent) 55%,transparent 72%);
  transform:scale(.75);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
.score-stage.lit .score-aura{opacity:1;transform:scale(1);animation:auraBreathe 5s ease-in-out 1.1s infinite;}
@keyframes auraBreathe{0%,100%{opacity:.78;}50%{opacity:1;}}
.score-ring svg{position:relative;z-index:1;transform:rotate(-90deg);width:100%;height:100%;overflow:visible;}
.score-ring .track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:7;}
.score-ring .fill{fill:none;stroke:var(--ring);stroke-width:7;stroke-linecap:round;
  transition:stroke-dashoffset 1.6s var(--ease),stroke .6s;}
.score-stage.lit .score-ring .fill{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--ring) 75%,transparent));}
.score-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:2;}
.score-num b{font-size:78px;font-weight:800;line-height:.9;color:#fff;letter-spacing:-.05em;font-variant-numeric:tabular-nums;}
.score-num span{font-size:12.5px;color:var(--dk-faint);margin-top:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.score-label{margin-top:30px;font-size:clamp(26px,3.6vw,36px);font-weight:800;color:#fff;letter-spacing:-.035em;}
.score-verdict{margin:18px auto 0;color:#DCD2C2;font-size:16.5px;max-width:44ch;
  font-weight:600;line-height:1.6;text-wrap:balance;}
/* Zonenband */
.zones{margin:40px auto 0;max-width:520px;position:relative;}
.zone-track{position:relative;display:flex;gap:5px;height:6px;}
.zone{display:block;height:100%;border-radius:999px;}
/* Dieselben Statusfarben wie der Ring */
.zone.z1{width:40%;background:color-mix(in srgb,#EB4E1C 60%,transparent);}
.zone.z2{width:20%;background:color-mix(in srgb,#D9962E 60%,transparent);}
.zone.z3{width:20%;background:color-mix(in srgb,#6FB284 65%,transparent);}
.zone.z4{width:20%;background:color-mix(in srgb,#3E8E5F 90%,transparent);}
.zone-marker{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;
  transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 0 4px var(--dark),0 2px 12px rgba(0,0,0,.5);
  transition:left 1.6s var(--ease);}
.zone-caps{display:flex;gap:5px;margin-top:14px;font-size:11.5px;color:var(--dk-faint);font-weight:600;letter-spacing:.01em;}
.zone-caps span{text-align:center;transition:color .3s;}
.zone-caps span:nth-child(1){width:40%;}
.zone-caps span:nth-child(2),.zone-caps span:nth-child(3),.zone-caps span:nth-child(4){width:20%;}
.zone-caps span.active{color:#fff;font-weight:800;}

/* ---- Ungenutzte Punkte: nachgeordnet unterm Status, ein Aussage-Block ---- */
.score-gap{margin:10px auto 0;max-width:560px;}
.score-gap-lead{font-size:clamp(16px,1.9vw,19px);font-weight:700;letter-spacing:-.01em;
  line-height:1.3;color:#C9BEAC;text-wrap:balance;}
.score-gap-lead b{color:var(--accent);font-variant-numeric:tabular-nums;}

/* ---- Kernprobleme (sichtbarer Teilbericht) ---- */
.issues-head{margin:64px 0 0;}
.issues-head h2{font-size:clamp(23px,3vw,31px);letter-spacing:-.035em;}
.issues-head p{margin-top:10px;color:var(--muted);font-size:16px;line-height:1.6;max-width:56ch;}
.issues{display:flex;flex-direction:column;gap:18px;margin-top:28px;}
.issue{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:clamp(26px,4vw,38px);box-shadow:var(--sh-sm);}
.issue-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;}
/* Reines Typo-Label statt Pill: ruhiger, editorialer */
.issue-prio{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}
.issue-prio.hot{color:var(--accent);}
.issue-impact{font-weight:800;font-size:14px;color:var(--bad);font-variant-numeric:tabular-nums;flex:none;}
.issue h3{font-size:clamp(19px,2.5vw,23px);letter-spacing:-.03em;line-height:1.2;text-wrap:balance;}
.issue-diag{margin-top:10px;color:var(--ink-2);font-size:16px;line-height:1.62;max-width:64ch;}
.issue-effects{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
.issue-effects li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2);
  line-height:1.55;font-weight:500;}
.issue-effects svg{color:var(--accent);flex:none;margin-top:4px;}
.issue-step{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);}
.issue-step-label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:7px;}
.issue-step p{font-size:15px;color:var(--ink-2);font-weight:600;line-height:1.6;max-width:64ch;}

/* Eine echte Stärke */
.strength{display:flex;gap:15px;margin-top:16px;padding:24px 28px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--good-soft);}
.strength-ico{width:26px;height:26px;border-radius:50%;background:var(--good);color:#fff;
  display:grid;place-items:center;flex:none;margin-top:1px;}
.strength h3{font-size:16px;letter-spacing:-.02em;}
.strength p{color:var(--ink-2);font-size:14.5px;margin-top:6px;line-height:1.6;}

/* ---- Der Vergleich, der zählt: eigene Fläche mit Gewicht, kein Textblock ---- */
.versus{margin:72px 0 clamp(28px,4vw,44px);padding:clamp(36px,5vw,52px) clamp(26px,4vw,52px);
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-lg);}
.versus h2{margin-top:14px;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.035em;line-height:1.12;text-wrap:balance;}
.versus-lead{margin-top:14px;color:var(--ink-2);font-size:16.5px;line-height:1.62;max-width:58ch;}
/* Der Hauptteil des Vergleichs: EINE Komposition aus Zahl und Text,
   keine gestapelten Mini-Bloecke. */

/* ---- Vollständige Auswertung ---- */
/* scroll-margin: beim Freischalt-Scroll darf der klebende Header die
   Berichts-Headline nicht abschneiden */
.report-section{margin-top:72px;position:relative;scroll-margin-top:92px;}
/* Der Berichtskopf blendet beim Freischalten sichtbar ein */
.modules-head.mh-reveal{animation:riseIn .55s var(--ease) both;}
.modules-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.modules-head h2{font-size:clamp(23px,3vw,31px);letter-spacing:-.035em;}
.mh-sub{margin-top:10px;color:var(--muted);font-size:16px;line-height:1.6;max-width:56ch;}
.report-body{position:relative;}
.modules{margin:26px 0 0;border-top:1px solid var(--line-2);}
/* Freigeschaltet werden die Kapitel zu Karten, da stört die Oberlinie */
.report-body:not(.is-locked) .modules{border-top:none;margin-top:30px;}
/* Gesperrt: die kritischen Bereiche (oben, weil nach Handlungsbedarf sortiert)
   bleiben klar lesbar, die weiteren laufen in Schleier und Unschärfe aus.
   Der Schleier ist eine eigene Ebene, damit er sich beim Freischalten
   sichtbar auflösen kann (der eigentliche Wow-Moment). */
.report-body::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 0%,transparent 38%,
    color-mix(in srgb,var(--bg) 55%,transparent) 62%,
    color-mix(in srgb,var(--bg) 92%,transparent) 84%,var(--bg) 100%);
  transition:opacity 1s var(--ease);}
.report-body.is-locked::after{opacity:1;}
.report-body .module{transition:filter 1s var(--ease);}
.report-body.is-locked .module:nth-child(4){filter:blur(1.5px);}
.report-body.is-locked .module:nth-child(5){filter:blur(3px);}
.report-body.is-locked .module:nth-child(n+6){display:none;}
/* Sichtbarer Reveal: die Kapitel erscheinen verschleiert und werden
   gestaffelt scharf (transition-delay setzt das JS pro Karte). Die
   transition selbst steht an der Kapitelkarten-Regel weiter unten. */
.module.expandable.veiled{opacity:0;filter:blur(10px);transform:translateY(16px);}
.module{border-bottom:1px solid var(--line-2);scroll-margin-top:104px;}
.module-row{display:flex;align-items:center;gap:18px;padding:24px 4px;}
/* Freigeschaltet: jeder Bereich wird ein nummeriertes Berichtskapitel auf
   eigener Karte. Der Kontrast zur schlichten Überblicksliste davor ist
   Teil des Belohnungsgefühls. */
.module.expandable{background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);margin-bottom:14px;box-shadow:var(--sh-xs);
  padding:0 clamp(18px,3vw,28px);
  transition:opacity .85s var(--ease),filter .85s var(--ease),
    transform .85s var(--ease),box-shadow .25s var(--ease),border-color .25s;}
.module.expandable:hover{box-shadow:var(--sh-sm);border-color:var(--line);}
.module.expandable.open{border-color:var(--line);box-shadow:var(--sh-sm);}
.module.expandable .module-row{cursor:pointer;padding:24px 0;transition:background .18s;}
.module.expandable .module-row:hover .module-title h3{color:var(--accent-ink);}
.module.expandable .module-dot{display:none;}
/* Bereichs-Icon: gibt der Karte Identität, keine tote Fläche */
.module-ico{width:42px;height:42px;border-radius:12px;flex:none;
  display:grid;place-items:center;background:var(--bg);color:var(--ink-2);
  border:1px solid var(--line-3);transition:color .25s,background .25s;}
.module.weak .module-ico{color:var(--bad);}
.module.mid .module-ico{color:var(--warn);}
.module.good .module-ico{color:var(--good);}
.module.expandable:hover .module-ico,.module.expandable.open .module-ico{
  background:var(--accent-soft);color:var(--accent-ink);border-color:transparent;}
.module-main{flex:1;min-width:0;}
.module-title{display:flex;align-items:center;gap:11px;}
.module-title h3{font-size:17.5px;letter-spacing:-.03em;font-weight:800;}
.module-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.module.good .module-dot{background:var(--good);}
.module.mid .module-dot{background:var(--warn);}
.module.weak .module-dot{background:var(--bad);}
.module-summary{margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted);font-weight:600;}
.module-score{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:130px;}
.module-pts{font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.module.good .module-pts{color:var(--good);}
.module.mid .module-pts{color:var(--warn);}
.module.weak .module-pts{color:var(--bad);}
.module-mini{width:120px;height:4px;border-radius:999px;background:var(--line-2);overflow:hidden;}
.module-mini i{display:block;height:100%;border-radius:999px;}
.module.good .module-mini i{background:var(--good);}
.module.mid .module-mini i{background:var(--warn);}
.module.weak .module-mini i{background:var(--bad);}
.module-toggle{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:var(--muted);flex:none;transition:all .2s;}
/* Hover nur im geschlossenen Zustand einfärben, sonst verschwindet der
   Pfeil (Akzent auf Akzent) auf der geöffneten Karte. */
.module.expandable:not(.open):hover .module-toggle{border-color:var(--accent);color:var(--accent);}
.module-toggle svg{transition:transform .3s var(--ease);}
.module.open .module-toggle svg{transform:rotate(180deg);}
.module.open .module-toggle{background:var(--accent);border-color:var(--accent);color:#fff;}
.module-detail{max-height:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .3s;opacity:0;}
.module.open .module-detail{max-height:1400px;opacity:1;}
/* Detail lebt in der Kapitelkarte selbst: nur eine feine Oberlinie trennt
   den Kartenkopf vom Inhalt, kein Kasten im Kasten. */
.module-detail-inner{margin:0 0 4px;padding:24px 0 26px;border-top:1px solid var(--line-2);}
.md-checks-label,.md-diag-label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px;}
/* Geprüfte Punkte: kompakte Statusliste. Icon, Label, und der Wert steht
   DIREKT beim Label (kein Kopf-Drehen zum rechten Rand). */
.md-checks{display:flex;flex-direction:column;}
.md-checks-label{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-2);}
.check{display:flex;align-items:flex-start;gap:11px;
  font-size:14.5px;color:var(--ink-2);font-weight:600;padding:10px 0;border-bottom:1px solid var(--line-3);}
.check:last-child{border-bottom:none;}
.check .c-ico{width:19px;height:19px;border-radius:50%;flex:none;display:grid;place-items:center;}
.check.ok .c-ico{background:var(--good-soft);color:var(--good);}
.check.fail .c-ico{background:var(--bad-soft);color:var(--bad);}
.check .c-label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
/* Wert als kompakte Kachel direkt am Label: scanbar, ohne Blick nach rechts */
.check .c-note{color:var(--ink);font-weight:800;white-space:nowrap;font-size:12.5px;
  font-variant-numeric:tabular-nums;background:var(--bg);border:1px solid var(--line-3);
  border-radius:6px;padding:3px 9px;line-height:1.3;}
.check.fail .c-note{color:var(--bad);background:var(--bad-soft);border-color:transparent;}
.md-diag{margin-top:0;}
.md-diag h4{font-size:16px;letter-spacing:-.02em;margin-bottom:7px;}
.md-diag h4.is-good{color:var(--good);}
.md-diag p{color:var(--muted);font-size:14.5px;line-height:1.62;}
.md-effects{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.md-effects li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5;font-weight:500;}
.md-effects svg{color:var(--accent);flex:none;margin-top:3px;}
.md-todo{margin-top:22px;padding:18px 20px;border-radius:var(--r-sm);background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);}
.md-todo-label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.md-todo p{font-size:14.5px;color:var(--ink-2);font-weight:600;line-height:1.6;}

/* ---- Freischalte-Sektion: zweispaltig auf Desktop (Nutzen links, Formular
   rechts), einspaltig auf Mobil. Sitzt über dem Fade. ---- */
/* Einspaltig, breit und ruhig: eine klare Lesefolge von der Einleitung
   über den Nutzen bis zur Eingabe, alles zentriert auf einer Achse. */
.gate{margin:-150px auto 0;max-width:960px;position:relative;z-index:2;text-align:left;
  padding:clamp(32px,4.5vw,52px) clamp(24px,4.5vw,56px);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh);}
.gate-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;}
@media (min-width:880px){ .gate-grid{grid-template-columns:1.12fr .88fr;column-gap:clamp(40px,5vw,72px);} }
.gate-action{align-self:center;background:rgba(247,242,232,.45);border:1px solid var(--line-2);
  border-radius:16px;padding:clamp(22px,2.8vw,30px);}
.gate-action .btn-lg{padding:14px 20px;font-size:15.5px;}
.gate-action .consent{margin-top:14px;}
.gate-action .consent span{line-height:1.55;}
.gate-eyebrow{color:var(--accent);}
.gate h2{margin-top:13px;font-size:clamp(25px,3.2vw,32px);letter-spacing:-.04em;line-height:1.08;text-wrap:balance;}
/* Die Subline trägt den Tauschwert: sofort freischalten + zusätzlich per Mail */
.gate-sub{margin:12px 0 0;max-width:40ch;color:var(--faint);font-size:15px;font-weight:500;line-height:1.55;}
.gate-benefits-k{display:block;margin:28px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);}
.gate-list{list-style:none;margin:12px 0 0;padding:0;max-width:100%;
  display:grid;grid-template-columns:1fr;gap:12px;text-align:left;}
.gate-list li{display:flex;gap:12px;align-items:center;font-size:15.5px;color:var(--ink);font-weight:650;line-height:1.35;}
.gate-list svg{color:var(--accent);flex:none;}
.gate form{margin:0;max-width:420px;text-align:left;width:100%;}
.gate-action .consent{font-size:12px;}
.gate .field label{color:var(--ink);}
.gate-note{margin-top:13px;text-align:center;font-size:12.5px;color:#877965;line-height:1.55;
  max-width:34ch;margin-left:auto;margin-right:auto;text-wrap:balance;}
/* Sichtbarer Freischalt-Moment: Inhalt beruhigt sich, ein ruhiger Balken
   läuft über der Karte, kein Spinner, kein harter Sprung. */
.gate.gate-busy > :not(.gate-loading){
  opacity:.16;filter:blur(1px);pointer-events:none;transition:opacity .45s var(--ease),filter .45s var(--ease);}
/* Der Ladezustand ist eine eigene, klar abgehobene Status-Karte über dem
   gedimmten Formular, nicht nur eine Textzeile. */
.gate-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:3;}
.gate-loading::before{content:"";position:absolute;width:min(440px,92%);height:min(220px,86%);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh);}
.gate-loading p,.gate-loading .gl-bar{position:relative;}
.gate-loading{flex-direction:column;gap:22px;text-align:center;}
.gate-loading p{font-size:clamp(18px,2.2vw,21px);font-weight:800;letter-spacing:-.025em;color:var(--ink);}
.gl-bar{width:min(280px,70%);height:4px;border-radius:999px;background:var(--line-2);overflow:hidden;}
.gl-bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-deep));
  transition:width 1.6s cubic-bezier(.3,.1,.25,1);}
/* Bestätigungs-Beat nach vollem Balken */
.gate-loading p svg{display:inline-block;vertical-align:-3px;margin-right:9px;color:var(--good);}
.gate-loading.gl-done p{animation:riseIn .35s var(--ease);}
.gate-loading.gl-done .gl-bar i{background:var(--good);}
.form-note{text-align:center;font-size:12.5px;color:var(--faint);margin-top:14px;
  line-height:1.55;max-width:56ch;margin-left:auto;margin-right:auto;text-wrap:balance;}
.form-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
/* Wow-Moment: das Gate löst sich ruhig auf, bevor der Bericht sich öffnet */
.gate{transition:opacity .38s var(--ease),transform .38s var(--ease);}
.gate.gate-leave{opacity:0;transform:translateY(-14px) scale(.985);pointer-events:none;}
@media(max-width:680px){ .gate{margin-top:-120px;} }

.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:8px;letter-spacing:-.01em;}
.req{color:var(--accent);margin-left:2px;}
.field input,.field textarea{width:100%;padding:16px 18px;font-size:16px;font-family:inherit;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--sh-xs);transition:border-color .2s,box-shadow .2s;}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);}
.field textarea{min-height:90px;resize:vertical;}
/* Checkboxen fein und ruhig, aber klar klickbar */
.consent{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--muted);margin:6px 0 14px;line-height:1.5;text-align:left;}
.consent input{margin:2px 0 0;flex:none;width:15px;height:15px;accent-color:var(--accent);cursor:pointer;}
.consent a{color:var(--accent);border-bottom:1px solid var(--accent-soft-2);}
.honey{position:absolute;left:-9999px;opacity:0;height:0;width:0;}

@keyframes riseIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---- Maßnahmenplan ---- */
.plan-head{margin:76px 0 6px;}
.plan-head h2{margin-top:10px;font-size:clamp(23px,3vw,31px);letter-spacing:-.035em;}
.plan-head p{margin-top:10px;color:var(--muted);font-size:16px;line-height:1.6;max-width:56ch;}
.plan{display:flex;flex-direction:column;margin:26px 0 0;border-top:1px solid var(--line-2);}
/* Marker bewusst einheitlich: die Reihenfolge ergibt sich aus der Position,
   nicht aus einer Sonderoptik der Eins. Nummer sitzt mittig zum Textblock. */
.plan-step{display:flex;gap:24px;padding:30px 4px;border-bottom:1px solid var(--line-2);align-items:center;}
.plan-step .p-num{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--accent);flex:none;
  display:grid;place-items:center;font-size:17px;font-weight:800;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;background:var(--surface);
  box-shadow:0 1px 2px rgba(30,22,14,.06);}
.p-label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px;}
.plan-step h3{font-size:17.5px;margin-bottom:8px;letter-spacing:-.025em;}
.plan-step p{color:var(--muted);font-size:15px;line-height:1.62;max-width:62ch;}

/* ---- Kontakt als nächster Schritt: zentrierte Premium-Sektion ---- */
/* ---- Zwischensektion: ruhige Überleitung vom Bericht zum letzten CTA ---- */
.bridge{margin:clamp(76px,10vw,110px) auto 0;max-width:640px;text-align:center;}
.bridge .eyebrow{color:var(--faint);}
.bridge h2{margin-top:14px;font-size:clamp(23px,3vw,29px);letter-spacing:-.035em;
  line-height:1.15;text-wrap:balance;}
.bridge p{margin:16px auto 0;max-width:50ch;color:var(--muted);font-size:16.5px;
  font-weight:500;line-height:1.62;text-wrap:balance;}

.cta-section{margin:84px auto 0;max-width:720px;text-align:center;
  background:radial-gradient(140% 120% at 50% 0%,#fff,var(--surface) 60%);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(44px,6vw,64px) clamp(26px,4vw,56px);box-shadow:var(--sh);}
/* Editoriales Portrait statt Kreis-Avatar: Kopf und Oberkörper mit Luft,
   ohne Ranzoomen. Das Quellbild ist 2:3, der 4:5-Ausschnitt zeigt fast alles. */
.cta-avatar-wrap{width:230px;aspect-ratio:3/4;margin:0 auto 28px;border-radius:var(--r-md);
  box-shadow:0 18px 44px -20px rgba(30,22,14,.35);position:relative;overflow:hidden;}
.cta-avatar-wrap::after{content:"";position:absolute;inset:0;border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;}
.cta-avatar{width:100%;height:100%;border-radius:var(--r-md);object-fit:cover;object-position:50% 28%;display:block;
  filter:brightness(1.07);}
.cta-section .eyebrow{color:var(--accent);}
.cta-section h2{margin-top:14px;font-size:clamp(24px,3vw,31px);letter-spacing:-.035em;line-height:1.16;
  text-wrap:balance;max-width:30ch;margin-left:auto;margin-right:auto;}
.cta-lead{margin:18px auto 0;color:var(--ink-2);font-size:16.5px;font-weight:500;line-height:1.62;max-width:52ch;}

/* Mehrstufiges Formular: klar untergeordnet unter der CTA-Headline */
.qform{max-width:520px;text-align:left;margin:38px auto 0;padding-top:34px;border-top:1px solid var(--line-2);}
.qhead{display:flex;align-items:center;gap:18px;margin-bottom:28px;}
.qcount{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;text-transform:uppercase;}
.qbar{flex:1;height:3px;border-radius:999px;background:var(--line-2);overflow:hidden;}
.qbar i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .4s var(--ease);}
/* Feste Mindesthöhe: die Schritte sind unterschiedlich hoch, ohne sie würde
   die Seite bei jedem Wechsel nachrücken (Ruckler unter dem Mauszeiger). */
.qstep{animation:qfade .38s var(--ease);min-height:340px;}
@keyframes qfade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.qstep .q-question{font-size:clamp(19px,2.3vw,23px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:5px;}
.qstep .q-hint{font-size:14px;color:var(--muted);font-weight:500;margin-bottom:22px;}
.qstep .field label{font-size:15px;color:var(--ink);margin-bottom:11px;}
.qstep .btn{margin-top:8px;}
/* Zurück sitzt im Formularkopf: immer sichtbar, immer an derselben Stelle */
.qback{background:var(--surface);border:1px solid var(--line);border-radius:50%;
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  color:var(--muted);font-size:15px;font-weight:600;line-height:1;padding:0;
  transition:color .2s,border-color .2s;}
.qback:hover{color:var(--ink);border-color:var(--ink);}

/* Auswahlflächen (mit .choice-grid davor, sonst schlägt .field label das display:flex) */
.choice-grid{display:grid;gap:11px;margin-bottom:4px;}
.choice-grid .choice{display:flex;align-items:center;gap:16px;padding:19px 22px;margin:0;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;
  box-shadow:var(--sh-xs);transition:all .18s;font-weight:600;font-size:16px;color:var(--ink);}
.choice-grid .choice:hover{border-color:var(--ink-2);}
.choice-grid .choice input{accent-color:var(--accent);width:20px;height:20px;flex:none;margin:0;}
.choice-grid .choice span{display:block;line-height:1.25;}
.choice-grid .choice.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset;}

/* ---- Limit erreicht ---- */
.limit-lock{max-width:640px;margin:clamp(60px,10vw,120px) auto;text-align:center;
  padding:clamp(40px,6vw,64px) clamp(28px,4vw,48px);
  background:radial-gradient(130% 100% at 50% -10%,#33261a,var(--dark-2) 45%,var(--dark) 82%);
  color:var(--dk-text);border-radius:var(--r-lg);box-shadow:var(--sh-dark);
  border:1px solid rgba(255,255,255,.05);}
.limit-lock .ll-badge{width:56px;height:56px;border-radius:50%;margin:0 auto 22px;
  display:grid;place-items:center;background:rgba(232,72,26,.14);color:var(--accent);
  border:1px solid rgba(232,72,26,.3);}
.limit-lock .eyebrow{color:var(--accent);}
.limit-lock h2{margin-top:14px;color:#fff;font-size:clamp(26px,4vw,36px);letter-spacing:-.04em;text-wrap:balance;}
.limit-lock p{margin:16px auto 0;max-width:46ch;color:var(--dk-muted);font-size:16px;line-height:1.62;}
.limit-lock .ll-actions{margin-top:32px;display:flex;flex-direction:column;gap:12px;max-width:340px;margin-left:auto;margin-right:auto;}
.limit-lock .btn-ghost{color:var(--dk-text);border-color:rgba(255,255,255,.2);}
.limit-lock .btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);}

/* ---- Kleinere Desktops (MacBook-Größen): weniger Wucht, mehr Luft ---- */
@media(min-width:681px) and (max-width:1440px){
  .score-stage{padding:clamp(44px,5.5vw,64px) clamp(26px,4vw,52px);}
  .score-ring{width:200px;height:200px;}
  .score-num b{font-size:68px;}
  .score-label{margin-top:24px;font-size:clamp(23px,2.8vw,29px);}
  .score-gap{margin-top:8px;}
  .score-gap-lead{font-size:clamp(15px,1.7vw,17px);}
  .gate{padding:clamp(32px,4vw,44px) clamp(26px,4vw,56px);}
  .versus{padding:clamp(30px,4vw,42px) clamp(24px,3.5vw,44px);}
  .cta-section{padding:clamp(38px,5vw,54px) clamp(26px,4vw,48px);}
}

/* ---- Reduzierte Bewegung: harte, ruhige Wechsel statt Animationen ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ---- Fehler ---- */
.error-box{background:var(--bad-soft);color:var(--bad);border-radius:var(--r-sm);
  padding:14px 18px;font-size:14.5px;font-weight:600;margin-top:14px;text-align:center;}

/* ---- Footer: 1:1 der Original-Footer von funkenart.de ---- */
.site-footer{background:linear-gradient(180deg,#1B140C,#120c06);color:var(--dk-muted);
  margin-top:clamp(70px,10vw,120px);padding:clamp(56px,7vw,82px) 0 34px;}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px 40px;}
.foot-brand{max-width:300px;}
.foot-brand img{height:52px;width:auto;aspect-ratio:3/1;}
.foot-brand img.foot-logo-light{filter:brightness(0) invert(1);opacity:.92;}
.foot-brand p{margin-top:18px;font-size:14.5px;color:#8c8170;max-width:30ch;line-height:1.6;}
.foot-col h3{color:#fff;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;font-weight:700;}
.foot-col a{display:block;color:#B8AC99;font-size:14.5px;padding:6px 0;transition:color .2s;}
.foot-col a:hover{color:#fff;}
.foot-bottom{margin-top:clamp(36px,5vw,52px);padding-top:24px;border-top:1px solid var(--dk-line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:#7c715f;}

/* Vorschlags-Eintrag für Betriebe ohne Google Unternehmensprofil */
.suggestion.sug-alt{border-top:1px solid var(--line-2);margin-top:4px;padding-top:16px;}
.suggestion.sug-alt .s-name{color:var(--accent);}

@media(max-width:760px){
  .foot-grid{gap:32px;}
  .foot-brand{flex:1 1 100%;max-width:none;}
  .foot-col{flex:1 1 40%;}
}
@media(max-width:680px){
  .module-row{gap:14px;flex-wrap:wrap;padding:22px 2px;}
  .module-ico{width:36px;height:36px;border-radius:10px;}
  .module-main{flex:1 1 100%;order:1;}
  /* Mit Icon: Icon und Titel teilen sich die erste Zeile */
  .module-ico + .module-main{flex:1 1 calc(100% - 52px);}
  .module-score{order:2;flex-direction:row;align-items:center;gap:12px;width:auto;}
  .module-mini{width:100px;}
  .module-toggle{order:3;margin-left:auto;}
  .modules-head{flex-direction:column;align-items:flex-start;gap:10px;}
  .limit-lock .ll-actions .btn-lg{font-size:14px;padding:16px 8px;letter-spacing:-.02em;}
  .score-stage{padding:44px 20px;}
  .score-ring{width:184px;height:184px;}
  .score-num b{font-size:62px;}
  .score-label{margin-top:26px;font-size:22px;}
  .score-gap-lead{font-size:15px;}
  .score-verdict{font-size:15.5px;}
  .zones{max-width:100%;}
  .zone-caps{font-size:9.5px;}
  /* Gate/CTA-Box mobil: kompakter und ruhiger statt fett */
  .gate{padding:28px 20px;}
  .gate h2{font-size:22px;}
  .gate-sub{margin-top:12px;font-size:15px;}
  .gate-list{margin-top:18px;gap:9px;}
  .gate-list li{font-size:14px;gap:10px;}
  .gate-list svg{width:16px;height:16px;}
  .gate form{margin-top:22px;}
  .gate .btn-lg{padding:15px 8px;font-size:14px;letter-spacing:-.01em;}
  .issue{padding:22px;}
  .issue-top{flex-wrap:wrap;row-gap:8px;}
  .plan-step{gap:16px;padding:24px 2px;}
  .plan-step .p-num{width:38px;height:38px;font-size:15px;}
  .cta-section{padding:32px 20px;}
  .cta-avatar-wrap{width:150px;margin-bottom:22px;}
  .cta-section h2{font-size:23px;}
  .cta-lead{font-size:15.5px;max-width:34ch;}
  .qform{padding-top:24px;}
  .qstep{min-height:0;}
  .steps{max-width:100%;}
  .report-body.is-locked .module:nth-child(4){filter:blur(1px);}
  .report-body.is-locked .module:nth-child(5){filter:blur(2px);}
  .report-body.is-locked .module:nth-child(n+6){display:none;}
  .versus{padding:30px 22px;}
}

/* ---- Cookie-Banner: 1:1 von funkenart.de (style.css), Variablen aufs Tool gemappt ---- */
.cookie{position:fixed;left:18px;right:18px;bottom:18px;z-index:90;max-width:430px;background:rgba(252,250,245,.92);border:1px solid var(--line);backdrop-filter:blur(20px);border-radius:22px;box-shadow:0 30px 70px -20px rgba(30,22,14,.35);padding:24px;transform:translateY(160%);opacity:0;transition:transform .5s var(--ease),opacity .4s;}
.cookie.show{transform:none;opacity:1;}
.cookie h3{font-size:18px;font-weight:800;margin:0 0 8px;}
.cookie p{font-size:13.5px;color:var(--muted);}
.cookie-actions{margin-top:16px;display:grid;gap:9px;}
.cookie-actions .btn{width:100%;padding:12px 18px;font-size:14.5px;}
/* Nur im Banner: dunkleres Orange fuer 4.5:1-Kontrast (WCAG AA) */
.cookie .btn-accent{background:#D14519;}
.cookie .two{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.cookie-detail{display:none;border-top:1px solid var(--line);margin-top:18px;padding-top:16px;}
.cookie-detail.show{display:block;}
.ck-back{background:none;border:none;padding:0 0 12px;color:var(--ink-2);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;transition:color .2s;}
.ck-back:hover{color:var(--ink);}
.cookie-detail > h3{font-size:16px;font-weight:800;margin:0 0 10px;color:var(--ink);}
.ck-cat{padding:11px 0;border-top:1px solid var(--line);}
.ck-cat:first-of-type{border-top:none;}
.ck-cat-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:5px;}
.ck-cat-head > span:first-child{font-size:14px;font-weight:700;color:var(--ink);}
.ck-badge{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);}
.ck-cat p{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:0;}
.ck-toggle{position:relative;width:40px;height:22px;flex-shrink:0;cursor:pointer;display:inline-block;}
.ck-toggle input{opacity:0;width:0;height:0;position:absolute;}
.ck-slider{position:absolute;inset:0;border-radius:999px;background:#C8BDB2;transition:background .2s;}
.ck-slider::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.18);}
.ck-toggle input:checked + .ck-slider{background:var(--accent);}
.ck-toggle input:checked + .ck-slider::after{transform:translateX(18px);}
.ck-detail-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.ck-detail-actions .btn{width:100%;justify-content:center;font-size:14px;padding:11px 18px;}
.cookie-legal{display:flex;justify-content:center;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
.cookie-legal a{font-size:11.5px;color:var(--faint);text-decoration:none;font-weight:500;}
.cookie-legal a:hover{color:var(--ink-2);}
/* Footer-Button "Cookie-Einstellungen" wie auf funkenart.de */
.foot-col button{display:block;background:none;border:none;padding:6px 0;color:#B8AC99;font-size:14.5px;font-family:inherit;cursor:pointer;text-align:left;transition:color .2s;}
.foot-col button:hover{color:#fff;}
@media(max-width:620px){.cookie .two{grid-template-columns:1fr;}}

/* ---- Header-Dropdown (Online-Marketing mit Unterpunkten), 1:1 wie style.css ---- */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-item > a{display:inline-flex;align-items:center;gap:6px;}
.nav-caret{flex:none;margin-top:1px;transition:transform .25s var(--ease);}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg);}
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);padding-top:14px;
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease),transform .28s var(--ease);z-index:80;}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.nav-sub-card{min-width:236px;background:rgba(252,250,245,.97);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px -28px rgba(30,22,14,.45);padding:8px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.site-header .nav-links .nav-sub-card a{display:block;padding:11px 14px;border-radius:10px;
  font-size:14.5px;font-weight:600;color:var(--ink-2);}
.site-header .nav-links .nav-sub-card a::after{display:none;}
.site-header .nav-links .nav-sub-card a:hover{background:var(--accent-soft);color:var(--ink);}
@media(max-width:900px){
  .nav-item{display:block;width:100%;border-bottom:1px solid rgba(255,255,255,.1);}
  .nav-item > a{width:100%;}
  .site-header .nav-links .nav-item > a:not(.nav-mob-cta){border-bottom:0;padding-bottom:8px;}
  .nav-sub,
  .nav-item:hover .nav-sub,
  .nav-item:focus-within .nav-sub{position:static;transform:none;opacity:1;pointer-events:none;padding:0;transition:none;}
  /* Klickbar NUR im geoeffneten Menue – sonst liegen die unsichtbaren
     Unterpunkte (u. a. der Link auf /sichtbarkeit/!) ueber dem Bericht
     und fangen Taps ab. Gleicher Fix wie style.css v107 der Hauptseite. */
  .nav-links.open .nav-sub{pointer-events:auto;}
  .nav-sub-card{min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 16px 8px;backdrop-filter:none;-webkit-backdrop-filter:none;}
  .site-header .nav-links .nav-sub-card a{display:flex;align-items:center;gap:11px;padding:7px 2px;
    border-radius:0;border-bottom:0;font-size:14px;font-weight:500;letter-spacing:.005em;
    color:#B9AC97;width:100%;background:none;}
  .site-header .nav-links .nav-sub-card a::before{content:"";display:block;flex:none;
    width:14px;height:1px;background:rgba(244,236,223,.3);transition:background .2s;}
  .site-header .nav-links .nav-sub-card a:hover,
  .site-header .nav-links .nav-sub-card a:active{background:none;color:#fff;}
  .site-header .nav-links .nav-sub-card a:hover::before,
  .site-header .nav-links .nav-sub-card a:active::before{background:var(--accent);}
  .nav-caret{display:none;}
}

/* Instagram-Link im Footer */
.foot-brand .foot-insta { display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:#B9AC97; font-size:13.5px; font-weight:600; transition:color .2s ease; }
.foot-brand .foot-insta:hover { color:#fff; }

/* ---------- Gate: Warum kostenlos – bewusst gesetzter Vertrauens-Moment links ---------- */
.gate-why{margin:30px 0 0;}
.gate-why b{display:block;font-size:14px;color:var(--ink);font-weight:700;}
.gate-why p{margin:6px 0 0;font-size:14px;line-height:1.65;color:var(--ink-2);max-width:42ch;}

/* ---------- Erstgespräch-Sektion: klare Zweistufigkeit im Einstieg ----------
   cta-lead = die Grenze des Checks (traegt), cta-sub = der Wert der Einschaetzung
   (ruhiger). Nichts wirkt gleich wichtig, keine Zusatzbloecke. */
.cta-sub{margin:14px auto 0;max-width:56ch;font-size:15px;line-height:1.65;color:var(--faint);}

/* ---------- FAQ auf der Startansicht ---------- */
.tool-faq{max-width:680px;margin:clamp(72px,9vw,110px) auto 0;text-align:left;}
.tool-faq .eyebrow{display:block;text-align:center;}
.tool-faq h2{margin:12px 0 18px;text-align:center;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.03em;line-height:1.15;text-wrap:balance;}
.tool-faq details{border-top:1px solid var(--line);}
.tool-faq details:last-of-type{border-bottom:1px solid var(--line);}
.tool-faq summary{cursor:pointer;padding:16px 36px 16px 2px;font-weight:700;font-size:15.5px;color:var(--ink);
  list-style:none;position:relative;}
.tool-faq summary::-webkit-details-marker{display:none;}
.tool-faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:21px;font-weight:400;color:var(--accent);transition:transform .2s var(--ease);}
.tool-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.tool-faq details > p{margin:0 0 16px;padding:0 24px 0 2px;font-size:14.5px;line-height:1.65;color:var(--ink-2);}
.tool-faq details a{color:var(--accent);font-weight:600;}

/* ---------- Versus-Hauptteil: Zahl + Text als eine ruhige Komposition ---------- */
.versus-main{margin:clamp(30px,4.5vw,44px) 0 0;padding-top:clamp(26px,3.5vw,36px);
  border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:auto 1fr;column-gap:clamp(36px,5vw,60px);align-items:start;}
.versus-main.solo{grid-template-columns:1fr;}
.vs-num{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:170px;align-self:center;}
.vs-num b{font-size:clamp(56px,7.5vw,76px);line-height:.95;letter-spacing:-.045em;color:var(--accent);font-weight:800;}
.vs-num span{font-size:14px;font-weight:600;color:var(--ink-2);max-width:16ch;line-height:1.55;}
.vs-copy{display:flex;flex-direction:column;gap:16px;max-width:58ch;}
.vs-suche{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding:11px 20px;background:#fff;border:1px solid var(--line);border-radius:999px;
  font-size:14.5px;font-weight:650;color:var(--ink);}
.vs-suche svg{color:var(--faint);flex:none;}
.vs-kontext{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-2);}
.vs-deut{margin:0;font-size:16px;line-height:1.6;font-weight:650;color:var(--ink);text-wrap:pretty;}
.vs-basis{margin:8px 0 0;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:13.5px;line-height:1.72;color:#5F5344;}
/* Mobil: eigene Reihenfolge und Komposition, kein zusammengeschobener
   Desktop-Block. Reihenfolge: Suche -> Kennzahl -> Erklaerung -> Bedeutung
   -> Datenbasis. vs-copy wird per display:contents aufgeloest, damit die
   Kinder einzeln geordnet werden koennen. */
@media (max-width:620px){
  .versus{padding:38px 22px 34px;scroll-margin-top:92px;}
  .versus-main{display:flex;flex-direction:column;padding-top:24px;}
  .vs-copy{display:contents;}
  .vs-suche{order:1;align-self:stretch;justify-content:flex-start;margin:0 0 20px;
    padding:13px 16px;border-radius:14px;font-size:14px;line-height:1.4;}
  .vs-suche svg{width:15px;height:15px;}
  .vs-num{order:2;flex-direction:row;align-items:center;gap:16px;min-width:0;align-self:flex-start;margin:0 0 16px;}
  .vs-num b{font-size:48px;}
  .vs-num span{max-width:none;font-size:14px;}
  .vs-kontext{order:3;font-size:15px;margin:0 0 12px;}
  .vs-deut{order:4;font-size:15.5px;margin:0 0 18px;}
  .vs-mehr{display:none;}
  .vs-basis{order:5;font-size:13px;margin:0;padding-top:13px;}
}

/* ---------- Prognose: der Highlight-Moment des Berichts ----------
   Bewusst als EINZIGER dunkler Block im Bericht: hebt sich klar von der
   Kartenlogik darunter ab und macht den Sprung heute -> erreichbar zum
   emotionalen Zwischenhoch vor der Erstgespraech-Sektion. */
.prognose{max-width:820px;margin:clamp(56px,7vw,84px) auto 0;text-align:center;
  background:linear-gradient(168deg,#2A2013,#1E160E);border-radius:var(--r-lg);
  padding:clamp(38px,5vw,60px) clamp(24px,5vw,64px);position:relative;overflow:hidden;}
.prognose::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 68% at 50% 0%, rgba(235,78,28,.14), transparent 62%);}
.prognose > *{position:relative;}
.prognose .eyebrow{color:var(--accent);}
.prognose h2{margin-top:12px;color:#F6EEDF;font-size:clamp(23px,2.8vw,30px);letter-spacing:-.035em;line-height:1.15;text-wrap:balance;}
.prog-score{margin:24px auto 0;display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,52px);}
.ps-wert{display:flex;flex-direction:column;gap:6px;}
.ps-wert span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,238,223,.5);}
.ps-wert b{font-size:clamp(44px,6vw,60px);line-height:1;letter-spacing:-.04em;font-weight:800;color:rgba(246,238,223,.85);}
.ps-ziel b{color:var(--accent);font-size:clamp(52px,7vw,72px);}
.ps-pfeil{color:rgba(246,238,223,.45);flex:none;margin-top:16px;}
.prog-liste{list-style:none;margin:26px auto 0;padding:0;max-width:520px;display:grid;gap:13px;text-align:left;}
.prog-liste li{display:flex;gap:12px;align-items:flex-start;font-size:15px;font-weight:600;color:#F6EEDF;line-height:1.5;}
.prog-liste li span{text-wrap:pretty;}
.prog-liste svg{color:var(--accent);flex:none;margin-top:2px;}
.prog-note{margin:22px auto 0;max-width:56ch;font-size:13px;line-height:1.6;color:rgba(246,238,223,.66);}
.prog-bruecke{margin-top:clamp(28px,4vw,40px);padding-top:clamp(24px,3.2vw,32px);border-top:1px solid rgba(246,238,223,.16);}
.prog-bruecke .pb-k{display:block;line-height:1;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.prog-bruecke p{margin:14px auto 0;max-width:52ch;font-size:16px;line-height:1.68;font-weight:500;color:rgba(246,238,223,.94);}
@media (max-width:620px){ .prognose{padding:32px 20px;} .prog-score{gap:18px;} }