/* XLR8N Design 2026. Ein Stylesheet fuer alle Seiten. Branch design/ki-native-2026.
   Idee: Die Kurve ist die Seite. Typografie traegt, ein Akzent (Teal), weiss bis zum Footer.
   Zwei Stimmen: Funnel Display (Mensch), Geist Mono (System). Keine Karten, keine Kacheln. */

:root{
  --bg:#FFFFFF;--ink:#0C0C0C;--ink-2:#5A5A5A;--ink-3:#747470;--line:#DDDDD8;--line-2:#ECECE8;
  --teal:#0C9A8A;--teal-2:#0EA896;--teal-soft:#E8F4F2;
  --dark:#0C0C0C;--on-dark:#ECECEC;--on-dark-2:#8A8A86;--line-dark:#252525;
  --fh:'Funnel Display',-apple-system,'Helvetica Neue',sans-serif;
  --f:'Geist',-apple-system,'Helvetica Neue',sans-serif;
  --fm:'Geist Mono','SF Mono','Menlo',monospace;
  --fl:'Major Mono Display',monospace;
  --fs-display:clamp(2.75rem,6.2vw,5.5rem);
  --fs-h1:clamp(2.3rem,4.4vw,3.9rem);
  --fs-h2:clamp(1.85rem,2.9vw,2.7rem);
  --fs-h3:clamp(1.25rem,1.7vw,1.5rem);
  --fs-stmt:clamp(1.55rem,2.5vw,2.3rem);
  --fs-lg:1.125rem;--fs-md:1rem;--fs-sm:.9375rem;--fs-mono:.75rem;--fs-mono-sm:.6875rem;
  --sp-section:clamp(96px,11vw,160px);--sp-block:56px;--sp-row:36px;
  --w-max:1320px;--w-pad:40px;--gap:32px;
  --e:cubic-bezier(.16,1,.3,1);--dur:.7s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{font-family:var(--f);font-size:var(--fs-md);line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
strong{font-weight:500;color:var(--ink)}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;font-size:.85rem;z-index:1000}
.skip:focus{left:8px}

/* ── Container + Grid ── */
.w{max-width:var(--w-max);margin:0 auto;padding:0 var(--w-pad)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.g__idx{grid-column:1/4}
.g__body{grid-column:4/13}
.g__body--narrow{grid-column:4/11}
.g__full{grid-column:1/13}
.rc{max-width:58ch}
.rc--lg{max-width:62ch}

/* ── Typografie ── */
.mono{font-family:var(--fm);font-size:var(--fs-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.mono--ink{color:var(--ink)}
.mono--teal{color:var(--teal)}
.display{font-family:var(--fh);font-weight:300;font-size:var(--fs-display);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.h1{font-family:var(--fh);font-weight:300;font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.h2{font-family:var(--fh);font-weight:300;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
.h3{font-family:var(--fh);font-weight:400;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.015em}
.stmt{font-family:var(--fh);font-weight:300;font-size:var(--fs-stmt);line-height:1.25;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.lead{font-size:var(--fs-lg);line-height:1.6;color:var(--ink-2);max-width:62ch}
.body{font-size:var(--fs-md);line-height:1.65;color:var(--ink-2)}
.body p+p{margin-top:1em}
.accent{color:var(--teal)}
.q{font-family:var(--fh);font-weight:300;font-style:italic;font-size:var(--fs-lg);line-height:1.45;color:var(--ink-2)}

/* ── Links + Buttons ── */
.arrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:500;color:var(--ink);transition:color .3s var(--e)}
.arrow::after{content:'\2192';font-family:var(--f);transition:transform .4s var(--e)}
.arrow:hover{color:var(--teal)}
.arrow:hover::after{transform:translateX(4px)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;border:1px solid var(--ink);font-size:.875rem;font-weight:500;letter-spacing:.005em;line-height:1;color:var(--ink);transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e),transform .35s var(--e)}
.btn::after{content:'\2192';transition:transform .4s var(--e)}
.btn:hover::after{transform:translateX(3px)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#222}
.btn--line:hover{background:var(--ink);color:#fff}
.v3--dark .btn--line,.hero-b .btn--line{border-color:rgba(255,255,255,.28);color:#fff}
.v3--dark .btn--line:hover,.hero-b .btn--line:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-2);border-color:var(--teal-2)}
.btn--sm{padding:11px 16px;font-size:.8125rem}
.btn--plain::after{content:none}

/* ── Nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;display:flex;align-items:center;background:rgba(255,255,255,0);transition:background .4s var(--e),box-shadow .4s var(--e)}
.nav--s{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);box-shadow:inset 0 -1px 0 var(--line)}
.nav__in{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{font-family:var(--fl);font-size:1.9rem;font-weight:400;letter-spacing:-.04em;text-transform:lowercase;color:var(--ink);line-height:1;display:inline-flex;align-items:baseline}
.logo-8{margin-left:-.12em;margin-right:-.09em}
.logo-dot{display:inline-block;width:6px;height:6px;background:var(--teal);border-radius:1px;margin-left:5px;position:relative;top:-2px}
.nav__links{display:flex;gap:30px}
.nav__l{font-size:.875rem;font-weight:500;color:var(--ink-2);position:relative;padding:6px 0;transition:color .3s var(--e)}
.nav__l:hover,.nav__l--on{color:var(--ink)}
.nav__l--on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--teal)}
.nav__r{display:flex;align-items:center;gap:22px}
.lang{display:flex;align-items:center;gap:6px;font-family:var(--fm);font-size:var(--fs-mono-sm);letter-spacing:.1em}
.lang__b{color:var(--ink-3);padding:4px 2px;font-weight:500}
.lang__b--on{color:var(--ink)}
.lang__s{color:var(--line)}
.ham{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end}
.ham span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .35s var(--e),opacity .3s var(--e),width .3s var(--e)}
.ham span:nth-child(2){width:16px}
.ham--o span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.ham--o span:nth-child(2){opacity:0}
.ham--o span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mob{position:fixed;inset:72px 0 0 0;background:var(--bg);z-index:99;display:none;flex-direction:column;padding:32px var(--w-pad);gap:8px;border-top:1px solid var(--line)}
.mob--o{display:flex}
.mob .nav__l{font-family:var(--fh);font-size:2rem;font-weight:300;letter-spacing:-.02em;padding:10px 0;border-bottom:1px solid var(--line-2)}
.mob .lang{margin:24px 0 16px}

/* ── Reveal ── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.is-in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* ── Sections ── */
.sec{padding:var(--sp-section) 0;position:relative}
.sec--line{border-top:1px solid var(--line)}
.sec__hd{margin-bottom:var(--sp-block)}
.sec__hd .lead{margin-top:18px;max-width:52ch}
.idx{position:sticky;top:96px;align-self:start}
.idx .mono{display:block}
.idx .mono+.mono{margin-top:8px}

/* ── Hero ── */
.hero{padding:168px 0 0;position:relative}
.hero__top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:40px}
.hero__top .mono{color:var(--ink)}
.hero__top .mono+.mono{color:var(--ink-3)}
.hero__hl{max-width:22ch}
.hero__row{margin-top:56px;padding-bottom:96px}
.hero__sub{max-width:46ch}
.hero__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__idx{display:flex;flex-direction:column;gap:8px}
.hero__fig{grid-column:9/13;align-self:end}
.hero__fig svg{width:100%;height:auto}
.curve-lbl{font-family:var(--fm);font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-3)}
.curve-lbl--teal{fill:var(--teal)}
.curve-line{fill:none;stroke-linecap:round}
.curve-line--1{stroke:var(--ink-3);stroke-width:1.5}
.curve-line--2{stroke:var(--ink-2);stroke-width:1.75}
.curve-line--3{stroke:var(--teal);stroke-width:2.5}
.curve-axis{stroke:var(--line);stroke-width:1}
.hero__fig .curve-line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s var(--e) .25s forwards}
.hero__fig .curve-line--2{animation-delay:.45s}
.hero__fig .curve-line--3{animation-delay:.65s;animation-duration:2.2s}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__fig .curve-lbl{opacity:0;animation:fadein .8s var(--e) 2.2s forwards}
@keyframes fadein{to{opacity:1}}

/* ── Logos (statisch, leise) ── */
.logos{padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logos__in{display:flex;align-items:center;gap:48px;flex-wrap:wrap}
.logos__in .mono{margin-right:auto}
.logos__item{height:30px;display:flex;align-items:center;opacity:.45;filter:grayscale(1);transition:opacity .4s var(--e)}
.logos__item:hover{opacity:.85}
.logos__item img{height:100%;width:auto}
.logos__item--invert img{filter:invert(1)}

/* ── Statement ── */
.stmt-sec .stmt{max-width:34ch}
.stmt-sec .body{margin-top:28px;max-width:48ch}

/* ── Kapitel entlang der Kurve ── */
.chapters{position:relative}
.chapters .w{position:relative}
.spine{position:absolute;left:calc(var(--w-pad) + 5px);top:0;bottom:0;width:1px;background:var(--line)}
.spine__fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--teal);transition:height .15s linear}
.chap{padding:var(--sp-block) 0;position:relative}
.chap+.chap{border-top:1px solid var(--line-2)}
.chap__idx{padding-left:28px}
.sec__hd .chap__idx{position:relative}
.chap__idx::before{content:'';position:absolute;left:0;top:.45em;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink-3);transition:border-color .4s var(--e),background .4s var(--e)}
.chap.is-in .chap__idx::before{border-color:var(--teal);background:var(--teal)}
.chap__num{font-family:var(--fm);font-size:var(--fs-mono);letter-spacing:.12em;color:var(--ink-3);display:block;margin-bottom:6px}
.chap__name{font-family:var(--fh);font-weight:300;font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.025em;color:var(--ink)}
.chap__name .accent{font-weight:300}
.chap__q{margin-top:18px;max-width:24ch}
.chap__body{max-width:56ch}
.chap__body+.chap__body{margin-top:1em}
.chap__more{margin-top:24px}
.chap__head{margin-bottom:28px}

/* ── Zeilenlisten (Solutions, Insights, FAQ) ── */
.rows{border-top:1px solid var(--line);margin-top:32px}
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gap);padding:22px 0;border-bottom:1px solid var(--line);color:inherit;align-items:baseline}
a.row:hover .row__name,.row:hover .arrow{color:var(--teal)}
.row__name{font-family:var(--fh);font-weight:400;font-size:var(--fs-h3);letter-spacing:-.015em;line-height:1.25;transition:color .3s var(--e);text-wrap:balance}
.row__hook{color:var(--ink-2);font-size:var(--fs-md);line-height:1.55;max-width:56ch}
.row__meta{font-family:var(--fm);font-size:var(--fs-mono-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.rows__more{margin-top:24px}

/* Aufklappbare Zeile (Solutions) */
.xrow{border-bottom:1px solid var(--line)}
.xrow summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr) 24px;column-gap:var(--gap);padding:24px 0;align-items:baseline}
.xrow summary::-webkit-details-marker{display:none}
.xrow summary:hover .row__name{color:var(--teal)}
.xrow__chev{width:24px;height:24px;color:var(--ink-3);transition:transform .4s var(--e),color .3s var(--e);align-self:center}
.xrow[open] .xrow__chev{transform:rotate(90deg);color:var(--teal)}
.xrow__body{padding:0 0 30px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr) 24px;column-gap:var(--gap)}
.xrow__body>*{grid-column:2}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;max-width:720px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.5;color:var(--ink)}
.checks li::before{content:'';flex:0 0 14px;height:14px;margin-top:4px;border-radius:50%;background:var(--teal-soft);box-shadow:inset 0 0 0 1px var(--teal)}

