/* ===== Tokens: light (default) ===== */
:root{
  --ink:#202225; --steel:#8A8F93; --mist:#E8E9E7;
  --signal:#E86A24; --ember:#B3521E;
  --bg:#F6F5F2; --surface:#FFFFFF; --surface-2:#EEEEEC; --elev:#F1F1EF;
  --text:#202225; --muted:#5E6367; --line:rgba(32,34,37,.12); --line-strong:rgba(32,34,37,.3);
  --inv-bg:#202225; --inv-text:#FFFFFF; --inv-accent:#E86A24;
  --header-bg:rgba(255,255,255,.92); --menu-bg:#FFFFFF; --grid-line:var(--line);
  --footer-bg:#202225; --footer-line:rgba(255,255,255,.12);
  --hero-scrim-x:linear-gradient(90deg,#202225 0%,#202225 34%,rgba(32,34,37,.82) 48%,rgba(32,34,37,.15) 72%,rgba(32,34,37,0) 100%);
  --hero-scrim-y:linear-gradient(180deg,rgba(32,34,37,.55),rgba(32,34,37,.92) 70%);
  --tile-scrim:linear-gradient(180deg,rgba(32,34,37,0) 30%,rgba(32,34,37,.88) 100%);
  --case-scrim:linear-gradient(180deg,rgba(32,34,37,.25),rgba(32,34,37,.92) 62%);
  --tile-ring:none;
  --map-bg:#EFEFED; --map-road:#FFFFFF; --map-hw:#C9CCCE; --map-label:#202225; --map-sub:#5E6367;
  --sh-bg-before:#ECEBE7; --sh-bg-after:#F7F7F5; --sh-peg:#DADCDB; --sh-post:#C4C7C9;
  --sh-board:#8A8F93; --sh-rail:#C9CCCE; --sh-div:#8A8F93; --sh-tag:#FFFDF6; --sh-tag-line:#C9C4B8;
  --logo-on-light:block; --logo-on-dark:none;
  --tg-moon:1; --tg-sun:0;
  color-scheme:light;

  /* Type scale: major third (1.25) */
  --fs-0:1rem; --fs-1:1.25rem; --fs-2:1.563rem; --fs-3:1.953rem; --fs-4:2.441rem;
  --fs-5:3.052rem; --fs-6:3.815rem; --fs-7:4.768rem;
  /* Spacing scale */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px; --sp-32:32px;
  --sp-48:48px; --sp-64:64px; --sp-96:96px; --sp-128:128px;
  --section:clamp(var(--sp-64),10vw,var(--sp-128));

  --font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Inter Tight","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1240px; --gut:clamp(20px,4vw,48px); --header-h:76px;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}
/* ===== Tokens: dark (OS preference unless the visitor chose light) ===== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#141517; --bg:#141517; --surface:#1D1F22; --surface-2:#191A1D; --elev:#24272B;
    --text:#F3F2EF; --muted:#A2A7AB; --line:rgba(243,242,239,.10); --line-strong:rgba(243,242,239,.3);
    --inv-bg:#F3F2EF; --inv-text:#141517; --inv-accent:#141517;
    --header-bg:rgba(20,21,23,.86); --menu-bg:#1A1B1E; --grid-line:#2A2D31;
    --footer-bg:#0E0F10; --footer-line:rgba(243,242,239,.10);
    --hero-scrim-x:linear-gradient(90deg,#141517 0%,#141517 34%,rgba(20,21,23,.82) 48%,rgba(20,21,23,.15) 72%,rgba(20,21,23,0) 100%);
    --hero-scrim-y:linear-gradient(180deg,rgba(20,21,23,.55),rgba(20,21,23,.94) 70%);
    --tile-scrim:linear-gradient(180deg,rgba(20,21,23,.05) 20%,rgba(20,21,23,.72) 55%,rgba(20,21,23,.95) 100%);
    --case-scrim:linear-gradient(180deg,rgba(20,21,23,.25),rgba(20,21,23,.94) 62%);
    --tile-ring:0 0 0 1px rgba(243,242,239,.10);
    --map-bg:#1B1D20; --map-road:#2C2F33; --map-hw:#4A4E52; --map-label:#F3F2EF; --map-sub:#A2A7AB;
    --sh-bg-before:#1E2023; --sh-bg-after:#25282C; --sh-peg:#2E3135; --sh-post:#34373B;
    --sh-board:#4A4E52; --sh-rail:#8A8F93; --sh-div:#9A9FA3; --sh-tag:#E9E5DA; --sh-tag-line:#9F9A8E;
    --logo-on-light:none; --logo-on-dark:block;
    --tg-moon:0; --tg-sun:1;
    color-scheme:dark;
  }
}
/* ===== Tokens: dark (chosen with the toggle) – keep identical to the block above ===== */
:root[data-theme="dark"]{
  --ink:#141517; --bg:#141517; --surface:#1D1F22; --surface-2:#191A1D; --elev:#24272B;
  --text:#F3F2EF; --muted:#A2A7AB; --line:rgba(243,242,239,.10); --line-strong:rgba(243,242,239,.3);
  --inv-bg:#F3F2EF; --inv-text:#141517; --inv-accent:#141517;
  --header-bg:rgba(20,21,23,.86); --menu-bg:#1A1B1E; --grid-line:#2A2D31;
  --footer-bg:#0E0F10; --footer-line:rgba(243,242,239,.10);
  --hero-scrim-x:linear-gradient(90deg,#141517 0%,#141517 34%,rgba(20,21,23,.82) 48%,rgba(20,21,23,.15) 72%,rgba(20,21,23,0) 100%);
  --hero-scrim-y:linear-gradient(180deg,rgba(20,21,23,.55),rgba(20,21,23,.94) 70%);
  --tile-scrim:linear-gradient(180deg,rgba(20,21,23,.05) 20%,rgba(20,21,23,.72) 55%,rgba(20,21,23,.95) 100%);
  --case-scrim:linear-gradient(180deg,rgba(20,21,23,.25),rgba(20,21,23,.94) 62%);
  --tile-ring:0 0 0 1px rgba(243,242,239,.10);
  --map-bg:#1B1D20; --map-road:#2C2F33; --map-hw:#4A4E52; --map-label:#F3F2EF; --map-sub:#A2A7AB;
  --sh-bg-before:#1E2023; --sh-bg-after:#25282C; --sh-peg:#2E3135; --sh-post:#34373B;
  --sh-board:#4A4E52; --sh-rail:#8A8F93; --sh-div:#9A9FA3; --sh-tag:#E9E5DA; --sh-tag-line:#9F9A8E;
  --logo-on-light:none; --logo-on-dark:block;
  --tg-moon:0; --tg-sun:1;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--sp-12));-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-bottom:env(safe-area-inset-bottom,0px)}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.025em;line-height:1.08;margin:0}
