/* ==========================================================================
   Konvekta – Design-System "Refresh 2026"
   Nachgebaut nach den Layouts in /screens (Artboards 1920px, Export @3x).
   Alle Maße sind aus den Vorlagen gemessen und auf 1920px-Basis umgerechnet.
   ========================================================================== */

/* ── Schriften ───────────────────────────────────────────────────────────────
   Display  – Safiro (Headlines, Navigation, Buttons) · lokal eingebunden,
              Webfont-Lizenz liegt in assets/fonts/
   Text     – Aptos (Fließtext) · wird über Adobe Fonts geladen, siehe
              functions.php (KVK_ADOBE_FONTS_ID). Fallback bis der Kit greift.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Safiro";
  src:url("../fonts/safiro-regular.woff2") format("woff2"),
      url("../fonts/safiro-regular.woff")  format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Safiro";
  src:url("../fonts/safiro-medium.woff2") format("woff2"),
      url("../fonts/safiro-medium.woff")  format("woff");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Safiro";
  src:url("../fonts/safiro-semibold.woff2") format("woff2"),
      url("../fonts/safiro-semibold.woff")  format("woff");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Safiro";
  src:url("../fonts/safiro-bold.woff2") format("woff2"),
      url("../fonts/safiro-bold.woff")  format("woff");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  /* Farben – Pixel-genau aus den Vorlagen abgegriffen */
  --c-red:#E42312;            /* Signalrot (Akzent, Menü-Panel, CTA-Band) */
  --c-red-soft:#F07B72;       /* heller Rot-Keil im CTA-Band */
  --c-red-dark:#C41C0D;
  --c-ink:#3C3C3C;            /* Text & Headlines, Button-Füllung */
  --c-ink-soft:#5A5A5A;
  --c-dark:#323232;           /* dunkle Sektionen, Footer */
  --c-dark-2:#2B2B2B;
  --c-mist:#ECECEC;           /* graue Flächen / Split-Panels */
  --c-bar:#F3F4F6;            /* obere Service-Leiste */
  --c-line:#CCCCCC;           /* Trennlinien */
  --c-line-soft:#E2E2E2;
  --c-white:#FFFFFF;

  /* Typografie */
  --font-display:"Safiro","Helvetica Neue",Helvetica,Arial,"Noto Sans TC","PingFang TC",sans-serif;
  --font-text:"aptos","Aptos",Carlito,Calibri,"Segoe UI",system-ui,"Noto Sans TC","PingFang TC",sans-serif;

  --fs-body:17px;                          /* Vorlage: 17px – fest, schrumpft nicht mit dem Viewport (Kundenwunsch 09.09.) */
  --fs-small:17px;                         /* Kartentexte, Teaser, Tabellen, Kennzahlen: wie Fließtext (Kundenwunsch 10.09.) */
  --fs-meta:15px;                          /* nur noch Copyright-Zeile im Footer */
  --fs-micro:clamp(11px,.72vw,13px);
  --fs-label:clamp(12px,.78vw,14px);      /* Navigation & Buttons: 14px */
  --fs-eyebrow:clamp(13px,.92vw,17px);    /* Eyebrow: 17px, weit gesperrt */
  --fs-hero:clamp(31px,3.95vw,76px);      /* Hero-Headline, an Safiro kalibriert */
  --fs-d1:clamp(32px,4vw,64px);           /* Sektions-Headlines: 64px */
  --fs-d2:clamp(28px,2.9vw,48px);         /* Zwischen-Headlines: 48px */
  --fs-d3:clamp(24px,2.4vw,40px);         /* Panel-Headlines: 40px */
  --fs-d4:clamp(19px,1.72vw,31px);        /* Karten-/Listen-Titel: 31px */

  /* Raster */
  --container-base:1554px;                /* Sollbreite des Rasters, wird nie überschrieben */
  --container:var(--container-base);      /* Inhaltsbreite; linke Kante bei 183px */
  --container-text:1200px;
  --container-narrow:800px;
  --gutter:clamp(20px,3.2vw,60px);
  --edge:max(var(--gutter),calc((100vw - var(--container))/2));
  /* tatsächliche Rasterbreite an dieser Fenstergröße – für Elemente, die aus
     einer schmaleren Spalte heraus über die volle Breite laufen sollen */
  --grid-w:min(var(--container-base),calc(100vw - 2*var(--gutter)));

  /* Geometrie der schrägen Kanten (aus den Vorlagen gemessen) */
  --slant:6deg;                          /* Hero-Schräge, aus der Vorlage gemessen */
  --slant-cta:6.6deg;

  /* Bewegung */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.6s;
}

/* ── Reset & Basis ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--c-white);color:var(--c-ink);
  font-family:var(--font-text);font-size:var(--fs-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
/* Lange deutsche Komposita müssen umbrechen dürfen */
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:400;color:var(--c-ink);margin:0 0 .5em;
  line-height:1.18;letter-spacing:-.01em;overflow-wrap:break-word;hyphens:auto}
/* Nur lange Wörter trennen, mind. 4 Zeichen je Seite – sonst mobil „En-ergie“, „Kun-den“ */
h1,h2,h3,h4,h5,.hero__title{hyphenate-limit-chars:10 4 4;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4}
/* Redaktion hat Umbrüche gesetzt („|“, „(-)“) – dann keine automatische Trennung */
.hy-manual{hyphens:manual}
/* Listenabstände nur im redaktionellen Text – nicht in Navigationen */
.rich ul,.rich ol,.acc__body ul,.acc__body ol,.card__text ul,.card__text ol{margin:0 0 1.1em;padding-left:1.2em}
.rich li,.acc__body li,.card__text li{margin-bottom:.3em}
ul,ol{margin:0;padding:0}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--c-line);margin:2.5rem 0}
::selection{background:var(--c-red);color:#fff}
:focus-visible{outline:2px solid var(--c-red);outline-offset:3px}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;z-index:999}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.6rem 1.2rem;box-shadow:0 4px 20px rgba(0,0,0,.2)}

/* ── Raster-Helfer ───────────────────────────────────────────────────────── */
.container{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.container--text{max-width:calc(var(--container-text) + 2*var(--gutter))}
.container--narrow{max-width:calc(var(--container-narrow) + 2*var(--gutter))}
.text-center{text-align:center}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:200;background:var(--c-white)}

/* Obere Service-Leiste: Suche + Sprachwahl */
.topbar{background:var(--c-bar);font-family:var(--font-display)}
.topbar__inner{display:flex;align-items:center;gap:clamp(16px,3vw,52px);min-height:65px}
.search-form{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--c-line);
  height:30px;padding:0 10px;width:clamp(160px,17vw,230px)}
.search-form svg{width:15px;height:15px;color:var(--c-ink-soft);flex:none}
.search-form input{border:0;background:none;font:inherit;font-family:var(--font-display);
  font-size:var(--fs-micro);letter-spacing:.02em;color:var(--c-ink);width:100%;padding:0}
