/* self-hosted fonts (SIL Open Font License): no request to google, no consent needed */
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/barlow-300-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/barlow-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-semi-condensed-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-semi-condensed-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-semi-condensed-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-semi-condensed-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-semi-condensed-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-semi-condensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* design tokens – keep in sync with .ai/design.md */
:root{
  --blue:#0069A7; --blue-2:#3178B1; --blue-3:#5388BE; --blue-4:#7399C8;
  --ink:#1F3864; --mist:#E2E6F3;
  --bg:#F2F5FB; --surface:#FFFFFF; --surface-2:#FAFBFE;
  --text:#16263F; --muted:#5D6E8C;
  --on-dark:#FFFFFF; --on-dark-muted:rgba(255,255,255,.78);
  --line:rgba(31,56,100,.14); --line-soft:rgba(31,56,100,.08);
  --tint:rgba(0,105,167,.06); --tint-2:rgba(0,105,167,.12);
  --dummy-bg:#FFF4D6; --dummy-text:#7A5200;
  --backdrop:rgba(22,38,63,.45);
  --scrim:var(--backdrop);
  --logo-dark:#2A2622;
  --sw-sand:#C8A27A; --sw-sage:#7F9E89; --wood:#B5834E; --wood-light:#D8B88A; --metal:#8E99A8; --frame:#23272D;
  --glass-clear:rgba(115,153,200,.22); --glass-satin:rgba(226,230,243,.95); --wpc:#6F655D; --stone:#BDB6AA;
  --tile:#E4E7EC; --carpet:#B7B0C8; --heat:#E2683C; --heat-2:#C2410C; --live:#22A96B; --star:#F2B01E; --header-bg:#C6D5ED;
  --studio:#ECEDEF; --steel:#BFC3C8; --lid-dark:#3A3D42; --engrave-light:#D9DCE0; --engrave-dark:#5C6066;
  --cup-schwarz:#2B2B2D; --cup-weiss:#EDEBE6; --cup-salbei:#9CAA95; --cup-navy:#2C3A55; --cup-sand:#C9B79A; --cup-rot:#9E3B33;
  --cursor-fill:#FFFFFF; --cursor-stroke:#111111;
  --eps:#E9E8E4; --screed:#A7A6A1; --wall:#F3F2EF; --joist:#3B3631;
  --shadow:0 1px 2px rgba(20,38,70,.05),0 12px 32px -18px rgba(20,38,70,.28);
  --shadow-lg:0 2px 4px rgba(20,38,70,.06),0 30px 60px -24px rgba(20,38,70,.35);
  --radius-s:10px; --radius-m:14px; --radius-l:22px;
  --f-head:'Barlow Semi Condensed','Barlow',Arial,sans-serif;
  --f-body:'Barlow Semi Condensed','Barlow',Arial,sans-serif;
  --fs-h1:clamp(40px,4.6vw,60px); --fs-h2:clamp(26px,2.4vw,32px); --fs-h3:20px; --fs-text:16px; /* the only four font sizes on the site */
  --pad-y:88px;
  /* one grid for the whole page (v67): content column of max. --content-max, centred; desktop gutters leave room
     for the bookmark (left) and the contact rail (right); --edge-l / --edge-r are the resulting left and right edges */
  --content-max:1248px; --gutter-l:96px; --gutter-r:152px;
  --edge-l:max(var(--gutter-l), calc((100% - var(--content-max)) / 2));
  --edge-r:max(var(--gutter-r), calc((100% - var(--content-max)) / 2));
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h,130px) + 16px)}
body{background:var(--bg);color:var(--text);font:400 var(--fs-text)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--f-head);font-weight:500;letter-spacing:-.01em;text-wrap:balance;margin:0;color:var(--ink)}
h1{font-size:var(--fs-h1);line-height:1.05}
h2{font-size:var(--fs-h2);line-height:1.12}
h3{font-size:var(--fs-h3);line-height:1.25}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--blue-3);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ambient background */
.bg-art{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px)}
.blob.a{width:780px;height:640px;left:-180px;top:-220px;background:radial-gradient(closest-side,rgba(0,105,167,.30),transparent 72%)}
.blob.b{width:900px;height:700px;right:-260px;top:120px;background:radial-gradient(closest-side,rgba(115,153,200,.32),transparent 70%)}

/* layout shell */
/* backgrounds full width, content follows the page grid (--edge-l / --edge-r) */
.shell{position:relative;z-index:1}
.frame{background:var(--surface);border-bottom:1px solid var(--line-soft);overflow:clip}

/* header: full width, white, sticky together with the section bar */
.topbar{position:sticky;top:0;z-index:40;background:var(--surface)}
/* header content on the page grid: logo at the left edge, navigation ends at the right edge */

.header{display:flex;align-items:center;gap:16px;padding:10px var(--edge-r) 10px var(--edge-l);background:var(--surface)}
.header-row{background:var(--surface)}
/* mobile (below 860px): one 20px side gutter for everything */
@media (max-width:860px){ :root{--gutter-l:20px;--gutter-r:20px} }
/* from 1100px the section wheel sits in the left gutter, so it is wider there (v69) */
@media (min-width:1100px){ :root{--gutter-l:264px} }
/* no line under the header; a soft shadow only once the page is scrolled */
.topbar{transition:box-shadow .2s}
.topbar.is-scrolled{box-shadow:0 6px 18px -14px rgba(20,38,70,.35)}
.header .brand-logo{height:56px}
.header .nav{margin-left:auto}
.header .nav a{font-size:var(--fs-text)}
.btn-contact{padding:10px 20px}
.brand{font-family:var(--f-head);font-size:var(--fs-text);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.brand-name span{color:var(--blue)}
.brand-logo{height:68px;width:auto;display:block}
.brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--blue-4));display:grid;place-items:center;color:var(--on-dark)}
.brand-mark .ic{width:17px;height:17px}
.nav{display:flex;gap:6px}
.nav a{padding:8px 14px;border-radius:var(--radius-s);font-size:var(--fs-text);color:var(--muted);transition:background .2s,color .2s}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a[aria-current="page"]{background:var(--mist);color:var(--blue);font-weight:500}
.header .nav a{color:var(--ink)}
.header .nav a:hover{background:var(--tint)}
.header .nav a[aria-current="page"]{background:var(--mist);color:var(--blue)}
.header-cta{display:flex;align-items:center;gap:10px}

/* section bar with scrollspy and progress */

/* floating quick actions (style from reference clickdummy) */
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:35;display:flex;flex-direction:column;width:124px;border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg)}
.rail-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:88px;padding:10px 6px;border-bottom:1px solid var(--line-soft);text-align:center;font-family:var(--f-head);font-size:var(--fs-text);line-height:1.2;color:var(--text);transition:background .18s,color .18s}
.rail-btn:last-child{border-bottom:0}
.rail-btn .ic{width:26px;height:26px;stroke-width:1.5;color:var(--blue)}
.rail-btn:hover{background:var(--mist)}
.rail-btn.primary{background:var(--blue);color:var(--on-dark)}
.rail-btn.primary .ic{color:var(--on-dark)}
.rail-btn.primary:hover{background:var(--blue-2)}
.rail-btn:focus-visible{outline-offset:-4px}
/* rail appears once the hero has left the viewport, slides in from the right (250ms) */
.rail{opacity:0;visibility:hidden;pointer-events:none;transform:translate(24px,-50%);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.rail.is-shown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%);transition:opacity .25s ease,transform .25s ease,visibility 0s}
@media (min-width:761px){
  /* keep content clear of the fixed quick-action rail on the right */
  
  
}
@media (max-width:860px){
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .rail{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;flex-direction:row;border:0;border-top:1px solid var(--line);border-radius:0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -10px 30px -20px rgba(20,38,70,.5)}
  .rail-btn{flex:1;flex-direction:row;height:60px;gap:8px;border-bottom:0;border-right:1px solid var(--line-soft);font-size:var(--fs-text)}
  .rail-btn:last-child{border-right:0}
  .rail{transform:translateY(100%)}
  .rail.is-shown{transform:none}
  .rail-btn .ic{width:22px;height:22px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--radius-s);font-weight:500;font-size:var(--fs-text);transition:transform .2s,box-shadow .2s,background .2s}
.btn .ic{width:18px;height:18px;transition:transform .2s}
.btn:hover .ic-arrow{transform:translateX(3px)}
.btn-primary{background:var(--blue);color:var(--on-dark);box-shadow:0 8px 20px -10px rgba(0,105,167,.7)}
.btn-primary:hover{background:var(--blue-2)}
.btn-secondary{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.btn-secondary:hover{border-color:var(--blue-4)}
.btn-outline{border:1.5px solid var(--blue);background:var(--surface);color:var(--blue)}
.btn-outline:hover{background:var(--tint)}
.btn-light{background:var(--surface);color:var(--blue)}
.btn-ghost-light{border:1px solid rgba(255,255,255,.4);color:var(--on-dark)}
.btn-sm{padding:9px 14px;font-size:var(--fs-text)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:500;font-size:var(--fs-text)}
.link-arrow .ic{width:16px;height:16px}

/* sections */
.page{display:block}
.section{padding:var(--pad-y) var(--edge-r) var(--pad-y) var(--edge-l)}
.section + .section{border-top:1px solid var(--line-soft)}
.section.alt{background:var(--surface-2)}
.eyebrow{font-size:var(--fs-text);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head.center{margin-inline:0;text-align:left}
.sec-head.center .eyebrow{justify-content:flex-start}
.sec-head p{color:var(--muted);margin-top:12px;font-size:var(--fs-text)}
.lead{color:var(--muted);font-size:var(--fs-text);max-width:520px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:24px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--mist);color:var(--blue);font-size:var(--fs-text);font-weight:600;letter-spacing:.02em}
.dummy{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--dummy-bg);color:var(--dummy-text);font:600 var(--fs-text)/1.4 var(--f-body);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:80px}
.hero h1{margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .lead{margin-bottom:32px}
.hero-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px;font-size:var(--fs-text);color:var(--muted)}
.hero-meta span{display:inline-flex;align-items:center;gap:6px}
.hero-meta .ic{width:16px;height:16px;color:var(--blue)}
.visual{position:relative;aspect-ratio:5/4;border-radius:var(--radius-l);background:radial-gradient(120% 90% at 20% 10%,var(--surface) 0,var(--mist) 55%,var(--blue-4) 140%);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-lg)}
.visual > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,38,63,0) 55%,rgba(22,38,63,.35));pointer-events:none}
.visual > *:not(img){z-index:1}
.visual .vtag{position:absolute;left:18px;top:18px;display:flex;gap:8px;align-items:center}
.play{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);font-size:var(--fs-text);font-weight:500;color:var(--ink)}
.play i{width:32px;height:32px;border-radius:50%;background:var(--blue);color:var(--on-dark);display:grid;place-items:center}
.play i .ic{width:14px;height:14px;fill:currentColor;stroke:none}
.chip-float{position:absolute;left:18px;bottom:18px;background:var(--surface);border-radius:var(--radius-s);padding:10px 14px;box-shadow:var(--shadow);font-size:var(--fs-text)}
.chip-float b{display:block;font-family:var(--f-head);font-size:var(--fs-text);font-weight:600;color:var(--ink);line-height:1.1}
.chip-float span{color:var(--muted)}