h2{font-size:clamp(var(--fs-3),4.2vw,var(--fs-5));font-weight:700;text-wrap:balance}
h3{font-size:var(--fs-1);font-weight:600;letter-spacing:-.01em;line-height:1.25}
/* Optical margin: pull large display type onto the true text edge */
.hero h1,h2,.years{margin-inline-start:-.045em}
p{margin:0}
.num,.years,.contact-info dd,.request-bar b,.art text,.scene text{font-variant-numeric:tabular-nums lining-nums}
.lead{font-size:1.125rem;color:var(--muted);max-width:56ch;text-wrap:pretty}
.tag{display:inline-flex;align-items:center;gap:10px;font-size:.875rem;font-weight:500;color:var(--muted)}
.tag::before{content:"";width:28px;height:2px;background:var(--signal)}
.bar{display:block;width:72px;height:4px;background:var(--signal);transform-origin:left center;transition:transform .5s var(--ease-out)}
section{padding:var(--section) 0}
.pt-0{padding-top:0}
.sec-head{display:grid;grid-template-columns:1fr;gap:var(--sp-16);margin-bottom:clamp(var(--sp-48),5vw,var(--sp-64))}
.sec-head h2{margin-top:var(--sp-16)}
@media(min-width:900px){.sec-head{grid-template-columns:1.1fr 1fr;gap:var(--sp-48);align-items:last baseline}.sec-head .lead{justify-self:end}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 var(--sp-24);border-radius:4px;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:var(--ember)}
.btn-ghost{border-color:var(--line);background:transparent;color:var(--text)}
.btn-ghost:hover{border-color:var(--text)}
.btn-light{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}
.btn-light:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn-dark{background:var(--inv-bg);color:var(--inv-text)}

