/* ============================================================
   STÜSSI Betonvorfabrikation AG — styles.css
   CMS-Miro-Theme "stuessiag". EIN Stylesheet fuer die ganze Site.

   GENERIERT: Verkettung der v9-Blaetter (version9/site/assets/css) in
   exakt der Kaskaden-Reihenfolge der statischen Seiten:
     1. fonts.css                @font-face (Titillium Web + Afacad)
     2. style.css                Basis fuer ALLE Seiten
     3. loesungen.css            nur loesungen.html
     4. kompetenz.css            nur kompetenz.html
     5. projekte.css             nur projekte.html
     6. beratung.css             nur beratung.html
     7. kontakt.css              kontakt + danke + impressum + datenschutz
     8. buchen.css               nur buchen.html
     9. treppenkonfigurator.css  nur treppenkonfigurator.html

   WARUM EIN BLATT: in der Statik lud jede Seite fonts.css + style.css +
   GENAU EIN Seitenblatt. Im CMS haengt das Chrome im Layout, das App Router
   ueber Client-Navigationen hinweg gemountet laesst — ein pro Seite
   gewaehltes <link> waere nach dem ersten Nav-Klick veraltet. Also ein
   Request, ein Blatt.

   FOLGE: Seitenblatt-Regeln wirken jetzt auf ALLEN Seiten. Maschinell
   geprueft (Selektor je Blatt x tatsaechliches Markup jeder v9-Seite);
   die Regeln, die dadurch fremde Seiten veraendert haetten, sind mit
   main[data-page="<slug>"] gescoped — PageTemplate setzt das Attribut auf
   <main>. Alles andere bleibt UNVERAENDERT: zusaetzliche Spezifitaet
   waere nur Ballast. Gescoped wurden:
     loesungen : .page-hero--split .lead | .cta h2 | .quote .quote-cite
     kompetenz : .play-badge | .compare-head | .compare-head .icon
     projekte  : .play-badge | .cta h2 (auch im @media 640)
     beratung  : .cta h2
     buchen    : .page-hero--split | ... h1 | ... .lead
   kontakt.css und treppenkonfigurator.css brauchten kein Scoping: ihre
   seitenuebergreifend passenden Regeln sind wertgleiche Duplikate der
   Basis (.page-hero h1) bzw. matchen nirgends sonst (.field select — nur
   der Konfigurator hat ueberhaupt ein <select>).

   RU: это склейка листов v9 в порядке каскада статики. Постраничные листы
   в CMS действуют на всех страницах, поэтому конфликтующие правила
   заскоуплены на main[data-page="<slug>"]; неконфликтующие оставлены как
   есть. Правила НЕ переписаны — только префикс скоупа.

   @font-face-Pfade bleiben "../fonts/…": diese Datei liegt wie im Original
   in assets/css, daneben assets/fonts.
   ============================================================ */


/* ===== assets/css/fonts.css ===== */
/* Anzeige-Schrift aus dem Logo abgeleitet: STÜSSI ist in Eurostile/Microgramma
   gesetzt (lizenzpflichtig). Titillium Web ist der quadratische Grotesk, den der
   Kunde bereits als Entsprechung gewählt hat. */
