/* KI-Bausteine Designsystem v6. Werte aus 01_Marke/KI-Bausteine_Tokens.json (Styleguide v2.1), nicht von Hand ändern */
/* Schriften lokal (IBM Plex, SIL Open Font License, siehe fonts/OFL.txt) */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-Medium.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-SemiBold.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/ibm-plex-mono-Medium.woff2) format("woff2")}
:root{
  --ink:#0F172A;
  --slate:#475569;
  --gray:#64748B;
  --placeholder:#94A3B8;
  --line-strong:#CBD5E1;
  --line:#E2E8F0;
  --sunken:#F1F5F9;
  --paper:#FAFAF9;
  --white:#FFFFFF;
  --ink-line:#1E293B;
  --accent:#0F766E;
  --accent-ink:#115E59;
  --accent-tint:#F0FDFA;
  --accent-border:#99F6E4;
  --selection:#CCFBF1;
  --cube-top:#2DD4BF;
  --cube-right:#14B8A6;
  --cube-left:#0D9488;
  --stone-top:#CBD5E1;
  --stone-right:#94A3B8;
  --stone-left:#64748B;
  --success:#059669;
  --success-text:#047857;
  --success-tint:#ECFDF5;
  --success-border:#A7F3D0;
  --warning:#D97706;
  --warning-text:#B45309;
  --warning-tint:#FFFBEB;
  --warning-border:#FDE68A;
  --error:#DC2626;
  --error-text:#B91C1C;
  --error-tint:#FEF2F2;
  --error-border:#FECACA;
  --font-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-h1:clamp(2.25rem, 1.6rem + 2.4vw, 3.125rem);
  --fs-h2:clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --fs-h3:1.1875rem;
  --fs-lead:1.1875rem;
  --fs-body:1.0625rem;
  --fs-small:0.9375rem;
  --fs-mono:0.875rem;
  --s-1:0.25rem;
  --s-2:0.5rem;
  --s-3:0.75rem;
  --s-4:1rem;
  --s-5:1.5rem;
  --s-6:2rem;
  --s-7:3rem;
  --s-8:4rem;
  --s-9:6rem;
  --r-sm:8px;
  --r-md:12px;
  --r-pill:999px;
  --container:1180px;
  --measure:66ch;
  --focus:0 0 0 2px #FFFFFF, 0 0 0 4px #0F766E;
  --chart-1:#0F766E;
  --chart-2:#475569;
  --chart-3:#94A3B8;
  --chart-4:#CBD5E1;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--slate);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{color:var(--ink);font-weight:600;margin:0}
h1{font-size:var(--fs-h1);line-height:1.1;letter-spacing:-.015em;max-width:15ch}
h2{font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.01em;max-width:28ch}
h3{font-size:var(--fs-h3);line-height:1.35}
p{margin:0}
p+p{margin-top:var(--s-4)}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-ink);text-decoration-thickness:2px}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px}
::selection{background:var(--selection);color:var(--ink)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s-5)}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1}
.lead{font-size:var(--fs-lead);line-height:1.6;max-width:var(--measure)}
.small{font-size:var(--fs-small)}
.muted{color:var(--gray)}
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--s-4);top:var(--s-4);background:var(--white);padding:var(--s-2) var(--s-3);z-index:10}

/* Buttons: eine Form, eine Farbe, keine Schatten */
.btn{display:inline-block;font:500 1rem/1.2 var(--font-sans);padding:14px 20px;border-radius:var(--r-sm);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--white)}
.btn-primary:hover{background:var(--accent-ink);color:var(--white)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-quiet:hover{border-color:var(--ink);color:var(--ink)}

/* Wortmarke: KI · Würfel · Bausteine */
.wm{display:inline-flex;align-items:center;gap:.14em;font-weight:600;font-size:1.3125rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.wm-ki{color:var(--accent)}
.wm-cube{height:.82em;width:auto;margin:0 .02em;transform:translateY(-.02em)}
.wm.dark{color:var(--white)}.wm.dark .wm-ki{color:var(--cube-top)}

/* Kopf */
.top{background:var(--white);border-bottom:1px solid var(--line)}
.top .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);min-height:68px}
.top a.logo{text-decoration:none}
.top nav{display:flex;align-items:center;gap:var(--s-5)}
.top nav a{color:var(--slate);text-decoration:none;font-size:.9375rem;font-weight:500}
.top nav a:hover{color:var(--ink)}
.top nav a.btn{color:var(--white);padding:10px 16px}

/* Abschnitte */
.sec{padding:var(--s-9) 0;border-top:1px solid var(--line)}
.sec.white{background:var(--white)}
.sec.sunken{background:var(--sunken);border-top:0}
.sec-head{margin-bottom:var(--s-7)}
.sec-head .lead{margin-top:var(--s-4)}
.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-8);align-items:start}

