/* DLS landing pages: six scenes built from the logo's module grid (88 units, 24 gap, one cut corner). */
.story {
  --ink:#202625; --night:#151a19; --sage:#e7ebe6; --sage-line:#b9c4bc; --muted:#5b645f;
  --rust:#a84127; --rust-logo:#be5032; --content:1360px; --header:92px;
  --display:clamp(3.2rem,8vw,9.5rem); --title:clamp(2.6rem,6.2vw,6.6rem);
  --cut:clamp(1.6rem,2.6vw,2.6rem); --ease-out:cubic-bezier(.22,1,.36,1);
  color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased;
}
.story .wrap { width:min(calc(100% - 8rem),var(--content)); }
.story h1,.story h2 { font-weight:600; line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
.story h1 { font-size:var(--display); }
.story h2 { font-size:var(--title); }
.story p { line-height:1.7; }
.story ::selection { background:#edc3b5; color:var(--ink); }
.story main:focus { outline:none; }
.story a:focus-visible { outline:3px solid var(--rust); outline-offset:5px; }
.line { display:block; overflow:hidden; padding-block:.08em .2em; margin-block:-.08em -.2em; }
.line > span { display:block; }
.line--accent { color:var(--rust-logo); }

/* Header and buttons */
.story .site-header { height:var(--header); }
.story .logo { width:112px; height:auto; }
.story .header-nav { gap:2.2rem; font-weight:600; }
.story .button { background:var(--rust); border-color:var(--rust); color:#fff; min-height:54px; padding:.85rem 1.5rem; font-size:.88rem; font-weight:650; position:relative; isolation:isolate; overflow:hidden; transition:transform .2s var(--ease-out);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,0 100%); padding-right:2rem; }
.story .button::before { content:''; position:absolute; inset:0; z-index:-1; background:#8c3520; transform:scaleX(0); transform-origin:right; transition:transform .25s var(--ease-out); }
.story .button--light { background:#fff; border-color:#fff; color:var(--ink); }
.story .button--light::before { background:#f1ddd6; }
.story .button:active { transform:scale(.97); }
.story .text-link { display:inline-block; font-size:.9rem; font-weight:700; text-decoration-thickness:1px; text-underline-offset:.3em; }
@media (hover:hover) and (pointer:fine) { .story .button:hover::before { transform:scaleX(1); transform-origin:left; } }

/* Scenes share one canvas; each stage reserves the space a Nik may use. */
.scene { position:relative; margin:0; overflow:clip; }
.nik-slot { position:relative; pointer-events:none; }
.niks-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; opacity:0; transition:opacity .4s; }
.niks-canvas[data-state=ready] { opacity:1; }
.formation { display:block; width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1.4; stroke-dasharray:4 6; vector-effect:non-scaling-stroke; }

/* 1 Hero: the Niks are the logo. */
.scene-hero { background:var(--night); color:#fff; }
.hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.58fr); grid-template-rows:1fr auto auto 1.2fr; column-gap:clamp(2rem,5vw,6rem); min-height:calc(100svh - var(--header)); }
.hero-grid h1 { grid-column:1; grid-row:2; }
.hero-intro { grid-column:1; grid-row:3; display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.5rem; margin-top:2.6rem; }
.story .hero-intro p { color:#b8c3bd; max-width:30ch; font-size:clamp(.95rem,1.2vw,1.08rem); }
.hero-stage { grid-column:2; grid-row:1 / -1; color:#ffffff38; display:grid; align-content:center; }
.hero-stage .formation { width:min(100%,340px); justify-self:center; margin-bottom:12svh; }
.scroll-cue { position:absolute; left:0; bottom:2rem; font-size:.78rem; color:#a9b5af; text-decoration:none; padding-top:.6rem; border-top:1px solid #5e6b65; min-width:9rem; }

/* 2 Challenge: a sticky stage where the Niks tidy a cluttered site. */
.scene-challenge { background:var(--sage); }
.sticky-stage { position:relative; }
.challenge-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(2rem,6vw,7rem); align-items:center; padding-block:6rem; }
.challenge-copy h2 { display:grid; font-size:clamp(2.4rem,4.6vw,5rem); }
.challenge-copy .state--after { color:var(--rust-logo); margin-top:.3em; }
.challenge-copy p { margin-top:2rem; color:var(--muted); max-width:40ch; font-size:.95rem; }
.mock { position:relative; background:#fff; padding:0 1.5rem 1.5rem; --nik-room:84px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  background-image:linear-gradient(var(--sage) 1px,transparent 1px),linear-gradient(90deg,var(--sage) 1px,transparent 1px); background-size:44px 44px; }
.mock-bar { display:flex; align-items:center; gap:.4rem; height:2.6rem; margin-inline:-1.5rem; padding-inline:1rem; border-bottom:1px solid var(--sage); background:#fff; font-size:.72rem; color:#8a948e; }
.mock-bar i { width:.55rem; height:.55rem; background:var(--sage-line); }
.mock-bar span { margin-left:1rem; }
.tiles { list-style:none; margin:0; padding:var(--nik-room) 0 0; display:grid; grid-template-columns:1fr 1fr; gap:var(--nik-room) 1rem; }
.tile { display:grid; align-content:end; gap:.3rem; min-height:7rem; padding:1rem 1.1rem; background:var(--ink); color:#fff; }
.tile:nth-child(2) { background:var(--rust-logo); }
.tile s { font-size:.78rem; color:#c9d1cc; text-decoration-thickness:1px; }
.tile b { font:600 clamp(1.05rem,1.5vw,1.35rem)/1.15 Titillium,sans-serif; }
.tile:nth-child(2) s { color:#f6d9cf; }
.mock .nik-slot { position:absolute; inset:2.6rem 0 0; }

/* 3 Statement */
.scene-statement { background:#fff; padding-block:8rem; }
.statement-grid { display:grid; grid-template-columns:1fr minmax(240px,.36fr); gap:2rem 6%; align-items:end; }
.statement-grid h2 { font-size:var(--display); }
.statement-aside { border-top:1px solid var(--sage-line); }
.statement-stage { height:200px; }
.statement-aside p { color:var(--muted); font-size:.92rem; margin-bottom:1.5rem; }

/* 4 + 5 Horizontal scenes. Without the live mode they are ordinary stacked sections. */
.scene-services { background:#fff; }
.scene-process { background:var(--sage); }
.h-track { width:min(calc(100% - 8rem),var(--content)); margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding-block:7rem; }
.panel-intro { grid-column:1 / -1; margin-bottom:2rem; }
.panel-intro p { margin-top:1.8rem; color:var(--muted); max-width:44ch; font-size:.95rem; }
.panel-intro .text-link { margin-top:1.4rem; }
.card { position:relative; display:flex; flex-direction:column; padding:2rem 2rem 2.4rem; background:var(--sage); min-height:19rem;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,calc(100% - var(--cut)) var(--cut),100% var(--cut),100% 100%,0 100%); }
.card-index { font:400 clamp(3rem,5vw,4.6rem)/1 Titillium,sans-serif; color:var(--rust-logo); margin-bottom:auto; padding-bottom:2.5rem; }
.card h3 { font-size:clamp(1.6rem,2.2vw,2.2rem); }
.card p { margin-top:.9rem; font-size:.92rem; color:var(--muted); }
.steps { grid-column:1 / -1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.step { position:relative; padding-top:2rem; border-top:1px solid var(--sage-line); }
.step-dot { display:none; }
.step-number { display:block; color:var(--rust-logo); font:400 2.4rem/1 Titillium,sans-serif; margin-bottom:1rem; }
.step h3 { font-size:clamp(1.5rem,2vw,1.9rem); }
.step p { margin-top:.8rem; font-size:.9rem; color:var(--muted); }
.floor,.stage-slot,.h-hint { display:none; }

.h-scene.is-horizontal .sticky-stage { position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:clip; }
.h-scene.is-horizontal .h-track { width:max-content; margin:0; display:flex; align-items:stretch; gap:clamp(1.25rem,2.5vw,2.5rem); padding:0 max(4rem,calc((100vw - var(--content)) / 2)); margin-bottom:var(--track-gap); will-change:transform; }
.scene-services.is-horizontal .h-track { flex-direction:row-reverse; }
.h-scene.is-horizontal .h-panel { flex:none; }
.h-scene.is-horizontal .panel-intro { width:min(86vw,780px); margin:0; align-self:center; }
.h-scene.is-horizontal .card { width:min(78vw,400px); }
.scene-services.is-horizontal { --track-gap:calc(14svh + 70px); }
.scene-services.is-horizontal .floor { display:block; position:absolute; left:0; right:0; bottom:14svh; height:1px; background:var(--sage-line); }
.h-scene.is-horizontal .stage-slot { display:block; position:absolute; inset:0; }
.h-scene.is-horizontal .h-hint { display:block; position:absolute; right:max(4rem,calc((100vw - var(--content)) / 2)); bottom:2rem; margin:0; font-size:.75rem; color:var(--muted); }
.scene-process.is-horizontal { --track-gap:0px; }
.scene-process.is-horizontal .steps { display:flex; gap:0; position:relative; }
.scene-process.is-horizontal .steps::before { content:''; position:absolute; left:0; right:0; top:7.5rem; height:1px; background:var(--sage-line); }
.scene-process.is-horizontal .step { width:min(70vw,360px); padding:9rem 2.5rem 0 0; border:0; }
.scene-process.is-horizontal .step-dot { display:block; position:absolute; left:0; top:calc(7.5rem - 7px); width:15px; height:15px; background:var(--rust-logo); }

/* 6 Closing: the Niks rebuild the mark beside the request. */
.scene-closing { background:var(--rust); color:#fff; padding-block:7rem 5rem; }
.closing-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.48fr); gap:3rem clamp(2rem,6vw,7rem); align-items:center; }
.closing-grid h2 { font-size:var(--title); }
.closing-stage { color:#ffffff4d; padding-top:30%; }
.closing-stage .formation { width:min(100%,300px); margin-inline:auto; }
.closing-bottom { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:end; gap:2rem 3rem; padding-top:2rem; border-top:1px solid #ffffff55; }
.closing-bottom p { max-width:40ch; font-size:.95rem; }
.story .scene-hero a:focus-visible,.story .scene-closing a:focus-visible { outline-color:#fff; }
.story .footer { padding-block:3rem; border:0; background:#fff; }

/* Snap points for the single magnetic snap in motion.js; they never affect layout. */
.snap-marker { position:absolute; left:0; width:1px; height:1px; pointer-events:none; visibility:hidden; }
.scene-challenge.is-live { height:260svh; }
.scene-challenge.is-live .sticky-stage { position:sticky; top:0; height:100svh; display:flex; align-items:center; }
.scene-challenge.is-live .challenge-grid { padding-block:0; }
.scene-challenge.is-live .challenge-copy h2 .state { grid-area:1 / 1; }
.scene-challenge.is-live .state--after { margin-top:0; }
.scene-challenge.is-live .tile s,.scene-challenge.is-live .tile b { grid-area:1 / 1; align-self:end; }
.scene-challenge.is-live .tile s { font:600 clamp(1.05rem,1.5vw,1.35rem)/1.15 Titillium,sans-serif; text-decoration:none; color:inherit; }

@media (max-width:1100px) {
  .story .wrap,.h-track { width:calc(100% - 5rem); }
}
@media (max-width:800px) {
  .story { --header:80px; --display:clamp(3rem,12vw,5.5rem); --title:clamp(2.4rem,10vw,4.2rem); }
  .story .wrap,.h-track { width:calc(100% - 3rem); }
  .story .site-header { height:var(--header); padding:0; }
  .hero-grid { grid-template-columns:1fr; grid-template-rows:2.5rem auto auto minmax(220px,1fr); }
  .hero-stage { grid-column:1; grid-row:4; align-content:start; padding-top:2rem; }
  .hero-stage .formation { width:min(52%,190px); margin:0 0 0 auto; }
  .hero-intro { margin-top:1.8rem; }
  .scroll-cue { bottom:1.4rem; }
  .challenge-grid { grid-template-columns:1fr; gap:1.6rem; padding-block:4rem; }
  .challenge-copy h2 { font-size:clamp(2rem,8vw,3rem); }
  .challenge-copy p { margin-top:1rem; font-size:.88rem; }
  .mock { --nik-room:58px; padding:0 .9rem .9rem; }
  .mock-bar { margin-inline:-.9rem; }
  .tile { min-height:5rem; padding:.75rem; gap:.6rem; }
  .tile b,.scene-challenge.is-live .tile s { font-size:1rem; }
  .scene-statement { padding-block:5rem; }
  .statement-grid { grid-template-columns:1fr; }
  .statement-stage { height:140px; }
  .h-track { grid-template-columns:1fr; padding-block:5rem; }
  .card { min-height:0; }
  .card-index { padding-bottom:1.5rem; }
  .steps { grid-template-columns:1fr 1fr; gap:2.5rem 1.5rem; }
  .h-scene.is-horizontal .h-track { padding-inline:1.5rem; }
  .h-scene.is-horizontal .h-hint { right:1.5rem; }
  .scene-services.is-horizontal { --track-gap:calc(10svh + 56px); }
  .scene-services.is-horizontal .floor { bottom:10svh; }
  .scene-process.is-horizontal .steps::before { top:6rem; }
  .scene-process.is-horizontal .step { padding-top:7.5rem; }
  .scene-process.is-horizontal .step-dot { top:calc(6rem - 7px); }
  .scene-closing { padding-block:5rem 4rem; }
  .closing-grid { grid-template-columns:1fr; }
  .closing-stage { padding-top:8rem; }
  .closing-stage .formation { width:min(50%,200px); margin:0 0 0 auto; }
  .closing-bottom { flex-direction:column; align-items:start; }
}
@media (max-width:500px) {
  .story .wrap,.h-track { width:calc(100% - 2.5rem); }
  .story .logo { width:96px; }
  .story .header-inner { gap:1rem; }
  .story .header-nav .button { min-height:44px; padding:.6rem 1.2rem .6rem .8rem; font-size:.72rem; }
  .steps { grid-template-columns:1fr; }
}
@media (max-height:620px) and (min-width:801px) {
  .challenge-copy p { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .story .button,.story .button::before { transition:none; }
}
.step h3 { transition:color .25s; }
.step.is-current h3 { color:var(--rust-logo); }
/* Track ends leave room so the first and last snap targets can reach their anchor. */
.scene-services.is-horizontal .h-track { padding-left:max(1.5rem,calc(50vw - min(78vw,400px) / 2)); }
.scene-process.is-horizontal .h-track { padding-right:max(1.5rem,calc(62vw - min(70vw,360px))); }
.formation { transition:opacity .6s; }
.niks-canvas[data-intro=done] ~ main .formation { opacity:0; }
/* One system, six topics: only the light ground and the night tone shift per page. */
.story.mini-apps { --sage:#e4e8ee; --sage-line:#b5bfcb; --night:#141820; }
.story.ki-agenten { --sage:#ebe8e2; --sage-line:#c6beb1; --night:#1a1816; }
.story.grafikdesign { --sage:#efe8e0; --sage-line:#cdbfae; --night:#1c1716; }
.story.ki-medien { --sage:#e8e5ec; --sage-line:#c0b8ca; --night:#17151c; }
.story.hosting { --sage:#e2eae9; --sage-line:#b2c3c1; --night:#121a1a; }