/* ROSPROM · Gemeinsames Stylesheet für alle Seiten.
   Layout: Sabre-Rhythmus in Hell. Weißes Papier, schwarze Schrift, gelber Marker als einziger Akzent;
   bewegte Bilder entstehen per Code (Canvas/SVG). Bewusst nur ein helles Thema (Wunsch des Inhabers). */
:root{
  color-scheme:light;
  --paper:#ffffff; --surface:#ffffff; --surface-alt:#f4f4f1; --tint:#fbf5cf;
  --ink:#1c1d1b; --muted:#56574f; --line:#e1e1dc; --grid:#ececE8;
  --marker:#f3de3a; --on-marker:#0f0f0f;
  --btn:#1c1d1b; --on-btn:#ffffff; --btn-alt:#ecece8; --on-btn-alt:#1c1d1b;
  --focus:#9e7409; --shadow:rgb(28 29 27 / .18);
  --s1:#3b5fc0; --s2:#a87b00;
  --font-display:"Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-text:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --max:1440px; --gap:24px; --tear:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:max(16px, env(safe-area-inset-left, 0px), 5vw);
  --gutter-r:max(16px, env(safe-area-inset-right, 0px), 5vw);
}

*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--paper); color:var(--ink); font:400 1.125rem/1.55 var(--font-text); -webkit-font-smoothing:antialiased; overflow-x:clip}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:30; background:var(--paper)}
html:not(.en) [data-l="en"], html.en [data-l="de"]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
h1,h2,h3{font-family:var(--font-display); font-weight:500; letter-spacing:-.03em; text-wrap:balance; margin:0}
p{margin:0; text-wrap:pretty}
mark{background:var(--marker); color:var(--on-marker); padding:0 .12em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.wrap{max-width:var(--max); margin-inline:auto; padding-left:var(--gutter); padding-right:var(--gutter-r)}
.grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gap)}
.eyebrow{font-family:var(--font-display); font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase}
.muted{color:var(--muted)}
.tag{display:inline-block; font-family:var(--font-display); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid currentColor; padding:.15em .5em; opacity:.8}

.tear{-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--tear) 100%;
      mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--tear) 100%;
      padding-bottom:calc(var(--tear) / 2)}

/* Buttons */
.btn{position:relative; display:inline-flex; align-items:center; min-height:46px; padding:12px 48px 12px 16px; font:600 1rem/1.2 var(--font-text);
     text-decoration:none; background:var(--btn); color:var(--on-btn); border:0; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease)}
.btn::after{content:"→"; position:absolute; right:16px; font-family:var(--font-display); font-weight:500; transition:transform .25s var(--ease)}
.btn:hover{background:var(--marker); color:var(--on-marker)}
.btn:hover::after{transform:translateX(4px)}
.btn--alt{background:var(--btn-alt); color:var(--on-btn-alt)}
.btn--marker{background:var(--marker); color:var(--on-marker)}
.btn--marker:hover{background:var(--ink); color:var(--paper)}
.textbtn{font:600 .9375rem/1.2 var(--font-text); background:none; border:0; padding:6px 0; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:5px}
.more{font-weight:600; text-decoration:none; display:inline-flex; gap:8px; align-items:center; background:linear-gradient(var(--marker),var(--marker)) 0 100%/100% 3px no-repeat; padding-bottom:2px; transition:background-size .3s var(--ease)}
.more:hover{background-size:100% 100%}
.more::after{content:"→"; font-family:var(--font-display)}

/* Kopfzeile */
.site-head{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:var(--paper); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:clamp(16px,3vw,40px); min-height:72px}
.logo{display:block; color:var(--ink); line-height:0}
.logo svg{width:132px; height:auto}
.nav{display:flex; gap:clamp(14px,2vw,30px); margin-left:auto}
.nav a{text-decoration:none; font-size:1rem; background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat; padding-bottom:4px; transition:background-size .3s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{background-size:100% 2px}
.nav a[aria-current="page"]{background-image:linear-gradient(var(--marker),var(--marker)); background-size:100% 4px}
.lang{font-family:var(--font-display); font-size:.8125rem; background:none; border:1px solid var(--line); color:inherit; padding:6px 10px; cursor:pointer}
.lang:hover{border-color:currentColor}
.site-head .btn{min-height:42px; font-size:.9375rem}
.menu-btn{display:none; background:none; border:1px solid var(--line); width:42px; height:42px; cursor:pointer; color:var(--ink); place-items:center}
.menu-btn svg{display:block}
.menu-btn .i-x{display:none}
html.menu-open .menu-btn .i-x{display:block}
html.menu-open .menu-btn .i-bars{display:none}

/* Startseiten-Hero */
.hero{position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line)}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-2; display:block}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .8) 46%, rgb(255 255 255 / 0) 78%)}
.hero__top{padding-top:clamp(40px,6vw,88px)}
.hero__track-wrap{overflow:hidden; margin-block:clamp(20px,3.4vw,48px); padding-block:.06em}
.hero__track{display:flex; width:max-content; animation:run 34s linear infinite; font-family:var(--font-display); font-weight:500; font-size:clamp(3.4rem, 10.5vw, 10rem); line-height:1; letter-spacing:-.06em; white-space:nowrap}
.hero__track span{padding-right:.3em}
.hero__track b{font-weight:500; background:var(--marker); color:var(--on-marker); padding:0 .08em; margin-right:.3em; align-self:center; line-height:.95}
.hero__body{padding-bottom:clamp(64px,8vw,112px); align-items:end}
.hero h1{grid-column:1 / span 7; font-size:clamp(1.9rem, 2.9vw + .6rem, 3.4rem); line-height:1.1}
.hero__side{grid-column:9 / span 4; display:flex; flex-direction:column; gap:24px}
.hero__side .lead{font-size:1.1875rem; line-height:1.45; color:var(--muted)}
.hero__btns{display:flex; flex-wrap:wrap; gap:10px}
.motion-btn{position:absolute; right:var(--gutter-r); bottom:20px; width:40px; height:40px; display:grid; place-items:center; background:var(--paper); color:var(--ink); border:1px solid var(--line); cursor:pointer}
.motion-btn:hover{border-color:var(--ink)}
.motion-btn .i-play{display:none}
html.is-paused .motion-btn .i-play{display:block}
html.is-paused .motion-btn .i-pause{display:none}

