/* Die IAB Experten · Designsystem v6 (28.08.2026)
   Marke aus der Logo-Präsentation Nullacht14: Signet Orange-Rot, Tinte, Weiß.
   Ein Raster, eine Abstandsskala, ein Bewegungssystem. Keine nachträglichen Overrides:
   wer etwas ändert, ändert es hier an der Stelle, an die es gehört. */

/* ---------- Tokens ---------- */
:root{
  --ink:#0B161B; --ink-2:#13232A; --ink-3:#1B2F37; --ink-soft:#3B4A52; --muted:#59676F;
  --paper:#FFFFFF; --stone:#F4F2EE; --stone-2:#E9E6DF; --line:#DFE3E5; --line-dark:rgba(255,255,255,.12);
  --brand:#F03C1F; --brand-deep:#C92F15; --brand-soft:#FDEBE6; --brand-rgb:240,60,31;
  --render:#0D1C23;
  --font-display:"Outfit",ui-sans-serif,system-ui,sans-serif;
  --font-body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --t-xs:12px; --t-sm:14px; --t-base:17px; --t-lg:20px; --t-xl:24px; --t-2xl:32px; --t-3xl:40px;
  --on-dark:rgba(255,255,255,.84); --on-dark-2:rgba(255,255,255,.6); --on-dark-3:rgba(255,255,255,.38);
  --wrap:1200px; --gutter:24px; --radius:6px; --skew:min(4vw,64px);
  --shadow-1:0 1px 2px rgba(11,22,27,.06),0 6px 16px -10px rgba(11,22,27,.12);
  --shadow-2:0 2px 4px rgba(11,22,27,.06),0 24px 48px -24px rgba(11,22,27,.35);
  --shadow-dark:0 32px 64px -28px rgba(0,0,0,.7);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --d-fast:160ms; --d-ui:240ms; --d-reveal:520ms;
}
/* Bereichsfarben: Unternehmer Orange (Marke), Betreiber/Hersteller Petrol, Berater Stahlblau */
body.bereich-partner{--brand:#1FA393;--brand-deep:#17857A;--brand-soft:#E2F4F1;--brand-rgb:31,163,147}
body.bereich-berater{--brand:#3B7FC7;--brand-deep:#2E67A3;--brand-soft:#E4EDF8;--brand-rgb:59,127,199}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--t-base);line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:2px}
::selection{background:var(--brand);color:#fff}
.num,.calc,.kpi,.vol,td:nth-child(n+2){font-variant-numeric:tabular-nums}

/* Große Schirme: Raster und Schrift wachsen mit, Laufband bleibt an der Seitenbreite */
@media(min-width:1800px){:root{--wrap:1360px;--s9:112px;--s10:144px}body{font-size:18px}}
@media(min-width:2400px){:root{--wrap:1480px}body{font-size:19px}}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,5.2vw,64px)}
h1.long{font-size:clamp(32px,var(--skew),50px)}
h2{font-size:clamp(28px,3.2vw,40px);margin-bottom:var(--s5)}
h3{font-size:var(--t-lg);line-height:1.25;letter-spacing:-.01em;margin-bottom:var(--s2)}
p{margin:0 0 var(--s4);max-width:62ch}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.5;color:var(--ink-soft)}
.small,small{font-size:var(--t-sm);line-height:1.5;color:var(--muted)}
b,strong{font-weight:600}
.mono,.sec-label{display:inline-flex;align-items:center;gap:var(--s3);font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:var(--s4)}
.hero .mono,.hero .sec-label,.ctaend .sec-label,.dark .mono{color:var(--brand)}
.sec-label::before{content:"";width:20px;height:3px;background:var(--brand);transform:skewX(-30deg)}
.isp{font-family:var(--font-display);font-weight:500;font-size:var(--t-lg);line-height:1.4;margin-bottom:var(--s6);max-width:52ch}
.isp::before{content:"//";color:var(--brand);font-weight:700;margin-right:var(--s2);letter-spacing:-.08em}

/* ---------- Raster ---------- */
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.grid{display:grid;gap:var(--s6);align-items:stretch}
/* Kästen nebeneinander sind immer gleich hoch; Bilder, Diagramme und Formulare richten sich oben aus */
.grid > figure,.grid > .flow,.grid > form,.grid > div.img,.grid > .avatar{align-self:start}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
section > .wrap > h2 + .grid,section > .wrap > p + .grid,section > .wrap > h2 + .tscroll,section > .wrap > p + .tscroll,
section > .wrap > h2 + ol,section > .wrap > p + ol,section > .wrap > h2 + details,section > .wrap > p + details,section > .wrap > h2 + form{margin-top:var(--s7)}
section > .wrap > .grid + .grid,section > .wrap > .grid + .box,section > .wrap > .box + .grid,section > .wrap > .tscroll + .grid,section > .wrap > .grid + p,section > .wrap > .tscroll + p,section > .wrap > ol + p,section > .wrap > .grid + h3,section > .wrap > .box + p{margin-top:var(--s6)}
section > .wrap > h2 + p.lead{margin-bottom:var(--s5)}
section > .wrap > h3{margin-top:var(--s7);margin-bottom:var(--s4)}
section > .wrap > .grid > div > .box + .box{margin-top:var(--s5)}

