/* =====================================================================
   SPENDEBOX – DESIGN
   MARKENFARBE ÄNDERN: nur die zwei Zeilen --brand und --brand-2 anpassen.
   Layout: helles, luftiges Produkt-Design – große Karten, weiche Schatten,
   Farbverlauf nur im Hero und im Abschluss-Banner.
   ===================================================================== */
:root{
  --brand:#2eb5ad;          /* Logo-Farbe: Flächen, Verläufe, Akzente */
  --brand-strong:#13807a;   /* dunklere Abstufung: Buttons, Links, farbige Schrift (gut lesbar) */
  --brand-2:#1a7f96;        /* Zweitfarbe für Farbverläufe */
  --brand-ink:#ffffff;      /* weiße Schrift auf dunklen Flächen */
  --on-brand:#06302c;       /* dunkle Schrift auf Logo-Farbe (Buttons) */
  --brand-hover:#4fc4bc;    /* Button bei Mausberührung */
  --bg:#ffffff;
  --bg-soft:#f4f7f8;
  --surface:#ffffff;
  --fg:#0c1a24;
  --muted:#566673;
  --line:#e3e9ec;
  --tint:color-mix(in srgb,var(--brand) 12%,var(--bg));
  --shadow-s:0 1px 2px rgba(12,26,36,.05),0 2px 8px rgba(12,26,36,.05);
  --shadow:0 2px 6px rgba(12,26,36,.04),0 18px 40px -12px rgba(12,26,36,.16);
  --screen:#0c1a24;--screen-fg:#eef6f4;

  --f-display:"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:5.5rem;
  --r-s:10px;--r-m:16px;--r-l:24px;--r-xl:32px;
  --wrap:1200px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a1219;--bg-soft:#0f1a22;--surface:#121f29;--fg:#e9f0f3;--muted:#9aabb5;--line:#1f2f3a;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);--shadow:0 18px 40px -12px rgba(0,0,0,.6);--screen:#050b10;--brand-strong:#2eb5ad;--brand-ink:#04211f;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a1219;--bg-soft:#0f1a22;--surface:#121f29;--fg:#e9f0f3;--muted:#9aabb5;--line:#1f2f3a;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);--shadow:0 18px 40px -12px rgba(0,0,0,.6);--screen:#050b10;--brand-strong:#2eb5ad;--brand-ink:#04211f;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-strong);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:color-mix(in srgb,var(--brand-strong) 75%,var(--fg))}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:2px;border-radius:8px}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.08;letter-spacing:-.025em;text-wrap:balance;margin:0;font-weight:700}
h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,1.2rem + 1.9vw,2.75rem)}
h3{font-size:1.2rem;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
.grad{background:linear-gradient(100deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.prose p+p,.prose p+ul,.prose ul+p,.prose p+ol,.prose ol+p,.prose ul+ul{margin-top:var(--s-4)}
.prose ul,.prose ol{padding-left:1.2em;margin:0}
.prose li+li{margin-top:var(--s-2)}
.prose h2{margin-top:var(--s-7);margin-bottom:var(--s-4);font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem)}
.prose h3{margin-top:var(--s-6);margin-bottom:var(--s-3)}
.prose{max-width:72ch}
.prose ol li::marker{color:var(--brand-strong);font-weight:700}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--surface);padding:8px 12px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font:600 .82rem/1 var(--f-body);color:var(--brand-strong);background:var(--tint);padding:.55em .9em;border-radius:999px;letter-spacing:.01em}
.eyebrow::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor}
.lead{font-size:clamp(1.1rem,1rem + .45vw,1.32rem);color:var(--muted);max-width:58ch;line-height:1.6}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.num{font-variant-numeric:tabular-nums}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 1rem/1 var(--f-body);padding:1em 1.5em;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary,.btn-brass{background:var(--brand);color:var(--on-brand);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand) 80%,transparent)}
.btn-primary:hover,.btn-brass:hover{background:var(--brand-hover);color:var(--on-brand);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--brand) 80%,transparent)}
.btn-primary::after,.btn-brass::after{content:"→";transition:transform .18s}
.btn-primary:hover::after{transform:translateX(3px)}
.btn-ghost{border-color:var(--line);color:var(--fg);background:var(--surface)}
.btn-ghost:hover{color:var(--fg);border-color:var(--fg)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.head-row{display:flex;align-items:center;gap:var(--s-4);min-height:72px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--fg);flex-shrink:0}
.brand img{height:40px;width:auto}
.brand .wordmark{font:750 1.4rem/1 var(--f-display);letter-spacing:-.03em}
.brand .wordmark b{color:var(--brand-strong);font-weight:750}
.brand img + .wordmark{display:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a,.nav .dd>button{font:500 .96rem/1 var(--f-body);color:var(--fg);text-decoration:none;padding:.75em .9em;border-radius:999px;background:none;border:0;cursor:pointer}
.nav a:hover,.nav .dd>button:hover{background:var(--bg-soft);color:var(--fg)}
.nav a[aria-current="page"]{background:var(--tint);color:var(--brand-strong)}
.nav a.btn{margin-left:var(--s-3);padding:.85em 1.25em;background:var(--brand);color:var(--on-brand)}
.nav a.btn:hover{background:var(--brand-hover);color:var(--on-brand)}
.dd{position:relative}
.dd>button::after{content:"";display:inline-block;width:.4em;height:.4em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);margin-left:.5em;opacity:.6}
.dd-menu{position:absolute;top:calc(100% + 6px);left:-8px;min-width:320px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);padding:var(--s-2);display:none}
.dd-menu::before{content:"";position:absolute;inset:-10px 0 auto;height:10px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{display:grid}
.nav .dd-menu a{padding:.8em .9em;border-radius:var(--r-s)}
.dd-menu a small{display:block;color:var(--muted);font-size:.82rem;margin-top:.35em;font-weight:400}
.menu-toggle{display:none;margin-left:auto;background:var(--bg-soft);border:0;border-radius:999px;padding:.7em 1.1em;font:600 .95rem var(--f-body);color:var(--fg);cursor:pointer}
@media (max-width:1000px){
  .menu-toggle{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:var(--s-3) max(20px,env(safe-area-inset-right,0px)) var(--s-5) max(20px,env(safe-area-inset-left,0px));max-height:calc(100vh - 72px);overflow:auto;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a,.nav .dd>button{padding:.9em .7em;width:100%;text-align:left;border-radius:var(--r-s)}
  .dd-menu{position:static;display:grid;box-shadow:none;border:0;padding:0;min-width:0}
  .dd>button{display:none}
  .nav a.btn{margin:var(--s-3) 0 0;justify-content:center;width:100%}
}

/* Breadcrumb */
.crumbs{font-size:.86rem;color:var(--muted);padding-block:var(--s-4) 0}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45em}
.crumbs li+li::before{content:"›";margin-right:.45em;opacity:.5}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brand-strong)}