/* Logo – one image per surface, switched by the theme tokens */
.logo{display:flex;align-items:center;text-decoration:none;min-height:44px}
.logo img{height:50px;width:auto}
.logo .on-light{display:var(--logo-on-light)}
.logo .on-dark{display:var(--logo-on-dark)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.site-header>.wrap{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-24)}
.nav{display:none;gap:var(--sp-4)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-12);font-size:.92rem;font-weight:500;text-decoration:none;color:var(--muted);transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--signal)}
.hdr-actions{display:flex;align-items:center;gap:var(--sp-12)}
.header-cta{display:none}
.icon-btn{display:inline-flex;width:44px;height:44px;flex:none;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:4px;cursor:pointer;transition:border-color .2s}
.icon-btn:hover{border-color:var(--line-strong)}
.theme-toggle{position:relative}
.theme-toggle svg{position:absolute;width:20px;height:20px;transition:transform .2s ease-out,opacity .2s ease-out}
.theme-toggle .moon{opacity:var(--tg-moon);transform:rotate(calc((1 - var(--tg-moon)) * -90deg)) scale(calc(.5 + var(--tg-moon) * .5))}
.theme-toggle .sun{opacity:var(--tg-sun);transform:rotate(calc((1 - var(--tg-sun)) * 90deg)) scale(calc(.5 + var(--tg-sun) * .5))}
@media(min-width:1040px){.nav{display:flex}.header-cta{display:inline-flex}.menu-btn{display:none}}
.mobile-nav{position:absolute;top:100%;left:0;right:0;display:grid;max-height:calc(100dvh - var(--header-h));overflow-y:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sp-8) var(--gut) var(--sp-24);background:var(--menu-bg);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s ease-out,transform .25s ease-out,visibility 0s linear .25s}
.mobile-nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease-out,transform .25s ease-out,visibility 0s}
.mobile-nav a[aria-current="page"]{color:var(--signal)}
.mobile-nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500;font-size:1.05rem}
.mobile-nav .btn{margin-top:var(--sp-16);border-bottom:0}
@media(min-width:1040px){.mobile-nav{display:none}}

/* Hero – key visual (dark in both themes) */
.hero{position:relative;padding:0;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0 0 0 auto;width:min(66%,1000px);height:100%;object-fit:cover;object-position:left center;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-scrim-x)}
.hero .wrap{min-height:min(84vh,760px);display:flex;flex-direction:column;justify-content:center;padding-top:var(--sp-64);padding-bottom:var(--sp-96)}
.hero h1{font-size:clamp(var(--fs-4),5.2vw,var(--fs-7));font-weight:800;letter-spacing:-.035em;line-height:1.02;margin-top:var(--sp-24);margin-bottom:var(--sp-24)}
.hero h1 span{display:block}
.hero h1 .o{color:var(--signal)}
.hero .lead{color:#D5D7D9;font-size:var(--fs-1);max-width:44ch}
.hero .tag{color:#C9CCCE}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-32)}
.hero-glow{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--signal),rgba(232,106,36,.2) 70%,transparent)}
.scroll-cue{position:absolute;left:50%;bottom:var(--sp-16);transform:translateX(-50%);display:grid;justify-items:center;gap:var(--sp-8);width:44px;min-height:44px;padding-top:var(--sp-4);color:#C9CCCE;text-decoration:none}
.scroll-cue span{font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl;display:none}
.scroll-cue i{display:block;width:1px;height:40px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55) 45%,var(--signal) 100%)}
.scroll-cue:hover i{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.8) 45%,var(--signal) 100%)}
/* 1024–1280: tighten the hero so the headline sits against the image instead of floating in the dark */
@media(min-width:1024px) and (max-width:1280px){
  .hero-img{width:60%}
  .hero .wrap{min-height:min(72vh,640px)}
  .hero h1{font-size:clamp(var(--fs-5),5.6vw,var(--fs-6))}
  .hero .lead{max-width:40ch}
}
@media(max-width:780px){
  .hero-img{width:100%;opacity:.55}
  .hero::before{background:var(--hero-scrim-y)}
  .scroll-cue{display:none}
}