/* Unterseiten-Kopf */
.page-hero{background:var(--surface-alt); border-bottom:1px solid var(--line); overflow:hidden}
.page-hero .grid{padding-block:clamp(48px,7vw,104px) clamp(48px,6vw,88px); align-items:end}
.page-hero__text{grid-column:1 / span 7; display:flex; flex-direction:column; gap:20px}
.crumbs{font-size:.875rem; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap}
.crumbs a{text-decoration:none} .crumbs a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(2.2rem, 4vw + .6rem, 4.6rem); line-height:1.06}
.page-hero .lead{font-size:1.25rem; line-height:1.45; max-width:34em; color:var(--muted)}
.page-hero__art{grid-column:9 / span 4; align-self:stretch; min-height:220px; position:relative}
.page-hero__art canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

/* Laufband */
.strip{background:var(--surface); border-bottom:1px solid var(--line); overflow:hidden}
.strip .wrap{display:flex; align-items:center; gap:32px; min-height:96px}
.strip__label{flex:none; font-size:1rem; max-width:13em}
.marquee{flex:1; min-width:0; overflow:hidden; -webkit-mask:linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000); mask:linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000)}
.marquee__track{display:flex; gap:56px; width:max-content; animation:run 38s linear infinite; font-family:var(--font-display); font-size:clamp(1.25rem,1.6vw + .6rem,2rem); letter-spacing:-.02em; white-space:nowrap}
.marquee__track span{color:var(--muted)}
@keyframes run{to{transform:translateX(-50%)}}
html.is-paused .hero__track, html.is-paused .marquee__track, html.is-paused .flow__track::after, html.is-paused .prompt__text::after{animation-play-state:paused}

/* Abschnitte */
.section{padding-block:clamp(64px,8vw,120px)}
.section--alt{background:var(--surface-alt); border-block:1px solid var(--line)}
.section-head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); margin-bottom:clamp(32px,4vw,56px); align-items:end}
.section-head > div{grid-column:1 / span 7; display:flex; flex-direction:column; gap:16px}
.section-head h2{font-size:clamp(1.8rem, 2.2vw + 1rem, 3rem); line-height:1.12}
.section-head > p, .section-head > .side{grid-column:9 / span 4; font-size:1.125rem}

/* Mosaik */
.mosaic{padding-block:clamp(64px,8vw,120px) clamp(48px,6vw,96px); overflow:hidden}
.mosaic__stage{position:relative; aspect-ratio:16/10; max-width:100%; margin-top:clamp(56px,8vw,112px)}
.tile{position:absolute; left:calc(var(--l) * 1%); top:calc(var(--t) * 1%); width:calc(var(--w) * 1%); container-type:inline-size;
      transition:scale .55s var(--ease), rotate .55s var(--ease), filter .55s var(--ease); will-change:translate}