.search-form input::placeholder{color:#9A9A9A;letter-spacing:.02em}
.search-form input:focus{outline:none}
.search-form button{border:0;background:none;padding:0;cursor:pointer;color:var(--c-ink-soft);display:flex}

.lang-switch{display:flex;gap:clamp(12px,1.2vw,20px);list-style:none;margin:0;padding:0}
.lang-switch a{font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--c-ink);
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.lang-switch a:hover{color:var(--c-red)}
.lang-switch .is-current a{color:var(--c-red);border-bottom-color:var(--c-red)}

/* Hauptleiste: Navigation links, Wortmarke rechts */
.navbar{background:var(--c-white)}
.navbar__inner{display:flex;align-items:center;gap:2rem;min-height:117px}
.site-brand{margin-left:auto;display:flex;align-items:center;flex:none}
.site-logo{height:34px;width:auto}      /* Vorlage: 229 x 33,6 px bei 1920 */
/* Markenwechsel für Besucher von convecta.ch (Klasse setzt das Kopf-Skript in functions.php) */
/* !important: die Markenwahl gilt absolut, auch gegen den Hell/Dunkel-Wechsel unten */
html:not(.is-convecta) .brand-convecta,html.is-convecta .brand-konvekta{display:none!important}
.site-logo--light{display:none}
.site-brand__text{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.02em}

.nav{display:flex;list-style:none;margin:0;padding:0;gap:clamp(18px,2.1vw,40px)}
.nav>li{position:relative;display:flex}   /* kein Grundlinien-Spalt unter den Links */
.nav>li>a{display:inline-flex;align-items:center;height:117px;line-height:1;
  font-family:var(--font-display);font-size:var(--fs-label);
  letter-spacing:.085em;text-transform:uppercase;color:var(--c-ink);position:relative;transition:color .2s}
.nav>li>a::after{content:"";position:absolute;left:0;right:100%;bottom:45px;height:1px;background:var(--c-red);
  transition:right .32s var(--ease)}
.nav>li:hover>a,
.nav>li.current-menu-item>a,
.nav>li.current-menu-ancestor>a,
.nav>li.current-page-ancestor>a{color:var(--c-red)}
.nav>li:hover>a::after,
.nav>li.current-menu-item>a::after,
.nav>li.current-menu-ancestor>a::after,
.nav>li.current-page-ancestor>a::after{right:0}

/* Rotes Dropdown-Panel */
.nav .sub-menu{position:absolute;top:100%;left:-26px;min-width:max-content;background:var(--c-red);
  list-style:none;margin:0;padding:24px 46px 26px 26px;z-index:10;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.nav>li:hover>.sub-menu,
.nav>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu li{margin:0}
.nav .sub-menu a{display:block;font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:#fff;padding:5px 0;opacity:.94;transition:opacity .18s,transform .18s var(--ease)}
.nav .sub-menu a:hover{opacity:1;transform:translateX(4px)}
/* 3. Ebene wird im roten Panel eingerückt statt ausgeklappt */
.nav .sub-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
  background:none;padding:0 0 0 16px;min-width:0}
.nav .sub-menu .sub-menu a{opacity:.78;font-size:11px}

/* Hamburger */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:7px;width:44px;height:44px;
  margin-left:auto;background:none;border:0;padding:0;cursor:pointer}
.nav-toggle span{display:block;height:2px;width:32px;background:var(--c-ink);
  transition:transform .34s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Vollflächiges rotes Mobil-Menü */
.mobile-nav{position:fixed;inset:0;z-index:210;background:var(--c-red);
  padding:96px 0 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .34s var(--ease),visibility .34s}
.mobile-nav.is-open{opacity:1;visibility:visible}
.mobile-nav ul{list-style:none;margin:0;padding:0}
.mobile-nav>ul:not(.mobile-nav__foot)>li{border-top:1px solid rgba(255,255,255,.55)}
.mobile-nav>ul:not(.mobile-nav__foot)>li:last-child{border-bottom:1px solid rgba(255,255,255,.55)}
.mobile-nav>ul:not(.mobile-nav__foot)>li>a{display:block;font-family:var(--font-display);font-size:clamp(15px,4.2vw,19px);
  letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:22px var(--gutter)}
.mobile-nav .menu-item-has-children>a{padding-right:64px}
.m-sub-toggle{position:absolute;top:8px;right:calc(var(--gutter) - 8px);width:48px;height:48px;
  background:none;border:0;cursor:pointer;display:grid;place-items:center;color:#fff}
.m-sub-toggle svg{width:22px;height:22px;transition:transform .3s var(--ease)}
.mobile-nav li.is-open>.m-sub-toggle svg{transform:rotate(180deg)}
.mobile-nav>ul>li{position:relative;margin:0}
.mobile-nav .sub-menu{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
.mobile-nav li.is-open>.sub-menu{max-height:80vh}
.mobile-nav .sub-menu a{display:block;color:#fff;opacity:.9;font-family:var(--font-display);
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:11px var(--gutter) 11px calc(var(--gutter) + 18px)}
.mobile-nav__search{padding:0 var(--gutter) 26px}
.mobile-nav__search .search-form{width:100%;max-width:none;height:46px;
  background:transparent;border-color:rgba(255,255,255,.6)}
.mobile-nav__search .search-form svg{color:#fff}
.mobile-nav__search .search-form input{color:#fff}
.mobile-nav__search .search-form input::placeholder{color:rgba(255,255,255,.75)}
.mobile-nav ul.mobile-nav__foot{padding:32px var(--gutter) 0;display:flex;gap:22px}
.mobile-nav__foot a{color:#fff;font-family:var(--font-display);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.85;padding-bottom:2px;border-bottom:1px solid transparent}
.mobile-nav__foot .is-current a{opacity:1;border-bottom-color:#fff}
body.nav-open{overflow:hidden}
body.nav-open .site-header{z-index:220;background:transparent}
body.nav-open .navbar{background:transparent}
body.nav-open .site-brand{opacity:0;pointer-events:none}
body.nav-open .nav-toggle span{background:#fff}

/* ==========================================================================
   Buttons & Links
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:clamp(14px,1.7vw,32px);
  min-height:40px;padding:11px 18px;position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--c-ink);background:none;cursor:pointer;
  font-family:var(--font-display);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--c-ink);line-height:1;
  transition:color .32s var(--ease),border-color .32s var(--ease)
}
.btn::before{content:"";position:absolute;inset:0;background:var(--c-ink);z-index:-1;
  transform:scaleX(0);transform-origin:left center;transition:transform .38s var(--ease)}
.btn:hover,.btn:focus-visible{color:#fff}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn__arrow{flex:none;width:clamp(30px,2.4vw,46px);height:8px;overflow:visible}
.btn__arrow line,.btn__arrow polyline{stroke:currentColor;stroke-width:1.2;fill:none}
.btn .btn__arrow{transition:transform .38s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn--solid{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.btn--solid::before{background:var(--c-red);transform:scaleX(1);opacity:0;transition:opacity .3s}
.btn--solid:hover::before{opacity:1}
.btn--solid:hover{border-color:var(--c-red)}
/* auf dunklem oder rotem Grund */
.bg--dark .btn,.bg--red .btn,.cta-band .btn,.hero .btn,.btn--light{border-color:#fff;color:#fff}
.bg--dark .btn::before,.bg--red .btn::before,.cta-band .btn::before,.hero .btn::before,.btn--light::before{background:#fff}
.bg--dark .btn:hover,.bg--red .btn:hover,.cta-band .btn:hover,.hero .btn:hover,.btn--light:hover{color:var(--c-ink)}
.cta-band .btn:hover{color:var(--c-red)}
.btn--down .btn__arrow{width:8px;height:20px}

/* Textlink mit Pfeil (Karten) */
.arrow-link{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);
  font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--c-red)}
.arrow-link svg{width:26px;height:8px;transition:transform .3s var(--ease)}
.arrow-link:hover svg{transform:translateX(5px)}

/* ── Eyebrow / Kicker: rot, gesperrt, mit feiner Unterlinie ──────────────── */
.eyebrow{display:inline-block;font-family:var(--font-display);font-size:var(--fs-eyebrow);
  letter-spacing:.11em;text-transform:uppercase;color:var(--c-red);
  border-bottom:1px solid var(--c-red);padding-bottom:5px;margin:0 0 clamp(18px,1.8vw,30px)}
.eyebrow--plain{border-bottom:0;padding-bottom:0}
.bg--dark .eyebrow{color:var(--c-red);border-color:var(--c-red)}

/* ── Überschriften-Skala ────────────────────────────────────────────────── */
.t-d1{font-size:var(--fs-d1);line-height:1.14}
.t-d2{font-size:var(--fs-d2);line-height:1.16}
.t-d3{font-size:var(--fs-d3);line-height:1.2}
.t-d4{font-size:var(--fs-d4);line-height:1.25}

/* ==========================================================================
   Sektionen: Hintergründe & Abstände
   ========================================================================== */
.block{--pad:clamp(44px,5.9vw,112px);position:relative;padding-block:var(--pad)}
.space--none{--pad:0px}
.space--compact{--pad:clamp(28px,3.4vw,64px)}
.space--large{--pad:clamp(56px,7.5vw,144px)}
/* Erste Sektion rückt 50 px näher an den Hero (Kundenwunsch 11.09.);
   mobil bleiben mind. 26 px unter der Schräge (Vorlage Zeichenfläche 1: ~29 px) */
.block--hero+.block{padding-top:max(26px,calc(var(--pad) - 50px))}
.bg--default{background:var(--c-white)}
.bg--muted{background:var(--c-mist)}
.bg--dark{background:var(--c-dark);color:#fff}
.bg--dark h1,.bg--dark h2,.bg--dark h3,.bg--dark h4{color:#fff}
.bg--primary,.bg--red{background:var(--c-red);color:#fff}
.bg--primary h1,.bg--primary h2,.bg--primary h3{color:#fff}
/* gleichfarbige Nachbarn nicht doppelt polstern */
.block.bg--default+.block.bg--default,
.block.bg--muted+.block.bg--muted,
.block.bg--dark+.block.bg--dark{padding-top:0}
.block.has-bg-image{background-size:cover;background-position:center}
.block.bg--dark.has-bg-image::before{content:"";position:absolute;inset:0;background:rgba(20,20,20,.66)}
.block.has-bg-image>.container{position:relative;z-index:1}

/* Zentrierter Sektionskopf (Standard im neuen Layout) */
.block__head{max-width:var(--container-narrow);margin:0 auto clamp(28px,3vw,54px);text-align:center}
.block__head .eyebrow{margin-bottom:clamp(10px,.85vw,16px)}
.block__title{font-size:var(--fs-d1);margin:0 auto;max-width:880px}
/* Zwischen-Headline statt Seiten-Headline */
.head--md .block__title{font-size:var(--fs-d2)}
.align--left .block__title{margin-inline:0}
.block__lead{margin:clamp(22px,2.4vw,44px) auto 0;font-weight:700}
.block__intro{margin:clamp(18px,1.8vw,32px) auto 0}
.block__actions{margin-top:clamp(26px,2.6vw,46px);display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.align--left .block__head{text-align:left;margin-inline:0}
.align--left .block__actions,.block__actions.align--left{justify-content:flex-start}

/* Fließtext */
.rich{max-width:100%}
.rich>*:last-child{margin-bottom:0}
.rich a{color:var(--c-red);border-bottom:1px solid currentColor}
.rich img{margin:clamp(24px,3vw,48px) 0}
.rich h2{font-size:var(--fs-d3);margin-top:1.6em}
.rich h3{font-size:var(--fs-d4);margin-top:1.5em}
.rich h4{font-size:1.15em;font-family:var(--font-text);font-weight:700;margin-top:1.4em}
.bg--dark .rich a{color:#fff}

/* ==========================================================================
   Hero – schräg gestellte Bildfläche mit grauem Trägerband
   ========================================================================== */
/* Nur die Oberkante wird beschnitten (Header); das Foto darf unten überhängen. */
/* Die Fotofläche ist ein Trapez aus der Vorlage (Messpunkte bei 1920 px):
   obere linke Ecke x=150 · untere linke Ecke x=215/y=758 · rechts 179 px höher.
   Als clip-path gebaut – dadurch keine gedrehte Box, kein seitlicher Überlauf
   und eine sauber schräge Unterkante. Nur der Bildinhalt wird gekippt. */
.hero{
  --hero-drop:9.32vw;                 /* Höhenversatz der Unterkante = 6° */
  position:relative;isolation:isolate;
  height:clamp(340px,39.5vw,758px);
  display:grid;align-content:center;justify-items:center
}
.hero--page{height:clamp(190px,25vw,480px)}

/* graues Band mit schräg auslaufender Unterkante */
.hero__band{position:absolute;inset:0;background:var(--hero-band,var(--c-mist));z-index:0;
  clip-path:polygon(0 0,100% 0,100% calc(89% - var(--hero-drop)),0 89%)}

/* Bildfläche */
.hero__stage{position:absolute;inset:0;z-index:1;overflow:hidden;
  clip-path:polygon(7.8% 0,100% 0,100% calc(100% - var(--hero-drop)),11.2% 100%);
  animation:kvkFade .8s var(--ease) both}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.hero__slide.is-active{opacity:1}
/* Bildinhalt läuft gerade – schräg ist nur die Fläche (clip-path am Stage) */
.hero__slide img,.hero__slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Inhalt */
.hero__inner{position:relative;z-index:3;width:100%;max-width:var(--container);
  padding-inline:var(--gutter);text-align:center;color:#fff;
  margin-bottom:clamp(20px,5.7vw,110px)}
.hero--page .hero__inner{margin-bottom:0}
/* Detailseiten: Titel dunkel, linksbündig in der Inhaltsspalte */
.hero--inline{justify-items:stretch;height:auto;min-height:clamp(240px,25vw,480px);
  padding-block:clamp(44px,5vw,96px)}
.hero--inline .hero__inner{color:var(--c-ink);text-align:left;margin:0;
  max-width:calc(var(--container-text) + 2*var(--gutter));margin-inline:auto;
  display:grid;grid-template-columns:minmax(180px,1fr) 2.05fr;gap:clamp(24px,3.4vw,64px)}
.hero--inline .hero__inner>*{grid-column:2;justify-self:start}
.hero--inline .hero__inner>.hero__title{justify-self:stretch}
.hero--inline .hero__title{color:var(--c-ink);text-shadow:none;font-size:var(--fs-d1)}
.hero__title{color:#fff;font-family:var(--font-display);font-weight:400;   /* Safiro auch auf Slides 2+, die als <p> ausgegeben werden */
  font-size:var(--fs-hero);line-height:1.16;margin:0 auto;
  max-width:min(100%,1000px);text-wrap:balance;   /* bleibt auch ohne manuelle Umbrüche im Bild (Vorlage: ~900 px) */
  text-shadow:0 1px 26px rgba(0,0,0,.22)}
/* Dunkler Hero-Text für helle Bilder (Feld „Textfarbe“) */
.hero__inner.is-dark{color:var(--c-ink)}
.hero__inner.is-dark .hero__title{color:var(--c-ink);text-shadow:none}
.hero__inner.is-dark .hero__text{color:var(--c-ink)}
.hero__inner.is-dark .eyebrow{color:var(--c-red);border-color:var(--c-red)}
.hero__inner.is-dark .btn{border-color:var(--c-ink);color:var(--c-ink)}
.hero__inner.is-dark .btn::before{background:var(--c-ink)}
.hero__inner.is-dark .btn:hover{color:#fff}
.hero__title>span{display:block}
/* Am Handy werden die manuellen Umbrüche ignoriert – der Titel fliesst. */
@media (max-width:680px){
  .hero__title>span{display:inline}
  .hero__title>span+span::before{content:" "}
  /* Vorlage mobil: Titel ~30 px mit breiterem Rand; „Energierückgewinnung“ passt so in eine Zeile */
  .hero__inner{padding-inline:32px}
  .hero__title{font-size:clamp(26px,7.4vw,31px)}
  /* Vorlage mobil: Bild randlos, nur die Unterkante schräg (6° über die volle Breite) */
  .hero{--hero-drop:10.51vw}
  .hero__stage,.hero.hero--cover .hero__stage{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--hero-drop)),0 100%)}
}
.hero__text{margin:22px auto 0;max-width:640px;color:#fff}
.hero__actions{margin-top:clamp(24px,2.6vw,40px);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* Hero bis unter den Header (Referenz-Vorlage, 1920 px gemessen):
   Kasten 936 hoch ab Seitenoberkante, blaue Trägerfläche #315B81 mit
   schräger Unterkante (links y=865, 6°), Bildtrapez obere linke Ecke x=122,
   untere linke Ecke x=220/y=936, rechts 179 px höher. Die dunkle Folge-
   sektion füllt hinter der Schräge – deshalb ist der Kasten selbst dunkel. */
.hero--cover{
  height:clamp(440px,48.75vw,936px);
  margin-top:calc(-1 * var(--header-h,182px));
  background:var(--c-dark)
}
.hero--cover .hero__band{background:var(--hero-band,#315B81);
  clip-path:polygon(0 0,100% 0,100% calc(92.4% - var(--hero-drop)),0 92.4%)}
.hero--cover .hero__stage{
  clip-path:polygon(6.35% 0,100% 0,100% calc(100% - var(--hero-drop)),11.46% 100%)}
.hero--cover .hero__inner{margin-bottom:0;padding-top:calc(var(--header-h,182px) * .25)}
/* Folgesektion rückt näher an die Schräge heran (Vorlage: ~64 px) */
.block--hero:has(.hero--cover)+.block.bg--dark{padding-top:clamp(28px,3.3vw,64px)}

/* Beim Scrollen schrumpft die Leiste (117 -> 76 px), die Service-Leiste klappt
   ein; main.js setzt is-scrolled ab 120 px (mit Hysterese gegen Flackern). */
.topbar{max-height:80px;overflow:hidden;transition:max-height .35s var(--ease),opacity .25s}
.navbar__inner{transition:min-height .35s var(--ease)}
.nav>li>a{transition:height .35s var(--ease),color .2s}
.nav>li>a::after{transition:right .32s var(--ease),bottom .35s var(--ease)}
.site-logo{transition:height .35s var(--ease)}
@media (min-width:1081px){
  .site-header.is-scrolled .topbar{max-height:0;opacity:0}
  .site-header.is-scrolled .navbar__inner{min-height:76px}
  .site-header.is-scrolled .nav>li>a{height:76px}
  .site-header.is-scrolled .nav>li>a::after{bottom:24px}
  .site-header.is-scrolled .site-logo{height:28px}
  .site-header.is-scrolled .navbar{box-shadow:0 1px 0 var(--c-line-soft)}
}

/* Header über dem Cover-Hero: transparent, alles in Weiss; nach dem ersten
   Scrollen wieder die weisse Leiste (Klasse is-scrolled setzt main.js) */
.site-header{transition:background-color .35s var(--ease)}
body.has-hero-cover .site-header:not(.is-scrolled){background:transparent}
body.has-hero-cover .site-header:not(.is-scrolled) .topbar{background:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.28)}
body.has-hero-cover .site-header:not(.is-scrolled) .navbar{background:transparent}
body.has-hero-cover .site-header:not(.is-scrolled) .search-form{background:transparent;border-color:rgba(255,255,255,.7)}
body.has-hero-cover .site-header:not(.is-scrolled) .search-form svg,
body.has-hero-cover .site-header:not(.is-scrolled) .search-form input,
body.has-hero-cover .site-header:not(.is-scrolled) .search-form button{color:#fff}
body.has-hero-cover .site-header:not(.is-scrolled) .search-form input::placeholder{color:rgba(255,255,255,.8)}
body.has-hero-cover .site-header:not(.is-scrolled) .lang-switch a{color:rgba(255,255,255,.85)}
body.has-hero-cover .site-header:not(.is-scrolled) .lang-switch a:hover,
body.has-hero-cover .site-header:not(.is-scrolled) .lang-switch .is-current a{color:#fff;border-bottom-color:#fff}
body.has-hero-cover .site-header:not(.is-scrolled) .nav>li>a{color:#fff}
body.has-hero-cover .site-header:not(.is-scrolled) .nav>li>a::after{background:#fff}
/* Über dem Cover-Hero die helle Fassung (weiss, Dreieck rot) statt der dunklen */
body.has-hero-cover .site-header:not(.is-scrolled) .site-logo{display:none}
body.has-hero-cover .site-header:not(.is-scrolled) .site-logo--light{display:block}
body.has-hero-cover .site-header:not(.is-scrolled) .nav-toggle span{background:#fff}

/* Texte je Slide: alle Captions liegen in derselben Rasterzelle (Höhe = höchste
   Caption, kein Springen), main.js schaltet is-active synchron zum Bild. */
.hero__captions{position:relative;z-index:3;width:100%;display:grid;justify-items:center}
.hero__caption{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
  animation:none;transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
.hero__caption.is-active{opacity:1;visibility:visible;transform:none}
.hero__captions .hero__inner{animation:none}
.hero--inline .hero__captions{justify-items:stretch}
/* Hero-Inhalt: ein einziges ruhiges Einfaden von unten */
.hero__inner{animation:kvkFadeUp .8s .2s var(--ease) both}
.hero__dots{animation:kvkFade .8s .5s var(--ease) both}
@keyframes kvkFade{from{opacity:0}to{opacity:1}}
@keyframes kvkFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* Slide-Punkte */
.hero__dots{position:absolute;left:50%;bottom:clamp(40px,7.9vw,151px);transform:translateX(-50%);
  z-index:4;display:flex;gap:12px}
.hero__dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.55);transition:background .25s,transform .25s}
.hero__dots button.is-active{background:#fff;transform:scale(1.25)}

/* Rotes Siegel */
.hero__badge{position:absolute;z-index:5;right:clamp(16px,8.6vw,165px);bottom:clamp(0px,3.9vw,75px);
  width:clamp(104px,9.9vw,190px);aspect-ratio:1;border-radius:50%;background:var(--c-red);color:#fff;
  display:grid;place-items:center;text-align:center;padding:10px;
  font-family:var(--font-display);font-size:clamp(11px,.95vw,17px);line-height:1.28;
  animation:kvkFade .8s .45s var(--ease) both}
a.hero__badge{transition:background .25s}
a.hero__badge:hover{background:var(--c-red-dark)}
/* Freigestelltes Siegel-Bild statt Kreis */
.hero__badge--img{background:none;padding:0;width:clamp(110px,11vw,190px)}
/* Siegel je Slide: liegen übereinander und wechseln mit dem Bild */
/* Eigene Einblend-Animation abschalten – sie würde das Ausblenden überstimmen */
.hero__badge--slide{animation:none;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s,background-color .25s}
.hero__badge--slide.is-active{opacity:1;visibility:visible}
.hero__badge--img img{width:100%;height:auto}
/* Desktop: Siegel-Schrift 24 px (Kundenwunsch 10/26); der Kreis wächst mit,
   damit „Leistungs-“ & Co. noch hineinpassen */
@media (min-width:1081px){
  .hero__badge:not(.hero__badge--img){font-size:24px;line-height:1.2;width:clamp(180px,11vw,210px);padding:18px}
}

/* Mute- und Scroll-Schalter */
/* links positioniert, damit sie nie mit dem Siegel kollidieren */
.hero__util{position:absolute;z-index:5;bottom:clamp(40px,7.9vw,151px);left:16%;
  display:flex;gap:12px}
.hero__util button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background .25s,border-color .25s}
.hero__util button:hover{background:var(--c-red);border-color:var(--c-red)}
.hero__util svg{width:18px;height:18px}

/* ==========================================================================
   Intro-Block (Eyebrow + große Headline + Lead + Text + Button)
   ========================================================================== */
.intro{text-align:center}
.intro .eyebrow{margin-bottom:clamp(16px,1.6vw,26px)}
.intro__title{font-size:var(--fs-d1);margin:0 auto;max-width:880px}
.head--md .intro__title{font-size:var(--fs-d2)}
.intro__lead{max-width:var(--container-narrow);margin:clamp(26px,3vw,52px) auto 0;font-weight:700}
.intro__body{max-width:var(--container-narrow);margin:clamp(18px,1.8vw,30px) auto 0}
/* Fettzeile als eigene, schmalere Zeile – wie in der Vorlage */
.intro__body>p:first-child:has(>strong:only-child){max-width:660px;margin-inline:auto;
  margin-bottom:clamp(22px,2.2vw,38px)}
.intro__actions{margin-top:clamp(28px,3vw,52px);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* Ein Bild allein in der zentrierten Textspalte (Weltkarte auf der Kontaktseite,
   15.09.) läuft über die volle Rasterbreite statt über die 800-px-Spalte.
   Das Adressraster darum herum wird dafür zur einfachen Spalte. */
.intro__body .loc-grid:has(img){display:block}
.intro__body p:has(>img:only-child),
.intro__body address:has(>img:only-child){margin-inline:0}
.intro__body img.size-large,
.intro__body img.size-full,
.intro__body img.aligncenter{display:block;height:auto;
  width:var(--grid-w);max-width:none;margin-inline:calc(50% - var(--grid-w)/2)}

/* ==========================================================================
   Split – randloses Bild neben Textfeld (50/50)
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:clamp(320px,35vw,672px)}
.split__media{position:relative;overflow:hidden;order:2}
.split__media img,.split__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__panel{display:flex;flex-direction:column;justify-content:center;background:var(--c-mist);
  padding-block:clamp(40px,5vw,96px)}
.split__inner{max-width:500px}
.split--media-left .split__media{order:-1}
/* Bild rechts -> Text beginnt am Seitenrand des Rasters */
.split:not(.split--media-left) .split__panel{padding-left:var(--edge);padding-right:clamp(24px,3.4vw,64px)}
/* Bild links  -> Text beginnt knapp hinter der Blattmitte */
.split--media-left .split__panel{padding-left:clamp(24px,5.5vw,105px);padding-right:var(--edge)}
.split__title{font-size:var(--fs-d3);margin:0 0 clamp(18px,2vw,32px)}
.split__text{margin:0 0 clamp(24px,2.6vw,44px)}
.split--white .split__panel{background:var(--c-white)}
.split--dark .split__panel{background:var(--c-dark);color:#fff}
.split--dark .split__title{color:#fff}

/* Referenz-Zitat auf dunklem Grund */
.split--quote .split__panel{background:var(--c-dark);color:#fff}
.split--quote .split__title{color:#fff}
.split--quote blockquote{margin:0 0 clamp(24px,2.6vw,40px);font-style:normal}
.split__byline{font-size:var(--fs-small);line-height:1.6}
.split__byline strong{display:block;font-weight:700}

/* ==========================================================================
   Karten-Raster (Bild + Eyebrow + Titel + Text + Button)
   ========================================================================== */
.cards{--card-gap:clamp(24px,2.6vw,44px);display:grid;gap:var(--card-gap)}
.cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Genau drei Karten (z. B. „Have a look at the other components“): Kartenbreite
   wie im Vierer-Raster, die Reihe steht mittig (Kundenwunsch 11.09.). */
@media (min-width:901px){
  .cards.cols-3:has(>:nth-child(3):last-child),
  .cards.cols-4:has(>:nth-child(3):last-child){
    grid-template-columns:repeat(3,calc((100% - 3*var(--card-gap))/4));
    justify-content:center}
}
.card{display:flex;flex-direction:column}
.card__media{overflow:hidden;margin-bottom:clamp(16px,1.6vw,26px);aspect-ratio:4/3;background:var(--c-mist)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__eyebrow{display:inline-block;align-self:flex-start;font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--c-red);
  border-bottom:1px solid var(--c-red);padding-bottom:3px;margin-bottom:12px}
.card__title{font-size:var(--fs-d4);margin:0 0 clamp(14px,1.4vw,22px);transition:color .2s}
.card:hover .card__title{color:var(--c-red)}
/* Kartentitel: manuelle Umbrüche, am Handy fliessend */
.card__title>span,.card__title>a>span{display:block}
@media (max-width:680px){
  .card__title>span,.card__title>a>span{display:inline}
  .card__title>span+span::before,.card__title>a>span+span::before{content:" "}
}
/* Spaltentexte: enger gesetzt, Listen schliessen direkt an (Kundenwunsch 14.09.) */
.card__text{font-size:var(--fs-small);line-height:1.35;margin:0 0 clamp(18px,2vw,30px);flex:1}
.card__text p{margin:0 0 .15em}
.card__text ul,.card__text ol{padding-left:0;list-style:none;margin:0 0 .9em}
.card__text li{margin-bottom:.1em}
.card__text>:first-child{margin-top:0}
.card__text strong{display:block;margin-top:.85em}
.card__foot{margin-top:auto}
/* schmale Variante mit rotem Strich statt Bild */
.card--rule .card__title::before{content:"";display:block;width:46px;height:1px;background:var(--c-red);margin-bottom:14px}

/* ==========================================================================
   Säulen / Verpflichtungen – Kreis-Icons
   ========================================================================== */
.pillars{display:grid;gap:clamp(28px,3.4vw,64px);text-align:center;max-width:1240px;margin-inline:auto}
.pillars.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pillars.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pillars.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pillar{max-width:360px;margin-inline:auto}
/* Variante: Boxen auf grauer Fläche (Service-Pakete) */
.pillars.is-boxed{align-items:stretch}
.pillars.is-boxed .pillar{max-width:none;background:var(--c-mist);
  padding:clamp(26px,3vw,52px) clamp(20px,2.2vw,38px);display:flex;flex-direction:column}
.pillars.is-boxed .pillar__title{font-family:var(--font-text);font-weight:700;
  font-size:var(--fs-label);letter-spacing:.11em;text-transform:uppercase}
.pillars.is-boxed .pillar__text{flex:1}
.pillars.is-boxed .pillar__text::after{content:"";display:block;height:1px;background:var(--c-line);
  margin-top:clamp(20px,2.2vw,36px)}
.pillar__icon{width:clamp(58px,4.8vw,92px);aspect-ratio:1;border-radius:50%;
  border:solid var(--c-red);border-width:clamp(2px,.17vw,3.3px);   /* Vorlage: 3,3 px Ring bei 94 px Kreis */
  color:var(--c-red);display:grid;place-items:center;margin:0 auto clamp(18px,2vw,32px);
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.pillar__icon svg,.pillar__icon i{width:58%;height:58%}   /* Vorlage: Symbol füllt den Kreis deutlich stärker */
/* Icon-Hover auf Kundenwunsch entfernt (2026-09-07) */
.pillar__title{font-size:var(--fs-d4);margin:0 0 clamp(12px,1.2vw,20px)}
.pillar__lead{font-weight:700;font-size:var(--fs-small);margin:0 0 .9em}
.pillar__text{font-size:var(--fs-small);margin:0}

/* ==========================================================================
   Feature-Reihen (Solutions-Übersicht): rotes Label links, Einträge rechts
   ========================================================================== */
.frows{max-width:var(--container-text);margin-inline:auto}
.frow{display:grid;grid-template-columns:minmax(180px,1fr) 2.54fr;gap:clamp(24px,3vw,52px);
  padding-block:clamp(34px,4vw,72px);position:relative;isolation:isolate}
/* Jede zweite Reihe grau; die Fläche läuft über die volle Fensterbreite. Die
   Farbe trennt die Reihen, die frühere Linie entfällt dafür. (16.09.) */
.frow:nth-child(even)::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;
  left:50%;width:100vw;transform:translateX(-50%);background:var(--c-mist)}
.frow__label{font-family:var(--font-display);font-size:var(--fs-d4);line-height:1.3;color:var(--c-red);margin:0}
.frow__sub{font-family:var(--font-display);font-size:clamp(15px,1.05vw,19px);line-height:1.35;color:var(--c-red);margin:.5em 0 0}  /* komplettes Label rot (11.09.) */
.frow__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,52px)}
.fitem__title{font-size:var(--fs-d4);margin:0 0 clamp(14px,1.4vw,22px)}
/* Roter Strich hängt 15 px in den Reihen-Abstand hinein, damit der Eintragstitel
   rechts auf der Höhe des roten Labels links sitzt (16.09.). Das Padding der
   Reihe bleibt unverändert – nur der Strich rückt nach oben. */
.fitem__title::before{content:"";display:block;width:46px;height:1px;background:var(--c-red);margin:-15px 0 16px}
.fitem__text{font-size:var(--fs-small);margin:0 0 clamp(18px,2vw,30px)}

/* ==========================================================================
   Seitenlabel-Layout (Fachtexte): rotes Label links, Inhalt rechts
   ========================================================================== */
.sidelabel{display:grid;grid-template-columns:minmax(180px,1fr) 2.05fr;gap:clamp(24px,3.4vw,64px);
  max-width:var(--container-text);margin-inline:auto;align-items:start}
.sidelabel__label-wrap{position:sticky;top:150px}
.sidelabel__label{font-family:var(--font-display);font-size:var(--fs-d4);line-height:1.3;color:var(--c-red);
  margin:0;font-weight:400}
.sidelabel__body>*:first-child{margin-top:0}
/* Seitentitel in der Inhaltsspalte braucht Luft zum Fließtext */
.sidelabel__body .block__title{margin:0 0 clamp(26px,2.8vw,48px);max-width:none}
.sidelabel__sub{font-size:clamp(19px,1.5vw,27px);font-weight:400;margin:0 0 clamp(14px,1.4vw,24px)}
.sidelabel__icon{margin:0 0 clamp(16px,1.6vw,26px)}
.sidelabel--head .sidelabel__body{border-bottom:1px solid var(--c-line);padding-bottom:clamp(16px,1.6vw,26px)}
/* Aufeinanderfolgende Label-Blöcke: feine Trennlinie, enge Abstände.
   Gemessen in der Vorlage: ~46 px über und ~36 px unter der Linie. */
.block--text_block.align--side+.block--text_block.align--side{padding-block:0}
.block--text_block.align--side+.block--text_block.align--side .sidelabel{
  border-top:1px solid var(--c-line);
  padding-block:clamp(30px,2.6vw,46px) clamp(24px,2vw,36px)}
/* Wechselt der Hintergrund (weiss/grau), trennt schon die Farbe – keine Linie
   und oben wieder normaler Abstand statt der engen Stapel-Variante (16.09.) */
.block--text_block.align--side.bg--muted+.block--text_block.align--side .sidelabel,
.block--text_block.align--side+.block--text_block.align--side.bg--muted .sidelabel{border-top:0}
/* nur Inhalt, ohne Label (bündig mit der Inhaltsspalte) */
.sidelabel__body--full{grid-column:2}
@media (max-width:900px){.sidelabel__label-wrap{position:static}}

/* ==========================================================================
   Akkordeon / FAQ
   ========================================================================== */
.accordion{max-width:var(--container-text);margin-inline:auto;border-top:1px solid var(--c-line)}
.acc__item{border-bottom:1px solid var(--c-line)}
.acc__head{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;padding:clamp(18px,1.9vw,30px) 0;
  font-family:var(--font-display);font-size:clamp(17px,1.36vw,26px);color:var(--c-ink);line-height:1.35}
.acc__head:hover{color:var(--c-red)}
.acc__icon{flex:none;width:26px;height:14px;transition:transform .34s var(--ease)}
.acc__icon polyline{stroke:currentColor;stroke-width:1.4;fill:none}
.acc__item.is-open .acc__icon{transform:rotate(180deg)}
.acc__panel{overflow:hidden;height:0;transition:height .38s var(--ease)}
.acc__body{padding:0 clamp(40px,5vw,90px) clamp(22px,2.4vw,38px) 0;font-size:var(--fs-body);line-height:1.5;color:var(--c-ink-soft)}  /* FAQ-Antwort in Fließtextgröße (10.09.) */
.bg--dark .acc__head{color:#fff}
.bg--dark .acc__item,.bg--dark .accordion{border-color:rgba(255,255,255,.28)}
.bg--dark .acc__body{color:rgba(255,255,255,.8)}

/* ==========================================================================
   CTA-Band – rote Fläche mit schräger Oberkante und hellem Keil
   ========================================================================== */
/* Gemessene Geometrie der Vorlage (1920 px): Oberkante steigt mit 6° nach rechts,
   Eckpunkt oben rechts bei x=1708, rechte Kante endet bei x=1795, Unterkante flach
   am Footer. Als clip-path gebaut – eine gedrehte Box würde oben rechts anschlagen. */
.cta-band{position:relative;overflow:hidden;isolation:isolate;
  --cta-fill:var(--c-red);--cta-fill-2:var(--c-red-soft);color:#fff;
  padding-block:clamp(110px,14.8vw,285px) clamp(56px,7.4vw,142px);text-align:center}
/* Die Farbfläche ist die schräge Form, nicht die Sektion selbst */
.block--cta.bg--default,.block--cta.bg--muted,.block--cta.bg--dark,.block--cta.bg--primary{background:none}
.block--cta.bg--muted{--cta-fill:var(--c-mist);--cta-fill-2:#E0E0E0;color:var(--c-ink)}
.block--cta.bg--dark{--cta-fill:var(--c-dark);--cta-fill-2:#484848;color:#fff}
.block--cta.bg--default{--cta-fill:var(--c-mist);--cta-fill-2:#E0E0E0;color:var(--c-ink)}
.block--cta.bg--primary{--cta-fill:var(--c-red);--cta-fill-2:var(--c-red-soft);color:#fff}
.cta-band__shape,.cta-band__wedge{position:absolute;pointer-events:none}
.cta-band__shape{inset:0;z-index:-1;background:var(--cta-fill);
  clip-path:polygon(0 9.35vw,89% 0,93.5% 100%,0 100%)}
.cta-band__wedge{left:88%;right:0;top:6.2vw;bottom:0;z-index:-2;background:var(--cta-fill-2);
  clip-path:polygon(0 1.25vw,100% 0,100% 100%,0 100%)}
/* nur das helle Abschluss-Band bekommt dunkle Buttons – nicht die rote Box */
.cta-band.bg--muted .btn,.cta-band.bg--default .btn{border-color:var(--c-ink);color:var(--c-ink)}
.cta-band.bg--muted .btn::before,.cta-band.bg--default .btn::before{background:var(--c-ink)}
.cta-band.bg--muted .btn:hover,.cta-band.bg--default .btn:hover{color:#fff}
/* Textspalte im Band ist breiter als der Standard-Schmaltext (gemessen: 950 px) */
.cta-band__inner{max-width:960px;margin-inline:auto;position:relative;z-index:1}
.cta-band__title{color:inherit;font-size:var(--fs-d1);margin:0 0 clamp(26px,3vw,52px)}
.cta-band__text{margin:0 0 clamp(20px,2vw,34px)}
.cta-band__lead{font-weight:700;margin:0 0 clamp(28px,3vw,50px)}

/* Rote Ankündigungs-Box (leicht gekippt) */
.announce{position:relative;max-width:var(--container-text);margin-inline:auto}
.announce__box{background:var(--c-red);color:#fff;padding:clamp(32px,4vw,72px) clamp(28px,4vw,76px);
  transform:rotate(-2.2deg);transform-origin:center}
.announce__inner{max-width:760px}
.announce__title{color:#fff;font-size:var(--fs-d3);margin:0 0 clamp(22px,2.4vw,40px);line-height:1.3}

/* ==========================================================================
   Referenz-Raster & Filter
   ========================================================================== */
/* Filter im selben Spaltenraster wie die Kacheln darunter: jeder Filter ist so breit wie ein Bild (12.10.) */
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px clamp(20px,2.2vw,40px);
  margin-bottom:clamp(24px,2.6vw,44px)}
.filters.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.filters.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.filters.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Die Filterleiste ist ein eigener Stapelkontext (will-change der Einblend-Animation);
   ohne z-index landete das geöffnete Dropdown hinter den später gezeichneten Raster-Karten. */
.filters{position:relative;z-index:30}
/* nur ein Filter (News): eine Spalte statt drei */
.filters--one{grid-template-columns:minmax(0,376px)}
.filter{position:relative}
.filter.is-open{z-index:31}
.filter__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:1px solid var(--c-line);cursor:pointer;padding:11px 14px;min-height:38px;
  font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:inherit;transition:border-color .2s}
.filter__btn:hover,.filter.is-open .filter__btn{border-color:var(--c-red)}
.filter__btn svg{width:9px;height:16px;flex:none;transition:transform .3s var(--ease)}
.filter.is-open .filter__btn svg{transform:rotate(180deg)}
.filter__list{position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:20;background:#fff;
  border:1px solid var(--c-line);max-height:280px;overflow-y:auto;list-style:none;margin:0;padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.24s var(--ease)}
.filter.is-open .filter__list{opacity:1;visibility:visible;transform:none}
.filter__list button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:8px 14px;font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-ink)}
.filter__list button:hover,.filter__list button.is-active{background:var(--c-mist);color:var(--c-red)}

.refs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,54px) clamp(20px,2.2vw,40px)}
.refs.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.block--dynamic_listing.w--text>.container{max-width:calc(var(--container-text) + 2*var(--gutter))}
/* Referenzen in der Inhaltsspalte: deutlich abgesetzt mit Linie darüber (11.09.) */
.block--dynamic_listing.ref-listing.w--text>.container{border-top:1px solid var(--c-line);
  padding-top:clamp(30px,3.2vw,58px);margin-top:clamp(20px,2.2vw,40px)}
.bg--dark.ref-listing.w--text>.container{border-top-color:rgba(255,255,255,.28)}
.block--dynamic_listing.w--text .block__head{text-align:left;margin-inline:0;max-width:none}
.block--dynamic_listing.w--text .block__title{margin-inline:0;font-size:var(--fs-d2)}
.refs.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.refs.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ref{display:block}
.ref__media{overflow:hidden;aspect-ratio:4/3;background:var(--c-mist);margin-bottom:14px}
.ref__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ref:hover .ref__media img{transform:scale(1.06)}
.ref__country{display:inline-block;font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--c-red);
  border-bottom:1px solid var(--c-red);padding-bottom:3px;margin-bottom:10px}
.ref__title{font-size:clamp(17px,1.5vw,28px);margin:0;transition:color .2s}
.ref:hover .ref__title{color:var(--c-red)}
.ref.is-hidden{display:none}
/* Hinweis, wenn ein Filter nichts trifft */
.filter-empty{margin:clamp(20px,2.2vw,36px) 0 0}
.filter-empty.is-hidden{display:none}
/* „Weitere Projekte“ – zeigt die nächste Staffel von acht Kacheln (16.09.) */
.refs__more{display:flex;justify-content:center;margin-top:clamp(28px,3vw,54px)}
.refs__more.is-hidden{display:none}

/* ==========================================================================
   Einzelne Referenz (dunkle Detailseite)
   ========================================================================== */
/* Bild über die volle Inhaltsbreite, Texte eine Stufe grösser (11.09.) */
.reference__media{margin-bottom:clamp(28px,3vw,56px)}
.reference__media img{width:100%;height:auto;display:block}
.reference__title{font-size:var(--fs-d2);margin:0 0 clamp(22px,2.4vw,40px)}
.reference__text{font-size:clamp(17px,1.25vw,20px);line-height:1.55}
/* Schliessen: zurück zur Referenz-Übersicht */
.reference__close{position:absolute;top:clamp(16px,2vw,38px);right:var(--edge);z-index:5;
  width:clamp(40px,3vw,52px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  color:#fff;display:grid;place-items:center;
  transition:background-color .25s,border-color .25s,transform .25s var(--ease)}
.reference__close:hover{background:var(--c-red);border-color:var(--c-red);transform:rotate(90deg)}
.reference__close svg{width:40%;height:40%}
.reference__specs{margin:0 0 clamp(22px,2.4vw,38px);font-size:var(--fs-small);line-height:1.7}
.reference__specs div{display:flex;gap:.4em}
.reference__specs dt,.reference__specs dd{margin:0}
.reference__specs dt{color:rgba(255,255,255,.72)}
.reference__dl{font-size:var(--fs-small);border-bottom:1px solid currentColor;padding-bottom:2px}
.reference__dl:hover{color:var(--c-red)}
.reference__text{margin-top:clamp(22px,2.4vw,38px)}
.reference__quote blockquote{font-size:clamp(19px,1.5vw,24px)}
.sidelabel--quote{margin-top:clamp(40px,5vw,96px);padding-top:clamp(28px,3vw,54px);
  border-top:1px solid rgba(255,255,255,.28)}
.reference__quote blockquote{margin:0 0 clamp(22px,2.4vw,40px);
  font-size:clamp(16px,1.15vw,20px);line-height:1.55}
.reference__quote figcaption{font-size:var(--fs-small);line-height:1.6}
.reference__quote figcaption strong{display:block}

/* ==========================================================================
   Einzelner Beitrag (News) – Titel, Bild, Text, zurück zur Übersicht (16.09.)
   ========================================================================== */
.entry-title{font-size:var(--fs-d2);margin:0 0 clamp(24px,2.6vw,44px)}
.entry-media{margin:0 0 clamp(30px,3.4vw,58px)}
.entry-media img{display:block;width:100%;height:auto}
.entry-content{font-size:clamp(16px,1.15vw,19px);line-height:1.6}
.entry-content>*:first-child{margin-top:0}
/* Alt-Import: Font-Awesome-Sprite-Symbole ohne Sprite reissen sonst ein
   300x150-Loch in den Text (das Theme gibt selbst nie <use> aus). */
.rich svg:has(use){display:none}
.entry-back{margin-top:clamp(36px,4vw,68px);padding-top:clamp(24px,2.6vw,44px);
  border-top:1px solid var(--c-line)}
/* Zurück-Button: Pfeil links und gespiegelt */
.btn--back{flex-direction:row-reverse}
.btn--back .btn__arrow{transform:scaleX(-1)}
.btn--back:hover .btn__arrow{transform:scaleX(-1) translateX(5px)}

/* Mehrere Projektbilder: Galerie mit Überblendung, Pfeilen und Punkten (15.09.) */
.refgal{position:relative}
/* kvk_wide schneidet alle Bilder auf 16:9 – die Bühne bekommt dasselbe Format */
.refgal__track{position:relative;aspect-ratio:16/9;overflow:hidden}
.refgal__slide{margin:0;position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease)}
.refgal__slide.is-active{opacity:1;visibility:visible;z-index:1}
.refgal__slide img{width:100%;height:100%;object-fit:cover}
.refgal__caption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(12px,1.4vw,22px) clamp(14px,1.6vw,26px);font-size:var(--fs-small);color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))}
.refgal__nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:clamp(38px,3vw,50px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.25);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background-color .25s,border-color .25s}
.refgal__nav:hover{background:var(--c-red);border-color:var(--c-red)}
.refgal__nav svg{width:38%;height:38%}
.refgal__nav--prev{left:clamp(10px,1.2vw,20px);transform:translateY(-50%) rotate(90deg)}
.refgal__nav--next{right:clamp(10px,1.2vw,20px);transform:translateY(-50%) rotate(-90deg)}
.refgal__dots{display:flex;gap:10px;justify-content:center;margin-top:clamp(14px,1.6vw,24px)}
.refgal__dots button{width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.4);transition:transform .25s,background-color .25s}
.refgal__dots button.is-active{background:#fff;transform:scale(1.3)}
@media (max-width:560px){.refgal__nav{display:none}}

/* ==========================================================================
   Text + Medium als Slider: ganze Einheiten gleiten, Pfeile links und rechts
   ========================================================================== */
.mslider{position:relative;overflow:hidden}
.mslider__track{display:flex;transition:transform .55s var(--ease)}
.mslider__track>.split{flex:0 0 100%;min-width:0}
/* ohne JS (oder vor dem Start) steht der erste Slide – die anderen liegen daneben */
.mslider__nav{position:absolute;top:50%;z-index:4;transform:translateY(-50%);
  width:clamp(40px,3vw,54px);aspect-ratio:1;border-radius:50%;cursor:pointer;
  border:1px solid var(--c-line);background:rgba(255,255,255,.92);color:var(--c-ink);
  display:grid;place-items:center;
  transition:background-color .25s,border-color .25s,color .25s}
.mslider__nav:hover{background:var(--c-red);border-color:var(--c-red);color:#fff}
.mslider__nav svg{width:38%;height:38%}
.mslider__nav--prev{left:clamp(10px,1.4vw,26px);transform:translateY(-50%) rotate(90deg)}
.mslider__nav--next{right:clamp(10px,1.4vw,26px);transform:translateY(-50%) rotate(-90deg)}
/* Punkte liegen auf dem Bild – weiss, mit feinem Schatten gegen helle Motive */
.mslider__dots{position:absolute;left:50%;right:0;bottom:clamp(12px,1.4vw,22px);z-index:4;
  display:flex;gap:10px;justify-content:center}
.mslider--media-left .mslider__dots{left:0;right:50%}
.mslider__dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:transform .25s,background-color .25s}
.mslider__dots button.is-active{background:#fff;transform:scale(1.3)}
@media (max-width:900px){
  /* gestapelt: Punkte unter den Slide, Pfeile am Bildrand */
  /* gestapelt liegt unter dem Bild kein Bild mehr – Punkte dunkel unter den Slide */
  .mslider__dots,.mslider--media-left .mslider__dots{position:static;left:auto;right:auto;margin-top:18px}
  .mslider__dots button{background:rgba(0,0,0,.3);box-shadow:none}
  .mslider__dots button.is-active{background:var(--c-ink)}
  .bg--dark .mslider__dots button{background:rgba(255,255,255,.45)}
  .bg--dark .mslider__dots button.is-active{background:#fff}
}

/* Slider im Block „Text + Medium“: mehrere Bilder mit Punkten (16.09.) */
.btn-row{display:flex;flex-wrap:wrap;gap:16px}
.block--text_media .refgal__dots button{background:rgba(0,0,0,.25)}
.block--text_media .refgal__dots button.is-active{background:var(--c-ink)}
/* in der Split-Variante füllt die Bühne die Medienspalte, die Punkte liegen darauf */
.split__media.refgal{position:relative;overflow:hidden}
.split__media .refgal__track{position:absolute;inset:0;aspect-ratio:auto}
.split__media .refgal__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__media .refgal__dots{position:absolute;left:0;right:0;bottom:clamp(12px,1.4vw,22px);margin:0;z-index:3}
.split__media .refgal__dots button{background:rgba(255,255,255,.5)}
.split__media .refgal__dots button.is-active{background:#fff}

/* ==========================================================================
   Testimonial-Slider (Bild links, Zitat daneben)
   ========================================================================== */
.quotes{max-width:var(--container-text);margin-inline:auto;position:relative}
.quotes__track{display:flex;overflow:hidden}
.quote{flex:0 0 100%;display:grid;grid-template-columns:minmax(0,18.85%) 1fr;align-items:center;
  gap:clamp(26px,3.6vw,70px);opacity:0;transition:opacity .6s var(--ease)}
.quote.is-active{opacity:1}
.quote:not(:has(.quote__media)){grid-template-columns:1fr}
/* Kopf auf Kundenwunsch (10/26) klein und quadratisch, ohne Knick; Zitat daneben */
.quote__media img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:1}
.quote__text{font-size:clamp(16px,1.15vw,20px);line-height:1.55;margin:0 0 clamp(26px,3vw,52px)}
.quote__meta{font-size:var(--fs-small);line-height:1.6}
.quote__meta strong{display:block}
.quotes__dots{display:flex;gap:10px;justify-content:center;margin-top:clamp(20px,2.2vw,38px)}
.quotes__dots button{width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#B6B6B6;transition:background .25s,transform .25s}
.quotes__dots button.is-active{background:var(--c-ink);transform:scale(1.3)}

/* ==========================================================================
   Logo-Raster
   ========================================================================== */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1vw,18px)}
.logos__item{border:1px solid var(--c-line-soft);background:#fff;aspect-ratio:16/9;
  display:grid;place-items:center;padding:clamp(10px,1.2vw,22px);transition:border-color .25s}
.logos__item:hover{border-color:var(--c-red)}
.logos__item img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* ── Bild-Band mit mittigem Titel („See our References") ─────────────────── */
.block--gallery.is-band{padding:0}
.imgband{position:relative;display:block;overflow:hidden}
.imgband__strip{display:flex}
.imgband__strip img{flex:1 1 0;min-width:0;width:100%;
  height:clamp(220px,20.5vw,394px);object-fit:cover;
  transition:transform .8s var(--ease)}
.imgband:hover .imgband__strip img{transform:scale(1.04)}
.imgband__title{position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-family:var(--font-display);font-size:var(--fs-d2);text-align:center;
  padding-inline:var(--gutter);text-shadow:0 1px 24px rgba(0,0,0,.35)}

/* ==========================================================================
   Social Wall (News)
   ========================================================================== */
/* Gleichmässiges Raster statt Mauerwerk: die Spaltenlogik von `columns` füllte
   von oben nach unten und liess bei wenigen Beiträgen ganze Spalten leer (16.09.) */
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,32px)}
.wall__item{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--c-line-soft);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.wall__item:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.12)}
.wall__item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.wall__item.is-hidden{display:none}
.wall__body{padding:clamp(12px,1.2vw,20px);font-size:var(--fs-small)}
.wall__meta{font-size:var(--fs-micro);color:var(--c-ink-soft);margin:0 0 .5em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* LinkedIn-Posts im News-Raster: kleines Abzeichen neben dem Datum */
.wall__badge{display:inline-flex;align-items:center;gap:5px;color:#0A66C2;font-family:var(--font-display);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.wall__badge svg{width:13px;height:13px}
.wall__title{font-family:var(--font-text);font-weight:700;font-size:var(--fs-small);margin:0 0 .5em}
/* Die Karten sind immer weiss – auf dunklem Grund war der Titel weiss auf weiss (16.09.) */
.bg--dark .wall__item,.bg--dark .wall__title{color:var(--c-ink)}

/* ==========================================================================
   Seiten des Bereichs (Geschwisterseiten als Linkliste)
   ========================================================================== */
.siblings__title{font-size:clamp(20px,1.75vw,28px);line-height:1.3;margin:0 0 clamp(22px,2.4vw,40px)}
.siblings__list{list-style:none;margin:0;padding:0}
.siblings__list li{margin:0 0 clamp(8px,.9vw,14px)}
.siblings__list a{display:inline-block;font-family:var(--font-display);font-size:var(--fs-label);
  letter-spacing:.085em;text-transform:uppercase;color:var(--c-ink);
  border-bottom:1px solid var(--c-line);padding-bottom:2px;transition:color .2s,border-color .2s}
.siblings__list a:hover{color:var(--c-red);border-bottom-color:var(--c-red)}
.bg--dark .siblings__list a{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.bg--dark .siblings__list a:hover{color:var(--c-red);border-bottom-color:var(--c-red)}

/* ==========================================================================
   Zeitstrahl
   ========================================================================== */
.timeline{position:relative;max-width:var(--container-text);margin-inline:auto;list-style:none;padding:0}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--c-line);
  transform:translateX(-50%)}
.tl__item{position:relative;display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(30px,4vw,80px);align-items:center;margin-bottom:clamp(24px,2.6vw,44px)}
.tl__card{position:relative;background:#fff;box-shadow:0 8px 34px rgba(0,0,0,.09);padding:clamp(20px,2.2vw,38px)}
/* Spitze an der Karte, die zur Jahreszahl zeigt (14.09.) */
.tl__card::after{content:"";position:absolute;top:50%;width:0;height:0;
  border:11px solid transparent;transform:translateY(-50%)}
.tl__date{font-family:var(--font-display);font-size:var(--fs-d4);color:var(--c-ink);
  align-self:center;transition:color .35s var(--ease)}
/* Karte und Jahreszahl gehören in dieselbe Rasterzeile – sonst schiebt die
   automatische Platzierung die Zahl bei jedem zweiten Eintrag nach unten. */
.tl__item>.tl__card,.tl__item>.tl__date{grid-row:1}
.tl__item:nth-child(odd) .tl__card{grid-column:1}
.tl__item:nth-child(odd) .tl__card::after{left:100%;border-left-color:#fff}
.tl__item:nth-child(odd) .tl__date{grid-column:2;justify-self:start}
.tl__item:nth-child(even) .tl__card{grid-column:2}
.tl__item:nth-child(even) .tl__card::after{right:100%;border-right-color:#fff}
.tl__item:nth-child(even) .tl__date{grid-column:1;justify-self:end;text-align:right}
/* Beim Scrollen: sichtbare und bereits passierte Jahreszahlen sind rot (main.js) */
.tl__item.is-past .tl__date{color:var(--c-red)}
/* Meilensteine: Titel und Text in Fließtextgröße (Kundenwunsch 09.09.) */
.tl__title{font-family:var(--font-text);font-weight:700;font-size:var(--fs-body);margin:0 0 .5em}
.tl__text{font-size:var(--fs-body);color:var(--c-ink-soft);margin:0;line-height:1.5}

/* ==========================================================================
   Kennzahlen
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(28px,3vw,56px);
  text-align:center}
.stat__value{font-family:var(--font-display);font-size:clamp(38px,4vw,72px);line-height:1;color:var(--c-red)}
.stat__label{display:block;margin-top:.6em;font-size:var(--fs-small)}

/* ==========================================================================
   Tabellen
   ========================================================================== */
.table-wrap{overflow-x:auto;max-width:100%}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.data-table th,.data-table td{border-bottom:1px solid var(--c-line);padding:12px 16px;text-align:left;vertical-align:top}
.data-table thead th{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.09em;font-size:var(--fs-micro);color:var(--c-red);border-bottom-color:var(--c-red)}
/* Vergleichsmatrix: rote Kopfzellen, Zebrastreifen, Werte zentriert */
.data-table--matrix{max-width:var(--container-text);margin-inline:auto;text-align:center;min-width:600px}
.data-table--matrix th,.data-table--matrix td{border:0;padding:14px 18px;text-align:center}
.data-table--matrix thead th{background:var(--c-red);color:#fff;font-family:var(--font-text);
  font-weight:700;font-size:var(--fs-small);letter-spacing:0;line-height:1.25}
.data-table--matrix thead th:first-child{background:none}
.data-table--matrix tbody tr:nth-child(odd) td{background:#F4F4F4}
.data-table--matrix tbody td:first-child{text-align:center;color:var(--c-ink)}

/* ==========================================================================
   Stellen-Liste
   ========================================================================== */
.jobs{max-width:var(--container-text);margin-inline:auto}
.job{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  padding-block:clamp(20px,2.2vw,34px);border-bottom:1px solid var(--c-line)}
.job:first-child{border-top:1px solid var(--c-line)}
.job__title{font-size:var(--fs-d4);margin:0 0 10px;transition:color .2s}
.job:hover .job__title{color:var(--c-red)}
.job__meta{font-size:var(--fs-small);color:var(--c-ink-soft);display:flex;gap:20px;flex-wrap:wrap;margin:0}
/* Detailseite einer Portal-Stelle */
.job__meta--lead{font-size:var(--fs-body,1rem);margin:calc(-1 * clamp(10px,1.4vw,24px)) 0 clamp(20px,2.2vw,34px)}
.entry-apply{margin:0 0 clamp(30px,3.4vw,58px)}
.entry-apply--end{margin:clamp(30px,3.4vw,58px) 0 0}
.entry--job .entry-content h2,.entry--job .entry-content h3{font-size:var(--fs-d4);margin-top:1.6em}
.entry--job .entry-content p>strong:only-child{display:block;margin-top:.6em}

/* ==========================================================================
   Downloads
   ========================================================================== */
.dl-cat{border-bottom:1px solid var(--c-line)}
.dl-cat:first-child{border-top:1px solid var(--c-line)}
.dl-item{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding-block:16px}
.dl-item+.dl-item{border-top:1px solid var(--c-line-soft)}
.dl-item__name{font-size:var(--fs-small)}
.dl-item__links{display:flex;gap:18px}
.dl-lang{font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-red);border-bottom:1px solid transparent}
.dl-lang:hover{border-bottom-color:var(--c-red)}

/* ==========================================================================
   Formulare (WPForms an das neue CI angeglichen)
   ========================================================================== */
.wpforms-container{max-width:var(--container-text);margin-inline:auto!important}
.wpforms-container .wpforms-field-label{font-family:var(--font-display)!important;font-weight:400!important;
  font-size:var(--fs-micro)!important;letter-spacing:.1em!important;text-transform:uppercase!important;
  color:var(--c-ink)!important}
.wpforms-container input[type=text],.wpforms-container input[type=email],.wpforms-container input[type=tel],
.wpforms-container select,.wpforms-container textarea{
  border:1px solid var(--c-line)!important;border-radius:0!important;background:#fff!important;
  font-family:var(--font-text)!important;font-size:var(--fs-body)!important;padding:11px 14px!important}
.wpforms-container input:focus,.wpforms-container textarea:focus,.wpforms-container select:focus{
  border-color:var(--c-red)!important;box-shadow:none!important}
.wpforms-container .wpforms-submit{
  background:none!important;border:1px solid var(--c-ink)!important;border-radius:0!important;
  color:var(--c-ink)!important;font-family:var(--font-display)!important;font-size:var(--fs-label)!important;
  letter-spacing:.13em!important;text-transform:uppercase!important;padding:11px 22px!important;
  transition:background-color .3s,color .3s!important}
.wpforms-container .wpforms-submit:hover{background:var(--c-ink)!important;color:#fff!important}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--c-dark);color:#fff;font-size:var(--fs-body)}
/* Endet die Seite dunkel (z. B. Referenz-Detail), trennt eine feine Linie den Footer ab */
main:has(> .bg--dark:last-child) + .site-footer{border-top:1px solid rgba(255,255,255,.18)}
.site-footer a{color:inherit}
.footer__main{display:grid;grid-template-columns:minmax(220px,1fr) 2.6fr minmax(200px,.9fr);
  gap:clamp(30px,4vw,70px);padding-block:clamp(48px,5.4vw,96px) clamp(36px,4vw,72px)}
.footer__brand{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.footer__logo{height:34px;width:auto}
.footer__logo--fallback{font-family:var(--font-display);font-size:26px;font-weight:700;color:#fff}
/* Claim in Safiro und eine Stufe grösser (16.09.) */
.footer__claim{font-family:var(--font-display);font-size:var(--fs-d4);line-height:1.2;margin:0}
.footer__label{display:inline-block;font-family:var(--font-display);font-size:var(--fs-label);
  letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.75);
  padding-bottom:4px;margin:0 0 clamp(22px,2.4vw,38px)}
.footer__locs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,42px)}
.footer__loc{font-style:normal;line-height:1.62}
.footer__loc strong{display:block;font-weight:700;margin-bottom:.1em}
.footer__loc-contact{display:block}   /* Telefon/Mail direkt unter der Adresse, ohne Leerzeile (14.09.) */
.footer__loc a:hover{color:#fff;text-decoration:underline}
.footer__social{display:flex;gap:clamp(12px,1vw,20px);list-style:none;margin:0;padding:0}
.footer__social a{width:clamp(40px,2.8vw,54px);height:clamp(40px,2.8vw,54px);border:1px solid rgba(255,255,255,.75);border-radius:50%;
  display:grid;place-items:center;transition:background-color .25s,border-color .25s,color .25s}
.footer__social a:hover{background:var(--c-red);border-color:var(--c-red)}
.footer__social svg{width:22px;height:22px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.16)}
.footer__bottom-inner{display:grid;--fgap:clamp(30px,4vw,70px);
  grid-template-columns:minmax(220px,1fr) 2.6fr minmax(200px,.9fr);
  gap:var(--fgap);padding-block:clamp(18px,1.8vw,30px);font-size:var(--fs-meta)}
.footer__copy{margin:0;grid-column:2;opacity:.85;line-height:1.6}
.footer__meta{grid-column:2;justify-self:start;display:flex;gap:10px;list-style:none;margin:0;padding:0;
  opacity:.85;flex-wrap:wrap}
.footer__meta li{white-space:nowrap}
.footer__meta li+li::before{content:"|";margin-right:10px;opacity:.6}
.footer__meta a:hover{color:#fff;text-decoration:underline}
@media (min-width:1000px){
  /* Copyright bündig unter „Kontakt“: die erste Spalte muss exakt so breit sein
     wie oben im Footer-Raster. Dort teilen sich 4,5fr die Breite abzüglich ZWEI
     Lücken – hier gibt es wegen der vierten Spalte drei, deshalb fest gerechnet
     statt 1fr (sonst rutscht das Copyright 15 px nach links). (16.09.) */
  .footer__bottom-inner{
    grid-template-columns:minmax(220px,calc((100% - 2*var(--fgap))/4.5)) 1.3fr 1.3fr minmax(200px,.9fr)}
  .footer__copy{grid-column:2}
  /* bis in die leere vierte Spalte, damit „Cookie-Einstellungen“ nicht umbricht (12.10.) */
  .footer__meta{grid-column:3/-1;flex-wrap:nowrap}
}

/* ==========================================================================
   Scroll-to-top (runder Button unten rechts, Stil wie Hero-Bedienelemente)
   ========================================================================== */
.to-top{position:fixed;right:clamp(16px,2vw,36px);bottom:clamp(16px,2vw,36px);z-index:150;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--c-ink);background:#fff;color:var(--c-ink);
  display:grid;place-items:center;cursor:pointer;padding:0;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,
             background-color .25s,border-color .25s,color .25s}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top svg{width:9px;height:20px;transition:transform .25s var(--ease)}
.to-top:hover{background:var(--c-red);border-color:var(--c-red);color:#fff}
.to-top:hover svg{transform:translateY(-2px)}
.to-top:focus-visible{outline:2px solid var(--c-red);outline-offset:3px}
body.nav-open .to-top{opacity:0;visibility:hidden}

/* ==========================================================================
   404 – „Diese Seite ist verpufft.“
   Graue Fläche mit 6°-Unterkante wie der Hero; die Null der 404 ist ein
   Rückgewinnungs-Kreislauf (warmer Strang rot, kalter grau, Energie fliesst).
   ========================================================================== */
.nf{position:relative;isolation:isolate;
  padding-block:clamp(56px,6vw,116px) calc(clamp(32px,3vw,56px) + 10.5vw)}
.nf__band{position:absolute;inset:0;z-index:-1;background:var(--c-mist);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10.5vw),0 100%)}
.nf__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5.5vw,105px);align-items:center}

.nf__code{display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:500;line-height:1;color:var(--c-ink);
  font-size:clamp(120px,15.5vw,300px);letter-spacing:-.04em;user-select:none}
.nf__digit{display:block}
.nf__loop{width:.8em;height:.8em;margin-inline:.04em;overflow:visible;flex:none}
.nf__arc{fill:none;stroke-width:20;stroke-linecap:butt}
.nf__arc--warm{stroke:var(--c-red)}
.nf__arc--cold{stroke:var(--c-ink)}
.nf__flow{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:5 7;opacity:.9;animation:nf-flow 3.2s linear infinite}
@keyframes nf-flow{to{stroke-dashoffset:-100}}
/* Kreislauf dreht ganz langsam – Energie bleibt in Bewegung */
.nf__loop>g{transform-origin:100px 100px;animation:nf-spin 24s linear infinite}
@keyframes nf-spin{from{transform:rotate(-6deg)}to{transform:rotate(354deg)}}
html.anim-off .nf__flow,html.anim-off .nf__loop>g{animation:none}

.nf__copy{max-width:640px}
.nf__title{font-size:var(--fs-d1);margin:0 0 clamp(20px,1.8vw,34px)}
.nf__text{margin:0 0 clamp(28px,2.6vw,46px);max-width:560px}
.nf__search{display:flex;align-items:center;max-width:520px;height:52px;background:#fff;
  border:1px solid var(--c-line);margin:0 0 clamp(24px,2.2vw,38px);
  transition:border-color .3s var(--ease)}
.nf__search:focus-within{border-color:var(--c-ink)}
.nf__search input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0 18px;
  font:inherit;font-family:var(--font-display);font-size:16px;color:var(--c-ink)}
.nf__search input::placeholder{color:#9A9A9A}
.nf__search input:focus{outline:none}
.nf__search button{flex:none;width:52px;height:100%;border:0;border-left:1px solid var(--c-line);
  background:none;color:var(--c-ink);cursor:pointer;display:grid;place-items:center;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.nf__search button:hover,.nf__search button:focus-visible{background:var(--c-red);color:#fff}
.nf__search svg{width:18px;height:18px}
.nf__actions{display:flex;flex-wrap:wrap;gap:16px}

@media (max-width:1080px){
  .nf__inner{grid-template-columns:minmax(0,1fr)}
  .nf__code{justify-content:flex-start;font-size:clamp(96px,26vw,220px)}
}
@media (max-width:560px){
  .nf__actions .btn{flex:1 1 100%;justify-content:space-between}
}

/* ==========================================================================
   Scroll-Animationen – bewusst schlicht: einfaden aus einer Richtung
   ========================================================================== */
[data-anim]{opacity:0;will-change:opacity,transform}
[data-anim="up"]{transform:translateY(30px)}     /* kommt von unten */
[data-anim="down"]{transform:translateY(-30px)}  /* kommt von oben  */
[data-anim="left"]{transform:translateX(-30px)}  /* kommt von links */
[data-anim="right"]{transform:translateX(30px)}  /* kommt von rechts */
[data-anim="fade"],[data-anim="zoom"]{transform:none}
[data-anim].is-in{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-anim][data-anim-delay="1"].is-in{transition-delay:.08s}
[data-anim][data-anim-delay="2"].is-in{transition-delay:.16s}
[data-anim][data-anim-delay="3"].is-in{transition-delay:.24s}
[data-anim][data-anim-delay="4"].is-in{transition-delay:.32s}
[data-anim][data-anim-delay="5"].is-in{transition-delay:.40s}
/* Bilder faden nur ein – kein Vorhang, kein Zoom */
.reveal-img{position:relative;overflow:hidden}

html.no-js [data-anim],
html.anim-off [data-anim]{opacity:1!important;transform:none!important}
html.anim-off .hero__stage,html.anim-off .hero__inner,html.anim-off .hero__captions,
html.anim-off .hero__dots,html.anim-off .hero__badge{animation:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-anim]{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1400px){
  .refs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1200px){
  :root{--container:100%}
  .cards.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer__main{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
  .footer__bottom-inner{grid-template-columns:1fr;gap:12px}
  .footer__copy,.footer__meta{grid-column:1}
}
@media (max-width:1080px){
  /* Navigation auf Mobil-Menü umstellen */
  .nav,.topbar{display:none}
  .nav-toggle{display:flex}
  .navbar__inner{min-height:0;display:block;position:relative;padding-block:14px 26px}
  /* Logo ohne Abstand nach oben, mittig auf einer Höhe mit dem Hamburger */
  .nav-toggle{position:absolute;right:0;top:calc(14px + 17px - 22px);margin:0}
  .site-brand{margin:0;justify-content:center}
  .site-logo{height:min(34px,calc(9vw - 2px))}   /* bei 320 px nicht unter den Hamburger laufen */
  .hero__badge{right:var(--gutter)}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split__media{min-height:min(62vw,420px)}
  .split--media-left .split__media{order:-1}
  .split__panel{padding-inline:var(--gutter)!important}
  .split__inner{margin-inline:0!important;max-width:none}
  .cards.cols-3,.cards.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars.cols-3,.pillars.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frow{grid-template-columns:1fr;gap:22px}
  .frow__items{gap:32px}
  /* gestapelt: Strich nicht in den Abstand zum Label ziehen */
  .fitem__title::before{margin-top:0}
  .sidelabel{grid-template-columns:1fr;gap:14px}
  .sidelabel__label{position:static}
  .sidelabel__body--full{grid-column:1}
  /* .refs.cols-N muss mitgenannt werden, sonst gewinnt die Spaltenzahl aus dem Feld */
  .refs,.refs[class*="cols-"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters{grid-template-columns:1fr}
  .filters[class*="cols-"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quote{grid-template-columns:1fr;gap:clamp(22px,4vw,40px)}
  .quote__media{max-width:40%}
  .timeline::before{left:6px}
  .tl__item{grid-template-columns:1fr;padding-left:34px;row-gap:10px}
  .tl__item .tl__card,.tl__item .tl__date{grid-column:1!important;grid-row:auto!important;justify-self:start!important;text-align:left!important}
  .tl__card::after{display:none}
  /* gestapelt nicht seitlich einfliegen – schob die Karten über den Rand */
  .tl__card[data-anim]:not(.is-in){transform:translateY(30px)}
  .tl__date{order:-1}
  .footer__locs{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .cards.cols-2,.cards.cols-3,.cards.cols-4,
  .pillars.cols-2,.pillars.cols-3,.pillars.cols-4,
  .refs,.refs[class*="cols-"],.frow__items{grid-template-columns:1fr}
  .filters[class*="cols-"]{grid-template-columns:1fr}
  .wall{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__main{grid-template-columns:1fr}
  .footer__brand{flex-direction:column;align-items:flex-start;gap:26px}
  .footer__locs{grid-template-columns:1fr}
  .job{grid-template-columns:1fr}
  .hero__badge{width:96px;right:16px;bottom:0}
  .announce__box{transform:none}
}

/* Sitemap-Baum ([kvk_sitemap]) */
.rich .sitemap-tree{list-style:none;margin:0;padding:0}
.rich .sitemap-tree>li{margin:0 0 .55em}
.rich .sitemap-tree>li>a{font-family:var(--font-display);font-size:var(--fs-d4);
  color:var(--c-text);text-decoration:none;border-bottom:0;background:none}
.rich .sitemap-tree>li>a:hover{color:var(--c-red);text-decoration:none}
.rich .sitemap-tree .sitemap-tree{margin:.35em 0 1.6em 1.2em;
  border-left:1px solid var(--c-line);padding-left:1.2em}
.rich .sitemap-tree .sitemap-tree>li{margin:0 0 .3em}
.rich .sitemap-tree .sitemap-tree>li>a{font-family:inherit;font-size:1rem;
  color:var(--c-text);text-decoration:none;border-bottom:0;background:none}
.rich .sitemap-tree .sitemap-tree>li>a:hover{color:var(--c-red);text-decoration:none}

/* Formular zweispaltig: Infospalte links, Formular rechts (Kontaktseite) */
/* Dasselbe Raster wie .sidelabel (Spalten UND Abstand): so steht „Contact
   information“ auf der Kante der roten Labels und das Formular auf der Kante
   der Inhaltsspalte des Textblocks darüber (Kundenwunsch 15.09.). */
.formcols{display:grid;grid-template-columns:minmax(180px,1fr) 2.05fr;
  gap:clamp(24px,3.4vw,64px);align-items:start;margin-top:clamp(28px,3vw,52px)}
.formcols__label{font-size:var(--fs-eyebrow);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-red);margin:0 0 1.2em;padding-bottom:.5em;border-bottom:1px solid var(--c-red);
  display:inline-block}
.formcols__side .rich{font-size:1rem}
.formcols__side .rich p{margin:0 0 1em}
.formcols__side .rich a{color:inherit;border-bottom:1px solid var(--c-line)}
.formcols__side .rich a:hover{color:var(--c-red);border-color:currentColor}
/* Umbruchpunkt wie bei .sidelabel (900 px), damit beide Raster gleich reagieren */
@media (max-width:900px){.formcols{grid-template-columns:1fr;gap:36px}}

/* Standort-Raster (Kontaktseite "Konvekta International") */
.loc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.6vw,44px);text-align:left;margin-top:clamp(24px,2.6vw,44px)}
.loc-grid .loc{font-style:normal;font-size:1rem;line-height:1.55}
.loc-grid .loc strong{display:block;margin-bottom:.35em}
.loc-grid .loc__c{display:block;margin-top:.9em}
.loc-grid .loc a{color:inherit;border-bottom:1px solid var(--c-line)}
.loc-grid .loc a:hover{color:var(--c-red);border-color:currentColor}
@media (max-width:860px){.loc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.loc-grid{grid-template-columns:1fr}}