.values{background:var(--surface);border-bottom:1px solid var(--line)}
.values .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.values .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}}
.value{padding:var(--sp-24) var(--sp-24) var(--sp-32) 0;display:flex;gap:var(--sp-16);align-items:flex-start}
.value+.value{padding-left:var(--sp-24);border-left:1px solid var(--line)}
@media(max-width:899px){.value:nth-child(3){padding-left:0;border-left:0}.value:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:520px){.value{flex-direction:column;gap:var(--sp-8);padding-right:var(--sp-12)}.value+.value{padding-left:var(--sp-12)}.value:nth-child(3){padding-left:0}}
.value svg{flex:none;width:28px;height:28px;color:var(--signal)}
.value strong{display:block;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.value span{color:var(--muted);font-size:.9rem}

/* Leistungen – photo tiles */
.tiles{display:grid;gap:var(--sp-16)}
@media(min-width:900px){.tiles{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto}.tile.big{grid-row:span 2}}
.tile{position:relative;border-radius:6px;overflow:hidden;min-height:340px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(var(--sp-24),3vw,40px);text-decoration:none;isolation:isolate;box-shadow:var(--tile-ring)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transition:transform .8s var(--ease-out)}
.tile::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--tile-scrim)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,21,23,.18);opacity:0;transition:opacity .5s var(--ease-out)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.03)}
.tile:hover::after,.tile:focus-visible::after{opacity:1}
.tile:hover .bar,.tile:focus-visible .bar{transform:scaleX(1.6)}
.tile svg.ic{width:40px;height:40px;margin-bottom:var(--sp-16);color:#fff}
.tile h3{font-size:clamp(var(--fs-2),3vw,var(--fs-4));font-weight:700;letter-spacing:-.025em;line-height:1.05}
.tile h3 em{font-style:normal;color:var(--signal)}
.tile p{margin-top:var(--sp-12);color:#E3E4E5;max-width:40ch}
.tile .bar{margin-top:var(--sp-24)}
.tile.big{min-height:520px}

/* Lösungen */
.solutions{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sol-grid{display:grid;gap:var(--sp-32)}
@media(min-width:980px){.sol-grid{grid-template-columns:360px 1fr;gap:var(--sp-48)}}
.problems{display:grid;gap:var(--sp-8);align-content:start}
.problem{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:var(--sp-16) var(--sp-24);cursor:pointer;display:grid;gap:var(--sp-4);transition:border-color .2s,box-shadow .2s}
.problem small{color:var(--muted);font-size:.82rem}
.problem strong{font-weight:600;font-size:1.02rem}
.problem:hover{border-color:var(--line-strong)}
.problem[aria-selected="true"]{border-color:var(--signal);box-shadow:inset 4px 0 0 var(--signal)}
.compare{position:relative;border-radius:6px;overflow:hidden;background:var(--surface);aspect-ratio:560/400;user-select:none;touch-action:pan-y;border:1px solid var(--line)}
.compare svg{position:absolute;inset:0;width:100%;height:100%}
.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:var(--signal);transform:translateX(-1px);pointer-events:none}
.compare .handle::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;border-radius:50%;background:var(--signal);transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(232,106,36,.22)}
.compare .handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;color:#fff;font-style:normal;font-size:13px;font-weight:700;letter-spacing:2px;white-space:nowrap}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare:has(input:focus-visible){outline:2px solid var(--signal);outline-offset:3px}
.compare .lbl{position:absolute;top:var(--sp-12);padding:6px 10px;font-size:.78rem;font-weight:600;border-radius:3px;pointer-events:none}
.compare .lbl.l{left:var(--sp-12);background:var(--inv-bg);color:var(--inv-text)}
.compare .lbl.r{right:var(--sp-12);background:var(--signal);color:#fff}
.sol-steps{display:grid;gap:1px;background:var(--grid-line);margin-top:var(--sp-24);border-radius:4px;overflow:hidden;border:1px solid var(--line)}
@media(min-width:700px){.sol-steps{grid-template-columns:repeat(3,1fr)}}
.sol-step{background:var(--surface);padding:var(--sp-24)}
.sol-step small{display:flex;align-items:center;gap:var(--sp-8);color:var(--text);font-weight:600;font-size:.8rem;margin-bottom:var(--sp-8)}
.sol-step small::before{content:"";width:16px;height:2px;background:var(--signal)}
.sol-step p{color:var(--muted);font-size:.95rem}
[data-focus]{transition:stroke .3s,stroke-width .3s,opacity .3s}
.scene[data-active="esl"] [data-focus="esl"] rect.frame,
.scene[data-active="divider"] [data-focus="divider"],
.scene[data-active="stopper"] [data-focus="stopper"] rect.frame{stroke:var(--signal);stroke-width:3}
.scene [data-focus="pusher"]{opacity:0}
.scene[data-active="pusher"] [data-focus="pusher"]{opacity:1}

/* Produkte */
.feature-row{display:grid;gap:var(--sp-16);margin-bottom:var(--sp-48)}
@media(min-width:760px){.feature-row{grid-template-columns:repeat(3,1fr)}}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.feat img{aspect-ratio:4/3;object-fit:cover;width:100%}
.feat div{padding:var(--sp-24)}
.feat p{color:var(--muted);font-size:.93rem;margin-top:var(--sp-8)}
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-bottom:var(--sp-24)}
.chip{border:1px solid var(--line);background:var(--surface);min-height:44px;padding:0 var(--sp-16);border-radius:999px;font-size:.9rem;font-weight:500;cursor:pointer;transition:border-color .2s}
.chip:hover{border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--inv-bg);color:var(--inv-text);border-color:var(--inv-bg)}
.prod-grid{display:grid;gap:1px;background:var(--grid-line);border:1px solid var(--line)}
@media(min-width:620px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.prod-grid{grid-template-columns:repeat(4,1fr)}}
.prod{background:var(--surface);display:flex;flex-direction:column}
.prod[hidden]{display:none}
.prod .art{background:var(--elev);aspect-ratio:4/3;display:grid;place-items:center;padding:var(--sp-16);color:var(--text)}
.prod .art svg{width:74%;height:auto}
.prod .body{padding:var(--sp-24);display:flex;flex-direction:column;gap:var(--sp-8);flex:1}
.prod .cat{font-size:.8rem;color:var(--muted)}
.prod p{color:var(--muted);font-size:.93rem;flex:1}
.add{margin-top:var(--sp-8);align-self:flex-start;display:inline-flex;align-items:center;gap:var(--sp-8);min-height:44px;border:1px solid var(--line);background:transparent;border-radius:4px;padding:0 var(--sp-16);font-size:.88rem;font-weight:600;cursor:pointer;transition:border-color .2s,background-color .2s,transform .1s}
.add:hover{border-color:var(--text)}
.add:active{transform:translateY(1px)}
.add[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#fff}
.add .ic{width:16px;display:inline-grid;place-items:center;font-size:15px;line-height:1}
.request-bar{position:fixed;left:50%;bottom:calc(var(--sp-16) + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);z-index:60;background:var(--inv-bg);color:var(--inv-text);border-radius:6px;padding:var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-24);display:flex;align-items:center;gap:var(--sp-16);box-shadow:0 18px 40px rgba(0,0,0,.25);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s;width:max-content;max-width:calc(100% - 32px)}
.request-bar.show{transform:translate(-50%,0);visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
.request-bar span{font-size:.92rem}
.request-bar b{color:var(--inv-accent)}
.request-bar .btn{min-height:44px}

/* ===== Shared page components ===== */
/* Horizontal scrollers with edge fades (classes set by JS) */
.hscroll{display:flex;gap:var(--sp-8);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  --fade-l:0px;--fade-r:0px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent)}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{flex:none;scroll-snap-align:start}
.hscroll.fade-l{--fade-l:40px}
.hscroll.fade-r{--fade-r:40px}