/* hero v43: text (45 %) | product video (55 %), centred vertically, white background */
.hero8{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);column-gap:40px;align-items:center;min-height:0;padding-top:24px;padding-bottom:32px;background:var(--surface)}
.eyebrow-line::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor}
.hero8 h1{font-size:var(--fs-h1);margin-bottom:16px}
.hero8 h1 .hl{color:var(--blue)}
.h8-sub{font-family:var(--f-head);font-size:var(--fs-text);line-height:1.3;color:var(--blue);max-width:460px}
.h8-text .cta-row{margin-top:30px}
/* hero buttons always side by side: natural width while there is room, on a narrow row they shrink, text and
   padding scale with the row (cqi = row width), the icon goes below 340px, a long translation may take two lines */
.h8-text .cta-row{container-type:inline-size;flex-wrap:nowrap}
.h8-text .cta-row .btn{flex:0 1 auto;min-width:0;white-space:normal;text-align:center;line-height:1.2;
  font-size:clamp(13px,5.2cqi,var(--fs-text));padding-inline:clamp(10px,3.5cqi,20px)}
@container (max-width:340px){ .h8-text .cta-row .btn .ic{display:none} }
@media (max-width:860px){ .h8-text .cta-row .btn{flex:1 1 0} }
/* hero v47 spacing (desktop only): text block up to 48px further left (min. 24px to the edge),
   min. 88px air to the configurator (48px margin + 40px column gap); right column stays as it is */
@media (min-width:861px){
  .h8-text{margin-right:48px;min-width:0;container-type:inline-size}
  /* shrinks with the text column so the longest word (~6.1em, e.g. "Configuradores") fits; no hyphens:auto: firefox
     hyphenates greedily ("Online-Kon-/figuratoren") even when the word fits, overflow-wrap only breaks if it does not */
  .hero8 h1{font-size:min(var(--fs-h1),16cqi);overflow-wrap:break-word}
}

/* product video: no frame, white like the hero background */
.h8-preview{position:relative;min-width:0}
.hd{position:relative;width:100%;max-width:640px;aspect-ratio:1232/1026;margin-left:auto;background:var(--surface)}
.hd-video{display:block;width:100%;height:100%;object-fit:contain;background:var(--surface);border:0;pointer-events:none}
/* pause control only shows up for keyboard users */
.hd-pause{position:absolute;right:8px;top:8px;z-index:2;padding:8px 14px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:var(--fs-text);font-weight:500;box-shadow:var(--shadow);opacity:0;pointer-events:none}
.hd-pause:focus-visible{opacity:1;pointer-events:auto}
@media (max-width:860px){
  .hero8{grid-template-columns:1fr;row-gap:8px;min-height:0;padding-top:40px;padding-bottom:16px;background:var(--surface)}
  .hd{max-width:520px;margin:0 auto}
}
/* about: key figures with count-up */
.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 24px}
.fact{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.fact-ic{width:40px;height:40px;margin-bottom:14px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fact-line{align-self:stretch;height:1px;margin-bottom:12px;background:var(--ink);opacity:.25}
.fact-num{font-family:var(--f-head);font-weight:500;font-size:var(--fs-h2);line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fact-label{margin-top:4px;font-size:var(--fs-text);color:var(--muted)}
.values-box{margin-top:60px;padding-top:32px;border-top:1px solid var(--line)}
.values-box h3{margin-bottom:16px}
.checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.checks li{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);font-size:var(--fs-text);color:var(--ink)}
.checks .ic{width:18px;height:18px;margin-top:1px;color:var(--blue)}
@media (max-width:1000px){
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .checks{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .fact-ic{width:36px;height:36px;margin-bottom:12px}
  .fact-num{font-size:var(--fs-h2)}
  .checks{grid-template-columns:1fr}
}

/* about: hero without side column */
.about-hero.solo{display:block}
.about-hero.solo .mission{max-width:640px}

/* about hero with group photo in the background, text stays readable on a dark gradient */
.about-hero.has-photo{position:relative;display:flex;align-items:center;min-height:540px;overflow:hidden;background:var(--ink)}
/* team photo: the wide hero shows the band with every face (27 % from the top) */
.about-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 27%}
.about-hero.has-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(22,38,63,.86) 0%,rgba(22,38,63,.62) 38%,rgba(22,38,63,.12) 72%,rgba(22,38,63,0) 100%)}
.about-hero.has-photo > .reveal{position:relative;z-index:2;max-width:560px}
.about-hero.has-photo .eyebrow{color:var(--on-dark)}
.about-hero.has-photo h1{color:var(--on-dark)}
.about-hero.has-photo .mission{color:var(--on-dark);border-left-color:var(--on-dark)}
.about-hero.has-photo .btn-secondary{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.55)}
.about-hero.has-photo .btn-secondary:hover{border-color:var(--on-dark)}
@media (max-width:860px){
  .about-hero.has-photo{min-height:460px;align-items:flex-end}
  .about-photo{object-position:50% 27%}
  .about-hero.has-photo::before{background:linear-gradient(180deg,rgba(22,38,63,.2) 0%,rgba(22,38,63,.55) 45%,rgba(22,38,63,.9) 100%)}
}

/* milestones: scroll timeline with sticky year */
.milestones{padding-top:64px;padding-bottom:64px}
.milestones .sec-head{margin-bottom:28px}
.ms{display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px}
.ms-sticky{position:sticky;top:calc(var(--topbar-h,130px) + 20px);display:flex;flex-direction:column}
.ms-cap{font-size:var(--fs-text);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ms-year{font-family:var(--f-head);font-weight:600;font-size:var(--fs-h2);line-height:1;color:var(--blue);font-variant-numeric:tabular-nums;transition:opacity .25s,transform .25s}
.ms-year.is-out{opacity:0;transform:translateY(-14px)}
.ms-list{position:relative;margin:0;padding:0 0 0 40px;list-style:none}
.ms-list::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--mist)}
.ms-progress{position:absolute;left:9px;top:8px;width:2px;height:0;border-radius:2px;background:var(--blue)}
.ms-item{position:relative;padding-bottom:12px}
.ms-item:last-child{padding-bottom:0}
.ms-dot{position:absolute;left:-39px;top:17px;width:18px;height:18px;border-radius:50%;background:var(--surface);border:2px solid var(--blue-4);transition:border-color .3s,background .3s,box-shadow .3s}
.ms-item.is-active .ms-dot{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 5px var(--tint-2)}
.ms-card{display:flex;gap:14px;align-items:center;padding:12px 18px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);transition:border-color .3s,box-shadow .3s}
.ms-item.is-active .ms-card{border-color:var(--blue-4);box-shadow:var(--shadow)}
.ms-ic{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--mist);color:var(--blue)}
.ms-y{font-family:var(--f-head);font-weight:600;font-size:var(--fs-text);color:var(--blue);line-height:1.2}
.ms-card h3{margin:1px 0 2px;font-size:var(--fs-h3)}
.ms-card p:last-child{color:var(--muted);font-size:var(--fs-text);line-height:1.45}

/* team collage */
.crew{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.mate{margin:0}
.mate-photo{position:relative;aspect-ratio:1/1;border-radius:var(--radius-m);overflow:hidden;background:var(--header-bg);border:1px solid var(--line-soft);transition:border-color .25s,box-shadow .25s}
.mate-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .4s ease}
.mate:hover .mate-photo{border-color:var(--blue-4);box-shadow:var(--shadow)}
.mate:hover .mate-photo img{transform:scale(1.04)}
.mate figcaption{padding:12px 2px 0}
.mate figcaption b{display:block;font-family:var(--f-head);font-size:var(--fs-h3);font-weight:500;color:var(--ink)}
.mate figcaption span{display:block;font-size:var(--fs-text);color:var(--blue)}
.mate figcaption .link-arrow{margin-top:6px}