/* So setzt KI an (Solutions) */
.aiblk{padding:28px 0 28px 28px;border-left:1px solid var(--teal);margin:8px 0 8px;max-width:760px}
.aiblk .mono{color:var(--teal);display:block;margin-bottom:12px}
.aiblk .body{max-width:58ch}
.tags{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px}
.tags li{font-family:var(--fm);font-size:var(--fs-mono-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ── Zwei Spalten Text (Problem/Ansatz, KI macht/Mensch macht) ── */
.two{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);row-gap:40px}
.two .mono{display:block;margin-bottom:14px}
.two .h3{margin-bottom:14px;max-width:26ch;text-wrap:balance}
.two .body{max-width:52ch}

/* ── FAQ ── */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-family:var(--fh);font-weight:400;font-size:var(--fs-h3);letter-spacing:-.015em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal)}
.faq .xrow__chev{flex:0 0 24px}
.faq details[open] .xrow__chev{transform:rotate(90deg);color:var(--teal)}
.faq__a{padding:0 48px 26px 0;max-width:60ch;color:var(--ink-2);line-height:1.65}

/* ── Methode: Kurve gross ── */
.chart{margin-top:48px}
.chart svg{width:100%;height:auto}
.chart .curve-line{stroke-dasharray:1;stroke-dashoffset:1}
.chart .curve-lbl{opacity:0;transition:opacity .6s var(--e)}
.chart.is-drawn .curve-lbl{opacity:1}
.chart__sol{opacity:0;transition:opacity .5s var(--e)}
.chart__sol.is-v{opacity:1}
.chart__sol circle{fill:var(--teal)}
.chart__sol text{font-family:var(--f);font-size:16px;font-weight:500;fill:var(--ink)}
.chart .curve-lbl{font-size:12px}
.legend{margin-top:40px;border-top:1px solid var(--line)}
.legend__row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gap);padding:20px 0;border-bottom:1px solid var(--line)}
.legend__row .h3{font-size:var(--fs-lg)}
.legend__row .body{max-width:58ch}