/* Sub-page hero */
.page-hero{position:relative;padding:0;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.page-hero .ph-img{position:absolute;inset:0 0 0 auto;width:min(52%,760px);height:100%;object-fit:cover;z-index:-2}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-scrim-x)}
.page-hero .wrap{min-height:clamp(360px,46vh,480px);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-16);padding-top:var(--sp-48);padding-bottom:var(--sp-64)}
.page-hero h1{font-size:clamp(var(--fs-4),4.8vw,var(--fs-6));font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0 0 0 -.045em;max-width:18ch;text-wrap:balance}
.page-hero h1 .o{color:var(--signal)}
.page-hero .lead{color:#D5D7D9;max-width:52ch}
.page-hero .tag{color:#C9CCCE}
.page-hero.plain .wrap{min-height:clamp(300px,38vh,400px)}
@media(max-width:780px){.page-hero .ph-img{width:100%;opacity:.4}.page-hero::before{background:var(--hero-scrim-y)}}
.crumbs ol{list-style:none;margin:0 0 var(--sp-16);padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8);font-size:.8125rem;color:#B7BBBE}
.crumbs li+li::before{content:"/";margin-right:var(--sp-8);color:rgba(255,255,255,.35)}
.crumbs a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}
.crumbs a:hover{color:#fff}
.crumbs [aria-current="page"]{color:#fff}

/* Link cards */
.cards{display:grid;gap:var(--sp-16)}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;gap:var(--sp-8);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:var(--sp-24);text-decoration:none;color:var(--text);transition:border-color .2s}
.card:hover{border-color:var(--line-strong)}
.card small{color:var(--muted);font-size:.82rem;font-weight:500}
.card h3{font-size:var(--fs-1)}
.card p{color:var(--muted);font-size:.95rem;flex:1}
.more{display:inline-flex;align-items:center;gap:var(--sp-8);font-weight:600;font-size:.9rem;margin-top:var(--sp-8);color:var(--text)}
.more svg{width:16px;height:16px;flex:none;color:var(--signal);transition:transform .25s var(--ease-out)}
a:hover .more svg,a.more:hover svg{transform:translateX(4px)}
a.more{text-decoration:none;min-height:44px}
.pic-card{padding:0;overflow:hidden;gap:0}
.pic-card .pc-img{aspect-ratio:3/2;overflow:hidden;background:var(--elev)}
.pic-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.pic-card:hover img{transform:scale(1.03)}
.pic-card .pc-body{padding:var(--sp-16) var(--sp-24) var(--sp-24);display:grid;gap:var(--sp-4)}

/* The four strengths, neutral version for sub pages (the orange band stays unique to the home page) */
.str-strip{display:grid;gap:1px;background:var(--grid-line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
@media(min-width:620px){.str-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.str-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.str-strip div{background:var(--surface);padding:var(--sp-24)}
.str-strip h3{font-size:var(--fs-0);display:flex;align-items:center;gap:var(--sp-12);margin-bottom:var(--sp-8)}
.str-strip h3::before{content:"";flex:none;width:8px;height:8px;background:var(--signal);transform:skewX(-20deg)}
.str-strip p{color:var(--muted);font-size:.93rem}

/* Numbered steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1px;background:var(--grid-line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}.steps.s3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{counter-increment:s;background:var(--surface);padding:var(--sp-24);display:grid;gap:var(--sp-8);align-content:start}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:var(--fs-2);line-height:1;color:var(--signal);font-variant-numeric:tabular-nums;margin-bottom:var(--sp-8)}
.steps h3{font-size:var(--fs-0)}
.steps p{color:var(--muted);font-size:.93rem}
.band{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Closing call to action */
.cta-band{background:var(--surface-2);border-top:1px solid var(--line)}
.cta-band .wrap{display:grid;gap:var(--sp-24);align-items:end}
@media(min-width:900px){.cta-band .wrap{grid-template-columns:minmax(0,1.4fr) auto;gap:var(--sp-48)}}
.cta-band h2{font-size:clamp(var(--fs-3),3.4vw,var(--fs-4))}
.cta-band p{color:var(--muted);margin-top:var(--sp-12);max-width:52ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-12)}

/* Bullet list with the skewed orange square */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-12)}
.ticks li{display:flex;gap:var(--sp-12);align-items:baseline;padding-bottom:var(--sp-12);border-bottom:1px solid var(--line);font-weight:500}
.ticks li::before{content:"";flex:none;width:8px;height:8px;background:var(--signal);transform:skewX(-20deg) translateY(-1px)}

/* Lösungen: problem detail */
.issues{border-top:1px solid var(--line)}
.issue{display:grid;gap:var(--sp-24);padding:var(--sp-48) 0;border-bottom:1px solid var(--line)}
@media(min-width:900px){.issue{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-48)}}
.issue h2{font-size:clamp(var(--fs-2),2.6vw,var(--fs-3));margin-top:var(--sp-12)}
.issue dl{display:grid;gap:1px;background:var(--grid-line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:0}
@media(min-width:700px){.issue dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.issue dl div{background:var(--surface);padding:var(--sp-24)}
.issue dt{display:flex;align-items:center;gap:var(--sp-8);font-weight:600;font-size:.8rem;margin-bottom:var(--sp-8)}
.issue dt::before{content:"";width:16px;height:2px;background:var(--signal)}
.issue dd{margin:0;color:var(--muted);font-size:.95rem}

/* Branchen page */
.subnav{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px));z-index:40;background:var(--header-bg);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.subnav .hscroll{padding-block:var(--sp-12)}
.subnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-16);border-radius:999px;border:1px solid var(--line);background:var(--surface);text-decoration:none;font-size:.9rem;font-weight:500;color:var(--muted);transition:border-color .2s,color .2s}
.subnav a:hover{color:var(--text);border-color:var(--line-strong)}
.subnav a[aria-current="true"]{background:var(--inv-bg);color:var(--inv-text);border-color:var(--inv-bg)}
html:has(.subnav){scroll-padding-top:calc(var(--header-h) + 84px)}
.branch{display:grid;gap:var(--sp-32);align-items:center;padding:var(--sp-64) 0;border-bottom:1px solid var(--line)}
.branch:first-child{padding-top:0}
.branch:last-child{border-bottom:0;padding-bottom:0}
@media(min-width:900px){.branch{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-64)}.branch:nth-child(even) .branch-pic{order:2}}
.branch-pic{border-radius:6px;overflow:hidden;aspect-ratio:4/3;background:var(--elev);box-shadow:var(--tile-ring)}
.branch-pic img{width:100%;height:100%;object-fit:cover}
.branch .txt{display:grid;gap:var(--sp-16);align-content:start}
.branch h2{font-size:clamp(var(--fs-3),3.2vw,var(--fs-4))}
.branch .txt>p{color:var(--muted)}
.branch .sub{font-size:.85rem;font-weight:500}
.branch .btn{justify-self:start;margin-top:var(--sp-8)}