@media (prefers-reduced-motion:reduce){
  .ms-year{transition:none}
}
@media (max-width:1000px){
  .crew{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .ms{grid-template-columns:1fr}
  .ms-side{display:none}
}
@media (max-width:640px){
  .crew{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .ms-list{padding-left:32px}
  .ms-dot{left:-32px;width:16px;height:16px}
  .ms-list::before,.ms-progress{left:8px}
  .ms-card{padding:12px 14px;gap:12px;align-items:flex-start}
  .ms-ic{width:32px;height:32px}
}

/* logo band */
.logos{padding:34px var(--edge-r) 34px var(--edge-l);background:var(--surface-2)}
.logos p{text-align:center;font-size:var(--fs-text);color:var(--muted);margin-bottom:6px}
/* the logo band heading is a regular section h2 (v59) */
.logos{padding-top:56px}
.logos-title{margin-bottom:10px}
.logos .logos-hint{display:flex;align-items:center;justify-content:flex-start;gap:6px;margin-bottom:16px;font-size:var(--fs-text);color:var(--muted)}
.logos-hint .ic{width:14px;height:14px;color:var(--blue)}
/* moved by main.js (autoBand): runs by itself, drag with the mouse, swipe / trackpad / shift+wheel */
.marquee{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee::-webkit-scrollbar{display:none}
.marquee.is-dragging{cursor:grabbing;user-select:none}
.marquee.is-dragging *{pointer-events:none}
.marquee-track{display:flex;align-items:center;gap:20px;width:max-content;padding:4px 0}
.logo-chip{flex:none;display:grid;place-items:center;width:176px;height:76px;padding:14px 22px;border-radius:var(--radius-m);background:var(--surface);border:1px solid var(--line-soft);cursor:default;transition:border-color .2s,box-shadow .2s}
/* hover/focus highlight removed while cards are not clickable (see pd-reference.html); was cursor:pointer, .logo-chip:hover,.logo-chip:focus-visible{border-color:var(--blue-4);box-shadow:var(--shadow)} */
.logo-chip:focus-visible{outline-offset:-3px}
.logo-chip.dark{background:var(--logo-dark);border-color:var(--logo-dark)}
/* uniform logos: same height, limited width, always in original colors */
.logo-chip img{display:block;max-width:min(128px,100%);height:36px;width:auto;object-fit:contain}
.logo-text{font-family:var(--f-head);font-size:var(--fs-text);font-weight:500;color:var(--muted)}

/* challenges */
.pairs{display:grid;gap:16px}
.pair{display:grid;grid-template-columns:1fr 48px 1fr;align-items:stretch}
.pair .ch,.pair .so{border-radius:var(--radius-m);padding:22px 24px;display:flex;gap:14px;align-items:flex-start}
.pair .ch{background:var(--surface);border:1px solid var(--line)}
.pair .so{background:var(--tint);border:1px solid var(--tint-2)}
.pair small{display:block;font-size:var(--fs-text);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pair .so small{color:var(--blue)}
.pair b{font-weight:500;color:var(--ink);font-size:var(--fs-text)}
.pair .ic-box{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--bg);color:var(--muted)}
.pair .so .ic-box{background:var(--blue);color:var(--on-dark)}
.pair .arrow{display:grid;place-items:center;color:var(--blue-3)}

/* results: compact band with three key figures */
.results{padding-top:44px;padding-bottom:44px}
.results-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:center;gap:40px}
.results-head .eyebrow{margin-bottom:6px}
.results-head h2{font-size:var(--fs-h2)}
.results-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.results-list li{padding:4px 24px;border-left:1px solid var(--line)}
.results-list b{display:block;font-family:var(--f-head);font-weight:500;font-size:var(--fs-h2);line-height:1.1;color:var(--blue);white-space:nowrap}
.results-list span{display:block;margin-top:2px;font-size:var(--fs-text);color:var(--muted)}
@media (max-width:860px){
  .results-in{grid-template-columns:1fr;gap:18px}
  .results-list li:first-child{padding-left:0;border-left:0}
}
@media (max-width:640px){
  .results{padding-top:36px;padding-bottom:36px}
  .results-list li{padding:2px 12px}
  .results-list b{font-size:var(--fs-h2)}
}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{padding:28px 24px;border-radius:var(--radius-m);background:var(--surface);border:1px solid var(--line)}
.stat b{display:block;font-family:var(--f-head);font-weight:500;font-size:var(--fs-h2);line-height:1;color:var(--blue);letter-spacing:-.02em}
.stat b.long{font-size:var(--fs-h2)}
.stat span{display:block;margin-top:10px;color:var(--muted)}

/* configurator tiles */
/* filter in the style of the hero tabs (v64): text only, equal columns, thin base line, active = blue + 2px underline */
.filter{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,560px);margin-bottom:28px}
.filter::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.filter button{position:relative;height:48px;padding:0 8px;border-radius:0;background:transparent;font-size:var(--fs-text);font-weight:500;color:var(--muted);white-space:nowrap;transition:color .2s}
.filter button:hover{color:var(--ink)}
.filter button:focus-visible{outline-offset:-2px}
@media (max-width:640px){ .filter button{padding:0 2px} }
.filter button[aria-pressed="true"]{color:var(--blue);font-weight:600}
.filter button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:2px;border-radius:2px;background:var(--blue)}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tile{display:flex;flex-direction:column;padding:0;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--blue-4)}
.tile-img{aspect-ratio:16/10;display:grid;place-items:center;color:var(--blue);background:linear-gradient(135deg,var(--mist),var(--surface-2))}
.tile[data-cat="indoor"] .tile-img{background:linear-gradient(135deg,var(--surface-2),var(--mist))}
.tile[data-cat="speziell"] .tile-img{background:linear-gradient(135deg,var(--tint-2),var(--surface-2))}
.tile-img .ic{width:46px;height:46px;stroke-width:1.4}
.tile-img{position:relative;overflow:hidden;aspect-ratio:4/3}
.tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover .tile-img img{transform:scale(1.05)}
.tile-img .dummy{position:absolute;right:8px;top:8px}
.tile-body{padding:16px 18px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1}
.tile-body h3{font-size:var(--fs-h3)}
.tile-body p{font-size:var(--fs-text);color:var(--muted)}
/* keyword text: always three lines high so all tiles line up, cut with "…" after the third line, full text as tooltip */
.tile-body p{max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;min-height:3lh}
.tile-body .link-arrow{margin-top:auto;padding-top:12px;align-self:flex-end}
.inline-cta{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 26px;border-radius:var(--radius-m);border:1px dashed var(--blue-4);background:var(--tint)}
.inline-cta b{font-family:var(--f-head);font-size:var(--fs-text);font-weight:500;color:var(--ink)}
.inline-cta p{color:var(--muted);font-size:var(--fs-text)}

/* steps: compact strip, number + title + one line, joined by a thin arrow line */
.section.steps-sec{padding-top:44px;padding-bottom:44px}
.steps-sec .sec-head{margin-bottom:26px}
.steps-sec h2{font-size:var(--fs-h2)}
.steps{display:flex;align-items:center;gap:0}
.step{display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0}
.step:last-child{flex:0 1 auto}
.step .num{order:0;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:var(--on-dark);font-family:var(--f-head);font-size:var(--fs-text);font-weight:600}
.step-txt{order:1;flex:0 1 auto;min-width:0}
.step h3{font-size:var(--fs-h3);line-height:1.2}
.step p{font-size:var(--fs-text);color:var(--muted);line-height:1.4}
.step:not(:last-child)::after{content:"";order:2;flex:1 1 24px;min-width:24px;height:1px;margin-left:8px;background:var(--blue-4)}
.step:not(:last-child)::before{content:"";order:3;flex:none;width:7px;height:7px;margin:0 18px 0 -7px;border-top:1.5px solid var(--blue-4);border-right:1.5px solid var(--blue-4);transform:rotate(45deg)}

