/* Inter — self-hosted variable font (DSGVO: keine Google-Fonts-Requests) */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --r-card:14px;
  --r-panel:20px;
  --red:#e32118;
  --red-dark:#c81710;
  --ink:#101522;
  --muted:#687083;
  --line:#e8ebf0;
  --soft:#f7f8fb;
  --card:#ffffff;
  --shadow:0 22px 70px rgba(20,32,55,.09);
  --shadow-sm:0 10px 30px rgba(20,32,55,.08);
  --radius:18px;
  --container:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}

/* ============================================================
   TOP NAV — pill (matches homepage partials/nav.blade.php)
   Floating logo left + translucent rounded pill right.
   ============================================================ */
.cad-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:72px;padding-inline:max(clamp(20px,5vw,40px), calc((100% - var(--container)) / 2));
  background:transparent;
}
.cad-logo{display:flex;align-items:center;height:64px;flex:none;transition:opacity .2s ease}
.cad-logo img{max-width:none}
.cad-logo:hover{opacity:.8}
.cad-logo img{height:100%;width:auto;mix-blend-mode:multiply}
html.dark .cad-logo img{mix-blend-mode:normal;filter:invert(1) hue-rotate(180deg) saturate(1.4) brightness(1.05)}

.nav-pill{
  display:flex;align-items:center;gap:6px;
  border-radius:var(--r-card);padding:6px 8px;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(229,231,235,0.6);
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}
html.dark .nav-pill{
  background:rgba(17,24,39,0.72);
  border-color:rgba(255,255,255,0.10);
  box-shadow:0 1px 2px rgba(0,0,0,0.45);
}