.tile:hover{scale:1.05; rotate:-1.2deg; z-index:6; filter:drop-shadow(0 22px 28px var(--shadow))}
.tile:has(.t-word){pointer-events:none}
.tile__cap{font-family:var(--font-display); font-size:max(10px, 4.4cqw); letter-spacing:.06em; text-transform:uppercase}
.t-dither{background:var(--ink); color:var(--paper)}
.t-dither canvas{display:block; width:100%; aspect-ratio:4/5; image-rendering:pixelated}
.t-dither .tile__cap{display:block; padding:8px 10px}
.t-prompt{background:var(--surface); border:1px solid var(--line); padding:max(14px,5cqw); box-shadow:0 1px 0 var(--line)}
.t-prompt .tile__cap{display:block; margin-bottom:max(8px,3cqw); color:var(--muted)}
.t-prompt p{font-family:var(--font-display); font-size:max(12px, 4.6cqw); line-height:1.4; letter-spacing:-.01em}
.t-product{background:var(--surface); border:1px solid var(--line)}
.t-product svg{display:block; width:100%; height:auto; background:var(--surface-alt)}
.t-product .meta{padding:max(10px,5cqw); display:grid; gap:4px; font-family:var(--font-display); font-size:max(11px, 5.4cqw)}
.t-product .meta span:last-child{font-size:max(10px,4.4cqw); color:var(--muted)}
.bag-body,.box-l{fill:var(--ink)} .bag-label,.box-t{fill:var(--marker)} .bag-line{fill:var(--on-marker)} .bag-valve{fill:var(--surface-alt)} .box-r{fill:var(--muted)} .box-tape{fill:var(--on-marker); opacity:.25}
.t-word{color:var(--ink)}
.t-word svg{display:block; width:100%; height:auto}
.t-json{background:var(--surface-alt); color:var(--ink); border:1px solid var(--line); padding:max(14px,5cqw); margin:0; font:400 max(11px, 4.3cqw)/1.6 var(--font-display); white-space:pre; overflow:hidden}
.t-json i{font-style:normal; background:var(--marker); color:var(--on-marker)}
.t-check{background:var(--marker); color:var(--on-marker); aspect-ratio:1; display:flex; flex-direction:column; justify-content:space-between; padding:max(12px,8cqw)}
.t-check svg{width:42%; height:auto}
.t-check .tile__cap{font-size:max(10px,6cqw)}
.t-receipt{background:var(--surface); border:1px solid var(--line); border-bottom:0; padding:max(12px,6cqw) max(12px,6cqw) calc(max(12px,6cqw) + var(--tear) / 2); font-family:var(--font-display); font-size:max(10px, 4.6cqw); line-height:1.6; font-variant-numeric:tabular-nums}
.t-receipt .r{display:flex; justify-content:space-between; gap:8px}
.t-receipt .r span:first-child{color:var(--muted)}
.t-receipt hr{border:0; border-top:1px dashed var(--line); margin:6px 0}
.t-box{background:var(--surface-alt); padding:max(10px,8cqw) max(10px,8cqw) max(10px,6cqw)}
.t-box svg{display:block; width:78%; margin-inline:auto; height:auto}
.t-box .tile__cap{display:block; text-align:center; margin-top:6px; font-size:max(10px,6cqw)}

/* Scroll-Text: Weiß wird Gelb */
.shift{background:var(--marker); color:var(--on-marker); padding-block:clamp(80px,11vw,168px); transition:background .8s var(--ease)}
html.js .shift:not(.is-on){background:var(--paper); color:var(--ink)}
.shift .eyebrow{margin-bottom:28px; opacity:.75}
.shift__text{font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem, 2.5vw + .8rem, 3.2rem); line-height:1.2; letter-spacing:-.035em; max-width:24em; text-wrap:pretty}
.shift mark{background:var(--ink); color:var(--paper)}
.w{transition:opacity .35s linear}
html.js .shift .w{opacity:.2}
html.js .shift .w.lit{opacity:1}