@font-face{font-family:'Titillium Web';src:url('../fonts/titillium-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD}
@font-face{font-family:'Titillium Web';src:url('../fonts/titillium-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD}

@font-face{font-family:'Afacad';src:url('../fonts/afacad-400-normal-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;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}
@font-face{font-family:'Afacad';src:url('../fonts/afacad-400-normal-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;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:'Afacad';src:url('../fonts/afacad-500-normal-latin-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;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}
@font-face{font-family:'Afacad';src:url('../fonts/afacad-500-normal-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;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:'Afacad';src:url('../fonts/afacad-600-normal-latin-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;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}
@font-face{font-family:'Afacad';src:url('../fonts/afacad-600-normal-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;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:'Afacad';src:url('../fonts/afacad-700-normal-latin-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;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}
@font-face{font-family:'Afacad';src:url('../fonts/afacad-700-normal-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;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}
/* Fallback-Schriften mit den Massen der Webfonts (Arial bzw. das massgleiche
   Liberation Sans unter Linux, nachgemessen 29.09.2026): der Tausch auf Afacad /
   Titillium verschiebt keine Zeilen mehr (CLS), seit die Fonts nicht mehr
   vorgeladen werden. */
@font-face{font-family:'Afacad Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Arimo');font-weight:100 500;size-adjust:88.51%;ascent-override:112.99%;descent-override:37.66%;line-gap-override:0%}
@font-face{font-family:'Afacad Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Arimo Bold');font-weight:600 900;size-adjust:81.98%;ascent-override:121.98%;descent-override:40.66%;line-gap-override:0%}
@font-face{font-family:'Titillium Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Arimo Bold');font-weight:100 900;size-adjust:90.86%;ascent-override:124.7%;descent-override:42.7%;line-gap-override:0%}


/* ===== assets/css/style.css ===== */
/* Stüssi Betonvorfabrikation AG – v9 „Editorial“
   Palette: Betonskala (#F1F1EF · #E2E2DF · #CFCFCB · #A9A9A5 · #7B7C79 · #4B4C4A · #2E2F2D · #171816),
   Logo-Grün #18A345 nur als feiner Akzent (Linien, Sterne, Fokus), UI-Grün #166534 für Text/Links.
   Schrift: Bona Nova (Display) + Afacad (Text), self-hosted. */

:root{
  --paper:#ffffff;
  --stone:#F1F1EF;
  --stone-2:#E2E2DF;
  --line:#DCDCD8;
  --line-2:#CFCFCB;
  --grey-soft:#A9A9A5;
  --grey-mid:#62635F;        /* 29.09.2026: #7B7C79 hatte auf Stein nur 3.7:1 */
  --grey:#4B4C4A;
  --text:#2E2F2D;
  --ink:#171816;
  --dark:#2E2F2D;
  --dark-2:#2E2F2D;
  --dark-line:rgba(255,255,255,.14);
  --green:#18A345;
  --green-text:#14733A;   /* Grün für kleine Schrift auf Hell: #18A345 hat nur 3.3:1 */        /* Logo-Grün, auf Wunsch durchgängig */
  --green-bright:#18A345;
  --green-line:#CFCFCB;
  --red:#BA3A2B;
  --red-tint:#F9ECE9;
  --display:'Titillium Web', 'Titillium Fallback', 'Segoe UI', Tahoma, sans-serif;
  --sans:'Afacad', 'Afacad Fallback', 'Segoe UI', Tahoma, Verdana, sans-serif;
  --gutter:clamp(20px, 4.4vw, 72px);
  --wrap:1360px;
  /* linke Satzkante, von main.js auf den Inhalt von .wrap gesetzt */
  --edge:var(--gutter);
  --header:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Aliase für übernommene Inline-SVGs (Chart) */
  --c-300:#CFCFCB; --surface:#fff; --muted:#7B7C79;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 19px/1.55 var(--sans);font-feature-settings:"lnum" 1;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-text)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--green-bright);outline-offset:3px}
ul,ol{margin:0;padding:0}
p{margin:0 0 1em;max-width:68ch}
address{font-style:normal}
blockquote{margin:0}
button{font:inherit;color:inherit}
strong{font-weight:600}
section,[id]{scroll-margin-top:calc(var(--header) + 12px)}
main{padding-top:var(--header)}
.no-scroll{overflow:hidden}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;padding:12px 20px;font-weight:600}
.skip-link:focus{left:0}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0;overflow-wrap:break-word}
h1{font-size:clamp(2.5rem, 1.75rem + 2.1vw, 3.5rem);line-height:1.08;margin-bottom:24px}
h1 em{font-style:normal;color:var(--green)}
h2{font-size:clamp(2rem, 1.45rem + 1.8vw, 3rem);line-height:1.1;margin-bottom:20px}
h2 .accent{color:var(--green);white-space:nowrap}
h3{font-size:1.375rem;line-height:1.26;font-weight:600;letter-spacing:-.008em;margin-bottom:10px}
h4{font-size:1.0625rem;font-weight:600;letter-spacing:0}
.eyebrow{display:flex;align-items:center;gap:14px;font:600 .9375rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green-text);margin:0 0 20px;max-width:none}
.eyebrow::before{content:"";flex:0 0 34px;height:2px;background:var(--green-bright)}
.eyebrow--light{color:#fff}
/* Zierlinie über Überschriften (ohne Text, Signatur der Reihe) */
.rule{display:block;width:34px;height:2px;background:var(--green-bright);margin:0 0 22px}
.lead{font-size:1.3125rem;line-height:1.5;color:var(--grey);max-width:52ch}
.small{font-size:1rem;color:var(--grey-mid)}
.mt-l{margin-top:clamp(40px, 5vw, 64px)}
.mt-m{margin-top:clamp(24px, 3vw, 40px)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:clamp(56px, 6.4vw, 92px) 0}
.sec--tight{padding:clamp(28px, 3vw, 40px) 0}
.sec--strip{padding:clamp(26px, 3vw, 44px) 0 0}
.sec--stone{background:var(--stone)}
.sec--tint{background:var(--stone-2)}
.sec--dark{background:var(--dark);color:#DADAD6}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark p{color:#CFCFCB}
.sec--dark a{color:#fff}
.sec--dark .rule{background:var(--green-bright)}
.sec__head{margin-bottom:clamp(28px, 3.6vw, 48px)}
.sec__head--split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px clamp(32px, 6vw, 96px);align-items:end}
.sec__head--split h2{margin-bottom:0}
.sec__intro{font-size:1.1875rem;color:var(--grey);margin:0;padding-bottom:6px}
.sec--dark .sec__intro{color:#CFCFCB}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 28px;border:2px solid transparent;border-radius:3px;font:600 18px/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;background:none;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .15s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--solid:hover{background:var(--green);border-color:var(--green);color:#fff}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;border-color:#fff;color:var(--ink)}
.btn--light:hover{background:var(--green-bright);border-color:var(--green-bright);color:var(--ink)}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn--outline-light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.sec--dark a.btn--light,.cta a.btn--light,.voices a.btn--light{color:var(--ink)}
.sec--dark a.btn--outline-light:hover,.cta a.btn--outline-light:hover{color:var(--ink)}
.btn--sm{min-height:46px;padding:10px 20px;font-size:16px}
.btn[disabled]{opacity:.55;cursor:default}
.link-more{display:inline-flex;align-items:center;gap:8px;color:var(--green-text);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.link-more:hover{border-color:currentColor}
.link-more .icon{width:20px;height:20px;stroke-width:1.7;transition:transform .2s var(--ease)}
.link-more:hover .icon{transform:translateX(4px)}

/* Icons: offizielle Lucide-Pfade, Strich 1.2 – grosse Darstellung */
.icon{width:24px;height:24px;flex:0 0 auto;stroke-width:1.2}
.ico{width:64px;height:64px;color:var(--ink)}
.ico--s{width:52px;height:52px}
.ico--xs{width:40px;height:40px}
.icon--fine{stroke-width:1.7}

/* Header */
.hdr{position:fixed;top:0;left:0;right:0;height:var(--header);background:var(--paper);border-bottom:1px solid var(--line);z-index:50;transition:transform .45s var(--ease)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr__in{height:100%;max-width:1520px;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:28px}
.brand{display:block;flex:0 0 auto}
.brand img{height:60px;width:auto}
.nav{margin-left:auto}
.nav ul{display:flex;gap:26px;list-style:none}
.nav a{display:inline-block;padding:10px 0;font:500 18px/1 var(--sans);color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--green-bright)}
.hdr__contacts{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.hdr__contacts a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font:500 16px/1 var(--sans);text-decoration:none;white-space:nowrap}
.hdr__contacts a:hover{color:var(--green-text)}
.hdr__contacts .icon{width:20px;height:20px;stroke-width:1.6}
.hdr__cta{flex:0 0 auto}
.burger{display:none;width:52px;height:52px;padding:13px 12px;border:2px solid var(--ink);background:none;border-radius:3px;flex-direction:column;justify-content:space-between;cursor:pointer;margin-left:auto}
.burger span{display:block;height:2px;background:var(--ink)}

.mobnav{position:fixed;inset:0;z-index:60;background:var(--paper);padding:0 var(--gutter) 40px;overflow:auto;display:flex;flex-direction:column}
.mobnav[hidden]{display:none}
.mobnav__bar{height:var(--header);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:24px;flex:0 0 auto}
.mobnav__bar img{height:52px;width:auto}
.mobnav__close{width:52px;height:52px;border:2px solid var(--ink);background:none;border-radius:3px;display:grid;place-items:center;color:var(--ink);cursor:pointer}
.mobnav ul{list-style:none;margin-bottom:32px}
.mobnav li a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font:700 1.625rem/1.2 var(--display);letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.mobnav li a:hover{color:var(--green-text)}
.mobnav__contacts{display:grid;gap:14px;margin-top:auto}
.mobnav__contacts a{display:inline-flex;align-items:center;gap:12px;color:var(--ink);font:500 1.125rem/1.2 var(--sans);text-decoration:none}
.mobnav__contacts .icon{width:24px;height:24px;stroke-width:1.6}

/* Hero: Split, Foto links, Text rechts */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:min(740px, calc(100svh - var(--header)));background:var(--paper)}
.hero__in{order:2;display:flex;flex-direction:column;padding:clamp(40px, 5vw, 72px) var(--edge) 48px clamp(28px, 4vw, 64px)}
.hero__in h1{margin-bottom:22px;max-width:14ch}
.hero__in .lead{margin-bottom:36px}
.hero__media{order:1;position:relative;margin:0;min-height:100%}
.hero__media::before{content:"";position:absolute;top:0;bottom:0;right:0;width:10px;background:var(--ink);z-index:2}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media figcaption{position:absolute;left:0;bottom:36px;padding:10px 18px;background:rgba(23,24,22,.86);color:#fff;font-size:1rem;z-index:2}
/* Vier Einstiege unter dem Hero-Text (Inhalt der Startseite) */
.usps{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.usp{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;align-items:start;padding:18px 20px 18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--grey);transition:color .2s}
.usp:nth-child(2n){padding-left:20px;border-left:1px solid var(--line)}
.usp .icon{width:40px;height:40px;color:var(--ink);grid-row:span 2;transition:transform .3s var(--ease)}
.usp strong{font:600 1.0625rem/1.25 var(--sans);color:var(--ink)}
.usp span{font-size:1rem;line-height:1.35}
.usp:hover{color:var(--green-text)}
.usp:hover strong{color:var(--green-text)}
.usp:hover .icon{transform:translateY(-3px)}

/* Einblenden beim Scrollen (IntersectionObserver setzt .in) */
.js [data-reveal],.js [data-stagger]>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].in,.js [data-stagger].in>*{opacity:1;transform:none}
.js [data-stagger].in>*:nth-child(2){transition-delay:.1s}
.js [data-stagger].in>*:nth-child(3){transition-delay:.2s}
.js [data-stagger].in>*:nth-child(4){transition-delay:.3s}
.js [data-stagger].in>*:nth-child(5){transition-delay:.4s}
.js [data-stagger].in>*:nth-child(6){transition-delay:.5s}
.js .hl{opacity:0;transform:translateY(18px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js.is-ready .hl{opacity:1;transform:none}
.js.is-ready .hl:nth-child(2){transition-delay:.1s}
.js.is-ready .hl:nth-child(3){transition-delay:.2s}
.js.is-ready .hl:nth-child(4){transition-delay:.3s}

/* Bildband (Vollbreite, leichter Parallax) */
.band{position:relative;margin:0;min-height:460px;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--dark)}
.band__img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
.band__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,24,22,0) 45%,rgba(23,24,22,.72) 100%)}
.band__in{position:relative;width:100%;padding-top:80px;padding-bottom:48px}
.band__quote{font:600 clamp(1.875rem, 1.35rem + 1.8vw, 2.875rem)/1.18 var(--display);max-width:18ch;margin:0 0 20px;color:#fff}
.band__cap{font-size:1rem;color:rgba(255,255,255,.78);margin:0}
.band--plain{min-height:520px}

/* Stimmen: dunkle Platte links, Foto rechts */
/* gleiche Spaltenteilung wie im Hero: die senkrechte Fuge läuft durch, keine Stufe an der Naht */
.voices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:var(--stone);color:var(--text)}
.voices__in{min-width:0;padding:clamp(48px, 5.5vw, 88px) clamp(28px, 4vw, 64px) clamp(48px, 5.5vw, 88px) var(--edge);display:flex;flex-direction:column}
.voices__media{position:relative;margin:0;min-height:400px;overflow:hidden}
.voices__media img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.car{display:flex;flex-direction:column;min-width:0}
.car-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:1rem;color:var(--grey-mid);padding-bottom:16px;border-bottom:1px solid var(--line-2);margin:0 0 26px;max-width:none}
.car-meta strong{color:var(--ink)}
.car-meta a{color:var(--green-text);text-decoration:underline;text-underline-offset:3px}
.car-meta a:hover{color:var(--ink)}
.car-track{display:flex;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;scroll-snap-align:start;padding-right:8px;min-width:0}
.car-slide blockquote{font:600 clamp(1.125rem, .98rem + .5vw, 1.375rem)/1.45 var(--display);letter-spacing:-.005em;color:var(--ink);margin:14px 0 0;max-width:44ch}
.icon-quote{width:34px;height:34px;color:var(--green-bright)}
.stars{display:inline-flex;gap:3px;color:var(--green-bright)}
.stars .star{width:20px;height:20px}
.car-meta .stars .star{width:16px;height:16px}
.quote-cite{margin:18px 0 0;font-size:1rem;color:var(--grey-mid);max-width:none}
.quote-cite strong{font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:-.005em}
.cite-dot{color:var(--grey-soft)}
.car-nav{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:32px}
.car-btn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:2px solid var(--ink);border-radius:3px;background:none;color:var(--ink);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.car-btn:hover{background:var(--ink);color:#fff}
.car-btn .icon{width:22px;height:22px;stroke-width:1.6}
.car-dots{display:flex;gap:7px}
.car-dot{width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background-color .2s,transform .2s}
.car-dot.is-on{background:var(--green);transform:scale(1.25)}

/* Nachweis-Leiste (SÜGB + Mitgliedschaften) */
/* Nachweisleiste: drei gleich breite Felder, Zeichen in einer Spalte fester Breite */
.badges{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.badge{display:grid;grid-template-columns:124px minmax(0,1fr);gap:2px 24px;align-items:center;padding:26px clamp(20px, 2.6vw, 40px);border-left:1px solid var(--line)}
.badge:first-child{padding-left:0;border-left:0}

.badge img{height:54px;width:auto;max-width:124px;object-fit:contain;grid-row:span 2;justify-self:center}
.badge-mark{font:700 2rem/1 var(--display);letter-spacing:.04em;color:var(--green);grid-row:span 2;justify-self:center}
.badge strong{font:600 1.125rem/1.3 var(--sans);color:var(--ink)}
.badge span{font-size:1rem;color:var(--grey-mid)}

/* Merkmal-Raster (Linie oben, kurzer Akzent) */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:36px}
.steps--3{grid-template-columns:repeat(3, minmax(0,1fr));gap:44px 36px}
.step{position:relative;border-top:2px solid var(--line);padding-top:30px}
.step::before{content:"";position:absolute;top:-2px;left:0;width:56px;height:2px;background:var(--green-bright)}
.step__n{display:block;font:600 .9375rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--green-text);margin:22px 0 10px}
.step .ico{margin-bottom:18px}
.step h3{font-size:1.375rem}
.step p{margin:0;font-size:1.125rem}

/* Nummerierte Zeilen (Leistungsliste) */
.rows{list-style:none}
.row{display:grid;grid-template-columns:52px 64px minmax(0,1fr);gap:22px;padding:26px 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row__num{font:600 1.0625rem/1 var(--sans);letter-spacing:.08em;color:var(--grey-soft);padding-top:9px}
.row h3{margin-bottom:4px}
.row__sub{font:500 1rem/1.3 var(--sans);letter-spacing:.02em;color:var(--grey-mid);margin-bottom:12px}
.row p:last-of-type{margin-bottom:0}
.rows--noicon .row{grid-template-columns:52px minmax(0,1fr)}
.sec--dark .row,.sec--dark .row:last-child{border-color:var(--dark-line)}
.sec--dark .step{border-color:var(--dark-line)}
.sec--dark .ico,.sec--dark .clist strong{color:#fff}
.sec--dark .clist li,.sec--dark .clist li:last-child{border-color:var(--dark-line)}
.sec--dark .clist span{color:#CFCFCB}
.sec--stone .clist li,.sec--stone .clist li:last-child,.sec--stone .step,.sec--stone .row,.sec--stone .row:last-child,.sec--stone .badges,.sec--stone .badge{border-color:var(--line-2)}

/* Zweispalter dunkel (Kostenfalle / Unterlagen) */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(40px, 6vw, 96px)}
.duo>div{display:flex;flex-direction:column;align-items:flex-start}
.duo>div+div{border-left:1px solid var(--dark-line);padding-left:clamp(40px, 6vw, 96px);margin-left:calc(clamp(40px, 6vw, 96px) * -1)}
.duo h2{font-size:clamp(1.875rem, 1.4rem + 1.4vw, 2.625rem)}
.duo .btn{margin-top:auto}
.formula{display:flex;align-items:stretch;gap:16px;margin:8px 0 28px}
.formula-box{border:1px solid rgba(255,255,255,.28);padding:18px 24px;display:flex;flex-direction:column;justify-content:center;gap:3px;max-width:240px;font-size:1rem;line-height:1.35;color:#CFCFCB}
.formula-num{font:700 2rem/1.1 var(--display);color:#fff;white-space:nowrap}
.formula-eq{align-self:center;font:600 1.75rem/1 var(--display);color:#fff}
.filetypes{display:flex;gap:30px;flex-wrap:wrap;margin:8px 0 32px}
.filetype{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font:600 .875rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#CFCFCB}
.filetype .icon{width:60px;height:60px;color:#fff}
.filetype .ft-label{position:absolute;top:31px;left:50%;transform:translateX(-50%);font-size:.75rem;font-weight:700;color:#fff}

/* Bildkacheln */
.tiles{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));grid-auto-rows:270px;gap:22px}
.tile{position:relative;min-width:0;overflow:hidden;background:var(--dark);text-decoration:none;color:#fff}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tile:hover img{transform:scale(1.045)}
.tile__cap{position:absolute;min-width:0;overflow-wrap:break-word;left:0;right:0;bottom:0;padding:20px 24px;background:rgba(23,24,22,.86);color:#fff;display:grid;gap:4px}
.tile__cap h2,.tile__cap h3,.tile__cap strong{font:600 1.25rem/1.24 var(--display);letter-spacing:-.008em;color:#fff;margin:0}
.tile__cap p,.tile__cap span{font-size:1.0625rem;line-height:1.4;color:rgba(255,255,255,.84);margin:0}
.tile__cap .link-more{color:#fff;margin-top:6px;font-size:1rem}
.tile--a{grid-column:span 7;grid-row:span 2}
.tile--b{grid-column:span 5}
.tile--c{grid-column:span 5}
.tiles--3{grid-auto-rows:340px}
.tiles--3 .tile{grid-column:span 4}
.tiles--2 .tile{grid-column:span 6}

/* Merkmal-Zeilen mit Icon (3 nebeneinander) */
.clist{list-style:none;margin:0}
.clist li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.clist li:last-child{border-bottom:1px solid var(--line)}
.clist strong{font-family:var(--display);font-weight:600;font-size:1.125rem;letter-spacing:-.005em;display:block;color:var(--ink)}
.clist span{font-size:1.0625rem;line-height:1.4;color:var(--grey)}
.clist a{color:var(--green-text);text-decoration:none;border-bottom:1px solid var(--green-line)}
.clist a:hover{color:var(--green-bright)}
.clist--row{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:0 36px}
.clist--row li{border-bottom:1px solid var(--line)}

/* Gegenüberstellung als Tabelle */
.compare-lead{font-size:1.1875rem;color:var(--grey);max-width:66ch;margin-bottom:clamp(28px, 3.4vw, 44px)}
.compare{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}
.compare-col+.compare-col{border-left:1px solid var(--line)}
.compare-head{padding:18px 24px;font:600 1.1875rem/1.24 var(--display);letter-spacing:-.005em;color:var(--ink);border-bottom:1px solid var(--line)}
.compare-col--good .compare-head{color:var(--green-text)}
.compare-col--bad .compare-head{color:var(--red)}
.compare-row{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--line);font-size:1.0625rem}
.compare-row .icon{width:28px;height:28px}
.compare-col--good .compare-row .icon{color:var(--green)}
.compare-col--bad .compare-row .icon{color:var(--red)}
.compare-col--good .compare-row--final{background:var(--stone-2);color:var(--green-text);font-weight:600}
.compare-col--bad .compare-row--final{background:var(--red-tint);color:var(--red);font-weight:600}

/* Kostenkurve */
.chart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px clamp(28px, 3.6vw, 64px);align-items:center}
.chart-figure{margin:0;max-width:min(100%, 620px);justify-self:end}
.chart h3{font-size:clamp(1.625rem, 1.3rem + 1vw, 2.125rem);font-weight:400;margin-bottom:12px}
.chart-note{font-size:1.125rem;color:var(--grey);margin:0}
.chart-figure{margin:0;width:100%;max-width:780px;justify-self:end;overflow-x:auto}
.chart-note{padding-bottom:4px}
.chart-figure svg{width:100%;height:auto;display:block}
.chart-g{stroke-dasharray:300;stroke-dashoffset:300}
.chart-r{stroke-dasharray:400;stroke-dashoffset:400}
.in .chart-g{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease .1s}
.in .chart-r{stroke-dashoffset:0;transition:stroke-dashoffset 1s ease .85s}

/* Handlungsaufruf als Zeile */
/* Aufruf-Band: heller Betonton mit kräftiger Oberkante – so trennt es sich klar vom dunklen Fuss */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(32px, 5vw, 72px);align-items:center;
  padding:clamp(40px, 4.6vw, 60px) var(--edge);background:var(--stone-2);color:var(--text);
  border-top:2px solid var(--ink);
  margin-top:clamp(48px, 5vw, 72px);margin-left:calc(-1 * var(--edge));margin-right:calc(-1 * var(--edge))}
.cta h3{font:700 clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem)/1.16 var(--display);letter-spacing:-.015em;color:#fff;margin-bottom:8px}
.cta p{margin:0;color:var(--grey)}
.cta strong{color:var(--ink)}

/* Vertrauensleiste */
.trust{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 48px;align-items:center;padding-block:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:56px}
.trust .clist li{border:0;padding:0}
.trust__badges{display:flex;justify-content:flex-end;gap:36px;flex-wrap:wrap}
.trust__badge{display:grid;grid-template-rows:44px auto;align-items:end;gap:6px;justify-items:start;font-size:.9375rem;color:var(--grey-mid)}
.trust__badge img{height:44px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.trust__badge .badge-mark{font-size:1.75rem;grid-row:auto;align-self:end}

/* Experten-Check: Beweisbild + Nutzen nebeneinander */
.proof{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px, 5vw, 72px);align-items:start;margin-top:clamp(32px, 4vw, 56px)}
.proof__media{margin:0;background:var(--stone);border-top:2px solid var(--ink);padding-top:clamp(20px, 2.4vw, 34px)}
.proof__media img{width:100%;height:auto;mix-blend-mode:multiply}
.proof__list{display:flex;flex-direction:column;justify-content:center}
.proof__list li{grid-template-columns:56px minmax(0,1fr);gap:4px 20px;align-items:center;padding:clamp(20px, 2.4vw, 30px) 0;border-color:var(--line-2)}
.proof__list li:first-child{border-top:2px solid var(--ink)}
.proof__list li:last-child{border-bottom-color:var(--line-2)}
.proof__list .ico--s{width:56px;height:56px}
.proof__list strong{font-size:1.25rem;line-height:1.25}
.proof__list span{margin-top:2px}

/* Abschluss-Band: Aufruf, darunter die Leistungen – ohne Trennlinien */
.close{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(32px, 5vw, 72px);align-items:end}
.close h3{font:700 clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem)/1.14 var(--display);letter-spacing:-.015em;margin-bottom:12px}
.close p{margin:0;font-size:1.1875rem;color:var(--grey)}
.close__list{list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(28px, 3.4vw, 52px);margin-top:clamp(36px, 4.4vw, 60px)}
.close__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.close__list span{font-size:1.0625rem;line-height:1.45;color:var(--grey)}
.trust--plain{border:0;margin-top:0;padding-block:0;align-items:center;background:none}
.trust--plain .clist strong{font-size:1.25rem}

/* Unterseiten: Kopf */
.page-hero{padding:clamp(48px, 6vw, 88px) 0 clamp(36px, 4vw, 56px);border-bottom:1px solid var(--line)}
.page-hero h1{max-width:18ch;hyphens:auto;overflow-wrap:break-word}
.page-hero h1:last-child{margin-bottom:0}
.page-hero .lead{margin:0}
.page-hero--split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px clamp(32px, 6vw, 96px);align-items:end}
.page-hero--split h1{margin-bottom:0}
.page-hero--media{padding-bottom:0;border-bottom:0}
.page-hero__media{margin:clamp(32px, 4vw, 56px) 0 0;height:min(520px, 52vw);overflow:hidden;background:var(--stone)}
.page-hero__media img{width:100%;height:100%;object-fit:cover}

/* Text + Bild */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px, 6vw, 96px);align-items:center}
.about--rev .about__media{order:2}
.about__media{margin:0;position:relative}
.about__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about__media figcaption{padding:10px 0 0;font-size:1rem;color:var(--grey-mid)}
.about__text .btn{margin-top:12px}

/* Video-Auslöser */
.video-open{position:relative;display:block;cursor:pointer;overflow:hidden;background:var(--dark)}
.video-open img{transition:transform .9s var(--ease)}
.video-open:hover img{transform:scale(1.04)}
.play-badge{position:absolute;inset:0;margin:auto;width:76px;height:76px;color:#fff;background:rgba(23,24,22,.7);border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.play-badge .icon{width:32px;height:32px;stroke-width:1.6;margin-left:4px}
.video-open:hover .play-badge{background:var(--green)}

/* Modal (Video / Bild) */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-backdrop{position:absolute;inset:0;background:rgba(23,24,22,.82)}
.modal-dialog{position:relative;width:min(960px,100%)}
.modal-frame{aspect-ratio:16/9;background:#000;overflow:hidden}
.modal-frame iframe{width:100%;height:100%;border:0;display:block}
.modal-close{position:absolute;top:-52px;right:0;display:inline-flex;padding:8px;color:#fff;background:none;border:0;cursor:pointer}
.modal-close .icon{width:28px;height:28px;stroke-width:1.6}
.modal-close:hover{color:var(--green-bright)}
.modal--image .modal-dialog{width:auto;max-width:min(900px,100%)}
.modal-image{max-width:100%;max-height:calc(100vh - 100px);width:auto;height:auto;background:#fff;object-fit:contain}
.cert-zoom{position:relative;display:block;width:100%;padding:0;border:0;cursor:zoom-in;background:var(--stone-2)}
.cert-zoom img{width:100%;height:100%;object-fit:cover}
.cert-zoom-hint{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(23,24,22,.7);transition:background-color .2s}
.cert-zoom-hint svg{width:22px;height:22px}
.cert-zoom:hover .cert-zoom-hint,.cert-zoom:focus-visible .cert-zoom-hint{background:var(--green)}

/* Formular */
.form{background:var(--stone);padding:clamp(24px, 4vw, 48px);border-top:6px solid var(--ink)}
.form__grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:22px 24px}
.field--full{grid-column:1 / -1}
.field label{display:block;font:600 1rem/1.25 var(--sans);color:var(--grey);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--line-2);border-radius:3px;background:#fff;color:var(--ink);font:400 18px/1.4 var(--sans)}
.field textarea{resize:vertical;min-height:150px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:3px solid var(--green-bright);outline-offset:0}
.field.is-error input,.field.is-error select,.field.is-error textarea{border-color:var(--red)}
.field__err{margin:8px 0 0;font-size:1rem;color:var(--red)}
.field--check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px 14px;align-items:start}
.field--check input{width:24px;height:24px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--green)}
.field--check label{margin:0;font-weight:400;font-size:1.0625rem;color:var(--grey);line-height:1.4}
.field--check .field__err{grid-column:1 / -1}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.form__note{margin:0;font-size:1rem;color:var(--grey-mid)}
.form__ok{margin:20px 0 0;padding:16px 20px;background:var(--stone-2);border-left:4px solid var(--green);color:var(--green-text);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.map{position:relative;width:100%;height:460px;background:var(--stone)}
.map iframe{display:block;width:100%;height:100%;border:0}
.map img{width:100%;height:100%;object-fit:cover}

/* Fliesstext-Seiten (Impressum, Datenschutz) */
.prose{max-width:74ch}
.prose h2{font-size:1.75rem;margin:40px 0 12px}
.prose h2:first-of-type{margin-top:0}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:6px}

/* Footer */
/* Der Sockel liegt eine Stufe heller als die dunklen Bänder – sonst verschmelzen
   Karriere-Band bzw. Zitat-Band mit dem Fuss zu einer schwarzen Masse. */
.ft{background:var(--dark-2);border-top:1px solid rgba(255,255,255,.12);color:#CFCFCB;padding:60px 0 28px;font-size:1.0625rem}
.ft__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--dark-line)}
.ft__brand img{height:92px;width:auto;margin-bottom:22px}
.ft__name{font:600 1.25rem/1.3 var(--display);letter-spacing:-.008em;color:#fff;margin:0 0 10px}
.ft__brand p{margin:0;max-width:none}
.ft__brand a{white-space:nowrap}
.ft ul{list-style:none}
.ft li{margin-bottom:8px}
.ft a{color:#CFCFCB;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.ft a:hover{color:#fff;border-color:var(--green-bright)}
.ft__social{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin:0}
.ft__social a{display:inline-flex;padding:12px;border:1px solid var(--dark-line);border-radius:3px;color:#CFCFCB}
.ft__social a:hover{color:#fff;border-color:#fff}
.ft__social svg{width:20px;height:20px}
.ft__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;padding-top:24px;font-size:1rem}
.ft__bottom p{margin:0;max-width:none}
.ft__bottom a{color:#fff}
.pay{display:flex;align-items:center;gap:16px}
.pay-label{font-size:.8125rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey-soft)}
.pay-item{display:inline-flex;align-items:center;gap:7px}
.pay-item .icon{width:20px;height:20px;stroke-width:1.6}
.pay-visa{color:#fff}
.pay-visa svg{height:15px;width:auto}
.pay-mc svg{height:22px;width:auto}

/* Breakpoints */
@media (max-width:1400px){.hdr__contacts .hdr__mail{display:none}}
@media (max-width:1240px){.hdr__contacts .hdr__tel{display:none}}
@media (max-width:1180px){
  .hero,.voices{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nav ul{gap:20px}
  .brand img{height:54px}
  .tiles{grid-auto-rows:240px}
}
@media (max-width:1024px){
  .nav,.hdr__cta,.hdr__contacts{display:none}
  .burger{display:flex}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .steps--3{grid-template-columns:repeat(2, minmax(0,1fr))}
  .row{grid-template-columns:52px 52px minmax(0,1fr);gap:18px}
  .voices__media{min-height:360px}
  .voices__media img{position:static;height:360px}
  .duo{grid-template-columns:1fr;gap:56px}
  .duo>div+div{border-left:0;padding-left:0;margin-left:0;border-top:1px solid var(--dark-line);padding-top:56px}
  .tiles{grid-auto-rows:auto}
  .tile{aspect-ratio:16/10}
  .tile--a{grid-column:span 12;grid-row:span 1;min-height:0;aspect-ratio:2/1}
  .tile--b,.tile--c{grid-column:span 6}
  .tiles--3 .tile{grid-column:span 6}
  .chart{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .about--rev .about__media{order:0}
  .trust{grid-template-columns:1fr}
  .trust__badges{justify-content:flex-start}
  .proof{grid-template-columns:1fr;gap:32px}
  .close{grid-template-columns:1fr;align-items:start}
  .close__list{grid-template-columns:1fr;gap:24px}
  .page-hero--split{grid-template-columns:minmax(0,1fr)}
  .ft__grid{grid-template-columns:1fr}
  .ft__social{justify-content:flex-start}
}
@media (max-width:900px){
  :root{--header:72px}
  .hero{display:block;min-height:0}
  .voices{grid-template-columns:minmax(0,1fr)}
  .hero__in{padding:32px var(--gutter) 28px}
  .hero__in h1{max-width:none}
  .hero__in .lead{font-size:1.1875rem;margin-bottom:26px}
  .hero__media{height:240px;min-height:0}
  .hero__media::before{width:100%;height:8px;top:auto;bottom:0}
  .hero__media figcaption{display:none}
  .usps{margin-top:0}
  .brand img{height:48px}
  .sec__head--split{grid-template-columns:1fr;align-items:start}
  .clist--row{grid-template-columns:1fr;gap:0}
  .clist--row li{border-bottom:0}
  .clist--row li:last-child{border-bottom:1px solid var(--line)}
  .badges{gap:24px 32px}
  .compare{grid-template-columns:1fr}
  .compare-col+.compare-col{border-left:0;border-top:2px solid var(--ink);margin-top:24px}
  .cta{grid-template-columns:1fr}
  .tiles--3 .tile,.tile--b,.tile--c{grid-column:span 12}
}
@media (max-width:640px){
  body{font-size:18px}
  .hide-m{display:none}
  .steps,.steps--3{grid-template-columns:1fr;gap:28px}
  .form__grid{grid-template-columns:1fr}
  .field--full{grid-column:auto}
  .ft__grid{grid-template-columns:1fr;gap:32px}
  .band{min-height:360px}
  .band--plain{min-height:300px}
  .voices__in{padding:44px var(--gutter)}
  .car-slide blockquote{max-width:none}
  .clist li{grid-template-columns:44px minmax(0,1fr)}
  .ico--s{width:44px;height:44px}
  .ico{width:52px;height:52px}
  /* Hero passt in einen Viewport (QA: hero <= 100vh), wie in v2: Kurzbeschreibungen der vier Einstiege ausblenden */
  .hero__in{padding-top:24px;padding-bottom:20px}
  .hero__in h1{font-size:clamp(2.25rem, 9vw, 2.75rem);margin-bottom:14px}
  .hero__in .lead{font-size:1.125rem;margin-bottom:18px}
  .usps{grid-template-columns:1fr 1fr}
  .usp{grid-template-columns:32px minmax(0,1fr);gap:0 12px;padding:12px 10px 12px 0;align-items:center}
  .usp:nth-child(2n){padding-left:12px}
  .usp .icon{width:32px;height:32px;grid-row:auto}
  .usp strong{font-size:.9375rem}
  .usp span{display:none}
  .hero__media{height:200px}
  .row{grid-template-columns:44px minmax(0,1fr)}
  .row__num{display:none}
  .formula{flex-direction:column;align-items:flex-start}
  .formula-eq{align-self:flex-start}
  .map{height:360px}
  /* eigene Zeilenhöhe je Kachel statt fester Rasterzeile – sonst überlappt die hohe Kachel */
  .tiles{grid-auto-rows:auto;column-gap:8px}
  .tile{aspect-ratio:4/3}
  .tile--a{min-height:0;aspect-ratio:4/3}
  .trust__badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end}
  .trust__badge img{height:32px}
  .trust__badge{grid-template-rows:38px auto}
  .trust__badge .badge-mark{font-size:1.25rem}
  .trust__badge{font-size:.8125rem}
  /* Diagramm passt sich der Breite an; die Beschriftung wächst im viewBox mit, damit sie lesbar bleibt */
  .chart-figure{overflow:visible}
  .chart-figure svg{min-width:0}
  .chart-figure svg text{font-size:21px}
  .chart-figure svg text[font-weight="700"]{font-size:25px}
  /* rechte Beschriftung nach innen rücken, sonst läuft sie aus dem Bild */
  .chart-figure svg text[x="540"]{transform:translateX(-52px)}
  .proof__media{padding-top:18px}
}
@media (prefers-reduced-motion:reduce){
  .js .hl,.js [data-reveal],.js [data-stagger]>*{opacity:1;transform:none;transition:none}
  .tile img,.hdr,.video-open img{transition:none}
  .chart-g,.chart-r{stroke-dasharray:none;stroke-dashoffset:0}
}


@media (max-width:360px){.pay{flex-wrap:wrap;gap:8px 12px}.ft__bottom{gap:12px}}

/* ============ Bewegung: nativer Scroll, nur transform/opacity/clip-path ============ */

/* Lesefortschritt */
.prog{position:fixed;top:0;left:0;right:0;height:3px;background:var(--green-bright);transform:scaleX(0);transform-origin:0 50%;z-index:55;pointer-events:none}

/* Titelzeilen laufen hinter einer Maske ein */
h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.js h1 .ln>span{display:block;transform:translateY(108%);transition:transform .9s var(--ease)}
.js.is-ready h1 .ln>span{transform:none}
.js.is-ready h1 .ln:nth-child(2)>span{transition-delay:.11s}
.js.is-ready h1 .ln:nth-child(3)>span{transition-delay:.22s}

/* Grosse Bilder werden aufgezogen statt eingeblendet.
   Wichtig: die Maske sitzt auf dem Bild, nicht auf dem beobachteten Kasten –
   ein zugeschnittener Kasten hat für den IntersectionObserver keine Fläche mehr. */
.js .hero__media img,.js .proof__media img,.js .voices__media img,.js .about__media img,
.js .page-hero__media img,.js .band__img,.js .tile img{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease)}
.js .hero__media.in img,.js .proof__media.in img,.js .voices__media.in img,.js .about__media.in img,
.js .page-hero__media.in img,.js .band.in .band__img,.js .tile.in img{clip-path:inset(0 0 0 0)}
.js .tile img{transition:clip-path .9s var(--ease),transform .9s var(--ease)}
.js [data-stagger].in .tile:nth-child(2){transition-delay:.12s}
.js [data-stagger].in .tile:nth-child(3){transition-delay:.24s}

/* Knöpfe: die Fläche fährt von links ein */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:0 50%;transition:transform .38s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn--solid::before{background:var(--green)}
.btn--solid:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ghost::before{background:var(--ink)}
.btn--light::before{background:var(--green-bright)}
.btn--light:hover{background:#fff;border-color:#fff}
.btn--outline-light::before{background:#fff}

/* Navigation: Unterstrich wächst aus der Mitte der Bewegung */
.nav a{border-bottom:0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green-bright);transform:scaleX(0);transform-origin:100% 50%;transition:transform .3s var(--ease)}
.nav a{position:relative}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}

/* Vergleichstabelle: Zeilen laufen nach, Zeile unter dem Zeiger hebt sich */
.js .compare.in .compare-row{animation:rowIn .55s var(--ease) both}
.js .compare.in .compare-col--good .compare-row:nth-child(2){animation-delay:.06s}
.js .compare.in .compare-col--good .compare-row:nth-child(3){animation-delay:.12s}
.js .compare.in .compare-col--good .compare-row:nth-child(4){animation-delay:.18s}
.js .compare.in .compare-col--good .compare-row:nth-child(5){animation-delay:.24s}
.js .compare.in .compare-col--bad .compare-row:nth-child(2){animation-delay:.1s}
.js .compare.in .compare-col--bad .compare-row:nth-child(3){animation-delay:.16s}
.js .compare.in .compare-col--bad .compare-row:nth-child(4){animation-delay:.22s}
.js .compare.in .compare-col--bad .compare-row:nth-child(5){animation-delay:.28s}
@keyframes rowIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.compare-row{transition:background-color .25s var(--ease)}
.compare-col--good .compare-row:hover{background:var(--stone)}
.compare-col--bad .compare-row:hover{background:var(--red-tint)}

/* Zeilen und Kacheln reagieren auf den Zeiger */
.row,.clist li,.step{transition:transform .3s var(--ease)}
.row:hover,.clist li:hover{transform:translateX(4px)}
.step:hover .ico,.proof__list li:hover .ico{transform:translateY(-4px)}
.ico{transition:transform .3s var(--ease)}
.tile__cap{transition:transform .4s var(--ease)}
.tile:hover .tile__cap{transform:translateY(-4px)}

/* Mobiles Menü: Platte fällt, Punkte laufen nach */
.mobnav{transform:translateY(-14px);opacity:0;transition:transform .4s var(--ease),opacity .3s var(--ease)}
.mobnav.is-open{transform:none;opacity:1}
.mobnav li{transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.mobnav.is-open li{transform:none;opacity:1}
.mobnav.is-open li:nth-child(2){transition-delay:.05s}
.mobnav.is-open li:nth-child(3){transition-delay:.1s}
.mobnav.is-open li:nth-child(4){transition-delay:.15s}
.mobnav.is-open li:nth-child(5){transition-delay:.2s}
.mobnav.is-open li:nth-child(6){transition-delay:.25s}

@media (prefers-reduced-motion:reduce){
  .prog{display:none}
  .js h1 .ln>span{transform:none;transition:none}
  .js .hero__media,.js .proof__media,.js .voices__media,.js .about__media,
  .js .page-hero__media,.js .band,.js .tile{clip-path:none;transition:none}
  .js .compare.in .compare-row{animation:none}
  .btn::before,.nav a::after{transition:none}
  .row:hover,.clist li:hover,.tile:hover .tile__cap{transform:none}
  .mobnav,.mobnav li{transform:none;opacity:1;transition:none}
}

@media (max-width:900px){
  .badges{grid-template-columns:1fr}
  .badge{grid-template-columns:88px minmax(0,1fr);gap:2px 18px;border-left:0;border-top:1px solid var(--line);padding:20px 0}
  .badge:first-child{border-top:0}
  .badge img{height:44px;max-width:88px}
  .badge-mark{font-size:1.625rem}
}

/* Endet eine Sektion mit dem randlosen Aufruf-Band, entfällt der Rest-Abstand darunter –
   sonst bleibt ein heller Streifen zwischen zwei dunklen Flächen. */
.sec:has(> .wrap > .cta:last-child),.sec:has(> .cta:last-child),
.sec:has(> .wrap > .cta:last-of-type:last-child){padding-bottom:0}
/* Steht in einer Sektion nur das Aufruf-Band, schliesst es bündig an die Nachbarflächen an –
   sonst entstehen schmale helle Streifen zwischen zwei Flächen. */
.sec:has(> .wrap > .cta:only-child),.teaser:has(> .wrap > .cta:only-child){padding:0}
.sec:has(> .wrap > .cta:only-child) > .wrap > .cta,
.teaser:has(> .wrap > .cta:only-child) > .wrap > .cta{margin-top:0}
.sec:has(> .wrap > .cta:last-child) + .sec--dark,
.sec--dark + .sec--dark{border-top:1px solid rgba(255,255,255,.22)}

/* Vergleich: beide Spalten teilen sich dieselben Zeilen, Paare stehen auf einer Linie */
@media (min-width:901px){
  @supports (grid-template-rows: subgrid){
    .compare{grid-template-rows:repeat(9, auto)}
    .compare-col{display:grid;grid-template-rows:subgrid;grid-row:1 / -1}
  }
}

@media (max-width:900px){
  /* Fingerfreundliche Trefferfläche für die Textlinks mit Pfeil */
  .link-more{padding:9px 0}
  .clist a,.ft a,.prose a{padding:2px 0}
}

/* Knöpfe im hellen Aufruf-Band: dunkel statt weiss */
.cta a.btn--light,.cta .btn--light{background:var(--ink);border-color:var(--ink);color:#fff}
.cta .btn--light::before{background:var(--green)}
.cta a.btn--light:hover,.cta .btn--light:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.cta .btn--outline-light{border-color:var(--ink);color:var(--ink)}
.cta .btn--outline-light::before{background:var(--ink)}
.cta .btn--outline-light:hover{color:#fff}
.cta a:not(.btn){color:var(--green-text)}
.cta .ico,.cta .icon{color:var(--ink)}
/* Der Fuss beginnt mit der Hausfarbe – eine klare Kante statt einer verschmelzenden Fläche */
.ft{border-top:3px solid var(--green-bright)}
.sec--dark + .ft,.voices + .ft{border-top:3px solid var(--green-bright)}

.cta h2,.cta h3{color:var(--ink)}
.cta .btn--light span,.cta .btn--light{color:#fff}

/* Abschluss der Startseite im selben Muster wie die Aufruf-Bänder der Unterseiten */
.sec--call{border-top:2px solid var(--ink)}

.sec--call .close h3{color:var(--ink)}
.sec--call .close p{color:var(--grey)}
.sec--call .close strong{color:var(--ink)}
.sec--call .clist li{border-color:var(--line-2)}
.sec--call .btn--light{background:var(--ink);border-color:var(--ink);color:#fff}
.sec--call .btn--light::before{background:var(--green)}


/* ===== assets/css/loesungen.css (скоуп: main[data-page="loesungen"]) ===== */
/* Stüssi v9 „Editorial“ – Seitenstile für loesungen.html.
   Ergänzt style.css (Design-System bleibt unangetastet): nur Komponenten dieser Seite,
   ausschliesslich mit Farben/Schriften der Systemvariablen. */

/* Kopf: Titel links, Einleitung rechts, unten bündig */
.page-hero--split h1{margin-bottom:0}
main[data-page="loesungen"] .page-hero--split .lead,main[data-page="loesung-treppen"] .page-hero--split .lead,main[data-page="loesung-fassaden"] .page-hero--split .lead,main[data-page="loesung-waende"] .page-hero--split .lead,main[data-page="loesung-dachelemente"] .page-hero--split .lead,main[data-page="loesung-bruestungen"] .page-hero--split .lead,main[data-page="loesung-stuetzen-traeger"] .page-hero--split .lead,main[data-page="loesung-liftschaechte"] .page-hero--split .lead,main[data-page="loesung-raumzellen"] .page-hero--split .lead,main[data-page="loesung-industriebauten"] .page-hero--split .lead,main[data-page="loesung-gestaltung"] .page-hero--split .lead{padding-bottom:8px}

/* Produkte: nummerierte Zeilen (Zähler per CSS), Foto und Text wechseln die Seite */
.prod{list-style:none;counter-reset:prod}
.prod__item{counter-increment:prod;display:grid;grid-template-columns:52px minmax(0,6fr) minmax(0,5fr);gap:0 clamp(24px, 3.4vw, 56px);align-items:center;padding:clamp(28px, 3.6vw, 48px) 0;border-top:1px solid var(--line)}
.prod__item::before{content:counter(prod, decimal-leading-zero);align-self:start;padding-top:6px;font:600 1.0625rem/1 var(--sans);letter-spacing:.08em;color:var(--grey-soft)}
.prod__item--rev{grid-template-columns:52px minmax(0,5fr) minmax(0,6fr)}
.prod__item--rev .prod__body{grid-column:2;grid-row:1}
.prod__item--rev .prod__media{grid-column:3;grid-row:1}
.prod__media{margin:0;background:var(--stone);overflow:hidden}
.prod__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.prod__body h3{font-size:clamp(1.625rem, 1.25rem + 1.1vw, 2.25rem);font-weight:400;line-height:1.12;margin-bottom:14px}
.prod__body p{font-size:1.125rem;color:var(--grey);max-width:52ch}
.prod__body .small{margin-top:-8px}
.prod__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:4px}
.link-more--file .icon{width:22px;height:22px;stroke-width:1.5}
.link-more--file:hover .icon{transform:none}

/* «Was wir nicht anbieten»: Hinweis links, Liste auf Linien rechts */
.not{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px, 5vw, 72px);margin-top:clamp(40px, 5vw, 64px);padding-top:clamp(24px, 3vw, 36px);border-top:2px solid var(--ink)}
.not h3{font-size:1.75rem;font-weight:400;line-height:1.15;margin-bottom:8px}
.not p{margin:0;color:var(--grey)}
.not__list{list-style:none}
.not__list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--line);font-size:1.125rem;line-height:1.45;color:var(--grey)}
.not__list li:first-child{border-top:0;padding-top:4px}
.not__list .icon{color:var(--grey-mid);margin-top:2px}

/* Unterlagen: Gruppe links, Dateien als Liste auf Linien rechts */
.dls{border-top:2px solid var(--ink)}
.dlg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px clamp(32px, 5vw, 72px);padding:clamp(24px, 3vw, 40px) 0;border-bottom:1px solid var(--line-2)}
.dlg h3{font-size:1.5rem;font-weight:400;line-height:1.2;margin:0;padding-top:12px}
.dl{list-style:none}
.dl__item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:13px 0;border-top:1px solid var(--line-2);color:var(--ink);font-weight:500;text-decoration:none;transition:color .2s}
.dl li:first-child .dl__item{border-top:0;padding-top:6px}
.dl__item:hover{color:var(--green-text)}
.dl__item .icon{color:var(--grey-mid);transition:color .2s}
.dl__item:hover .icon{color:var(--green)}
.dl__name{flex:1 1 0;min-width:0}
.dl__meta{margin-left:auto;font-size:1rem;font-weight:400;color:var(--grey-mid);white-space:nowrap}

/* Vorteile: Fliesstext im Raster etwas ruhiger */
#vorteile .step p{color:var(--grey)}

/* Experten-Check: dunkle Zeile innerhalb der Sektion (ohne Aussenabstand) */
.cta--page{margin-top:0}
main[data-page="loesungen"] .cta h2,main[data-page="loesung-treppen"] .cta h2,main[data-page="loesung-fassaden"] .cta h2,main[data-page="loesung-waende"] .cta h2,main[data-page="loesung-dachelemente"] .cta h2,main[data-page="loesung-bruestungen"] .cta h2,main[data-page="loesung-stuetzen-traeger"] .cta h2,main[data-page="loesung-liftschaechte"] .cta h2,main[data-page="loesung-raumzellen"] .cta h2,main[data-page="loesung-industriebauten"] .cta h2,main[data-page="loesung-gestaltung"] .cta h2{font:400 clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem)/1.12 var(--display);color:var(--ink);margin-bottom:10px}
.cta h2 .accent{color:var(--green-bright)}
.nb{white-space:nowrap}

/* Zitat: dunkle Platte, kursive Serife, Haarlinie zum Footer */
.quote-sec{border-bottom:1px solid var(--dark-line)}
.quote blockquote{font:600 clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem)/1.32 var(--display);color:var(--ink);max-width:26ch;margin:0}
main[data-page="loesungen"] .quote .quote-cite{margin-top:26px;font-size:1.0625rem}

/* Breakpoints */
@media (max-width:1024px){
  .prod__item,.prod__item--rev{grid-template-columns:52px minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .prod__item,.prod__item--rev{grid-template-columns:minmax(0,1fr);gap:16px 0;align-items:start}
  .prod__item::before{padding-top:0}
  .prod__item--rev .prod__media,.prod__item--rev .prod__body{grid-column:1;grid-row:auto}
  .prod__body h3{margin-top:6px}
  .not{grid-template-columns:1fr}
  .dlg{grid-template-columns:1fr;gap:4px}
  .dlg h3{padding-top:0}
}
@media (max-width:640px){
  .dl__meta{flex-basis:100%;margin-left:0;padding-left:40px}
}

/* Zitat steht jetzt auf Stein statt auf dunklem Grund */
.sec--stone .quote-cite{color:var(--grey)}
.sec--stone .quote-cite strong{color:var(--ink)}
.sec--stone .icon-quote{color:var(--green)}


/* ===== assets/css/kompetenz.css (скоуп: main[data-page="kompetenz"]) ===== */
/* Stüssi v9 – kompetenz.html (Ergänzungen zu style.css) */

/* Video-Auslöser als Button, Play-Marke = Lucide circle-play */
.video-open{width:100%;padding:0;border:0;display:block}
main[data-page="kompetenz"] .play-badge{width:64px;height:64px;background:rgba(23,24,22,.62);border:0;border-radius:50%;transition:background-color .2s}
.play-badge .icon{width:64px;height:64px;margin:0;stroke-width:1}
.play-badge .icon circle{fill:none;stroke:#fff}
.play-badge .icon path{fill:#fff;stroke:#fff}
.video-open:hover .play-badge{background:var(--green)}


/* Partner-Intro: Text breiter als das Filmbild */
.intro.about{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.about__text .eyebrow{margin-bottom:22px}

/* Die dritte Generation: zwei Spalten an einer Linie */
.team{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(40px, 6vw, 96px);border-top:1px solid var(--line-2)}
.team__col{display:flex;flex-direction:column;align-items:flex-start;padding-top:36px;min-width:0}
.team__col+.team__col{border-left:1px solid var(--line-2);padding-left:clamp(40px, 6vw, 96px);margin-left:calc(clamp(40px, 6vw, 96px) * -1)}
.team__photo{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 22%;margin-bottom:30px}
.team__role{font:600 .9375rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--green-text);margin-bottom:14px}
.team h3{font-size:clamp(1.75rem, 1.4rem + 1vw, 2.25rem);font-weight:400;margin-bottom:4px}
.team__sub{font-size:1.0625rem;color:var(--grey-mid);margin-bottom:20px}
.team__col p{margin-bottom:28px}
.team__quote{margin-top:auto;padding-top:22px;border-top:1px solid var(--line-2);width:100%;font:600 1.1875rem/1.45 var(--display);color:var(--ink)}

/* Nachweise: Risiko-Text links, Schutzliste rechts */
.risk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px clamp(40px, 6vw, 96px);align-items:start}
.risk h3{font-size:clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);font-weight:400;line-height:1.15;margin-bottom:18px}
.risk__text p{color:var(--grey)}
.risk__sub{font:400 1.375rem/1.3 var(--display);color:var(--ink);margin:0 0 6px}
.risk__fazit{margin:28px 0 0;padding-left:22px;border-left:2px solid var(--green-bright);font-size:1.1875rem;color:var(--ink)}

/* Vergleichstabelle: Gruppen mit Zwischentitel */
main[data-page="kompetenz"] .compare-head{display:flex;align-items:center;gap:12px;margin:0}
main[data-page="kompetenz"] .compare-head .icon{width:28px;height:28px}
.nw-group h4{margin:0;padding:18px 24px 8px;font:700 1.125rem/1.25 var(--display);color:var(--ink)}
.nw-group ul{list-style:none}
.nw-group li{position:relative;padding:9px 24px 9px 46px;border-bottom:1px solid var(--line);font-size:1.0625rem;line-height:1.4}
.nw-group li::before{content:"";position:absolute;left:24px;top:1.05em;width:10px;height:1px;background:var(--grey-soft)}
.compare-col--good .nw-group li::before{background:var(--green-bright)}
.compare-col--bad .nw-group li::before{background:var(--red)}

/* Zertifikate an Linien */
.certs{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:0 36px;border-top:1px solid var(--line)}
.cert{margin:0;padding-top:30px;min-width:0}
.cert+.cert{border-left:1px solid var(--line);padding-left:36px;margin-left:-36px}
.cert-zoom{aspect-ratio:600/849}
.cert__cap{margin:14px 0 0;font:600 1rem/1.3 var(--sans);color:var(--ink)}

/* Umwelt: Foto links, Text rechts (Text zuerst im DOM) */
.umwelt.about .about__text{order:2}
.umwelt .clist{margin:28px 0}
.sec--stone .clist li{border-color:var(--line-2)}
.dl-link{display:inline-flex;align-items:center;gap:10px;color:var(--green-text);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.dl-link:hover{border-color:currentColor}

/* Mitgliedschaften: Logos im Raster */
/* Logos als Karussell ohne Rahmen (.car-Runtime der Kundenstimmen):
   Desktop vier, Handy zwei Logos je Seite, die Pfeile blaettern seitenweise. */
.members{list-style:none;margin:0;padding:0}
.members li{flex:0 0 25%;scroll-snap-align:start;min-width:0;display:flex;align-items:center;justify-content:center;height:130px;padding:0 28px}
.members img{width:auto;height:auto;max-height:72px;max-width:100%;object-fit:contain}
.members-car .car-nav{padding-top:20px}
.members__hev{margin:24px 0 0;font-size:1.0625rem;color:var(--grey-mid)}
.members__hev strong{color:var(--ink)}

/* Karriere: dunkle Platte */
.karriere{border-bottom:1px solid var(--dark-line)}
.karriere .step{border-top-color:var(--dark-line)}
.karriere .ico{color:#fff}
.karriere__sub{font:400 1.375rem/1.3 var(--display);color:#fff;margin:0 0 32px}
.karriere__outro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px clamp(40px, 6vw, 96px);align-items:end;margin-top:clamp(40px, 5vw, 64px);padding-top:32px;border-top:1px solid var(--dark-line)}
.karriere__slogan{font:600 clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem)/1.3 var(--display);color:#fff;margin:0;max-width:none}
.karriere__outro p:last-child{margin:0}
.jobs{list-style:none;margin-top:clamp(32px, 4vw, 48px);border-top:1px solid var(--dark-line)}
.job{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;padding:18px 0;border-bottom:1px solid var(--dark-line)}
.job__title{font:400 1.375rem/1.25 var(--display);color:#fff}
.job__contact{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.job__contact:hover{color:var(--green-bright);border-color:currentColor}
.karriere__note{margin:28px 0 0;font-size:1.0625rem;max-width:70ch}
.karriere__note a{text-decoration:underline;text-underline-offset:3px}
.karriere__note a:hover{color:var(--green-bright)}

/* Breakpoints */
@media (max-width:1024px){
  .intro.about{grid-template-columns:1fr}
  .umwelt.about .about__text{order:0}
  .team{grid-template-columns:1fr;gap:0}
  .team__col+.team__col{border-left:0;padding-left:0;margin-left:0;border-top:1px solid var(--line-2);margin-top:40px}
  .risk{grid-template-columns:1fr}
}
@media (max-width:900px){
  .certs{grid-template-columns:1fr;gap:0}
  .cert+.cert{border-left:0;padding-left:0;margin-left:0;border-top:1px solid var(--line);margin-top:30px}
  .cert-zoom{max-width:420px}
  .members li{flex-basis:50%;height:110px;padding:0 18px}
  .members img{max-height:56px}
  .karriere__outro{grid-template-columns:1fr}
}
@media (max-width:640px){
  .team h3{font-size:1.75rem}
  .job__title{font-size:1.25rem}
}

/* Karriere: die Teilblöcke voneinander absetzen, sonst liest sich alles als eine Fläche */
.karriere__sub{margin:clamp(40px, 5vw, 64px) 0 26px;padding-top:clamp(28px, 3vw, 40px);border-top:1px solid var(--dark-line);letter-spacing:.01em}
.karriere .steps--3{row-gap:clamp(36px, 4vw, 52px)}
.karriere__outro{margin-top:clamp(48px, 5.5vw, 76px);padding-top:clamp(32px, 3.5vw, 44px)}
.jobs{margin-top:clamp(36px, 4vw, 52px)}
.karriere__note{margin-top:clamp(28px, 3vw, 40px);padding-top:clamp(20px, 2.4vw, 28px);border-top:1px solid var(--dark-line);color:#CFCFCB}

/* Zweites Band der Karriere-Seite steht auf hellem Grund: Linien und Schrift dorthin anpassen */
.sec:not(.sec--dark) .karriere__outro{border-top-color:var(--line)}
.sec:not(.sec--dark) .karriere__slogan{color:var(--ink)}
.sec:not(.sec--dark) .jobs{border-top-color:var(--line)}
.sec:not(.sec--dark) .jobs li{border-bottom-color:var(--line)}
.sec:not(.sec--dark) .job__title{color:var(--ink)}
.sec:not(.sec--dark) .jobs a{color:var(--ink)}
.sec:not(.sec--dark) .jobs a:hover{color:var(--green-text)}
.sec:not(.sec--dark) .karriere__note{border-top-color:var(--line);color:var(--grey)}
.sec:not(.sec--dark) .karriere__outro p{color:var(--grey)}
.karriere{border-bottom:0}


/* ===== assets/css/projekte.css (скоуп: main[data-page="projekte"]) ===== */
/* Stüssi v9 – projekte.html (Ergänzungen zu style.css) */

/* Referenz-Mosaik: Medium füllt die Kachel, Beschriftung darüber */
.proj .tiles{grid-auto-rows:320px}
.proj .tile--h{grid-column:span 6}
.proj .tile__media,.proj .video-open{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;display:block}
.proj .tile__cap{z-index:2;gap:2px}
.proj .tile__cap p{font-size:1.0625rem}
.proj .tile__meta{font:500 .9375rem/1.3 var(--sans);letter-spacing:.04em;color:rgba(255,255,255,.66);margin-bottom:6px}
.proj .link-more .icon{transition:none}
.proj .link-more:hover .icon{transform:none}

/* Play-Marke = Lucide circle-play, oben links (frei von der Beschriftung) */
main[data-page="projekte"] .play-badge{inset:auto;top:20px;left:20px;margin:0;width:64px;height:64px;background:rgba(23,24,22,.62);border:0;border-radius:50%;transition:background-color .2s}
.play-badge .icon{width:64px;height:64px;margin:0;stroke-width:1}
.play-badge .icon circle{fill:none;stroke:#fff}
.play-badge .icon path{fill:#fff;stroke:#fff}
.video-open:hover .play-badge{background:var(--green)}


/* Kundenstimme */
.quote blockquote{font:600 clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem)/1.32 var(--display);color:var(--ink);max-width:26ch;margin:0}

/* Auftraggeber und Partner: eine Zeile in Serifen an Linien */
.clients__line{margin:0;max-width:none;padding:clamp(28px, 3.5vw, 44px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem)/1.5 var(--display);color:var(--ink)}
.clients__line>span{white-space:nowrap}
.clients__sep{color:var(--green-bright)}

/* Handlungsaufruf */
.proj-cta{padding-top:0}
.proj-cta .cta{margin-top:0}
main[data-page="projekte"] .cta h2{font:400 clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem)/1.15 var(--display);color:var(--ink);margin:0;max-width:22ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px}

/* Breakpoints */
@media (max-width:1180px){
  .proj .tiles{grid-auto-rows:290px}
}
@media (max-width:1024px){
  .proj .tiles{grid-auto-rows:300px}
  .proj .tile,.proj .tile--a,.proj .tile--b,.proj .tile--c,.proj .tile--h{grid-column:span 6;grid-row:span 1;min-height:0}
}
@media (max-width:900px){
  .proj .tiles{grid-auto-rows:auto;gap:28px 8px}
  .proj .tile,.proj .tile--a,.proj .tile--b,.proj .tile--c,.proj .tile--h{grid-column:span 12}
  .proj .tile__media,.proj .video-open{position:relative;inset:auto;height:auto}
  .proj .tile img{aspect-ratio:4/3;height:auto}
  .proj .tile__cap{position:static}
}
@media (max-width:640px){
  .clients__line>span{white-space:normal}
  main[data-page="projekte"] .cta h2{max-width:none}
}

/* Zitat steht jetzt auf Stein statt auf dunklem Grund */
.sec--stone .quote-cite{color:var(--grey)}
.sec--stone .quote-cite strong{color:var(--ink)}
.sec--stone .icon-quote{color:var(--green)}


/* ===== assets/css/beratung.css (скоуп: main[data-page="beratung"]) ===== */
/* Stüssi v9 „Editorial“ – beratung.css
   Zusatzstile NUR für beratung.html (wird nach style.css geladen).
   Nur Farben/Schriften der Design-Systems (style.css-Variablen). */

/* ---------- Kopf: Titel links, Einleitung + Aktion rechts ---------- */
.page-hero--split h1{margin-bottom:0}
.page-hero__aside{display:grid;gap:28px;justify-items:start}

/* ---------- Gegenüberstellung: Stichwort + Satz je Zeile ---------- */
.compare-list{list-style:none}
.compare--keys .compare-col{display:flex;flex-direction:column}
.compare--keys .compare-row--final{margin-top:auto}
.compare--keys .compare-row{align-items:flex-start;padding:18px 24px;line-height:1.45}
.compare--keys .compare-row .icon{margin-top:3px}
.compare-key{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}
.compare--keys .compare-row--final{padding:20px 24px}

/* ---------- Kostenfalle: Prosa links, zwei Kostenstufen rechts ---------- */
.kf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px clamp(40px, 6vw, 96px);align-items:start}
.kf__text p{font-size:1.125rem;max-width:60ch}
.kf__text p:last-child{margin-bottom:0}
.kf__cost{list-style:none;display:grid;gap:28px}
.kf__cost li{position:relative;border-top:2px solid var(--line-2);padding-top:22px}
.kf__cost li::before{content:"";position:absolute;top:-2px;left:0;width:56px;height:2px;background:var(--green-bright)}
.kf__cost li:last-child::before{background:var(--red)}
.kf__cost strong{display:block;font:700 1.375rem/1.22 var(--display);color:var(--ink);margin-bottom:8px}
.kf__cost span{display:block;font-size:1.125rem;line-height:1.5;color:var(--grey)}
.kf__trust{margin:clamp(36px, 4vw, 52px) 0 0;padding-top:24px;border-top:1px solid var(--line-2);font-size:1.3125rem;color:var(--text);max-width:none}
.kf__trust strong{color:var(--green)}

/* ---------- Cost-of-Change-Kurve: Tabelle auf Linien, Phasen als helle Kacheln in der Phasenfarbe (Vorlage Kunde) ---------- */
.coc{--coc-gut:136px;--coc-pad:22px;--coc-g:var(--green);--coc-o:#DE6A00;--coc-r:#EE1C25;margin:clamp(48px, 6vw, 80px) 0 0;padding-top:clamp(28px, 3.5vw, 44px);border-top:2px solid var(--ink)}
.coc-head h3{font:700 clamp(1.75rem, 1.25rem + 1.1vw, 2.375rem)/1.15 var(--display);color:var(--ink);margin-bottom:8px}
.coc-head p{font-size:1.125rem;color:var(--grey);margin:0}

.coc-chart{margin-top:28px;display:grid;grid-template-columns:var(--coc-gut) minmax(0,1fr);grid-template-rows:auto auto auto auto}
.coc-ytitle,.coc-xtitle,.coc-rowlabel{font:600 .875rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-mid);max-width:none}
.coc-rowlabel{color:var(--ink)}
/* Achsentitel links oben neben der Achse (wie Vorlage), über dem Skalenwert 1'000x */
.coc-ytitle{grid-column:1;grid-row:3;align-self:start;margin:0;padding-right:18px}
.coc-yticks{grid-column:1;grid-row:3;position:relative}
.coc-yticks span{position:absolute;right:14px;transform:translateY(-50%);font-size:.9375rem;line-height:1;color:var(--grey-mid);font-variant-numeric:tabular-nums;white-space:nowrap}
.coc-yticks span:nth-child(1){top:28.235%}
.coc-yticks span:nth-child(2){top:52.059%}
.coc-yticks span:nth-child(3){top:75.882%}
.coc-yticks span:nth-child(4){top:100%}
.coc-plot{grid-column:2;grid-row:3;position:relative;min-width:0;aspect-ratio:900/340}
.coc-svg{display:block;width:100%;height:100%}
.coc-xtitle{grid-column:2;grid-row:4;margin:12px 0 0;text-align:right}

.coc-tick line{stroke:var(--grey-mid);stroke-width:1}
.coc-axis line{stroke:var(--grey-soft);stroke-width:1}
.coc-sep line{stroke:var(--grey-soft);stroke-width:1;stroke-dasharray:5 5}
.coc-curve{stroke-width:5;stroke-linecap:round}
.coc-arrow{fill:var(--coc-r);stroke:none;transform-box:fill-box;transform-origin:100% 0}
/* Verlauf der Kurve: Grün (Planung) über Orange zu leuchtendem Rot (Baustelle) – Kundenwunsch; Orange/Rot nur in diesem Diagramm (--coc-o/--coc-r) */
.coc-s1{stop-color:var(--coc-g)}
.coc-s2{stop-color:var(--coc-o)}
.coc-s3{stop-color:var(--coc-r)}
/* Kurve wächst beim Einblenden (.in von main.js) von links nach rechts, Pfeilspitze folgt.
   Maske statt stroke-dasharray: pathLength rechnet im viewBox-Raum, non-scaling-stroke zeichnet in Bildschirm-px – bei gestreckter Fläche bliebe die Kurve kurz. */
.js .coc-curve{clip-path:inset(-12px 100% -12px 0)}
.js .coc-arrow{opacity:0}
.js .coc.in .coc-curve{clip-path:inset(-12px -12px -12px -12px);transition:clip-path 1.4s cubic-bezier(.4,0,.25,1) .3s}
.js .coc.in .coc-arrow{opacity:1;transition:opacity .35s ease 1.6s}

.coc-matrix{margin-top:24px;display:grid;grid-template-columns:var(--coc-gut) repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto}
/* Trennlinie der Kopfspalte über die ganze Tabellenhöhe */
.coc-matrix::before{content:"";grid-column:1;grid-row:1/-1;border-right:1px solid var(--line-2)}
/* Zeilenkopf sitzt auf derselben Linie und in derselben Höhe wie seine Zellen */
.coc-rowlabel{margin:0;padding:20px 20px 24px 0;border-top:1px solid var(--line-2);overflow-wrap:break-word;hyphens:auto}
.coc-rowlabel--bsp{grid-column:1;grid-row:2}
.coc-rowlabel--ktr{grid-column:1;grid-row:3}
.coc-phase{grid-row:1/-1;display:grid;grid-template-rows:subgrid;min-width:0}
.coc-phase--plan{grid-column:2;--pc:var(--coc-g)}
.coc-phase--prod{grid-column:3;--pc:var(--coc-o)}
.coc-phase--mont{grid-column:4;--pc:var(--coc-r)}
.coc-phase>*{min-width:0}
.coc-phase--prod>*,.coc-phase--mont>*{border-left:1px solid var(--line-2)}
/* Phasentexte («Texte oben»): ab 1180 px IM Diagramm, je Phasenspalte über der Kurve gestaffelt wie die Vorlage; Lage in % der Kurvenfläche */
.coc-zones{grid-column:2;grid-row:3;position:relative;min-width:0}
.coc-zone{position:absolute;width:calc(33.333% - 2 * var(--coc-pad))}
.coc-zone--plan{--pc:var(--coc-g);left:var(--coc-pad);bottom:13%;width:calc(33.333% * .8)}
.coc-zone--prod{--pc:var(--coc-o);left:calc(33.333% + var(--coc-pad));bottom:37%}
.coc-zone--mont{--pc:var(--coc-r);left:calc(66.667% + var(--coc-pad));top:2%;width:calc(33.333% * .6)}
.coc-zone-val{font:700 clamp(1.5rem, 1rem + .8vw, 1.875rem)/1.1 var(--display);color:var(--pc);margin:0 0 6px;max-width:none;white-space:nowrap}
.coc-zone-txt{font-size:clamp(1rem, .6rem + .6vw, 1.0625rem);line-height:1.35;color:var(--text);margin:0;max-width:none;overflow-wrap:break-word}
/* Phasenkachel: heller Grund in der Phasenfarbe, Symbol links, Titel + Schritte rechts */
.coc-band{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start;align-content:start;padding:18px var(--coc-pad) 20px;background:color-mix(in srgb, var(--pc) 11%, #fff);color:var(--text)}
.coc-band .ico{grid-row:1/3;width:48px;height:48px;color:var(--pc)}
.coc-phase--prod .coc-band,.coc-phase--mont .coc-band{border-left:3px solid var(--stone)}
.coc-name{margin:2px 0 0;font:700 1.25rem/1.15 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--pc)}
.coc-steps{margin:6px 0 0;font-size:1rem;line-height:1.4;color:var(--text);max-width:none}
.coc-cell{padding:20px var(--coc-pad) 24px;border-top:1px solid var(--line-2)}
.coc-cell ul{list-style:none}
.coc-cell li{position:relative;padding-left:16px;font-size:1.0625rem;line-height:1.45;hyphens:auto;overflow-wrap:break-word}
.coc-cell li+li{margin-top:8px}
.coc-cell li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--grey-soft)}
/* Zellen-Überschriften: auf Desktop nur für Screenreader (sichtbar = Zeilenlabel links) */
.coc-cell-h{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.coc figcaption{margin-top:28px;padding-top:16px;border-top:1px solid var(--line-2);font-size:1rem;color:var(--grey-mid)}

/* ---------- Kundenstimmen: Karussell (Komponente .car) auf dunkler Platte ---------- */
.voices-car .car-track{padding-bottom:4px}
.voices-car .car-slide{padding-right:clamp(24px, 4vw, 64px)}
.voices-car .icon-quote{width:44px;height:44px}
.voices-car .car-slide blockquote{font:600 clamp(1.25rem, 1.05rem + .55vw, 1.5rem)/1.42 var(--display);color:#fff;margin:18px 0 0;max-width:56ch}
.voices-car .quote-cite{color:#CFCFCB;margin-top:24px}
.voices-car .quote-cite strong{color:#fff}
.voices-car .car-nav{padding-top:clamp(28px, 3vw, 40px);margin-top:clamp(28px, 3vw, 40px);border-top:1px solid var(--dark-line)}
.voices-car .car-btn{border-color:rgba(255,255,255,.7);color:#fff}
.voices-car .car-btn:hover{background:#fff;color:var(--ink)}
.voices-car .car-dot{background:var(--dark-line)}
.voices-car .car-dot.is-on{background:var(--green-bright)}

/* ---------- Planer-Service: nummerierte Fragen links, Antwort rechts, Schnitt breit darunter ---------- */
/* B2B: Fragen als Dreierzeile, darunter Antwort und Schnitt nebeneinander */
.b2b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(32px, 4vw, 64px)}
.b2b__ask{display:contents}
.b2b__ask>p{grid-column:1/-1;grid-row:1;font-size:1.125rem;margin-bottom:20px;max-width:70ch}
.b2b__q{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:0 clamp(24px, 3vw, 48px);counter-reset:q;border-top:2px solid var(--ink)}
.b2b__q li{grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 0 26px;align-items:start;counter-increment:q;border-top:0;border-bottom:1px solid var(--line)}
.b2b__q li::before{content:"0" counter(q);font:600 .9375rem/1 var(--sans);letter-spacing:.12em;color:var(--green-text)}
.b2b__q span{font:400 clamp(1.1875rem, 1.05rem + .4vw, 1.375rem)/1.28 var(--display);letter-spacing:-.008em;color:var(--ink)}
.b2b__answer{grid-column:1;grid-row:3;border-left:0;padding-left:0;padding-top:clamp(28px, 3vw, 44px)}
.b2b__answer p{font-size:1.125rem;max-width:56ch}
.detail{grid-column:2;grid-row:3;display:grid;gap:12px;justify-items:start;align-content:start;margin:0;padding-top:clamp(28px, 3vw, 44px);padding-left:clamp(32px, 4vw, 64px);border-left:1px solid var(--line);max-width:none}
.detail svg{display:block;width:100%;max-width:560px;height:auto}
.detail .d-elem{fill:var(--stone-2);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.detail .d-slab{fill:var(--line-2);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.detail .d-void{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.detail .d-joint{fill:none;stroke:var(--green-bright);stroke-width:4}
.detail .d-dim,.detail .d-lead{fill:none;stroke:var(--grey-mid);stroke-width:1.2}
.detail .d-txt{fill:var(--text);font:500 15px var(--sans)}
.detail figcaption{margin:0;font-size:1rem;color:var(--grey-mid)}
/* Privatpersonen: Titel links, Text rechts, auf einer Linie unter dem Zweispalter */
.priv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px clamp(32px, 6vw, 96px);margin-top:clamp(48px, 6vw, 80px);padding-top:clamp(32px, 4vw, 48px);border-top:1px solid var(--line)}
.priv h3{font:400 clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem)/1.15 var(--display);margin:0}
.priv p{margin:0;max-width:72ch;font-size:1.125rem}

/* ---------- Nummerierung ohne Text-Knoten (CSS-Zähler) ---------- */
.steps--count{counter-reset:s}
.steps--count .step{counter-increment:s}
.steps--count .step__n{margin-top:0}
.steps--count .step__n::before{content:"0" counter(s)}
.rows--count{counter-reset:r}
.rows--count .row{counter-increment:r}
.rows--count .row__num::before{content:"0" counter(r)}
/* Warum STÜSSI: Titel links, Satz rechts in derselben Zeile */
.rows--split .row>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:4px 36px;align-items:start}
.rows--split .row h3{margin-bottom:0;font-size:1.375rem}
.rows--split .row p{font-size:1.125rem;color:var(--grey)}
.sec--stone .row,.sec--stone .row:last-child{border-color:var(--line-2)}
.sec--stone .step{border-top-color:var(--line-2)}

/* ---------- Schluss: dunkle Zeile mit Zweitweg zum Kontakt ---------- */
.cta--solo{margin-top:0}
main[data-page="beratung"] .cta h2{font:600 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1.12 var(--display);color:var(--ink);margin-bottom:10px}
.cta__act{display:grid;gap:14px;justify-items:start}
.cta__alt{font-size:1rem}
.cta__alt a{color:var(--green-text);text-decoration:underline;text-underline-offset:3px}
.cta__alt a:hover{color:var(--ink)}

/* ---------- Breakpoints ---------- */
@media (max-width:1279px){
  /* etwas höhere Kurvenfläche, damit die Phasentexte im Diagramm über der Kurve bleiben */
  .coc-plot{aspect-ratio:900/380}
}
@media (max-width:1179px){
  /* zu schmal für Text im Diagramm: die drei Phasentexte als Zeile über der Kurve, Spalten = Phasenspalten */
  .coc-zones{grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:32px}
  .coc-zone{position:static;width:auto;padding:0 var(--coc-pad)}
  .coc-zone+.coc-zone{border-left:1px solid var(--line-2)}
  .coc-zone-val{white-space:normal}
  .coc-ytitle{grid-column:1/-1;grid-row:2;margin:0 0 14px;padding-right:0}
  .coc-zone-txt{font-size:1.0625rem}
}
@media (max-width:1024px){
  .coc{--coc-gut:112px;--coc-pad:16px}
}
@media (max-width:900px){
  .kf{grid-template-columns:1fr}
  /* eine Spalte: Reihenfolge Frage-Block, Antwort, Schnitt */
  .b2b{grid-template-columns:1fr}
  .b2b__ask>p,.b2b__q,.b2b__answer,.detail{grid-column:1;grid-row:auto}
  .b2b__answer{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:44px;padding-top:40px}
  .detail{grid-template-columns:1fr;align-items:start}
  .priv{grid-template-columns:1fr}
  .rows--split .row>div{display:block}
  .rows--split .row h3{margin-bottom:4px}
}
@media (max-width:760px){
  /* eine Spalte: pro Phase ein Block, Reihenfolge Planung → Produktion → Montage */
  .coc{--coc-gut:56px;--coc-pad:0px}
  .coc-chart{margin-top:28px}
  .coc-yticks span{right:10px;font-size:.875rem}
  .coc-matrix{display:block;margin-top:24px}
  .coc-matrix::before{display:none}
  .coc-rowlabel{display:none}
  .coc-phase{display:flex;flex-direction:column;margin-top:28px}
  .coc-phase>*{border-left:0}
  .coc-phase .coc-band{order:-1;padding:18px 18px 20px;border-left:0}
  .coc-zones{grid-column:1/-1;grid-template-columns:1fr;gap:22px;margin-bottom:28px}
  .coc-zone+.coc-zone{border-left:0}
  /* Pfeilspitze schrumpft mit der schmalen Fläche mit – um die Spitze (rechts oben) vergrössern */
  .coc-arrow{scale:1.6}
  .coc-cell{padding:18px 0 0;border-top:0}
  .coc-cell-h{position:static;width:auto;height:auto;margin:0 0 10px;padding:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;font:600 .875rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-mid)}
  .coc figcaption{margin-top:24px}
}
@media (max-width:640px){
  .compare--keys .compare-row{padding:16px 18px}
  .compare--keys .compare-row--final{padding:18px}
  .page-hero__aside .btn{width:100%}
  .cta__act{width:100%}
  .cta__act .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .js .coc-curve{clip-path:none;transition:none}
  .js .coc-arrow{opacity:1;transition:none}
}

@media (max-width:900px){
  .b2b{grid-template-columns:1fr}
  .b2b__ask>p,.b2b__q,.b2b__answer,.detail{grid-column:1;grid-row:auto}
  .b2b__q{grid-template-columns:1fr;gap:0}
  .b2b__q li{padding:18px 0 20px}
  .detail{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:32px}
}

@media (max-width:900px){
  /* Kurve braucht auf dem Telefon mehr Höhe, sonst ist sie ein flacher Strich */
  .coc-plot{aspect-ratio:900/460}
  .detail .d-txt{font-size:22px}
}
@media (max-width:600px){
  .coc-plot{aspect-ratio:900/560}
  .coc-curve{stroke-width:4}
  .coc-arrow{scale:2.4}
  .detail .d-txt{font-size:26px}
}


/* ===== assets/css/kontakt.css ===== */
/* Stüssi v9 „Editorial“ – Zusatzstile für kontakt.html, danke.html, impressum.html, datenschutz.html.
   Nur Tokens und Komponenten aus style.css; keine neuen Farben, Schriften oder Schatten. */

/* Seitenkopf ohne Lead (Impressum, Datenschutz); lange Einzelwörter («Datenschutzerklärung») dürfen umbrechen */
.page-hero h1:last-child{margin-bottom:0}
.page-hero h1{hyphens:auto;overflow-wrap:break-word}

/* Standorte: zwei breite Zeilen Foto + Text (.about / .about--rev), durch Linie getrennt */
.standort+.standort{margin-top:clamp(48px, 6vw, 88px);padding-top:clamp(48px, 6vw, 88px);border-top:1px solid var(--line)}
.standort h2{font-size:clamp(1.875rem, 1.4rem + 1.4vw, 2.625rem)}
.standort__purpose{font:600 .9375rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green-text);margin:0 0 22px}
.standort__list li{align-items:center}
.standort__list span,.standort__list a{font-size:1.125rem;line-height:1.45}

/* Formular: Linie zum Abschnitt davor, Hinweis links, Knopf rechts */
.sec--form{border-top:1px solid var(--line)}
.form--kontakt .form__foot{justify-content:space-between}
.form--kontakt .form__note{max-width:60ch}

/* Beratungs-Teaser: Icon + Text + Knopf in der dunklen Zeile */
.cta--teaser{grid-template-columns:auto minmax(0,1fr) auto;margin-top:0}
.cta--teaser .ico{color:var(--ink)}
.cta--teaser p{max-width:60ch}

/* Anfahrt: Karte randlos über die volle Breite, Standorte als Zeile darunter */
.anfahrt .map{position:relative;height:clamp(380px, 42vw, 640px)}
.map-credit{position:absolute;right:12px;bottom:12px;z-index:2;font-size:.8125rem;line-height:1;color:var(--ink);background:var(--paper);padding:6px 10px;text-decoration:none}
.map-credit:hover{text-decoration:underline}
.map-legend{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:24px clamp(24px, 4vw, 56px);align-items:start;padding-top:clamp(28px, 3.6vw, 48px)}
.map-legend h3{font-weight:400;font-size:1.75rem;margin:0}
.map-legend p{margin:0;font-size:1.0625rem;line-height:1.45;color:var(--grey)}
.map-legend strong{display:block;font-family:var(--display);font-size:1.1875rem;color:var(--ink);margin-bottom:2px}
.map-actions{display:grid;gap:12px;justify-items:start}

/* Danke-Seite: Kopf mit Knopf, etwas mehr Luft nach unten */
.page-hero--danke{padding-bottom:clamp(56px, 7vw, 104px)}

@media (max-width:1024px){
  .map-legend{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .map-legend h3{grid-column:1 / -1}
  .map-actions{grid-column:1 / -1;grid-auto-flow:column}
}
@media (max-width:900px){
  .cta--teaser{grid-template-columns:1fr}
}
@media (max-width:640px){
  .anfahrt .map{height:300px}
  .map-legend{grid-template-columns:1fr}
  .map-actions{grid-auto-flow:row;justify-items:stretch}
}


/* ===== assets/css/buchen.css (скоуп: main[data-page="buchen"]) ===== */
/* Stüssi v9 „Editorial“ – Experten-Check buchen
   Baut auf style.css: .page-hero--split, .steps/.step, .sec--stone, .pay-* */

/* ---------- Kopf: Text links, Eckdaten rechts, beide auf derselben Oberkante ---------- */
/* style.css richtet .page-hero--split unten aus und nimmt h1 den Abstand – hier beides korrigiert */
main[data-page="buchen"] .page-hero--split{align-items:start}
main[data-page="buchen"] .page-hero--split h1{margin-bottom:22px}
main[data-page="buchen"] .page-hero--split .lead{max-width:52ch}
.hero-facts{display:grid;gap:0;align-self:start}
.hero-facts dl{display:grid;margin:0;border-top:1px solid var(--line)}
.hero-facts dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.hero-facts dt{font:600 .875rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--green-text)}
.hero-facts dd{margin:0;font-size:1.125rem;line-height:1.4;color:var(--ink)}
.hero-facts .btn{justify-self:start;margin-top:28px}

/* ---------- Ablauf: nummerierte Merkmale ---------- */
.buch-steps{counter-reset:s}
.buch-steps .step{counter-increment:s}
.buch-steps .step strong{display:block;font:700 1.375rem/1.22 var(--display);color:var(--ink);margin-bottom:10px}
.buch-steps .step strong::before{content:"0" counter(s);display:block;font:600 .9375rem/1 var(--sans);letter-spacing:.12em;color:var(--green-text);margin:0 0 16px}
.buch-steps .step span{display:block;font-size:1.125rem;line-height:1.45;color:var(--grey)}

/* ---------- Buchungskalender (SimplyBook-Widget) auf Steinplatte ---------- */
.booking{background:var(--paper);border-top:6px solid var(--ink);padding:clamp(12px, 2vw, 24px)}
.booking iframe{display:block;max-width:100%;border:0}
.pay-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:28px;font-size:1.0625rem;color:var(--grey)}
.pay-row .pay-label{color:var(--grey-mid)}
.pay-row .pay-item .icon{color:var(--ink)}
.pay-row .pay-visa{color:var(--ink)}
.pay-row .pay-visa svg{height:16px;width:auto}

/* ---------- Breakpoints ---------- */
@media (max-width:1024px){
  .hero-facts{max-width:520px}
}
@media (max-width:640px){
  .hero-facts dl>div{grid-template-columns:1fr;gap:4px}
}


/* ===== assets/css/treppenkonfigurator.css ===== */
/* Stüssi v9 „Editorial“ – Treppenkonfigurator
   Mehrstufiger Wizard (Logik: assets/js/treppenkonfigurator.js, unverändert).
   Baut auf style.css: Tokens, .page-hero, .eyebrow, .btn, .field, .hp, .mt-m. */

/* ---------- Kopf ---------- */
.page-hero--konf{border-bottom:0;padding-bottom:clamp(28px, 3.4vw, 44px)}
/* „Betontreppenelement“ ist ein 19-Zeichen-Wort: auf schmalen Viewports etwas kleiner setzen, Trennung erlauben */
.page-hero--konf h1{max-width:24ch;font-size:clamp(2rem, .75rem + 5.75vw, 3.8rem);hyphens:manual;overflow-wrap:break-word}
@media (max-width:340px){.page-hero--konf h1{hyphens:auto;overflow-wrap:anywhere}}

/* ---------- Fortschritt (klebt unter der Kopfzeile) ---------- */
.konf-progress{position:sticky;top:var(--header);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
/* Der Wizard scrollt beim Laden und bei jedem Schritt programmatisch zu #konf-top; main.js würde die
   Kopfzeile dabei ausblenden. Auf dieser Seite bleibt sie stehen – der Fortschritt klebt direkt darunter. */
body:has(#konf) .hdr.is-hidden{transform:none}
.konf-progress ol{display:flex;list-style:none;gap:clamp(14px, 2.2vw, 32px);overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line)}
.konf-progress ol::-webkit-scrollbar{display:none}
.konf-progress li{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:baseline;gap:10px;padding:14px 0 16px;border-top:2px solid transparent;margin-top:-1px;color:var(--grey-mid);white-space:nowrap;transition:color .2s,border-color .2s}
.konf-progress li[hidden]{display:none}
.konf-progress .dot{display:inline-flex;align-items:center;min-width:1.15em;font:400 1.375rem/1 var(--display);color:var(--grey-soft);transition:color .2s}
.konf-progress .dot .icon{width:20px;height:20px;stroke-width:2;color:var(--green)}
.konf-progress .plabel{font:600 .875rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.konf-progress li[data-state="active"]{border-top-color:var(--green-bright);color:var(--ink)}
.konf-progress li[data-state="active"] .dot{color:var(--ink)}
.konf-progress li[data-state="done"]{border-top-color:var(--ink);color:var(--grey)}

/* Sprunganker: Kopfzeile (fixed) + Fortschritt (sticky) freihalten */
.konf-top{display:block;height:0}
#konf-top{scroll-margin-top:calc(var(--header) + 72px)}

/* ---------- Raster: Formular + Zusammenfassung ---------- */
.konf-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px, 4vw, 64px);align-items:start;padding-top:clamp(36px, 4vw, 56px);padding-bottom:clamp(56px, 6.4vw, 92px)}
.konf-form{min-width:0}
.konf-form [hidden]{display:none}

/* Schritte: dunkle Kopfplatte, heller Körper */
.konf-step{display:none}
.konf-step.is-active{display:block}
.konf-step__head{background:var(--dark);color:#CFCFCB;padding:clamp(28px, 3.4vw, 44px) clamp(22px, 3.4vw, 44px) clamp(24px, 3vw, 36px)}
.konf-step__head .eyebrow{margin-bottom:22px}
.konf-step__head h2{color:#fff;font-size:clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem);margin-bottom:12px;max-width:22ch}
.konf-step__head p{color:#CFCFCB;margin:0;font-size:1.125rem;max-width:60ch}
.konf-step__body{background:var(--stone);padding:clamp(24px, 3.4vw, 44px) clamp(22px, 3.4vw, 44px)}

/* ---------- Auswahl: Bildkacheln (Radios) ---------- */
.choice-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:18px}
.choice{position:relative;display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--line);cursor:pointer;transition:border-color .2s var(--ease)}
.choice:hover{border-color:var(--grey-soft)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice:has(input:checked){border-color:var(--ink)}
.choice:has(input:focus-visible){outline:3px solid var(--green-bright);outline-offset:3px}
.choice__fig{display:block;aspect-ratio:16/10;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.choice__fig img{width:100%;height:100%;object-fit:contain}
.choice__title{display:block;padding:18px 20px 0;font:700 1.25rem/1.2 var(--display);color:var(--ink)}
.choice__desc{display:block;padding:6px 20px 18px;font-size:1.0625rem;line-height:1.4;color:var(--grey)}
.choice__check{position:absolute;top:14px;right:14px;width:28px;height:28px;border:2px solid var(--line-2);border-radius:3px;background:#fff;color:#fff;display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.choice__check svg{width:16px;height:16px;opacity:0;transition:opacity .2s}
.choice:has(input:checked) .choice__check{background:var(--ink);border-color:var(--ink)}
.choice:has(input:checked) .choice__check svg{opacity:1}

/* Zeilenvariante: Icon links, Text, Markierung rechts (Verwendungsort, Oberfläche, Transport) */
.choice--slim{flex-direction:row;align-items:center;gap:18px;padding:18px 20px}
.choice--slim .choice__ico{flex:0 0 48px;width:48px;height:48px;color:var(--ink)}
.choice--slim .choice__ico svg{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.choice--slim .choice__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.choice--slim .choice__txt strong{font:700 1.1875rem/1.2 var(--display);color:var(--ink)}
.choice--slim .choice__desc{padding:0;font-size:1rem}
.choice--slim::after{content:"";flex:0 0 auto;margin-left:auto;width:16px;height:16px;border:2px solid var(--line-2);border-radius:3px;background:#fff;transition:background-color .2s,border-color .2s}
.choice--slim:has(input:checked)::after{background:var(--ink);border-color:var(--ink)}

/* Chips (Nachbehandlung, Trittschall) */
.pill-grid{display:flex;flex-wrap:wrap;gap:10px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{display:inline-flex;align-items:center;min-height:46px;padding:8px 18px;border:2px solid var(--line);border-radius:3px;background:var(--paper);font:600 1.0625rem/1.2 var(--sans);color:var(--ink);transition:border-color .2s,background-color .2s,color .2s}
.pill:hover span{border-color:var(--grey-soft)}
.pill:has(input:checked) span{background:var(--ink);border-color:var(--ink);color:#fff}
.pill:has(input:focus-visible) span{outline:3px solid var(--green-bright);outline-offset:3px}

/* ---------- Felder ---------- */
.field-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:20px 24px}
.field-grid .reveal-block{margin-top:0}
.field .hint{font-weight:400;color:var(--grey-mid)}
.input-unit{position:relative;display:flex;align-items:center}
.input-unit .unit{position:absolute;right:16px;font-size:1rem;color:var(--grey-mid);pointer-events:none}
.input-unit input[type="number"]{padding-right:60px}
.input-unit input[type="number"]{-moz-appearance:textfield;appearance:textfield}
.input-unit input::-webkit-outer-spin-button,.input-unit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.input-unit--select::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--grey);border-bottom:2px solid var(--grey);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.field select{appearance:none;-webkit-appearance:none;padding-right:44px}
.konf-consent{margin-top:26px}
.konf-consent a{text-decoration:underline;text-underline-offset:3px}
.konf-consent a:hover{color:var(--green-bright)}

/* Gruppen-Titel (legend / h3) */
.konf-fieldset{border:0;padding:0;margin:0;min-width:0}
.konf-fieldset+.konf-fieldset{margin-top:40px;padding-top:34px;border-top:1px solid var(--line-2)}
.konf-legend{display:block;width:100%;padding:0;margin:0 0 18px;font:700 1.375rem/1.22 var(--display);color:var(--ink)}
.konf-stueck{margin-top:36px;padding-top:34px;border-top:1px solid var(--line-2)}
.konf-stueck .field{max-width:340px}
.reveal-block{margin-top:26px}
.reveal-block h3{font-size:1.375rem;margin-bottom:14px}
.detail-title{font-size:1.375rem;margin-bottom:16px}

/* Skizzen (Original-Rasterbilder, klein) */
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;align-items:start}
.konf-diagram{margin:0;padding:24px;background:var(--paper);border:1px solid var(--line);display:grid;justify-items:center;gap:16px}
.konf-diagram img{width:100%;max-width:300px;height:auto}
.diagram-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;font-size:1rem;color:var(--text)}
.diagram-legend b{color:var(--green);font-weight:700;margin-right:5px}
.konf-diagram--inline{padding:18px;max-width:260px;width:100%}
.konf-diagram--inline img{max-width:100%}
.detail-block{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:center;padding:28px 0;border-top:1px solid var(--line-2)}
.detail-block:first-of-type{border-top:0;padding-top:0}
.detail-block:last-of-type{padding-bottom:0}

/* Upload (Sonderanfertigung) */
.konf-upload{padding:28px;border:2px dashed var(--line-2);background:var(--paper);display:grid;justify-items:start;gap:6px}
.konf-upload .icon{width:44px;height:44px;color:var(--ink);margin-bottom:8px;stroke-width:1.3}
.konf-upload strong{font:700 1.1875rem/1.2 var(--display);color:var(--ink)}
.konf-upload span{font-size:1rem;color:var(--grey-mid)}
.konf-upload input[type="file"]{margin-top:12px;font-size:1rem;max-width:100%}
.konf-upload .fname{margin-top:6px;font-weight:600;color:var(--green-text)}

/* Video „Top 5 Betonoberflächen“: Fassade, Vimeo lädt erst nach Klick */
.konf-video{margin:28px 0 0;max-width:600px}
.konf-video__facade{display:block;position:relative;width:100%;padding:0;border:0;background:var(--dark);cursor:pointer;overflow:hidden}
.konf-video__facade img{display:block;width:100%;height:auto;transition:transform .9s var(--ease)}
.konf-video__facade:hover img{transform:scale(1.04)}
.konf-video__facade iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.konf-video__play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(23,24,22,.22)}
.konf-video__play svg{width:76px;height:76px;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:color .2s}
.konf-video__facade:hover .konf-video__play svg,
.konf-video__facade:focus-visible .konf-video__play svg{color:var(--green-bright)}
.konf-video__label{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:10px;padding:12px 16px;background:rgba(23,24,22,.86);color:#fff;font:600 1.0625rem/1.3 var(--sans);text-align:left}
.konf-video__meta{font-weight:400;color:#CFCFCB}

/* Schema: Lage der Trittschallisolierung */
.konf-schema{margin:28px 0 0;max-width:480px;width:100%}
.konf-schema svg{display:block;width:100%;height:auto}
.konf-schema .s-lauf{fill:var(--line-2);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.konf-schema .s-decke{fill:var(--grey-mid);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.konf-schema .s-iso{fill:none;stroke:var(--green-bright);stroke-width:4;stroke-linecap:square}
.konf-schema .s-arrow{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.konf-schema .s-arrow-head{fill:var(--ink)}
.konf-schema .s-txt{fill:var(--ink);font:500 34px/1 var(--sans)}

/* Fehlende Pflichtgruppe hervorheben und unter der Sticky-Leiste anspringen */
.konf-step fieldset,.konf-step [data-require-group]{scroll-margin-top:calc(var(--header) + 96px)}
.konf-step .is-missing{outline:2px solid var(--red);outline-offset:10px}

/* ---------- Navigation ---------- */
.konf-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.konf-nav .btn-next,.konf-nav .btn-submit{margin-left:auto}
.konf-nav .btn .icon{width:22px;height:22px;stroke-width:1.6}
.konf-error{display:flex;align-items:center;gap:10px;margin:24px 0 0;max-width:none;font-weight:600;color:var(--red)}
.konf-error .icon{width:22px;height:22px;stroke-width:1.6}

/* ---------- Zusammenfassung ---------- */
.konf-summary{position:sticky;top:calc(var(--header) + 84px);background:var(--stone);border-top:6px solid var(--ink)}
.konf-summary__head{padding:22px 26px 16px;border-bottom:1px solid var(--line-2)}
.konf-summary__head strong{display:block;font:400 1.5rem/1.2 var(--display);color:var(--ink)}
.konf-summary__head span{display:block;margin-top:4px;font-size:1rem;color:var(--grey-mid)}
.konf-summary__body{padding:6px 26px 18px}
.konf-summary dl{margin:0}
.sum-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.sum-row:last-child{border-bottom:0}
.sum-row dt{font-size:.9375rem;color:var(--grey-mid);letter-spacing:.02em}
.sum-row dd{margin:0;font-size:1rem;font-weight:600;color:var(--ink);text-align:right}
.sum-empty{margin:0;padding:22px 0;font-size:1rem;line-height:1.5;color:var(--grey-mid)}
.konf-summary__foot{list-style:none;margin:0;padding:18px 26px 22px;border-top:1px solid var(--line-2);display:grid;gap:10px;font-size:1rem;color:var(--grey)}
.konf-summary__foot li{display:flex;align-items:center;gap:12px}
.konf-summary__foot .icon{width:22px;height:22px;color:var(--green);stroke-width:1.6}
.konf-summary--mobile{display:none;position:static;margin-bottom:clamp(56px, 6.4vw, 92px)}

/* ---------- Breakpoints ---------- */
@media (max-width:1180px){
  .konf-layout{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:1000px){
  .konf-layout{grid-template-columns:1fr;padding-bottom:0}
  .konf-summary--desktop{display:none}
  .konf-summary--mobile{display:block;margin-top:40px}
  .split{grid-template-columns:1fr}
  .konf-diagram{justify-self:start;max-width:420px;width:100%}
}
@media (max-width:760px){
  .konf-progress ol{gap:18px}
  .konf-progress li{flex:0 0 auto;padding:12px 0 14px}
  .konf-progress .plabel{display:none}
  .konf-progress .dot{font-size:1.25rem}
  .detail-block{grid-template-columns:1fr;gap:18px}
  .konf-diagram--inline{justify-self:start}
}
@media (max-width:640px){
  .choice-grid{grid-template-columns:1fr}
  .konf-step__head{padding:26px 18px 22px}
  .konf-step__body{padding:22px 18px}
  .konf-nav .btn{padding:12px 18px}
  .konf-summary__head,.konf-summary__foot{padding-left:18px;padding-right:18px}
  .konf-summary__body{padding-left:18px;padding-right:18px}
}
@media (prefers-reduced-motion:reduce){
  .choice,.pill span,.konf-video__facade img,.konf-progress li,.konf-progress .dot{transition:none}
}

/* ============================================================
   10. NACHTRAG stuessiag — Untermenue, Fragenliste, schlichter Aufruf
   Kommt aus version9/site/assets/css (style.css + loesungen.css) und
   steht hier am Ende, damit die Kaskade der neun Blaetter unberuehrt
   bleibt. Alle Selektoren sind NEUE Klassen (.has-sub, .nav__caret,
   .sub, .faq, .cta--plain) und treffen darum kein bestehendes Markup;
   ein main[data-page]-Scope ist deshalb nicht noetig.
   ============================================================ */

/* ── Untermenü „Lösungen“ ────────────────────────────────────────────────────
   Klappt per :hover und :focus-within auf, ganz ohne Skript. Der Winkel rechts
   am Elternpunkt zeigt an, dass es etwas aufzuklappen gibt, und dreht sich mit.
   Das unsichtbare ::before überbrückt den Abstand zwischen Menüpunkt und Platte,
   sonst reisst der Hover auf halbem Weg ab. */
.nav .has-sub{position:relative}
.nav .has-sub>a{display:inline-flex;align-items:center;gap:7px}
.nav__caret{width:15px;height:15px;stroke-width:1.8;transition:transform .3s var(--ease)}
.nav .has-sub:hover .nav__caret,.nav .has-sub:focus-within .nav__caret{transform:rotate(180deg)}
.nav .has-sub>a::before{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:26px}
.nav .sub{position:absolute;left:-18px;top:calc(100% + 23px);display:block;min-width:302px;padding:8px 0;
  background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--ink);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub li{opacity:0;transform:translateY(7px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.nav .has-sub:hover .sub li,.nav .has-sub:focus-within .sub li{opacity:1;transform:none}
.nav .sub li:nth-child(2){transition-delay:.03s}
.nav .sub li:nth-child(3){transition-delay:.06s}
.nav .sub li:nth-child(4){transition-delay:.09s}
.nav .sub li:nth-child(5){transition-delay:.12s}
.nav .sub li:nth-child(6){transition-delay:.15s}
.nav .sub li:nth-child(7){transition-delay:.18s}
.nav .sub li:nth-child(8){transition-delay:.21s}
.nav .sub li:nth-child(9){transition-delay:.24s}
.nav .sub li:nth-child(10){transition-delay:.27s}
.nav .sub li:nth-child(11){transition-delay:.3s}
.nav .sub a{display:block;padding:9px 22px;font-weight:400;font-size:17px;border-bottom:0;transition:background-color .2s var(--ease),color .2s var(--ease),padding-left .2s var(--ease)}
.nav .sub a::after{content:none}
.nav .sub a:hover{background:var(--stone);color:var(--green-text);padding-left:26px}
.nav .sub a[aria-current="page"]{color:var(--green-text)}

/* Mobiles Menü: eingerückte Liste an einer Linie */
.mobnav .sub{margin:0 0 0 16px;border-left:2px solid var(--line-2)}
.mobnav .sub a{padding:11px 0 11px 16px;font:500 1.125rem/1.25 var(--sans);letter-spacing:0}

@media (prefers-reduced-motion:reduce){
  .nav .sub,.nav .sub li,.nav .sub a,.nav__caret{transition:none}
}

/* ── Häufige Fragen ──────────────────────────────────────────────────────────
   Natives <details>/<summary>: funktioniert ohne JavaScript, ist mit der
   Tastatur bedienbar, und die Browsersuche findet auch zugeklappten Text. */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(20px, 4vw, 56px);padding:22px 0;font:600 1.1875rem/1.35 var(--display);letter-spacing:-.005em;
  color:var(--ink);transition:color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green-text)}
.faq summary .icon{flex:0 0 auto;width:26px;height:26px;margin-top:1px;color:var(--grey-mid);transition:transform .3s var(--ease)}
.faq details[open] summary{color:var(--green-text)}
.faq details[open] summary .icon{transform:rotate(180deg)}
.faq p{margin:0 0 22px;color:var(--grey);max-width:74ch}

/* Schlichter Aufruf am Seitenende der Leistungsseiten: keine Platte, weisser
   Grund. Der Bodenabstand sitzt am Block selbst, weil style.css der Sektion
   den unteren Innenabstand nimmt, sobald zuletzt ein .cta steht. */
/* Der Abstand sitzt am Block selbst, oben wie unten: style.css nimmt der Sektion
   ALLE Innenabstaende, sobald in ihr nur das Aufrufband steht
   (`.sec:has(> .wrap > .cta:only-child){padding:0}`) — sonst klebt die
   Ueberschrift an der Flaeche darueber und die Luft sammelt sich unten. */
.cta--plain{background:none;border-top:0;padding:clamp(56px, 6.4vw, 92px) 0;margin:0}

/* Lange deutsche Komposita («Gestaltungselemente») sprengten den Seitenkopf
   auf 375px: eine Rasterzelle behaelt min-width:auto und schrumpft nicht
   unter ihre min-content-Breite, auch bei minmax(0,1fr) auf der Spur. */
.page-hero--split>*{min-width:0}

/* ── 11 · Feedback 22.09.2026 ─────────────────────────────────────────── */
/* Beratung-Kopf: Unterzeile unter dem H1; die Absaetze der Seitenspalte
   bekommen den Abstand vom Raster (gap), nicht zusaetzlich vom <p>. */
.page-hero__sub{margin:14px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(1.25rem, 1.05rem + .7vw, 1.625rem);line-height:1.25;letter-spacing:-.01em;color:var(--ink);max-width:30ch}
.page-hero__aside{gap:18px}
.page-hero__aside p{margin:0}
.page-hero__aside .btn{margin-top:10px}

/* «Mit / Ohne Experten-Check» als Foto-Band (compare, tone "bild").
   Handy/Tablet: Foto oben, beide Spalten darunter auf hellem Grund.
   Ab 1000px stehen die Spalten links und rechts AUF dem Foto; das Element
   haengt in der Bildmitte. Die dunklen Raender sind ein reiner Lesbarkeits-
   Scrim, die Mitte mit dem Element bleibt unverdeckt. */
.vs-bild{padding:0}
.vs-bild__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%}
.vs-bild__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;padding-block:clamp(40px, 7vw, 64px)}
.vs-bild__tag{display:inline-block;margin:0 0 18px;padding:9px 14px;font:700 .8125rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--ink)}
.vs-bild__col--good .vs-bild__tag{background:var(--ink);color:var(--paper)}
.vs-bild__claim{margin:0 0 24px;font:700 clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem)/1.04 var(--display);letter-spacing:-.015em;color:var(--ink)}
.vs-bild__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vs-bild__list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:1.125rem;line-height:1.4;color:var(--text)}
.vs-bild__list .icon{width:28px;height:28px;margin-top:-1px}
.vs-bild__col--good .icon{color:var(--green)}
.vs-bild__col--bad .icon{color:var(--grey-mid)}
.vs-bild__final{margin:20px 0 0;font-weight:600;color:var(--ink)}
@media (min-width:1000px){
  .vs-bild__stage{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(560px, 43vw, 800px)}
  .vs-bild__img{position:absolute;inset:0;z-index:-2;height:100%;aspect-ratio:auto;object-position:50% 50%}
  .vs-bild__stage::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg, rgba(23,24,22,.76) 0%, rgba(23,24,22,.52) 22%, rgba(23,24,22,0) 35%, rgba(23,24,22,0) 65%, rgba(23,24,22,.52) 78%, rgba(23,24,22,.76) 100%)}
  .vs-bild__cols{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding-block:clamp(48px, 5vw, 80px)}
  .vs-bild__col{max-width:min(360px, 24vw)}
  .vs-bild__col--bad{justify-self:end}
  .vs-bild__tag{color:var(--paper);border-color:rgba(255,255,255,.72)}
  .vs-bild__col--good .vs-bild__tag{background:var(--paper);border-color:var(--paper);color:var(--ink)}
  .vs-bild__claim,.vs-bild__list li,.vs-bild__final{color:var(--paper)}
  .vs-bild__col--good .icon{color:var(--green-bright)}
  .vs-bild__col--bad .icon{color:#CFCFCB}
}

/* SimplyBook-Schaltflaeche am rechten Rand: erbt sonst die Fliesstextgroesse
   vom body und deckt auf dem Handy Text zu. */
button.simplybook-widget-button{font:600 16px/1.2 var(--sans);letter-spacing:.04em;padding:12px 16px}
@media (max-width:760px){button.simplybook-widget-button{font-size:13px;padding:8px 11px}}

/* Cookie-Banner (core ConsentGate) in den Farben der Site: er liest nur diese Variablen. */
:root{--consent-surface:var(--paper);--consent-border:var(--line);--consent-fg:var(--ink);--consent-font:400 17px/1.5 var(--sans);--consent-accent:var(--ink);--consent-accent-fg:var(--paper);--consent-decline-fg:var(--ink)}

/* ---------- Block 11: Feedback 29.09.2026 ---------- */
/* Beratung, Foto-Band: die Symbole der Spalte «Ohne Experten-Check» rot. Auf dem
   dunklen Scrim das hellere Rot der Kostenkurve, auf hellem Grund das Site-Rot. */
.vs-bild__col--bad .icon{color:var(--red)}
@media (min-width:1000px){.vs-bild__col--bad .icon{color:#EE1C25}}

/* Beratung, «Über 100 Architekten»: Kasten mit Personen-Symbol statt einer Zeile
   Fliesstext (wie der Hinweis auf der alten Website). */
.kf__trust{display:flex;align-items:stretch;margin:clamp(36px, 4vw, 52px) 0 0;padding:0;border:1px solid var(--line-2);background:var(--paper)}
.kf__trust-ico{flex:none;display:flex;align-items:center;justify-content:center;width:clamp(76px, 8vw, 104px);background:var(--stone);border-right:1px solid var(--line-2);color:var(--green-text)}
.kf__trust-ico .icon{width:48px;height:48px}
.kf__trust p{margin:0;align-self:center;padding:22px clamp(20px, 3vw, 32px);font-size:1.3125rem;line-height:1.4;color:var(--text);max-width:none}
.kf__trust strong{color:var(--green)}

/* Kompetenz, Nachweise: die zwei Spalten laufen unabhängig. Das gemeinsame
   Zeilenraster liess neben «Bürokratie-Dschungel» (eine Zeile) eine Lücke. */
@media (min-width:901px){
  @supports (grid-template-rows: subgrid){
    .compare.compare--nw{grid-template-rows:none}
    .compare--nw .compare-col{display:block;grid-row:auto}
  }
}


/* ---------- Block 12: Barrierefreiheit (Lighthouse 29.09.2026) ---------- */
/* Grüne Textlinks auf hellem Grund im dunkleren Kundengrün (#18A345 hat auf Stein nur 2.9:1). */
.car-meta a{color:#14733A}
/* Links im Fliesstext des Footers sind nicht nur an der Farbe erkennbar. */
.ft p a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Block 13: Erster Bildschirm ohne Warten auf das Skript (LCP, 29.09.2026) ---------- */
/* Titelzeilen, .hl-Texte und die Kopfbilder liefen erst an, wenn das Runtime
   html.is-ready bzw. .in setzte: bis dahin unsichtbar, das LCP kam ~2 s später.
   Dieselbe Bewegung läuft jetzt als CSS-Animation ab dem ersten Paint. */
.js .hl{opacity:1;transform:none;transition:none;animation:sg-rise .85s var(--ease) both}
.js .hl:nth-child(2){animation-delay:.1s}
.js .hl:nth-child(3){animation-delay:.2s}
.js .hl:nth-child(4){animation-delay:.3s}
.js h1 .ln>span{transform:none;transition:none;animation:sg-line .9s var(--ease) both}
.js h1 .ln:nth-child(2)>span{animation-delay:.11s}
.js h1 .ln:nth-child(3)>span{animation-delay:.22s}
.js .hero__media img,.js .page-hero__media img{clip-path:inset(0 0 0 0);transition:none;animation:sg-wipe 1.05s var(--ease) both}
@keyframes sg-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes sg-line{from{transform:translateY(108%)}to{transform:none}}
@keyframes sg-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .js .hl,.js h1 .ln>span,.js .hero__media img,.js .page-hero__media img{animation:none}
}

/* Der erste Abschnitt unter dem Seitenkopf steht auf dem Handy im ersten Bild:
   seine Kopfzeile und die ersten zwei Kacheln laufen per CSS ein statt erst,
   wenn das Runtime sie beobachtet (LCP auf /loesungen und /projekte). */
.js .page-hero + .sec .sec__head[data-reveal],
.js .page-hero + .sec [data-stagger]>:nth-child(-n+2){opacity:1;transform:none;transition:none;animation:sg-rise .85s var(--ease) .15s both}
.js .page-hero + .sec [data-stagger]>.tile:nth-child(-n+2) img{clip-path:inset(0 0 0 0);transition:none;animation:sg-wipe 1.05s var(--ease) .15s both}
@media (prefers-reduced-motion:reduce){
  .js .page-hero + .sec .sec__head[data-reveal],.js .page-hero + .sec [data-stagger]>:nth-child(-n+2),
  .js .page-hero + .sec [data-stagger]>.tile:nth-child(-n+2) img{animation:none}
}

/* Links im Fliesstext (Impressum, Datenschutz) nicht nur an der Farbe erkennbar. */
.prose a{text-decoration:underline;text-underline-offset:3px}