/* ---------- Sektionen ---------- */
section{padding-block:var(--s10);position:relative;background:var(--paper)}
section.alt{background:var(--stone)}
/* Gleichfarbige Nachbarn: eine Hairline und 64 px statt 2×96 px Leere */
section:not(.alt):not(.hero):not(.ctaend) + section:not(.alt):not(.ctaend),section.alt + section.alt{padding-top:0}
section:not(.alt):not(.hero):not(.ctaend) + section:not(.alt):not(.ctaend) > .wrap,section.alt + section.alt > .wrap{border-top:1px solid var(--line);padding-top:var(--s9)}
/* Farbwechsel: 80/80 statt 96/96 */
section:not(.hero) + section.alt,section.alt + section:not(.alt):not(.ctaend){padding-top:var(--s10)}
section:not(.hero):not(.presse-band):not(.ctaend){padding-bottom:var(--s10)}
.hero + section,.presse-band + section,.hero + footer,.presse-band + footer{margin-top:calc(-1 * var(--skew));padding-top:calc(var(--s10) + var(--skew));clip-path:polygon(0 var(--skew),100% 0,100% 100%,0 100%);z-index:1}
.hero + footer,.presse-band + footer{padding-top:calc(var(--s8) + var(--skew));clip-path:none;margin-top:0}
@media(max-width:640px){section{padding-block:var(--s8)}}