.pill-links{display:flex;align-items:center;gap:2px}
.pill-links a{
  padding:8px 12px;border-radius:9999px;font-size:13px;font-weight:700;
  color:#374151;transition:background .15s ease,color .15s ease;
}
.pill-links a:hover{background:rgba(0,0,0,.05);color:#111827}
html.dark .pill-links a{color:#d1d5db}
html.dark .pill-links a:hover{background:rgba(255,255,255,.08);color:#f9fafb}

.pill-divider{width:1px;height:22px;background:rgba(0,0,0,.10);margin:0 2px}
html.dark .pill-divider{background:rgba(255,255,255,.14)}

/* language selector */
.pill-lang{position:relative}
.pill-lang-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;border:0;background:none;cursor:pointer;border-radius:9999px;
  font-size:13px;font-weight:600;color:#374151;transition:background .15s ease;
}
.pill-lang-btn:hover{background:rgba(0,0,0,.05)}
.pill-lang-btn .ic{color:#6b7280}
.pill-lang-code{font-weight:700;text-transform:uppercase}
html.dark .pill-lang-btn{color:#d1d5db}
html.dark .pill-lang-btn:hover{background:rgba(255,255,255,.08)}
html.dark .pill-lang-btn .ic{color:#9ca3af}
.pill-lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);width:180px;z-index:60;
  background:#fff;border:1px solid #eef0f3;border-radius:var(--r-card);
  box-shadow:0 18px 44px rgba(20,32,55,.14);padding:6px;overflow:hidden;
}
html.dark .pill-lang-menu{background:#1f2734;border-color:#334155;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.pill-lang-menu form{margin:0}
.pill-lang-item{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 12px;border:0;background:none;cursor:pointer;border-radius:10px;
  font-size:13px;font-weight:600;color:#374151;text-align:left;transition:background .12s ease;
}
.pill-lang-item:hover{background:#f5f6f8}
.pill-lang-item.is-active{background:#f5f6f8;font-weight:800;color:#111827}
.pill-lang-item .flag{width:auto;height:auto;margin:0;padding:0;border-radius:0;display:inline;place-items:normal;background:none;box-shadow:none;font-size:18px;line-height:1}
.pill-lang-item .check{margin-left:auto;color:var(--red)}
html.dark .pill-lang-item{color:#cbd5e1}
html.dark .pill-lang-item:hover{background:#2a3444}
html.dark .pill-lang-item.is-active{background:#2a3444;color:#f8fafc}

/* icon buttons */
.pill-icon{
  width:36px;height:36px;display:grid;place-items:center;border:0;background:none;
  cursor:pointer;border-radius:9999px;color:#4b5563;transition:background .15s ease,color .15s ease;
}
.pill-icon:hover{background:rgba(0,0,0,.05);color:#111827}
html.dark .pill-icon{color:#cbd5e1}
html.dark .pill-icon:hover{background:rgba(255,255,255,.08);color:#f9fafb}
.pill-wa:hover{color:#25D366}
html.dark .pill-wa:hover{color:#25D366}
.pill-icon .ic{display:block}
/* sun in dark, moon in light */
.pill-icon .sun{display:none}
html.dark .pill-icon .sun{display:block}
html.dark .pill-icon .moon{display:none}

/* CTA */
.pill-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red);color:#fff;padding:9px 18px;border-radius:9999px;
  font-size:13px;font-weight:800;transition:transform .18s ease,background .18s ease;
  box-shadow:0 6px 18px rgba(227,33,24,.22);white-space:nowrap;
}
.pill-cta:hover{background:var(--red-dark);transform:scale(1.04)}

.nav-toggle{display:none;width:40px;height:40px;border:0;border-radius:10px;background:rgba(0,0,0,.05);align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.nav-toggle span{width:18px;height:2px;background:#141a26;display:block}
html.dark .nav-toggle{background:rgba(255,255,255,.10)}
html.dark .nav-toggle span{background:#e5e7eb}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 24px;border-radius:8px;
  border:1px solid transparent;font-weight:800;font-size:13px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 12px 26px rgba(227,33,24,.22)}
.btn-primary:hover{background:var(--red-dark);box-shadow:0 18px 34px rgba(227,33,24,.26)}
.btn-soft{background:#fff;color:#1d2430;border-color:#edf0f5;box-shadow:var(--shadow-sm)}
.btn-outline{background:#fff;color:#1d2430;border-color:#dde2ea;box-shadow:0 10px 28px rgba(20,32,55,.04);height:44px;padding:0 18px}
.btn-light{background:#fff;color:var(--red);height:52px;padding-inline:30px;box-shadow:0 14px 32px rgba(91,0,0,.16)}
.play{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid #d6dae3;font-size:10px}
.section-shell{position:relative;padding-inline:clamp(24px,5vw,84px)}
.hero{
  min-height:655px;
  padding-top:118px;
  display:grid;
  align-items:center;
  background:
    radial-gradient(circle at 67% 23%, rgba(230,235,242,.82), transparent 34%),
    linear-gradient(90deg,#fff 0%,#fff 50%,#fbfcfe 100%);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0 46% auto 0;height:100%;pointer-events:none;opacity:.42;
  background-image:
    linear-gradient(to right, rgba(205,211,222,.36) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(205,211,222,.32) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(90deg,#000,transparent 72%);
}
.hero-grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.32fr) auto;gap:40px;align-items:center;width:100%}
.hero-copy{position:relative;z-index:2;padding-bottom:24px}
.eyebrow{margin:0 0 20px;color:var(--red);font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(46px,4.6vw,72px);line-height:1.07;letter-spacing:-.055em;margin-bottom:24px;font-weight:900}
h1 span,h2 span{color:var(--red)}
/* rotating headline word (typewriter) */
/* typewriter word styled like a text selection: red highlight, white letters */
.hl-rotate{display:inline-flex;align-items:baseline;min-height:1.1em;white-space:nowrap;
  background:var(--red);color:#fff;padding:0 .12em .04em;border-radius:6px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.rot-text{color:#fff;white-space:nowrap}
.rot-caret{display:inline-block;width:.06em;min-width:3px;height:.82em;background:#fff;
  margin-left:.1em;border-radius:2px;transform:translateY(.04em);animation:rotBlink 1s steps(1) infinite}
@keyframes rotBlink{50%{opacity:0}}
.lead{font-size:18px;line-height:1.65;color:#5d6575;max-width:385px;margin-bottom:32px}
.hero-buttons{display:flex;gap:16px;align-items:center;margin-bottom:34px}
.badges{display:flex;align-items:center;gap:26px;flex-wrap:wrap;color:#596274;font-size:12px;font-weight:700}.badges span{display:flex;align-items:center;gap:8px}.badges i{font-style:normal;color:#202838}
/* ---- 2. IFC viewer (progressive load) ---- */
.hero-viewer{position:relative;z-index:2;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;--load:0%}
.viewer-bar,.viewer-foot{display:flex;align-items:center;gap:10px;padding:11px 15px;background:linear-gradient(#fff,#fbfcff)}
.viewer-bar{border-bottom:1px solid var(--line)}
.viewer-foot{border-top:1px solid var(--line)}
.vb-dots{display:flex;gap:6px}
.vb-dots i{width:9px;height:9px;border-radius:50%;background:#e0e4ec;display:block}
.vb-dots i:nth-child(1){background:#ff5f57}.vb-dots i:nth-child(2){background:#febc2e}.vb-dots i:nth-child(3){background:#28c840}
.vb-title{font-size:12px;font-weight:800;letter-spacing:.02em;color:#5c6577}
.vb-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--red)}
.vb-live i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:vbPulse 1.6s infinite}
@keyframes vbPulse{0%{box-shadow:0 0 0 0 rgba(227,33,24,.45)}70%{box-shadow:0 0 0 7px rgba(227,33,24,0)}100%{box-shadow:0 0 0 0 rgba(227,33,24,0)}}
.viewer-stage{position:relative;aspect-ratio:16/11;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#fff,#eef1f6)}
.viewer-stage::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(to right,rgba(200,207,219,.5) 1px,transparent 1px),linear-gradient(to bottom,rgba(200,207,219,.42) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(circle at 50% 45%,#000,transparent 78%)}
.viewer-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:7% 8%}
/* static fallback image — only shown when WebGL is unavailable (.no3d) */
.vm-color{display:none;filter:drop-shadow(0 16px 34px rgba(33,45,72,.14))}
.hero-viewer.no3d .vm-color{display:block}
/* real 3D canvas mount (progressive enhancement) */
.v3d{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .6s ease}
.v3d canvas{display:block;width:100%!important;height:100%!important;cursor:grab;touch-action:none}
.v3d canvas:active{cursor:grabbing}
/* 3D mode: no placeholder image at all — the model just loads in, that's it */
.hero-viewer.is-3d .vm-color{display:none}
.hero-viewer.is-3d.is-ready .v3d{opacity:1}
/* 3D mode = no box: the model floats free, only the "Live" badge stays */
.hero-viewer.is-3d{background:none;border:0;box-shadow:none;overflow:visible}
.hero-viewer.is-3d .viewer-stage{background:none;overflow:visible;border-radius:0;aspect-ratio:4/3}
.hero-viewer.is-3d .viewer-stage::before{display:none}
.hero-viewer.is-3d .viewer-foot{display:none}
.hero-viewer.is-3d .viewer-bar{position:absolute;top:6px;right:8px;z-index:5;padding:0;background:none;border:0;pointer-events:none}
.hero-viewer.is-3d .vb-dots,.hero-viewer.is-3d .vb-title{display:none}
.hero-viewer.is-3d .vb-live{margin:0;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);
  padding:5px 11px;border-radius:9999px;box-shadow:0 4px 14px rgba(20,32,55,.12)}
html.dark .hero-viewer.is-3d .vb-live{background:rgba(20,27,39,.7)}

/* ===== Immersive full-bleed 3D hero (desktop only) =====
   Model canvas fills the whole hero; copy floats left over a soft scrim;
   the stage rail floats right in an Apple "liquid glass" panel. */
@media(min-width:1025px){
  .hero:has(.hero-viewer.is-3d){min-height:92vh}
  .hero-viewer.is-3d{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;z-index:1}
  .hero-viewer.is-3d .viewer-stage{aspect-ratio:auto;width:100%;height:100%}
  .hero-viewer.is-3d .v3d{inset:0}
  /* Live badge on the model, clear of the top nav */
  .hero-viewer.is-3d .viewer-bar{top:auto;bottom:24px;left:50%;right:auto;transform:translateX(-50%)}

  /* copy over the model — soft white scrim keeps it readable */
  .hero:has(.hero-viewer.is-3d) .hero-copy{position:relative;z-index:3}
  .hero:has(.hero-viewer.is-3d) .hero-copy::before{content:"";position:absolute;inset:-34% -22% -34% -48%;
    z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse at 34% 48%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.74) 46%, rgba(255,255,255,0) 76%)}

  /* stage rail = liquid-glass panel floating over the model */
  .hero-viewer.is-3d ~ .hero-stages{position:relative;z-index:3;justify-self:end;align-self:center;
    background:rgba(255,255,255,.46);
    -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
    border:1px solid rgba(255,255,255,.7);border-radius:26px;padding:26px 26px 26px 24px;
    box-shadow:0 26px 70px rgba(20,32,55,.20), inset 0 1px 0 rgba(255,255,255,.9)}
  .hero-viewer.is-3d ~ .hero-stages::before{left:42px;background:rgba(120,133,158,.28)}

  html.dark .hero:has(.hero-viewer.is-3d) .hero-copy::before{
    background:radial-gradient(ellipse at 34% 48%, rgba(11,16,26,.95) 0%, rgba(11,16,26,.74) 46%, rgba(11,16,26,0) 76%)}
  html.dark .hero-viewer.is-3d ~ .hero-stages{background:rgba(17,24,36,.5);border-color:rgba(255,255,255,.14);
    box-shadow:0 26px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14)}
}

/* ===== Immersive full-bleed 3D hero — mobile / tablet =====
   Model fills the hero as a background; copy floats over a soft scrim;
   the stage rail becomes a horizontal glass bar. Drag is disabled in JS. */
@media(max-width:1024px){
  .hero:has(.hero-viewer.is-3d){position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:stretch}
  .hero:has(.hero-viewer.is-3d) .hero-grid{min-height:calc(100svh - 190px);align-content:space-between;gap:28px;justify-items:center;text-align:center;width:100%}
  .hero:has(.hero-viewer.is-3d) .hero-copy{padding-bottom:0}
  .hero-viewer.is-3d{position:absolute;inset:0;width:auto;height:auto;max-width:none;margin:0;z-index:1}
  .hero-viewer.is-3d .viewer-stage{aspect-ratio:auto;width:100%;height:100%;position:absolute;inset:0}
  .hero-viewer.is-3d .v3d{inset:0}
  .hero:has(.hero-viewer.is-3d) .hero-copy{position:relative;z-index:3;max-width:none}
  .hero:has(.hero-viewer.is-3d) .hero-copy::before{content:"";position:absolute;top:-150px;bottom:-40px;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 58%,rgba(255,255,255,.62) 84%,rgba(255,255,255,0) 100%)}
  .hero-viewer.is-3d ~ .hero-stages{position:relative;z-index:3;justify-self:stretch;width:auto;max-width:none;margin-top:6px;
    background:rgba(255,255,255,.52);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
    border:1px solid rgba(255,255,255,.7);border-radius:var(--r-panel);padding:14px 10px;
    box-shadow:0 18px 46px rgba(20,32,55,.18)}
  html.dark .hero:has(.hero-viewer.is-3d) .hero-copy::before{
    background:linear-gradient(180deg,rgba(11,16,26,.97) 0%,rgba(11,16,26,.93) 58%,rgba(11,16,26,.62) 84%,rgba(11,16,26,0) 100%)}
  html.dark .hero-viewer.is-3d ~ .hero-stages{background:rgba(17,24,36,.6);border-color:rgba(255,255,255,.14);box-shadow:0 18px 46px rgba(0,0,0,.5)}
}


/* ---- 3. stage rail ---- */
.hero-stages{position:relative;z-index:2;display:grid;gap:20px;align-content:center}
.hero-stages::before{content:"";position:absolute;top:19px;bottom:19px;left:18px;width:2px;background:#e2e6ee}
.hero-stages button{position:relative;display:grid;grid-template-columns:38px auto;column-gap:12px;
  align-items:center;border:0;background:none;padding:0;cursor:pointer;text-align:left;z-index:2}
/* icons carry the layer colour (--sc) as a built-in legend */
.st-ic{grid-row:1/3;position:relative;width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid var(--sc,#e3e7ee);
  display:grid;place-items:center;color:var(--sc,#182033);box-shadow:0 8px 26px rgba(34,43,63,.08);
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease}
.st-ic svg{width:20px;height:20px;display:block}
/* countdown ring around the active icon (fills over the 10s dwell) */
.st-ic::after{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--sc,var(--red)) calc(var(--ring,0)*1%), rgba(0,0,0,0) 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5px),#000 calc(100% - 2.5px));
          mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5px),#000 calc(100% - 2.5px));
  opacity:0;transition:opacity .3s ease}
.hero-stages .active .st-ic::after{opacity:1}
.hero-stages b{grid-column:2;font-size:11px;font-weight:900;color:#98a1b2;line-height:1;margin-bottom:3px}
.hero-stages em{grid-column:2;font-style:normal;font-size:12.5px;font-weight:800;color:#1c2230;line-height:1.15}
.hero-stages .active .st-ic{border-color:var(--sc,var(--red));color:var(--sc,var(--red));box-shadow:0 10px 26px rgba(34,43,63,.16);transform:scale(1.06)}
.hero-stages .active b,.hero-stages .active em{color:var(--sc,var(--red))}
.scroll-down{position:absolute;bottom:-23px;left:50%;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid #e7ebf2;box-shadow:0 12px 30px rgba(20,32,55,.10);display:grid;place-items:center;color:#9aa2b1;font-size:26px;z-index:4}

.split-section{display:grid;grid-template-columns:290px 1fr;gap:54px;align-items:center;max-width:var(--container);margin:0 auto;padding-top:88px;padding-bottom:82px}
.section-title h2{font-size:clamp(30px,3vw,46px);line-height:1.13;letter-spacing:-.045em;margin-bottom:20px;font-weight:900}.section-title p:not(.eyebrow){color:#5f6878;line-height:1.65;font-size:15px;margin-bottom:25px}.section-title .btn{margin-top:10px}
.process{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.process-line{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:start;position:relative}.process-line::before{content:"";position:absolute;top:72px;left:50px;right:50px;height:2px;background:linear-gradient(90deg,var(--red) 0%,var(--red) 24%,#d9dee8 24%,#d9dee8 100%)}
.process-line::after{content:"";position:absolute;top:70px;left:50px;right:50px;height:6px;border-radius:6px;pointer-events:none;background-image:linear-gradient(90deg,rgba(227,33,24,0) 0%,rgba(227,33,24,0) 58%,rgba(227,33,24,.5) 70%,rgba(255,86,63,1) 78%,rgba(227,33,24,.5) 86%,rgba(227,33,24,0) 98%,rgba(227,33,24,0) 100%);background-size:300px 100%;background-repeat:repeat-x;filter:drop-shadow(0 0 6px rgba(227,33,24,.5));animation:procFlow 2.1s linear infinite}
@keyframes procFlow{from{background-position:0 0}to{background-position:300px 0}}
.process-step{text-align:center;position:relative;z-index:1}.step-no{display:block;font-weight:900;font-size:14px;color:#697386;margin-bottom:19px}.process-step.active .step-no,.process-step.active h3{color:var(--red)}.icon-card{width:80px;height:80px;border-radius:var(--r-card);background:#fff;border:1px solid #dfe4ec;box-shadow:0 12px 30px rgba(20,32,55,.06);margin:0 auto 18px;display:grid;place-items:center;font-size:26px;font-weight:900;color:#182033}.process-step.active .icon-card{border-color:#ffd7d4;color:var(--red);box-shadow:0 14px 36px rgba(227,33,24,.09)}.process-step h3{font-size:14px;margin-bottom:10px}.process-step p{font-size:12px;line-height:1.55;color:#697386;max-width:150px;margin:0 auto}

.digital{border-bottom:1px solid var(--line);overflow:hidden;background:linear-gradient(90deg,#fff 0,#fff 45%,#fbfcff 100%)}
.digital-grid{max-width:var(--container);margin:0 auto;min-height:410px;display:grid;grid-template-columns:300px 190px 1fr;gap:28px;align-items:center;padding-top:70px;padding-bottom:70px}
.tool-stack{display:grid;gap:16px;z-index:2}.tool-stack article{height:78px;border:1px solid #e7ebf1;border-radius:var(--r-card);background:#fff;box-shadow:0 16px 36px rgba(20,32,55,.08);display:flex;align-items:center;gap:14px;padding:14px 18px}.tool-stack h3{font-size:15px;margin:0 0 3px}.tool-stack p{font-size:12px;color:#6a7280;margin:0}.file{width:36px;height:36px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900}.file-blue{background:#1f76e8}.file-ifc{background:linear-gradient(135deg,#e21b17,#2c71e8)}.file-red{background:#fff;color:var(--red);border:2px solid #ffdad7}.file-dark{background:#141822;font-size:18px}
.file-nova{background:#fff;border:1px solid #e7ebf1;box-shadow:0 4px 10px rgba(20,32,55,.06)}.file-nova img{width:66%;height:66%;object-fit:contain;display:block}
.digital-visual{align-self:stretch;position:relative}
/* render sits to the RIGHT of the tool cards (never behind them), soft left edge */
.digital-visual img{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:800px;max-width:none;
  filter:drop-shadow(0 26px 70px rgba(20,32,55,.12));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%);mask-image:linear-gradient(90deg,transparent 0,#000 9%)}

.collision{border-bottom:1px solid var(--line);grid-template-columns:290px 1fr}.check-list{list-style:none;padding:0;margin:25px 0 0;display:grid;gap:12px;color:#4e5868;font-size:14px;font-weight:700}.check-list li{display:flex;gap:10px;align-items:center}.check-list li::before{content:"✓";width:19px;height:19px;display:grid;place-items:center;border-radius:50%;color:var(--red);border:1px solid #ffbdb7;font-size:12px}.collision-cards{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;gap:12px;align-items:center}.collision-cards article{background:#fff;border:1px solid #e3e8f0;border-radius:var(--r-card);box-shadow:0 16px 38px rgba(20,32,55,.06);overflow:hidden}.collision-cards img{width:100%;height:185px;object-fit:cover}.status{text-align:center;font-size:12px;font-weight:800;margin:0;padding:14px 8px;border-top:1px solid #edf0f5}.status-red{color:var(--red)}.status-blue{color:#148251}.status-green{color:#1c9b47}.arrow{text-align:center;font-size:28px;color:#202838}
/* ---- collision showcase (single animated stage) ---- */
.collision-show{display:flex;flex-direction:column;gap:16px}
.cs-stage{position:relative;aspect-ratio:1.85/1;border-radius:18px;overflow:hidden;background:#eef1f6;box-shadow:0 24px 60px rgba(20,32,55,.13)}
.cs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);
  transition:opacity .8s ease, transform 5s ease}
.cs-img.is-on{opacity:1;transform:scale(1)}
.cs-badge{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:9999px;font-size:13px;font-weight:800;color:#fff;letter-spacing:.01em;
  background:var(--red);box-shadow:0 10px 26px rgba(0,0,0,.22);transition:background .55s ease}
.cs-badge i{font-style:normal}
.cs-stage.state-1 .cs-badge{background:#e08a12}
.cs-stage.state-2 .cs-badge{background:#1c9b47}
.cs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cs-steps button{position:relative;text-align:left;border:1px solid var(--line);background:#fff;border-radius:var(--r-card);
  padding:12px 14px 13px;cursor:pointer;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.cs-steps button b{display:block;font-size:11px;font-weight:900;color:#98a1b2;margin-bottom:3px}
.cs-steps button em{font-style:normal;font-size:12.5px;font-weight:800;color:#1c2230;line-height:1.2}
.cs-steps button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p,0)*1%);background:var(--red);transition:width .12s linear}
.cs-steps button.active{border-color:#ffd0cc;box-shadow:0 12px 28px rgba(227,33,24,.10);transform:translateY(-2px)}
.cs-steps button.active b,.cs-steps button.active em{color:var(--red)}
html.dark .cs-stage{background:#11131a}
html.dark .cs-steps button{background:#161d29;border-color:#28313f}
html.dark .cs-steps button em{color:#dbe1ec}
html.dark .cs-steps button.active{border-color:#5a2320}
html.dark .cs-steps button.active b,html.dark .cs-steps button.active em{color:#ff6b62}

.trust{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding-top:60px;padding-bottom:60px;border-bottom:1px solid var(--line)}.trust article{text-align:center;padding:0 28px;border-right:1px solid #e5e9f0}.trust article:last-child{border-right:0}.flag{width:48px;height:48px;border-radius:var(--r-card);display:grid;place-items:center;margin:0 auto 16px;font-size:28px;font-weight:900}.swiss{background:var(--red);color:#fff}.nova{color:var(--red);font-size:34px}.flag.nova{background:#fff;border:1px solid #e7ebf1;box-shadow:0 6px 16px rgba(20,32,55,.08)}.flag.nova img{width:62%;height:62%;object-fit:contain;display:block}.flag.dach{width:auto;min-width:48px;height:48px;font-size:31px;line-height:1;letter-spacing:1px;white-space:nowrap}.ifc{color:#254fe2}.team{font-size:34px;color:#141822}.trust h3{font-size:15px;margin-bottom:10px}.trust p{font-size:12px;line-height:1.55;color:#5e6877;margin:0}

.projects{grid-template-columns:170px 1fr;padding-top:72px;padding-bottom:86px;border-bottom:1px solid var(--line)}.projects .section-title{align-self:start}.project-carousel{overflow:hidden}
.pc-track{display:flex;width:max-content;animation:pcMarquee 52s linear infinite}
.pc-track:hover{animation-play-state:paused}
.pc-track>.project-card{flex:0 0 clamp(258px,25vw,326px);margin-right:18px}
@keyframes pcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}.project-card{position:relative;background:#fff;border:1px solid #e3e8ef;border-radius:var(--r-card);overflow:hidden;box-shadow:0 16px 38px rgba(20,32,55,.06);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.project-card:hover{transform:translateY(-5px);box-shadow:0 28px 56px rgba(20,32,55,.14)}
.project-card.is-live{border-color:#ffd6d1}
.project-card img{width:100%;height:128px;object-fit:cover;transition:transform .6s ease}
.project-card:hover img{transform:scale(1.06)}
/* "In Bearbeitung" pulse on active projects */
.proj-live{position:absolute;top:11px;left:11px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px 5px 10px;border-radius:9999px;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#0f1622;
  background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 16px rgba(20,32,55,.2)}
.proj-live i{width:7px;height:7px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 0 rgba(18,183,106,.55);animation:projPulse 1.5s infinite}
@keyframes projPulse{0%{box-shadow:0 0 0 0 rgba(18,183,106,.55)}70%{box-shadow:0 0 0 8px rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}
html.dark .proj-live{background:rgba(18,24,34,.9);color:#eef2f8}.project-card div{padding:14px 16px 16px}.project-card h3{font-size:14px;margin-bottom:6px}.project-card p{font-size:12px;margin-bottom:12px;color:#707988}.project-card div span{display:flex;align-items:center;gap:9px;margin:0 0 8px;color:#3f4859;font-size:11.5px;font-weight:600;letter-spacing:.01em}
.project-card div span:first-of-type{margin-top:13px;padding-top:13px;border-top:1px solid #eef1f6}
.project-card div span::before{content:"";flex:none;width:22px;height:22px;border-radius:7px;background:#f2f5f9 center/13px 13px no-repeat;box-shadow:inset 0 0 0 1px rgba(20,32,55,.05)}
.project-card div span:nth-of-type(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E")}
.project-card div span:nth-of-type(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E")}
.project-card div span:nth-of-type(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.dots{position:absolute;bottom:50px;left:50%;display:flex;gap:9px}.dots span{width:7px;height:7px;border-radius:50%;background:#cbd1dc}.dots .active{background:var(--red);width:9px;height:9px}

.build-up{grid-template-columns:230px 1fr;padding-top:70px;padding-bottom:65px}.service-list-mini{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px;color:#475061;font-size:14px;font-weight:800}.build-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;align-items:end;border-bottom:1px solid #dadfe8}.build-steps article{text-align:center;position:relative;padding-bottom:25px}.build-steps article::after{content:"";position:absolute;bottom:-4px;left:50%;width:7px;height:7px;background:#cbd2dd;border-radius:50%;transform:translateX(-50%)}.build-steps .active::after{background:var(--red);width:9px;height:9px}.build-steps img{width:145px;height:120px;object-fit:contain;margin:0 auto 8px;filter:drop-shadow(0 12px 24px rgba(20,32,55,.09))}.build-steps b{display:block;font-size:12px;margin-bottom:3px;color:#303848}.build-steps span{font-size:12px;font-weight:800;color:#3f495b}.build-steps .active b,.build-steps .active span{color:var(--red)}

.cta{max-width:var(--container);margin:0 auto 48px;border-radius:var(--r-card);background:linear-gradient(135deg,#ed2418,#d81912);color:#fff;min-height:142px;padding:34px 58px;display:grid;grid-template-columns:280px 1fr auto;gap:35px;align-items:center;overflow:hidden;box-shadow:0 22px 55px rgba(227,33,24,.24)}.cta::before{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(to right, rgba(255,255,255,.22) 1px, transparent 1px),linear-gradient(to bottom, rgba(255,255,255,.18) 1px, transparent 1px);background-size:44px 44px}.cta>*{position:relative;z-index:1}.cta h2{font-size:26px;line-height:1.18;margin-bottom:10px}.cta p{color:#ffd8d4;margin:0;line-height:1.5}.cta-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.cta-features span{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:center;font-size:23px}.cta-features b{font-size:13px}.cta-features small{grid-column:2;color:#ffd9d5;font-size:11px;margin-top:3px}

/* ============================================================
   WORKFLOW METHODS / 4 WEGE — integration methods section
   2x2 themed cards (red / green / purple / teal).
   Per-card theme via .wm-card.theme-* setting --wm (accent),
   --wm-soft (very-light tint) and --wm-tint (icon-circle bg).
   ============================================================ */
.wm{padding-top:90px;padding-bottom:90px;background:linear-gradient(180deg,#fff 0,#fbfcff 100%);border-bottom:1px solid var(--line)}
.wm-head{max-width:760px;margin:0 auto 54px;text-align:center}
.wm-head .eyebrow{margin-bottom:16px}
.wm-head h2{font-size:clamp(30px,3vw,46px);line-height:1.12;letter-spacing:-.045em;font-weight:900;margin-bottom:18px}
.wm-head p{color:#5f6878;font-size:17px;line-height:1.6;margin:0}
.wm-head .uline{color:var(--red);text-decoration:underline;text-underline-offset:3px;font-weight:700}

.wm-grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px}

/* themes */
.wm-card.theme-red{--wm:#e32118;--wm-soft:#fef4f3;--wm-tint:#fdeceb}
.wm-card.theme-green{--wm:#1f9d57;--wm-soft:#f1faf5;--wm-tint:#e6f5ec}
.wm-card.theme-purple{--wm:#6d5ce0;--wm-soft:#f5f3fe;--wm-tint:#ece8fb}
.wm-card.theme-teal{--wm:#179c98;--wm-soft:#f0faf9;--wm-tint:#e3f4f3}

.wm-card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.wm-card:hover{box-shadow:var(--shadow)}

/* right-side angled image */
.wm-card>.wm-media{position:absolute;top:0;right:0;bottom:62px;width:38%;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%);
  clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);
}
.wm-media img{width:100%;height:100%;object-fit:cover;opacity:.9;filter:saturate(1.05)}
.wm-media.is-empty{background:var(--wm-tint);opacity:.6}
.wm-media.is-empty img{display:none}

.wm-card>*{position:relative;z-index:1}

/* header row */
.wm-card-head{display:flex;align-items:flex-start;gap:16px;padding:26px 28px 20px;padding-right:40%}
.wm-badge{flex:none;width:46px;height:46px;border-radius:var(--r-card);background:var(--wm);color:#fff;
  display:grid;place-items:center;font-size:22px;font-weight:900;box-shadow:0 10px 24px rgba(20,32,55,.12)}
.wm-titles h3{font-size:18px;font-weight:900;letter-spacing:.01em;text-transform:uppercase;color:var(--wm);margin:0 0 6px}
.wm-titles p{font-size:13px;color:var(--muted);margin:0;line-height:1.4}

/* flow */
.wm-flow{display:flex;align-items:flex-start;gap:10px;padding:6px 28px 4px;padding-right:40%;flex-wrap:nowrap}
.wm-step{flex:1 1 0;min-width:0;max-width:185px;text-align:center;display:flex;flex-direction:column;align-items:center}
.wm-ic{width:48px;height:48px;border-radius:50%;background:var(--wm-tint);color:var(--wm);
  display:grid;place-items:center;margin-bottom:10px}
.wm-ic svg{width:23px;height:23px;display:block}
.wm-ic.wm-b{background:#fdeceb;color:var(--red);font-weight:900;font-size:22px;letter-spacing:-.06em}
.wm-step b{display:block;font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:5px;line-height:1.3}
.wm-step small{display:block;font-size:11px;line-height:1.45;color:var(--muted);max-width:150px}
.wm-arrow{display:none}
.wm-step{position:relative;z-index:1}
.wm-step .wm-ic{position:relative;z-index:1}
.wm-step:not(:last-of-type)::before,.wm-step:not(:last-of-type)::after{content:"";position:absolute;left:50%;width:calc(100% + 10px);pointer-events:none;z-index:0}
.wm-step:not(:last-of-type)::before{top:23px;height:2px;background:color-mix(in srgb,var(--wm) 20%,transparent)}
.wm-step:not(:last-of-type)::after{top:21px;height:6px;border-radius:6px;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--wm) 55%,transparent));background-image:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--wm) 40%,transparent) 32%,var(--wm) 50%,color-mix(in srgb,var(--wm) 40%,transparent) 68%,transparent 100%);background-size:70px 100%;background-repeat:no-repeat;animation:3.3s linear infinite}
.wm-step:nth-of-type(1)::after{animation-name:wmFlow1}
.wm-step:nth-of-type(2)::after{animation-name:wmFlow2}
.wm-step:nth-of-type(3)::after{animation-name:wmFlow3}
@keyframes wmFlow1{0%{background-position:-70px 0}33%,100%{background-position:calc(100% + 70px) 0}}
@keyframes wmFlow2{0%,33%{background-position:-70px 0}66%,100%{background-position:calc(100% + 70px) 0}}
@keyframes wmFlow3{0%,66%{background-position:-70px 0}100%{background-position:calc(100% + 70px) 0}}

/* feedback: no dashed line — clean inline row, chat icon before the text */
.wm-feedback{margin:16px 28px 18px;margin-right:40%;padding-top:0;
  display:flex;align-items:center;justify-content:center;gap:9px;text-align:left}
.wm-feedback::before{content:none;display:none;border:0}
.wm-feedback .wm-chat{width:auto;height:auto;background:none;border:0;box-shadow:none;
  border-radius:0;margin:0;padding:0;color:var(--wm);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.wm-feedback .wm-chat svg{width:17px;height:17px;display:block}
.wm-feedback span{font-size:12.5px;color:var(--muted);line-height:1.5;font-weight:500}

/* feature bar */
.wm-features{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  background:var(--wm-soft);border-top:1px solid var(--line);padding:18px 24px}
.wm-feat{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;color:#3f495b;line-height:1.3}
.wm-feat svg{flex:none;width:20px;height:20px;color:var(--wm)}

@media(max-width:980px){
  .wm{padding-top:60px;padding-bottom:60px}
  .wm-card>.wm-media{display:none}
  .wm-card-head{padding-right:28px}
  .wm-flow{flex-direction:column;align-items:stretch;gap:16px;padding-right:28px}
  /* icon left (fixed circle), title over description */
  .wm-step{flex:none;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:3px;
    text-align:left;min-width:0;max-width:none;align-items:center}
  .wm-ic{flex:none;grid-row:1/3;align-self:start;margin-bottom:0}
  .wm-step b{grid-column:2;margin-bottom:0}
  .wm-step small{grid-column:2;max-width:none}
  .wm-arrow,.wm-step:not(:last-of-type)::before,.wm-step:not(:last-of-type)::after{display:none}
  .wm-feedback{margin-right:28px}
  .wm-features{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.wm-features{grid-template-columns:1fr}}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}.is-visible{opacity:1;transform:none}

@media(max-width:1024px){
  .pill-links{gap:0}.hero-grid{grid-template-columns:1fr;gap:32px;justify-items:start}.hero-copy{max-width:600px}
  .hero-viewer{width:100%;max-width:660px}
  .hero-stages{width:100%;max-width:660px;grid-auto-flow:column;grid-template-columns:repeat(5,1fr);gap:8px}
  .hero-stages::before{display:none}
  .hero-stages button{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:2px}
  .hero-stages .st-ic{grid-row:1;margin:0 auto 6px}
  .hero-stages b,.hero-stages em{grid-column:1;text-align:center}
  .split-section,.digital-grid{grid-template-columns:1fr}.process-line,.trust,.build-steps{grid-template-columns:repeat(2,1fr)}.process-line::before,.process-line::after{display:none}.digital-grid{gap:24px}.digital-visual{min-height:0}.digital-visual img{position:relative;right:auto;top:auto;transform:none;width:100%;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 14px 32px rgba(20,32,55,.10));border-radius:var(--r-card)}.collision-cards{grid-template-columns:1fr}.arrow{transform:rotate(90deg)}
}
@media(max-width:820px){
  .cad-nav{height:64px;padding-inline:16px;gap:10px}
  .cad-logo{height:46px}
  /* .nav-pill carries a backdrop-filter, which makes it the containing block for any
     fixed-position child. left/right therefore resolved against the pill, not the
     viewport: the panel came out 190px wide, hanging off the right edge with the labels
     cut in half. Anchor it to the pill on purpose instead. */
  .pill-links{position:absolute;top:calc(100% + 12px);right:-2px;left:auto;
    width:max-content;min-width:212px;max-width:calc(100vw - 28px);
    background:#fff;border:1px solid var(--line);border-radius:16px;
    box-shadow:0 24px 60px rgba(20,32,55,.18),0 2px 8px rgba(20,32,55,.06);
    padding:8px;display:none;flex-direction:column;align-items:stretch;gap:0;z-index:90}
  html.dark .pill-links{background:#151b26;border-color:rgba(255,255,255,.10);
    box-shadow:0 24px 60px rgba(0,0,0,.5)}
  .pill-links.is-open{display:flex}
  .pill-links a+a{border-top:1px solid rgba(20,32,55,.06)}
  html.dark .pill-links a+a{border-top-color:rgba(255,255,255,.07)}

  /* Dim layer for the open menu. It lives on <html> because nothing inside the
     filtered pill can cover the viewport. */
  /* Below the header (z-index 50), above everything else — otherwise the scrim greys
     out the very menu it is meant to lift off the page. */
  html.nav-open::after{content:"";position:fixed;inset:0;z-index:45;
    background:rgba(9,13,20,.42);backdrop-filter:blur(1.5px);pointer-events:none}
  /* The sticky CTA sits at 60 and would otherwise punch through the dim layer. */
  html.nav-open .m-cta{opacity:.35;transition:opacity .2s ease}
  .pill-divider,.pill-cta{display:none}
  .nav-toggle{display:flex}
  .hero{padding-top:110px;min-height:auto;padding-bottom:80px}.hero-grid{gap:24px}.hero-buttons{flex-direction:column;align-items:flex-start}.badges{gap:14px}.hero-stages{grid-template-columns:repeat(5,1fr)}.hero-stages em{font-size:11.5px}.split-section{padding-top:60px;padding-bottom:60px}.process-line{gap:26px}.process-line::before{display:none}.digital-grid{padding-top:55px;padding-bottom:55px}.trust{grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line)}.trust article{border-right:1px solid #e5e9f0;border-bottom:1px solid var(--line);padding:24px 16px}.trust article:nth-child(2n){border-right:0}.trust article:nth-last-child(1):nth-child(odd){grid-column:1/-1;border-right:0}.trust article:last-child{border-bottom:0}.build-steps{grid-template-columns:1fr}.cta{margin:0 20px 35px;padding:30px 25px}.section-title h2{font-size:34px}h1{font-size:44px}.hero-visual img{transform:none}.project-card img{height:180px}.build-steps{border-bottom:0}.build-steps article{border-bottom:1px solid var(--line)}
}
@media(max-width:480px){
  .section-shell{padding-inline:18px}.btn{width:100%}.process-line{grid-template-columns:1fr;gap:0;overflow:hidden}.tool-stack article{height:auto}.cta{margin-inline:18px}.cta .btn{width:100%}
  .process-line .proc-track{display:flex;width:max-content;animation:pcMarquee 26s linear infinite}
  .process-line .proc-track:hover{animation-play-state:paused}
  .proc-track>.process-step{flex:0 0 64vw;max-width:270px;margin-right:16px}
}

/* ===== Mobile hero — centred text, big model, bottom glass rail (matches mockup) ===== */
@media(max-width:1024px){
  .hero{padding-top:96px;min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center}
  .hero-copy{max-width:540px;text-align:center;padding-bottom:0}
  .hero-copy .eyebrow,.hero-buttons,.badges{display:none}       /* clean hero like the mockup */
  .hero-copy h1{font-size:clamp(34px,10vw,46px);margin-bottom:14px}
  .hl-rotate{justify-content:center;white-space:normal}
  .lead{margin:0 auto;font-size:16px;max-width:340px}

  /* big model, no box, floating on the hero */
  .hero-viewer.is-3d{max-width:none}  /* height comes from the full-bleed inset:0 rule above */
  .hero-viewer.is-3d .viewer-stage{aspect-ratio:auto;width:100%;height:100%}
  .hero-viewer.is-3d .viewer-bar{top:10px;right:12px;bottom:auto;left:auto;transform:none}

  /* stage rail = bottom glass card, colour-coded icons + labels */
  .hero-stages{width:100%;max-width:540px;grid-auto-flow:column;grid-template-columns:repeat(5,1fr);gap:0;
    background:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid rgba(255,255,255,.7);border-radius:var(--r-panel);padding:16px 4px;
    box-shadow:0 16px 44px rgba(20,32,55,.14),inset 0 1px 0 rgba(255,255,255,.85)}
  .hero-stages::before{display:none}     /* no vertical connector on mobile */
  .hero-stages button{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:0;position:relative;padding:0 2px}
  .hero-stages button+button::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;background:rgba(20,32,55,.10)}
  .hero-stages b{display:none}
  .hero-stages .st-ic{grid-row:1;margin:0 auto 8px;width:44px;height:44px;box-shadow:0 6px 16px rgba(20,32,55,.12)}
  .hero-stages .st-ic svg{width:23px;height:23px}
  .hero-stages em{grid-column:1;text-align:center;font-size:11.5px;line-height:1.2;color:#1c2230}
  /* keep the legend look (white circle) even when active */
  .hero-stages .active .st-ic{background:#fff;border-color:var(--sc);color:var(--sc);transform:none;box-shadow:0 6px 16px rgba(20,32,55,.12)}
  .hero-stages .active em{color:#1c2230}

  html.dark .hero-stages{background:rgba(20,27,39,.6);border-color:rgba(255,255,255,.12);box-shadow:0 16px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1)}
  html.dark .hero-stages button+button::before{background:rgba(255,255,255,.12)}
  html.dark .hero-stages em,html.dark .hero-stages .active em{color:#dbe1ec}
  html.dark .hero-stages .active .st-ic{background:#161d29}
}
@media(max-width:480px){
  .hero-stages em{font-size:10px}
  .hero-stages .st-ic{width:40px;height:40px;font-size:14px}
  .hero-stages{padding:14px 2px}
}

/* ============================================================
   DARK MODE — full CAD page theme.
   Toggled via html.dark (localStorage 'darkMode'). Red accent kept.
   ============================================================ */
html.dark{
  --ink:#e8ecf3;
  --muted:#9aa4b6;
  --line:#232c3a;
  --soft:#131925;
  --card:#161d29;
  --shadow:0 22px 70px rgba(0,0,0,.55);
  --shadow-sm:0 10px 30px rgba(0,0,0,.45);
}
html.dark body{background:#0b0f17;color:var(--ink)}

/* Buttons */
html.dark .btn-soft{background:#161d29;color:#e8ecf3;border-color:#28313f;box-shadow:var(--shadow-sm)}
html.dark .btn-outline{background:#161d29;color:#e8ecf3;border-color:#28313f;box-shadow:0 10px 28px rgba(0,0,0,.35)}
html.dark .btn-light{background:#161d29;color:#fff}
html.dark .play{border-color:#39424f}

/* Hero */
html.dark .hero{
  background:
    radial-gradient(circle at 67% 23%, rgba(45,55,74,.5), transparent 34%),
    linear-gradient(90deg,#0b0f17 0%,#0b0f17 50%,#0d121c 100%);
}
html.dark .hero::before{
  opacity:.30;
  background-image:
    linear-gradient(to right, rgba(120,133,158,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,133,158,.20) 1px, transparent 1px);
}
html.dark .lead{color:#aab3c4}
html.dark .badges{color:#9aa4b6}
html.dark .badges i{color:#d5dbe6}
/* dark — IFC viewer */
html.dark .hero-viewer{background:#141b27;border-color:#28303d;box-shadow:0 26px 70px rgba(0,0,0,.5)}
html.dark .viewer-bar,html.dark .viewer-foot{background:linear-gradient(#161e2b,#131a25)}
html.dark .viewer-bar{border-bottom-color:#28303d}html.dark .viewer-foot{border-top-color:#28303d}
html.dark .vb-title{color:#aeb7c6}
html.dark .viewer-stage{background:radial-gradient(circle at 50% 38%,#1b2330,#10161f)}
html.dark .viewer-stage::before{background-image:linear-gradient(to right,rgba(120,133,158,.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(120,133,158,.16) 1px,transparent 1px)}
/* dark — stage rail */
html.dark .st-ic{background:#161d29;border-color:var(--sc,#2a3442);color:var(--sc,#dbe1ec);box-shadow:0 8px 26px rgba(0,0,0,.4)}
html.dark .hero-stages::before{background:#2a3442}
html.dark .hero-stages b{color:#8a93a5}
html.dark .hero-stages em{color:#dbe1ec}
html.dark .hero-stages .active .st-ic{background:var(--sc,var(--red));border-color:var(--sc,var(--red));color:#fff}
html.dark .hero-stages .active b,html.dark .hero-stages .active em{color:var(--sc,#ff6b62)}
html.dark .scroll-down{background:#161d29;border-color:#2a3442;color:#8a93a5;box-shadow:0 12px 30px rgba(0,0,0,.4)}

/* Section titles / body copy */
html.dark .section-title p:not(.eyebrow){color:#aab3c4}
html.dark .wm-head p{color:#aab3c4}

/* Process */
html.dark .process{background:#0d121c}
html.dark .process-line::before{background:linear-gradient(90deg,var(--red) 0%,var(--red) 24%,#2c3646 24%,#2c3646 100%)}
html.dark .step-no{color:#9aa4b6}
html.dark .icon-card{background:#161d29;border-color:#2a3442;color:#dbe1ec;box-shadow:0 12px 30px rgba(0,0,0,.4)}
html.dark .process-step.active .icon-card{border-color:#5a2320;color:var(--red);box-shadow:0 14px 36px rgba(227,33,24,.18)}
html.dark .process-step p{color:#9aa4b6}

/* Digital / tool stack */
html.dark .digital{background:linear-gradient(90deg,#0b0f17 0,#0b0f17 45%,#0d121c 100%)}
html.dark .tool-stack article{background:#161d29;border-color:#28313f;box-shadow:0 16px 36px rgba(0,0,0,.45)}
html.dark .tool-stack p{color:#9aa4b6}
html.dark .file-red{background:#161d29;color:var(--red);border-color:#5a2320}
html.dark .file-dark{background:#0b0f17}

/* 4 Wege cards */
html.dark .wm{background:linear-gradient(180deg,#0b0f17 0,#0d121c 100%)}
html.dark .wm-card.theme-red{--wm-soft:#1c1516;--wm-tint:#241618}
html.dark .wm-card.theme-green{--wm-soft:#111c16;--wm-tint:#132419}
html.dark .wm-card.theme-purple{--wm-soft:#16141f;--wm-tint:#1d1930}
html.dark .wm-card.theme-teal{--wm-soft:#101c1c;--wm-tint:#122827}
html.dark .wm-ic.wm-b{background:#241618;color:var(--red)}
html.dark .wm-step b{color:#e8ecf3}
html.dark .wm-feat{color:#c2c9d6}

/* Collision */
html.dark .collision-cards article{background:#161d29;border-color:#28313f;box-shadow:0 16px 38px rgba(0,0,0,.45)}
html.dark .status{border-top-color:#28313f}
html.dark .check-list{color:#c2c9d6}
html.dark .arrow{color:#9aa4b6}

/* Trust */
html.dark .trust article{border-right-color:#232c3a}
html.dark .team{color:#dbe1ec}
html.dark .trust p{color:#9aa4b6}

/* Projects */
html.dark .project-card{background:#161d29;border-color:#28313f;box-shadow:0 16px 38px rgba(0,0,0,.45)}
html.dark .project-card p{color:#9aa4b6}
html.dark .project-card div span{color:#c2ccdb}
html.dark .project-card div span:first-of-type{border-top-color:#28313f}
html.dark .project-card div span::before{background-color:#222b39;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
html.dark .project-card div span:nth-of-type(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E")}
html.dark .project-card div span:nth-of-type(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E")}
html.dark .project-card div span:nth-of-type(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
html.dark .dots span{background:#3a4453}

/* Build-up */
html.dark .service-list-mini{color:#c2c9d6}
html.dark .build-steps{border-bottom-color:#2a3442}
html.dark .build-steps article::after{background:#3a4453}
html.dark .build-steps b{color:#c2c9d6}
html.dark .build-steps span{color:#c2c9d6}

/* CTA — keep the red gradient (already high-contrast) */

/* BENTIL "B" mark → logo image (process step 02 + 4-Wege BENTIL steps) */
/* solid red tile (== the mark's own red #e60301), white B centred with breathing room */
.icon-card--logo,html.dark .icon-card--logo{padding:0 !important;overflow:visible;background:#e60301;border-color:#e60301}
.icon-card--logo img{width:76%;height:76%;object-fit:contain;display:block}
.wm-ic.wm-b,html.dark .wm-ic.wm-b{background:#e60301;overflow:hidden;padding:0}
.wm-ic.wm-b img{width:66%;height:66%;object-fit:contain;border-radius:0;display:block;margin:auto}

/* ── Referenzen · Abgeschlossene Projekte ─────────────────────────── */
.refs{padding-top:72px;padding-bottom:86px;border-bottom:1px solid var(--line)}
.ref-head{text-align:center;max-width:640px;margin:0 auto 40px}
.ref-head .eyebrow{color:var(--red)}
.ref-head h2{font-size:40px;line-height:1.05;margin:6px 0 12px}
.ref-sub{color:#6a7486;font-size:14px}
.ref-grid{overflow:hidden}
.ref-track{display:flex;width:max-content;animation:pcMarquee 66s linear infinite reverse}
.ref-track:hover{animation-play-state:paused}
.ref-track>.ref-card{flex:0 0 clamp(258px,25vw,326px);margin-right:18px}
.ref-card .ref-ph{width:100%;height:128px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3bccb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 16l-5-5L5 20'/%3E%3C/svg%3E"),linear-gradient(135deg,#f4f6fa 0%,#e8edf3 100%);background-repeat:no-repeat;background-position:center 40%,center;background-size:36px,cover;position:relative}
.ref-card .ref-ph::after{content:"Foto folgt";position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#a9b3c2;font-weight:700}
.ref-card h3{font-size:14px;margin-bottom:6px}
.ref-card p{font-size:12px;color:#707988;margin:0}
.proj-done{position:absolute;top:11px;left:11px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(20,32,55,.12);font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#2f7d52}
html.dark .refs{border-bottom-color:#232c3a}
html.dark .ref-sub{color:#9aa4b6}
html.dark .ref-card .ref-ph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6577' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 16l-5-5L5 20'/%3E%3C/svg%3E"),linear-gradient(135deg,#1a222f 0%,#141b26 100%)}
html.dark .ref-card .ref-ph::after{color:#5b6577}
html.dark .ref-card p{color:#9aa4b6}
html.dark .proj-done{background:rgba(18,24,34,.9);color:#5ecb8f}
@media(max-width:920px){.ref-grid{grid-template-columns:repeat(2,1fr)}.ref-head h2{font-size:32px}}
@media(max-width:520px){.ref-grid{grid-template-columns:1fr}}

/* Referenzen — larger, fully-covering media so photos fill the card */
.ref-card>img,.ref-card>.ref-ph{height:172px;object-fit:cover;object-position:center;display:block}

/* Digital tool cards — 2 per row on phones (icon on top, text below) */
@media(max-width:560px){
  .tool-stack{grid-template-columns:repeat(2,1fr);gap:12px}
  .tool-stack article{flex-direction:column;align-items:flex-start;height:auto;padding:14px 14px 16px;gap:9px}
}

/* If the process marquee track was built then the viewport grows past mobile,
   dissolve it so the steps fall back into the desktop grid. */
@media(min-width:481px){.process-line .proc-track{display:contents;animation:none}}

/* Anchor targets land clear of the floating nav */
section[id]{scroll-margin-top:96px}

/* ═══════════ Overhaul v100: trust + conversion layer ═══════════ */

/* — Client strip (social proof under the hero) — */
.client-strip{max-width:var(--container);margin:0 auto;padding:22px 24px;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.client-strip .cs-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9aa3b2;flex:none}
.client-strip ul{display:flex;align-items:center;gap:30px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.client-strip li{font-size:15px;font-weight:800;color:#3c4657;letter-spacing:.01em;opacity:.75}
html.dark .client-strip{border-bottom-color:#232c3a}
html.dark .client-strip li{color:#c6cedd}

/* — Badges / icon-card SVGs — */
.badges i svg{width:15px;height:15px;display:block}
.icon-card .ic-svg{display:grid;place-items:center}
.icon-card .ic-svg svg{width:30px;height:30px;display:block}

/* — Country chips instead of emoji flags — */
.flag.dach{display:inline-flex;gap:5px;align-items:center;background:none}
.flag.team svg{color:#141822}
html.dark .flag.team svg{color:#dbe1ec}

/* — Leistungen — */
.svc{padding-top:72px;padding-bottom:82px;border-bottom:1px solid var(--line)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.svc-grid article{background:#fff;border:1px solid #e3e8ef;border-radius:var(--r-card);padding:24px 24px 26px;box-shadow:0 14px 34px rgba(20,32,55,.05);transition:transform .25s ease,box-shadow .25s ease}
.svc-grid article:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(20,32,55,.11)}
.svc-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-card);background:#fdeceb;color:var(--red);margin-bottom:15px}
.svc-ic svg{width:22px;height:22px}
.svc-grid h3{font-size:15.5px;margin-bottom:8px}
.svc-grid p{font-size:13px;line-height:1.6;color:#5e6877;margin:0}
html.dark .svc{border-bottom-color:#232c3a}
html.dark .svc-grid article{background:#161d29;border-color:#28313f;box-shadow:0 14px 34px rgba(0,0,0,.4)}
html.dark .svc-ic{background:#241618}
html.dark .svc-grid p{color:#9aa4b6}

/* — Soft CTA between sections — */
.soft-cta{max-width:var(--container);margin:0 auto;padding:34px 24px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.soft-cta p{margin:0;font-size:16px;font-weight:700;color:#3c4657}
html.dark .soft-cta{border-bottom-color:#232c3a}
html.dark .soft-cta p{color:#c6cedd}

/* — Sicherheit & Vertraulichkeit — */
.sec-strip{padding-top:72px;padding-bottom:72px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbfcfe,#f5f7fa)}
.sec-inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.sec-head .eyebrow{color:var(--red)}
.sec-head h2{font-size:30px;line-height:1.12}
.sec-items{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sec-items>div{background:#fff;border:1px solid #e3e8ef;border-radius:var(--r-card);padding:22px;box-shadow:0 12px 30px rgba(20,32,55,.05)}
.sec-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#eef4ee;color:#2f7d52;margin-bottom:13px}
.sec-ic svg{width:20px;height:20px}
.sec-items b{display:block;font-size:14px;margin-bottom:6px;color:var(--ink)}
.sec-items p{font-size:12.5px;line-height:1.6;color:#5e6877;margin:0}
.sec-items a{color:var(--red);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(227,33,24,.35)}
html.dark .sec-strip{background:linear-gradient(180deg,#0d121c,#0b0f17);border-bottom-color:#232c3a}
html.dark .sec-items>div{background:#161d29;border-color:#28313f}
html.dark .sec-ic{background:#13241a;color:#5ecb8f}
html.dark .sec-items b{color:#e8ecf3}
html.dark .sec-items p{color:#9aa4b6}

/* — So starten wir — */
.start{padding-top:72px;padding-bottom:80px;border-bottom:1px solid var(--line)}
.start-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--container);margin:0 auto}
.start-steps article{position:relative;background:#fff;border:1px solid #e3e8ef;border-radius:var(--r-card);padding:26px 24px;box-shadow:0 12px 30px rgba(20,32,55,.05)}
.start-steps b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;font-size:16px;font-weight:900;margin-bottom:14px;box-shadow:0 8px 20px rgba(227,33,24,.3)}
.start-steps h3{font-size:15.5px;margin-bottom:8px}
.start-steps p{font-size:13px;line-height:1.6;color:#5e6877;margin:0}
html.dark .start{border-bottom-color:#232c3a}
html.dark .start-steps article{background:#161d29;border-color:#28313f}
html.dark .start-steps p{color:#9aa4b6}

/* — Kontakt: red banner becomes copy + white form card — */
.cta{position:relative;grid-template-columns:minmax(0,1fr) minmax(0,460px);align-items:start;padding:44px 52px;margin-top:48px}
.cta-features{grid-template-columns:1fr;gap:16px;margin-top:24px}
.cta-features span{font-size:initial}
.cf-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.14)}
.cf-ic svg{width:17px;height:17px;color:#fff}
.cta-alt{margin-top:22px !important;font-size:13px}
.cta-alt a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.contact-card{background:#fff;border-radius:var(--r-card);padding:26px;box-shadow:0 30px 70px rgba(120,10,5,.35);display:grid;gap:14px;color:var(--ink)}
.contact-card label,.kf-card label{display:grid;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.03em;color:#4a5468;min-width:0}
.contact-card input[type=text],.contact-card input[type=email],.contact-card input[type=tel],.contact-card textarea,
.kf-card input[type=text],.kf-card input[type=email],.kf-card textarea{width:100%;border:1px solid #dfe4ec;border-radius:10px;padding:11px 13px;font:inherit;font-size:14px;font-weight:500;color:var(--ink);background:#fbfcfe;transition:border-color .2s,box-shadow .2s}
.contact-card input:focus,.contact-card textarea:focus,.kf-card input:focus,.kf-card textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(227,33,24,.12)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact-card label.cf-gdpr,.kf-card label.cf-gdpr{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;font-size:11.5px;font-weight:500;color:#5e6877;line-height:1.5}
html.dark .contact-card label.cf-gdpr{color:#9aa4b6}
.cf-gdpr input{margin-top:2px;accent-color:var(--red)}
.cf-gdpr a{color:var(--red);font-weight:700}
.cf-submit{width:100%;justify-content:center;background:var(--red);color:#fff;border:none;cursor:pointer;font-weight:800}
.cf-submit:disabled{opacity:.6;cursor:wait}
.cf-status{margin:0;font-size:13px;font-weight:700;padding:10px 13px;border-radius:9px}
.cf-status.ok{background:#e8f6ee;color:#1e7a48}
.cf-status.err{background:#fdeceb;color:#c81710}
html.dark .contact-card{background:#161d29;color:#e8ecf3}
html.dark .contact-card label,html.dark .kf-card label{color:#aab4c6}
html.dark .contact-card input[type=text],html.dark .contact-card input[type=email],html.dark .contact-card input[type=tel],html.dark .contact-card textarea,
html.dark .kf-card input[type=text],html.dark .kf-card input[type=email],html.dark .kf-card textarea{background:#101724;border-color:#2e3949;color:#e8ecf3}

/* — Footer — */
.cad-footer{background:#0f141f;color:#aab4c6}
.cf-grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px;padding-top:56px;padding-bottom:40px}
.cf-logo{height:34px;width:auto;margin-bottom:16px;background:#fff;padding:5px 9px;border-radius:8px;box-sizing:content-box}
.cf-co p{font-size:12.5px;line-height:1.7;margin:0 0 10px}
.cf-legalform{color:#7c8798}
.cf-col{display:grid;gap:9px;align-content:start}
.cf-col b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#e8ecf3;margin-bottom:4px}
.cf-col a{color:#aab4c6;text-decoration:none;font-size:13.5px;transition:color .2s}
.cf-col a:hover{color:#fff}
.cf-bottom{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:18px;padding-bottom:26px;border-top:1px solid rgba(255,255,255,.08);font-size:12px}
.cf-anpc{display:flex;gap:10px;align-items:center;opacity:.85}

/* — Mobile sticky CTA — */
.m-cta{display:none}
@media(max-width:820px){
  .m-cta{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;border-radius:var(--r-card);background:var(--red);color:#fff;font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 14px 40px rgba(227,33,24,.4)}
  body{padding-bottom:70px}
}

/* — Responsive for the new sections — */
@media(max-width:1100px){
  .cta{grid-template-columns:1fr}
  .sec-inner{grid-template-columns:1fr;gap:26px}
}
@media(max-width:820px){
  .svc-grid,.sec-items,.start-steps{grid-template-columns:1fr}
  .cta{padding:30px 22px}
  .cf-row{grid-template-columns:1fr}
  .cf-grid{grid-template-columns:1fr 1fr;gap:26px;padding-top:42px}
  .cf-co{grid-column:1/-1}
  .client-strip{gap:14px;padding:18px}
  .client-strip ul{gap:16px}
  .client-strip li{font-size:13px}
}

/* — Team — */
section.team{padding-top:72px;padding-bottom:80px;border-bottom:1px solid var(--line)}


/* — small additions — */
.ref-sub.lph{margin-top:4px;font-size:12.5px;color:#8a93a5}
.start-note{text-align:center;margin:26px auto 0;font-size:13px;color:#6a7486;max-width:520px}
.cf-hours{font-size:12px;color:#7d8798}
html.dark .start-note{color:#9aa4b6}

/* Language button shows the current flag instead of globe+code */
.pill-lang-flag{font-size:19px;line-height:1;display:block}

/* Crisp SVG flags (render identically on every OS, unlike emoji) */
.flag.dach .fl{display:block;width:36px;height:25px;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(20,32,55,.22),inset 0 0 0 1px rgba(20,32,55,.08)}
.flag.dach .fl svg{display:block;width:100%;height:100%}
.cc-flag{display:inline-block;width:17px;height:12px;border-radius:3px;overflow:hidden;vertical-align:-1px;margin-left:4px;box-shadow:inset 0 0 0 1px rgba(20,32,55,.12)}
.cc-flag svg{display:block;width:100%;height:100%}

/* — Enhanced contact form: zones, pills, m² field, link helper, errors — */
.cf-zone{margin:6px 0 -2px;font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#98a1b2}
.cf-zone:first-child{margin-top:0}
.cf-zone:not(:first-child){padding-top:10px;border-top:1px solid #eef1f6}
.cf-field{display:grid;gap:8px}
.cf-lab{font-size:11.5px;font-weight:800;letter-spacing:.03em;color:#4a5468}
.cf-lab em{font-style:normal;font-weight:500;color:#98a1b2;margin-left:4px}
.cf-pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pill span{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border:1.5px solid #dfe4ec;border-radius:999px;font-size:12.5px;font-weight:700;color:#4a5468;background:#fbfcfe;cursor:pointer;transition:all .15s ease;user-select:none}
.pill span:hover{border-color:#c9d2e0}
.pill input:checked+span{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 16px rgba(227,33,24,.25)}
.pill input:checked+span::before{content:"✓";margin-right:6px;font-size:11px}
.pill input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.cf-row-bim{grid-template-columns:1fr auto;align-items:start}
.cf-m2 .cf-suffix{position:relative;display:block;max-width:160px}
.cf-m2 input{padding-right:38px !important}
.cf-m2 .cf-suffix i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;font-weight:700;color:#98a1b2;pointer-events:none}
.cf-help{font-weight:500;font-size:11px;line-height:1.55;color:#8a93a5;letter-spacing:0}
.cf-err{font-weight:700;font-size:11.5px;color:#c81710;letter-spacing:0}
.cf-note{margin:0;font-size:10.5px;color:#98a1b2;text-align:center}
html.dark .cf-lab{color:#aab4c6}
html.dark .pill span{background:#101724;border-color:#2e3949;color:#c2ccdb}
html.dark .pill input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:640px){
  .cf-row-bim{grid-template-columns:1fr}
  .cf-m2 .cf-suffix{max-width:55%}
  .contact-card input[type=text],.contact-card input[type=email],.contact-card input[type=tel],.contact-card textarea,
  .kf-card input[type=text],.kf-card input[type=email],.kf-card textarea{font-size:16px} /* prevent iOS zoom */
}

/* ═══ Contact card visual redesign (UI-spec): floating 560px card,
       numbered zones, tactile pills, unified 46px input scale ═══ */
.cta{grid-template-columns:1fr;gap:36px;align-items:start;justify-items:center;padding:56px 56px 60px;margin-top:48px;overflow:visible}
.cta-copy{text-align:center;max-width:860px}
.cta-features{grid-template-columns:repeat(3,1fr);gap:26px;margin-top:28px;text-align:left;justify-content:center}
.cta-alt{text-align:center}
.cta .contact-card{width:100%;max-width:660px;min-width:0}
.cta>*{min-width:0;max-width:100%}
.cta::before{border-radius:inherit}
.contact-card{counter-reset:zone;padding:34px 32px 28px;gap:16px;border-radius:var(--r-panel);box-shadow:0 40px 90px rgba(120,10,5,.38),0 4px 14px rgba(20,32,55,.10)}
.cf-zone{counter-increment:zone;display:flex;align-items:center;gap:10px;margin:14px 0 2px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#5e6877}
.cf-zone::before{content:counter(zone,decimal-leading-zero);display:grid;place-items:center;width:22px;height:22px;border-radius:7px;flex:none;background:#fdeceb;color:var(--red);font-size:10px;font-weight:900;letter-spacing:0}
.cf-zone::after{content:"";flex:1;height:1px;background:#eef1f6}
.cf-zone:first-child{margin-top:0}
.cf-zone:not(:first-child){padding-top:12px;border-top:0}
.cf-row{gap:14px}
.cf-field{gap:9px}
.contact-card label,.cf-lab{font-size:12px;font-weight:700;letter-spacing:.02em;color:#3d4657;gap:7px}
.cf-lab em{font-weight:500;color:#98a1b2}
.pill span{min-height:40px;padding:9px 16px;border:1px solid #d9dfe9;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.005em;color:#3d4657;background:#fff;box-shadow:0 1px 2px rgba(20,32,55,.06);transition:all .18s cubic-bezier(.2,.7,.3,1)}
.pill span:hover{border-color:#b8c2d4;transform:translateY(-1px);box-shadow:0 4px 10px rgba(20,32,55,.09)}
.pill span:active{transform:scale(.97)}
.pill input:checked+span{background:var(--red);border-color:var(--red);color:#fff;font-weight:700;box-shadow:0 8px 18px rgba(227,33,24,.30),inset 0 1px 0 rgba(255,255,255,.18)}
.pill input:checked+span::before{content:"✓";margin-right:7px;font-size:11px;font-weight:900}
.contact-card input[type=text],.contact-card input[type=email],.contact-card input[type=tel],.contact-card textarea{border:1px solid #d9dfe9;border-radius:11px;padding:12px 14px;font-weight:500;background:#fbfcfe;transition:border-color .18s,box-shadow .18s,background .18s}
.contact-card input::placeholder,.contact-card textarea::placeholder{color:#a3acbd;font-weight:400}
.contact-card input:hover,.contact-card textarea:hover{border-color:#b8c2d4}
.contact-card input:focus,.contact-card textarea:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3.5px rgba(227,33,24,.10)}
.cf-submit{height:52px;border-radius:12px;background:linear-gradient(180deg,#f23a2e,#e32118);font-size:15px;font-weight:800;letter-spacing:.01em;box-shadow:0 10px 26px rgba(227,33,24,.32),inset 0 1px 0 rgba(255,255,255,.20);transition:transform .18s,box-shadow .18s,filter .18s;margin-top:4px}
.cf-submit:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 16px 34px rgba(227,33,24,.38),inset 0 1px 0 rgba(255,255,255,.20)}
.cf-submit:active{transform:translateY(0)}
.cf-submit span{transition:transform .18s}
.cf-submit:hover span{transform:translateX(3px)}
/* .btn forces white-space:nowrap and a fixed height — fine for short CTAs, but this label
   carries the 24 h promise and overflowed the button on narrow phones. Let it wrap and
   grow instead of clipping; the arrow stays glued to the last word. */
.cf-submit{white-space:normal;height:auto;min-height:52px;padding:12px 18px;line-height:1.3;text-wrap:balance}
@media(max-width:420px){.cf-submit{font-size:14px;padding:12px 14px;gap:8px}}
html.dark .cf-zone{color:#aab4c6}
html.dark .cf-zone::before{background:#3a1a1c;color:#ff6b61}
html.dark .cf-zone::after{background:#28313f}
html.dark .contact-card label,html.dark .cf-lab{color:#c2ccdb}
html.dark .pill span{background:#101724;border-color:#2e3949;color:#c2ccdb;box-shadow:0 1px 2px rgba(0,0,0,.3)}
html.dark .pill span:hover{border-color:#46536a}
html.dark .contact-card input:hover,html.dark .contact-card textarea:hover{border-color:#46536a}
html.dark .contact-card input:focus,html.dark .contact-card textarea:focus{background:#0d1420}
html.dark .contact-card{box-shadow:0 40px 90px rgba(0,0,0,.55)}
@media(max-width:1100px){.cta{grid-template-columns:1fr;gap:30px}.contact-card{margin-top:0;width:100%}}
@media(max-width:820px){
  .cta{margin-top:0;padding:30px 18px 36px}
  .cta-features{grid-template-columns:1fr;gap:16px;justify-items:start;text-align:left}
  .contact-card{padding:26px 16px 22px;max-width:100%;min-width:0}
  .pill span{white-space:normal;line-height:1.3}
}
@media(max-width:640px){.cf-pills{gap:9px}.pill span{min-height:44px;font-size:13.5px}.cf-row{gap:12px}}

/* WhatsApp next to the direct e-mail in the CTA */
.cta-wa{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:10px;color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.cta-wa svg{flex:none}

/* Turnstile widget: match the input column, never overflow the card */
.cf-turnstile{width:100%;max-width:100%;min-width:0;overflow:hidden;border-radius:11px}
.cf-turnstile iframe{width:100% !important;max-width:100%}

/* ── Collision showcase redesign: one unified block — the step control is a
     glass bar overlaid on the image, the badge moves to the top ── */
.collision-show{position:relative;display:block}
.cs-badge{top:16px;bottom:auto}
.cs-steps{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;gap:8px}
.cs-steps button{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);border-radius:12px;padding:10px 14px;overflow:hidden;
  box-shadow:0 8px 24px rgba(20,32,55,.18)}
.cs-steps button b{margin-bottom:2px}
.cs-steps button.active{transform:none;border-color:rgba(227,33,24,.4);box-shadow:0 10px 28px rgba(227,33,24,.22)}
html.dark .cs-steps button{background:rgba(17,24,36,.72);border-color:rgba(255,255,255,.14)}
@media(max-width:640px){
  .cs-badge{left:10px;top:10px;padding:8px 13px;font-size:12px}
  .cs-steps{left:10px;right:10px;bottom:10px;gap:6px}
  .cs-steps button{padding:9px 0;text-align:center;border-radius:10px}
  .cs-steps button b{margin:0;font-size:12.5px}
  .cs-steps button em{display:none}
  .cs-steps button.active b{color:var(--red)}
}

/* — Cookie consent (page-local, matches the CAD design language) — */
.ck-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:80;background:#0f141f;color:#c7cfdd;border-radius:var(--r-panel);box-shadow:0 26px 70px rgba(0,0,0,.45);padding:18px 20px}
.ck-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.ck-copy{flex:1 1 380px;min-width:0}
.ck-copy b{display:block;color:#fff;font-size:14px;margin-bottom:5px}
.ck-copy p{margin:0;font-size:12.5px;line-height:1.6}
.ck-copy a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* An author display rule beats the UA [hidden] rule, so the attribute has to be
   honoured explicitly — otherwise the options are always visible and the "Anpassen"
   button appears to do nothing. */
.ck-opts[hidden]{display:none}
.ck-opts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px}
.ck-opts label{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#e8ecf3;cursor:pointer;min-height:32px}
.ck-opts input{width:16px;height:16px;accent-color:var(--red);cursor:pointer}
.ck-actions{display:flex;gap:10px;flex:none}
.ck-btn{border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:800;padding:11px 20px;border-radius:11px;transition:transform .18s,filter .18s}
.ck-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.ck-ghost{background:rgba(255,255,255,.12);color:#e8ecf3}
.ck-primary{background:var(--red);color:#fff}
@media(max-width:820px){
  .ck-banner{left:10px;right:10px;bottom:78px;padding:16px}   /* clear of the sticky CTA */
  /* Three buttons in one row do not fit a phone: "Alle akzeptieren" wrapped and pushed
     out of the panel. Two rows instead — and the accept/reject pair shares a row at the
     same size, so refusing is exactly as easy as accepting (Art. 4 Nr. 11 DSGVO). */
  .ck-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .ck-btn{min-width:0;white-space:normal;padding:12px 10px;line-height:1.25;min-height:46px}
  .ck-actions [data-ck=options]{grid-column:1/-1;order:-1;background:transparent;
    border:1px solid rgba(255,255,255,.18);font-weight:700}
}
@media(max-width:360px){
  .ck-btn{font-size:12.5px;padding:12px 8px}
}

/* — Free-quote reassurance + form intro — */
.hero-reassure{margin:12px 0 22px;font-size:12.5px;font-weight:600;color:#7d8798;letter-spacing:.01em}
html.dark .hero-reassure{color:#9aa4b6}
.cta p.cf-intro{margin:0 0 2px;padding:2px 6px 15px;text-align:center;font-size:13.5px;line-height:1.6;font-weight:500;color:#6a7486;background:none;border:0;border-bottom:1px solid #eef1f6}
.cta p.cf-intro strong{color:var(--ink);font-weight:800}
html.dark .cta p.cf-intro{color:#9aa4b6;border-bottom-color:#28313f}
html.dark .cta p.cf-intro strong{color:#e8ecf3}
@media(max-width:820px){.hero-reassure{font-size:12px}}

/* Contact banner: breathe a few px from the viewport edges and share the
   card's corner radius so the nesting looks intentional */
.cta{width:calc(100% - 36px);margin-left:auto;margin-right:auto;border-radius:var(--r-panel)}
@media(max-width:820px){.cta{width:calc(100% - 20px)}}

/* The card is a grid: without an explicit minmax(0,…) column, a wide child
   (the Turnstile iframe, min 300px) stretches the whole track past the card. */
.contact-card{grid-template-columns:minmax(0,1fr)}
.cf-turnstile{justify-self:stretch}

/* — Klare Rollenverteilung: what we do vs what stays with the client — */
.scope{padding-top:72px;padding-bottom:80px;border-bottom:1px solid var(--line)}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:var(--container);margin:0 auto}
.scope-grid article{border:1px solid #e3e8ef;border-radius:var(--r-card);padding:26px 26px 24px;background:#fff;box-shadow:0 12px 30px rgba(20,32,55,.05)}
.scope-grid b{display:block;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.scope-do b{color:var(--red)}
.scope-you b{color:#2f7d52}
.scope-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.scope-grid li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.6;color:#4a5468}
.scope-grid li::before{position:absolute;left:0;top:0;font-weight:900}
.scope-do li::before{content:"✓";color:var(--red)}
.scope-you li::before{content:"→";color:#2f7d52}
.scope-note{margin:16px 0 0;padding-top:14px;border-top:1px solid #eef1f6;font-size:12.5px;line-height:1.6;color:#6a7486}
html.dark .scope{border-bottom-color:#232c3a}
html.dark .scope-grid article{background:#161d29;border-color:#28313f}
html.dark .scope-grid li{color:#c2ccdb}
html.dark .scope-note{color:#9aa4b6;border-top-color:#28313f}
@media(max-width:820px){.scope-grid{grid-template-columns:1fr}}

/* — reference card: honest role line — */
.project-card .ref-role{display:block;margin-top:8px;padding-top:8px;border-top:1px solid #eef1f6;font-size:11px;line-height:1.45;letter-spacing:.01em;color:#8a93a4}
html.dark .project-card .ref-role{border-top-color:#28313f;color:#8a94a6}

/* — Preisrahmen: proper price card, not an afterthought — */
.pricebox{max-width:var(--container);margin:22px auto 0;display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:stretch;
  border:1px solid #e3e8ef;border-radius:var(--r-card);background:#fff;overflow:hidden;box-shadow:0 12px 30px rgba(20,32,55,.05)}
.pb-figure{position:relative;padding:30px 30px 28px;background:linear-gradient(160deg,#fff6f5 0%,#fff 70%);border-right:1px solid #eef1f6;display:flex;flex-direction:column;justify-content:center}
.pb-figure::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.pb-label{margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#98a1b2}
.pb-amount{margin:0;display:flex;align-items:baseline;line-height:1;color:var(--ink)}
.pb-amount span{font-size:clamp(34px,4.4vw,46px);font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pb-amount b{font-size:clamp(20px,2.4vw,26px);font-weight:800;color:var(--red)}
.pb-unit{margin:9px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#6a7486}
.pb-mid{padding:24px 28px;display:grid;align-content:center;gap:14px;min-width:0}
.pb-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pb-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding-left:19px;position:relative}
.pb-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.pb-list b{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.005em}
.pb-list span{font-size:12.5px;line-height:1.55;color:#6a7486}
.pb-chips{list-style:none;margin:2px 0 0;padding:12px 0 0;border-top:1px solid #eef1f6;display:flex;flex-wrap:wrap;gap:7px}
.pb-chips li{display:inline-flex;align-items:center;gap:5px;padding:5px 10px 5px 8px;border-radius:999px;background:#f4f7fb;
  font-size:11px;font-weight:800;letter-spacing:.01em;color:#4a5468;white-space:nowrap}
.pb-chips svg{width:12px;height:12px;flex:none;color:#2f7d52}
.pb-note{margin:0;font-size:11px;line-height:1.55;color:#98a1b2}
html.dark .pricebox{background:#161d29;border-color:#28313f}
html.dark .pb-figure{background:linear-gradient(160deg,#20161a 0%,#161d29 70%);border-right-color:#28313f}
html.dark .pb-amount{color:#eef2f8}
html.dark .pb-unit,html.dark .pb-list span{color:#9aa4b6}
html.dark .pb-chips{border-top-color:#28313f}
html.dark .pb-chips li{background:#212a37;color:#c2ccdb}
html.dark .pb-chips svg{color:#5fbf8c}
html.dark .pb-note{color:#8a94a6}
html.dark .pb-list b{color:#eef2f8}
@media(max-width:820px){
  .pricebox{grid-template-columns:1fr}
  .pb-figure{border-right:0;border-bottom:1px solid #eef1f6;padding:24px 22px;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 12px}
  .pb-label{width:100%;margin-bottom:8px}
  .pb-unit{margin:0}
  .pb-list{padding:22px}
  html.dark .pb-figure{border-bottom-color:#28313f}
}

/* — Musterplan: work samples (compact gallery) — */
.mp{padding-top:66px;padding-bottom:76px;border-bottom:1px solid var(--line)}
.mp-gallery{max-width:var(--container);margin:10px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mp-item{margin:0;min-width:0;border:1px solid #e3e8ef;border-radius:var(--r-card);background:#fff;overflow:hidden;box-shadow:0 12px 30px rgba(20,32,55,.05);display:flex;flex-direction:column}
.mp-open{display:block;width:100%;padding:0;border:0;background:#f6f8fb;cursor:zoom-in;position:relative;overflow:hidden;line-height:0;aspect-ratio:16/9}
.mp-open img{display:block;width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.mp-open:hover img{transform:scale(1.04)}
.mp-zoom{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;
  background:rgba(17,24,39,.86);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1;backdrop-filter:blur(6px);
  opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s}
.mp-zoom svg{width:13px;height:13px}
.mp-open:hover .mp-zoom,.mp-open:focus-visible .mp-zoom{opacity:1;transform:none}
.mp-open:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.mp-item figcaption{display:grid;gap:4px;padding:15px 18px 17px;border-top:1px solid #eef1f6;flex:1 1 auto}
.mp-item figcaption b{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.005em}
.mp-item figcaption span{font-size:12.5px;line-height:1.6;color:#6a7486}
html.dark .mp{border-bottom-color:#232c3a}
html.dark .mp-item{background:#161d29;border-color:#28313f}
html.dark .mp-open{background:#0f1520}
html.dark .mp-item figcaption{border-top-color:#28313f}
html.dark .mp-item figcaption b{color:#eef2f8}
html.dark .mp-item figcaption span{color:#9aa4b6}
@media(max-width:1000px){.mp-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .mp-gallery{grid-template-columns:1fr}
  .mp-zoom{opacity:1;transform:none}
}

/* — Musterplan lightbox: compact, translucent, click-to-zoom — */
.mpv{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,14,22,.62);backdrop-filter:blur(8px) saturate(120%);opacity:0;transition:opacity .2s ease}
.mpv.is-on{opacity:1}
.mpv[hidden]{display:none}
.mpv-panel{width:min(80vw,1180px);max-height:80vh;display:flex;flex-direction:column;overflow:hidden;
  background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.5);border-radius:16px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);transform:scale(.98);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.mpv.is-on .mpv-panel{transform:none}
.mpv-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 12px 12px 18px;border-bottom:1px solid #eaeef4}
.mpv-title{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8a93a4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpv-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:9px;
  background:#f2f4f8;color:#4a5468;cursor:pointer;transition:background .15s,color .15s}
.mpv-x:hover{background:var(--red);color:#fff}
.mpv-x:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.mpv-x svg{width:16px;height:16px}
.mpv-stage{flex:1 1 auto;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f6f8fb;touch-action:none;min-height:0}
.mpv-stage img{max-width:none;transform-origin:center center;cursor:zoom-in;will-change:transform;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.mpv.is-zoom .mpv-stage img{cursor:grab}
.mpv.is-drag .mpv-stage img{cursor:grabbing}
.mpv-hint{flex:none;margin:0;padding:9px 16px 11px;text-align:center;font-size:11px;color:#98a1b2;border-top:1px solid #eaeef4;background:#fff}
html.dark .mpv-panel{background:rgba(22,29,41,.97);border-color:rgba(255,255,255,.08)}
html.dark .mpv-bar,html.dark .mpv-hint{border-color:#28313f}
html.dark .mpv-hint{background:#161d29;color:#8a94a6}
html.dark .mpv-stage{background:#0f1520}
html.dark .mpv-x{background:#222b39;color:#c2ccdb}
@media(max-width:700px){
  .mpv{padding:12px}
  .mpv-panel{width:94vw;max-height:86vh}
  .mpv-title{font-size:10.5px}
  .mpv-hint{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){.mpv,.mpv-panel{transition:none}}

/* — Preisrahmen: 2026 new-client offer — */
.pricebox{grid-template-columns:minmax(0,236px) minmax(0,1fr) minmax(0,258px)}
.pb-promo{grid-column:3;grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:8px;
  margin:14px 14px 14px 0;padding:22px 20px;border-radius:12px;position:relative;overflow:hidden;
  background:linear-gradient(152deg,#fff3f1 0%,#fffafa 62%,#fff 100%);border:1px solid #f6dcd8}
.pb-promo::after{content:"";position:absolute;right:-38px;top:-38px;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 30% 70%,rgba(231,45,34,.13),rgba(231,45,34,0) 70%)}
.pb-tag{position:relative;z-index:1;display:inline-flex;align-self:flex-start;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  background:var(--red);color:#fff;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.pb-off{position:relative;z-index:1;margin:4px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pb-off b{font-size:34px;font-weight:900;letter-spacing:-.025em;line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.pb-off span{font-size:11.5px;font-weight:800;color:#8a7370}
.pb-rate{position:relative;z-index:1;margin:2px 0 0;padding-bottom:9px;border-bottom:1px solid #f4e0dd;font-size:12px;font-weight:700;color:#8a7370}
.pb-rate b{font-size:17px;font-weight:900;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pb-rate i{font-style:normal}
.pb-txt{position:relative;z-index:1;margin:0;font-size:11.5px;line-height:1.6;color:#7c8493}
html.dark .pb-promo{background:linear-gradient(152deg,#2a1a1c 0%,#1b212c 70%);border-color:#3a2a2c}
html.dark .pb-off b{color:#ff6b60}
html.dark .pb-off span,html.dark .pb-rate{color:#b09a97}
html.dark .pb-rate{border-bottom-color:#3a2a2c}
html.dark .pb-rate b{color:#fff}
html.dark .pb-txt{color:#9aa4b6}
@media(max-width:1040px){
  .pricebox{grid-template-columns:minmax(0,236px) minmax(0,1fr)}
  .pb-promo{grid-column:1/-1;grid-row:2;margin:0 14px 14px}
}
@media(max-width:820px){
  .pricebox{grid-template-columns:1fr}
  .pb-promo{grid-column:1;grid-row:3;margin:0 14px 14px}
}
.pricebox{scroll-margin-top:104px}
@media(max-width:900px){.pricebox{scroll-margin-top:84px}}











/* — Preisrahmen: verifiable VAT / reverse-charge band — */
.pb-vat{display:flex;gap:12px;align-items:flex-start;margin-top:4px;padding:14px 16px;border-radius:11px;
  background:#f3f8f5;border:1px solid #dcebe2}
.pb-vat-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#e2f0e8;color:#2f7d52}
.pb-vat-ic svg{width:17px;height:17px}
.pb-vat-body{min-width:0;display:grid;gap:5px}
.pb-vat-top{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pb-vat-top b{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#2f7d52}
.pb-vat-id{padding:3px 8px;border-radius:5px;background:#fff;border:1px solid #d3e5da;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.pb-vat-txt{margin:0;font-size:11.5px;line-height:1.6;color:#5d6b63}
.pb-vat-link{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#2f7d52;text-decoration:none;
  border-bottom:1px solid rgba(47,125,82,.35);align-self:flex-start;padding-bottom:1px;transition:color .15s,border-color .15s}
.pb-vat-link svg{width:12px;height:12px}
.pb-vat-link:hover{color:#215c3b;border-bottom-color:#215c3b}
.pb-vat-link:focus-visible{outline:2px solid #2f7d52;outline-offset:3px}
html.dark .pb-vat{background:#15201a;border-color:#25382c}
html.dark .pb-vat-ic{background:#1d2f24;color:#5fbf8c}
html.dark .pb-vat-top b,html.dark .pb-vat-link{color:#5fbf8c}
html.dark .pb-vat-id{background:#0f1520;border-color:#25382c;color:#eef2f8}
html.dark .pb-vat-txt{color:#9ab0a4}
html.dark .pb-vat-link{border-bottom-color:rgba(95,191,140,.4)}
@media(max-width:520px){.pb-vat{padding:13px}.pb-vat-ic{display:none}}

/* — TEAM CARDS — clean, centred; natural card heights (align-items:start), chips packed under the divider — */
.team{padding-top:74px;padding-bottom:82px}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:start;
  max-width:var(--container);margin:0 auto}
.team-grid article{display:flex;flex-direction:column;align-items:center;min-width:0;
  padding:26px 16px 20px;text-align:center;background:#fff;border:1px solid #e3e8ef;border-radius:var(--r-card);
  box-shadow:0 12px 30px rgba(20,32,55,.05);
  transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease,border-color .26s ease}
.team-grid article:hover{transform:translateY(-3px);border-color:#dbe2ec;box-shadow:0 22px 44px rgba(20,32,55,.10)}
.team-grid article:focus-within{border-color:#c6d3e4}

.tg-av{position:relative;flex:none;display:block;width:96px;height:96px;margin:0 0 14px;border-radius:50%;
  overflow:hidden;background:#eef1f6;isolation:isolate;
  box-shadow:0 0 0 1px rgba(20,32,55,.07),0 6px 18px rgba(20,32,55,.10)}
.tg-av img{width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tg-av::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:2}
.team-grid article:hover .tg-av img{transform:scale(1.04)}

.team-grid h3{margin:0 0 5px;font-size:14px;font-weight:800;line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
.team-grid article > p{margin:0;font-size:11.5px;line-height:1.5;color:#6a7486;
  min-height:calc(1.5em * 2);text-wrap:balance;overflow-wrap:anywhere}

/* meta is a single tightly-packed chip cluster pinned directly under the divider.
   Cards size to their own content (grid is align-items:start), so there is never a void:
   the divider baseline is shared across all five cards (equal avatar+name+role height above),
   the chips pack tight from the top with an even rhythm, and each card simply ends where its
   content ends. Unequal chip counts read as naturally different card heights, not as holes. */
.tg-meta{margin-top:16px;width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 5px;padding-top:15px;border-top:1px solid #eef1f6;box-sizing:border-box;align-content:flex-start}
.tg-meta:empty{display:none}

.tg-nova{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;white-space:nowrap;
  background:#f2f5f9;color:#5c6676;font-size:10px;font-weight:800;letter-spacing:.015em;line-height:1.2}
.tg-nova i{flex:none;width:6px;height:6px;border-radius:50%;background:#9aa4b6}
.tg-nova.is-exp{background:#fdeceb;color:#a32219}
.tg-nova.is-exp i{background:var(--red)}
.tg-sw{display:inline-flex;align-items:center;padding:5px 8px;border:1px solid #e3e8ef;border-radius:999px;
  background:#fff;color:#6a7486;font-size:10px;font-weight:800;letter-spacing:.01em;line-height:1.2}
.tg-sw.is-lang{background:#f4f7fb;border-color:transparent;color:#5c6676}
.tg-in{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  background:#f1f5fa;color:#0a66c2;font-size:10px;font-weight:800;letter-spacing:.02em;text-decoration:none;
  transition:background .15s,color .15s}
.tg-in svg{width:12px;height:12px}
.tg-in:hover{background:#0a66c2;color:#fff}
.tg-in:focus-visible{outline:2px solid #0a66c2;outline-offset:2px}

.team-lang{max-width:var(--container);margin:20px auto 0;padding:15px 20px;
  border:1px dashed #dfe5ee;border-radius:var(--r-card);
  font-size:12.5px;line-height:1.6;color:#6a7486;text-align:center}
.team-lang b{display:inline-block;margin-right:8px;font-size:10.5px;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;color:#98a1b2}

html.dark .team-grid article{background:#161d29;border-color:#28313f}
html.dark .team-grid article:hover{border-color:#35414f}
html.dark .tg-av{background:#222b39;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 6px 18px rgba(0,0,0,.35)}
html.dark .team-grid h3{color:#eef2f8}
html.dark .team-grid article > p{color:#9aa4b6}
html.dark .tg-meta{border-top-color:#28313f}
html.dark .tg-nova{background:#212a37;color:#aab4c6}
html.dark .tg-nova.is-exp{background:#2c1719;color:#ff8b82}
html.dark .tg-sw{background:transparent;border-color:#2e3949;color:#9aa4b6}
html.dark .tg-sw.is-lang{background:#1c2430;border-color:transparent;color:#aab4c6}
html.dark .tg-in{background:#1b2634;color:#6cb1f0}
html.dark .tg-in:hover{background:#0a66c2;color:#fff}
html.dark .team-lang{border-color:#2e3949;color:#9aa4b6}

@media(max-width:1100px){
  .team-grid{grid-template-columns:repeat(6,1fr)}
  .team-grid > article{grid-column:span 2}
  .team-grid > article:nth-child(4){grid-column:2/span 2}
}
@media(max-width:640px){
  .team-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .team-grid > article{grid-column:span 2}
  .team-grid > article:nth-child(4){grid-column:auto/span 2}
  .team-grid > article:nth-child(5){grid-column:2/span 2}
  .tg-av{width:84px;height:84px}
}
@media(max-width:430px){
  .team-grid{grid-template-columns:1fr}
  .team-grid > article,.team-grid > article:nth-child(4),.team-grid > article:nth-child(5){grid-column:1/-1}
  .team-grid article > p{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .team-grid article,.tg-av img{transition:none}
  .team-grid article:hover{transform:none}
  .team-grid article:hover .tg-av img{transform:none}
}

/* — KAPAZITÄT & VERFÜGBARKEIT — 4-up feature grid, house card treatment, red-tint icon badges — */
.kapa{padding-top:74px;padding-bottom:82px;border-top:1px solid var(--line)}
.kapa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;
  max-width:var(--container);margin:0 auto}
.kapa-grid article{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0;
  padding:24px 20px 22px;background:#fff;border:1px solid #e3e8ef;border-radius:var(--r-card);
  box-shadow:0 12px 30px rgba(20,32,55,.05);
  transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease,border-color .26s ease}
.kapa-grid article:hover{transform:translateY(-3px);border-color:#dbe2ec;box-shadow:0 22px 44px rgba(20,32,55,.10)}
.k-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 16px;
  border-radius:12px;background:#fff6f5;color:var(--red);box-shadow:inset 0 0 0 1px rgba(227,33,24,.10)}
.k-ic svg{width:22px;height:22px}
.k-label{margin:0 0 6px;font-size:14px;font-weight:800;line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);text-wrap:balance}
.k-line{margin:0;font-size:12.5px;line-height:1.55;color:#6a7486}

html.dark .kapa{border-top-color:#232c3a}
html.dark .kapa-grid article{background:#161d29;border-color:#28313f}
html.dark .kapa-grid article:hover{border-color:#35414f}
html.dark .k-ic{background:rgba(232,53,42,.12);color:#ff8b82;box-shadow:inset 0 0 0 1px rgba(232,53,42,.22)}
html.dark .k-label{color:#eef2f8}
html.dark .k-line{color:#9aa4b6}

@media(max-width:900px){.kapa-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kapa-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .kapa-grid article{transition:none}
  .kapa-grid article:hover{transform:none}
}

/* — FAQ: Ablauf, Abrechnung, Termine — */
.faq{padding-top:70px;padding-bottom:80px;border-bottom:1px solid var(--line)}
.faq-list{max-width:860px;margin:6px auto 0;border:1px solid #e3e8ef;border-radius:var(--r-card);
  background:var(--card);overflow:hidden;box-shadow:0 14px 34px rgba(20,32,55,.05)}
.faq-item{border-bottom:1px solid #eef1f6}
.faq-item:last-child{border-bottom:0}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;font-size:14px;font-weight:800;letter-spacing:-.005em;line-height:1.4;color:var(--ink);
  transition:background .18s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:#f8fafc}
.faq-item summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.faq-item summary i{flex:none;position:relative;width:19px;height:19px;border-radius:50%;background:#f1f4f9;transition:background .18s ease}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;left:50%;top:50%;background:#5c6676;border-radius:1px;
  transform:translate(-50%,-50%);transition:transform .22s cubic-bezier(.22,1,.36,1),background .18s}
.faq-item summary i::before{width:9px;height:1.7px}
.faq-item summary i::after{width:1.7px;height:9px}
.faq-item[open] summary{background:#fbfcfe}
.faq-item[open] summary i{background:#fdeceb}
.faq-item[open] summary i::before,.faq-item[open] summary i::after{background:var(--red)}
.faq-item[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-a{padding:0 22px 20px}
.faq-a p{margin:0;max-width:66ch;font-size:13px;line-height:1.72;color:#5c6676}
.faq-a b{font-weight:800;color:#3f4859}
html.dark .faq{border-bottom-color:#232c3a}
html.dark .faq-list{background:#161d29;border-color:#28313f}
html.dark .faq-item{border-bottom-color:#232c3a}
html.dark .faq-item summary{color:#eef2f8}
html.dark .faq-item summary:hover,html.dark .faq-item[open] summary{background:#1a2230}
html.dark .faq-item summary i{background:#222b39}
html.dark .faq-item summary i::before,html.dark .faq-item summary i::after{background:#aab4c6}
html.dark .faq-item[open] summary i{background:#2c1719}
html.dark .faq-a p{color:#9aa4b6}
html.dark .faq-a b{color:#dbe1ec}
@media(max-width:640px){
  .faq-item summary{padding:16px 16px;font-size:13.5px}
  .faq-a{padding:0 16px 17px}
  .faq-a p{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){.faq-item summary,.faq-item summary i,.faq-item summary i::before,.faq-item summary i::after{transition:none}}

/* — nav: 7 section links have to fit — tighten before collapsing — */
#team,#ablauf,#musterplan,#referenzen,#projekte,#leistungen,#workflow,#preise{scroll-margin-top:100px}
@media(max-width:1380px){.pill-links a{padding:8px 9px;font-size:12.5px}}
@media(max-width:1240px){
  .cad-nav{gap:8px}
  .pill-links a{padding:7px 7px;font-size:12px;letter-spacing:-.01em}
  .pill-cta{padding-inline:16px;font-size:12.5px}
}
@media(max-width:1100px){
  .pill-links a{padding:7px 6px;font-size:11.5px}
  .pill-icon{width:34px;height:34px}
}
@media(max-width:960px){
  .pill-links{gap:0}
  .pill-links a{padding:7px 5px;font-size:11px}
  .pill-cta span{display:none}
}
@media(max-width:900px){.pill-links a{font-size:10.5px;padding:7px 4px}}
@media(max-width:820px){
  .pill-links a{padding:13px 16px;font-size:14.5px;font-weight:700;letter-spacing:0;border-radius:10px;min-height:46px;display:flex;align-items:center;white-space:nowrap;text-align:left}
  .pill-cta span{display:inline}
}

/* — contact form: schedule fields (native date, styled like every other input) — */
.cf-row-dates{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-date{display:flex;flex-direction:column;min-width:0}
.cf-date input[type="date"]{
  -webkit-appearance:none;appearance:none;
  width:100%;box-sizing:border-box;height:43px;padding:0 14px;
  border:1px solid #d9dfe9;border-radius:11px;background:#fbfcfe;
  font-family:inherit;font-size:14px;font-weight:500;line-height:1.2;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.cf-date input[type="date"]:hover{border-color:#c6cfdd}
.cf-date input[type="date"]:focus{outline:none;border-color:var(--red);background:#fff;
  box-shadow:0 0 0 3px rgba(231,45,34,.12)}
/* muted until a date is actually picked */
.cf-date input[type="date"]:not(.has-val){color:#98a1b2;font-weight:400}
.cf-date input[type="date"]::-webkit-datetime-edit{padding:0}
.cf-date input[type="date"]::-webkit-calendar-picker-indicator{
  width:17px;height:17px;margin:0;padding:0;cursor:pointer;opacity:.45;
  transition:opacity .15s ease,transform .15s ease}
.cf-date input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:.85}
.cf-date input[type="date"]:focus::-webkit-calendar-picker-indicator{opacity:1}
.cf-hint{display:block;margin-top:6px;font-style:normal;font-size:11px;line-height:1.4;color:#98a1b2}
html.dark .cf-date input[type="date"]{background:#131a25;border-color:#2e3949;color:#eef2f8}
html.dark .cf-date input[type="date"]:hover{border-color:#3a4759}
html.dark .cf-date input[type="date"]:focus{background:#161d29;border-color:var(--red)}
html.dark .cf-date input[type="date"]:not(.has-val){color:#7b8598}
html.dark .cf-date input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6)}
html.dark .cf-hint{color:#8a94a6}
@media(max-width:640px){.cf-row-dates{grid-template-columns:1fr}}
.pb-unit em{display:block;margin-top:4px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.01em;color:#98a1b2}
html.dark .pb-unit em{color:#8a94a6}
.ref-sub.sia{margin-top:6px;font-size:12px;color:#8a93a4}
html.dark .ref-sub.sia{color:#8a94a6}
.faq-note{max-width:860px;margin:14px auto 0;font-size:11px;line-height:1.55;color:#98a1b2;text-align:center}
html.dark .faq-note{color:#7b8598}

/* ---------- Google Ads variant ---------------------------------------------
   Only used by service/cad-ads.blade.php; the organic page never renders these
   selectors, so nothing here can affect it. */

/* Role boundary line in the hero — the single most important sentence for paid
   traffic, so it gets a rule and weight rather than sitting in the lead text. */
.hero-role{margin:14px 0 0;padding-left:14px;border-left:3px solid var(--red);
  font-size:15px;font-weight:800;line-height:1.45;color:#1c2230;max-width:34em}
html.dark .hero-role{color:#e8ecf3}

/* Vertrauensleiste */
.trustbar{padding-top:22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.tb-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:10px 30px}
.tb-list li{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;color:#3d4657}
html.dark .tb-list li{color:#c7cfdd}
.tb-list i{display:inline-flex;width:19px;height:19px;flex:none;color:var(--red)}
.tb-list i svg{width:100%;height:100%}

/* Short form under the hero. Same field treatment as the main contact card, but on a
   white section it needs a neutral elevation rather than the red glow the CTA uses. */
.kurzform{padding-top:40px;padding-bottom:14px}
.kf-card{position:relative;max-width:620px;margin:0 auto;display:grid;gap:15px;
  background:#fff;border:1px solid #e8ecf3;border-radius:var(--r-panel);padding:30px 30px 26px;
  box-shadow:0 26px 60px rgba(20,32,55,.10),0 2px 8px rgba(20,32,55,.05);color:var(--ink)}
.kf-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:var(--r-panel) var(--r-panel) 0 0;
  background:linear-gradient(90deg,var(--red),#f4a52b)}
html.dark .kf-card{background:#161d29;border-color:rgba(255,255,255,.10);color:#e8ecf3;
  box-shadow:0 26px 60px rgba(0,0,0,.45)}
.kf-head{display:grid;gap:4px;margin-bottom:2px}
.kf-head b{font-size:19px;font-weight:900;letter-spacing:-.025em;color:#111827}
html.dark .kf-head b{color:#f3f6fb}
.kf-head span{font-size:12.5px;line-height:1.5;color:#6b7485}
html.dark .kf-head span{color:#9aa4b6}
.kf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kf-card .cf-submit{margin-top:2px}
@media(max-width:640px){
  .kurzform{padding-top:28px}
  .kf-row{grid-template-columns:1fr}
  .kf-card{padding:22px 20px 20px;gap:13px}
  .kf-head b{font-size:17.5px}
}

/* Collapsed "everything else" block at the bottom */
.ads-more{padding-top:10px;padding-bottom:20px}
.am-details{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:#fff}
html.dark .am-details{background:#111825;border-color:rgba(255,255,255,.10)}
.am-details summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:20px 24px;font-size:15px;font-weight:800;color:#1c2230}
.am-details summary::-webkit-details-marker{display:none}
html.dark .am-details summary{color:#e8ecf3}
.am-details summary:hover{background:rgba(17,24,39,.03)}
.am-details summary i{position:relative;width:18px;height:18px;flex:none}
.am-details summary i::before,.am-details summary i::after{content:"";position:absolute;
  background:var(--red);border-radius:2px;transition:transform .2s ease}
.am-details summary i::before{top:8px;left:0;width:18px;height:2px}
.am-details summary i::after{top:0;left:8px;width:2px;height:18px}
.am-details[open] summary i::after{transform:scaleY(0)}
.am-body{border-top:1px solid var(--line)}
html.dark .am-body{border-color:rgba(255,255,255,.10)}

/* Liability framing inside the role block */
.scope-liab{margin:14px 0 0;padding:14px 16px;border-radius:12px;
  background:rgba(232,53,42,.06);border:1px solid rgba(232,53,42,.16);
  font-size:13.5px;line-height:1.6;font-weight:700;color:#1c2230}
html.dark .scope-liab{background:rgba(232,53,42,.12);color:#e8ecf3}

/* Sticky header must never cover an anchor target — the Ads sitelinks point
   straight at these. */
#musterplan,#preise,#ablauf,#leistungen,#projekte,#team,#kontakt,
#referenzen,#prozess,#kollisionspruefung,#schnellanfrage{scroll-margin-top:96px}
@media(max-width:900px){
  #musterplan,#preise,#ablauf,#leistungen,#projekte,#team,#kontakt,
  #referenzen,#prozess,#kollisionspruefung,#schnellanfrage{scroll-margin-top:84px}
}

/* The organic hero hides its eyebrow and buttons on phones — the sticky CTA carries
   the action and the mockup wanted a clean first screen. Paid traffic is different:
   the B2B qualifier and the primary action have to be visible before any scroll,
   otherwise we pay for clicks from private customers and job seekers. */
@media(max-width:900px){
  .hero-ads .eyebrow{display:block}
  .hero-ads .hero-buttons{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-bottom:22px}
  .hero-ads .hero-buttons .btn{width:100%;white-space:normal;height:auto;min-height:52px;padding:12px 18px;line-height:1.3}
  .hero-ads .hero-role{font-size:14.5px}
}

/* Phones: the copy was eating the whole first screen and the model — the actual proof
   that we can do this work — never got a chance to be seen. Tighten every step of the
   type scale and the rhythm so headline, role boundary, both actions AND the model all
   fit above the fold. */
@media(max-width:900px){
  .hero-ads h1{font-size:31px;line-height:1.05;letter-spacing:-.035em;margin-bottom:10px}
  .hero-ads .eyebrow{font-size:10.5px;letter-spacing:.14em;margin-bottom:8px}
  .hero-ads .lead{font-size:14.5px;line-height:1.5;margin-bottom:12px;color:#5f6878}
  html.dark .hero-ads .lead{color:#aab4c6}
  .hero-ads .hero-role{font-size:13.5px;line-height:1.4;padding-left:11px;margin:0 0 14px;border-left-width:3px}
  .hero-ads .hero-buttons{margin-bottom:12px;gap:8px}
  .hero-ads .hero-buttons .btn{min-height:48px;font-size:13.5px}
  /* Price and pilot terms: still readable over the model, but as a quiet strip rather
     than a third block of body copy. */
  .hero-ads .hero-reassure{font-size:11.5px;line-height:1.45;font-weight:700;color:#4a5468;
    background:rgba(255,255,255,.9);backdrop-filter:blur(3px);
    border:1px solid rgba(20,32,55,.07);border-radius:10px;padding:8px 11px;margin:0}
  html.dark .hero-ads .hero-reassure{background:rgba(15,20,31,.9);border-color:rgba(255,255,255,.10);color:#aab4c6}
}
@media(max-width:400px){
  .hero-ads h1{font-size:27px}
  .hero-ads .lead{font-size:13.5px}
}

/* Centred flex-wrap leaves a ragged, accidental-looking stack on phones. A plain
   two-column grid reads as a deliberate list. */
@media(max-width:760px){
  .trustbar{padding-top:18px;padding-bottom:18px}
  .tb-list{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;justify-content:stretch}
  .tb-list li{font-size:12px;line-height:1.35;align-items:flex-start}
  .tb-list i{width:16px;height:16px;margin-top:1px}
  .tb-list li:last-child{grid-column:1/-1}
}
@media(max-width:400px){
  .tb-list{grid-template-columns:1fr}
  .tb-list li:last-child{grid-column:auto}
}

/* ---------- Musterplan lightbox on touch devices --------------------------
   The viewer was built around a mouse. On a phone this is the strongest proof
   we have, so the close target, the hint and the gestures all have to match
   what a touch user expects. */
.mpv-hint-touch{display:none}
/* Wording follows the actual pointer... */
@media(pointer:coarse){
  .mpv-hint-mouse{display:none}
  .mpv-hint-touch{display:block}
}
/* ...but the target sizes also apply to any narrow viewport: a 375px-wide screen is
   a phone in practice, and an oversized close button costs a desktop user nothing. */
@media(pointer:coarse),(max-width:760px){
  /* 32px is fine for a cursor, not for a thumb. */
  .mpv-x{width:44px;height:44px;border-radius:12px;background:rgba(17,24,39,.06)}
  .mpv-x svg{width:20px;height:20px}
  .mpv-bar{padding:10px 10px 10px 16px}
}
/* Follow the finger while swiping down, then animate back or away. */
.mpv-panel{transition:transform .2s ease,opacity .2s ease}
.mpv.is-swipe .mpv-panel{transition:none}
@media(prefers-reduced-motion:reduce){.mpv-panel{transition:none}}

/* ---------- Touch targets on the consent checkbox -------------------------
   13x13px is the last thing a visitor has to hit before the enquiry is sent,
   and it was the smallest target on the page. */
@media(pointer:coarse),(max-width:760px){
  .contact-card label.cf-gdpr,.kf-card label.cf-gdpr{
    position:relative;min-height:44px;align-items:center;padding:6px 0;gap:12px}
  .cf-gdpr input{width:22px;height:22px;margin-top:0;flex:none}
  /* Widen the hit area to the whole label without moving anything visually. */
  .cf-gdpr input::after{content:"";position:absolute;left:-8px;top:0;width:52px;height:100%}
}

/* Consent scrim. Visual emphasis only: pointer-events stays none so the visitor can
   still read and scroll the page while deciding — a blocking overlay would be a cookie
   wall, and consent given under that pressure is not freely given. */
.ck-scrim{position:fixed;inset:0;z-index:79;background:rgba(9,13,20,.42);
  backdrop-filter:blur(1.5px);opacity:0;transition:opacity .26s ease;pointer-events:none}
.ck-scrim.is-on{opacity:1}
.ck-scrim[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.ck-scrim{transition:none}}

/* ---------- Fixes from the pre-launch audit --------------------------------

   .cta p{color:#ffd8d4} was written for the red panel, but the white contact card
   lives inside .cta, so every paragraph in the form inherited pink-on-white:
   measured 1.31:1. The section numbers and "* Pflichtfeld" were effectively
   invisible — it read as a half-loaded page. */
.cta .contact-card p{color:#4a5468}
.cta .contact-card .cf-zone{color:#5e6877}
.cta .contact-card .cf-note{color:#6b7485}
html.dark .cta .contact-card p{color:#aab4c6}
html.dark .cta .contact-card .cf-zone{color:#aab4c6}
html.dark .cta .contact-card .cf-note{color:#9aa4b6}

/* Error text failed AA in dark mode (2.9:1) and was a touch small for a B2B audience. */
.cf-err{font-size:12.5px}
html.dark .cf-err{color:#ff6b61}
/* The Gewerke error sits inside the label line and ran into the hint text. */
.cf-lab .cf-err{display:block;margin-top:4px}

/* Muted helper text below AA on white. */
.cf-help{color:#5e6877}
.cf-hint{color:#5e6877}

/* Submit gradient topped out at ~3.9:1 with white text; the flat brand red is 4.67:1. */
.cf-submit{background:var(--red)}
.cf-submit:hover{background:var(--red-dark)}

/* Narrow phones: the CTA label is longer than 320px and dragged the whole hero
   column out of the viewport. */
.hero-copy{min-width:0}
.hero-buttons .btn{min-width:0}
/* On a 320px screen the logo (77) plus the pill (246) came to 347, so the right half
   of the hamburger sat off-screen. Tighten the spacing first — on a normal 375px phone
   everything still fits and every icon stays. */
@media(max-width:400px){
  .nav-pill{max-width:calc(100vw - 20px);gap:3px;padding:6px}
  .nav-pill .pill-icon{width:32px;height:32px}
}
/* Only on the very narrow devices is something actually dropped, and then only the mail
   icon — the address is in the footer, while dark mode and WhatsApp stay reachable. */
@media(max-width:345px){
  .nav-pill{gap:1px;padding:5px}
  .nav-pill .pill-icon:nth-of-type(2){display:none}
  .cad-logo img{height:26px}
}

/* Keyboard users had no visible focus on the main actions. */
.btn:focus-visible,.m-cta:focus-visible,.am-details summary:focus-visible{
  outline:3px solid var(--red);outline-offset:3px;border-radius:10px}

/* Home indicator on iPhone sat on top of the sticky CTA. */
.m-cta{bottom:calc(14px + env(safe-area-inset-bottom,0px))}

/* ============================================================================
   BENTIL — Team "Icon-system cards" (production)
   Self-contained, tmx- prefixed to avoid collisions with cad-lp.css.
   Reuses the site tokens: --red --ink --muted --line --soft --card --r-card
   Extra props are scoped to .tmx-grid (won't leak): --tmx-meter-off/ghost/shadow
   ========================================================================== */

/* scoped extra tokens (light) */
.tmx-grid{
  --tmx-meter-off:#e8ebf0;
  --tmx-ghost:#aab0bd;
  --tmx-shadow:0 1px 2px rgba(16,21,34,.04), 0 8px 24px rgba(16,21,34,.06);
}
/* scoped extra tokens (dark) */
html.dark .tmx-grid{
  --tmx-meter-off:#28313f;
  --tmx-ghost:#4b5568;
  --tmx-shadow:0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.35);
}

/* ---- CAROUSEL: .tmx-grid is the mask, .tmx-track scrolls infinitely (cards duplicated by JS) ---- */
.tmx-grid{ overflow:hidden; }
.tmx-track{
  display:flex; gap:18px; width:max-content; align-items:stretch;
  animation:tmx-marquee var(--tmx-dur,55s) linear infinite; will-change:transform;
}
/* runs continuously (no hover/focus pause) — a click must not stop it */
/* content is duplicated → -50% is exactly one set → seamless loop */
@keyframes tmx-marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ---- CARD: flex column; fixed-height bands = identical structure everywhere ---- */
.tmx-card{
  position:relative; height:100%; display:flex; flex-direction:column;
  flex:0 0 clamp(250px, 20vw, 290px);   /* fixed carousel card width */
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px 20px 20px; box-shadow:var(--tmx-shadow);
  transition:background .3s ease, border-color .3s ease, transform .15s ease, box-shadow .2s ease;
}
.tmx-card:hover{transform:translateY(-3px); box-shadow:0 2px 4px rgba(16,21,34,.05),0 18px 44px rgba(16,21,34,.12)}
html.dark .tmx-card:hover{box-shadow:0 2px 4px rgba(0,0,0,.4),0 20px 50px rgba(0,0,0,.5)}

/* LinkedIn glyph — fixed corner, only rendered when the person has one */
.tmx-li{
  position:absolute; top:16px; right:16px; width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center; border:1px solid var(--line); color:var(--tmx-ghost);
  background:var(--soft); transition:.2s;
}
.tmx-li.tmx-on{color:#0a66c2; border-color:rgba(10,102,194,.35); background:rgba(10,102,194,.08); text-decoration:none; cursor:pointer}
.tmx-li.tmx-on:hover{background:rgba(10,102,194,.16); border-color:rgba(10,102,194,.55)}
html.dark .tmx-li.tmx-on{color:#5aa9ef; border-color:rgba(90,169,239,.4); background:rgba(90,169,239,.12)}
.tmx-li svg{width:14px; height:14px}

/* ---- Header block (avatar + name + role): fixed min-height so ragged roles align ---- */
.tmx-top{display:flex; flex-direction:column; align-items:flex-start; min-height:164px}
.tmx-avatar{
  width:74px; height:74px; border-radius:50%; object-fit:cover; object-position:center top;
  border:1px solid var(--line); background:var(--soft); margin-bottom:14px;
}
.tmx-name{font-size:16px; font-weight:640; letter-spacing:-.01em; line-height:1.25; margin:0}
.tmx-role{
  margin:6px 0 0; font-size:12.5px; line-height:1.4; color:var(--muted);
  min-height:36px; /* reserves 2 lines so all name/role blocks bottom-align */
}

.tmx-rule{height:1px; background:var(--line); margin:4px 0 16px}
.tmx-band{
  font-size:10px; font-weight:650; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin:0 0 11px;
}

/* ---- SOFTWARE BAND: 3 identical left-aligned rows (icon left · name+level right) ---- */
.tmx-softlist{display:flex; flex-direction:column; gap:12px; margin:2px 0 2px}
.tmx-sw{display:flex; align-items:center; gap:12px; height:34px}
.tmx-swico{flex:0 0 26px; width:26px; height:26px; display:grid; place-items:center; color:var(--ink)}
.tmx-swico svg{width:24px; height:24px; display:block}
.tmx-swico .tmx-nova{width:25px; height:25px}   /* NOVA has internal padding — nudge to match optical weight */
.tmx-swtxt{display:flex; flex-direction:column; gap:3px; min-width:0}
.tmx-swname{font-size:12px; font-weight:600; line-height:1.1; color:var(--ink); letter-spacing:-.01em}
.tmx-swlvl{
  display:flex; align-items:center; gap:7px; line-height:1;
  font-size:10.5px; font-weight:500; letter-spacing:.01em; color:var(--muted);
  white-space:nowrap;
}

/* owned vs ghosted (matches NOVA-ghost treatment: grayscale + dim + muted text) */
.tmx-sw.tmx-off .tmx-swico{color:var(--tmx-ghost); opacity:.5}
.tmx-sw.tmx-off .tmx-swico svg{filter:grayscale(1)}
.tmx-sw.tmx-off .tmx-swname{color:var(--tmx-ghost)}
.tmx-sw.tmx-off .tmx-swlvl{color:var(--tmx-ghost)}

/* NOVA hero accent (Expertenniveau) — red lives only in the meter + level label */
.tmx-sw.tmx-hero .tmx-swlvl{color:var(--red); font-weight:600}

/* 3-segment level meter (NOVA) — slim pill segments */
.tmx-meter{display:flex; gap:3px}
.tmx-seg{width:13px; height:3px; border-radius:999px; background:var(--tmx-meter-off)}
.tmx-seg.tmx-on{background:var(--muted)}
.tmx-sw.tmx-hero .tmx-seg.tmx-on{background:var(--red)}

/* ---- LANGUAGE BAND: DE + EN always present ---- */
.tmx-langhead{display:flex; align-items:center; gap:7px; margin:16px 0 11px}
.tmx-langhead .tmx-gico{flex:0 0 auto; width:16px; height:16px; line-height:0; color:var(--muted)}
.tmx-langhead .tmx-gico svg{display:block; width:16px; height:16px}
.tmx-langhead .tmx-band{margin:0}
.tmx-langrow{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.tmx-lang{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--soft);
}
.tmx-lang .tmx-code{font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ink)}
.tmx-lang .tmx-lvl{display:flex; align-items:center; gap:6px}
.tmx-lang .tmx-lvl .tmx-txt{font-size:9.5px; font-weight:550; color:var(--muted); white-space:nowrap}
.tmx-dots{display:flex; gap:2px}
.tmx-dot{width:5px; height:5px; border-radius:50%; background:var(--tmx-meter-off)}
.tmx-dot.tmx-on{background:var(--muted)}
.tmx-lang.tmx-off{background:transparent}
.tmx-lang.tmx-off .tmx-code{color:var(--tmx-ghost)}
.tmx-lang.tmx-off .tmx-txt{color:var(--tmx-ghost)}

.tmx-spacer{flex:1 1 auto}
.tmx-grid{max-width:var(--container);margin:0 auto}

/* — Zusammenarbeit / 4 Kooperationsmodelle (koop-*) — */
/* ============================================================
   KOOPERATION / INTEGRATION IN IHREN WORKFLOW
   "Method" spec-sheet cards 01–04 — light design system.
   Big editorial index number carries the design; one red accent.
   All classes namespaced `koop-` to avoid cad-lp.css collisions.
   ============================================================ */
.koop{padding-top:76px;padding-bottom:84px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0,#fbfcff 100%)}

.koop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;
  max-width:var(--container);margin:0 auto}

/* ---- the method card ---- */
.koop-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  padding:26px 24px 24px;background:#fff;border:1px solid #e3e8ef;border-radius:var(--r-card);
  box-shadow:0 12px 30px rgba(20,32,55,.05);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease}
.koop-card:hover{transform:translateY(-4px);border-color:#dbe2ec;box-shadow:0 26px 52px rgba(20,32,55,.12)}

/* top accent keyline — grows on hover (spec-sheet signal) */
.koop-card::before{content:"";position:absolute;top:0;left:0;height:3px;width:40px;
  background:linear-gradient(90deg,var(--red),#ff6b62);border-radius:0 3px 3px 0;
  opacity:.28;transition:width .38s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.koop-card:hover::before{width:100%;opacity:1}

/* top row: giant ghost index left · line icon right */
.koop-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:20px}
.koop-idxwrap{display:flex;flex-direction:column}
/* micro spec-sheet caption over the index */
.koop-kicker{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#aab2c0;margin:0 0 6px 2px;transition:color .3s ease}
.koop-card:hover .koop-kicker{color:var(--red)}
.koop-idx{font-size:clamp(44px,3.6vw,58px);font-weight:800;line-height:.9;letter-spacing:-.05em;
  color:#d3dae4;font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;
  transition:color .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.koop-card:hover .koop-idx{color:var(--red);transform:translateY(-1px)}

.koop-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-top:4px;border-radius:12px;
  background:#f7f8fb;color:#5b6478;box-shadow:inset 0 0 0 1px var(--line);
  transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.koop-ic svg{width:23px;height:23px;display:block}
.koop-card:hover .koop-ic{background:#fff6f5;color:var(--red);box-shadow:inset 0 0 0 1px rgba(227,33,24,.16)}

/* hairline divider under the top row — spec-sheet ruling */
.koop-rule{height:1px;background:var(--line);margin:0 0 16px;
  transition:background .3s ease}
.koop-card:hover .koop-rule{background:#eddedc}

.koop-title{margin:0 0 9px;font-size:18px;font-weight:800;letter-spacing:-.015em;
  line-height:1.2;color:var(--ink);text-wrap:balance}
.koop-detail{margin:0;font-size:13px;line-height:1.6;color:#6a7486;
  transition:color .3s ease}
.koop-card:hover .koop-detail{color:#4c5567}

/* ============================================================
   DARK
   ============================================================ */
html.dark .koop{border-top-color:#232c3a;background:linear-gradient(180deg,#0b0f17 0,#0d121c 100%)}
html.dark .koop-card{background:#161d29;border-color:#28313f;box-shadow:0 12px 30px rgba(0,0,0,.4)}
html.dark .koop-card:hover{border-color:#35414f;box-shadow:0 26px 52px rgba(0,0,0,.55)}
html.dark .koop-card::before{background:linear-gradient(90deg,#ff8b82,#ff6b62);opacity:.32}
html.dark .koop-card::after{border-right-color:#28313f;border-bottom-color:#28313f}
html.dark .koop-card:hover::after{border-color:#5a2f2b}
html.dark .koop-kicker{color:#6b7688}
html.dark .koop-card:hover .koop-kicker{color:#ff8b82}
html.dark .koop-idx{color:#39424f}
html.dark .koop-card:hover .koop-idx{color:#ff8b82}
html.dark .koop-ic{background:#1b2230;color:#9aa4b6;box-shadow:inset 0 0 0 1px #28313f}
html.dark .koop-card:hover .koop-ic{background:rgba(232,53,42,.12);color:#ff8b82;box-shadow:inset 0 0 0 1px rgba(232,53,42,.24)}
html.dark .koop-rule{background:#28313f}
html.dark .koop-card:hover .koop-rule{background:#3a2a2a}
html.dark .koop-title{color:#eef2f8}
html.dark .koop-detail{color:#9aa4b6}
html.dark .koop-card:hover .koop-detail{color:#c2ccdb}

/* ============================================================
   RESPONSIVE — 4 → 2 → 1
   ============================================================ */
@media(max-width:960px){
  .koop{padding-top:60px;padding-bottom:64px}
  .koop-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(max-width:540px){
  .koop-grid{grid-template-columns:1fr}
  .koop-idx{font-size:46px}
}
@media(prefers-reduced-motion:reduce){
  .koop-card,.koop-card::before,.koop-idx,.koop-ic{transition:none}
  .koop-card:hover{transform:none}
}