/* Agentic Commerce erklärt + Demo */
.explain .grid{align-items:start}
.explain__text{grid-column:1 / span 5; display:flex; flex-direction:column; gap:20px}
.explain__text h2{font-size:clamp(1.8rem, 2.2vw + 1rem, 3rem); line-height:1.12}
.explain__text > p{font-size:1.1875rem; max-width:34em}
.flow{display:grid; gap:22px; margin-top:12px}
.flow__row{display:grid; gap:10px}
.flow__chips{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-family:var(--font-display); font-size:.8125rem}
.flow__chips span{border:1px solid var(--line); padding:5px 9px; background:var(--surface)}
.flow__chips i{font-style:normal; color:var(--muted)}
.flow__row--ai .flow__chips span{background:var(--marker); color:var(--on-marker); border-color:var(--marker)}
.flow__track{position:relative; height:2px; background:var(--line)}
.flow__track::after{content:""; position:absolute; top:-4px; left:0; width:10px; height:10px; background:var(--ink); animation:travel var(--dur) var(--ease) infinite}
.flow__row--ai .flow__track::after{background:var(--marker); outline:1px solid var(--ink)}
@keyframes travel{0%{left:0} 75%,100%{left:calc(100% - 10px)}}
.demo{grid-column:7 / span 6; display:grid; gap:18px}
.prompt{background:var(--surface); border:1px solid var(--line); padding:24px 26px}
.prompt__label{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.prompt__text{font-family:var(--font-display); font-size:clamp(1rem, .6vw + .8rem, 1.25rem); line-height:1.45; letter-spacing:-.01em; min-height:4.35em}
.prompt__text::after{content:""; display:inline-block; width:.55em; height:1.05em; margin-left:.15em; vertical-align:-.15em; background:var(--ink); animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.demo__arrow{font-family:var(--font-display); font-size:1.75rem; color:var(--muted); line-height:1; padding-left:24px}
.receipt{background:var(--surface); border:1px solid var(--line); border-bottom:0; padding:26px 28px calc(26px + var(--tear) / 2); font-family:var(--font-display); font-size:.875rem; line-height:1.55; font-variant-numeric:tabular-nums}
.receipt__head{display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px dashed var(--line); margin-bottom:12px}
.receipt__head svg{width:92px; height:auto; color:var(--ink)}
.receipt.printing{animation:feed .7s var(--ease) both}
.receipt.printing .rows > *{animation:print .4s var(--ease) both; animation-delay:calc(var(--i, 0) * 70ms + 250ms)}
@keyframes feed{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes print{from{opacity:0; transform:translateY(-6px)}}
.demo__foot{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.875rem}
.rows{display:grid; grid-template-columns:minmax(min-content,1fr) minmax(0,max-content); column-gap:16px; row-gap:4px; margin:0}
.rows dt{color:var(--muted)} .rows dd{margin:0; text-align:right; overflow-wrap:anywhere}
.rows .sep{grid-column:1 / -1; border-top:1px dashed var(--line); margin-block:8px}
.rows .total{font-weight:600; font-size:1.05rem; color:var(--ink)}

/* Karten (Leistungen, Blog) */
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap:var(--gap)}
.cards--4{grid-template-columns:repeat(4, minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.card{position:relative; display:flex; flex-direction:column; gap:14px; text-decoration:none; background:var(--surface); border-top:3px solid var(--ink); padding-top:20px; transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-6px)}
.card__no{font-family:var(--font-display); font-size:2.25rem; line-height:1; letter-spacing:-.04em; align-self:flex-start; padding:0 .12em; transition:background .3s}
.card:hover .card__no{background:var(--marker)}
.card h3{font-size:1.25rem; line-height:1.25}
.card p{font-size:1rem; color:var(--muted)}
.card .more{align-self:flex-start; font-size:.9375rem; margin-top:auto}
.post{display:flex; flex-direction:column; gap:14px; text-decoration:none}
.post__cover{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-alt)}
.post__cover canvas{position:absolute; inset:0; width:100%; height:100%; display:block; transition:scale .7s var(--ease)}
.post:hover .post__cover canvas{scale:1.06}
.post__meta{display:flex; gap:12px; flex-wrap:wrap; font-family:var(--font-display); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.post h3{font-size:clamp(1.2rem, .6vw + 1rem, 1.5rem); line-height:1.2; background:linear-gradient(var(--marker),var(--marker)) 0 100%/0 40% no-repeat; transition:background-size .45s var(--ease); align-self:flex-start}
.post:hover h3{background-size:100% 40%}
.post p{font-size:1rem; color:var(--muted)}
.post--lead{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--gap); align-items:center}
.post--lead .post__body{display:flex; flex-direction:column; gap:14px}
.post--lead h3{font-size:clamp(1.6rem, 1.6vw + 1rem, 2.5rem)}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px}
.chip{font-family:var(--font-display); font-size:.8125rem; padding:8px 12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* Leistungen im Detail */
.feature{padding-block:clamp(48px,6vw,96px); border-bottom:1px solid var(--line)}
.feature:last-child{border-bottom:0}
.feature .grid{align-items:center}
.feature__text{grid-column:1 / span 5; display:flex; flex-direction:column; gap:18px}
.feature__panel{grid-column:7 / span 6; position:relative}
.feature--flip .feature__text{grid-column:8 / span 5; order:2}
.feature--flip .feature__panel{grid-column:1 / span 6; order:1}
.feature h2{font-size:clamp(1.6rem, 1.6vw + 1rem, 2.5rem); line-height:1.15}
.feature p{font-size:1.1875rem; line-height:1.5; max-width:34em}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:1rem}
.checks li{display:grid; grid-template-columns:1.6em minmax(0,1fr)}
.checks li::before{content:"→"; font-family:var(--font-display); color:var(--muted)}
.feature__panel::before{content:""; position:absolute; inset:0 0 var(--tear) 0; background:var(--marker)}
.panel{position:relative; background:var(--surface-alt); padding:clamp(22px,3vw,40px) clamp(22px,3vw,40px) calc(clamp(22px,3vw,40px) + var(--tear) / 2); font-family:var(--font-display); font-size:.9375rem; line-height:1.6; font-variant-numeric:tabular-nums; transition:transform .5s var(--ease)}
.feature__panel:hover .panel{transform:translate(-10px,-10px)}
.panel__head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px}
.panel__title{font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase}
.panel .rows dd{color:var(--ink)}
.log{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.log li{display:grid; grid-template-columns:4.5em minmax(0,1fr); gap:12px}
.log time{color:var(--muted)}
.feature.in .panel .rows > *, .feature.in .log li{animation:print .45s var(--ease) both; animation-delay:calc(var(--i, 0) * 55ms + 200ms)}

/* Ablauf */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap)}
.step{background:var(--surface); padding:28px 24px calc(32px + var(--tear) / 2); display:flex; flex-direction:column; gap:14px; border-top:3px solid var(--ink); transition:transform .45s var(--ease)}
.section--alt .step{background:var(--surface)}
.step:hover{transform:translateY(-8px)}
.step__no{font-family:var(--font-display); font-size:2.5rem; line-height:1; letter-spacing:-.04em; align-self:flex-start; padding:0 .12em; transition:background .3s}
.step:hover .step__no{background:var(--marker)}
.step h3{font-size:1.25rem; line-height:1.25}
.step p{font-size:1rem; color:var(--muted)}

/* Warum */
.why .grid{align-items:start}
.why__intro{grid-column:1 / span 5; position:sticky; top:120px; display:flex; flex-direction:column; gap:20px}
.why__intro h2{font-size:clamp(1.8rem, 2.4vw + .9rem, 3.2rem); line-height:1.12}
.facts{grid-column:7 / span 6; list-style:none; margin:0; padding:0}
.fact{padding-block:28px 32px; border-bottom:1px solid var(--line); display:grid; gap:12px; justify-items:start}
.fact:first-child{padding-top:0}
.fact__num{font-family:var(--font-display); font-weight:500; font-size:clamp(3.5rem, 6vw + 1rem, 7.5rem); line-height:.95; letter-spacing:-.05em; font-variant-numeric:tabular-nums; background:linear-gradient(var(--marker),var(--marker)) 0 88%/100% 32% no-repeat; padding-inline:.05em}
.fact__label{font-size:1.25rem; line-height:1.35; max-width:24em}