/* Hero */
.hero{position:relative;padding-block:var(--s-7) var(--s-8);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:70vw;max-width:900px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 18%,transparent),transparent);z-index:-1;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto auto -40% -15%;width:55vw;max-width:700px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand-2) 12%,transparent),transparent);z-index:-1;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-7);align-items:center}
.hero-grid>*{min-width:0}
.hero h1{margin-block:var(--s-5) var(--s-5)}
.hero .btns{margin-top:var(--s-6)}
.hero-facts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-6);padding:0;list-style:none;font-size:.9rem;color:var(--fg)}
.hero-facts li{display:flex;align-items:center;gap:.45em;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.5em .9em;box-shadow:var(--shadow-s)}
.hero-facts li::before{content:"✓";color:var(--brand-strong);font-weight:700}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr;gap:var(--s-6)}.hero{padding-block:var(--s-6) var(--s-7)}}

/* Gerät-Illustration */
.device{max-width:420px;margin-inline:auto;width:100%;position:relative;padding:var(--s-6);border-radius:var(--r-xl);background:linear-gradient(150deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)}
.device svg{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 30px rgba(0,0,0,.25))}
.device figcaption{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);white-space:nowrap;background:var(--surface);color:var(--fg);border:1px solid var(--line);font-size:.85rem;font-weight:600;padding:.6em 1em;border-radius:999px;box-shadow:var(--shadow-s)}
.device figcaption::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:#22c55e;margin-right:.5em;box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 25%,transparent)}