/* Home: Über uns teaser */
.about-teaser{display:grid;gap:var(--sp-32);align-items:end}
@media(min-width:900px){.about-teaser{grid-template-columns:auto minmax(0,1fr);gap:var(--sp-64)}}
.about-teaser .years{margin-top:0}
.about-teaser p{color:var(--muted);max-width:56ch}
.about-teaser .more{margin-top:var(--sp-16)}

/* Kontakt: anchor target for the request list */
#anfrage{scroll-margin-top:calc(var(--header-h) + var(--sp-24))}

/* Referenzen */
.refs{background:var(--surface-2)}
.case{background:var(--surface);border-radius:6px;overflow:hidden;display:grid;border:1px solid var(--line)}
@media(min-width:980px){.case{grid-template-columns:1fr 1.2fr}}
.case-intro{position:relative;padding:clamp(var(--sp-32),4vw,var(--sp-48));color:#fff;display:flex;flex-direction:column;gap:var(--sp-16);justify-content:flex-end;min-height:420px;isolation:isolate}
.case-intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.case-intro::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--case-scrim)}
.case-intro .note{position:absolute;top:var(--sp-24);left:var(--sp-24);font-size:.8rem;color:#fff;background:rgba(20,21,23,.6);border:1px dashed rgba(255,255,255,.4);padding:6px 10px;border-radius:4px}
.case-intro h3{font-size:clamp(var(--fs-2),2.4vw,var(--fs-3));font-weight:700}
.case-intro p{color:#E3E4E5}
.case-intro dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-16);margin:0;font-size:.92rem}
.case-intro dt{color:#C9CCCE}.case-intro dd{margin:0}
.case-steps{list-style:none;margin:0;padding:clamp(var(--sp-24),3vw,40px);counter-reset:s}
.case-steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:var(--sp-16);padding:var(--sp-24) 0;border-bottom:1px solid var(--line)}
.case-steps li:last-child{border-bottom:0}
.case-steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;border:1.5px solid var(--signal);color:var(--signal);display:grid;place-items:center;font-weight:700;font-family:var(--display);font-variant-numeric:tabular-nums}
.case-steps h3{margin:var(--sp-4) 0 var(--sp-8);font-size:var(--fs-1);font-weight:600;letter-spacing:-.015em}
.case-steps p{color:var(--muted);font-size:.95rem}
.logos{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--grid-line);border:1px solid var(--line);margin-top:var(--sp-48)}
@media(min-width:760px){.logos{grid-template-columns:repeat(6,1fr)}}
.logos li{background:var(--surface);min-height:88px;display:grid;place-items:center;color:var(--muted);font-size:.82rem}