/* testimonials: slow endless band like the logo band, swipeable, pauses on hover and focus */
.qband{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);border-radius:var(--radius-m)}
.qband::-webkit-scrollbar{display:none}
.qband:focus-visible{outline-offset:2px}
.qtrack{display:flex;gap:16px;width:max-content;padding:4px 0}
.quote{flex:0 0 272px;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--radius-m);background:var(--surface);border:1px solid var(--line)}
.quote .ic-q{width:22px;height:22px;color:var(--blue-4);fill:currentColor;stroke:none}
.quote blockquote{margin:0;font-size:var(--fs-text);line-height:1.5;color:var(--ink)}
.quote footer{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:var(--fs-text)}
.quote .avatar{width:34px;height:34px;font-size:var(--fs-text)}
.avatar{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--mist);color:var(--blue);font-family:var(--f-head);font-weight:600}
.quote footer b{display:block;color:var(--ink);font-weight:500}
.quote footer span{color:var(--muted)}
/* google reviews badge – replace live with the official badge from the google business profile marketing kit */
.reviews{display:flex;justify-content:center;margin-top:32px}
.review-badge{display:inline-flex;align-items:center;gap:16px;padding:14px 20px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);transition:transform .2s,border-color .2s,box-shadow .2s}
.review-badge:hover,.review-badge:focus-visible{transform:translateY(-2px);border-color:var(--blue);box-shadow:var(--shadow-lg)}
.review-score{display:flex;align-items:center;gap:8px;padding-right:16px;border-right:1px solid var(--line-soft)}
.review-stars{display:inline-flex;gap:2px}
.review-stars svg{width:18px;height:18px;fill:var(--star)}
.review-score b{font-family:var(--f-head);font-size:var(--fs-text);font-weight:600;line-height:1}
.review-text{display:flex;flex-direction:column;line-height:1.3}
.review-text small{font-size:var(--fs-text);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.review-text span{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.review-text .ic{width:16px;height:16px;color:var(--blue);transition:transform .2s}
.review-badge:hover .review-text .ic{transform:translateX(3px)}
@media (max-width:640px){
  .review-badge{flex-direction:column;align-items:flex-start;gap:10px;width:100%}
  .review-score{padding:0 0 10px;border-right:0;border-bottom:1px solid var(--line-soft);width:100%}
}

/* closing cta */
.cta-block{margin:0 var(--edge-r) var(--pad-y) var(--edge-l);padding:56px;border-radius:var(--radius-l);background:linear-gradient(130deg,var(--ink),var(--blue) 120%);color:var(--on-dark);display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;position:relative;overflow:hidden}
.cta-block::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
.cta-block h2{color:var(--on-dark)}
.cta-block p{color:var(--on-dark-muted);margin-top:12px;max-width:460px}
.cta-block .cta-row{justify-content:flex-end;position:relative;z-index:1}
.section + .cta-wrap{border-top:1px solid var(--line-soft);padding-top:var(--pad-y)}

/* about */
.about-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.mission{margin:28px 0 32px;padding-left:18px;border-left:3px solid var(--blue);font-family:var(--f-head);font-size:var(--fs-text);line-height:1.35;color:var(--ink);max-width:520px}
.timeline{padding:28px;border-radius:var(--radius-l);background:var(--surface-2);border:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:14px 0;position:relative}
.timeline li + li{border-top:1px solid var(--line-soft)}
.timeline b{font-family:var(--f-head);font-size:var(--fs-h2);font-weight:600;color:var(--blue)}
.timeline span{color:var(--muted);align-self:center}
.timeline span strong{color:var(--ink);font-weight:500}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* value cards: heading right of the icon, wraps (hyphenated) when too long instead of being cut off; text below over the full width */
.value{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center}
.value .ic-box{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--mist);color:var(--blue)}
.value h3{margin:0;min-width:0;overflow-wrap:break-word;hyphens:auto}
.value p{grid-column:1/-1;margin-top:14px;color:var(--muted);font-size:var(--fs-text)}
.team{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px}
.member{display:flex;flex-direction:column;border-radius:var(--radius-m);border:1px solid var(--line);background:var(--surface);overflow:hidden}
.member .photo{aspect-ratio:4/3;background:linear-gradient(160deg,var(--mist),var(--surface-2));display:grid;place-items:center;position:relative}
.member .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.member .photo .avatar{width:72px;height:72px;font-size:var(--fs-text);background:var(--surface)}
.member .photo .dummy{position:absolute;right:10px;top:10px}
.member .info{padding:16px 18px}
.member .info b{display:block;font-family:var(--f-head);font-size:var(--fs-h3);font-weight:500;color:var(--ink)}
.member .info span{font-size:var(--fs-text);color:var(--muted)}
.member.lead-card{grid-row:span 2}
.member.lead-card .photo{aspect-ratio:auto;flex:1;min-height:240px}
.member.lead-card .photo .avatar{width:110px;height:110px;font-size:var(--fs-text)}
.member.lead-card .info{padding:22px 24px}
.member.lead-card q{display:block;margin:12px 0 16px;color:var(--ink);font-size:var(--fs-text)}
.member.more{justify-content:center;align-items:center;text-align:center;padding:24px;background:var(--surface-2);border-style:dashed}
.member.more b{font-family:var(--f-head);font-size:var(--fs-h2);font-weight:500;color:var(--blue);line-height:1}
.member.more span{color:var(--muted);font-size:var(--fs-text);margin-top:6px}
.career{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.perks{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 28px}
.perks li{padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:var(--fs-text);color:var(--muted)}
.jobs li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface)}
.jobs li + li{margin-top:10px}
.jobs b{display:block;font-weight:500;color:var(--ink)}
.jobs span{font-size:var(--fs-text);color:var(--muted)}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.contact-list li{display:flex;gap:14px;align-items:center;padding:14px 0}
.contact-list li + li{border-top:1px solid var(--line-soft)}
.contact-list .ic-box{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--mist);color:var(--blue);flex:none}
.contact-list small{display:block;font-size:var(--fs-text);color:var(--muted)}
.contact-list a,.contact-list address{font-style:normal;color:var(--ink);font-weight:500}
.contact-list a:hover{color:var(--blue)}

/* footer */
.footer{position:relative;z-index:1;padding:36px var(--edge-r) 44px var(--edge-l);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;font-size:var(--fs-text);color:var(--muted)}
.footer h4{margin:0 0 10px;font:600 var(--fs-text)/1.4 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.footer li + li{margin-top:6px}
.footer a:hover{color:var(--blue)}
.footer .brand{margin-bottom:14px}
.footer .brand-logo{height:84px}
.footer .copy{grid-column:1/-1;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* modal */
.modal{border:0;padding:0;border-radius:var(--radius-l);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
/* wide enough that the longest configurator title ("Fußbodenheizungskonfigurator") fits next to the close button */
.modal.wide{width:min(880px,calc(100vw - 32px))}
.modal::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
.modal[open]{animation:pop .25s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}

/* reference modal */
html.is-locked{overflow:hidden}
.ref-modal{width:min(600px,calc(100vw - 32px))}
.ref-modal::backdrop{background:var(--scrim);backdrop-filter:none}
.ref-modal[open]{animation:refIn .2s ease-out}
.ref-modal[open]::backdrop{animation:scrimIn .2s ease-out}
@keyframes refIn{from{opacity:0;transform:translateY(8px)}}
@keyframes scrimIn{from{opacity:0}}
.ref-modal h3{font-size:var(--fs-h2)}
.ref-modal .modal-head p{font-size:var(--fs-text);margin-top:4px}
.ref-modal .modal-body{padding-top:14px}
.ref-logo{display:inline-flex;align-items:center;min-height:56px;padding:8px 0;margin-bottom:12px}
.ref-logo img{display:block;height:44px;width:auto;max-width:240px;object-fit:contain}
.ref-logo.dark{padding:10px 16px;border-radius:var(--radius-s);background:var(--logo-dark)}
.ref-facts{border-collapse:collapse;margin-bottom:16px;font-size:var(--fs-text)}
.ref-facts th{padding:4px 18px 4px 0;text-align:left;font-weight:400;color:var(--muted);white-space:nowrap;vertical-align:top}
.ref-facts td{padding:4px 0;color:var(--ink);font-weight:500}
.ref-text{color:var(--muted);margin-bottom:20px}
.ref-modal .eyebrow{margin:0 0 10px}
.ref-list{margin-bottom:20px}
.ref-list li{position:relative;padding:4px 0 4px 16px;font-size:var(--fs-text);color:var(--ink)}
.ref-list li::before{content:"";position:absolute;left:2px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.ref-projects{display:flex;flex-direction:column;gap:8px}
.ref-proj{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:46px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);font-weight:500;transition:border-color .2s,box-shadow .2s}
.ref-proj:hover,.ref-proj:focus-visible{border-color:var(--blue-4);box-shadow:var(--shadow)}
.ref-cta{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:var(--fs-text);font-weight:600;color:var(--blue)}
.ref-cta .ic{width:16px;height:16px;transition:transform .2s}
.ref-proj:hover .ref-cta .ic{transform:translateX(3px)}
.ref-proj.is-soon .ref-cta{color:var(--muted)}
.ref-all{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:var(--fs-text);color:var(--muted)}
.ref-all .ic{width:15px;height:15px}
.ref-all:hover{color:var(--blue)}
.ref-cfgs{display:flex;flex-wrap:wrap;gap:10px}
.ref-cfgs .btn{border:1px solid var(--line)}
/* case study modal: bigger, head + foot fixed, body scrolls */
.ref-modal.ref-case{width:min(680px,calc(100vw - 32px));max-height:75vh;overflow:hidden}
.ref-case[open]{display:flex;flex-direction:column}
.rc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id close";align-items:center;gap:12px;padding:18px 20px 16px 24px;border-bottom:1px solid var(--line-soft)}
.rc-id{grid-area:id;display:flex;align-items:center;gap:16px;min-width:0}
.rc-id .ref-logo{flex:none;min-height:0;margin:0;padding:0}
.rc-id .ref-logo img{height:40px;max-width:150px}
.rc-id .ref-logo.dark{padding:8px 12px}
.rc-id .ref-logo.is-text .logo-text{font-size:var(--fs-text)}
.rc-id h3{font-size:var(--fs-h2);line-height:1.15}
.rc-id p{margin-top:2px;font-size:var(--fs-text);color:var(--muted)}
/* note above the live buttons (one per project), both right aligned */
.rc-foot{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding:14px 24px;border-top:1px solid var(--line-soft)}
.rc-foot-note{margin:0;font-weight:600;color:var(--ink)}
.rc-live-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.rc-live .ic{width:16px;height:16px}
.rc-close{grid-area:close}
.rc-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 24px}
.rc-body:focus-visible{outline-offset:-3px}
.rc-desc,.rc-ueber{max-width:680px;margin-bottom:20px;color:var(--text);font-size:var(--fs-text)}
.rc-desc p+p,.rc-ueber p+p{margin-top:10px}
.rc-proj{padding-top:20px;border-top:1px solid var(--line-soft)}
.rc-proj:first-child{padding-top:0;border-top:0}
.rc-desc:not([hidden])+div .rc-proj:first-child{padding-top:20px;border-top:1px solid var(--line-soft)}
.rc-proj-title{margin-bottom:10px;font-size:var(--fs-h3);font-weight:600;color:var(--ink)}
.rc-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rc-cols.single{grid-template-columns:1fr}
.rc-cols .ref-list{margin-bottom:16px}
/* project images: wider dialog, images left (large one, others below; more than 3 below = carousel) */
.ref-modal.ref-case.has-gallery{width:min(1120px,calc(100vw - 32px));max-height:85vh}
.has-gallery .rc-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
.rc-gallery{position:sticky;top:0;display:grid;gap:10px;min-width:0}
.rc-gal-main{margin:0;aspect-ratio:4/3;border-radius:var(--radius-s);overflow:hidden;background:var(--surface-2)}
.rc-gal-main img{display:block;width:100%;height:100%;object-fit:contain}
.rc-gal-strip{display:flex;align-items:center;gap:6px;min-width:0}
.rc-gal-track{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 16px) / 3);gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rc-gal-track::-webkit-scrollbar{display:none}
.rc-gal-thumb{scroll-snap-align:start;aspect-ratio:4/3;padding:0;border:1px solid var(--line-soft);border-radius:var(--radius-s);overflow:hidden;background:var(--surface-2);cursor:pointer}
.rc-gal-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.rc-gal-thumb:hover img{transform:scale(1.04)}
.rc-gal-thumb.is-active{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:-2px}
.rc-gal-thumb:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rc-gal-nav{display:none;flex:none;width:32px;height:32px;place-items:center;border:1px solid var(--line-soft);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer}
.rc-gal-strip.is-carousel .rc-gal-nav{display:grid}
.rc-gal-nav .ic{width:16px;height:16px}
.rc-gal-nav[data-gal-step="-1"] .ic{transform:rotate(180deg)}
.rc-gal-nav:disabled{opacity:.35;cursor:default}
@media (prefers-reduced-motion:reduce){.rc-gal-thumb img{transition:none}}
@media (max-width:860px){
  .has-gallery .rc-body{grid-template-columns:1fr;gap:20px}
  .rc-gallery{position:static}
}
@media (max-width:640px){
  .ref-modal.ref-case,.ref-modal.ref-case.has-gallery{width:100vw;max-width:100vw;max-height:85dvh;overflow:hidden}
  .rc-head{padding:16px}
  .rc-foot{padding:12px 16px}
  .rc-live-row{width:100%}
  .rc-live{width:100%;justify-content:center;min-height:44px}
  .rc-foot-note{width:100%;text-align:center}
  .rc-id{gap:12px}
  .rc-id .ref-logo img{height:32px;max-width:110px}
  .rc-id h3{font-size:var(--fs-h2)}
  .rc-body{padding:16px}
  .rc-cols{grid-template-columns:1fr;gap:4px}
}

/* tile highlight after jumping from a reference */
.tile.is-flash{border-color:var(--blue);box-shadow:0 0 0 3px var(--tint-2),var(--shadow-lg)}
@media (prefers-reduced-motion:reduce){
  .ref-modal[open],.ref-modal[open]::backdrop{animation:none}
}
/* mobile: bottom sheet, content scrolls */
@media (max-width:640px){
  .ref-modal{width:100vw;max-width:100vw;max-height:88dvh;margin:auto 0 0;border-radius:var(--radius-l) var(--radius-l) 0 0;overflow-y:auto;overscroll-behavior:contain}
  .ref-modal[open]{animation-name:sheetIn}
  @keyframes sheetIn{from{transform:translateY(24px);opacity:0}}
  .ref-cfgs .btn{flex:1 1 100%;justify-content:space-between;min-height:44px}
  .ref-modal .modal-close{width:44px;height:44px}
}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 26px 0}
.modal-head p{color:var(--muted);margin-top:6px;font-size:var(--fs-text)}
.modal-close{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--muted);flex:none}
.modal-close:hover{background:var(--bg);color:var(--ink)}
.modal-body{padding:20px 26px 26px}
/* head without content (configurator dialog): only the close button, floating, the body starts at the top */
.modal-head-float{position:absolute;top:0;right:0;z-index:2;padding:16px 16px 0}
.modal-head-float .modal-close{background:var(--surface)}
.modal-head-float + .modal-body{padding-top:26px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:var(--fs-text);font-weight:500;color:var(--ink)}
/* required fields: asterisk after the label, explained by "* Pflichtfelder" below the message */
.field.req label::after{content:"*";margin-left:2px;color:var(--blue)}
.form-req{margin:0;align-self:flex-end;font-size:var(--fs-text);color:var(--muted)}
.field input,.field textarea{font:inherit;color:var(--text);padding:11px 13px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--surface-2);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue-3);box-shadow:0 0 0 3px var(--tint-2)}
.field textarea{min-height:96px;resize:vertical}
.form .note{grid-column:1/-1;font-size:var(--fs-text);color:var(--muted)}
.form .btn{grid-column:1/-1}
.success{text-align:center;padding:12px 0 6px}
.success .ic-box{width:56px;height:56px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:var(--mist);color:var(--blue)}
.success p{color:var(--muted);margin:8px 0 20px}
.cfg-modal{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}
.cfg-modal .tile-img{border-radius:var(--radius-m);aspect-ratio:1}
.cfg-media{min-width:0}
.cfg-media .rc-gallery{position:static}
.cfg-media .rc-gal-main{border-radius:var(--radius-m)}
.cfg-media .rc-gal-main img{object-fit:cover}
.cfg-modal .tile-img .ic{width:72px;height:72px}
.cfg-modal p{color:var(--muted);margin:10px 0 14px}
.features li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:var(--fs-text)}
.features .ic{width:18px;height:18px;color:var(--blue);margin-top:1px}
.cfg-info{display:flex;flex-direction:column;min-width:0}
/* room for the floating close button */
.cfg-info h2{padding-right:36px;overflow-wrap:break-word;hyphens:auto}
.cfg-kicker{display:block;margin-bottom:2px;font-family:var(--f-body);font-size:var(--fs-text);font-weight:400;line-height:1.3;letter-spacing:0;color:var(--muted)}
.cfg-kicker[hidden]{display:none}
.cfg-info .cta-row{margin-top:auto;padding-top:32px;justify-content:flex-end}
.cfg-ref{margin:14px 0 20px;font-size:var(--fs-text);color:var(--muted)}
.cfg-ref b{color:var(--ink);font-weight:500}
.legal p{color:var(--muted);font-size:var(--fs-text)}
.legal p + p{margin-top:8px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:16px}
  .marquee-track [aria-hidden="true"]{display:none}
  .marquee{mask-image:none;cursor:auto}
}