/* Hero */
.hero{padding:var(--s-8) 0 var(--s-9);background:var(--white)}
.hero .container{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-8);align-items:end}
.hero .lead{margin-top:var(--s-5);color:var(--slate)}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-5);margin-top:var(--s-6)}
.hero .actions a.textlink{font-weight:500}
.hero .note{margin-top:var(--s-4);font-size:var(--fs-small);color:var(--gray)}
.hero .prices{display:flex;gap:var(--s-6);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)}
.hero .prices div{font-size:var(--fs-small);color:var(--gray);line-height:1.4}
.hero .prices b{display:block;font:600 1.5rem/1.2 var(--font-sans);font-feature-settings:"tnum" 1;color:var(--ink);margin-bottom:4px}
.hero figure{margin:0}
.hero figure img{width:100%;height:auto;max-height:600px;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%;border-radius:var(--r-md)}
.hero figcaption{margin-top:var(--s-3);font-size:var(--fs-small);color:var(--gray);line-height:1.5}
.hero figcaption b{color:var(--ink);font-weight:600}

/* Hürden als Tabelle */
.hurdles{border-bottom:1px solid var(--line)}
.hurdle{display:grid;grid-template-columns:6.5rem minmax(0,1fr) minmax(0,1.5fr);gap:var(--s-6);padding:var(--s-5) 0;border-top:1px solid var(--line)}
.hurdle .wert{font:600 1.875rem/1 var(--font-sans);font-feature-settings:"tnum" 1;letter-spacing:-.01em;color:var(--ink);padding-top:2px}
.hurdle .satz{color:var(--ink);font-weight:600;font-size:1.0625rem;line-height:1.4}
.hurdle .wer{display:block;font-weight:400;color:var(--gray);font-size:var(--fs-small);margin-top:4px}
.hurdle .antwort{max-width:60ch}
.hurdles-head{display:grid;grid-template-columns:6.5rem minmax(0,1fr) minmax(0,1.5fr);gap:var(--s-6);padding-bottom:var(--s-3);font-size:var(--fs-small);color:var(--gray)}
.src{margin-top:var(--s-4);font-size:var(--fs-small);color:var(--gray);max-width:90ch}

/* Praxisbeispiel */
.praxis{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-8);align-items:start}
.praxis .text p{max-width:var(--measure)}
.praxis .text h2{margin-bottom:var(--s-5)}
.praxis .schluss{margin-top:var(--s-5);color:var(--ink)}
.bars{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-6)}
.bars .cap{font-size:var(--fs-small);color:var(--gray);margin-bottom:var(--s-5)}
.bar{display:grid;grid-template-columns:5.5rem 1fr 3.5rem;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);font-size:var(--fs-small)}
.bar .track{height:10px;background:var(--sunken);border-radius:2px;overflow:hidden}
.bar .fill{height:100%;background:var(--slate)}
.bar.after .fill{background:var(--accent)}
.bar .v{font-family:var(--font-mono);color:var(--ink);text-align:right}
.bars .who{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--gray)}

/* Bausteine als Liste */
.pricebar{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);margin-bottom:var(--s-6)}
.pricebar div{padding:var(--s-5) var(--s-6)}
.pricebar div+div{border-left:1px solid var(--line)}
.pricebar b{display:block;font:600 1.625rem/1.2 var(--font-sans);font-feature-settings:"tnum" 1;color:var(--ink);margin-bottom:6px}
.pricebar span{font-size:var(--fs-small)}
.bs{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.bs li{border-top:1px solid var(--line)}
.bs a.row{display:grid;grid-template-columns:36px 3rem minmax(0,1fr) 9rem;gap:var(--s-4);align-items:center;padding:var(--s-4) var(--s-3);text-decoration:none;color:inherit}
.bs a.row:hover{background:var(--white)}
.bs a.row:hover .name{text-decoration:underline;text-underline-offset:3px}
.bs .nr{font:500 var(--fs-mono)/1 var(--font-mono);color:var(--gray)}
.bs .name{display:block;color:var(--ink);font-weight:600;font-size:1.0625rem}
.bs .why{display:block;font-size:var(--fs-small);margin-top:2px}
.bs .cat{font-size:var(--fs-small);color:var(--gray);text-align:right}
.bs li.first{border-top:1px solid var(--ink)}
.bs svg{width:36px;height:36px}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);margin-top:var(--s-8)}
.notes div{border-top:2px solid var(--ink);padding-top:var(--s-4)}
.notes h3{margin-bottom:var(--s-3)}
.notes p{max-width:52ch}
.notes .more{margin-top:var(--s-3);font-weight:500}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.steps li{border-top:1px solid var(--line-strong);padding-top:var(--s-4)}
.steps .n{font:500 var(--fs-mono)/1 var(--font-mono);color:var(--gray);display:block;margin-bottom:var(--s-3)}
.steps h3{margin-bottom:var(--s-3)}
.branchen{margin-top:var(--s-8);font-size:var(--fs-small);max-width:100ch;line-height:1.9}
.branchen b{color:var(--ink);font-weight:600;margin-right:var(--s-2)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s-5) var(--s-7) var(--s-5) 0;position:relative;color:var(--ink);font-weight:500;font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:var(--s-2);top:50%;transform:translateY(-50%);font:400 1.375rem/1 var(--font-mono);color:var(--gray)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 var(--s-5);max-width:var(--measure)}

