/* szewald.de - page sections + motion, shared by all pages */
/* ===== motion: one load sequence, reveals once per element ===== */
@keyframes rise{from{transform:translateY(104%)}to{transform:none}}
@keyframes lift{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.h-load .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.h-load .ln>span{display:block;animation:rise 900ms var(--ease-out) both}
.h-load .ln:nth-child(2)>span{animation-delay:80ms}
.l1{animation:lift 800ms var(--ease-out) 260ms both}
.l2{animation:lift 900ms var(--ease-out) 380ms both}
.l3{animation:lift 900ms var(--ease-out) 520ms both}
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
html.js .rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:70ms}.rv[data-d="2"]{transition-delay:140ms}.rv[data-d="3"]{transition-delay:210ms}

/* ===== hero ===== */
.hero{padding:34px 0 0}
.hero-grid{display:grid;gap:26px}
.hero h1{font-size:clamp(52px,13vw,128px);line-height:.94;letter-spacing:-.035em;color:var(--h1);font-weight:380}
.lead{font-size:18.5px;color:var(--ink-2);max-width:470px}
.lead b{color:var(--ink);font-weight:600}
.intro-note{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14.5px;color:var(--muted)}
.intro-note b{color:var(--ink);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 18%,transparent)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hidden{display:none!important}

/* studio: type a name, see a site */
.studio{margin-top:44px;display:grid;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(21,32,26,.45)}
.ctrl{padding:22px;display:flex;flex-direction:column;gap:22px;border-bottom:1px solid var(--line)}
.ctrl label,.ctrl .lbl{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:9px}
.field input{width:100%;height:54px;padding:0 16px;border:1px solid #87928B;border-radius:10px;background:var(--paper);font-size:17px;transition:border-color 200ms ease,background-color 200ms ease}
.field input:focus{outline:none;border-color:var(--tanne);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--tanne) 14%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;font-size:14px;cursor:pointer;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 160ms var(--ease-out)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--tanne);border-color:var(--tanne);color:var(--on-tanne)}
@media (hover:hover) and (pointer:fine){.chip[aria-pressed="false"]:hover{border-color:var(--ink)}}
.go{display:flex;flex-direction:column;gap:10px}
.go .btn{width:100%;white-space:normal;text-align:center}
.fine{font-size:13px;color:var(--muted);text-align:center}
.canvas{position:relative;padding:40px 18px 26px;background:var(--paper-2);display:grid;grid-template-columns:1fr;align-items:center;justify-items:stretch;min-height:300px}
.live{position:absolute;top:12px;right:14px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--muted);z-index:6}
.live i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
@media (prefers-reduced-motion:no-preference){.live i{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.35}}
.win{width:100%;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 24px 50px -28px rgba(21,32,26,.5),0 0 0 1px rgba(21,32,26,.08)}
.win-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F2F4F1;border-bottom:1px solid #E1E6E0}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#D3D9D3}
.win-bar .u{margin-left:10px;flex:1;max-width:64%;background:#fff;border-radius:6px;font-size:11.5px;color:var(--muted);padding:3px 10px;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap}
.win-bar .u svg{width:10px;height:10px;color:var(--signal);flex:none}
.phone{display:none;background:var(--device-2);border-radius:32px;padding:7px;box-shadow:0 30px 60px -22px rgba(21,32,26,.6),0 0 0 1px rgba(0,0,0,.4)}
.phone .scr{border-radius:26px;overflow:hidden;position:relative}
.phone .scr::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:34%;height:15px;border-radius:12px;background:var(--device-2);z-index:3}
.fit{position:relative;overflow:hidden;background:#fff;transition:opacity 220ms ease}
.fit.swap{opacity:0}
.fit>.pv-inner{position:absolute;top:0;left:0;transform-origin:0 0}
.pv-inner{container-type:inline-size;overflow:hidden}
.pv-inner.desk{width:1280px;height:800px}
.pv-inner.mob{width:390px;height:844px}

.facts{display:grid;grid-template-columns:1fr 1fr;margin:30px 0 0;border-top:1px solid var(--line)}
.facts div{padding:18px 4px 4px}
.facts dt{font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--tanne);letter-spacing:-.02em}
.facts dd{font-size:14px;color:var(--muted);margin-top:4px}