/* application modal with job ad: pdf left, form right; mobile: pdf collapsed above the form */
.modal.has-pdf{width:min(1120px,calc(100vw - 32px))}
.modal.has-pdf .job-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
.job-pdf{display:flex;flex-direction:column;gap:12px;min-width:0}
.job-links{display:flex;flex-wrap:wrap;gap:10px}
.job-links .btn{padding:10px 16px}
@media (max-width:640px){
  .job-links .btn{flex:1 1 100%;justify-content:flex-start}
}
.job-links .ic{width:18px;height:18px}
.job-details > summary{display:none}
.job-frame{height:min(66vh,720px);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:var(--surface-2)}
.job-frame.has-pages{overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-color:var(--line-soft)}
/* job ad pages as images, like sheets of paper (v60) */
.job-pages{display:flex;flex-direction:column;gap:20px;padding:20px}
.job-pages img{display:block;width:100%;height:auto;border-radius:2px;background:var(--surface);box-shadow:0 1px 3px rgba(20,38,70,.12),0 10px 26px -14px rgba(20,38,70,.35)}
.job-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:24px;text-align:center;color:var(--muted)}
.job-fallback .ic{width:40px;height:40px;color:var(--blue-4);stroke-width:1.4}
.job-mail{margin-top:16px;font-size:var(--fs-text);color:var(--muted)}
.job-mail a{color:var(--blue);font-weight:500}
@media (max-width:860px){
  .modal.has-pdf .job-split{grid-template-columns:1fr;gap:16px}
  .job-details > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-2);cursor:pointer;font-weight:500;color:var(--ink);list-style:none}
  .job-details > summary::-webkit-details-marker{display:none}
  .job-details > summary .ic{width:18px;height:18px;transition:transform .2s}
  .job-details[open] > summary{margin-bottom:12px}
  .job-details[open] > summary .ic{transform:rotate(180deg)}
  .job-frame{height:70vh}
}
/* job ad only (v52): no form next to the pdf, pdf always open */
.modal.pdf-only{width:min(960px,calc(100vw - 32px))}
.modal.pdf-only .job-split{display:block}
.modal.pdf-only .job-form-col{display:none}
.modal.pdf-only .job-details > summary{display:none}
.modal.pdf-only .job-frame{height:min(74vh,900px)}
.modal.pdf-only .job-frame.is-empty{height:auto;min-height:240px}