/* Kosten */
.cost{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
.cost__col{background:var(--surface); padding:clamp(22px,3vw,36px) clamp(22px,3vw,36px) calc(clamp(22px,3vw,36px) + var(--tear) / 2); display:flex; flex-direction:column; gap:16px}
.cost__col h3{font-size:1.375rem; line-height:1.2}
.cost__col .rows{font-family:var(--font-display); font-size:.875rem; row-gap:10px}
.cost__col .rows dd{color:var(--ink); max-width:16em}
.cost__col--risk{background:var(--tint)}
.cost__col--risk .rows .sep{border-color:#e6dca0}

/* Für wen */
.who .grid{align-items:start}
.who__text{grid-column:1 / span 6; display:flex; flex-direction:column; gap:20px}
.who__text h2{font-size:clamp(1.8rem, 2.2vw + 1rem, 3rem); line-height:1.12}
.who__text p{font-size:1.1875rem; max-width:34em}
.who__list{grid-column:8 / span 5; list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.who__list li{display:flex; justify-content:space-between; gap:16px; padding:16px 8px; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:1.0625rem;
  background:linear-gradient(var(--marker),var(--marker)) 0 0/0 100% no-repeat; transition:background-size .45s var(--ease)}
.who__list li:hover{background-size:100% 100%}
.who__list li span:last-child{color:var(--muted); font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; text-align:right}
.who__list li:hover span:last-child{color:var(--on-marker)}

/* FAQ */
.faq-group{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); padding-block:32px; border-top:1px solid var(--ink)}
.faq-group h2{grid-column:1 / span 4; font-size:1.375rem; line-height:1.2}
.faq-group .faq-list{grid-column:5 / span 8}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; padding-block:20px; font-size:1.125rem; line-height:1.35}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; font-family:var(--font-display); font-size:1.25rem; line-height:1.1; transition:transform .25s var(--ease)}
summary:hover{text-decoration:underline; text-underline-offset:4px}
details[open] summary::before{transform:rotate(45deg)}
details > p{padding:0 0 22px 36px; color:var(--muted); max-width:42em}
details[open] > p{animation:print .35s var(--ease) both}

/* CTA */
.cta{padding-block:clamp(72px,9vw,140px); border-top:1px solid var(--line)}
.cta h2{font-size:clamp(2rem, 4.4vw + .6rem, 5rem); line-height:1.06; max-width:15em}
.cta__row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:24px; margin-top:clamp(28px,3vw,44px)}
.cta__row p{font-size:1.25rem; line-height:1.4; max-width:30em}

/* Kontakt */
.contact-grid .contact-main{grid-column:1 / span 7; display:flex; flex-direction:column; gap:24px}
.contact-grid .contact-side{grid-column:9 / span 4; display:flex; flex-direction:column; gap:24px}
.contact{background:var(--surface); border:1px solid var(--line); padding:22px 24px calc(22px + var(--tear) / 2); font-family:var(--font-display); font-size:.9375rem}
.contact .rows dd{color:var(--ink)}
.copy{font:600 .8125rem/1 var(--font-text); background:var(--btn-alt); border:0; padding:6px 8px; margin-left:8px; cursor:pointer}
.copy:hover{background:var(--marker)}
.booking__frame{background:var(--surface); border:1px solid var(--line)}
.booking__consent{padding:clamp(24px,4vw,48px); display:grid; gap:20px; justify-items:start; max-width:42em}
.booking__frame iframe{display:block; width:100%; height:640px; border:0; background:#fff}
.booking__alt{margin-top:12px; font-size:.9375rem}
.mini-steps{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--ink)}
.mini-steps li{display:grid; grid-template-columns:3em minmax(0,1fr); gap:12px; padding-block:16px; border-bottom:1px solid var(--line); font-size:1rem}
.mini-steps b{font-family:var(--font-display); font-weight:500}

/* Über uns */
.about .grid{align-items:start}
.about__portrait{grid-column:1 / span 5; position:relative}
.about__portrait canvas{display:block; width:100%; aspect-ratio:4/5; image-rendering:pixelated; background:var(--ink)}
.about__portrait figcaption{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:.8125rem}
.about__text{grid-column:7 / span 6; display:flex; flex-direction:column; gap:20px}
.about__text h2{font-size:clamp(1.8rem, 2.2vw + 1rem, 3rem); line-height:1.12}
.about__text p{font-size:1.1875rem; max-width:34em}
.values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.value{border-top:3px solid var(--ink); padding-top:20px; display:flex; flex-direction:column; gap:12px}
.value h3{font-size:1.25rem; line-height:1.25}
.value p{font-size:1rem; color:var(--muted)}