/* Kontakt */
.kontakt .person{display:flex;gap:var(--s-4);align-items:center;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.kontakt .person img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.kontakt .person b{display:block;color:var(--ink);font-weight:600}
.kontakt .person span{font-size:var(--fs-small)}
form.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-5);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-6)}
form.lead-form .full{grid-column:1/-1}
form.lead-form label{display:block;font-size:var(--fs-small);font-weight:500;color:var(--ink);margin-bottom:6px}
form.lead-form input,form.lead-form textarea{width:100%;font:400 1rem/1.4 var(--font-sans);color:var(--ink);background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 14px}
form.lead-form input:focus,form.lead-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
form.lead-form ::placeholder{color:var(--placeholder)}
.formnote{grid-column:1/-1;font-size:var(--fs-small);color:var(--gray)}

/* Fuß */
.foot{background:var(--ink);color:var(--line-strong);padding:var(--s-8) 0 var(--s-6);font-size:var(--fs-small)}
.foot a{color:var(--line);text-decoration:none}.foot a:hover{color:var(--white);text-decoration:underline}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-6)}
.foot h4{color:var(--white);font-size:var(--fs-small);font-weight:600;margin:0 0 var(--s-3)}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin-bottom:6px}
.foot .base{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--ink-line);color:var(--placeholder);font-size:var(--fs-small)}
.foot p{max-width:36ch;margin-top:var(--s-4)}