/* faq accordion: full content width, one answer open at a time */
.faq-wrap{max-width:none;margin:0}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0;font-size:var(--fs-h3)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:22px 4px;text-align:left;font-family:var(--f-head);font-size:var(--fs-h3);font-weight:500;line-height:1.3;color:var(--ink);transition:color .2s}
.faq-q:hover{color:var(--blue)}
.faq-q:focus-visible{outline-offset:2px}
.faq-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mist);color:var(--blue);transition:background .25s,color .25s}
.faq-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.faq-ic .v{transform-origin:center;transform-box:fill-box;transition:transform .25s ease}
.faq-q[aria-expanded="true"]{color:var(--blue)}
.faq-q[aria-expanded="true"] .faq-ic{background:var(--blue);color:var(--on-dark)}
.faq-q[aria-expanded="true"] .faq-ic .v{transform:rotate(90deg)}
.faq-a{padding:0 58px 24px 4px;color:var(--muted);font-size:var(--fs-text);line-height:1.65}
.faq-a:not([hidden]){animation:faqIn .25s ease-out}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}}
.faq-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin-top:32px;color:var(--muted)}
@media (max-width:640px){
  .faq-q{font-size:var(--fs-h3);padding:18px 0;gap:14px}
  .faq-a{padding:0 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .faq-a:not([hidden]){animation:none}
}

/* v59: card titles use the h2 size, so the tile grid fits as many columns as 240px tiles allow (no title overflow) */
.tiles,.tiles[class]{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
@media (max-width:640px){
  /* value titles in the h2 size need the full width; the team link fits without its arrow */
  .values[class]{grid-template-columns:1fr}
  .values .value h3{overflow-wrap:normal}
  .mate .link-arrow .ic{display:none}
}

/* challenge -> solution -> result, three rows of equal height (v65) */
/* the result column is as wide as its widest content (shared by all rows via subgrid), the boxes share the rest,
   so the group reaches the right content edge like every other section instead of ending ~60px before it */
.pairs{grid-auto-rows:1fr;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px max-content;column-gap:0}
.pair{grid-column:1/-1;grid-template-columns:subgrid}
.pair .res{display:flex;align-items:center;gap:14px;padding:0 0 0 4px}
.pair .res .ic-box{background:var(--mist);color:var(--blue)}
.res-num{display:block;font-family:var(--f-head);font-size:var(--fs-h2);font-weight:500;line-height:1.1;color:var(--blue);white-space:nowrap}
.pair b.res-num{font-size:var(--fs-h2);font-weight:500;color:var(--blue)}
.res-txt{display:block;font-size:var(--fs-text);color:var(--muted);white-space:nowrap}
/* intermediate stage before the one-column layout: on a narrow group the icons go above the text, so the longest
   label ("Herausforderung", one uppercase word) stays inside its box. measured on the group, not the viewport: the
   gutters jump at 1100px, so it is narrow at ~861-1045px and again at ~1100-1213px. the container is the group,
   not the row: a container has layout containment, and that would stop a row being a subgrid */
.pairs{container:pairs / inline-size}
/* safety net in every layout: the text column may get narrower than its longest word, and the label shrinks with
   its box (the box is a container, cqi = box width) if the longest label (~10em incl. spacing) would not fit;
   wide boxes keep 16px. 100px = padding 2x24 + icon 38 + gap 14 */
.pair .ch,.pair .so{container-type:inline-size}
.pair .ch>div,.pair .so>div{min-width:0}
.pair small{font-size:min(var(--fs-text),calc((100cqi - 100px) / 10))}
@media (min-width:861px){
  @container pairs (max-width:800px){
    .pair .ch,.pair .so{flex-direction:column;gap:10px;padding:18px}
    /* icon above the text: only the padding (2x18) is taken from the width */
    .pair small{letter-spacing:.08em;font-size:min(var(--fs-text),calc((100cqi - 36px) / 9.6))}
    .pair .res{flex-direction:column;align-items:flex-start;gap:8px}
    .pair .res .res-num{white-space:normal}
  }
}
@media (max-width:860px){
  .pairs{grid-auto-rows:auto;grid-template-columns:minmax(0,1fr);gap:20px}
  .pairs .pair{grid-template-columns:1fr;gap:4px}
  .pairs .pair .arrow{transform:rotate(90deg);height:20px}
  .pair .res{padding:4px 4px 0}
  .pair .res > div{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
}
/* section wheel at the left edge (v68): items on a drum (rotateX + translateZ), current one in front;
   shown only where the gutter left of the content is wide enough, transforms / opacity set by the script */
.wheel{position:fixed;left:16px;top:50%;z-index:34;width:var(--wheel-w,210px);height:280px;margin-top:-140px;perspective:600px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.wheel-drum{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(-110px)}
.wheel-item{position:absolute;left:0;top:50%;height:40px;margin-top:-20px;max-width:100%;display:flex;align-items:center;gap:10px;padding:0 10px 0 0;
  background:none;border:0;font-size:var(--fs-text);font-weight:500;color:var(--muted);white-space:nowrap;text-align:left;
  transform-origin:0 50%;backface-visibility:hidden;will-change:transform,opacity;cursor:pointer}
.wheel-item::before{content:"";flex:none;width:3px;height:18px;border-radius:2px;background:var(--blue);opacity:0;transition:opacity .2s}
.wheel-item:hover{color:var(--ink)}
.wheel-item.is-front{color:var(--blue);font-weight:600}
.wheel-item.is-front::before{opacity:1}
.wheel{cursor:grab;touch-action:none;user-select:none}
.wheel.is-dragging{cursor:grabbing}
.wheel.is-dragging .wheel-item{cursor:grabbing}
.wheel-item:focus-visible{opacity:1!important;outline-offset:2px}
/* reduced motion: plain vertical list, no 3d, no turning */
.wheel.is-flat{height:auto;margin-top:0;transform:translateY(-50%);perspective:none;-webkit-mask-image:none;mask-image:none}
.wheel.is-flat .wheel-drum{position:static;transform:none;display:flex;flex-direction:column;gap:2px}
.wheel.is-flat .wheel-item{position:static;margin-top:0;height:36px;transform:none!important;opacity:1!important}

/* responsive */
@media (max-width:1100px){
  .values{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--pad-y:64px}
  .hero,.about-hero,.career,.contact-grid,.cta-block{grid-template-columns:1fr}
  .hero{gap:40px;padding-top:48px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .steps{flex-direction:column;align-items:stretch;gap:14px}
  .step,.step:last-child{flex:none}
  .step:not(:last-child)::after,.step:not(:last-child)::before{display:none}
  .team{grid-template-columns:1fr 1fr}
  .member.lead-card{grid-column:1/-1;grid-row:auto}
  .cta-block .cta-row{justify-content:flex-start}
  .footer{grid-template-columns:1fr 1fr}
  .footer > div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--pad-y:52px}

  .header{padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px 10px}

  .nav{order:3;width:100%}
  .nav a{flex:1;text-align:center}
  .header .nav a{padding:6px 10px;font-size:var(--fs-text)}
  .header-cta{margin-left:auto}
  .btn-contact{padding:8px 16px}
  .header-cta .btn-label-long{display:none}
  .values,.team,.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .value{padding:18px}
  .value h3{font-size:var(--fs-h3);overflow-wrap:anywhere}
  .header .brand-logo{height:44px}
  .visual .play{top:14px;right:14px;bottom:auto}
  .visual .vtag{display:none}
  .logo-chip{width:140px;height:64px;padding:12px 16px}
  .pair{grid-template-columns:1fr;gap:6px}
  .pair .arrow{transform:rotate(90deg);height:28px}
  .stat{padding:20px 18px}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile-body{padding:12px 14px 14px}
  .tile-body h3{font-size:var(--fs-h3)}
  .tile-body p{display:none}
  .cta-block{padding:36px 24px}
  .cta-row .btn{flex:1 1 auto}
  .team{grid-template-columns:1fr 1fr;gap:10px}
  .jobs li{flex-direction:column;align-items:flex-start;gap:10px}
  .form{grid-template-columns:1fr}
  .cfg-modal{grid-template-columns:1fr}
  .cfg-modal .tile-img{aspect-ratio:16/8}
  .modal-head,.modal-body{padding-inline:20px}
  .footer{padding:28px 20px 36px;grid-template-columns:1fr}
}

/* hero v45: configurator showcase from the reference dummy (tables, terraces, wall, sofa),
   scoped under .hc and restyled with the landing page tokens */
.hc{--blue2:var(--blue-2);--grey:var(--muted);--soft:var(--mist);--hc-text:var(--text);
  font-family:var(--f-body);color:var(--text)}
.hc button{font:inherit;color:inherit}
@keyframes hcSpin{to{transform:rotate(360deg)}}
.hc .show{position:relative;padding-top:34px;min-width:0}
.hc .tabs{position:relative;height:50px;border-radius:6px;user-select:none}
.hc .tabs-base,.hc .tabs-fill{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);border-radius:6px}
.hc .tab{border:0;background:transparent;cursor:pointer;font-size:var(--fs-text);font-weight:600;color:var(--blue);border-radius:6px;padding:0;transition:background .2s}
.hc .tab:hover{background:rgba(0,105,167,.05)}
.hc .tab:focus-visible{outline:2px solid var(--blue2);outline-offset:2px}
.hc .tabs-fill{pointer-events:none;background:var(--blue);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--s,0px),transparent calc(var(--s,0px) + var(--f,120px)));
            mask-image:linear-gradient(90deg,#000 0,#000 var(--s,0px),transparent calc(var(--s,0px) + var(--f,120px)));
    opacity:0}
.hc .tabs-fill span{display:grid;place-items:center;color:#fff;font-size:var(--fs-text);font-weight:600}
.hc .pause-ind{position:absolute;right:8px;top:4px;z-index:1;font-size:var(--fs-text);font-weight:500;color:var(--muted);background:var(--mist);border-radius:20px;padding:4px 10px;display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .25s;pointer-events:none}
.hc .pause-ind.show{opacity:1}
.hc .pause-ind i{display:inline-block;width:7px;height:9px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
/* top aligned: panels differ in height per tab, the stage (and its badges and hints) must not move */
.hc .show-area{display:flex;gap:28px;align-items:flex-start;margin-top:28px}
.hc .stage{position:relative;flex:1;min-width:0;height:min(52vw,470px);min-height:340px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hc .stage.dragging{cursor:grabbing}
/* the canvas lies over the stage and never sizes it: in flow its pixel size (set by the resize handler) pushed the
   stage up, the handler grew the canvas again, and so on (stage 3600px+ after resizing from desktop to phone) */
.hc .stage canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important}
.hc .loader{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:var(--fs-text);transition:opacity .4s}
.hc .loader.gone{opacity:0;pointer-events:none}
.hc .spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--soft);border-top-color:var(--blue);animation:hcSpin .9s linear infinite}
.hc .hint{position:absolute;left:8px;bottom:6px;font-size:var(--fs-text);color:var(--muted);display:flex;gap:14px;transition:opacity .6s;pointer-events:none}
.hc .hint.gone{opacity:0}
.hc .hint span{white-space:nowrap}
.hc .hint{right:8px;flex-wrap:wrap;row-gap:2px}
.hc .hint b{font-weight:600;color:#4b4b55}
.hc .tag{position:absolute;left:8px;top:4px;font-size:var(--fs-text);font-weight:500;color:var(--blue2);background:var(--soft);border-radius:20px;padding:4px 10px;opacity:0;transform:translateY(-4px);transition:.3s;pointer-events:none}
.hc .tag.show{opacity:1;transform:none}
.hc .panel{width:224px;flex:0 0 224px;border:1px solid var(--line);border-radius:12px;padding:16px 14px 14px;background:#fff;box-shadow:0 2px 10px rgba(16,24,40,.04);transition:opacity .14s, transform .14s}
.hc .panel.swap{opacity:0;transform:translateY(4px)}
.hc .pgroup + .pgroup{margin-top:18px}
/* 600 like every other h3: the fonts only come up to 600, 700 was a browser-made bold */
.hc .pgroup h3{margin:0 0 6px;font-size:var(--fs-h3);font-weight:600}
.hc .pitem{margin:8px 0 0 12px}
.hc .pitem.hidden{display:none}
.hc .plabel{font-size:var(--fs-text);font-weight:600;margin-bottom:9px}
.hc .swatches,.hc .icons{display:flex;gap:16px}
.hc .sw{width:46px;height:46px;border-radius:50%;border:1px solid #d9dbe0;background-size:cover;background-position:center;cursor:pointer;padding:0;transition:transform .15s, box-shadow .15s}
.hc .sw:hover{transform:scale(1.06)}
.hc .sw.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue);border-color:transparent}
/* shape options: round like the colour swatches, the drawing inside */
.hc .ic{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;padding:9px;transition:transform .15s, box-shadow .15s}
.hc .ic img{max-width:100%;max-height:100%;display:block}
.hc .ic:hover{transform:scale(1.06)}
.hc .ic.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue);border-color:transparent}
/* option buttons share the panel width evenly, so three of them fit without touching the edge */
.hc .chips{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--mist)}
.hc .chip{flex:1 1 0;min-width:0;text-align:center;border:0;border-radius:8px;background:transparent;color:var(--muted);font-family:var(--f-body);font-size:var(--fs-text);font-weight:600;line-height:1.2;padding:7px 4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .2s,color .2s,box-shadow .2s}
.hc .chip:hover{color:var(--ink)}
.hc .chip:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.hc .chip.sel{background:var(--surface);color:var(--blue);box-shadow:0 1px 3px rgba(16,24,40,.12),0 1px 2px rgba(16,24,40,.06)}
.hc .sl{display:grid;grid-template-columns:minmax(44px,max-content) 1fr;align-items:center;column-gap:8px;font-size:var(--fs-text);color:#333;margin:2px 0 4px}
.hc .sl output{grid-column:2;font-size:var(--fs-text);color:var(--muted);margin-top:-3px;text-align:right}
.hc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;margin:0;cursor:pointer}
.hc input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue) 0,var(--blue) var(--pct,50%),#9aa0a8 var(--pct,50%))}
.hc input[type=range]::-moz-range-track{height:2px;background:#9aa0a8}
.hc input[type=range]::-moz-range-progress{height:2px;background:var(--blue)}
.hc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--blue);margin-top:-4.5px;border:0;transition:transform .12s}
.hc input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--blue);border:0}
.hc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.3)}
/* landing page look: tokens, radii and shadows from design.md */
.hc .tabs{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.hc .tabs-base,.hc .tabs-fill{border-radius:12px}
.hc .tab{font-family:var(--f-body);font-weight:500;color:var(--ink);border-radius:12px}
.hc .tab:hover{background:var(--mist)}
.hc .tabs-fill span{font-family:var(--f-body);font-weight:500}
.hc .panel{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);background:var(--surface)}
.hc .pgroup h3{font-family:var(--f-head);font-weight:600;font-size:var(--fs-h3);color:var(--ink)}
.hc .plabel{color:var(--muted);font-weight:600;letter-spacing:.02em}
.hc .sw{border-color:var(--line)}
.hc .ic{color:inherit;fill:initial;stroke:initial}
.hc .tag{color:var(--blue);background:var(--mist)}
.hc .hint{color:var(--muted)}
.hc .hint b{color:var(--ink)}
/* mouse icons instead of the text hint (v63): outline in --ink, pressed key in --blue with a soft click pulse */
.hc .hint-item{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}
.hc .mouse{width:16px;height:24px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.hc .mouse .mouse-key{fill:var(--blue);stroke:none;animation:mouseClick 2.4s ease-in-out infinite}
.hc .hint-item + .hint-item .mouse-key{animation-delay:1.2s}
@keyframes mouseClick{0%,60%,100%{opacity:1}75%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .hc .mouse .mouse-key{animation:none} }
.hc .show{padding-top:0}
/* tabs v46: text + thin progress line like the section bar under the header, no box */
.hc .tabs{height:48px;border:0;border-radius:0;background:transparent;box-shadow:none}
.hc .tabs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.hc .tabs-base{border-radius:0}
.hc .tab{border-radius:0;background:transparent;font-size:var(--fs-text);font-weight:500;color:var(--muted);transition:color .2s}
.hc .tab:hover{background:transparent;color:var(--ink)}
.hc .tab.active,.hc .tab[aria-selected="true"]{color:var(--blue);font-weight:600}
/* the script still drives --s / --f / opacity on #tabsFill; it is now a 2px line on the base line */
.hc .tabs-fill{top:auto;bottom:0;height:2px;z-index:1;border-radius:2px;background:var(--blue);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--s,0px),transparent calc(var(--s,0px) + min(var(--f,2px),2px)));
            mask-image:linear-gradient(90deg,#000 0,#000 var(--s,0px),transparent calc(var(--s,0px) + min(var(--f,2px),2px)))}
.hc .tabs-fill span{display:none}
@media (max-width:860px){.hc{margin-top:20px}}
/* below ~1300px the panel moves under the 3d stage, side by side the stage gets too small; the setting groups
   stand next to each other from 125px each (phones: one per row, see below), swatches / shapes stay in one row and
   shrink from 40px down to 30px (at most three options: 114px), the 4px padding keeps the selection ring inside the panel */
@media (max-width:1300px){
.hc .show-area{flex-direction:column;align-items:stretch;gap:20px}
.hc .stage{flex:none}
.hc .panel{width:auto;flex:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:14px 20px}
.hc .pgroup + .pgroup{margin-top:0}
.hc .pitem{margin-left:0}
.hc .swatches,.hc .icons{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(30px,40px);justify-content:start;gap:8px;padding:4px}
.hc .sw{width:100%;height:auto;aspect-ratio:1}
.hc .ic{width:100%;height:auto;aspect-ratio:1;padding:7px}
}
/* two hero columns with the panel below the stage: half / half, less air right of the text, a flatter stage */
@media (min-width:861px) and (max-width:1300px){
.hero8{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.h8-text{margin-right:24px}
.hc .stage{height:clamp(300px,34vw,440px);min-height:0}
}
@media (max-width:860px){
.hc .show-area{flex-direction:column;align-items:stretch}
/* in the column the stage keeps its own height (min(52vw,470px), at least 340px); flex:1 would ignore it */
.hc .stage{flex:none}
/* one setting per row: the groups (e.g. "Tischplatte", "Gestell") stand below each other over the full width */
.hc .panel{width:auto;flex:none;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.hc .pgroup + .pgroup{margin-top:0}
.hc .tab,.hc .tabs-fill span{font-size:var(--fs-text)}
/* phones: swatches / shapes at most 36px (one row, shrinking down to 30px as above) */
.hc .pitem{margin-left:0}
.hc .swatches,.hc .icons{grid-auto-columns:minmax(30px,36px)}
.hc .sw{width:100%;height:auto;aspect-ratio:1}
.hc .ic{width:100%;height:auto;aspect-ratio:1;padding:6px}
}
/* contact chooser in the form modal (v61) */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.way{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);text-align:left;transition:border-color .2s,box-shadow .2s}
.way:hover{border-color:var(--blue-4);box-shadow:var(--shadow)}
.way-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mist);color:var(--blue)}
.way b{font-size:var(--fs-h3);font-weight:600;color:var(--ink)}
.way > span:last-child{font-size:var(--fs-text);color:var(--muted)}
.ways-direct{grid-column:1/-1;margin-top:6px;color:var(--muted)}
.ways-direct a{color:var(--blue);font-weight:500;white-space:nowrap}
@media (max-width:640px){ .ways{grid-template-columns:1fr} }/* v61: intermediate headings (cards, tiles, steps, milestones, faq questions, job titles) = --fs-h3 at weight 600 */
.jobs b{font-size:var(--fs-h3)}
h3,.faq-q,.jobs b,.mate figcaption b,.member .info b{font-weight:600}
.ref-modal h3,.rc-id h3{font-weight:500}