/* ===== sections ===== */
section.sec{padding:96px 0}
.sec-h{font-size:clamp(40px,6.4vw,76px);color:var(--ink);max-width:16ch}
.split .sec-h{font-size:clamp(40px,5vw,64px)}
.sec-p{font-size:18px;color:var(--ink-2);max-width:520px;margin-top:20px}

/* before / after */
.ba-sec{background:var(--paper-2);margin-top:96px}
.split{display:grid;gap:40px;align-items:center}
.ticks{list-style:none;margin-top:26px}
.ticks li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line-2);font-size:16.5px}
.ticks svg{width:20px;height:20px;color:var(--tanne);flex:none;margin-top:3px}
.ba{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(21,32,26,.55),0 0 0 1px var(--line-2);--p:50%;user-select:none;-webkit-user-select:none;touch-action:pan-y;background:#fff}
.ba .before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:var(--tanne);z-index:4;transform:translateX(-1px);pointer-events:none}
.ba .handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--tanne);color:var(--on-tanne);display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transition:transform 160ms var(--ease-out)}
.ba:active .handle span{transform:translate(-50%,-50%) scale(.94)}
.ba:has(input:focus-visible) .handle span{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--tanne)}
.ba .handle svg{width:22px;height:22px}
.ba .tag{position:absolute;top:14px;z-index:3;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line-2);pointer-events:none}
.ba .tag.l{left:14px}.ba .tag.r{right:14px;background:var(--tanne);color:var(--on-tanne);box-shadow:none}

/* process: the line fills as you scroll */
.steps{position:relative;display:grid;gap:34px;margin-top:56px;padding-left:44px}
.track{position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:var(--line)}
.track i{position:absolute;inset:0;background:var(--tanne);transform-origin:top;transform:scaleY(var(--fill,0))}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .track i{animation:fillY linear both;animation-timeline:view();animation-range:entry 30% contain 60%}
    @keyframes fillY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  }
}
.st{position:relative}
.st .n{position:absolute;left:-44px;top:0;width:32px;height:32px;border-radius:50%;background:var(--paper);border:1.5px solid var(--tanne);color:var(--tanne);display:grid;place-items:center;font-family:var(--serif);font-size:17px}
.st h3{font-size:19px;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.st h3 small{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--tanne);background:var(--sage);border-radius:999px;padding:2px 9px}
.st p{color:var(--ink-2);font-size:16px;max-width:420px}

/* what's included */
.incl{display:grid;gap:0;margin-top:52px;border-top:1px solid var(--line)}
.incl li{list-style:none;display:grid;grid-template-columns:28px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}
.incl .ck{width:28px;height:28px;border-radius:50%;background:var(--sage);color:var(--tanne);display:grid;place-items:center}
.incl .ck svg{width:15px;height:15px}
.incl p{color:var(--muted);font-size:15.5px;margin-top:4px}