@media (max-width:960px){
  .hero .container,.split,.praxis{grid-template-columns:1fr;gap:var(--s-6)}
  .hero figure{max-width:420px}
  .hurdle,.hurdles-head{grid-template-columns:4.5rem minmax(0,1fr)}
  .hurdle .antwort{grid-column:2}
  .hurdles-head span:last-child{display:none}
  .steps,.notes{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
  .top nav a:not(.btn){display:none}
}
@media (max-width:600px){
  .sec{padding:var(--s-8) 0}
  .hero{padding:var(--s-6) 0 var(--s-8)}
  .container{padding:0 var(--s-4)}
  .pricebar{grid-template-columns:1fr}.pricebar div+div{border-left:0;border-top:1px solid var(--line)}
  .bs a.row{grid-template-columns:28px minmax(0,1fr);row-gap:2px}
  .hurdle{grid-template-columns:4rem minmax(0,1fr);gap:var(--s-3) var(--s-4)}
  .hurdle .antwort{grid-column:1/-1}
  .hurdles-head{display:none}
  .bs .nr{display:none}.bs .cat{display:none}
  .bs svg{width:28px;height:28px}
  form.lead-form{grid-template-columns:1fr;padding:var(--s-5)}
  .hero .prices{gap:var(--s-5)}
  .foot .cols{grid-template-columns:1fr}
  .foot .base{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- Unterseiten (v6) ---- */
.pagehead{background:var(--white);padding:var(--s-7) 0 var(--s-8)}
.pagehead .container{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-8);align-items:start}
.pagehead.single .container{grid-template-columns:1fr}
.crumbs{font-size:var(--fs-small);color:var(--gray);margin-bottom:var(--s-5)}
.crumbs a{color:var(--gray)}
.pagehead h1{max-width:20ch}
.pagehead .lead{margin-top:var(--s-5)}
.pagehead .actions{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-5);align-items:center;margin-top:var(--s-6)}
.pagehead .actions a:not(.btn){font-weight:500}
.facts{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5) var(--s-6)}
.facts .sign{margin-bottom:var(--s-4)}
.facts dl{margin:0}
.facts dt{font-size:var(--fs-small);color:var(--gray);margin-top:var(--s-4)}
.facts dt:first-child{margin-top:0}
.facts dd{margin:2px 0 0;color:var(--ink);font-weight:500}
.facts dd.big{font-size:1.5rem;font-weight:600;font-feature-settings:"tnum" 1}
.facts .pdf{display:inline-block;margin-top:var(--s-5);font-size:var(--fs-small);font-weight:500}
.sec h2+.lead{margin-top:var(--s-4)}
.sec .intro{margin-bottom:var(--s-6)}
.plain{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line);max-width:80ch}
.plain li{border-top:1px solid var(--line);padding:var(--s-4) 0;color:var(--ink)}
.defs{border-bottom:1px solid var(--line)}
.defs .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-6);padding:var(--s-5) 0;border-top:1px solid var(--line)}
.defs h3{font-size:1.0625rem}
.defs p{max-width:66ch}
.vsteps{list-style:none;margin:0;padding:0;counter-reset:st;max-width:80ch}
.vsteps li{counter-increment:st;display:grid;grid-template-columns:2.5rem 1fr;gap:var(--s-3);padding:var(--s-4) 0;border-top:1px solid var(--line)}
.vsteps li::before{content:counter(st);font:500 .9375rem/1.6 var(--font-mono);color:var(--gray)}
.vsteps li:last-child{border-bottom:1px solid var(--line)}
.vsteps h3{font-size:1.0625rem;margin-bottom:4px}
.note-box{background:var(--sunken);border-radius:var(--r-md);padding:var(--s-5) var(--s-6);margin-top:var(--s-6);max-width:80ch}
.note-box h3{font-size:1.0625rem;margin-bottom:var(--s-2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7)}
.two>div{border-top:2px solid var(--ink);padding-top:var(--s-4)}
.two>div.soft{border-top-color:var(--line-strong)}
.two h3{margin-bottom:var(--s-3)}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:6px 0 6px 1.5rem}
.ticks li::before{content:"";position:absolute;left:4px;top:.6em;width:5px;height:10px;border:solid var(--success);border-width:0 2px 2px 0;transform:rotate(45deg)}
.two .soft .ticks li::before{content:"×";border:0;transform:none;width:auto;height:auto;left:1px;top:.28em;font:500 1.1875rem/1 var(--font-sans);color:var(--error)}
.tiers{border-bottom:1px solid var(--line)}
.tiers>div{display:grid;grid-template-columns:minmax(0,1fr) 9rem minmax(0,2fr);grid-template-areas:"name price list" "for price list";grid-template-rows:auto 1fr;column-gap:var(--s-6);align-items:start;padding:var(--s-5) 0;border-top:1px solid var(--line)}
.tiers .t-name{grid-area:name;font-weight:600;color:var(--ink);font-size:var(--fs-body)}
.tiers .t-for{grid-area:for;font-size:var(--fs-small);color:var(--gray)}
.tiers .t-price{grid-area:price;font:500 var(--fs-body)/1.5 var(--font-mono);color:var(--ink);text-align:right}
.tiers .t-price small{display:block;font:400 var(--fs-small)/1.5 var(--font-sans);color:var(--gray)}
.tiers ul{grid-area:list}
.tiers p{font-size:var(--fs-small)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-small);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:14px 18px;border-top:1px solid var(--line);vertical-align:top}
.tbl thead th{border-top:0;background:var(--sunken);color:var(--ink);font-weight:600}
.tbl td.num,.tbl th.num{text-align:right;white-space:nowrap;font-feature-settings:"tnum" 1}
.tbl tbody th{font-weight:500;color:var(--ink)}
.tbl .muted{color:var(--gray)}
.tbl-wrap{overflow-x:auto}
.pricebar.three{grid-template-columns:1fr}
.pricebar.three div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--s-5);align-items:baseline}
.pricebar.three div+div{border-left:0;border-top:1px solid var(--line)}
.pricebar.three b{font:500 var(--fs-body)/1.5 var(--font-mono);margin:0}
.pricebar p{font-size:var(--fs-small);margin-top:var(--s-2)}
.more-line{margin-top:var(--s-5);font-size:var(--fs-small)}
.linkrows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.linkrows li{border-top:1px solid var(--line)}
.linkrows a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-5);padding:var(--s-4) var(--s-3);text-decoration:none;color:inherit}
.linkrows a:hover{background:var(--white)}
.linkrows b{color:var(--ink);font-weight:600}
.linkrows a:hover b{text-decoration:underline;text-underline-offset:3px}
.linkrows span{font-size:var(--fs-small)}
.prose{max-width:70ch}
.prose h2{margin:var(--s-6) 0 var(--s-3)}
.prose p{margin-bottom:var(--s-4)}
.placeholder{background:var(--warning-tint);border:1px dashed var(--warning);border-radius:var(--r-sm);padding:var(--s-4) var(--s-5);margin:var(--s-5) 0;color:var(--ink)}
@media (max-width:960px){
  .pagehead .container,.two,.tiers,.defs .row,.linkrows a{grid-template-columns:1fr}
  .defs .row{gap:var(--s-2)}
  .linkrows a{gap:2px}
  .tiers>div{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "for price" "list list";grid-template-rows:auto auto auto;row-gap:var(--s-2)}
  .tiers ul{margin-top:var(--s-3)}
  .pricebar.three div{grid-template-columns:1fr;gap:var(--s-1)}
}