/* ---------- Kopfzeile ---------- */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid var(--line);transition:background var(--d-ui) ease,border-color var(--d-ui) ease,box-shadow var(--d-ui) var(--ease-out),color var(--d-ui) ease}
header.site.compact{box-shadow:0 8px 30px -18px rgba(11,22,27,.35)}
/* Über dem dunklen Hero: durchsichtig, weiße Schrift; beim Scrollen weiß mit Kante */
header.site:has(+ .hero):not(.compact){background:var(--ink);border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff}
header.site:has(+ .hero):not(.compact) .logo,header.site:has(+ .hero):not(.compact) nav.main a{color:#fff}
header.site:has(+ .hero):not(.compact) nav.main a{color:var(--on-dark-2)}
header.site:has(+ .hero):not(.compact) nav.main a.on,header.site:has(+ .hero):not(.compact) nav.main a:hover{color:#fff}
header.site:has(+ .hero):not(.compact) .cta.ghost{color:#fff;border-color:var(--on-dark-2)}
header.site:has(+ .hero):not(.compact) .cta.ghost:hover{background:#fff;color:var(--ink)}
.hero:has(figure.img.art){background-color:var(--render)}
header.site:has(+ .hero:has(figure.img.art)):not(.compact){background:var(--render)}
header.site .wrap.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s6);height:68px}
.logo{display:flex;align-items:center;gap:var(--s3);text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);letter-spacing:-.01em;line-height:1;flex:none}
.logo img{height:22px;width:auto}
.logo small{display:block;font-family:var(--font-body);font-size:var(--t-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
nav.main{display:flex;gap:var(--s7);align-items:center;height:100%}
nav.main a{position:relative;display:flex;align-items:center;height:68px;text-decoration:none;font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--muted);transition:color var(--d-fast) ease}
nav.main a:hover{color:var(--ink)}
nav.main a::after{content:"";position:absolute;left:0;width:24px;bottom:18px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform var(--d-ui) var(--ease-out)}
nav.main a.on{color:var(--ink)}
nav.main a.on::after{transform:scaleX(1)}
header .cta{justify-self:end;white-space:nowrap}
@media(max-width:900px){
  header.site .wrap.top{height:auto;grid-template-columns:1fr auto;gap:var(--s2) var(--s5);padding-block:var(--s3)}
  nav.main{grid-column:1 / -1;justify-self:start;width:100%;gap:var(--s5);overflow-x:auto;scrollbar-width:none}
  nav.main a{height:40px;white-space:nowrap}
  nav.main a::after{bottom:6px}
}
.subnav{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s6);font-size:var(--t-sm);overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
@media(max-width:900px){.subnav{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}}
.subnav .area{color:var(--on-dark-3);white-space:nowrap}
.subnav .area::after{content:"/";margin-left:var(--s5);color:var(--on-dark-3)}
.subnav a{color:var(--on-dark-2);text-decoration:none;white-space:nowrap;padding-block:var(--s1);border-bottom:1px solid transparent;transition:color var(--d-fast) ease,border-color var(--d-fast) ease}
.subnav a:hover{color:#fff}
.subnav a.on{color:#fff;border-bottom-color:var(--brand)}

/* Bereichszeile beim Scrollen schmal unter der Kopfleiste */
.subfix{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-ui) var(--ease-out);border-top:1px solid transparent}
header.site.compact .subfix{grid-template-rows:1fr;border-top-color:var(--line)}
.subfix-row{overflow:hidden;display:flex;align-items:center;gap:var(--s5);width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;font-size:13px;white-space:nowrap;scrollbar-width:none}
header.site.compact .subfix-row{overflow-x:auto;overflow-y:hidden;min-height:36px}
.subfix-row::-webkit-scrollbar{display:none}
.subfix-row .area{color:var(--muted);flex:none}
.subfix-row .area::after{content:"/";margin-left:var(--s5);color:var(--line)}
.subfix-row a{color:var(--ink-soft);text-decoration:none;padding-block:var(--s2);border-bottom:2px solid transparent;transition:color var(--d-fast) ease,border-color var(--d-fast) ease}
.subfix-row a:hover{color:var(--ink)}
.subfix-row a.on{color:var(--ink);font-weight:500;border-bottom-color:var(--brand)}
@media(max-width:900px){.subfix-row{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}}
@media(prefers-reduced-motion:reduce){.subfix{transition:none}}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:54px;padding-inline:var(--s5);background:var(--brand);color:#fff;border:1.5px solid var(--brand);border-radius:var(--radius);font-family:var(--font-display);font-weight:600;font-size:18px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--d-fast) ease,border-color var(--d-fast) ease,color var(--d-fast) ease,transform var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out)}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.small{height:40px;padding-inline:var(--s4);font-size:var(--t-sm)}
.btn:focus-visible{outline-color:var(--ink);outline-offset:3px}
.hero .btn:focus-visible{outline-color:#fff}
@media(hover:hover) and (pointer:fine){.btn:not(.ghost):hover{box-shadow:0 12px 24px -12px rgba(var(--brand-rgb),.55)}}
p > .btn{margin-top:var(--s2)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;padding-block:var(--s8) calc(var(--s9) + var(--skew));overflow:hidden;background-image:radial-gradient(60% 80% at 78% 40%,rgba(var(--brand-rgb),.10),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%)}
.hero:has(figure.img.art){background:var(--render)}
.hero:has(+ .presse-band){padding-bottom:var(--s7)}
.hero .wrap{position:relative;z-index:1}
.hero .grid{grid-template-columns:7fr 5fr;gap:var(--s8);align-items:start}
.hero .grid > figure{margin-top:var(--s6)}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr;gap:var(--s6)}}
.hero .grid:has(> .box),.hero .grid:has(> form),.hero .grid:has(> .flow){align-items:start}
.hero .grid:has(> form) > div{padding-top:var(--s2)}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero h1{margin-bottom:var(--s6)}
.hero .lead{color:var(--on-dark);margin-bottom:var(--s6)}
.hero .lead + .isp{margin-top:0}
.hero p{color:var(--on-dark)}
.hero .isp{color:#fff}
.hero .small{color:var(--on-dark-2);margin-top:var(--s4)}
.hero p a{color:#fff;text-decoration-color:var(--brand)}
.hero .btn.ghost{color:#fff;border-color:var(--on-dark-2)}
.hero .btn.ghost:hover{background:#fff;color:var(--ink)}
.hero .box{background:var(--ink-2);border-color:var(--line-dark);color:#fff;box-shadow:none}
.hero .box h3{color:#fff}
.hero ul.clean li{border-color:var(--line-dark);color:#fff}
.hero ol.steps li{background:var(--ink-2);border-color:var(--line-dark);color:#fff}
.hero ol.steps li::before{background:var(--brand)}
.hero .flow .n{background:var(--ink-2);border-color:var(--line-dark);color:#fff}
.hero .ph{background:rgba(255,255,255,.08);color:#ffb3a3;border-bottom-color:#ffb3a3}
.hero .note{color:#4a3d00}
.hero::after{content:"";position:absolute;right:-8%;top:-4%;width:min(6var(--skew),900px);height:110%;background:url(assets/logo/signet-white.svg) no-repeat right center/contain;opacity:.04;pointer-events:none;transition:opacity 1200ms var(--ease-out),transform 1200ms var(--ease-out)}
.hero:has(figure.img.art)::after{display:none}
.js .hero:not(.ready)::after{opacity:0;transform:translateX(6%)}
.hero form.wire label{color:var(--on-dark)}
.hero form.wire label b{color:#fff}
.hero form.wire input,.hero form.wire select,.hero form.wire textarea{background:var(--ink-2);color:#fff;border-color:var(--line-dark)}
.hero form.wire input:focus,.hero form.wire select:focus,.hero form.wire textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.22)}
.hero form.wire select option{color:var(--ink)}
.hero form.wire small{color:var(--on-dark-2)}
.hero .calc{background:var(--paper);color:var(--ink);box-shadow:0 2px 4px rgba(0,0,0,.4),0 40px 80px -30px rgba(0,0,0,.85)}
.hero .calc div{border-color:var(--line)}
.hero .calc div:last-child span:first-child{color:var(--ink)}
.hero div.img{background:var(--ink-2);border-color:var(--line-dark);color:var(--on-dark-2)}

/* Rechner: Hinweis über der Gewinngrenze */
.hero .box.grenze{margin-top:var(--s6);border-color:var(--brand);background:rgba(var(--brand-rgb),.10)}
.hero .box.grenze h3{font-size:var(--t-lg)}
.hero .box.grenze[hidden]{display:none}

/* ---------- Bilder ---------- */
figure.img{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--stone);box-shadow:var(--shadow-2)}
.hero figure.img{box-shadow:0 2px 4px rgba(0,0,0,.4),0 40px 80px -30px rgba(0,0,0,.85);border-radius:8px}
.hero figure.img:not(.art)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,22,27,0) 45%,rgba(11,22,27,.55) 100%),linear-gradient(90deg,rgba(11,22,27,.25),transparent 30%);mix-blend-mode:multiply}
.hero figure.img:not(.art) img{filter:saturate(.82) contrast(1.06) brightness(.92)}
figure.img img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.hero figure.img img{aspect-ratio:4/3}
figure.img.sq img{aspect-ratio:1}
figure.img figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s3) var(--s4);font-family:var(--font-mono);font-size:var(--t-xs);color:var(--on-dark);background:linear-gradient(transparent,rgba(11,22,27,.75))}
figure.img.art{box-shadow:none;background:transparent;border-radius:0}
figure.img.art img{aspect-ratio:auto;object-fit:contain}
@media(max-width:640px){figure.img.art{max-height:220px}figure.img.art img{height:220px}}
div.img{background:var(--stone);border:1px dashed var(--line);border-radius:var(--radius);min-height:224px;display:flex;align-items:center;justify-content:center;padding:var(--s4);text-align:center;font-family:var(--font-mono);font-size:var(--t-xs);color:var(--muted)}
div.img.sq{min-height:160px}
.avatar{aspect-ratio:1;max-width:160px;margin:0 auto var(--s4);border-radius:50%;background:linear-gradient(135deg,var(--stone-2),var(--stone));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
@media(hover:hover) and (pointer:fine){figure.img:not(.art) img{transition:transform 700ms var(--ease-out)}figure.img:not(.art):hover img{transform:scale(1.03)}}

/* ---------- Karten ---------- */
.box{display:flex;flex-direction:column;gap:var(--s3);padding:calc(var(--s6) + var(--s2));background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.box > *{margin:0}
.box h3{margin-bottom:var(--s1)}
.box .btn{align-self:flex-start;margin-top:var(--s3)}
.box ul.clean{margin:0}
.box .kpi + div{margin-top:var(--s1)}
.door{display:flex;flex-direction:column;gap:var(--s3);padding:calc(var(--s6) + var(--s2));background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;box-shadow:var(--shadow-1);transition:transform var(--d-ui) var(--ease-out),box-shadow var(--d-ui) var(--ease-out)}
.door > *{margin:0}
.door .mono{margin-bottom:var(--s1)}
.door h2{font-size:var(--t-xl);margin-bottom:var(--s1)}
.door p{flex:1}
.door .btn{align-self:flex-start;margin-top:var(--s4)}
.door.main{border:2px solid var(--brand)}
@media(hover:hover) and (pointer:fine){.door:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}.door:hover .btn.ghost{background:var(--ink);color:#fff}}
.kpi{font-family:var(--font-display);font-size:clamp(40px,4.5vw,56px);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--brand)}
.kpi + div{font-size:var(--t-sm);line-height:1.45;color:var(--ink-soft);margin-top:var(--s3)}
.pack{display:flex;flex-direction:column;gap:var(--s2);position:relative;padding:calc(var(--s6) + var(--s2)) var(--s6) var(--s6);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);transition:transform var(--d-ui) var(--ease-out),box-shadow var(--d-ui) var(--ease-out)}
.pack > *{margin:0}
.pack.rec{border:2px solid var(--brand);box-shadow:var(--shadow-2)}
.pack .tag{position:absolute;top:-12px;left:var(--s5);padding:var(--s1) var(--s3);background:var(--ink);color:#fff;border-radius:3px;font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.pack.rec .tag{background:var(--brand)}
.pack .mono{color:var(--muted);margin:0}
.pack .vol{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:600;letter-spacing:-.02em;line-height:1;margin-bottom:var(--s2)}
.pack p{flex:1}
.pack .small{flex:0}
@media(hover:hover) and (pointer:fine){.pack:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}}
.quote{padding:var(--s2) 0 var(--s2) var(--s5);font-family:var(--font-display);font-size:var(--t-lg);line-height:1.4;color:var(--ink-soft);max-width:60ch}
.ph{padding:0 var(--s1);background:var(--brand-soft);border-bottom:2px dotted var(--brand);border-radius:2px;font-family:var(--font-mono);font-size:var(--t-sm);color:var(--brand-deep)}
.note{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);background:#FFF8DC;border:1px solid #E6D48A;border-left-width:4px;border-radius:var(--radius);font-size:var(--t-sm);color:#4a3d00}
.note b{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase}
body:not(.notizen) .note{display:none}

/* ---------- Listen, Schritte, Fluss ---------- */
ul.clean{list-style:none;margin:0 0 var(--s4);padding:0}
ul.clean li{position:relative;padding:var(--s3) 0 var(--s3) var(--s6);border-bottom:1px solid var(--line)}
ul.clean li:last-child{border-bottom:0}
ul.clean li::before{content:"";position:absolute;left:2px;top:20px;width:12px;height:6px;border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg)}
ul.clean.x li::before{transform:none;width:11px;height:11px;border:0;top:17px;left:3px;background:linear-gradient(45deg,transparent 43%,var(--muted) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--muted) 43% 57%,transparent 57%)}
ol.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
ol.steps li{counter-increment:s;position:relative;padding:var(--s4) var(--s5) var(--s4) 80px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
ol.steps li::before{content:counter(s);position:absolute;left:var(--s5);top:var(--s4);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:3px;font-family:var(--font-display);font-weight:600;transform:skewX(-8deg)}
ol.steps li b{display:block;margin-bottom:var(--s1);font-family:var(--font-display);font-size:var(--t-base)}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);align-items:stretch;align-self:start;counter-reset:fl;position:relative}
.flow.f4{grid-template-columns:repeat(4,1fr)}
.flow .a{display:none}
.flow .n{position:relative;padding:var(--s6) var(--s6) var(--s6) var(--s6);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);font-size:var(--t-base);line-height:1.45;color:var(--ink-soft);counter-increment:fl}
.flow .n::before{content:counter(fl,decimal-leading-zero);display:block;font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;letter-spacing:.1em;color:var(--brand);margin-bottom:var(--s3)}
.flow .n b{display:block;font-family:var(--font-display);font-size:var(--t-xl);color:var(--ink);margin-bottom:var(--s2);line-height:1.15}
.flow .n.hi{border:2px solid var(--brand);box-shadow:var(--shadow-2)}
/* Verbindungslinie mit Pfeilspitze zwischen den Stationen */
.flow .n:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(-1*var(--s6));width:var(--s6);height:2px;background:var(--brand);transform:translateY(-50%)}
.flow .n:not(:last-child) b::after{content:"";position:absolute;top:50%;right:calc(-1*var(--s6) + 4px);width:9px;height:9px;border-top:2px solid var(--brand);border-right:2px solid var(--brand);transform:translateY(-50%) rotate(45deg)}
@media(max-width:900px){.flow,.flow.f4{grid-template-columns:1fr;gap:var(--s5)}.flow .n:not(:last-child)::after{top:auto;right:auto;left:50%;bottom:calc(-1*var(--s5));width:2px;height:var(--s5);transform:translateX(-50%)}.flow .n:not(:last-child) b::after{top:auto;bottom:calc(-1*var(--s5) + 4px);right:auto;left:50%;transform:translateX(-50%) rotate(135deg)}}
.hero .flow .n{background:var(--ink-2);border-color:var(--line-dark);color:var(--on-dark)}
.hero .flow .n b{color:#fff}
.hero .grid > .flow.f4{grid-template-columns:1fr 1fr}

/* ---------- Tabellen ---------- */
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);background:var(--paper)}
th,td{padding:var(--s3) var(--s4);}
th:first-child,td:first-child{padding-left:var(--s5)}th:last-child,td:last-child{padding-right:var(--s5);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{background:var(--stone);color:var(--muted);font-family:var(--font-display);font-weight:600;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
td:first-child{font-weight:500;color:var(--ink)}
tr:nth-child(even) td{background:rgba(244,242,238,.5)}

/* ---------- Rechenkasten ---------- */
.calc{max-width:640px;padding:var(--s5) var(--s6);background:var(--ink);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow-2);font-size:var(--t-sm)}
.calc div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;border-bottom:1px solid var(--line-dark)}
.calc div span:last-child{display:inline-block;white-space:nowrap}
.calc div:last-child{border:0;padding-top:var(--s4);font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);color:var(--brand)}
.calc div:last-child span:first-child{color:#fff}
.calc + .small{margin-top:var(--s3);max-width:640px}
.calc div.tick span:last-child{animation:tick 420ms var(--ease-out)}
@keyframes tick{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.calc div:last-child.tick span:last-child{animation:tickbig 480ms var(--ease-out)}
@keyframes tickbig{0%{transform:scale(1.12)}100%{transform:none}}

/* ---------- Akkordeon ---------- */
details{margin-bottom:var(--s2);padding:0 var(--s5);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);transition:border-color var(--d-fast) ease}
details[open]{border-color:var(--ink)}
summary{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s4) 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;font-size:var(--t-base)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--brand);font-size:var(--t-xl);line-height:1;transition:transform var(--d-ui) var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details .acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-ui) var(--ease-out)}
details[open] .acc{grid-template-rows:1fr}
details.opening .acc{grid-template-rows:0fr}
details .acc > div{overflow:hidden}
details p{padding-bottom:var(--s4)}