/* Artikel */
.article-head .grid{padding-block:clamp(40px,6vw,88px) clamp(32px,4vw,56px)}
.article-head__text{grid-column:2 / span 9; display:flex; flex-direction:column; gap:20px}
.article-head h1{font-size:clamp(2rem, 3.2vw + .7rem, 3.9rem); line-height:1.08}
.article-head .lead{font-size:1.3125rem; line-height:1.45; color:var(--muted); max-width:36em}
.byline{display:flex; flex-wrap:wrap; gap:8px 20px; font-family:var(--font-display); font-size:.8125rem; color:var(--muted); letter-spacing:.02em}
.article-cover{position:relative; aspect-ratio:21/8; max-width:100%; background:var(--surface-alt)}
.article-cover canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.article-body{padding-block:clamp(40px,5vw,72px)}
.prose{grid-column:3 / span 7; min-width:0; font-size:1.1875rem; line-height:1.65}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(1.4rem, 1vw + 1rem, 1.9rem); line-height:1.2; margin-top:2em}
.prose h3{font-family:var(--font-text); font-weight:600; font-size:1.1875rem; letter-spacing:0; margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose a{text-decoration-thickness:1px; text-underline-offset:3px}
.prose a:hover{background:var(--marker)}
.prose blockquote{margin:1.6em 0; padding:4px 0 4px 20px; border-left:4px solid var(--marker); font-family:var(--font-display); font-size:1.1875rem; line-height:1.45; letter-spacing:-.01em}
.prose .note{background:var(--tint); padding:18px 20px; font-size:1rem; line-height:1.55}
.prose sup a{text-decoration:none; font-family:var(--font-display); font-size:.75em; padding:0 2px}
.table-wrap{overflow-x:auto; border-top:1px solid var(--ink)}
.prose table{border-collapse:collapse; width:100%; font-size:.9375rem; line-height:1.45; min-width:560px}
.prose th,.prose td{text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-bottom:1px solid var(--line)}
.prose th{font-family:var(--font-display); font-weight:500; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.prose td.num, .prose th.num{text-align:right; font-variant-numeric:tabular-nums}
.sources{grid-column:3 / span 7; border-top:1px solid var(--ink); padding-top:20px; margin-top:24px}
.sources h2{font-family:var(--font-display); font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500}
.sources ol{margin:14px 0 0; padding-left:1.4em; display:grid; gap:8px; font-size:.9375rem; color:var(--muted)}
.sources a{color:var(--ink)}
.en-note{grid-column:3 / span 7; background:var(--tint); padding:14px 18px; font-size:1rem}

/* Diagramme */
.chart{margin:2em 0; border-top:1px solid var(--ink); padding-top:16px}
.chart__title{font-family:var(--font-text); font-weight:600; font-size:1.0625rem; letter-spacing:0}
.chart__sub{font-size:.9375rem; color:var(--muted); margin-top:4px}
.chart__box{position:relative; margin-top:16px}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart .ax{fill:var(--muted); font:400 12px var(--font-text); font-variant-numeric:tabular-nums}
.chart .lbl{fill:var(--ink); font:600 12.5px var(--font-text); font-variant-numeric:tabular-nums}
.chart .gl{stroke:var(--grid); stroke-width:1}
.chart .base{stroke:var(--muted); stroke-width:1}
.chart__note{font-size:.8125rem; color:var(--muted); margin-top:12px}
.legend{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.875rem; margin-top:10px}
.legend span{display:inline-flex; align-items:center; gap:8px}
.legend i{width:18px; height:3px; border-radius:2px; display:inline-block}
.tip{position:absolute; pointer-events:none; background:var(--ink); color:var(--paper); font:500 .8125rem/1.4 var(--font-text); padding:8px 10px; white-space:nowrap; transform:translate(-50%, calc(-100% - 12px)); opacity:0; transition:opacity .15s; z-index:3; font-variant-numeric:tabular-nums}
.tip.on{opacity:1}
.chart details{border:0; margin-top:10px}
.chart details summary{font-size:.875rem; padding-block:8px}
.chart details summary::before{font-size:1rem}

/* Rechner */
.calc{background:var(--surface-alt); padding:clamp(20px,3vw,32px); margin:2em 0; display:grid; gap:20px}
.calc__inputs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.field{display:grid; gap:6px; font-size:.875rem}
.field label{font-weight:600}
.field input[type="number"], .field select{font:500 1rem var(--font-display); padding:10px 12px; border:1px solid var(--ink); background:var(--surface); color:var(--ink); width:100%; min-width:0}
.field input[type="range"]{width:100%; accent-color:var(--ink)}
.field output{font-family:var(--font-display); font-size:.875rem}
.calc__out{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.kpi{background:var(--surface); padding:16px 18px; display:grid; gap:6px}
.kpi b{font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem, 1.6vw + 1rem, 2.25rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.kpi span{font-size:.875rem; color:var(--muted)}

/* Rechtstexte */
.legal__body{max-width:42em; display:grid; gap:10px; font-size:1rem; line-height:1.6}
.legal__body h2{font-family:var(--font-text); font-weight:600; font-size:1.0625rem; letter-spacing:0; margin-top:14px}

/* Footer */
.site-foot{background:var(--surface-alt); border-top:1px solid var(--line); padding-block:clamp(56px,6vw,88px) 32px}
.foot__cols{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap)}
.foot__col{grid-column:span 2; display:flex; flex-direction:column; gap:10px; font-size:.9375rem}
.foot__col h3{font-family:var(--font-text); font-weight:600; font-size:.9375rem; letter-spacing:0; margin-bottom:6px}
.foot__col a{text-decoration:none; color:var(--muted)}
.foot__col a:hover{color:var(--ink); text-decoration:underline}
.foot__brand{grid-column:1 / span 5; display:flex; flex-direction:column; gap:18px}
.foot__brand svg{width:min(100%, 380px); height:auto; color:var(--ink)}
.foot__brand p{font-size:.9375rem; color:var(--muted); max-width:24em}
.foot__legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:1px solid var(--line); margin-top:56px; padding-top:20px; font-size:.8125rem; color:var(--muted)}

/* Fahrplan */
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border:1px solid var(--ink); line-height:1.2; white-space:nowrap}
.pill::before{content:""; width:7px; height:7px; flex:none}
.pill--live{background:var(--ink); color:var(--paper)} .pill--live::before{background:var(--marker)}
.pill--build{background:var(--marker); color:var(--on-marker); border-color:var(--marker)} .pill--build::before{background:var(--on-marker)}
.pill--soon,.pill--later{background:var(--paper); color:var(--ink)} .pill--soon::before{border:1.5px solid var(--ink)} .pill--later::before{border:1.5px dashed var(--muted)}
.pill--later{border-style:dashed; color:var(--muted)}
.status{margin-top:-6px}
.road{list-style:none; margin:0; padding:34px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); position:relative}
.road::before{content:""; position:absolute; top:6px; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px)}
.road::after{content:""; position:absolute; top:6px; left:0; width:calc((100% - 2 * var(--gap)) / 3 + var(--gap) / 2); height:2px; background:var(--ink); transform-origin:left; transform:scaleX(1)}
html.js .road.in::after{animation:grow 1.4s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}}
.road__phase{position:relative; display:flex; flex-direction:column; gap:14px; min-width:0}
.road__dot{position:absolute; top:-34px; left:0; width:14px; height:14px; background:var(--paper); border:2px solid var(--ink)}
.is-now .road__dot{background:var(--marker)}
.is-now .road__dot::after{content:""; position:absolute; inset:-8px; border:2px solid var(--marker); animation:pulse 2s var(--ease) infinite}
@keyframes pulse{from{opacity:1; transform:scale(.6)} to{opacity:0; transform:scale(1.6)}}
html.is-paused .is-now .road__dot::after{animation-play-state:paused}
.road__when{font-family:var(--font-display); font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase}
.road__phase h3{font-size:clamp(1.2rem, .8vw + 1rem, 1.5rem); line-height:1.2}
.road__items{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--ink)}
.road__items li{display:grid; gap:8px; justify-items:start; padding-block:16px; border-bottom:1px solid var(--line)}
.road__items h4{font-family:var(--font-text); font-weight:600; font-size:1.0625rem; margin:0}
.road__items p{font-size:.9375rem; color:var(--muted)}
.road__build{margin-top:auto; background:var(--surface-alt); padding:16px 18px; display:grid; gap:6px; transition:background .3s}
.is-now .road__build{background:var(--tint)}
.road__phase:hover .road__build{background:var(--marker)}
.road__build p:last-child{font-size:.9375rem; font-weight:600}
.road__note{margin-top:28px; font-size:.875rem}
.section--alt .road__dot{background:var(--surface-alt)}
.section--alt .road__build{background:var(--paper)}
@media (max-width:900px){
  .road{grid-template-columns:minmax(0,1fr); padding:0 0 0 34px; gap:40px}
  .road::before{top:0; bottom:0; left:6px; right:auto; width:2px; height:auto; background:repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px)}
  .road::after{top:0; left:6px; width:2px; height:33%; transform-origin:top}
  @keyframes grow{from{transform:scaleY(0)}}
  .road__dot{top:2px; left:-34px}
}
@media (prefers-reduced-motion:reduce){ html.js .road.in::after,.is-now .road__dot::after{animation:none} }
.card .pill{align-self:flex-start}