/* Bänder */
.band{padding-block:var(--s-8)}
.band-alt{background:var(--bg-soft)}
.band-ink{padding-block:var(--s-7)}
.band-ink>.wrap{background:radial-gradient(80% 140% at 0% 0%,color-mix(in srgb,var(--brand) 70%,transparent),transparent 60%),linear-gradient(120deg,#13807a,#155f73);color:#fff;border-radius:var(--r-xl);padding-block:var(--s-7);box-shadow:var(--shadow)}
@media (min-width:700px){.band-ink>.wrap{padding-left:clamp(28px,5vw,64px);padding-right:clamp(28px,5vw,64px);max-width:calc(var(--wrap) - 40px)}}
@media (max-width:699px){.band-ink>.wrap{border-radius:0}}
:root .band-ink a{color:#fff}
.sec-head{display:grid;gap:var(--s-4);margin-bottom:var(--s-7);max-width:64ch;justify-items:start}
.sec-head p{color:var(--muted);font-size:1.1rem}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}

/* Trust */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);padding:0;margin:0;list-style:none}
.trust li{display:grid;gap:.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5);box-shadow:var(--shadow-s)}
.trust strong{font:750 clamp(1.6rem,1.2rem + 1.2vw,2.2rem)/1.05 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.trust span{color:var(--muted);font-size:.95rem}
@media (max-width:820px){.trust{grid-template-columns:repeat(2,1fr)}}

/* Schritte */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);counter-reset:s;padding:0;list-style:none;margin:0}
.steps li{counter-increment:s;padding:var(--s-6) var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-s)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--brand);color:var(--on-brand);font:700 1.1rem var(--f-display);margin-bottom:var(--s-4)}
.steps h3{margin-bottom:var(--s-2)}
.steps p{color:var(--muted)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* Produktkarten */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--s-5)}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;text-decoration:none;color:var(--fg);transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow-s)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--fg)}
.pcard .ph{aspect-ratio:4/3;background:radial-gradient(120% 90% at 50% 100%,var(--tint),var(--bg-soft));display:grid;place-items:center;padding:var(--s-5);max-width:100%}
.pcard .ph img{max-height:100%;width:auto;object-fit:contain;transition:transform .3s}
.pcard:hover .ph img{transform:scale(1.04)}
.pcard .pb{padding:var(--s-5);display:grid;gap:var(--s-2);flex:1;align-content:start}
.pcard .tag{font-size:.8rem;color:var(--brand-strong);font-weight:600}
.pcard .price{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--line);display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
.price b{font:750 1.5rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price span{font-size:.88rem;color:var(--muted)}

/* Tabellen */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-s)}
table{border-collapse:collapse;width:100%;min-width:640px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:1em 1.1em;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font:600 .8rem var(--f-body);color:var(--muted);background:var(--bg-soft)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb,var(--tint) 50%,transparent)}
td.money{font-weight:650;white-space:nowrap}

/* Preis-Pläne */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-6);display:grid;gap:var(--s-4);align-content:start;box-shadow:var(--shadow-s)}
.plan.featured{border:2px solid var(--brand);box-shadow:var(--shadow)}
.plan.featured::before{content:"Beliebt";position:absolute;top:-13px;right:24px;background:var(--brand);color:var(--on-brand);font:600 .78rem var(--f-body);padding:.45em .9em;border-radius:999px}
.plan .price b{font-size:3rem;letter-spacing:-.04em}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:.6em}
.plan li{padding-left:1.6em;position:relative;color:var(--muted)}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--brand-strong);font-weight:700}
@media (max-width:760px){.plans{grid-template-columns:1fr}}

/* Zielgruppen */
.audiences{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.aud{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-6) var(--s-5);text-decoration:none;color:var(--fg);display:grid;gap:var(--s-3);align-content:start;box-shadow:var(--shadow-s);transition:transform .2s,box-shadow .2s}
.aud:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--fg)}
.aud p{color:var(--muted);font-size:.95rem}
.aud .go{color:var(--brand-strong);font-weight:600;font-size:.92rem;margin-top:auto}
@media (max-width:960px){.audiences{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.audiences{grid-template-columns:1fr}}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center}
.split>*{min-width:0}
.split figure{margin:0;background:radial-gradient(120% 90% at 50% 100%,var(--tint),var(--bg-soft));border-radius:var(--r-xl);padding:var(--s-6);display:grid;place-items:center;min-height:300px}
.split figure img{max-height:460px;width:auto;object-fit:contain}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:var(--s-5)}}

/* Checkliste */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.checks li{padding-left:2em;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;top:.1em;width:1.35em;height:1.35em;border-radius:50%;background:var(--tint);color:var(--brand-strong);font-weight:800;font-size:.85em;display:grid;place-items:center}
.checks.two{grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-6)}
@media (max-width:640px){.checks.two{grid-template-columns:1fr}}