/* Über uns */
.about-photo{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/7;margin-bottom:clamp(var(--sp-48),6vw,var(--sp-96));box-shadow:var(--tile-ring)}
.about-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.about-photo{aspect-ratio:4/3}.about-photo img{object-position:65% center}}
.about-grid{display:grid;gap:var(--sp-48)}
@media(min-width:980px){.about-grid{grid-template-columns:.9fr 1.1fr;gap:var(--sp-96)}}
.years{font-family:var(--display);font-weight:800;font-size:clamp(7.451rem,16vw,11.642rem);line-height:.8;letter-spacing:-.06em;display:flex;align-items:flex-start;gap:var(--sp-8);margin-top:var(--sp-32)}
.years sup{font-size:.28em;color:var(--signal);letter-spacing:0;margin-top:.2em}
.years-cap{margin-top:var(--sp-16);color:var(--muted);max-width:36ch}
.about-list{border-top:1px solid var(--line)}
.about-item{display:grid;gap:var(--sp-8);padding:var(--sp-24) 0;border-bottom:1px solid var(--line)}
@media(min-width:640px){.about-item{grid-template-columns:170px 1fr;gap:var(--sp-24)}}
.about-item h3{font-size:var(--fs-0)}
.about-item p{color:var(--muted)}
.person{display:flex;gap:var(--sp-16);align-items:center;margin-top:var(--sp-16)}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--inv-bg);color:var(--inv-text);display:grid;place-items:center;font-family:var(--display);font-weight:700}
.person small{display:block;color:var(--muted)}