/* ---------- Formulare ---------- */
form.wire{display:grid;gap:var(--s4);max-width:540px}
form.wire label{display:grid;gap:var(--s1);font-size:var(--t-sm);font-weight:500;color:var(--ink-soft)}
form.wire label:has(input[type=checkbox]){grid-template-columns:auto 1fr;align-items:center;gap:var(--s3)}
form.wire label b{font-family:var(--font-display);font-size:var(--t-xl);color:var(--ink)}
form.wire input,form.wire select,form.wire textarea{width:100%;padding:var(--s3);font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);transition:border-color var(--d-fast) ease,box-shadow var(--d-fast) ease}
form.wire input:focus,form.wire select:focus,form.wire textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px var(--brand-soft)}
form.wire input[type=range]{padding:0;accent-color:var(--brand)}
form.wire input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--brand)}
form.wire small{font-size:var(--t-sm);color:var(--muted)}
form.wire .btn{justify-self:start}
form.wire fieldset{border:0;padding:0;margin:0;display:grid;gap:var(--s2)}
form.wire legend{font-size:var(--t-sm);font-weight:500;color:var(--ink-soft);margin-bottom:var(--s1);padding:0}
.hero form.wire legend{color:var(--on-dark)}
form.wire label.radio{display:flex;align-items:center;gap:var(--s3);font-weight:400;color:var(--ink);padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;transition:border-color var(--d-fast) ease,background var(--d-fast) ease}
form.wire label.radio:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.hero form.wire label.radio{color:#fff;border-color:var(--line-dark)}
.hero form.wire label.radio:has(input:checked){background:rgba(var(--brand-rgb),.16)}
form.wire input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--brand)}
form.wire label small{font-weight:400;color:var(--muted)}
.hero form.wire label small{color:var(--on-dark-2)}
form.wire .step{display:grid;gap:var(--s4)}
form.wire .step[hidden],form.wire > [hidden]{display:none}
form.wire .fuss{margin-top:calc(-1*var(--s2))}
form.wire .err{margin:calc(-1*var(--s2)) 0 0;padding-left:var(--s1)}
form.wire .ok .link{margin-top:var(--s3);font-size:var(--t-sm);text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;color:inherit;font-family:inherit}
figcaption.note-cap{display:none}
body.notizen figcaption.note-cap{display:block}
form.wire input:user-invalid,form.wire select:user-invalid,form.wire textarea:user-invalid{border-color:var(--brand-deep);box-shadow:0 0 0 4px var(--brand-soft)}
form.wire .ok{padding:var(--s5);background:var(--brand-soft);border:1px solid var(--brand);border-radius:var(--radius);color:var(--ink)}
form.wire .ok b{display:block;font-family:var(--font-display);font-size:var(--t-lg);margin-bottom:var(--s1)}
.hero form.wire .ok{background:var(--ink-2);border-color:var(--brand);color:#fff}
form.wire .err{font-size:var(--t-sm);color:var(--brand-deep)}
.hero form.wire .err{color:#ffb3a3}

/* ---------- Presse-Laufleiste (1:1 von ulrichkammerer.de) ---------- */
.presse-band{position:relative;padding:var(--s6) 0 calc(var(--s6) + var(--skew));background:var(--ink);color:#fff}
.pl-kick{font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--on-dark-3);text-align:center;margin-bottom:26px}
.pl-band{position:relative;overflow:hidden;padding:8px 0;width:min(calc(var(--wrap) + 2*var(--s10)),100%);margin-inline:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 8%,#000 24%,#000 76%,rgba(0,0,0,.3) 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 8%,#000 24%,#000 76%,rgba(0,0,0,.3) 92%,transparent 100%)}
.pl-track{display:flex;gap:64px;width:max-content;align-items:center;animation:plauf 62s linear infinite}
.pl-band:hover .pl-track{animation-play-state:paused}
.pl-logo{width:auto;flex:0 0 auto;opacity:.44;transition:opacity .35s}
.pl-logo:hover{opacity:.85}
@keyframes plauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pl-fuss{width:min(var(--wrap),100% - 2*var(--gutter));margin:var(--s5) auto 0;font-size:var(--t-xs);color:var(--on-dark-3);text-align:center}
.pl-fuss .ph{background:rgba(255,255,255,.08);color:#ffb3a3}
@media(max-width:900px){.pl-track{gap:44px;animation-duration:46s}}

/* ---------- Schluss-CTA, Fußzeile ---------- */
.ctaend{position:relative;margin-top:calc(-1 * var(--skew));padding-block:calc(var(--s10) + var(--skew)) var(--s9);background:var(--ink);color:#fff;text-align:center;clip-path:polygon(0 var(--skew),100% 0,100% 100%,0 100%);z-index:1}
.ctaend h2{color:#fff;margin-bottom:var(--s4)}
.ctaend .lead{color:var(--on-dark);margin:0 auto var(--s6)}
.ctaend p{margin-inline:auto}
.ctaend .small{color:var(--on-dark-2);margin-top:var(--s5)}
.ctaend .sec-label{display:flex;justify-content:center}
footer{padding-block:var(--s9) var(--s6);background:var(--ink);color:var(--on-dark-2);font-size:var(--t-sm)}
.ctaend + footer,.hero + footer,.presse-band + footer{border-top:1px solid var(--line-dark)}
.f-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:var(--s7);align-items:start;padding-bottom:var(--s7);border-bottom:1px solid var(--line-dark)}
.f-brand{display:inline-flex;align-items:center;gap:var(--s3);color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);letter-spacing:-.01em}
.f-brand img{height:28px;width:auto}
.f-claim{margin:0;max-width:52ch;color:var(--on-dark);line-height:1.6}
.f-by{display:inline-block;margin-top:var(--s3);color:var(--on-dark-3);font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6);padding-block:var(--s7)}
.f-cols > div{display:flex;flex-direction:column;gap:2px}
.f-cols b{font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:var(--s3)}
.f-cols a{display:inline-block;width:fit-content;color:var(--on-dark);text-decoration:none;padding-block:4px;border-bottom:1px solid transparent;transition:color var(--d-ui),border-color var(--d-ui)}
.f-cols a:hover{color:#fff;border-color:var(--brand)}
.f-legal{margin:0;padding-top:var(--s6);border-top:1px solid var(--line-dark);color:var(--on-dark-3);font-size:var(--t-xs);line-height:1.6}
.f-legal span{display:block;max-width:80ch}
.f-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6);font-size:var(--t-xs);color:var(--on-dark-3)}
.f-bottom nav{display:flex;gap:var(--s5)}
.f-bottom a{color:var(--on-dark-2);text-decoration:none}
.f-bottom a:hover{color:#fff}
@media(max-width:900px){.f-top{grid-template-columns:1fr}.f-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.f-cols{grid-template-columns:1fr}}
/* Bereichswechsel */
.bereiche{background:var(--stone)}
.b-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.b-karte{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);padding:var(--s5) var(--s6);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;box-shadow:var(--shadow-1);transition:transform var(--d-ui) var(--ease-out),box-shadow var(--d-ui) var(--ease-out),border-color var(--d-ui)}
.b-karte:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--b-farbe)}
.b-karte b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);line-height:1.2;color:var(--ink)}
.b-karte small{display:block;margin-top:2px;color:var(--muted)}
.b-punkt{width:12px;height:12px;border-radius:50%;background:var(--b-farbe);box-shadow:0 0 0 4px rgba(0,0,0,.05)}
.b-pfeil{font-size:var(--t-xl);color:var(--b-farbe);transition:transform var(--d-ui) var(--ease-out)}
.b-karte:hover .b-pfeil{transform:translateX(4px)}
.b-unternehmer{--b-farbe:#F03C1F}.b-partner{--b-farbe:#1FA393}.b-berater{--b-farbe:#3B7FC7}
@media(max-width:760px){.b-grid{grid-template-columns:1fr}}
.sig{display:inline-block;margin-top:var(--s2);padding:var(--s1) var(--s3);border:1px solid var(--ink);font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Demo-Badge, Audit-Seite ---------- */
.wf,.switch{display:none}
.demo{position:fixed;left:12px;bottom:12px;z-index:40;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);background:var(--ink);color:#fff;border-radius:999px;font-family:var(--font-mono);font-size:var(--t-xs);box-shadow:0 10px 30px -12px rgba(0,0,0,.5);opacity:.8}
.demo:hover{opacity:1}
.demo b{color:var(--brand);font-weight:500}
.demo a,.demo button{padding:0;background:none;border:0;color:#fff;font:inherit;opacity:.85;cursor:pointer;text-decoration:underline}
@media print{.demo{display:none}.reveal,.reveal .stagger,.js .hero .hero-in{opacity:1!important;transform:none!important}}
@media(max-width:640px){.demo{display:none}}
.doc{max-width:820px;margin:0 auto;padding:var(--s7) var(--gutter) var(--s9)}
.doc h1{font-size:var(--t-2xl)}.doc h2{font-size:var(--t-xl);margin-top:2em;padding-top:.8em;border-top:1px solid var(--line)}.doc h3{margin-top:1.6em}
.doc blockquote{margin:0 0 1em;padding:var(--s1) var(--s4);border-left:3px solid var(--brand);background:var(--stone);color:var(--ink-soft)}
.doc table{font-size:var(--t-sm)}.doc code{padding:1px 4px;background:var(--stone);border-radius:3px;font-family:var(--font-mono);font-size:var(--t-sm)}

/* ---------- Bewegung ---------- */
.js .hero .hero-in{opacity:0;transform:translateY(16px)}
.js .hero.ready .hero-in{opacity:1;transform:none;transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
.js .hero figure.img.hero-in{transform:none;clip-path:inset(0 0 0 100%)}
.js .hero.ready figure.img.hero-in{clip-path:inset(0);transition:clip-path 900ms var(--ease-out),opacity var(--d-reveal) var(--ease-out);transition-delay:180ms}
.js .hero.ready figure.img.hero-in:not(.art) img{animation:kb 1400ms var(--ease-out) 180ms both}
@keyframes kb{from{transform:scale(1.06)}to{transform:none}}
.js .hero figure.img.art.hero-in{clip-path:none;opacity:0;transform:translateX(24px)}
.js .hero.ready figure.img.art.hero-in{opacity:1;transform:none;transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:120ms}
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal .stagger{opacity:0;transform:translateY(12px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);transition-delay:calc(var(--i,0)*45ms)}
.reveal.in .stagger{opacity:1;transform:none}
.reveal ol.steps li::before{opacity:0;transform:skewX(-8deg) scale(.6);transition:transform 420ms var(--ease-out),opacity 300ms var(--ease-out);transition-delay:calc(var(--i,0)*45ms + 120ms)}
.reveal.in ol.steps li::before{opacity:1;transform:skewX(-8deg) scale(1)}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .js .hero .hero-in,.reveal,.reveal .stagger{transform:none;transition:opacity 200ms ease}
  .js .hero figure.img.hero-in{clip-path:none}.js .hero.ready figure.img.hero-in img{animation:none}
  .js .hero:not(.ready)::after{opacity:.04;transform:none}
  .reveal ol.steps li::before{opacity:1;transform:skewX(-8deg)}
  .calc div.tick span:last-child,.calc div:last-child.tick span:last-child{animation:none}
  .btn:hover,.pack:hover,.door:hover,figure.img:hover img{transform:none!important}
  .pl-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:38px 46px;max-width:900px;margin:0 auto}
  .pl-track .pl-logo:nth-child(n+14){display:none}
}

/* ---------- v6.4 · Hero nur Text (solo), Fortsetzungstext, Kopfzeile ruhiger ---------- */
.hero .solo{max-width:62ch}
.hero .solo .lead{max-width:56ch}
.prose{max-width:62ch}
.prose p+p{margin-top:var(--s4)}
nav.main{justify-self:center}
.logo{font-size:22px}
.logo img{height:24px}
header .cta.ghost{border-color:var(--ink);color:var(--ink);height:42px}
header .cta.ghost:hover{background:var(--ink);color:#fff}
@media(max-width:900px){nav.main{margin-inline:0}}
.subnav{margin-bottom:var(--s6)}
.flow .n{padding:var(--s5)}
.flow .n b{font-size:var(--t-lg)}
.alt .flow .n{background:var(--paper)}

footer .ph{background:rgba(255,255,255,.08);color:#ffb3a3}
body.bereich-partner footer .flogo img{content:url(assets/logo/signet-partner.svg)}
body.bereich-berater footer .flogo img{content:url(assets/logo/signet-berater.svg)}