/* price: the receipt prints out of a slot */
.price{background:var(--deep);color:var(--on-tanne)}
.price .sec-h{color:var(--on-tanne)}
.price .sec-p{color:var(--on-tanne-2)}
.price-grid{display:grid;gap:56px;align-items:start}
.printer{position:relative;max-width:400px;width:100%;margin:0 auto;padding-top:14px}
.slot{position:absolute;top:0;left:-14px;right:-14px;height:18px;border-radius:9px;background:var(--tanne-3);box-shadow:inset 0 2px 4px rgba(0,0,0,.4);z-index:2}
.paper-clip{overflow:hidden;position:relative;margin-top:-4px;padding:0 0 30px}
.receipt{position:relative;background:#fff;color:#1f2722;padding:30px 26px 24px;font-size:14px;font-variant-numeric:tabular-nums;box-shadow:0 30px 50px -30px rgba(0,0,0,.6);
  --zig:radial-gradient(circle at 8px 0,transparent 7px,#fff 7.5px);background-image:none}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:radial-gradient(circle at 7px 10px,transparent 6.5px,#fff 7px) 0 0/14px 10px repeat-x}
html.js .receipt{transform:translateY(-102%);transition:transform 1400ms var(--ease-drawer)}
html.js .printer.in .receipt{transform:none}
.rh{text-align:center;padding-bottom:16px;margin-bottom:12px;border-bottom:1px dashed #c9d1ca}
.rh svg{height:26px;width:auto;margin:0 auto 6px;color:var(--tanne)}
.rh span{font-size:12px;color:#66706a;letter-spacing:.02em}
.rl{display:flex;align-items:baseline;gap:8px;padding:5px 0}
.rl i{flex:1;border-bottom:1px dotted #b9c2bb;transform:translateY(-4px)}
.tot{border-top:1px dashed #c9d1ca;margin-top:12px;padding-top:12px}
.rl.big{font-size:18px;font-weight:700}
.rl.zero span:last-child{color:#24794C;font-weight:600}
.receipt .small{font-size:11.5px;color:#66706a;margin-top:12px;line-height:1.5}

/* about */
.about{display:grid;gap:36px;align-items:center}
.portrait{position:relative;max-width:420px}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:4px}
.portrait figcaption{margin-top:10px;font-size:13.5px;color:var(--muted)}
.about p{color:var(--ink-2);margin-top:16px;max-width:560px}
.sign{margin-top:22px;font-family:var(--serif);font-style:italic;font-weight:600;font-size:26px;color:var(--tanne)}
.sign small{display:block;font-family:var(--sans);font-style:normal;font-weight:400;font-size:14px;color:var(--muted);margin-top:4px}

/* FAQ: native details, smooth where the browser can animate it */
.faq-grid{display:grid;gap:30px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-weight:600;font-size:17px;border-radius:6px}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--line-2);transition:transform 250ms var(--ease-out),background-color 200ms ease,border-color 200ms ease}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pm{transform:rotate(45deg);background:var(--tanne);border-color:var(--tanne);color:var(--on-tanne)}
.faq details p{padding:0 44px 22px 0;color:var(--ink-2);font-size:16px}
@supports selector(::details-content){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size 250ms var(--ease-out),opacity 250ms var(--ease-out),content-visibility 250ms allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}

/* contact + footer share the fir green */
.contact{background:var(--deep);color:var(--on-tanne);padding:100px 0 70px}
.contact h2{font-size:clamp(46px,9vw,104px);color:var(--on-tanne);max-width:12ch}
.contact p{font-size:18.5px;color:var(--on-tanne-2);max-width:520px;margin-top:22px}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.note{margin-top:18px;font-size:14px;color:var(--on-tanne-2)}
.ft-mark{padding:40px 0 34px;color:var(--on-tanne)}
.ft-mark svg{width:100%;height:auto;overflow:visible}
html.js .ft-mark path{transition:transform 1100ms var(--ease-out),opacity 700ms ease}
html.js .ft-mark:not(.in) path{opacity:.0}
html.js .ft-mark:not(.in) path:nth-child(1){transform:translateX(-66px)}
html.js .ft-mark:not(.in) path:nth-child(2){transform:translateX(-44px)}
html.js .ft-mark:not(.in) path:nth-child(3){transform:translateX(-22px)}
html.js .ft-mark:not(.in) path:nth-child(5){transform:translateX(22px)}
html.js .ft-mark:not(.in) path:nth-child(6){transform:translateX(44px)}
html.js .ft-mark:not(.in) path:nth-child(7){transform:translateX(66px)}
.ft-mark path:nth-child(1),.ft-mark path:nth-child(7){transition-delay:0ms}
.ft-mark path:nth-child(2),.ft-mark path:nth-child(6){transition-delay:50ms}
.ft-mark path:nth-child(3),.ft-mark path:nth-child(5){transition-delay:100ms}
.ft-mark path:nth-child(4){transition-delay:150ms}
.ft-also{padding:0 0 22px;font-size:14.5px;color:var(--on-tanne-2)}

/* phone: call / WhatsApp bar slides up after the hero */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform 320ms var(--ease-drawer)}
.mbar.show{transform:none}
.mbar .btn{min-height:50px;width:100%}

/* ===== larger screens ===== */
@media (min-width:700px){
  .studio{grid-template-columns:300px 1fr}
  .ctrl{border-bottom:0;border-right:1px solid var(--line);padding:28px 24px;justify-content:space-between}
  .canvas{grid-template-columns:1fr 150px;gap:22px;padding:44px 34px 38px;align-items:end;min-height:420px}
  .phone{display:block;margin-bottom:-12px}
  .facts{grid-template-columns:repeat(4,1fr)}
  .facts div{padding:22px 20px 4px 0}
  .incl{grid-template-columns:1fr 1fr;column-gap:48px;border-top:0}
  .incl li:nth-child(-n+2){border-top:1px solid var(--line)}
  .mbar{display:none}
}
@media (min-width:980px){
  .hero{padding-top:70px}
  .hero-grid{grid-template-columns:1.2fr .8fr;align-items:end;gap:56px}
  .split{grid-template-columns:.8fr 1.2fr;gap:70px}
  section.sec{padding:130px 0}
  .ba-sec{margin-top:130px}
  .steps{grid-template-columns:repeat(4,1fr);gap:30px;padding-left:0;padding-top:58px}
  .track{left:16px;right:16px;top:15px;bottom:auto;width:auto;height:2px}
  .track i{transform-origin:left;transform:scaleX(var(--fill,0))}
  @supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.track i{animation-name:fillX}@keyframes fillX{from{transform:scaleX(0)}to{transform:scaleX(1)}}}}
  .st .n{left:0;top:-58px}
  .price-grid{grid-template-columns:1fr 400px;gap:80px}
  .about{grid-template-columns:.8fr 1.2fr;gap:80px}
  .faq-grid{grid-template-columns:.8fr 1.2fr;gap:80px}
  .contact{padding:150px 0 90px}
}
@media (prefers-reduced-motion:reduce){
  .h-load .ln>span,.l1,.l2,.l3{animation:fade 400ms ease both}
  html.js .rv{transform:none;transition:opacity 400ms ease}
  html.js .receipt{transform:none;transition:none}
  html.js .ft-mark path{transform:none!important;transition:opacity 400ms ease}
  .mbar{transition:none}
  .pm{transition:none}
  .track i{transform:none}
}

/* =====================================================================
   Components adapted from 21st.dev (rebuilt in plain CSS/JS, brand colours):
   Navigation Menu, Background Paths (kokonutd), Text Rotate (danielpetho),
   Spotlight Card (jahed), Container Scroll Animation (Aceternity / manuarora700),
   Features With Panel (scrollxui), Us vs Them Comparison, Stepper, FAQ, Footer.
   ===================================================================== */

/* --- navigation menu with "Angebote" dropdown --- */
.nav{align-items:center}
.nav-dd{position:relative}
.nav-dd>button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;font-size:15px;color:var(--ink-2);cursor:pointer;border-radius:6px}
.nav-dd>button svg{width:14px;height:14px;transition:transform 200ms var(--ease-out)}
.nav-dd.open>button svg{transform:rotate(180deg)}
.dd{visibility:hidden;position:absolute;top:calc(100% + 12px);left:-24px;width:min(560px,90vw);display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -30px rgba(21,32,26,.35);
  transform-origin:24px 0;opacity:0;transform:scale(.97) translateY(-4px);pointer-events:none;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 0s linear 180ms}
.nav-dd.open .dd{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
.dd a{display:block;padding:16px;border-radius:10px;text-decoration:none;transition:background-color 150ms ease}
.dd a::after{display:none}
.dd b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;color:var(--tanne);letter-spacing:-.01em}
.dd span{display:block;font-size:14px;color:var(--muted);margin-top:4px;line-height:1.45}
@media (hover:hover) and (pointer:fine){.dd a:hover{background:var(--paper)}}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--line-2);background:transparent;cursor:pointer;transition:transform 160ms var(--ease-out)}
.menu-btn:active{transform:scale(.95)}
.menu-btn i{position:relative;width:16px;height:1.5px;background:var(--ink);transition:background-color 150ms ease}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:transform 250ms var(--ease-out)}
.menu-btn i::before{top:-5px}.menu-btn i::after{top:5px}
.menu-open .menu-btn i{background:transparent}
.menu-open .menu-btn i::before{transform:translateY(5px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translateY(-5px) rotate(-45deg)}
.sheet{visibility:hidden;position:fixed;left:12px;right:12px;top:72px;z-index:49;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 30px 60px -30px rgba(21,32,26,.4);
  transform-origin:top right;opacity:0;transform:scale(.97) translateY(-6px);pointer-events:none;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s linear 200ms}
.menu-open .sheet{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
.sheet a{display:block;padding:14px 14px;border-radius:10px;text-decoration:none;font-size:17px}
.sheet a b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;color:var(--tanne)}
.sheet a small{display:block;color:var(--muted);font-size:14px}
.sheet hr{border:0;border-top:1px solid var(--line);margin:6px 8px}
.sheet .btn{width:100%;margin-top:6px}
@media (min-width:980px){.menu-btn,.sheet{display:none}}

/* --- background paths: slow contour lines behind the home hero --- */
.paths{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;color:var(--tanne)}
.paths svg{position:absolute;top:0;right:0;width:72%;height:100%;-webkit-mask-image:linear-gradient(to left,#000 45%,transparent);mask-image:linear-gradient(to left,#000 45%,transparent)}
@media (max-width:899px){.paths svg{width:100%;opacity:.55;-webkit-mask-image:linear-gradient(to top,#000 30%,transparent 75%);mask-image:linear-gradient(to top,#000 30%,transparent 75%)}}
.paths path{fill:none;stroke:currentColor;stroke-dasharray:.62 .38;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:no-preference){
  .paths path{animation:flow var(--dur) linear 2}
  .paths.paused path{animation-play-state:paused}
}
@keyframes flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* --- text rotate: the word for who it is for --- */
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.rot>span{grid-area:1/1;white-space:nowrap;transition:transform 700ms var(--ease-out),opacity 500ms var(--ease-out),filter 500ms var(--ease-out)}
.rot>span:not(.on){transform:translateY(100%);opacity:0;filter:blur(6px)}
.rot>span.out{transform:translateY(-100%);opacity:0;filter:blur(6px)}
@media (prefers-reduced-motion:reduce){.rot>span{transition:opacity 300ms ease}.rot>span:not(.on),.rot>span.out{transform:none;filter:none}}

/* --- spotlight cards: two offers, light follows the pointer --- */
.offers{display:grid;gap:16px}
.spot{position:relative;display:flex;flex-direction:column;gap:18px;padding:26px;border-radius:22px;border:1px solid var(--line);background:var(--card);text-decoration:none;overflow:hidden;isolation:isolate;
  transition:border-color 250ms ease,transform 160ms var(--ease-out)}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--tanne) 12%,transparent),transparent 65%);opacity:0;transition:opacity 300ms ease}
.spot:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.spot:hover{border-color:color-mix(in srgb,var(--tanne) 40%,var(--line))}.spot:hover::before{opacity:1}.spot:hover .more svg{transform:translateX(4px)}}
.spot .for{font-size:14px;font-weight:600;color:var(--tanne)}
.spot h2{font-size:clamp(34px,4.6vw,52px);color:var(--ink)}
.spot p{color:var(--ink-2);max-width:460px}
.spot ul{list-style:none;display:grid;gap:8px;font-size:15.5px;color:var(--ink-2)}
.spot li{display:flex;gap:10px}
.spot li svg{width:18px;height:18px;color:var(--tanne);flex:none;margin-top:3px}
.spot .more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--tanne)}
.spot .more svg{width:18px;height:18px;transition:transform 200ms var(--ease-out)}
.spot .shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.spot.dark{background:var(--deep);border-color:var(--deep);color:var(--on-tanne)}
.spot.dark::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(234,241,236,.13),transparent 65%)}
.spot.dark h2{color:var(--on-tanne)}.spot.dark p,.spot.dark ul{color:var(--on-tanne-2)}
.spot.dark .for,.spot.dark .more,.spot.dark li svg{color:var(--sage)}
.spot.dark .shot{border-color:rgba(234,241,236,.16);background:var(--tanne-2)}