/* ---------- cms additions (pd-v70 theme) ---------- */
/* language choice in the footer: flag dropdown, opens upwards */
.copy-links{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 0}
/* legal links separated by pipes: AGB | Datenschutz | Impressum | Datenschutz-Einstellungen */
.copy-sep{margin:0 10px;color:var(--muted)}
.lang-dd{position:relative;display:inline-block;margin-left:14px}
.lang-dd > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap}
.lang-dd > summary::-webkit-details-marker{display:none}
.lang-dd > summary:hover,.lang-dd[open] > summary{border-color:var(--blue)}
.lang-dd > summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.lang-dd-caret{width:14px;height:14px;transform:rotate(-90deg);transition:transform .2s}
.lang-dd[open] .lang-dd-caret{transform:rotate(90deg)}
.lang-flag{display:block;width:20px;height:15px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);object-fit:cover}
.lang-dd-list{position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;min-width:200px;max-height:min(60vh,420px);overflow:auto;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-lg)}
.lang-dd-list li + li{margin-top:2px}
.lang-dd-list a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-s);color:var(--ink)}
.lang-dd-list a:hover{background:var(--mist);color:var(--ink)}
.lang-dd-list a[aria-current="true"]{background:var(--mist);color:var(--blue);font-weight:600}
@media (prefers-reduced-motion:reduce){.lang-dd-caret{transition:none}}
/* text pages (impressum, datenschutz, 404) */
/* the section keeps the page grid (its padding is computed from the full width), only the text column is limited */
.text-page .text-body{max-width:820px}
.text-page h1{margin:.2em 0 .6em}
.text-body{color:var(--muted);font-size:var(--fs-text);line-height:1.7}
.text-body p + p,.text-body ul,.text-body ol{margin-top:12px}
.text-body h2,.text-body h3{color:var(--ink);margin:28px 0 8px}
.text-body h4{color:var(--ink);font-size:var(--fs-text);margin:18px 0 4px}
.text-body a{color:var(--blue)}
/* tables in text areas (e.g. terms): a real table in a scroll container (div.table-scroll, added by the cms around
   every rich text table). the container never gets wider than its text area, so a table that does not fit scrolls
   sideways inside it instead of widening the page. from 3 columns on a table keeps a minimum width, so on phones it
   scrolls instead of squeezing the columns into narrow word stacks */