/* Spezifikationen */
.specs{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface);margin:0;box-shadow:var(--shadow-s)}
.specs dt,.specs dd{margin:0;padding:.9em 1.1em;border-bottom:1px solid var(--line)}
.specs dt{color:var(--muted);font-size:.92rem;background:var(--bg-soft)}
.specs dd{font-weight:550;font-variant-numeric:tabular-nums}
.specs dt:last-of-type,.specs dd:last-of-type{border-bottom:0}

/* FAQ */
.faq{display:grid;gap:var(--s-3);max-width:880px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:0 var(--s-5);box-shadow:var(--shadow-s);transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s-5) 0;font:600 1.05rem/1.4 var(--f-display);display:flex;justify-content:space-between;align-items:center;gap:var(--s-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--brand-strong);font:500 1.3rem/1 var(--f-body);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding-bottom:var(--s-5);color:var(--muted)}
.faq .a p+p,.faq .a p+ul,.faq .a ul+p{margin-top:var(--s-3)}
.faq .a ul{margin:0;padding-left:1.2em}
.band .faq{margin-inline:0}

/* CTA */
.cta{display:grid;grid-template-columns:1.3fr auto;gap:var(--s-6);align-items:center}
.cta h2{color:inherit}
.cta p{margin-top:var(--s-3);color:rgba(255,255,255,.88)}
:root .band-ink a.btn-primary,:root .band-ink a.btn-primary:hover{background:#fff;color:#13807a;box-shadow:none}
:root .band-ink a.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
:root .band-ink a.btn-ghost:hover{border-color:#fff;color:#fff}
@media (max-width:820px){.cta{grid-template-columns:1fr}}

/* Seitenkopf Unterseiten */
.page-head{position:relative;overflow:hidden;padding-block:var(--s-6) var(--s-8)}
.page-head::before{content:"";position:absolute;inset:-60% -10% auto auto;width:60vw;max-width:760px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 14%,transparent),transparent);z-index:-1;pointer-events:none}
.page-head h1{margin-block:var(--s-5) var(--s-4);font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem)}
.page-head .btns{margin-top:var(--s-6)}
.content{padding-block:var(--s-6) var(--s-8)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-7);align-items:start}
.aside{position:sticky;top:100px;display:grid;gap:var(--s-4)}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5);display:grid;gap:var(--s-3);box-shadow:var(--shadow-s)}
.aside .box:first-child{border:2px solid var(--brand);box-shadow:var(--shadow)}
.box h3{font-size:1.08rem}
.box .price b{font-size:2rem}
@media (max-width:980px){.layout{grid-template-columns:1fr}.aside{position:static}}

/* Antwortbox */
.answer{background:var(--tint);padding:var(--s-5) var(--s-5);border-radius:var(--r-m);max-width:72ch;border:1px solid color-mix(in srgb,var(--brand) 20%,transparent)}
.answer strong{display:block;font-size:.82rem;color:var(--brand-strong);margin-bottom:var(--s-2);font-weight:700}

/* Formulare */
.form{display:grid;gap:var(--s-4)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
form.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,4vw,40px);box-shadow:var(--shadow)}
label{display:grid;gap:.4rem;font-weight:600;font-size:.92rem}
label .opt{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;font-weight:400;color:var(--fg);background:var(--bg-soft);border:1.5px solid transparent;border-radius:var(--r-s);padding:.85em 1em;width:100%;transition:border-color .15s,background .15s}
input:hover,select:hover,textarea:hover{border-color:var(--line)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand-strong);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 15%,transparent)}
textarea{min-height:140px;resize:vertical}
.check{display:flex;gap:.75em;align-items:flex-start;font-weight:400;font-size:.95rem}
.check input{width:1.25em;height:1.25em;margin-top:.15em;flex-shrink:0;accent-color:var(--brand-strong)}
.hp{position:absolute;left:-5000px}
.notice{padding:var(--s-4);border-radius:var(--r-m);background:var(--tint);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}