/* --- container scroll: the device lies back, then stands up as you scroll --- */
.cs{perspective:1100px}
.cs-card{transform-origin:50% 0;will-change:transform}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cs-card{animation:standup linear both;animation-timeline:view();animation-range:entry 10% cover 42%}
    @keyframes standup{from{transform:rotateX(22deg) scale(1.04) translateY(-10px)}to{transform:none}}
  }
}
.device{border-radius:22px;padding:10px;background:var(--device);box-shadow:0 0 0 1px rgba(0,0,0,.25),0 50px 90px -40px rgba(21,32,26,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.device .screen{border-radius:14px;overflow:hidden;background:#fff}

/* --- features with panel (Lager) --- */
.fp{display:grid;gap:18px;margin-top:48px}
.fp-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.fp-tabs::-webkit-scrollbar{display:none}
.fp-tab{flex:none;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:14px 16px;cursor:pointer;min-width:220px;transition:border-color 200ms ease,background-color 200ms ease,transform 160ms var(--ease-out)}
.fp-tab:active{transform:scale(.98)}
.fp-tab b{display:block;font-size:16px}
.fp-tab span{display:block;font-size:14px;color:var(--muted);margin-top:3px;line-height:1.45}
.fp-tab[aria-selected="true"]{border-color:var(--tanne);background:var(--tanne);color:var(--on-tanne)}
.fp-tab[aria-selected="true"] span{color:var(--on-tanne-2)}
@media (hover:hover) and (pointer:fine){.fp-tab[aria-selected="false"]:hover{border-color:var(--line-2)}}
.fp-panel{position:relative;border-radius:18px;background:var(--paper-2);border:1px solid var(--line);padding:18px;min-height:340px}
.fp-view{display:none}
.fp-view.on{display:block;animation:viewin 280ms var(--ease-out)}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fp-cap{font-size:12.5px;color:var(--muted);margin-top:12px}
@media (min-width:980px){
  .fp{grid-template-columns:340px 1fr;gap:26px;align-items:start}
  .fp-tabs{flex-direction:column;overflow:visible}
  .fp-tab{min-width:0}
  .fp-panel{padding:26px;min-height:460px;position:sticky;top:100px}
}

/* --- comparison: us vs the usual way --- */
.cmp-wrap{margin-top:46px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:15.5px}
.cmp th,.cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp thead th{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.01em}
.cmp tbody th{font-weight:600;width:24%}
.cmp td{color:var(--ink-2)}
.cmp .us{background:var(--tanne);color:var(--on-tanne)}
.cmp thead .us{border-radius:0}
.cmp td.us{color:var(--on-tanne)}
.cmp .yes,.cmp .no{display:inline-flex;gap:8px;align-items:flex-start}
.cmp svg{width:18px;height:18px;flex:none;margin-top:3px}
.cmp .no svg{color:#A44A3F}
.cmp td.us svg{color:var(--sage)}

/* --- principles (home) --- */
.pr{display:grid;gap:0;margin-top:46px;border-top:1px solid var(--line)}
.pr>div{padding:26px 0;border-bottom:1px solid var(--line)}
.pr h3{font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.01em;color:var(--tanne)}
.pr p{color:var(--ink-2);margin-top:8px;max-width:420px}
@media (min-width:860px){.pr{grid-template-columns:repeat(3,1fr);column-gap:40px;border-top:0}.pr>div{border-top:1px solid var(--line);border-bottom:0}}

/* --- Lager demo app (neutral demo data) --- */
.app{display:grid;grid-template-columns:1fr;font-size:12.5px;color:#1b2520;background:#fff;min-height:100%}
.app-side{display:none;background:#F3F5F2;border-right:1px solid #E3E8E2;padding:16px 12px}
.app-side .brand{font-family:var(--serif);font-size:18px;color:var(--tanne);padding:2px 8px 14px}
.app-side a{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;color:#4c5751;text-decoration:none;font-size:12.5px}
.app-side a.on{background:#fff;color:#1b2520;box-shadow:0 0 0 1px #E3E8E2}
.app-side i{width:7px;height:7px;border-radius:2px;background:#C5CEC6}
.app-side a.on i{background:var(--tanne)}
.app-main{padding:16px}
.app-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.app-top .mh{font-family:var(--serif);font-weight:400;font-size:20px}
.app-top .tag{font-size:11px;color:#5d6862;background:#F3F5F2;border-radius:999px;padding:4px 10px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
.kpi{border:1px solid #E3E8E2;border-radius:10px;padding:10px 12px}
.kpi b{display:block;font-family:var(--serif);font-weight:400;font-size:22px}
.kpi span{color:#5d6862;font-size:11.5px}
.board{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.col{background:#F6F8F5;border-radius:10px;padding:8px}
.col .ch{font-size:11px;font-weight:600;color:#5d6862;margin:2px 4px 8px;display:flex;justify-content:space-between}
.tk{background:#fff;border:1px solid #E3E8E2;border-radius:8px;padding:8px 9px;margin-bottom:6px}
.tk b{display:block;font-size:12px;font-weight:600}
.tk span{display:flex;justify-content:space-between;color:#5d6862;font-size:11px;margin-top:3px}
.st-ok,.st-warn,.st-late{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.st-ok::before,.st-warn::before,.st-late::before{content:"";width:6px;height:6px;border-radius:50%}
.st-ok{color:#24794C}.st-ok::before{background:#2F9E64}
.st-warn{color:#8A5A00}.st-warn::before{background:#D9A11E}
.st-late{color:#A1392E}.st-late::before{background:#C9483A}
.rows{border:1px solid #E3E8E2;border-radius:10px;overflow:hidden}
.rows div{display:grid;grid-template-columns:1.6fr .8fr .8fr;gap:8px;padding:9px 12px;border-top:1px solid #EEF1ED;align-items:center}
.rows div:first-child{border-top:0;background:#F6F8F5;color:#5d6862;font-size:11px;font-weight:600}
.bar{height:6px;border-radius:3px;background:#E6EBE5;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--tanne)}
.bar.warn i{background:#D9A11E}.bar.late i{background:#C9483A}
@container (min-width:620px){.app{grid-template-columns:170px 1fr}.app-side{display:block}.kpis{grid-template-columns:repeat(4,1fr)}.board{grid-template-columns:repeat(4,1fr)}}
.appbox{container-type:inline-size}
.spot .shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:0 0}

/* --- phones: comparison rows become stacked cards, app mock gets compact --- */
@media (max-width:700px){
  .cmp{min-width:0}
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
  .cmp tr{padding:16px 16px 12px;border-bottom:1px solid var(--line)}
  .cmp tr:last-child{border-bottom:0}
  .cmp th,.cmp td{padding:3px 0;border:0}
  .cmp tbody th{width:auto;font-size:16.5px;margin-bottom:6px}
  .cmp td::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:1px}
  .cmp td.us{background:transparent;color:var(--ink);border-left:3px solid var(--tanne);padding:4px 0 4px 10px;margin:4px 0 6px}
  .cmp td.us::before{color:var(--tanne)}
  .cmp td.us svg{color:var(--tanne)}
  .cmp-wrap{overflow:visible}
}
.tk span{flex-wrap:wrap;gap:2px 8px}
@container (max-width:619px){.board .col:nth-child(n+3){display:none}}
@media (max-width:699px){
  @supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){@keyframes standup{from{transform:rotateX(16deg) translateY(-6px)}to{transform:none}}}}
  .device{padding:6px;border-radius:16px}.device .screen{border-radius:11px}
}
.ft-row nav{flex-wrap:wrap;gap:10px 20px}

/* --- critic fixes (13 Oct) --- */
@media (max-width:979px){
  .fp-tabs{margin:0 -20px;padding:4px 20px 8px;scroll-snap-type:x mandatory;scroll-padding-inline:20px}
  .fp-tab{flex:0 0 min(76%,280px);min-width:0;scroll-snap-align:start}
}
@media (prefers-reduced-motion:no-preference){.cs.cs-load .cs-card{animation:standup 1000ms var(--ease-out) 450ms both}}
@media (max-width:699px){.canvas .win{display:none}.canvas .phone{display:block;width:min(240px,70%);margin:0 auto}}