.text-body{min-width:0}
.table-scroll{max-width:100%;margin-top:16px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-s)}
.table-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.text-body table{width:100%;border-collapse:collapse;font-size:var(--fs-text);color:var(--text)}
.text-body table:has(tr > :nth-child(3)){min-width:32rem}
.text-body table:has(tr > :nth-child(4)){min-width:40rem}
.text-body table:has(tr > :nth-child(5)){min-width:48rem}
.text-body caption{caption-side:top;text-align:left;font-weight:600;color:var(--ink);padding:10px 14px 0}
/* break-word, not anywhere: "anywhere" lets the table shrink a column below its longest word, which split
   headings like "Stufe" or "Priorität" mid-word; break-word only breaks a word wider than the whole table */
.text-body th,.text-body td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:break-word}
.text-body tbody tr:last-child > th,.text-body tbody tr:last-child > td{border-bottom:0}
.text-body thead th,.text-body table:not(:has(thead)) tr:first-child:not(:has(td)) > th{background:var(--surface-2);color:var(--ink);font-weight:600;border-bottom:2px solid var(--line)}
.text-body tbody th{color:var(--ink);font-weight:600}
/* rich text of a job position in the application dialog: darker text, lists with markers (ul is reset globally) */
.job-text{color:var(--text)}
.job-text ul{list-style:disc;padding-left:1.3em}
.job-text ol{list-style:decimal;padding-left:1.4em}
.job-text li + li{margin-top:4px}
.job-text > :first-child{margin-top:0}
/* customer band: first n logos move, the toggle shows all customers as tiles */
.logos:not(.is-expanded) .logo-chip.is-extra{display:none}
.logos-more{display:flex;justify-content:center;margin-top:18px}
.logos-toggle .ic{transition:transform .2s}
.logos.is-expanded .logos-toggle .ic{transform:rotate(180deg)}
.logos.is-expanded .marquee{mask-image:none;overflow:visible;cursor:auto}
.logos.is-expanded .marquee-track{animation:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:16px;width:auto;padding:0}
.logos.is-expanded .logo-chip{width:auto}
.logos.is-expanded .logo-chip.is-clone{display:none}
@media (max-width:600px){.logos.is-expanded .marquee-track{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}}

/* appointment booking: consent note in the form modal, the calendar itself is calendly's popup */
.booking-consent{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:8px 0}
.booking-consent h3{margin:0}
.booking-consent p{margin:0;color:var(--muted)}
.booking-remember{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);cursor:pointer}
.booking-alt{font-size:.9rem}

/* placeholder markers in content ("noch zu bestätigen") only show in the cms preview */
html:not(.cms-preview) .dummy{display:none !important}

/* stars from a 1–5 value (testimonials with a source) */
.gstars{--r:5;display:inline-block;width:5.4em;height:1em;font-size:16px;background:linear-gradient(90deg,#f5b301 calc(var(--r)/5*100%),var(--line) 0);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg%3E%3Cpath id='s' d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/g%3E%3C/svg%3E") left/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg%3E%3Cpath id='s' d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/g%3E%3C/svg%3E") left/contain no-repeat}
.review-count{color:var(--muted);font-size:var(--fs-text)}
.reviews{flex-wrap:wrap;gap:12px}
.reviews:not(:has(.review-badge)){display:none}
.quote .gstars{font-size:14px}
.quote-note{margin:0;font-size:var(--fs-small,.85rem);color:var(--muted)}
.quote-note a,.quote-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.quote-src{display:block;margin-top:2px;font-size:var(--fs-small,.85rem);color:var(--muted)}

/* testimonials band: arrows on both sides, drag with the mouse */
.qwrap{position:relative}
.qband{cursor:grab}
.qband.is-dragging{cursor:grabbing;user-select:none}
.qband.is-dragging *{pointer-events:none}
.qnav{position:absolute;top:50%;z-index:2;width:42px;height:42px;margin-top:-21px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);transition:border-color .2s,color .2s,opacity .2s}
.qnav:hover,.qnav:focus-visible{border-color:var(--blue);color:var(--blue)}
.qnav-prev{left:-8px}
.qnav-prev .ic{transform:rotate(180deg)}
.qnav-next{right:-8px}
@media (hover:none){.qnav{display:none}}

/* contact form: spam trap off screen, error line */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{grid-column:1/-1;margin:0;padding:10px 12px;border-radius:var(--radius-s,8px);background:#fdecec;color:#9b1c1c;font-size:var(--fs-text)}
.form-error a{color:inherit;text-decoration:underline}

/* consent manager (cms) in the theme colors */
:root{--cc-accent:var(--blue);--cc-text:var(--ink);--cc-muted:var(--muted);--cc-line:var(--line);--cc-font:var(--f-body)}
.footer-consent{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.footer-consent:hover{text-decoration:underline}

/* ---------- 404 page (layouts/fehler-404.html, from 404-clickdummy-v3): text left, 3d "404" diorama right ---------- */
.e404{--e404-track:#9aa0a8}
.e404-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;padding:24px var(--edge-r) 64px var(--edge-l);min-height:calc(100vh - var(--topbar-h,130px))}
.e404-eyebrow{font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.e404-eyebrow::before{content:"";width:24px;height:2px;background:currentColor}
.e404-title{font-family:var(--f-head);font-weight:500;letter-spacing:-.01em;color:var(--ink);font-size:var(--fs-h1);line-height:1.05;margin:0 0 20px}
.e404-title em{font-style:normal;color:var(--blue)}
.e404-lead{color:var(--blue);max-width:460px;margin:0 0 32px}
.e404-back{display:inline-flex;align-items:center;gap:6px;margin-top:22px;color:var(--blue);font-weight:500}
.e404-back .ic{width:16px;height:16px;transform:rotate(180deg);transition:transform .2s}
.e404-back:hover .ic{transform:rotate(180deg) translateX(3px)}

.e404-show{min-width:0}
.e404-area{display:flex;gap:24px;align-items:center}
.e404-stage{position:relative;flex:1;min-width:0;height:min(50vw,500px);min-height:340px;cursor:grab;touch-action:pan-y;user-select:none}
.e404-stage.dragging{cursor:grabbing}
.e404-stage canvas{display:block;width:100%!important;height:100%!important}
.e404-loader{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);transition:opacity .4s}
.e404-loader.gone{opacity:0;pointer-events:none}
.e404-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--mist);border-top-color:var(--blue);animation:e404-spin .9s linear infinite}
@keyframes e404-spin{to{transform:rotate(360deg)}}
.e404-hint{position:absolute;left:8px;bottom:6px;display:flex;gap:14px;font-weight:500;color:var(--ink);pointer-events:none}
.e404-hint>span{display:inline-flex;align-items:center;gap:6px}
.e404-mouse{width:16px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.e404-mouse .key{fill:currentColor;stroke:none}
.e404-pause{position:absolute;right:8px;top:4px;color:var(--muted);display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .25s;pointer-events:none}
.e404-pause.show{opacity:1}
.e404-pause i{display:inline-block;width:7px;height:9px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}

.e404-panel{width:236px;flex:0 0 236px;border:1px solid var(--line);border-radius:16px;padding:16px 14px;background:var(--surface);box-shadow:var(--shadow)}
.e404-group+.e404-group{margin-top:16px}
.e404-group h3{font-family:var(--f-head);font-size:var(--fs-h3);font-weight:600;color:var(--ink);margin:0 0 4px}
.e404-item{margin:8px 0 0 12px}
.e404-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.e404-row .e404-label{margin:0}
.e404-label{font-weight:600;color:var(--muted);margin-bottom:6px}
.e404-chips{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.e404-chip{border:0;background:var(--surface);padding:5px 10px;cursor:pointer;border-left:1px solid var(--line);font:inherit;color:inherit}
.e404-chip:first-child{border-left:0}
.e404-chip.sel{background:var(--blue);color:#fff}
.e404-sl{display:grid;grid-template-columns:1fr auto;align-items:center;margin:0 0 6px}
.e404-sl output{color:var(--muted)}
.e404-sl input{grid-column:1/-1}
.e404 input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;margin:0;cursor:pointer}
.e404 input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue) 0,var(--blue) var(--pct,50%),var(--e404-track) var(--pct,50%))}
.e404 input[type=range]::-moz-range-track{height:2px;background:var(--e404-track)}
.e404 input[type=range]::-moz-range-progress{height:2px;background:var(--blue)}
.e404 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--blue);margin-top:-5px;border:0;transition:transform .12s}
.e404 input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--blue);border:0}
.e404 input[type=range]:active::-webkit-slider-thumb{transform:scale(1.3)}
/* hue slider: rainbow track, white thumb showing the picked colour */
.e404 input.e404-hue::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.e404 input.e404-hue::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.e404 input.e404-hue::-moz-range-progress{background:transparent}
.e404 input.e404-hue::-webkit-slider-thumb{width:16px;height:16px;margin-top:-4px;background:var(--hue-c,#0069A7);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.e404 input.e404-hue::-moz-range-thumb{width:14px;height:14px;background:var(--hue-c,#0069A7);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}

@media (max-width:1080px){
  .e404-hero{grid-template-columns:1fr;min-height:0;padding-top:32px}
}
@media (max-width:640px){
  .e404-area{flex-direction:column;align-items:stretch}
  .e404-panel{width:auto;flex:none}
  .e404-stage{height:300px;min-height:0}
}