/* Stärken – the one orange band */
.strengths{background:var(--signal);color:#fff;padding:clamp(var(--sp-48),7vw,var(--sp-96)) 0}
.str-grid{display:grid;gap:var(--sp-32)}
@media(min-width:900px){.str-grid{grid-template-columns:1fr 2fr;gap:var(--sp-64)}}
.strengths h2{color:#fff}
.str-items{display:grid;gap:1px;background:rgba(255,255,255,.3)}
@media(min-width:620px){.str-items{grid-template-columns:repeat(2,1fr)}}
.str-items div{background:var(--signal);padding:var(--sp-24) var(--sp-24) var(--sp-24) 0}
@media(min-width:620px){.str-items div:nth-child(even){padding-left:var(--sp-24)}}
.str-items h3{margin-bottom:var(--sp-8)}
.str-items p{color:rgba(255,255,255,.92);font-size:.95rem}

/* Kontakt */
.contact-grid{display:grid;gap:var(--sp-48)}
@media(min-width:980px){.contact-grid{grid-template-columns:1fr 1fr;gap:var(--sp-64)}}
form{display:grid;gap:var(--sp-16)}
.row{display:grid;gap:var(--sp-16)}
@media(min-width:620px){.row{grid-template-columns:1fr 1fr}}
label,.field-label{display:grid;gap:6px;font-size:.88rem;font-weight:500}
.field-label{margin-bottom:6px}
input,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:var(--sp-12) var(--sp-16);min-height:48px;width:100%}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(232,106,36,.18)}
.req-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.req-chips:empty{display:none}
.req-chips li{display:inline-flex;align-items:center;gap:2px;background:var(--elev);padding:0 0 0 var(--sp-12);border-radius:3px;font-size:.85rem}
.req-chips button{border:0;background:transparent;cursor:pointer;width:44px;height:44px;font-size:1rem;line-height:1;color:var(--muted)}
.req-chips button:hover{color:var(--text)}
.form-msg{font-size:.9rem;color:var(--muted)}
.form-actions{display:flex;flex-wrap:wrap;gap:var(--sp-12);align-items:center}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.map{position:relative;aspect-ratio:16/10;background:var(--map-bg)}
.map svg{width:100%;height:100%}
.map .m-bg{fill:var(--map-bg)}
.map .m-road{stroke:var(--map-road)}
.map .m-hw{stroke:var(--map-hw)}
.map .m-a1{fill:var(--steel)}
.map .m-label{fill:var(--map-label)}
.map .m-sub{fill:var(--map-sub)}
.map a{position:absolute;right:var(--sp-12);bottom:var(--sp-12)}
.contact-info{padding:var(--sp-24);display:grid;gap:var(--sp-16)}
.contact-info dl{display:grid;grid-template-columns:90px 1fr;gap:var(--sp-8) var(--sp-16);margin:0}
.contact-info dt{color:var(--muted);font-size:.9rem}
.contact-info dd{margin:0;font-weight:500}
.contact-info dd a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
.contact-info dd a:hover{color:var(--signal)}
.wa{background:#177F44;color:#fff;justify-self:start}.wa:hover{background:#136C3A}

footer{background:var(--footer-bg);color:#B7BBBE;padding:var(--sp-64) 0 var(--sp-32);font-size:.9rem}
.foot{display:grid;gap:var(--sp-32)}
@media(min-width:900px){.foot{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer .foot-h{color:#fff;font-size:.95rem;line-height:1.4;margin:0 0 var(--sp-8);font-weight:600;letter-spacing:0;font-family:var(--font)}
footer ul{list-style:none;margin:0;padding:0;display:grid}
footer li{min-height:32px;display:flex;align-items:center}
footer a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin:-6px 0}
footer a:hover{color:#fff}
.footer-logo img{height:56px;width:auto}
.foot-note{margin-top:var(--sp-16);max-width:32ch}
.foot-bottom{margin-top:var(--sp-48);padding-top:var(--sp-24);border-top:1px solid var(--footer-line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-12)}
.foot-bottom nav{display:flex;gap:var(--sp-24)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Theme switch is instant; only the toggle icon animates */
html.no-tx *:not(.theme-toggle svg),html.no-tx *::before,html.no-tx *::after{transition:none!important}

/* Reveal on scroll – only armed by JS when motion is allowed */
html.rv [data-rv]{transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:calc(var(--i,0) * 60ms)}
html.rv [data-rv]:not(.in){opacity:0;transform:translateY(16px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.rv [data-rv]:not(.in){opacity:1;transform:none}
}

/* Language switch */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 var(--sp-8);border:1px solid var(--line);border-radius:4px;text-decoration:none;font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:var(--text);transition:border-color .2s}
.lang-switch:hover{border-color:var(--line-strong)}
.mobile-nav .lang-row{display:flex;gap:var(--sp-8);padding-top:var(--sp-16);border-bottom:0;min-height:0}
.mobile-nav .lang-row a{min-height:44px;padding:0 var(--sp-16);border:1px solid var(--line);border-radius:4px;font-size:.9rem;border-bottom:1px solid var(--line)}
.mobile-nav .lang-row a[aria-current="true"]{background:var(--inv-bg);color:var(--inv-text);border-color:var(--inv-bg)}
@media(max-width:359px){.hdr-actions{gap:var(--sp-8)}.hdr-actions .lang-switch{display:none}}

/* Skip link */
.skip{position:absolute;left:var(--sp-16);top:-100px;z-index:100;background:var(--inv-bg);color:var(--inv-text);padding:var(--sp-12) var(--sp-16);border-radius:4px;text-decoration:none;font-weight:600}
.skip:focus{top:var(--sp-12)}

/* Feature cards as links */
a.feat{text-decoration:none;color:inherit;transition:border-color .2s}
a.feat:hover{border-color:var(--line-strong)}
a.feat .pc-img{overflow:hidden}
a.feat img{transition:transform .8s var(--ease-out)}
a.feat:hover img{transform:scale(1.03)}