/* ── Gruender ── */
.ph{width:100%;max-width:380px;aspect-ratio:4/5;background:#F3F3F0;object-fit:cover;display:block}
.fnd .body p+p{margin-top:1em}

/* ── Check-Zeile ── */
.band{padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .g{align-items:start}
.band .lead{margin-top:12px;max-width:48ch}
.band__act{justify-self:end}

/* ── CTA ── */
.cta{padding:var(--sp-section) 0;border-top:1px solid var(--line)}
.cta .stmt{max-width:22ch}
.cta .lead{margin-top:24px;max-width:48ch}
.cta__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ── Footer ── */
.footer{background:var(--dark);color:var(--on-dark);padding:80px 0 40px;position:relative}
.footer a{color:var(--on-dark-2);transition:color .3s var(--e)}
.footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:40px}
.footer__brand{grid-column:1/4}
.footer__brand .nav__logo{color:#fff;font-size:1.6rem}
.footer__brand p{margin-top:18px;font-size:var(--fs-sm);color:var(--on-dark-2);max-width:28ch;line-height:1.6}
.footer__col{display:flex;flex-direction:column;font-size:var(--fs-sm)}
/* Trefferflaeche statt Abstand: die Links waren auf dem Handy 25px hoch. */
.footer__col a{padding:8px 0}
.footer__col>*+*{margin-top:2px}
.footer__col:nth-of-type(2){grid-column:5/7}
.footer__col:nth-of-type(3){grid-column:7/9}
.footer__col:nth-of-type(4){grid-column:9/11}
.footer__col .mono{color:var(--on-dark-2);margin-bottom:8px}
.askai{grid-column:11/13;justify-self:end}
.askai .mono{color:var(--on-dark-2);display:block;margin-bottom:12px;text-align:right}
.askai__row{display:flex;gap:8px;justify-content:flex-end}
.askai__b{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-dark);color:var(--on-dark-2);transition:border-color .3s var(--e),color .3s var(--e)}
.askai__b:hover{border-color:#555;color:#fff}
.askai__b svg{width:16px;height:16px}
.footer__bottom{margin-top:64px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--fm);font-size:var(--fs-mono-sm);letter-spacing:.08em;color:var(--on-dark-2)}


/* ── Methode: Unterueberschriften, Dreispalter, Warum/Was/Wie, Vergleich ── */
.sub-hd{margin-top:72px;margin-bottom:32px}
.sub-hd .mono{display:block;margin-bottom:14px}
.sub-hd .h2{max-width:28ch}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:32px}
.three .h3{margin-bottom:12px;max-width:16ch}
.wjw{border-top:1px solid var(--line)}
.wjw__row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gap);padding:36px 0;border-bottom:1px solid var(--line)}
.wjw__row>div:first-child .mono{display:block;margin-bottom:10px;color:var(--teal)}
.wjw__word{font-family:var(--fh);font-weight:300;font-size:var(--fs-h2);letter-spacing:-.025em;line-height:1}
.wjw__q{margin-top:12px;max-width:22ch}
.wjw__cells{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);row-gap:22px}
.wjw__cell .mono{display:block;margin-bottom:10px}
.wjw__cell--ai .mono{color:var(--teal)}
.wjw__out{grid-column:1/-1;font-family:var(--fm);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding-top:16px;border-top:1px solid var(--line-2)}
.wjw__out::before{content:'\2192';color:var(--teal);margin-right:12px}
.cmp{border-top:1px solid var(--line);margin-top:8px}
.cmp__row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);column-gap:var(--gap);padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.cmp__row--hd{padding:14px 0}
.cmp__step{font-family:var(--fh);font-weight:400;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.35}
.cmp__old{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}
.cmp__new{font-size:var(--fs-sm);color:var(--ink);line-height:1.5}
.hero--inner .hero__hl{max-width:none}
@media(max-width:900px){
  .three{grid-template-columns:1fr}
  .wjw__row{grid-template-columns:1fr;row-gap:20px}
  .wjw__cells{grid-template-columns:1fr}
  .cmp__row{grid-template-columns:1fr;row-gap:6px;padding:16px 0}
  .cmp__row--hd{display:none}
  .cmp__old::before{content:'Klassisch: ';font-family:var(--fm);font-size:var(--fs-mono-sm);letter-spacing:.1em;text-transform:uppercase}
  .cmp__new::before{content:'KI-nativ: ';font-family:var(--fm);font-size:var(--fs-mono-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
  .sub-hd{margin-top:48px}
}


/* ── Artikel (Blog, Playbook, Legal) ── */
.article{max-width:68ch}
.article>*+*{margin-top:1.15em}
.article p,.article li{font-size:var(--fs-lg);line-height:1.7;color:var(--ink-2)}
.article h2{font-family:var(--fh);font-weight:300;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em;color:var(--ink);margin-top:2.2em}
.article h3{font-family:var(--fh);font-weight:400;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.015em;color:var(--ink);margin-top:1.8em}
.article h4{font-family:var(--fh);font-weight:500;font-size:var(--fs-lg);color:var(--ink);margin-top:1.6em}
.article ul,.article ol{padding-left:1.2em}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article li+li{margin-top:.4em}
.article strong{color:var(--ink);font-weight:500}
.article a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:3px}
.article blockquote{border-left:1px solid var(--teal);padding:4px 0 4px 24px;font-family:var(--fh);font-weight:300;font-size:var(--fs-stmt);line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.article code{font-family:var(--fm);font-size:.85em;background:#F3F3F0;padding:2px 6px}
.article pre{background:#F3F3F0;padding:20px 24px;overflow-x:auto;font-family:var(--fm);font-size:.8125rem;line-height:1.6}
.article pre code{background:none;padding:0;font-size:inherit}
.article table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.article th{font-family:var(--fm);font-size:var(--fs-mono-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.article td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.article img,.article figure{max-width:100%;margin:2em 0}
.article figcaption{font-family:var(--fm);font-size:var(--fs-mono-sm);letter-spacing:.08em;color:var(--ink-3);margin-top:10px}
.article hr{border:0;border-top:1px solid var(--line);margin:3em 0}
.article .lead{font-size:calc(var(--fs-lg) + .125rem)}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px}
.art-meta .mono{color:var(--ink-3)}
.toc{position:sticky;top:96px;align-self:start}
.toc .mono{display:block;margin-bottom:12px}
.toc a{display:block;font-size:var(--fs-sm);color:var(--ink-2);padding:5px 0;border-left:1px solid var(--line);padding-left:14px;transition:color .3s var(--e),border-color .3s var(--e)}
.toc a:hover{color:var(--ink);border-color:var(--ink)}
.prev-next{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);border-top:1px solid var(--line);padding-top:28px}
@media(max-width:900px){.toc{position:static;margin-bottom:32px}.prev-next{grid-template-columns:1fr}}

/* ── About: Gruender-Grid (Foto schmal, Bio breit) ── */
.bio{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gap);row-gap:32px;align-items:start}
.bio .body{max-width:50ch}
@media(max-width:900px){
  .bio{grid-template-columns:1fr}
}

/* ── Solutions: Aufklappzeile auf Mobile (Name ueber Hook, Chevron rechts neben dem Namen) ── */
@media(max-width:900px){
  .xrow summary .row__name{grid-column:1;grid-row:1}
  .xrow summary .row__hook{grid-column:1;grid-row:2}
  .xrow summary .xrow__chev{grid-column:2;grid-row:1}
}

/* ── Insights: Dateline in der Beitragszeile (Datum · Kategorie · Lesezeit ueber dem Excerpt, darf umbrechen) ── */
.row__date{display:block;white-space:normal;margin-bottom:6px}

.nobr{white-space:nowrap}

/* ── Responsive ── */
@media(max-width:1100px){
  .g>*{grid-column:1/-1!important}
  .g__idx{grid-column:1/13;margin-bottom:20px}
  .g__body,.g__body--narrow{grid-column:1/13}
  .idx{position:static}
  .hero__fig{grid-column:1/13;margin-top:40px;max-width:520px}
  .footer__brand{grid-column:1/13}
  .footer__col:nth-of-type(2){grid-column:1/5}.footer__col:nth-of-type(3){grid-column:5/9}.footer__col:nth-of-type(4){grid-column:9/13}
  .askai{grid-column:1/13;justify-self:start}
  .askai .mono{text-align:left}.askai__row{justify-content:flex-start}
  .band__act{justify-self:start;margin-top:16px}
}
@media(max-width:900px){
  .chapters .g__body{padding-left:28px}
  :root{--w-pad:24px;--gap:20px;--sp-section:clamp(72px,10vw,112px);--sp-block:40px}
  .nav__links,.nav__r .lang,.nav__r .btn{display:none}
  .ham{display:flex}
  .hero{padding-top:128px}
  .hero__top{flex-direction:column;gap:6px;align-items:flex-start}
  .hero__row{margin-top:36px}
  .row,.xrow summary,.xrow__body,.legend__row{grid-template-columns:1fr;row-gap:6px}
  .xrow summary{grid-template-columns:1fr 24px}
  .xrow__body>*{grid-column:1}
  .checks{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .spine{left:calc(var(--w-pad) + 5px)}
  .logos__in{gap:28px}
  .logos__in .mono{width:100%;margin-right:0}
  .footer__bottom{flex-direction:column}
}
@media(max-width:600px){
  :root{--w-pad:20px}
  .chapters .g__body{padding-left:24px}
  .hero__hl{max-width:none}
  .chap__idx{padding-left:24px}
}


/* ── V3-System (Robert-Abnahme 28.08.): Pill-Nav, Hero mit Plane-Kurve, Rhythmus-Sektionen ── */
.pnav{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:30px;padding:13px 24px;border-radius:999px;background:rgba(18,18,18,.72);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border:1px solid rgba(255,255,255,.07)}
.pnav__logo{font-family:var(--fl);font-size:1.5rem;letter-spacing:-.04em;text-transform:lowercase;color:#fff;line-height:1;display:inline-flex;align-items:baseline}
.pnav__links{display:flex;gap:26px}
.pnav__l{font-size:.875rem;font-weight:500;color:#B4B4B0;transition:color .3s var(--e)}
.pnav__l:hover,.pnav__l--on{color:#fff}
.pnav--light .pnav__l--on{color:var(--ink)}
.pnav__meta{display:flex;align-items:center;gap:16px}
.pnav__clock{font-family:var(--fm);font-size:.6875rem;letter-spacing:.1em;color:#8A8A86;white-space:nowrap}
.pnav .lang .lang__b{color:#8A8A86}
.pnav .lang .lang__b--on{color:#fff}
.pnav .lang .lang__s{color:#3A3A3A}
.pnav__mail{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#DADAD6;transition:background .3s var(--e),color .3s var(--e)}
.pnav__mail:hover{background:#fff;color:#0A0A0A}
.pnav__mail svg{width:14px;height:14px}
.pnav .ham{width:32px;height:32px}
.pnav .ham span{background:#fff}
/* Adaptiv: ueber hellen Sektionen milchig-weiss mit dunkler Schrift (Robert 28.08.: dunkle Pille auf Weiss zu schwer) */
.pnav--light{background:rgba(255,255,255,.7);border-color:rgba(12,12,12,.08)}
.pnav--light .pnav__logo{color:var(--ink)}
.pnav--light .pnav__l{color:#6A6A66}
.pnav--light .pnav__l:hover{color:var(--ink)}
.pnav--light .pnav__clock{color:#9A9A96}
.pnav--light .lang .lang__b{color:#9A9A96}
.pnav--light .lang .lang__b--on{color:var(--ink)}
.pnav--light .lang .lang__s{color:#D5D5D0}
.pnav--light .pnav__mail{border-color:rgba(12,12,12,.16);color:#3A3A3A}
.pnav--light .pnav__mail:hover{background:var(--ink);color:#fff}
.pnav--light .ham span{background:var(--ink)}
.hero-b{height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;background:#0A0A0A;color:#fff}
.hero-b__curve{position:absolute;left:0;right:0;bottom:0;width:100%;height:62vh;display:block}
.hero-b__kick{display:block;color:var(--on-dark-2);margin-bottom:34px}

.hero-b__in{margin-top:auto;padding-bottom:15vh;position:relative;z-index:2}
.hero-b__hl{font-family:var(--fh);font-weight:300;font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1.06;letter-spacing:-.034em;color:#fff;position:relative;max-width:28ch}
.hero-b__hl .l2{display:block;padding-left:.9em;color:var(--teal)}
.tw-ch{opacity:0}
.tw-ch--on{opacity:1}
.tw-cur{position:absolute;width:4px;height:.82em;background:var(--teal);animation:tw-blink .7s step-end infinite;transition:opacity .5s var(--e);pointer-events:none}
@keyframes tw-blink{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.tw-cur{animation:none;opacity:0}}
.cfill{opacity:0;animation:v3fadein 1.4s var(--e) 1.1s forwards}
.cpath{stroke-dasharray:1;stroke-dashoffset:1;animation:v3draw 2.4s cubic-bezier(.16,1,.3,1) .3s forwards}
@keyframes v3draw{to{stroke-dashoffset:0}}
@keyframes v3fadein{to{opacity:1}}
.v3{padding:clamp(140px,16vw,220px) 0}
.v3--light{background:var(--bg);color:var(--ink)}
.v3--dark{background:#0A0A0A;color:#fff}
/* Auf Dunkel behaelt der Nebentext sein helleres Grau, der hellere Root-Wert gilt nur auf Weiss. */
.v3--dark,.hero-b,.footer,.mob{--ink-3:#9A9A96}
.v3 .g{align-items:start}
.v3__lbl{display:flex;align-items:baseline;gap:12px}
.v3__tick{width:10px;height:16px;background:var(--teal);transform:skewX(-12deg);position:relative;top:2px;flex-shrink:0}
.v3--dark .v3__lbl .mono{color:var(--on-dark-2)}
.v3--dark .rows{border-top-color:#242424}
.v3--dark .row{border-bottom-color:#242424}
.v3--dark .row__hook{color:#9A9A96}
.v3--dark a.row:hover .row__name{color:var(--teal)}
.v3__stmt{font-family:var(--fh);font-weight:300;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.22;letter-spacing:-.025em;max-width:34ch;text-wrap:pretty;margin:0}
.b3{border-top:1px solid var(--line)}
.b3__row{display:grid;grid-template-columns:minmax(0,72px) minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:baseline;padding:68px 0;border-bottom:1px solid var(--line)}
.b3__num{font-family:var(--fm);font-size:var(--fs-mono);letter-spacing:.12em;color:var(--ink-3)}
.b3__name{font-family:var(--fh);font-weight:300;font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1;letter-spacing:-.025em;padding-right:24px}
.b3__q{font-family:var(--fh);font-weight:300;font-style:italic;font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.5;color:var(--ink-3);max-width:36ch}
.v3--dark .s3grp{margin-bottom:72px}
.v3--dark .s3grp:last-child{margin-bottom:0}
.s3grplbl{font-family:var(--fm);font-size:var(--fs-mono-sm);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);padding-bottom:16px;border-bottom:1px solid #242424}
.rowd{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gap);padding:44px 0;border-bottom:1px solid #242424;color:inherit;align-items:baseline}
a.rowd:hover .rowd__name{color:var(--teal)}
.rowd__name{font-family:var(--fh);font-weight:300;font-size:clamp(1.25rem,1.7vw,1.5rem);letter-spacing:-.02em;line-height:1.2;transition:color .3s var(--e)}
.rowd__name--lead{font-size:clamp(1.45rem,2vw,1.8rem)}
.rowd__hook{color:#9A9A96;font-size:1rem;line-height:1.65;max-width:52ch}
.v3__more{margin-top:32px;color:#fff}
.v3__more:hover{color:var(--teal)}
.cta3__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
@media(max-width:900px){
  .pnav{gap:18px;padding:11px 16px;max-width:calc(100vw - 32px)}
  .pnav__links,.pnav .lang,.pnav__clock{display:none}
  .hero-b__kick{margin-bottom:24px}
  .hero-b__hl{font-size:clamp(2rem,7.6vw,2.6rem);max-width:none}
  .hero-b__hl .l2{padding-left:0}
  /* Auf dem Handy wird der Hero-Text vertikal zentriert statt nach unten gedrueckt:
     margin-top:auto liess die erste Zeile bei 60 Prozent der Hoehe beginnen. */
  .hero-b{justify-content:center}
  .hero-b__in{margin-top:0;padding-bottom:0}
  .hero-b__curve{height:38vh}
  .v3{padding:96px 0}
  .v3 .g__idx{margin-bottom:28px}
  .b3__row{grid-template-columns:1fr;row-gap:10px;padding:44px 0}
  .rowd{grid-template-columns:1fr;row-gap:8px;padding:30px 0}
}

/* ── Vixul-Muster (Robert 28.08.): Symptom-/Ergebnis-Listen und Passt-Raster ── */
.slist{border-top:1px solid var(--line);margin-top:8px}
.slist li{font-family:var(--fh);font-weight:300;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.35;letter-spacing:-.015em;color:var(--ink);padding:26px 0;border-bottom:1px solid var(--line);max-width:44ch}
.v3--dark .slist{border-color:#242424}
.v3--dark .slist li{color:#fff;border-color:#242424}
.fit{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto repeat(4,auto);column-gap:var(--gap);row-gap:0}
.fit>div{display:grid;grid-template-rows:subgrid;grid-row:1 / span 5}
.fit>div>ul{display:grid;grid-template-rows:subgrid;grid-row:2 / span 4}
.fit ul li{display:flex;align-items:flex-start}
.fit__lbl{font-family:var(--fm);font-size:var(--fs-mono-sm);font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--line);display:block}
.fit__lbl--yes{color:var(--teal)}
.fit__lbl--no{color:var(--ink-3)}
.fit ul li{font-size:var(--fs-md);line-height:1.55;color:var(--ink-2);padding:18px 0;border-bottom:1px solid var(--line-2);max-width:38ch}
.v3--dark .fit__lbl{border-color:#242424}
.v3--dark .fit__lbl--no{color:var(--on-dark-2)}
.v3--dark .fit ul li{color:#9A9A96;border-color:#1C1C1C}
@media(max-width:900px){.fit{grid-template-columns:1fr;grid-template-rows:none;row-gap:36px}.fit>div,.fit>div>ul{display:block;grid-template-rows:none;grid-row:auto}.fit ul li{display:block}.slist li{padding:20px 0}}
/* ── About-Muster (Robert 29.08.): Dreispalter-Vergleich und Prinzipien ── */
/* Kopfzeile plus vier Positionen. Spalten und Listen erben das Raster (subgrid),
   damit die Trennlinien ueber alle Spalten auf einer Hoehe liegen, unabhaengig
   davon, ob ein Eintrag ein- oder zweizeilig umbricht. */
.fit--3{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(4,auto);row-gap:0}
.fit--3>div{display:grid;grid-template-rows:subgrid;grid-row:1 / span 5}
.fit--3>div>ul{display:grid;grid-template-rows:subgrid;grid-row:2 / span 4}
.fit--3 ul li{display:flex;align-items:flex-start}
.fit__lbl--own{color:var(--teal)}
@supports not (grid-template-rows:subgrid){
  .fit--3>div>ul li{min-height:76px}
}
.prin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:44px;margin-top:56px}
.prin__c{border-top:1px solid var(--line);padding-top:24px}
.prin__h{font-family:var(--fh);font-weight:400;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.25;letter-spacing:-.015em;margin-bottom:14px;max-width:20ch}
.prin__b{font-size:var(--fs-md);line-height:1.6;color:var(--ink-2);max-width:34ch}
.v3--dark .prin__c{border-color:#242424}
.v3--dark .prin__b{color:#9A9A96}
@media(max-width:900px){
  .fit--3{grid-template-columns:1fr;grid-template-rows:none;row-gap:48px}
  .fit--3>div,.fit--3>div>ul{display:block;grid-template-rows:none;grid-row:auto}
  .fit--3 ul li{display:block}
  .fit--3 ul li:last-child{border-bottom:none}
  .prin{grid-template-columns:1fr;row-gap:32px;margin-top:40px}
}
/* ── Zahlen aus dem eigenen Betrieb (Robert 30.08.) ── */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:48px;margin-top:56px;border-top:1px solid #242424;padding-top:44px}
.nums__n{font-family:var(--fh);font-weight:300;font-size:clamp(3rem,6vw,5rem);line-height:1;letter-spacing:-.04em;color:var(--teal);display:block}
.nums__l{display:block;margin-top:18px;font-size:var(--fs-md);line-height:1.5;color:#9A9A96;max-width:26ch}
@media(max-width:900px){.nums{grid-template-columns:1fr;row-gap:36px;margin-top:40px}}
/* ── Einstiegs-Router auf Solutions (Robert 30.08.) ── */
.rout{margin-top:48px;border-top:1px solid #242424}
.rout__r{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--gap);align-items:baseline;padding:30px 0;border-bottom:1px solid #242424;color:inherit}
.rout__s{font-family:var(--fh);font-weight:300;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.35;letter-spacing:-.015em;color:#fff;max-width:34ch;transition:color .3s var(--e)}
.rout__r:hover .rout__s{color:var(--teal)}
.rout__n{display:block;font-family:var(--fm);font-size:var(--fs-mono-sm);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.rout__h{display:block;font-size:var(--fs-sm);line-height:1.55;color:#9A9A96;max-width:40ch}
@media(max-width:900px){.rout__r{grid-template-columns:1fr;row-gap:12px;padding:24px 0}}
/* ── Bewegung, dosiert (Robert 30.08.) ── */
.stw{display:inline-block;opacity:0;transform:translateY(.3em);transition:opacity .6s var(--e),transform .6s var(--e)}
.st-in .stw{opacity:1;transform:none}
.st-plain{opacity:0;transform:translateY(.24em);transition:opacity .62s var(--e),transform .62s var(--e)}
.st-plain.st-in{opacity:1;transform:none}
.cut{position:relative}
.cut:before{content:"";position:absolute;top:0;left:0;height:1px;width:0;background:var(--teal);transition:width 1s var(--e);z-index:3}
.cut-in:before{width:100%}
@media(prefers-reduced-motion:reduce){
  .stw,.st-plain{opacity:1;transform:none;transition:none}
  .cut:before{display:none}
}
/* ── Referenzen als Fliesstext (Robert 31.08.: keine weitere Zeilen-Komponente) ── */
.refs{margin-top:44px;max-width:64ch}
.refs__i{padding:28px 0;border-bottom:1px solid #242424}
.refs__i:last-child{border-bottom:none;padding-bottom:0}
.refs__k{display:block;font-family:var(--fm);font-size:var(--fs-mono-sm);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.refs__k--own{color:#9A9A96}
.refs__p{font-size:var(--fs-md);line-height:1.65;color:#DADAD6}
.refs__p strong{color:#fff;font-weight:500}
/* ── KI-Check sichtbar (Robert 31.08.): Mobilmenue-Eintrag, Footer-CTA-Zeile, Home-Nebenpfad ── */
.v3--dark .btn--line,.hero-b .btn--line,.footer .btn--line{border-color:rgba(255,255,255,.28);color:#fff}
.v3--dark .btn--line:hover,.hero-b .btn--line:hover,.footer .btn--line:hover{background:#fff;color:var(--ink);border-color:#fff}
.footer__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line-dark)}
.cta3__or{display:block;margin-top:22px;color:var(--ink-3)}
.cta3__or .arrow{color:var(--ink);font-weight:500}
.v3--dark .cta3__or .arrow,.hero-b .cta3__or .arrow{color:#fff}
.v3--dark .cta3__or .arrow:hover,.hero-b .cta3__or .arrow:hover{color:var(--teal)}
/* ── Agenten je Baustein (Robert 31.08.): was nach der Solution laeuft ── */
.agts{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
.v3--dark .agts{border-color:#242424}
.agts__hd{display:block;margin-bottom:30px}
/* Signalkette: ein Lauf schaltet die Agenten frei, danach arbeitet jeder in eigenem Takt. */
.agts__l{position:relative;padding-left:32px}
.agts__l:before{content:"";position:absolute;left:4px;top:7px;bottom:7px;width:1px;background:var(--line-2)}
.v3--dark .agts__l:before{background:#242424}
.agts__lauf{position:absolute;left:4px;top:7px;width:1px;background:var(--teal);height:0;transition:height 1.3s cubic-bezier(.22,1,.36,1)}
.agts-in .agts__lauf{height:calc(100% - 14px)}
.agts__a{position:relative;padding:0 0 26px;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);column-gap:32px;align-items:baseline}
.agts__a:last-of-type{padding-bottom:6px}
.agts__p{position:absolute;left:-32px;top:6px;width:9px;height:9px;background:var(--bg);border:1px solid var(--line-2);transform:skewX(-12deg);transition:background .45s var(--e),border-color .45s var(--e)}
.v3--dark .agts__p{background:#0A0A0A;border-color:#242424}
.agts__a.an .agts__p{background:var(--teal);border-color:var(--teal)}
.agts__n{font-family:var(--fh);font-weight:400;font-size:var(--fs-md);line-height:1.4;color:var(--ink-3);transition:color .5s var(--e)}
.agts__a.an .agts__n{color:var(--ink)}
.v3--dark .agts__n{color:#6A6A66}
.v3--dark .agts__a.an .agts__n{color:#fff}
.agts__d{font-size:var(--fs-sm);line-height:1.55;color:var(--ink-3);max-width:46ch;opacity:0;transform:translateY(.25em);transition:opacity .55s var(--e),transform .55s var(--e)}
.v3--dark .agts__d{color:#9A9A96}
.agts__a.an .agts__d{opacity:1;transform:none}
/* Taktstrich: zeigt, dass der Agent laeuft, nicht dass er gleich fertig ist. */
.agts__takt{grid-column:1 / -1;position:relative;height:1px;margin-top:12px;background:var(--line-2);overflow:hidden;opacity:0;transition:opacity .6s var(--e)}
.v3--dark .agts__takt{background:#1C1C1C}
.agts__a.an .agts__takt{opacity:1}
.agts__takt i{position:absolute;top:0;left:0;height:1px;width:26%;background:linear-gradient(90deg,transparent,var(--teal),transparent)}
/* Grow laeuft im Kreis: die Linie fuehrt unten herum und oben zurueck,
   weil OKR, Bau und Pruefung einander bedingen statt aufeinander zu folgen. */
.agts__l--kreis{padding-bottom:26px}
.agts__l--kreis:before{bottom:26px}
.agts__l--kreis:after{content:"";position:absolute;left:-9px;bottom:0;width:14px;height:calc(100% - 20px);border:1px solid var(--line-2);border-right:0;border-radius:9px 0 0 9px;pointer-events:none}
.v3--dark .agts__l--kreis:after{border-color:#242424}
.agts-in.agts__l--kreis .agts__lauf{height:calc(100% - 40px)}
.agts__puls{position:absolute;left:-9px;bottom:0;width:14px;height:calc(100% - 20px);border:1px solid var(--teal);border-right:0;border-radius:9px 0 0 9px;opacity:0;pointer-events:none}
.agts__l--kreis.rund .agts__puls{animation:agtsRund 5.2s var(--e) infinite}
@keyframes agtsRund{0%{opacity:0}14%{opacity:.8}58%{opacity:.8}82%{opacity:0}100%{opacity:0}}
@media(max-width:900px){.agts__l--kreis:after,.agts__puls{left:-16px;width:10px}}
@media(prefers-reduced-motion:reduce){.agts__puls{display:none}}
.agts__note{margin-top:30px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-3);max-width:52ch}
.v3--dark .agts__note{color:#9A9A96}
@media(max-width:900px){
  .agts__l{padding-left:26px}
  .agts__a{grid-template-columns:1fr;row-gap:5px}
  .agts__p{left:-26px}
  .agts__takt{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){
  .agts__lauf{display:none}
  .agts__d{opacity:1;transform:none}
  .agts__n{color:var(--ink)}
  .agts__p{background:var(--teal);border-color:var(--teal)}
  .agts__takt i{display:none}
}
/* ── Statement-Laengenregel (Robert 31.08.: "ist das nicht crazy zu gross?") ──
   Ein Statement ist EIN Satz, hoechstens zwei. Wer einen Absatz in den Slot
   schreibt, bekommt Fliesstext in Display-Groesse. Ab etwa 20 Woertern
   faellt der Satz deshalb eine Stufe tiefer: immer noch praesent, aber lesbar. */
.v3__stmt--para{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.4;letter-spacing:-.015em;max-width:46ch}