/* Konfigurator */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:var(--s-6);align-items:start}
.cfg-step{margin-bottom:var(--s-7)}
.cfg-step>h2{font-size:1.5rem;margin-bottom:var(--s-2)}
.cfg-step>p{color:var(--muted);margin-bottom:var(--s-5)}
.items{display:grid;gap:var(--s-3)}
.item{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:var(--s-4);align-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-l);padding:var(--s-4);transition:border-color .15s,box-shadow .15s}
.item:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.item.on{border-color:var(--brand-strong);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}
.item .thumb{width:96px;height:96px;border-radius:var(--r-m);background:var(--bg-soft);display:grid;place-items:center;overflow:hidden}
.item .thumb img{max-height:88px;width:auto}
.item h3{font-size:1.05rem}
.item .meta{font-size:.86rem;color:var(--muted);margin-block:.2em .4em}
.item .price b{font-size:1.2rem}
.qty{display:flex;align-items:center;background:var(--bg-soft);border-radius:999px;padding:3px}
.qty button{width:2.3em;height:2.3em;border:0;border-radius:50%;background:var(--surface);color:var(--fg);font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow-s)}
.qty button:hover{background:var(--brand);color:var(--on-brand)}
.qty input{width:2.6em;text-align:center;border:0;background:transparent;padding:.3em 0;font-weight:700;-moz-appearance:textfield;box-shadow:none}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
@media (max-width:640px){.item{grid-template-columns:64px minmax(0,1fr)}.item .thumb{width:64px;height:64px}.item .thumb img{max-height:58px}.item .qty{grid-column:1/-1;justify-self:end}}
.summary{position:sticky;top:100px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-6) var(--s-5);display:grid;gap:var(--s-4);box-shadow:var(--shadow)}
.summary ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2);font-size:.92rem}
.summary li{display:flex;justify-content:space-between;gap:var(--s-3)}
.totals{border-top:1px solid var(--line);padding-top:var(--s-4);display:grid;gap:var(--s-2)}
.totals div{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.totals div:first-child b{font:750 1.5rem var(--f-display);color:var(--brand-strong)}
@media (max-width:980px){.cfg{grid-template-columns:1fr}.summary{position:static}}

/* Rechtstexte */
.legal{max-width:78ch}
.legal h2{font-size:1.4rem;margin-top:var(--s-6);margin-bottom:var(--s-3)}
.legal h3{font-size:1.08rem;margin-top:var(--s-5);margin-bottom:var(--s-2)}
.legal p,.legal ul{margin:0 0 var(--s-3)}
.legal ul{padding-left:1.2em}

/* Footer */
.site-foot{background:var(--bg-soft);padding-block:var(--s-8) var(--s-5);font-size:.95rem;margin-top:var(--s-6)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s-6)}
.foot-grid>*{min-width:0}
.foot-grid h2{font:600 .9rem var(--f-body);letter-spacing:0;margin-bottom:var(--s-4)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.foot-grid a{color:var(--muted);text-decoration:none}
.foot-grid a:hover{color:var(--brand-strong)}
.foot-grid address{font-style:normal;color:var(--muted);line-height:1.8}
.foot-bottom{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between;color:var(--muted);font-size:.86rem}
.foot-bottom ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-5);margin:0;padding:0}
.foot-bottom a{color:var(--muted);text-decoration:none}
.foot-bottom a:hover{color:var(--brand-strong)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* WhatsApp */
.wa{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:.5em;background:#25d366;color:#fff;text-decoration:none;font:600 .95rem var(--f-body);padding:.85em 1.2em;border-radius:999px;box-shadow:0 10px 24px -8px rgba(37,211,102,.7)}
.wa:hover{color:#fff;transform:translateY(-2px)}
.wa svg{width:22px;height:22px;fill:currentColor}
@media (max-width:520px){.wa span{display:none}.wa{padding:.9em}}

.img-fallback{display:grid;place-items:center;color:var(--muted);font-size:.85rem;text-align:center;padding:var(--s-4)}
.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}

/* sanftes Einblenden – Inhalte bleiben ohne JS sichtbar */
@media (prefers-reduced-motion:no-preference){
  .hero-grid>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-grid>*:nth-child(2){animation-delay:.12s}
  @keyframes rise{from{transform:translateY(14px)}to{transform:none}}
}

.vid{width:100%;max-width:100%;border-radius:var(--r-l);background:var(--bg-soft);box-shadow:var(--shadow-s);display:block}

/* Zahlungsarten-Leiste (Startseite) */
.paystrip{padding-block:var(--s-5) var(--s-6)}
.paystrip-h{text-align:center;font-size:.9rem;font-weight:600;color:var(--muted);margin-bottom:var(--s-4)}
.paylogos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.paylogos li{display:grid;place-items:center;width:78px;height:50px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-s)}
.paylogos img{width:auto;height:30px;max-width:62px}
@media (max-width:520px){.paylogos li{width:64px;height:42px}.paylogos img{height:24px;max-width:52px}}

/* Formular-Beschriftungen: Hinweis (optional) bleibt in derselben Zeile */
label{display:block}
label>input,label>select,label>textarea{display:block;margin-top:.4rem}
label.check{display:flex}
label.check>input{margin-top:.15em}
.form-grid{align-items:end}

/* Produktbilder: bleiben immer in ihrer Bildfläche (auch hohe Fotos) */
.pcard .ph{position:relative;overflow:hidden;padding:0}
.pcard .ph img,.pcard .ph .img-fallback{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);max-height:none;object-fit:contain;border-radius:12px}
.split figure{overflow:hidden}
.split figure img{max-width:100%;height:auto;max-height:460px;object-fit:contain}
.item .thumb img{max-width:100%;object-fit:contain}
.pcard .ph{aspect-ratio:1/1}
.pcard .ph img{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}

