/* takteins – „Partitur“
   Layout: Schwarz, Weiß und ein Lila. Riesige Typo, Schwarzweiß-Fotos, Taktnummern als Ordnung,
   Taktstriche als Raster, Interaktion statt Kartenraster. Bewusst eine feste Gestaltung (kein Dark-Mode-Wechsel). */
:root{
  color-scheme:light;
  --ink:#0E0C12; --ink-2:#1A1720; --paper:#FFFFFF; --mist:#F5F2F7;
  --rule:#E6E0EA; --rule-dark:#2C2834;
  --text:#0E0C12; --soft:#57525F; --muted:#8A8494;
  --lila:#3C005F; --lila-ink:#2A0043; --lila-pale:#EBE5EF; --lila-glow:#B199BF;
  --ok:#2F7A4F;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap:1280px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--lila);color:#fff}
:focus-visible{outline:2px solid var(--lila);outline-offset:3px;border-radius:2px}
.band{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wrap{max-width:var(--wrap);margin-inline:auto;position:relative}
.narrow{max-width:740px;margin-inline:auto}
h1,h2,h3{font-family:var(--f-display);font-weight:500;letter-spacing:-.035em;line-height:.98;text-wrap:balance;margin:0}
h1{font-size:clamp(3rem,8.4vw,7.6rem)}
h2{font-size:clamp(2.3rem,5.4vw,4.6rem)}
h3{font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.02em;line-height:1.1}
p{margin:0}
em.l,h1 em,h2 em{font-style:italic;color:var(--lila);font-weight:400}
.eyebrow{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.5;color:var(--soft);max-width:56ch}
.small{font-size:.86rem;color:var(--muted)}
.tint{background:var(--mist)}

/* Dunkle und lila Flächen */
.dark,.petrol{background:var(--ink);color:#fff}
.dark .lead,.petrol .lead{color:#C9C3D3}
.dark .eyebrow,.petrol .eyebrow{color:var(--lila-glow)}
.dark .small,.petrol .small{color:#8E879A}
.dark h2 em,.petrol h2 em{color:var(--lila-glow)}
.lila{background:var(--lila);color:#fff}
.lila .lead{color:#EDE6FF}
.lila .eyebrow{color:#DCCEFF}
.lila h2 em{color:#fff}

/* Taktnummer am Abschnitt */
.measure{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.8rem}
.measure b{font-family:var(--f-mono);font-weight:500;font-size:.78rem;letter-spacing:.14em;color:var(--lila)}
.measure span{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.measure::after{content:"";flex:1;height:1px;background:currentColor;opacity:.18;align-self:center}
.dark .measure b,.petrol .measure b{color:var(--lila-glow)}
.lila .measure b,.lila .measure span{color:#EDE6FF}

/* Logo 1/1 */
.ts{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:.82;font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.ts > span:last-child{color:var(--lila)}
.dark .ts > span:last-child,.petrol .ts > span:last-child,footer.site .ts > span:last-child{color:var(--lila-glow)}
.logo{display:inline-flex;align-items:center;gap:.38em;text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:1.55rem;letter-spacing:-.045em;color:inherit}
.logo .ts{font-size:.8em}

/* Kopf */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
nav.main{display:flex;gap:1.5rem;align-items:center;font-size:.92rem}
nav.main a{text-decoration:none;color:var(--soft);padding-block:.25rem;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--text)}
nav.main a[aria-current="page"]{color:var(--text);border-bottom-color:var(--lila)}
nav.main a.cta{color:#fff;background:var(--lila);padding:.55rem 1.05rem;border-radius:999px;border:none;font-weight:500}
nav.main a.cta:hover{background:var(--lila-ink);color:#fff}
.menu-btn{display:none;font:500 .9rem var(--f-body);background:none;border:1px solid var(--rule);color:var(--text);padding:.45rem .9rem;border-radius:999px;cursor:pointer}
@media (max-width:960px){
  .menu-btn{display:inline-flex}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--rule);padding:.5rem max(20px,env(safe-area-inset-right,0px)) 1.2rem max(20px,env(safe-area-inset-left,0px))}
  nav.main.open{display:flex}
  nav.main a{padding:.9rem 0;border-bottom:1px solid var(--rule);font-size:1.1rem}
  nav.main a.cta{margin-top:1rem;text-align:center;padding:.9rem}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.5rem;font:500 1rem var(--f-body);text-decoration:none;border-radius:999px;border:1px solid var(--lila);background:var(--lila);color:#fff;cursor:pointer;transition:background .2s ease}
.btn::after{content:"→";transition:transform .2s ease}
.btn:hover{background:var(--lila-ink);border-color:var(--lila-ink)}
.btn:hover::after{transform:translateX(3px)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost::after{content:none}
.lila .btn,.cta-band .btn,.petrol .btn{background:#fff;color:var(--ink);border-color:#fff}
.lila .btn:hover,.cta-band .btn:hover,.petrol .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.page-hero .btn,.hero .btn{background:var(--lila);color:#fff;border-color:var(--lila)}
.cta-row{display:flex;gap:.8rem 1.4rem;flex-wrap:wrap;align-items:center}
.more{font-weight:500;text-decoration:none;border-bottom:2px solid var(--lila);padding-bottom:2px}
.more::after{content:" →"}
.dark .more,.petrol .more,.page-hero .more,.hero .more{border-bottom-color:var(--lila-glow)}

section{padding-block:clamp(4.5rem,10vw,8.5rem)}
.rule-top{border-top:1px solid var(--rule)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.5rem 5rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* Fotos: Schwarzweiß */
.shot{position:relative;margin:0;overflow:hidden;background:#1A1720;aspect-ratio:3/2;max-width:100%;min-width:0}
.shot.r45{aspect-ratio:4/5}.shot.r11{aspect-ratio:1/1}.shot.r21{aspect-ratio:21/8}.shot.r43{aspect-ratio:4/3.4}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(1.02);opacity:0;transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.shot img.on{opacity:1}
.shot .ph{position:absolute;inset:0}
.shot.loaded .ph{display:none}
a:hover .shot img.on{transform:scale(1.03)}
@media (max-width:700px){.shot.r21{aspect-ratio:3/2}}

/* Startseite: Hero */
.hero{background:var(--ink);color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);gap:clamp(2rem,4vw,4rem);padding-block:clamp(3.5rem,8vw,6.5rem) clamp(2.5rem,5vw,4rem);align-items:end}
.hero h1{font-size:clamp(3.1rem,8.6vw,8.4rem);line-height:.9}
.hero h1 em{color:var(--lila-glow)}
.hero-copy{display:grid;gap:2rem;min-width:0}
.hero .lead{color:#C9C3D3}
.hero .shot{aspect-ratio:4/5}
.hero-meta{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap;border-top:1px solid var(--rule-dark);padding-top:1.2rem}
.live{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;color:#B4ADBF;display:flex;align-items:center;gap:.6rem}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:#58D68D;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(88,214,141,.6)}70%{box-shadow:0 0 0 8px rgba(88,214,141,0)}100%{box-shadow:0 0 0 0 rgba(88,214,141,0)}}
.metro{display:flex;gap:10px;align-items:flex-end;height:40px}
.metro i{width:4px;height:100%;background:#4A4554;border-radius:2px;transform-origin:bottom;animation:beat 2.4s infinite cubic-bezier(.3,.7,.3,1)}
.metro i:nth-child(1){background:var(--lila-glow);animation-name:beat1}
.metro i:nth-child(2){animation-delay:.6s}.metro i:nth-child(3){animation-delay:1.2s}.metro i:nth-child(4){animation-delay:1.8s}
@keyframes beat{0%,100%{transform:scaleY(.55)}8%{transform:scaleY(.8)}30%{transform:scaleY(.55)}}
@keyframes beat1{0%,100%{transform:scaleY(.75)}8%{transform:scaleY(1)}30%{transform:scaleY(.75)}}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero .shot{aspect-ratio:4/3}}

/* Laufband */
.ticker{background:var(--lila);color:#fff;overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;padding-block:1.05rem;animation:marquee 70s linear infinite}
.ticker-track span{font-family:var(--f-display);font-size:clamp(1.15rem,1.9vw,1.55rem);letter-spacing:-.01em;padding-inline:1.3rem;display:inline-flex;align-items:center;gap:1.3rem}
.ticker-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.55}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* Zahlen groß */
.stats-band{padding-block:clamp(3rem,6vw,5rem)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:1.2rem}
.stat{display:grid;gap:.6rem;align-content:start;padding:0 1.5rem;border-left:1px solid var(--rule)}
.stat:first-child{padding-left:0;border-left:none}
.stat b{font-family:var(--f-display);font-weight:500;font-size:clamp(2.8rem,6vw,5.4rem);line-height:.9;letter-spacing:-.05em;font-variant-numeric:lining-nums tabular-nums}
.stat:first-child b{color:var(--lila)}
.stat span{font-size:.95rem;color:var(--soft);max-width:22ch}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}.stat:nth-child(3){padding-left:0;border-left:none}}

/* Wiedererkennen: Zitate als Takte */
.quotes{display:grid;border-top:1px solid var(--text);counter-reset:q}
.q{display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,14rem);gap:1.5rem;align-items:baseline;padding-block:1.35rem;border-bottom:1px solid var(--rule)}
.q::before{content:counter(q, decimal-leading-zero);counter-increment:q;font-family:var(--f-mono);font-size:.8rem;color:var(--lila);letter-spacing:.1em}
.q blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.15;letter-spacing:-.02em;transition:color .2s ease}
.q p{color:var(--muted);font-size:.88rem;text-align:right}
.q:hover blockquote{color:var(--lila)}
@media (max-width:760px){.q{grid-template-columns:1fr;gap:.4rem}.q p{text-align:left}}

/* Vorher/Nachher-Regler */
.turn{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.turn-copy{display:grid;gap:1.4rem}
@media (max-width:900px){.turn{grid-template-columns:1fr}}
.compare{position:relative;aspect-ratio:16/11;overflow:hidden;background:#1A1720;user-select:none;max-width:100%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12)}
.compare .after{clip-path:inset(0 0 0 var(--pos,50%))}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.compare .handle::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--lila);color:#fff;display:grid;place-items:center;font-size:1.15rem;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.compare .lbl{position:absolute;bottom:1rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(14,12,18,.7);padding:.4rem .65rem;pointer-events:none}
.compare .lbl.l{left:1rem}.compare .lbl.r{right:1rem;background:var(--lila)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* Selbsttest */
.quiz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:start}
@media (max-width:900px){.quiz{grid-template-columns:1fr}}
.quiz-form{display:grid;border-top:1px solid rgba(255,255,255,.4)}
.qq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding-block:1rem;border-bottom:1px solid rgba(255,255,255,.2)}
.qq p{font-size:1.05rem}
.yn{display:flex;gap:.4rem}
.yn input{position:absolute;opacity:0;pointer-events:none}
.yn label{cursor:pointer;font:500 .85rem var(--f-body);padding:.45rem .95rem;border-radius:999px;border:1px solid rgba(255,255,255,.5)}
.yn input:checked + label{background:#fff;color:var(--lila-ink);border-color:#fff}
.yn input:focus-visible + label{outline:2px solid #fff;outline-offset:2px}
.quiz-result{margin-top:1.8rem;display:grid;gap:1rem;padding:1.5rem;background:rgba(14,12,18,.3)}
.quiz-score{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.quiz-score b{font-family:var(--f-display);font-size:3.8rem;line-height:.9;letter-spacing:-.04em}
.quiz-score span{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#DCCEFF}
.quiz-bars{display:flex;gap:8px;height:36px;align-items:flex-end}
.quiz-bars i{flex:1;height:100%;background:rgba(255,255,255,.22);border-radius:2px;transition:background .3s ease}
.quiz-bars i.on{background:#fff}

/* Wege */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;border-top:1px solid var(--text)}
.path{display:grid;gap:1.1rem;align-content:start;text-decoration:none;min-width:0;padding-top:1.8rem}
.path h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.path p:not(.eyebrow){color:var(--soft)}
.path .num{font-family:var(--f-display);font-size:clamp(3.4rem,6vw,5.6rem);line-height:.8;color:var(--lila);letter-spacing:-.05em}
@media (max-width:900px){.paths{grid-template-columns:1fr;gap:0}.path{padding:1.6rem 0 2rem;border-bottom:1px solid var(--rule)}}

/* Seitenkopf Unterseiten */
.page-hero{background:var(--ink);color:#fff}
.page-hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,5rem);align-items:end;padding-block:clamp(3.5rem,8vw,6.5rem)}
.page-hero .hero-text{display:grid;gap:1.6rem;min-width:0}
.page-hero h1{font-size:clamp(2.8rem,6.6vw,6rem)}
.page-hero h1 em{color:var(--lila-glow)}
.page-hero .lead{color:#C9C3D3}
.page-hero .eyebrow{color:var(--lila-glow)}
.page-hero ul.promise{color:#C9C3D3}
@media (max-width:900px){.page-hero .wrap{grid-template-columns:1fr}}

/* Gewinne */
.gain{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.gain + .gain{margin-top:clamp(4rem,8vw,6rem)}
.gain.flip > :first-child{order:2}
@media (max-width:900px){.gain,.gain.flip{grid-template-columns:1fr}.gain.flip > :first-child{order:0}}
.gain-copy{display:grid;gap:1.2rem;min-width:0}
.gain-copy h3{font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.03em}
ul.ticks{margin:0;padding:0;list-style:none;display:grid;border-top:1px solid var(--rule)}
ul.ticks li{padding:.75rem 0 .75rem 1.6rem;position:relative;border-bottom:1px solid var(--rule)}
ul.ticks li::before{content:"";position:absolute;left:0;top:1.15rem;width:9px;height:9px;border-radius:50%;background:var(--lila)}
.how{font-size:.9rem;color:var(--muted)}

/* Flows-Liste */
.flows{display:grid;border-top:1px solid var(--text)}
.flow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) 9rem;gap:1.5rem;align-items:baseline;padding-block:1.3rem;border-bottom:1px solid var(--rule)}
.flow h3{font-size:1.5rem}
.flow p{color:var(--soft)}
.flow .when{font-family:var(--f-mono);font-size:.78rem;color:var(--lila);text-align:right}
@media (max-width:820px){.flow{grid-template-columns:1fr;gap:.3rem}.flow .when{text-align:left}}

/* Mini-Dashboard */
.panel{background:#fff;border:1px solid var(--rule);padding:1.3rem;display:grid;gap:1rem;min-width:0;margin:0}
.panel-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.panel-top strong{font-family:var(--f-display);font-weight:500;font-size:1.15rem}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.kpi{display:grid;gap:.1rem;padding-top:.6rem;border-top:2px solid var(--rule)}
.kpi:first-child{border-top-color:var(--lila)}
.kpi span{font-size:.75rem;color:var(--muted)}
.kpi b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.15rem,2.6vw,1.6rem);font-variant-numeric:tabular-nums}
.kpi small{font-family:var(--f-mono);font-size:.7rem;color:var(--ok)}
.kpi small.down{color:var(--lila)}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .axis{fill:var(--muted);font:11px var(--f-mono)}
.chart .line{fill:none;stroke:var(--ink);stroke-width:2}
.chart .area{fill:var(--lila-pale)}
.chart .prev{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4}
.chart .dot{fill:var(--lila);stroke:#fff;stroke-width:2}
.chart .lbl{fill:var(--ink);font:500 12px var(--f-mono)}
.source{font-family:var(--f-mono);font-size:.68rem;color:var(--muted);border-top:1px solid var(--rule);padding-top:.7rem}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.case{display:grid;gap:.5rem;padding-top:1rem;border-top:1px solid var(--text)}
.case h3{font-size:1.5rem}
.case p{color:var(--soft)}
@media (max-width:700px){.cases{grid-template-columns:1fr}}

/* Screenshot-Rahmen */
.frame{padding:clamp(16px,3.4vw,40px);background:radial-gradient(110% 120% at 0% 0%,#8A669F 0%,rgba(140,103,240,0) 60%),linear-gradient(140deg,var(--lila) 0%,#3C005F 70%,var(--ink) 100%);min-width:0}
.frame .shot{box-shadow:0 24px 60px rgba(10,5,30,.5);aspect-ratio:16/10;background:#222}
.frame .shot img{object-fit:cover;object-position:center top;filter:none}
.frame .small{color:#EBE5EF!important;margin-top:.9rem}

/* Split, Person, Unterschiede */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.person{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:center}
@media (max-width:860px){.person{grid-template-columns:1fr}.person .shot{max-width:460px}}
.person-copy{display:grid;gap:1.3rem}
.person-copy blockquote{margin:0;font-family:var(--f-display);font-size:clamp(2rem,3.8vw,3.4rem);line-height:1.05;letter-spacing:-.03em}
.person-copy p{color:var(--soft);max-width:58ch}
.dark .person-copy p{color:#C9C3D3}
.sig{display:flex;align-items:center;gap:.8rem}
.sig .ts{font-size:1.1rem}
.sig b{font-weight:500}.sig span{color:var(--muted)}
.diff{list-style:none;margin:0;padding:0;border-top:1px solid var(--text)}
.diff li{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--rule)}
.diff b{font-family:var(--f-display);font-weight:500;font-size:1.3rem;letter-spacing:-.02em}
.diff span{color:var(--soft)}
@media (max-width:520px){.diff li{grid-template-columns:1fr;gap:.2rem}}

/* Ablauf (Schläge) */
.beats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--text)}
.beats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.beat{display:grid;gap:.9rem;align-content:start;padding:1.6rem 1.5rem 1.9rem 0;border-right:1px solid var(--rule);min-width:0}
.beat + .beat{padding-left:1.5rem}
.beat:last-child{border-right:none}
.beat .bar{display:block;width:4px;height:40px;background:var(--text);border-radius:2px}
.beat:first-child .bar{background:var(--lila);height:56px}
.beat-body{display:grid;gap:.6rem}
.beat-body .eyebrow b{color:var(--lila);font-weight:500}
.beat h3{font-size:1.7rem}
.beat p{color:var(--soft)}
@media (max-width:900px){.beats,.beats.three{grid-template-columns:1fr}.beat,.beat+.beat{padding:1.4rem 0;border-right:none;border-bottom:1px solid var(--rule)}}

/* Baustellen */
.issues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--text)}
.issue{display:grid;gap:1rem;align-content:start;padding:2rem 2rem 2.2rem 0;border-bottom:1px solid var(--rule);min-width:0}
.issue:nth-child(even){padding-left:2rem;padding-right:0;border-left:1px solid var(--rule)}
.issue-head{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start}
.issue-head .num{font-family:var(--f-display);font-size:3.4rem;line-height:.8;color:var(--lila);letter-spacing:-.05em}
.issue-head h3{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.issue dl{margin:0;display:grid;gap:.3rem}
.issue dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.7rem}
.issue dt:first-child{margin-top:0}
.issue dd{margin:0;color:var(--soft)}
.issue dd:last-of-type{color:var(--text);font-weight:500}
@media (max-width:900px){.issues{grid-template-columns:1fr}.issue,.issue:nth-child(even){padding:1.6rem 0;border-left:none}}
ul.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
ul.tags li{font-size:.85rem;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--rule)}

/* Flow-Gruppen (dunkel) */
.flowgroups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 4rem;border-top:1px solid rgba(255,255,255,.35);padding-top:2rem}
.fg h3{font-size:1.8rem;margin-bottom:1rem}
.fg ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.fg li{padding-left:1.2rem;position:relative;color:#C9C3D3}
.fg li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--lila-glow)}
.fg li b{color:#fff;font-weight:500}
@media (max-width:820px){.flowgroups{grid-template-columns:1fr}}

/* Angebote */
.offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--text)}
.offer{display:grid;gap:.8rem;align-content:start;padding:1.6rem 1.4rem 1.9rem;border-right:1px solid var(--rule);min-width:0}
.offer:first-child{padding-left:0}.offer:last-child{border-right:none}
.offer h3{font-size:1.75rem}
.offer p:not(.eyebrow){color:var(--soft)}
.offer.featured h3{color:var(--lila)}
.offer .btn{justify-self:start;margin-top:.4rem}
@media (max-width:1000px){.offers{grid-template-columns:1fr 1fr}.offer:nth-child(2){border-right:none}.offer:nth-child(3){padding-left:0}}
@media (max-width:600px){.offers{grid-template-columns:1fr}.offer,.offer:nth-child(3){padding:1.4rem 0;border-right:none;border-bottom:1px solid var(--rule)}}

/* FAQ */
.faq{border-top:1px solid var(--text)}
.faq details{border-bottom:1px solid var(--rule);padding-block:1.2rem}
.faq summary{cursor:pointer;font-family:var(--f-display);font-size:1.4rem;letter-spacing:-.015em;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--lila)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.7rem;color:var(--soft);max-width:60ch}

/* Taktcheck-Band */
.cta-band{background:var(--lila);color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"1";position:absolute;right:-1vw;bottom:-16vw;font-family:var(--f-display);font-weight:600;font-size:min(52vw,620px);line-height:1;color:rgba(255,255,255,.08);pointer-events:none}
.cta-band .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem 5rem;align-items:end}
.cta-band h2{font-size:clamp(2.6rem,6vw,5.4rem)}
.cta-band .eyebrow{color:#DCCEFF}
.cta-band .card{border-top:1px solid rgba(255,255,255,.5)}
.cta-band .more{border-bottom-color:#fff;color:#fff!important}
@media (max-width:860px){.cta-band .wrap{grid-template-columns:1fr}}
.card{display:grid;gap:1.1rem;border-top:1px solid var(--text);padding-top:1.3rem}
ul.promise{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.92rem}
ul.promise li{display:inline-flex;align-items:center;gap:.45rem}
ul.promise li::before{content:"";width:.85em;height:.45em;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-.15em)}

/* Kontakt */
.addr{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.addr code{font-family:var(--f-mono);font-size:1.05rem;user-select:all;background:var(--mist);padding:.45rem .7rem;border-radius:4px}
.copy{font:500 .82rem var(--f-body);background:none;border:1px solid var(--rule);color:var(--text);padding:.45rem .85rem;border-radius:999px;cursor:pointer}

/* Blog */
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{font:500 .85rem var(--f-body);padding:.5rem .95rem;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--text);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--lila);color:#fff;border-color:var(--lila)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 2rem}
.post-card{display:grid;gap:.9rem;align-content:start;text-decoration:none;min-width:0}
.post-card h3{font-size:1.6rem}
.post-card p{color:var(--soft)}
.post-card:hover h3{color:var(--lila)}
.meta{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;font-family:var(--f-mono);font-size:.72rem;color:var(--muted);letter-spacing:.06em}
.tag{color:var(--lila);text-transform:uppercase;letter-spacing:.12em}
.badge{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:.15rem .45rem;background:var(--lila-pale);color:var(--lila-ink)}
.has-video{display:inline-flex;align-items:center;gap:.35rem}
.has-video::before{content:"";border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.post-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;text-decoration:none;margin-bottom:4rem}
.post-feature h2{font-size:clamp(2rem,4vw,3.4rem)}
.post-feature:hover h2{color:var(--lila)}
@media (max-width:820px){.post-feature{grid-template-columns:1fr}}
.article-head{display:grid;gap:1.3rem;padding-block:clamp(3rem,7vw,5rem) 2.5rem}
.article-head h1{font-size:clamp(2.6rem,6vw,5rem)}
.article-head .lead{max-width:none}
.prose{font-size:1.125rem;line-height:1.75}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:2rem;margin-top:2em}
.prose h3{font-size:1.45rem;margin-top:1.6em}
.prose a{color:var(--lila);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li + li{margin-top:.35em}
.prose blockquote{margin-inline:0;padding-left:1.2rem;border-left:4px solid var(--lila);font-family:var(--f-display);font-size:1.5rem;line-height:1.3}
.prose code{font-family:var(--f-mono);font-size:.88em;background:var(--mist);padding:.1em .35em}
.prose pre{background:var(--mist);padding:1rem;overflow-x:auto}
.prose strong{font-weight:600}
.video{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);color:#fff;margin-block:1.5rem}
.video video,.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .consent{position:absolute;inset:0;display:grid;place-content:center;gap:.9rem;text-align:center;padding:1.5rem}
.video .consent p{font-size:.92rem;max-width:44ch;color:#C9C3D3}
.video .consent .eyebrow{color:var(--lila-glow)}
.video .consent .btn{justify-self:center}
.video .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;filter:grayscale(1)}
.author{display:grid;grid-template-columns:72px 1fr;gap:1rem;align-items:center;border-top:1px solid var(--rule);padding-top:1.5rem;margin-top:3rem}
.author .shot{aspect-ratio:1/1;border-radius:50%}
.author p{font-size:.95rem;color:var(--soft)}
.post-nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem}

/* Rechtstexte */
.legal h2{font-size:1.6rem;margin-top:2rem}
.legal p{margin-top:.6rem;color:var(--soft)}
.note-box{background:var(--lila-pale);padding:1rem 1.2rem;color:var(--lila-ink);font-size:.95rem}

/* Fuß */
footer.site{background:var(--ink);color:#fff}
footer.site .wrap{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:2.5rem;padding-block:4rem 2rem}
footer.site .logo{font-size:2.2rem}
footer.site h4{margin:0 0 .8rem;font:500 .72rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#8E879A}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
footer.site a{text-decoration:none;color:#D9D4E1}
footer.site a:hover{color:#fff}
footer.site li{color:#D9D4E1}
footer.site .claim{color:#B4ADBF;margin-top:1rem;max-width:28ch;font-family:var(--f-display);font-size:1.3rem;line-height:1.25}
footer.site .bottom{grid-column:1/-1;border-top:1px solid var(--rule-dark);padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#8E879A;font-size:.82rem}
@media (max-width:860px){footer.site .wrap{grid-template-columns:1fr 1fr}footer.site .brand{grid-column:1/-1}}

/* Buchungsleiste Handy */
.sticky-cta{display:none}
@media (max-width:700px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:15;align-items:center;justify-content:space-between;gap:.75rem;background:var(--ink);color:#fff;padding:.65rem max(16px,env(safe-area-inset-right,0px)) calc(.65rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .sticky-cta span{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;color:#B4ADBF}
  .sticky-cta .btn{padding:.7rem 1.1rem;font-size:.92rem}
  footer.site{padding-bottom:4.5rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===== Türkis = der Takt der Maschine (automatisch, im Hintergrund). Lila = Mensch, Marke, Handlung. ===== */
:root{--tq:#00A3B0;--tq-ink:#00737D;--tq-glow:#5FE0E8}
.live::before{background:var(--tq-glow);animation-name:pulse-tq}
@keyframes pulse-tq{0%{box-shadow:0 0 0 0 rgba(95,224,232,.65)}70%{box-shadow:0 0 0 9px rgba(95,224,232,0)}100%{box-shadow:0 0 0 0 rgba(95,224,232,0)}}
.metro i:nth-child(n+2){background:#24555B}
.ticker-track span::after{background:var(--tq-glow);opacity:1}
.machine{color:var(--tq-ink)}
.dark .machine{color:var(--tq-glow)}

/* Hero baut sich beim Laden auf */
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
  .hero .lead{animation:rise 1s .15s cubic-bezier(.2,.7,.2,1) both}
  .hero .cta-row{animation:rise 1s .3s cubic-bezier(.2,.7,.2,1) both}
  .hero .shot{animation:zoomout 1.6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{transform:translateY(28px);opacity:.25}to{transform:none;opacity:1}}
  @keyframes zoomout{from{transform:scale(1.12);filter:brightness(.7)}to{transform:none;filter:none}}
}
.hero .shot img{will-change:transform}

/* Scroll-Story: Ein Montag in vier Takten */
.story{position:relative;height:430vh;background:var(--ink);color:#fff}
.story-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 58px);height:calc(100vh - 58px);height:calc(100svh - 58px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(1rem,3vh,2.5rem);max-width:var(--wrap);margin-inline:auto}
.story-media{position:relative;height:min(72vh,640px);overflow:hidden;background:#14121A}
.story-media figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);transition:opacity .8s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.story-media figure img{width:100%;height:100%;object-fit:cover}
.story-media figure.photo img{filter:grayscale(1) contrast(1.12)}
.story-media figure.screen{background:radial-gradient(120% 120% at 100% 100%,rgba(0,163,176,.55),rgba(0,163,176,0) 60%),linear-gradient(140deg,#1A1720,#0E0C12);display:grid;place-items:center;padding:clamp(14px,3vw,36px)}
.story-media figure.screen img{height:auto;max-height:100%;object-fit:contain;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.story[data-step="0"] .story-media figure:nth-child(1),.story[data-step="1"] .story-media figure:nth-child(2),.story[data-step="2"] .story-media figure:nth-child(3),.story[data-step="3"] .story-media figure:nth-child(4){opacity:1;transform:none}
.story-text{display:grid;gap:1.4rem;min-width:0}
.clock{font-family:var(--f-mono);font-size:clamp(3rem,7vw,6.2rem);line-height:1;letter-spacing:-.04em;color:var(--tq-glow);font-variant-numeric:tabular-nums;transition:color .4s ease}
.story[data-step="3"] .clock{color:var(--lila-glow)}
.steps{position:relative;min-height:17rem}
.step{position:absolute;inset:0 0 auto 0;display:grid;gap:.9rem;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.step h3{font-size:clamp(1.9rem,3.4vw,3rem);letter-spacing:-.03em}
.step p{color:#C9C3D3;font-size:1.1rem;max-width:40ch}
.step .who{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tq-glow)}
.step:last-child .who{color:var(--lila-glow)}
.story[data-step="0"] .step:nth-child(1),.story[data-step="1"] .step:nth-child(2),.story[data-step="2"] .step:nth-child(3),.story[data-step="3"] .step:nth-child(4){opacity:1;transform:none}
.beatline{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.beatline i{position:relative;height:4px;background:#2C2834;border-radius:2px;overflow:hidden}
.beatline i::after{content:"";position:absolute;inset:0;background:var(--tq-glow);transform-origin:left;transform:scaleX(var(--f,0))}
.beatline i:last-child::after{background:var(--lila-glow)}
.story-hint{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8E879A}
@media (max-width:860px){
  .story{height:400vh}
  .story-sticky{grid-template-columns:1fr;align-content:start;gap:1rem;padding-top:1rem}
  .story-media{height:38vh}
  .steps{min-height:13.5rem}
}
@media (prefers-reduced-motion:reduce){
  .story{height:auto}.story-sticky{position:static;height:auto}
  .story-media figure{position:relative;opacity:1;transform:none;height:240px;margin-bottom:8px}
  .story-media{height:auto}
  .step{position:static;opacity:1;transform:none;margin-bottom:1.5rem}.steps{min-height:0}
}

/* Satz, der sich beim Scrollen füllt */
.statement{padding-block:clamp(5rem,14vw,11rem)}
.statement p.big{font-family:var(--f-display);font-weight:500;font-size:clamp(2.2rem,5.6vw,5.2rem);line-height:1.05;letter-spacing:-.035em;max-width:18ch}
.statement .w{color:#D9D4E1;transition:color .25s ease}
.statement .w.on{color:var(--text)}
.statement .w.on.m{color:var(--tq-ink)}
.statement .w.on.h{color:var(--lila)}

/* Zahlen der Maschine */
.stats.machine-stats .stat b{color:var(--tq-ink)}
.stats.machine-stats .stat:last-child b{color:var(--lila)}

/* Was im Hintergrund passiert */
.flowviz{width:100%;height:auto;display:block;overflow:visible}
.flowviz .edge{fill:none;stroke:#2C2834;stroke-width:2}
.flowviz .edge.run{stroke:var(--tq);stroke-width:2;stroke-dasharray:6 10;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.flowviz .node rect{fill:#17141D;stroke:#3A3544;stroke-width:1.5}
.flowviz .node.m rect{stroke:var(--tq)}
.flowviz .node.h rect{stroke:var(--lila-glow);fill:#2A1A36}
.flowviz .node text{fill:#fff;font:500 15px var(--f-body)}
.flowviz .node text.s{fill:#8E879A;font:400 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.flowviz .pulse{fill:var(--tq-glow)}
.flowviz .pulse.h{fill:var(--lila-glow)}
.flowviz-wrap{overflow-x:auto;padding-bottom:.5rem}
.flowviz-wrap svg{min-width:880px}
.legend-mh{display:flex;gap:1.6rem;flex-wrap:wrap;font-size:.9rem;color:#C9C3D3;margin-top:1.4rem}
.legend-mh span{display:inline-flex;align-items:center;gap:.5rem}
.legend-mh i{width:12px;height:12px;border-radius:50%;background:var(--tq-glow)}
.legend-mh i.h{background:var(--lila-glow)}

/* Screenshots zoomen beim Scrollen heran */
.zoom{transform:scale(var(--z,1));transform-origin:50% 60%;transition:transform .1s linear}

/* Einblenden beim Scrollen: Ruhezustand bleibt sichtbar */
.js .reveal-pending{transform:translateY(36px);opacity:.35;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s ease}
.js .reveal-pending.in{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.js .reveal-pending{transform:none;opacity:1}}

/* Farbregel überall: Maschine türkis, Mensch lila */
.issue dt:nth-of-type(2){color:var(--tq-ink)}
.issue dt:nth-of-type(3){color:var(--lila)}
.flow .when{color:var(--tq-ink);display:inline-flex;align-items:center;gap:.45rem;justify-content:flex-end}
.flow .when::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tq);box-shadow:0 0 0 3px rgba(0,163,176,.15)}
@media (max-width:820px){.flow .when{justify-content:flex-start}}
.fg li::before{background:var(--tq-glow)}
.chart .line{stroke:var(--tq-ink)}
.chart .area{fill:#DDF4F6}
.chart .dot{fill:var(--lila)}
.js .chart.draw .line{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2s cubic-bezier(.3,.7,.3,1)}
.js .chart.draw.in .line{stroke-dashoffset:0}
.kpi:nth-child(2),.kpi:nth-child(3){border-top-color:#BFE9EC}
.stats.machine-stats .stat:last-child b{color:var(--tq-ink)}
.stat.human b{color:var(--lila)!important}

/* Saubere Beispiel-Ansichten (statt verpixelter Screenshots) */
.mock{background:#14121A;color:#fff;border:1px solid #2C2834;border-radius:8px;padding:clamp(14px,2.4vw,24px);display:grid;gap:1rem;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.45);font-size:.9rem}
.mock-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.mock-top b{font-family:var(--f-display);font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.mock-top span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#8E879A}
.mock-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.mock-kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.mock-kpis div{background:#1A1720;border-radius:6px;padding:.7rem .8rem;display:grid;gap:.2rem;min-width:0}
.mock-kpis small{font-size:.7rem;color:#8E879A}
.mock-kpis b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.7rem);letter-spacing:-.02em;white-space:nowrap}
.mock-kpis b.t{color:var(--tq-glow)}
.mock-kpis b.l{color:var(--lila-glow)}
.mock-rows{list-style:none;margin:0;padding:0;display:grid}
.mock-rows li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) auto;gap:.8rem;align-items:center;padding:.55rem 0;border-top:1px solid #26222E;font-size:.82rem;color:#C9C3D3}
.mock-rows em{font-style:normal;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;white-space:nowrap}
.mock-rows em.ok{color:var(--tq-glow);background:rgba(95,224,232,.1)}
.mock-rows em.warn{color:var(--lila-glow);background:rgba(196,178,207,.14)}
.mock-bars{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:.4rem}
.mock-bars i{flex:1;height:var(--h);background:linear-gradient(180deg,var(--tq),#0B4F56);border-radius:3px 3px 0 0}
.mock-bars i.now{background:linear-gradient(180deg,var(--lila-glow),var(--lila))}
.mock-axis{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.66rem;color:#8E879A}
.story-media figure.screen .mock{max-width:560px}
@media (max-width:600px){.mock-kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))}.mock-rows li{grid-template-columns:minmax(0,1fr) auto}.mock-rows li span:nth-child(2){display:none}}

/* Buchungs-Overlay */
dialog.booking{width:min(1080px,calc(100vw - 32px));height:min(780px,calc(100vh - 32px));height:min(780px,calc(100dvh - 32px));max-width:none;max-height:none;padding:0;border:none;border-radius:14px;background:var(--ink);color:#fff;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.5)}
dialog.booking::backdrop{background:rgba(14,12,18,.72);backdrop-filter:blur(6px)}
dialog.booking[open]{display:grid;grid-template-rows:auto 1fr;animation:pop .35s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{from{transform:translateY(20px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.booking-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--rule-dark)}
.booking-head .eyebrow{color:var(--lila-glow)}
.booking-head h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:.2rem}
.booking-close{width:44px;height:44px;border-radius:50%;border:1px solid #3A3544;background:none;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.booking-close:hover{background:var(--lila);border-color:var(--lila)}
.booking-body{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:0}
.booking-side{padding:1.4rem;border-right:1px solid var(--rule-dark);display:grid;align-content:start;gap:1.2rem}
.booking-side ul.promise{flex-direction:column;align-items:flex-start;gap:.7rem;color:#C9C3D3}
.booking-side .small{color:#8E879A;font-size:.78rem}
.booking-frame{position:relative;background:#fff;min-height:0}
.booking-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.booking-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em}
.booking-fallback{position:absolute;inset:0;display:grid;place-content:center;gap:1.2rem;text-align:center;padding:2rem;background:var(--mist);color:var(--text)}
.booking-fallback p{max-width:38ch;color:var(--soft)}
.booking-fallback .btn{justify-self:center}
html.booking-open{overflow:hidden}
@media (max-width:760px){
  dialog.booking{width:100vw;height:100dvh;border-radius:0}
  .booking-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .booking-side{border-right:none;border-bottom:1px solid var(--rule-dark);padding:.8rem 1.2rem}
  .booking-side ul.promise{flex-direction:row;flex-wrap:wrap}
  .booking-side .small{display:none}
}

/* Ablauf im Blogbeitrag */
.post-flow{background:var(--ink);color:#fff;padding:clamp(1rem,3vw,1.8rem);margin-block:2rem;border-radius:6px}
.post-flow .legend-mh{margin-top:1rem;font-size:.82rem}
.prose .post-flow svg{min-width:860px}
.prose .post-flow{width:min(1120px,calc(100vw - 40px));position:relative;left:50%;transform:translateX(-50%)}
.prose .post-flow svg{min-width:860px}

/* Erster Bildschirm: ruhig, aber sofort klar */
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.48fr);column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(2.2rem,4vw,3.2rem);padding-block:clamp(3rem,7vw,6rem) clamp(1.5rem,3vw,2.2rem);align-items:end}
.hero h1{font-size:clamp(3rem,7.6vw,7.4rem);line-height:.92}
.hero-copy{gap:1.8rem}
.hero .lead{font-size:clamp(1.2rem,1.7vw,1.45rem);max-width:34ch;color:#D9D4E1}
.hero .hint{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#8E879A}
.hero-portrait{margin:0;display:grid;gap:.8rem;min-width:0}
.hero-portrait .shot{aspect-ratio:4/5}
.hero-portrait figcaption{font-size:.85rem;color:#8E879A}
.hero-portrait figcaption b{color:#fff;font-weight:500}
.hero-offers{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-dark)}
.hero-offers a{display:flex;align-items:baseline;gap:1rem;padding:1.3rem 1.5rem 1.4rem 0;text-decoration:none;color:#fff;border-right:1px solid var(--rule-dark)}
.hero-offers a + a{padding-left:1.5rem}
.hero-offers a:last-child{border-right:none}
.hero-offers .n{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;color:var(--lila-glow)}
.hero-offers b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.25rem,1.8vw,1.6rem);letter-spacing:-.02em}
.hero-offers b::after{content:"→";margin-left:.5rem;color:var(--lila-glow);display:inline-block;transition:transform .2s ease}
.hero-offers a:hover b::after{transform:translateX(4px)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-portrait .shot{aspect-ratio:3/2}
  .hero-offers{grid-template-columns:1fr}
  .hero-offers a,.hero-offers a + a{padding:1rem 0;border-right:none;border-bottom:1px solid var(--rule-dark)}
}

/* Farbverlauf: Lila (Mensch) → Türkis (Maschine) */
h1 em,h2 em,.grad{font-style:italic;font-weight:400;background:linear-gradient(95deg,#3C005F 0%,#764C8F 30%,#3B7BD8 65%,#00A3B0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.06em}
.hero h1 em,.page-hero h1 em,.dark h2 em,.petrol h2 em,.story h3 em,.grad.light{background-image:linear-gradient(95deg,#C4B2CF 0%,#B199BF 28%,#8FB8F5 60%,#5FE0E8 100%)}
.lila h2 em,.cta-band h2 em{background-image:linear-gradient(95deg,#FFFFFF 0%,#EBE5EF 45%,#9FF0F5 100%)}
.statement .w.on.h-alt{background:linear-gradient(95deg,#3C005F,#00A3B0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Textmarker */
mark,.hl{color:inherit;background:linear-gradient(100deg,rgba(196,178,207,0) 0%,rgba(196,178,207,.75) 4%,rgba(196,178,207,.75) 96%,rgba(196,178,207,0) 100%) no-repeat 0 92%/100% 66%;padding:0 .14em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.dark mark,.dark .hl,.hero mark,.hero .hl,.page-hero mark,.page-hero .hl,.story mark,.story .hl{background-image:linear-gradient(100deg,rgba(118,76,143,0) 0%,rgba(118,76,143,.85) 4%,rgba(118,76,143,.85) 96%,rgba(118,76,143,0) 100%)}
.lila mark,.lila .hl,.cta-band mark,.cta-band .hl{background-image:linear-gradient(100deg,rgba(42,0,67,0),rgba(42,0,67,.75) 4%,rgba(42,0,67,.75) 96%,rgba(42,0,67,0))}
@media (prefers-reduced-motion:no-preference){
  .js mark.zieh,.js .hl.zieh{background-size:0% 66%;transition:background-size 1.1s cubic-bezier(.3,.7,.2,1) .15s}
  .js mark.zieh.in,.js .hl.zieh.in{background-size:100% 66%}
}

/* Seitenwechsel: Seiten blenden ineinander (moderne Browser, ohne JavaScript) */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .28s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vt-in .42s cubic-bezier(.2,.7,.2,1) both}
  @keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
  header.site{view-transition-name:kopf}
}

/* Handymenü klappt weich auf statt hart einzublenden */
@media (max-width:960px) and (prefers-reduced-motion:no-preference){
  nav.main.open{animation:menu-auf .3s cubic-bezier(.2,.7,.2,1) both}
  nav.main.open a{animation:menu-zeile .4s cubic-bezier(.2,.7,.2,1) both}
  nav.main.open a:nth-child(2){animation-delay:.03s}nav.main.open a:nth-child(3){animation-delay:.06s}nav.main.open a:nth-child(4){animation-delay:.09s}
  nav.main.open a:nth-child(5){animation-delay:.12s}nav.main.open a:nth-child(6){animation-delay:.15s}nav.main.open a:nth-child(7){animation-delay:.18s}
  @keyframes menu-auf{from{opacity:0;transform:translateY(-10px)}}
  @keyframes menu-zeile{from{opacity:0;transform:translateX(-10px)}}
}

/* Buchungsfenster schließt genauso weich, wie es aufgeht */
@media (prefers-reduced-motion:no-preference){
  dialog.booking.zu{animation:pop-zu .22s cubic-bezier(.4,0,1,1) both}
  dialog.booking.zu::backdrop{opacity:0;transition:opacity .22s ease}
  @keyframes pop-zu{to{transform:translateY(14px) scale(.98);opacity:0}}
}

/* Auf Touch-Geräten gibt es kein Hover: Links zeigen ihre Pfeile dauerhaft, Druck gibt Rückmeldung */
@media (hover:none){
  .btn:active,.hero-offers a:active,.post-card:active,nav.main a:active{transform:scale(.98)}
}

/* Zeitspar-Rechner */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.calc-copy{display:grid;gap:1.3rem}
.calc-form{display:grid;gap:1.4rem;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:clamp(1.2rem,3vw,2rem)}
.slider{display:grid;gap:.6rem}
.slider span{display:flex;justify-content:space-between;gap:1rem;font-size:.98rem;color:var(--soft)}
.slider output{font-family:var(--f-display);font-size:1.35rem;color:var(--text);font-variant-numeric:tabular-nums}
.slider input[type=range]{width:100%;accent-color:var(--lila);height:28px;cursor:pointer}
.calc-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;border-top:1px solid var(--rule);padding-top:1.2rem}
.calc-out div{display:grid;gap:.15rem}
.calc-out small{font-size:.8rem;color:var(--muted)}
.calc-out b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc-out .gain-box{grid-column:1/-1;background:var(--lila-pale);border-radius:10px;padding:.9rem 1rem}
.calc-out .gain-box b{color:var(--lila-ink);font-size:clamp(2rem,4vw,2.8rem)}

/* implec-Lila auf Schwarz: 90%-Ton für Buttons, Hover 100% */
.page-hero .btn,.hero .btn,.dark .btn{background:#4F196F;border-color:#4F196F}
.page-hero .btn:hover,.hero .btn:hover,.dark .btn:hover{background:#63337F;border-color:#63337F}
nav.main a.cta:hover{background:#4F196F}

/* Ein einziger Verlauf über den ganzen Satzteil */
.statement .hgroup{background:linear-gradient(95deg,#3C005F 0%,#764C8F 45%,#00A3B0 100%);-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:slice;box-decoration-break:slice}
.statement .hgroup .w{-webkit-text-fill-color:currentColor}
.statement .hgroup .w.on{color:transparent;-webkit-text-fill-color:transparent;background:none}

/* Abläufe als kleine Partitur: Notenlinien, Taktstriche, Noten im 4/4-Takt */
.flowviz .staff{stroke:#2C2834;stroke-width:1;opacity:.9}
.flowviz .bar{stroke:#3A3544;stroke-width:1.5}
.flowviz .bar.end{stroke-width:4}
.flowviz .pulse.eins{filter:drop-shadow(0 0 6px rgba(95,224,232,.7))}
.flowviz .pulse.h.eins{filter:drop-shadow(0 0 6px rgba(177,153,191,.7))}
.post-flow .flowviz .staff{stroke:#2C2834}

/* Leistungsstufen: vier Schläge, die Eins (Taktcheck) betont */
.offers.stufen .offer .bar{display:block;width:4px;height:40px;background:var(--text);border-radius:2px;margin-bottom:.4rem}
.offers.stufen .offer.featured .bar{background:var(--lila);height:56px}
.offers.stufen .offer.featured h3{color:var(--lila)}

.story .measure b{color:var(--lila-glow)}
.story-media figure.screen{padding:clamp(10px,1.6vw,20px)}

/* ===== Bühne: Foto über die volle Breite =====
   Startet leicht eingerückt mit runden Ecken und öffnet sich beim Scrollen auf die ganze Breite.
   Das Bild zoomt dabei langsam heraus. --fx setzt den Bildausschnitt auf schmalen Bildschirmen. */
.buehne{position:relative;display:flex;align-items:flex-end;height:min(92svh,1040px);min-height:520px;background:var(--ink);color:#fff;overflow:hidden;
  --bi:0px;--br:0px;--bz:1}
.buehne-bild{position:absolute;inset:0;clip-path:inset(var(--bi) var(--bi) var(--bi) var(--bi) round var(--br));overflow:hidden}
.buehne-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 38%;
  filter:grayscale(1) contrast(1.1) brightness(.98);transform:scale(var(--bz));transform-origin:50% 45%;will-change:transform}
.buehne-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,12,18,0) 30%,rgba(14,12,18,.45) 58%,rgba(14,12,18,.9) 100%),
             linear-gradient(90deg,rgba(14,12,18,.62) 0%,rgba(14,12,18,.25) 38%,rgba(14,12,18,0) 60%)}
.buehne.rechts .buehne-bild::after{
  background:linear-gradient(180deg,rgba(14,12,18,0) 30%,rgba(14,12,18,.45) 58%,rgba(14,12,18,.9) 100%),
             linear-gradient(270deg,rgba(14,12,18,.7) 0%,rgba(14,12,18,.3) 40%,rgba(14,12,18,0) 62%)}
.buehne.rechts .buehne-text .wrap>*{margin-left:auto;max-width:min(15ch,46%)}
.buehne.rechts .buehne-kicker{max-width:none!important;width:min(46%,15ch*2.6)}
.buehne-text{position:relative;z-index:1;width:100%;padding:0 max(20px,env(safe-area-inset-left,0px)) clamp(2.4rem,6vw,5.2rem)}
.buehne-kicker{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#D8CCDF;margin-bottom:1rem}
.buehne-satz{font-family:var(--f-display);font-weight:500;font-size:clamp(2.3rem,6vw,5.6rem);line-height:.98;letter-spacing:-.035em;max-width:15ch;text-wrap:balance}
.buehne-satz em{font-style:italic;color:var(--lila-glow)}
.js .buehne-text{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .buehne.da .buehne-text{opacity:1;transform:none}
@media (max-width:700px){.buehne{height:82svh;min-height:460px}.buehne-satz{font-size:clamp(2.1rem,10vw,3.2rem)}
  .buehne-bild::after,.buehne.rechts .buehne-bild::after{background:linear-gradient(180deg,rgba(14,12,18,0) 25%,rgba(14,12,18,.55) 55%,rgba(14,12,18,.92) 100%)}
  .buehne.rechts .buehne-text .wrap>*{margin-left:0;max-width:15ch}.buehne.rechts .buehne-kicker{width:auto}}
@media (prefers-reduced-motion:reduce){.js .buehne-text{opacity:1;transform:none}.buehne{--bi:0px!important;--bz:1!important}}
/* Seitenkopf ohne Bild daneben: Text über die ganze Breite, Bild folgt als Bühne */
.page-hero.solo .wrap{grid-template-columns:minmax(0,1fr);padding-bottom:clamp(2.5rem,5vw,4rem)}
.page-hero.solo h1{max-width:16ch}
.page-hero.solo .lead{max-width:56ch}
.person.solo{grid-template-columns:minmax(0,1fr);max-width:860px}

/* ===== Blogbeitrag: Bildtitel, Kurz gesagt, Flow-Screenshots ===== */
.article-head .bildtitel{font-family:var(--f-display);font-style:italic;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--lila);margin:1.2rem 0 .4rem;letter-spacing:-.01em}
.tldr{margin-top:1.6rem;padding:1.2rem 1.4rem;border-left:3px solid var(--lila);background:var(--lila-pale);border-radius:0 10px 10px 0}
.tldr b{display:block;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lila);margin-bottom:.4rem;font-weight:500}
.tldr p{margin:0;color:var(--text)}
.flowshot{margin:2.2rem 0;width:min(100vw - 40px,1100px);margin-left:50%;transform:translateX(-50%)}
.flowshot .lupe-auf{display:block;width:100%;padding:0;border:1px solid var(--rule-dark);border-radius:12px;overflow:hidden;background:#1f1f24;cursor:zoom-in}
.flowshot img{display:block;width:100%;height:auto;opacity:1}
.flowshot figcaption{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--soft);margin-top:.7rem}
.flowshot figcaption span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
dialog.lupe{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(14,12,18,.96);overflow:auto}
dialog.lupe::backdrop{background:rgba(14,12,18,.8)}
dialog.lupe img{display:block;max-width:none;width:max(100%,1800px);height:auto;margin:auto}
dialog.lupe .zu{position:fixed;top:16px;right:16px;z-index:2;background:#fff;color:var(--ink);border:0;border-radius:999px;padding:.6rem 1rem;font:inherit;cursor:pointer}
@media (max-width:700px){.flowshot figcaption{flex-direction:column;gap:.2rem}}

/* ===== Startseite: Zielgruppe, Fallstudie, Passt/Passt nicht, Auswertung ===== */
.hero .kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lila-glow);margin-bottom:1.1rem}
.fallstudie{margin-top:clamp(2.5rem,5vw,4rem);padding:clamp(1.4rem,3vw,2.2rem);border:1px solid var(--rule);border-radius:16px;background:var(--mist)}
.fallstudie .eyebrow{color:var(--lila);margin-bottom:1.2rem}
.fs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.4rem)}
.fs-grid b{display:block;font-family:var(--f-display);font-size:1.5rem;font-weight:500;margin-bottom:.4rem}
.fs-grid p{color:var(--soft);margin:0}
@media (max-width:800px){.fs-grid{grid-template-columns:1fr}}
.passt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem)}
.passt h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:1rem}
.passt-ja{padding:clamp(1.4rem,3vw,2rem);border-radius:16px;background:var(--lila-pale)}
.passt-nein{padding:clamp(1.4rem,3vw,2rem);border-radius:16px;border:1px solid var(--rule)}
.passt-nein ul{margin:0;padding-left:1.1rem;color:var(--soft);display:grid;gap:.6rem}
@media (max-width:800px){.passt{grid-template-columns:1fr}}
.auswertung{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid currentColor;border-top-color:rgba(127,127,127,.3);display:grid;gap:.7rem}
.auswertung .eyebrow{margin:0}
.aw-feld{display:grid;gap:.35rem;font-size:.9rem}
.aw-feld input{font:inherit;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--rule);background:#fff;color:var(--text)}
.aw-ok{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;line-height:1.4}
.aw-ok input{margin-top:.2rem}
.aw-mail{display:grid;gap:.6rem}
.aw-status:empty{display:none}
.lila .auswertung a{color:inherit}
.aw-mail[hidden]{display:none}
.lila .auswertung .btn{background:#fff;color:var(--lila);border-color:#fff}
.aw-ok span{flex:1}