/* Einblenden */
.rv.in{animation:rise .9s var(--ease) backwards; animation-delay:calc(var(--d, 0) * 90ms)}
@keyframes rise{from{opacity:0; transform:translateY(28px)}}

/* Responsiv */
@media (max-width:1180px){
  .nav{display:none}
  .menu-btn{display:grid}
  .site-head .lang{margin-left:auto}
  html.menu-open .nav{display:flex; position:fixed; inset:calc(72px + env(safe-area-inset-top, 0px)) 0 0 0; z-index:19; background:var(--paper); flex-direction:column; gap:0;
    padding:16px var(--gutter-r) 32px var(--gutter); overflow:auto; margin:0}
  html.menu-open .nav a{font-family:var(--font-display); font-size:1.5rem; padding-block:16px; border-bottom:1px solid var(--line); background:none}
  html.menu-open .nav a[aria-current="page"]{background:linear-gradient(var(--marker),var(--marker)) 0 50%/4px 50% no-repeat; padding-left:16px}
  html.menu-open body{overflow:hidden}
}
@media (max-width:1080px){
  .hero h1{grid-column:1 / -1}
  .hero__side{grid-column:1 / span 9}
  .steps,.cards--4,.cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-hero__text{grid-column:1 / span 8}
  .page-hero__art{grid-column:9 / span 4}
  .prose,.sources,.en-note{grid-column:2 / span 10}
  .article-head__text{grid-column:1 / span 11}
  .foot__col{grid-column:span 3}
  .foot__brand{grid-column:1 / -1}
}
@media (max-width:820px){
  .hero::after{background:linear-gradient(180deg, rgb(255 255 255 / .6) 0%, rgb(255 255 255 / .9) 55%)}
  .hero__side,.explain__text,.demo{grid-column:1 / -1}
  .feature__text,.feature--flip .feature__text,.feature__panel,.feature--flip .feature__panel{grid-column:1 / -1; order:0}
  .feature__panel,.feature--flip .feature__panel{order:1}
  .section-head > div,.section-head > p,.section-head > .side,.why__intro,.facts,.who__text,.who__list,
  .contact-grid .contact-main,.contact-grid .contact-side,.about__portrait,.about__text,.page-hero__text,
  .faq-group h2,.faq-group .faq-list,.prose,.sources,.en-note,.article-head__text{grid-column:1 / -1}
  .page-hero__art{grid-column:1 / -1; min-height:120px}
  .why__intro{position:static}
  .cost,.values,.calc__inputs{grid-template-columns:minmax(0,1fr)}
  .post--lead{grid-template-columns:minmax(0,1fr)}
  .strip .wrap{flex-direction:column; align-items:flex-start; gap:12px; padding-block:20px}
  .strip__label{max-width:none}
  .marquee{width:100%}
  .article-cover{aspect-ratio:16/9}
  .foot__col{grid-column:span 6}
}
@media (max-width:760px){
  .mosaic__stage{aspect-ratio:3/4.6; margin-bottom:10%; margin-top:104px}
  .tile{left:calc(var(--ml) * 1%); top:calc(var(--mt) * 1%); width:calc(var(--mw) * 1%)}
}
@media (max-width:520px){
  .steps,.cards--4,.cards--3,.calc__out{grid-template-columns:minmax(0,1fr)}
  .site-head .btn{display:none}
  .receipt,.panel{font-size:.8125rem}
  .motion-btn{bottom:14px}
  .prose{font-size:1.0625rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__track,.marquee__track,.flow__track::after,.prompt__text::after{animation:none}
  .marquee__track{flex-wrap:wrap; width:auto; gap:12px 32px}
  .rv.in,.receipt.printing,.receipt.printing .rows > *,.feature.in .panel .rows > *,.feature.in .log li,details[open] > p{animation:none}
  .btn,.btn::after,summary::before,.tile,.panel,.step,.card,.who__list li,.shift,.w,.post__cover canvas,.post h3{transition:none}
}
.prose code{font-family:var(--font-display); font-size:.85em; background:var(--surface-alt); padding:.1em .35em}

/* ---- Ergänzungen GEO-Update Okt 2026 ---- */
@media (min-width:1081px){.foot__brand{grid-column:1 / span 4}}
.prose .note{margin:0 0 1.6em}
.quiz{display:grid; gap:28px; margin:1.6em 0 2.4em}
.quiz fieldset{border:0; border-top:3px solid var(--ink); margin:0; padding:14px 0 0; min-width:0}
.quiz legend{font-family:var(--font-display); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; padding:0 8px 0 0; background:var(--paper)}
.q{display:grid; gap:10px; padding:16px 0; border-bottom:1px solid var(--line)}
.q > p{margin:0; font-size:1.0625rem; line-height:1.45; font-weight:600}
.q__opts{display:flex; flex-wrap:wrap; gap:8px}
.q__opts label{display:inline-flex; align-items:center; min-height:40px; padding:6px 14px; border:1px solid var(--ink); background:var(--surface); cursor:pointer; font-size:.9375rem; line-height:1.2; user-select:none}
.q__opts input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.q__opts label:hover{background:var(--surface-alt)}
.q__opts label:has(input:checked){background:var(--marker); color:var(--on-marker); border-color:var(--marker)}
.q__opts label:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:2px}
.result{background:var(--surface-alt); border-top:3px solid var(--ink); padding:20px clamp(16px,3vw,28px) 24px; display:grid; gap:12px; z-index:2}
.result h3{font-size:1.25rem; line-height:1.3; margin:0}
.result h4{font-family:var(--font-text); font-weight:600; font-size:1rem; margin:6px 0}
.result ol{margin:0; padding-left:1.3em; font-size:.9375rem; line-height:1.5; display:grid; gap:6px}
.result p{margin:0}
.result__score{font-family:var(--font-display); font-size:.9375rem}
.result__score b{font-size:2rem; font-weight:500; letter-spacing:-.03em}
.result .small{font-size:.8125rem}
.meter{height:10px; background:var(--line)}
.meter i{display:block; height:100%; width:0; background:var(--ink); transition:width .3s var(--ease)}
.gloss{margin:0; display:grid; gap:0; border-top:1px solid var(--ink)}
.gloss > div{padding:16px 0; border-bottom:1px solid var(--line); scroll-margin-top:96px}
.gloss > div:target{background:var(--tint)}
.gloss dt{font-family:var(--font-display); font-size:1.0625rem; font-weight:500; letter-spacing:-.01em}
.gloss dd{margin:6px 0 0; color:var(--ink)}
.prose .faq-list{margin-top:1em}