/* Direkt-Antwort, Fakten-Box, Autorenbox */
.prose h2.qa-q{margin-top:0;margin-bottom:var(--s-3)}
.qa-a{font-size:1.12rem;line-height:1.6;max-width:70ch;padding:var(--s-4) var(--s-5);background:var(--tint);border-radius:var(--r-m);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.qa-a strong{font-weight:650}
.fact{margin-top:var(--s-5);padding:var(--s-4) var(--s-5);border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);display:grid;gap:var(--s-2)}
.fact>strong{font-size:.82rem;color:var(--brand-strong);letter-spacing:.02em}
.author{display:flex;gap:var(--s-4);align-items:center;margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)}
.author-av{flex-shrink:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--on-brand);font:700 1rem var(--f-display)}
.author-n{font-weight:600}

/* NEU: Werbedisplay */
.badge-neu{display:inline-block;vertical-align:middle;background:#e8590c;color:#fff;font:800 .68rem/1 var(--f-body);letter-spacing:.08em;padding:.35em .6em;border-radius:6px}
.badge-neu.big{font-size:.85rem;padding:.5em .85em;border-radius:999px}
.neu-band{padding-block:var(--s-6) var(--s-7)}
.neu{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-7);align-items:center;background:linear-gradient(135deg,var(--tint),var(--surface) 70%);border:2px solid var(--brand);border-radius:var(--r-xl);padding:clamp(22px,4vw,48px);box-shadow:var(--shadow)}
.neu>*{min-width:0}
.neu h2{margin-block:var(--s-4) var(--s-4)}
.neu .checks{margin-block:var(--s-5)}
.neu-price{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:baseline;margin-bottom:var(--s-5)}
.neu-price .price b{font-size:2rem}
.neu-media{margin:0}
.neu-media video{width:100%;max-width:100%;border-radius:var(--r-l);box-shadow:var(--shadow);background:#000;display:block}
.neu-media figcaption{font-size:.85rem;color:var(--muted);margin-top:var(--s-2);text-align:center}
.item-neu{border-color:#e8590c}
@media (max-width:880px){.neu{grid-template-columns:1fr;gap:var(--s-5)}}
.neu-price .price,.item .price,.box .price,.plan .price{display:flex;flex-wrap:wrap;gap:.35em;align-items:baseline}

/* Derzeit nicht lieferbar */
.badge-na{display:inline-block;vertical-align:middle;background:#5b6770;color:#fff;font:700 .72rem/1 var(--f-body);letter-spacing:.03em;padding:.4em .65em;border-radius:6px;white-space:nowrap}
.na-inline{display:block;font-weight:600;font-size:.8rem;color:#5b6770}
.pcard-na .ph img{filter:grayscale(1);opacity:.55}
.pcard-na .price b{color:var(--muted)}
.ph-na{position:absolute;top:14px;left:14px;z-index:1}
.item-na{opacity:.6;background:var(--bg-soft)}
.item-na .thumb img{filter:grayscale(1)}
.item-na .qty button{cursor:not-allowed}
.item-na .qty button:hover{background:var(--surface);color:var(--fg)}
.na-box{margin-bottom:var(--s-5)}
.box>.badge-na{justify-self:start}

/* Logo größer (+20 % Desktop, +10 % Handy) */
.site-head .brand img{height:48px}
.site-foot .brand img{height:48px}
@media (max-width:520px){.site-head .brand img{height:44px}}