/* TwinOne AG — Komponenten
   Reihenfolge: tokens.css -> base.css -> components.css
   Breakpoints (mobile first): 560 / 720 / 800 / 900 / 1000 / 1080 / 1100 px */

/* ================================================================ 1. Eck-Klammern */
/* Vier L-foermige Ecken, 2px stark, 18px Kantenlaenge, exakt in den Ecken.
   Umgesetzt ueber zwei Pseudoelemente (oben / unten) mit je zwei Balken pro Ecke.
   Die Farbe laeuft ueber --bracket-c statt ueber `color`, damit die Klammern die
   Textfarbe des Elternelements (z. B. .entity) nicht veraendern. */

.bracket{position:relative;--bracket-c:var(--c-border-strong)}

.bracket::before,
.bracket::after{
  content:"";
  position:absolute;
  inset-inline:0;
  height:18px;
  pointer-events:none;
  background-image:
    linear-gradient(var(--bracket-c),var(--bracket-c)),
    linear-gradient(var(--bracket-c),var(--bracket-c)),
    linear-gradient(var(--bracket-c),var(--bracket-c)),
    linear-gradient(var(--bracket-c),var(--bracket-c));
  background-repeat:no-repeat;
  background-size:18px 2px,2px 18px,18px 2px,2px 18px;
}
.bracket::before{
  top:0;
  background-position:left top,left top,right top,right top;
}
.bracket::after{
  bottom:0;
  background-position:left bottom,left bottom,right bottom,right bottom;
}

/* ========================================================== 2b. Illustrationen */
/* Isometrische Inline-SVG, eine je Leistung. Die Farben stehen als --illu-*
   im SVG — deshalb inline und nicht als <img>, sonst greift der Dunkelmodus
   nicht. Jede Grafik ist in fuenf Bauteile .il__p--1 … --5 gegliedert, die
   sich beim Einblenden nacheinander zusammensetzen (aus Flaeche wird Gebaeude).
   Bewusst nur `opacity` und `translateY`: `scale()`/`transform-origin` auf
   SVG-Gruppen braucht `transform-box` und ist zwischen Engines unzuverlaessig.
   Der gesamte Aufbau steht in `no-preference` — bei `reduce` und ohne JS sind
   die Bauteile schlicht da (kein `!important`, keine Gegenregel noetig). */

.il{display:block;width:100%;height:auto}

@media (prefers-reduced-motion:no-preference){
  .il__p{
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .5s var(--ease),transform .5s var(--ease);
  }
  .is-visible .il__p{opacity:1;transform:none}
  .is-visible .il__p--1{transition-delay:60ms}
  .is-visible .il__p--2{transition-delay:140ms}
  .is-visible .il__p--3{transition-delay:220ms}
  .is-visible .il__p--4{transition-delay:300ms}
  .is-visible .il__p--5{transition-delay:380ms}
  /* Ohne JS wird `.is-visible` nie gesetzt. */
  html:not(.js) .il__p{opacity:1;transform:none;transition:none}
  .service__illu .il__p{opacity:1;transform:none;transition:none}
}

/* ================================================================ 3. Kopfbereich */

.skip-link{
  position:absolute;
  inset-inline-start:var(--sp-4);
  top:var(--sp-4);
  z-index:100;
  transform:translateY(calc(-100% - var(--sp-6)));
  display:inline-block;
  padding:.7rem 1.1rem;
  background:var(--c-navy);
  color:#fff;
  font-size:var(--fs-sm);
  font-weight:600;
  text-decoration:none;
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease);
}
.skip-link:focus-visible,
.skip-link:focus{
  transform:translateY(0);
  color:#fff;
  outline:2px solid var(--c-focus);
  outline-offset:2px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--c-bg);
  border-block-end:1px solid var(--c-border);
}
.site-header[data-scrolled="true"]{
  box-shadow:0 10px 24px -20px rgba(16,32,64,.55);
}

.site-header__inner{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:76px;
}

/* --- Wortmarke ---------------------------------------------------------- */

.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:inherit;
  flex:none;
}
.brand__mark{height:34px;width:auto;flex:none}
.brand__mark--dark{display:none}

.brand__word{
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
}
.brand__word-a{color:var(--c-blue)}
.brand__word-b{color:var(--c-gray)}

@media (min-width:560px){
  .brand__word{font-size:1.3rem}
}

/* --- Hauptnavigation ---------------------------------------------------- */

.nav{
  position:absolute;
  inset-inline:0;
  top:100%;
  display:none;
  background:var(--c-bg);
  border-block-end:1px solid var(--c-border);
  box-shadow:0 18px 30px -26px rgba(16,32,64,.6);
  max-height:calc(100vh - 76px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.site-header[data-nav-open="true"] .nav{display:block}

.nav__list{
  display:flex;
  flex-direction:column;
  gap:0;
  list-style:none;
  margin:0;
  padding-inline:var(--pad-x);
}
.nav__list > li + li{border-top:1px solid var(--c-border)}

.nav__link{
  position:relative;
  display:block;
  padding-block:.9rem;
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--c-text);
  text-decoration:none;
}
.nav__link::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:.35rem;
  height:2px;
  background:var(--c-accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible{color:var(--c-accent)}
.nav__link:hover::after,
.nav__link:focus-visible::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--c-accent);font-weight:600}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

/* --- Werkzeuge rechts --------------------------------------------------- */
/* Enthaelt Sprachumschalter, Theme- und Menue-Schaltflaeche in genau dieser
   Reihenfolge; `gap` traegt damit auch den Abstand zum Menue-Button. */

.header-tools{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin-inline-start:auto;
}

@media (min-width:560px){
  .header-tools{gap:var(--sp-3)}
}

.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin:0;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.06em;
}
.lang-switch__link{
  color:var(--c-text-faint);
  text-decoration:none;
  padding-block:.25rem;
}
.lang-switch__link:hover{color:var(--c-accent)}
/* Telefon: Trefferflaeche 44px hoch (statt 29px), seitlich je .45rem Polster mit
   gleich grossem negativem Aussenabstand — die Kopfzeile wird nicht breiter. */
@media (max-width:719px){
  .lang-switch__link{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-inline:.45rem;
    margin-inline:-.45rem;
  }
}
/* Der aktive Zustand darf sich nicht allein ueber die Farbe zeigen (WCAG 1.4.1;
   aktiv gegen inaktiv sind nur 1,37:1 im Kopf- und 1,72:1 im Fussbereich).
   Fettung und Unterstreichung tragen die Unterscheidung auch ohne Farbe. */
.lang-switch__link--active{
  color:var(--c-accent);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.25em;
}
.lang-switch__sep{color:var(--c-border-strong)}

.theme-toggle{
  flex:none;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--c-border-control);
  border-radius:var(--r-sm);
  color:var(--c-text-muted);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.theme-toggle:hover{border-color:var(--c-accent);color:var(--c-accent)}
.theme-toggle__icon{display:none}
.theme-toggle__icon--moon{display:block}

/* --- Burger ------------------------------------------------------------- */

.nav-toggle{
  flex:none;
  width:44px;
  height:44px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid var(--c-border-control);
  border-radius:var(--r-sm);
  color:var(--c-text);
}
.nav-toggle:hover{border-color:var(--c-accent)}
.nav-toggle__bar{
  display:block;
  width:20px;
  height:2px;
  background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.site-header[data-nav-open="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header[data-nav-open="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.site-header[data-nav-open="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- ab 900px: klassische Kopfzeile ------------------------------------- */

@media (min-width:900px){
  .site-header__inner{gap:var(--sp-5)}
  .nav-toggle{display:none}
  .nav{
    position:static;
    display:block;
    margin-inline-start:auto;
    background:none;
    border-block-end:0;
    box-shadow:none;
    max-height:none;
    overflow:visible;
  }
  .nav__list{
    flex-direction:row;
    gap:clamp(1rem,2.2vw,2rem);
    padding-inline:0;
  }
  .nav__list > li + li{border-top:0}
  .nav__link{padding-block:.5rem}
  .nav__link::after{bottom:0}
  .header-tools{margin-inline-start:0}
}

/* --- ohne JS: Navigation immer sichtbar, keine Schaltflaechen ----------- */
/* Die Reihenfolge im Kopfbereich kommt aus dem Markup (.brand -> .nav ->
   .header-tools); es gibt keine `order`-Regeln mehr. Einzige Ausnahme unten:
   ohne JS liegt die Navigation als eigene Zeile unter Marke und Werkzeugen. */

html:not(.js) .nav-toggle{display:none}
/* Ohne JS bekommt der Umschalter weder seinen Namen (kommt aus dem Skript)
   noch eine Wirkung — dann darf er auch nicht fokussierbar sein. */
html:not(.js) .theme-toggle{display:none}
html:not(.js) .nav{
  position:static;
  display:block;
  background:none;
  border-block-end:0;
  box-shadow:none;
  max-height:none;
  overflow:visible;
  flex-basis:100%;
}
/* `order` nur hier: die Navigation belegt ohne JS eine eigene Zeile und muss
   deshalb hinter die Werkzeuge rutschen (alle anderen bleiben bei `order:0`). */
html:not(.js) .site-header__inner > .nav{order:1}
html:not(.js) .site-header__inner{flex-wrap:wrap;padding-block:var(--sp-2)}
html:not(.js) .nav__list{padding-inline:0}

@media (min-width:900px){
  html:not(.js) .nav{flex-basis:auto}
  html:not(.js) .site-header__inner > .nav{order:0}
  html:not(.js) .site-header__inner{flex-wrap:nowrap;padding-block:0}
}

/* ================================================================ 4. Buttons */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.85rem 1.5rem;
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}

.btn--primary{background:var(--c-navy);color:#fff}
.btn--primary:hover{background:var(--c-blue);color:#fff}

/* Rahmen ueber --c-border-control statt --c-border-strong: als einziges
   Bedienelement lag der Umriss sonst unter den von WCAG 1.4.11 geforderten
   3:1 (1,74:1 auf --c-bg, 1,62:1 auf --c-bg-alt). */
.btn--secondary{
  background:transparent;
  color:var(--c-accent);
  border-color:var(--c-border-control);
}
.btn--secondary:hover{
  border-color:var(--c-accent);
  background:var(--c-bg-alt);
  color:var(--c-accent);
}

/* Auf tiefem Grund (CTA-Baender aller Unterseiten) gilt dasselbe wie sonst: der
   Primaer-Button ist blau (--c-blue, weisser Text 6,27:1), der zweite nur eine
   Kontur. Die helle Haarlinie um den blauen Button traegt seine Begrenzung
   (blau gegen --c-deep nur 2,15:1; mit Linie 4,91:1, WCAG 1.4.11); die Kontur des
   Sekundaer-Buttons liegt bei 5,15:1. Werte gegen #152C5E (hell), Rechnung
   06.10.2026; im Dunkelmodus (Band #13254A): 2,41:1 / 5,48:1 / 5,54:1. */
.btn--on-deep{background:var(--c-blue);color:#fff;border-color:rgba(255,255,255,.4)}
.btn--on-deep:hover{background:var(--c-blue);border-color:rgba(255,255,255,.75);color:#fff;filter:brightness(1.18)}

.btn--ghost-on-deep{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55);
}
.btn--ghost-on-deep:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.85);
  color:#fff;
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
}
/* Telefon: Hero- und CTA-Buttons untereinander, volle Breite, gleich breit.
   Zwei Buttons nebeneinander brechen bei 360px sonst unterschiedlich um. */
@media (max-width:559px){
  .hero .btn-row,
  .cta .btn-row{flex-direction:column;align-items:stretch}
  .hero .btn-row .btn,
  .cta .btn-row .btn{justify-content:center;text-align:center}
}

/* ================================================================ 5. Textlinks */

.link-arrow,
.link-ext{
  display:inline-flex;
  align-items:baseline;
  gap:.4rem;
  color:var(--c-accent);
  font-weight:600;
  font-size:var(--fs-sm);
  text-decoration:none;
  align-self:flex-start;
}
.link-arrow::after,
.link-ext::after{
  transition:transform var(--dur) var(--ease);
}
.link-arrow::after{content:"\2192"}
.link-ext::after{content:"\2197"}
.link-arrow:hover,
.link-ext:hover{color:var(--c-accent-strong);text-decoration:underline}
.link-arrow:hover::after,
.link-arrow:focus-visible::after,
.link-ext:hover::after,
.link-ext:focus-visible::after{transform:translateX(3px)}

.section--deep .link-arrow,
.section--deep .link-ext{color:#fff}
.section--deep .link-arrow:hover,
.section--deep .link-ext:hover{color:#fff}

/* Telefon: Trefferflaeche mindestens ca. 44px hoch. Polster und gleich grosser
   negativer Aussenabstand — das Layout bleibt, nur die klickbare Flaeche waechst. */
@media (max-width:719px){
  .link-arrow,
  .link-ext{padding-block:.65rem;margin-block:-.65rem}
}

/* ================================================================ 6. Hero */

.hero{
  position:relative;
  overflow:hidden;
  /* Unten bewusst knapper als oben (max. 96px): unter den Buttons steht kein
     weiterer Text mehr, und #angebote folgt direkt. */
  padding-block:clamp(3.5rem,2rem + 7vw,8rem) clamp(3.5rem,2.5rem + 4vw,6rem);
}

.hero__grid{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.5;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64'%3E%3Cpath d='M0 34.64 60 0M0 0 60 34.64' fill='none' stroke='%231A356E' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:60px 34.64px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 85%);
  mask-image:linear-gradient(to bottom,#000 0%,transparent 85%);
}

.hero .container{position:relative;z-index:1}

.hero__inner{display:grid;gap:var(--sp-7)}

.hero__content > * + *{margin-top:var(--sp-5)}

.hero__title{
  font-size:var(--fs-display);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--c-heading);
}
.hero__accent{color:var(--c-blue)}

.hero__lead{
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--c-text-muted);
  max-width:60ch;
}

/* Hero und die folgende Sektion haben denselben Grund (keine Kante dazwischen):
   96px unten plus der volle Sektionsabstand oben ergaeben ca. 208px Leerraum unter
   den Buttons. Die Folgesektion rueckt auf 48px (zusammen ca. 144px). */
.hero + .section{padding-block-start:var(--sp-7)}

.hero__figure{display:none}

@media (min-width:1080px){
  .hero__inner{
    grid-template-columns:1.15fr .85fr;
    gap:var(--sp-8);
    align-items:center;
  }
  /* Ohne `.bracket`: die Eck-Klammern stecken bereits im Bildzeichen. Die
     Grafik braucht daher nur eigene Innenabstaende und Zentrierung. */
  .hero__figure{
    display:grid;
    place-items:center;
    padding-block:clamp(1rem,2.5vw,2rem);
    padding-inline:clamp(1rem,3vw,2.5rem);
  }
  .hero__figure img,
  .hero__figure svg{width:100%;max-width:340px;height:auto}
}

/* ================================================================ 8. Wertschoepfungskette (Panorama) */
/* Die sechs Stationen stehen auf einem durchgehenden Gelaende. Der Abschnitt ist
   --pano-steps Bildschirme hoch; solange man ihn durchscrollt, klebt .chain-pano__pin
   am oberen Rand und die Kamera faehrt am Gelaende entlang (site.js, Block 5).
   Klassenvertrag mit dem Skript: .is-visible (Szene), .is-lit (Kettenglied),
   .is-active (Caption, Phase), .is-done (Punkt, Phase), --p (Fortschritt der Leiste).
   Ohne JS und bei `reduce` faellt die Kamerafahrt weg — Rueckfall am Ende von 8. */

.chain-pano{--pano-steps:6}

/* Der Vorspann bleibt im Container, das Gelaende darf darueber hinausgehen.
   Der Abstand unter dem Vorspann ist hier kleiner als sonst: die Innenhoehe des
   gepinnten Bereichs (Kopfbereich + Luft) kommt gleich noch einmal dazu. */
.chain-pano .section__head{margin-bottom:clamp(1.25rem,.9rem + 1.2vw,2rem)}

/* Orientierungszeile unter dem Lead — erklaert die Fahrt, ohne sie anzupreisen.
   Runde 4 (06.10.2026): --c-text und Gewicht 500 statt --c-text-muted (stand neben
   dem Lead zu blass), Marke in der Akzentfarbe. Kontrast hell 14,5:1 auf --c-bg-alt,
   dunkel 14,4:1; Schrift 15px. */
.chain-pano__hint{
  position:relative;
  margin-top:var(--sp-4);
  padding-inline-start:1.5rem;
  max-width:var(--w-prose);
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--c-text);
}
.chain-pano__hint::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.62em;
  width:8px;
  height:8px;
  background:var(--c-accent);
}

/* ---- Scrollweg und gepinnte Buehne ---- */

.chain-pano__scroll{
  position:relative;
  height:calc(var(--pano-steps) * 100vh);
  height:calc(var(--pano-steps) * 100svh);
}

.chain-pano__pin{
  position:sticky;
  inset-block-start:0;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(1.25rem,1rem + 2vw,2.5rem);
  /* oben Platz fuer den klebenden Kopfbereich (--h-header), sonst liefe das
     Phasenband darunter hindurch. */
  padding-block:calc(var(--h-header) + clamp(1rem,.5rem + 1.5vw,2rem)) clamp(1.5rem,1rem + 2vw,2.5rem);
  overflow:hidden;
}

/* ---- Phasenband ---- */
/* Drei gleich breite Felder, tabellarisch: der Strich oben zeigt den Stand
   (hell = kommt noch, kraeftig = erledigt, blau = aktiv). Kein Menue, keine Pillen. */

.phasen{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.5rem,.2rem + 1.2vw,1.5rem);
  margin:0;
  /* base.css setzt `ul,ol` auf 1.25em Einzug und gewinnt gegen das
     `:where([class])`-Zuruecksetzen — das Phasenband soll buendig mit dem
     KI-Band darunter stehen. */
  padding:0;
}
.phasen__item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-3);
  padding-block:var(--sp-3) 0;
  border-block-start:2px solid var(--c-border);
  transition:border-color .45s var(--ease);
}
.phasen__name{
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-text-muted);
  transition:color .45s var(--ease);
}
.phasen__range{
  font-size:var(--fs-xs);
  color:var(--c-text-muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.phasen__item.is-done{border-block-start-color:var(--c-border-control)}
.phasen__item.is-active{border-block-start-color:var(--c-accent)}
.phasen__item.is-active .phasen__name{color:var(--c-accent);font-weight:700}

@media (max-width:559px){
  .phasen__item{flex-direction:column;align-items:flex-start;gap:.15rem}
  .phasen__name{letter-spacing:.08em}
}

/* ---- KI-Band ---- */
/* Eine durchgehende Linie in Akzentfarbe unter den drei Phasen: das Band
   gehoert zu keiner Phase allein, sondern liegt als eigene Schicht darunter.
   Dieselbe Akzentfarbe tragen der Faden im Panorama (.pano__ki), das Label der
   Ergebniszeile (.chain-pano__ki-label) und der Leistungen (.service__ki-label)
   — so liest sich alles als EINE Ebene. Auch auf den Leistungsseiten unter
   der Sprungleiste. */

.phasen-ki{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.15rem .75rem;
  margin:var(--sp-3) 0 0;
  padding-block-start:var(--sp-2);
  border-block-start:2px solid var(--c-accent);
  max-width:none;
  font-size:var(--fs-xs);
  line-height:var(--lh-snug);
  color:var(--c-text-muted);
}
.phasen-ki__label{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--c-accent);
}
/* Die Raute vor dem Label: dieselbe Form wie die Knoten des Fadens im Panorama und
   der TwinAI-Zeile der Uebersichtsgrafik (#abdeckung). */
.phasen-ki__label::before,
.chain-pano__ki-label::before,
.service__ki-label::before{
  content:"";
  display:inline-block;
  width:.9em;
  height:.55em;
  margin-inline-end:.5em;
  vertical-align:.04em;
  background:var(--c-accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.chainnav + .phasen-ki{margin-top:var(--sp-5)}
/* schmal: Label und Satz laufen als ein Absatz, das spart eine Zeile */
@media (max-width:559px){
  .phasen-ki{display:block}
  .phasen-ki__label{margin-inline-end:.5rem}
}

/* ---- Kamera ---- */

.chain-pano__view{
  position:relative;
  overflow:hidden;
  /* weiche Kanten, damit die Nachbarstationen nicht hart abgeschnitten wirken */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.chain-pano__track{
  display:flex;
  will-change:transform;
  /* Das obere Drittel der Zeichenflaeche (viewBox) ist fast leer — die hoechste
     Szene beginnt bei 37 % der Hoehe, hier bleiben 7 % Luft. Den leeren Streifen ziehen wir aus dem
     Bild; .chain-pano__view schneidet ihn ab. Die Skriptmessung (Hoehe der
     SVG) bleibt davon unberuehrt. */
  margin-top:calc(var(--pano-h) * -.3);
}
.chain-pano{--pano-h:clamp(170px,30svh,300px)}
.chain-pano .pano__svg{
  display:block;
  height:var(--pano-h);
  width:auto;
  max-width:none;
  flex:0 0 auto;
}

/* Wichtig: im Panorama sind die Bauteile aller Stationen von Haus aus sichtbar.
   Die Regel in 2b blendet `.il__p` erst mit `.is-visible` ein — hier stuende
   sonst ein leeres Gelaende da, nur die aktive Station waere bebaut. */
.chain-pano .pano__scene .il__p{opacity:1;transform:none}

/* Die Station in der Bildmitte steht voll da, die uebrigen treten zurueck.
   Gedimmt wird je Kind der Szene (Bauteile, Raute), nicht die Gruppe selbst. */
.chain-pano .pano__scene > *{opacity:.42}
.chain-pano .pano__scene.is-visible > *{opacity:1}
.chain-pano .pano__link{opacity:.3}
.chain-pano .pano__link.is-lit{opacity:1;stroke:var(--illu-accent)}

/* KI-Faden: eine durchgehende Linie unter dem Gelaende, ein Knoten je Station.
   Die Knoten liegen im .pano__scene — sie treten mit der Szene zurueck und
   stehen mit ihr voll da (.is-visible), ohne dass das Skript etwas davon weiss. */
.chain-pano .pano__ki{stroke:var(--c-accent);opacity:.85}
.chain-pano .pano__ki-node{fill:var(--c-accent);stroke:none}
/* Halo der aktiven Raute: 5 statt 7 Einheiten — mit 7 reichte er bis y=323,9 und wurde
   am unteren Rand der 322 hohen viewBox beschnitten (Reviewer-Fund 06.10.2026). */
.chain-pano .pano__scene.is-visible .pano__ki-node{stroke:var(--c-accent);stroke-opacity:.3;stroke-width:5;stroke-linejoin:round}

@media (prefers-reduced-motion:no-preference){
  .chain-pano .pano__scene > *{transition:opacity .55s var(--ease)}
  .chain-pano .pano__link{transition:opacity .55s var(--ease),stroke .55s var(--ease)}
  /* Beim Eintritt in die Bildmitte baut sich die Station neu auf — gestaffelt,
     damit aus der Flaeche ein Gebaeude wird. */
  .chain-pano .pano__scene.is-visible .il__p{animation:chain-pano-bau .52s var(--ease) backwards}
  .chain-pano .pano__scene.is-visible .il__p--1{animation-delay:.02s}
  .chain-pano .pano__scene.is-visible .il__p--2{animation-delay:.10s}
  .chain-pano .pano__scene.is-visible .il__p--3{animation-delay:.18s}
  .chain-pano .pano__scene.is-visible .il__p--4{animation-delay:.26s}
  .chain-pano .pano__scene.is-visible .il__p--5{animation-delay:.34s}
}
@keyframes chain-pano-bau{
  from{opacity:0;transform:translateY(-11px)}
  to{opacity:1;transform:none}
}

/* ---- Text der aktiven Station ---- */
/* Alle sechs Captions liegen in derselben Rasterzelle uebereinander. So ist der
   Block immer so hoch wie die laengste Station — die Leiste darunter springt
   beim Wechsel nicht. `visibility:hidden` nimmt die inaktiven aus dem
   Zugaenglichkeitsbaum und bleibt trotzdem animierbar (`display:none` nicht). */

.chain-pano__stack{display:grid;align-items:start}
.chain-pano__caption{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-3);
  max-width:min(46rem,100%);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
}
.chain-pano__caption.is-active{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:no-preference){
  .chain-pano__caption{
    transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
  }
}

.chain-pano__step{
  display:flex;
  align-items:baseline;
  gap:.75rem;
  font-size:var(--fs-sm);
}
.chain-pano__num{
  font-weight:700;
  letter-spacing:.12em;
  color:var(--c-accent);
  font-variant-numeric:tabular-nums;
}
.chain-pano__phase{
  position:relative;
  padding-inline-start:.95rem;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-text-muted);
}
/* Quadrat statt Punkt als Trenner — dasselbe Motiv wie in .service__list. */
.chain-pano__phase::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.42em;
  width:5px;
  height:5px;
  background:var(--c-border-control);
}
.chain-pano__title{
  font-size:clamp(1.375rem,1.1rem + 1.35vw,2rem);
  line-height:1.15;
  letter-spacing:var(--ls-tight);
  color:var(--c-heading);
}
.chain-pano__text{
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--c-text-muted);
  max-width:var(--w-prose);
}

/* Die Ergebniszeile fasst zusammen, was nach der Station existiert. Eigene
   Auszeichnung — Haarlinie, Label in Versalien, Wert in Textfarbe —, damit sie
   sich vom Beschreibungstext absetzt, ohne lauter zu sein. */
.chain-pano__result{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.2rem .75rem;
  margin-top:var(--sp-1);
  padding-block-start:var(--sp-3);
  border-block-start:1px solid var(--c-border-strong);
  max-width:min(38rem,100%);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--c-text);
}
.chain-pano__result-label{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-accent);
}
/* Die Zeile "Mit TwinAI" folgt direkt auf die Ergebniszeile, ohne eigene Linie
   (sonst laese sie sich als zweites Ergebnis). Das Label traegt die Akzentfarbe
   des KI-Bandes und des Fadens im Panorama. */
.chain-pano__ki{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.2rem .75rem;
  margin-top:0;
  max-width:min(38rem,100%);
  font-size:var(--fs-sm);
  color:var(--c-text-muted);
}
.chain-pano__ki-label{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--c-accent);
}
@media (max-width:559px){
  .chain-pano__ki{display:block}
  .chain-pano__ki-label{margin-inline-end:.5rem}
}
/* Traegerklassen aus dem frueheren Kartenraster, die das Markup der Station
   weiterfuehrt: der Badge mit dem erbringenden Unternehmen. */
.chain__owner{align-self:flex-start}

/* ---- Fortschrittsleiste ---- */

.chain-pano__rail{
  --p:0;
  display:flex;
  align-items:center;
  gap:.15rem;
  margin:var(--sp-5) 0 0;
  padding:0;
}
.chain-pano__rail::before{
  content:"";
  flex:0 0 auto;
  align-self:center;
  width:clamp(48px,10vw,120px);
  height:2px;
  margin-inline-end:.75rem;
  background:linear-gradient(to right,var(--c-accent) calc(var(--p) * 100%),var(--c-border-control) 0);
}
/* Die Punkte sind Schaltflaechen: 28px Trefferflaeche, 11px Punkt. */
.chain-pano__dot{
  position:relative;
  display:block;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  cursor:pointer;
}
.chain-pano__dot::before{
  content:"";
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  width:11px;
  height:11px;
  border:2px solid var(--c-border-control);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
/* Telefon: Trefferflaeche 44px hoch bei 28px Breite. Der negative Aussenabstand
   haelt die Hoehe der Leiste bei 28px — der gepinnte Ausschnitt (Hoehenregeln
   weiter unten) wird nicht hoeher. Die Leiste (sechs Punkte plus Zaehler) muss
   einzeilig in den Pin passen, der abschneidet (overflow:hidden): unter 560px
   entfaellt deshalb die Linie vor den Punkten, der Zaehler steht einzeilig
   (nowrap) mit kleinerer Schrift und engeren Abstaenden; ab 560px ist Platz.
   Der Zaehlertext (Nummer und Phasenname) wird per Skript gesetzt, deshalb
   laesst sich nur die Darstellung, nicht der Wortlaut kuerzen. */
@media (max-width:719px){
  .chain-pano__dot{height:44px;margin-block:-8px;border-radius:0}
}
@media (max-width:559px){
  .chain-pano__rail{gap:0}
  .chain-pano__rail::before{display:none}
}
.chain-pano__dot:hover::before{
  border-color:var(--c-accent);
  transform:translate(-50%,-50%) scale(1.35);
}
.chain-pano__dot:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.chain-pano__dot:focus-visible::before{border-color:var(--c-accent)}
.chain-pano__dot.is-done::before{
  background:var(--c-border-control);
  border-color:var(--c-border-control);
}
.chain-pano__dot[aria-current="true"]::before{
  background:var(--c-accent);
  border-color:var(--c-accent);
  transform:translate(-50%,-50%) scale(1.35);
}
@media (prefers-reduced-motion:no-preference){
  .chain-pano__dot::before{
    transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
  }
}
.chain-pano__count{
  margin-inline-start:.85rem;
  font-size:var(--fs-xs);
  color:var(--c-text-muted);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
/* Telefon (Begruendung beim Medienblock der Punkte oben): einzeilig, kleiner,
   engere Abstaende. Steht hinter der Grundregel, sonst gewaenne diese. */
@media (max-width:559px){
  .chain-pano__count{
    margin-inline-start:.5rem;
    font-size:.75rem;
    letter-spacing:0;
    white-space:nowrap;
  }
}
/* 320px: der laengste Zaehler (DE „Entwickeln“) reichte sonst 9px ueber den
   Containerrand — 11px, proportionale Ziffern, engerer Abstand. */
@media (max-width:359px){
  .chain-pano__count{
    margin-inline-start:.35rem;
    font-size:.6875rem;
    font-variant-numeric:normal;
  }
}

/* Abschluss-Absatz (der Link auf /leistungen/) haengt sonst am Panorama. */
.chain-pano__scroll + .container{margin-top:clamp(2rem,1.2rem + 2.5vw,3.5rem)}

/* Kurze oder schmale Bildschirme (Telefone sind hoch, aber die Bildunterschrift
   wird durch den Umbruch lang): sonst schoebe die Buehne die Fortschrittsleiste aus dem
   gepinnten Ausschnitt heraus (der Pin ist genau einen Bildschirm hoch). */
@media (max-height:840px),(max-width:559px){
  .chain-pano__pin{
    gap:clamp(.6rem,.4rem + .8vw,1.1rem);
    padding-block:calc(var(--h-header) + var(--sp-2)) var(--sp-3);
  }
  .chain-pano{--pano-h:clamp(120px,22svh,210px)}
  .chain-pano__caption{gap:var(--sp-2)}
  .chain-pano__title{font-size:clamp(1.25rem,1.05rem + .8vw,1.5rem)}
  .chain-pano__text{font-size:var(--fs-body)}
  .chain-pano__result{margin-top:0;padding-block-start:var(--sp-2)}
  .chain-pano__rail{margin-top:var(--sp-3)}
  .phasen-ki{margin-top:var(--sp-2);padding-block-start:var(--sp-1)}
}
/* Telefon: die Bildunterschrift ist durch den Umbruch am laengsten — die Szenen
   (ohnehin nur ausschnittsweise im Bild) geben dafuer Hoehe ab. */
@media (max-width:559px){
  .chain-pano{--pano-h:clamp(105px,18svh,210px)}
}
@media (max-width:559px) and (max-height:700px){
  .chain-pano{--pano-h:72px}
  .chain-pano__pin{
    gap:.45rem;
    padding-block-start:calc(var(--h-header) + var(--sp-1));
  }
  .chain-pano__text{font-size:var(--fs-sm)}
  /* der Satz zum TwinAI-Band steht schon im Vorspann; im gepinnten Ausschnitt bleibt das Label */
  .chain-pano .phasen-ki__text{display:none}
}
@media (max-width:559px) and (max-height:660px){
  .chain-pano__caption{gap:var(--sp-1)}
  .chain-pano__text{font-size:.875rem;line-height:1.4}
  .chain-pano__rail{margin-top:var(--sp-2)}
}

/* ---- Rueckfall: ohne JavaScript und bei Bewegungsreduktion ---- */
/* Ohne Kamerafahrt ergeben Pin, Leiste und Hinweiszeile keinen Sinn. Dann stehen
   alle sechs Stationen vollstaendig lesbar untereinander, das Gelaende bleibt
   sichtbar und ist seitlich scrollbar, das Phasenband bleibt neutral. */

html:not(.js) .chain-pano__scroll{height:auto}
html:not(.js) .chain-pano__pin{position:static;min-height:0;padding-block:0;overflow:visible}
html:not(.js) .chain-pano__view{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
html:not(.js) .chain-pano .pano__scene > *,
html:not(.js) .chain-pano .pano__link{opacity:1}
html:not(.js) .chain-pano__stack{gap:var(--sp-7)}
html:not(.js) .chain-pano__caption{
  grid-column:auto;
  grid-row:auto;
  opacity:1;
  visibility:visible;
  transform:none;
}
html:not(.js) .chain-pano__caption + .chain-pano__caption{
  border-block-start:1px solid var(--c-border);
  padding-block-start:var(--sp-6);
}
html:not(.js) .chain-pano__hint,
html:not(.js) .chain-pano__rail{display:none}

@media (prefers-reduced-motion:reduce){
  .chain-pano__scroll{height:auto}
  .chain-pano__pin{position:static;min-height:0;padding-block:0;overflow:visible}
  .chain-pano__view{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .chain-pano .pano__scene > *,
  .chain-pano .pano__link{opacity:1}
  .chain-pano__stack{gap:var(--sp-7)}
  .chain-pano__caption{
    grid-column:auto;
    grid-row:auto;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .chain-pano__caption + .chain-pano__caption{
    border-block-start:1px solid var(--c-border);
    padding-block-start:var(--sp-6);
  }
  .chain-pano__hint,
  .chain-pano__rail{display:none}
}
/* Uebergang Uebersichtsgrafik (#abdeckung) -> Panorama: beide erzaehlen dieselbe
   Kette und gehoeren zusammen. Statt 112 + 112px (Sektionsabstand unten und oben,
   gemessen 06.10.2026: 224px zwischen dem Link und dem Eyebrow) je 36px = 72px.
   Nur diese beiden Sektionen; alle anderen Uebergaenge behalten ihren Abstand. */
#abdeckung{padding-block-end:2.25rem}
#abdeckung .kp{margin-bottom:0}
/* #angebote und #abdeckung tragen denselben Hintergrund; 112 + 112px dazwischen
   wirkten als leeres Band (Browser-Pruefung 07.10.2026: 224px). Der obere Abstand
   entfaellt, der untere von #angebote traegt den Uebergang allein. */
#angebote + #abdeckung{padding-block-start:0}
#abdeckung + .chain-pano{padding-block-start:2.25rem}

/* Hinweiskasten und der Link darunter (Startseite) brauchen ebenfalls Luft;
   in .service__body traegt der Folgeabsatz eine Klasse und bleibt unberuehrt. */
.notice + p:not([class]){margin-top:var(--sp-5)}

/* ================================================================ 8b. Uebersichtsgrafik Kette x Produkte (Startseite #abdeckung und Oekosystem-Seite) */
/* Ein Bild, drei Schichten ueber derselben Kette: die Stationen oben, darunter
   WER sie traegt (Partner / TwinEstate), die durchgehende TwinAI-Linie und das
   Consulting, das die Arbeitsweise aus der Kette hinausfuehrt. Alles ist Text
   im Raster — kein Bild, kein Skript.
   Jede Zeile ist ein eigenes Sechs-Spalten-Raster mit gleicher Breite, gleicher
   Spaltenluecke und `minmax(0,1fr)`: Balkenenden, Rauten und Stationen sitzen
   dadurch auf denselben Spalten. Unterscheidung nie nur ueber Farbe: gefuellt =
   TwinEstate, Linie mit Rauten = TwinAI, gestrichelt offen mit Pfeil = Consulting,
   umrandet grau = Partner, umrandet blau = TwinOne (Maklerplattform).
   Die Rauten sind dieselbe Form wie im Faden des Panoramas (.pano__ki-node), im
   Band (.phasen-ki) und in den "Mit TwinAI"-Zeilen. Schmal (< 880px) kippt das
   Raster in eine senkrechte Liste; die Marken wandern in die Stationen. */

.kp{
  --kp-gap:var(--sp-2);
  margin-bottom:var(--sp-7);
  padding:clamp(1rem,.35rem + 2.4vw,2rem);
  background:var(--c-bg-alt);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
}
.kp :where(ol,ul){list-style:none;margin:0;padding:0}

.kp__label{
  margin:0 0 var(--sp-2);
  /* 14px und --c-text statt 13px/--c-text-muted: die Zeilenbeschriftungen standen
     blass und klein neben den Balken (Runde 4, 06.10.2026). */
  font-size:.875rem;
  font-weight:600;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-text);
}

/* Kopf der TwinAI-Zeile: Zeilen-Label (Rahmen fuer Zusatzangaben rechts). */
.kp__rowhead{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  column-gap:var(--sp-3);
  margin:0 0 var(--sp-2);
}
.kp__rowhead .kp__label{margin:0}

/* ---- schmal: senkrechte Liste der sechs Stationen ---- */

.kp__phases,
.kp__row--wer,
.kp__row--ai{display:none}

.kp__stations{position:relative;padding-inline-start:30px}
/* die TwinAI-Linie, senkrecht an der Seite */
.kp__stations::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:7.5px;
  width:3px;
  background:var(--c-accent);
}
.kp__station{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"num name tags" "num phase tags";
  column-gap:var(--sp-3);
  align-items:center;
  padding-block:var(--sp-3);
  border-block-end:1px solid var(--c-border);
}
.kp__station:last-child{border-block-end:0}
.kp__station::before{
  content:"";
  position:absolute;
  inset-inline-start:-29px;
  top:50%;
  width:16px;
  height:10px;
  transform:translateY(-50%);
  background:var(--c-accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.kp__num{
  grid-area:num;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:var(--c-accent);
}
.kp__name{
  grid-area:name;
  font-size:var(--fs-sm);
  font-weight:600;
  line-height:var(--lh-snug);
  color:var(--c-heading);
}
.kp__phasetag{
  grid-area:phase;
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-text-muted);
}
.kp__tags{
  grid-area:tags;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:var(--sp-1) var(--sp-2);
}
@media (max-width:479px){
  .kp__station{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"num name" "num phase" ". tags";
    row-gap:var(--sp-1);
  }
  .kp__tags{justify-content:flex-start;margin-top:var(--sp-1)}
}
.kp__tag{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:.12rem .5rem;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:1.35;
  white-space:nowrap;
}
.kp__tag--ai{padding-inline:0;color:var(--c-accent);font-weight:700}
.kp__tag--ai::before{
  content:"";
  width:.9em;
  height:.55em;
  background:var(--c-accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.kp__tag--estate{background:var(--c-estate);border-color:var(--c-estate);color:var(--c-on-estate)}
.kp__tag--partner{border-color:var(--c-border-control);color:var(--c-text-muted)}
.kp__tag--twinone{border-color:var(--c-accent);color:var(--c-accent)}

/* ---- Consulting: offener, gestrichelter Rahmen mit Pfeil nach aussen ---- */

.kp__row--out{margin-top:var(--sp-5)}
.kp__out{
  position:relative;
  display:flex;
  align-items:center;
  min-height:44px;
  padding:.45rem 2.5rem .45rem var(--sp-4);
  border:2px dashed var(--c-text-muted);
  border-inline-end:0;
  font-size:.875rem;
  font-weight:600;
  line-height:var(--lh-snug);
  color:var(--c-text);
}
.kp__out::after{
  content:"";
  position:absolute;
  inset-inline-end:12px;
  top:50%;
  width:11px;
  height:11px;
  border-top:2px solid var(--c-text-muted);
  border-inline-end:2px solid var(--c-text-muted);
  transform:translateY(-50%) rotate(45deg);
}

/* ---- Raster ab 880px ---- */

@media (min-width:880px){
  .kp__phases,
  .kp__stations,
  .kp__bars{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    column-gap:var(--kp-gap);
  }
  .kp__row--wer,
  .kp__row--ai{display:block}
  .kp__row{margin-top:var(--sp-5)}
  .kp__stations + .kp__row{margin-top:var(--sp-4)}

  .kp__phase{
    grid-column:span 2;
    display:flex;
    align-items:baseline;
    justify-content:flex-start;
    gap:var(--sp-2);
    padding-block-start:var(--sp-3);
    border-block-start:2px solid var(--c-border-control);
  }
  .kp__phase-name{
    font-size:.875rem;
    font-weight:600;
    line-height:var(--lh-snug);
    letter-spacing:var(--ls-eyebrow);
    text-transform:uppercase;
    color:var(--c-text);
  }
  .kp__phase-range{
    font-size:.875rem;
    color:var(--c-text-muted);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }

  .kp__stations{position:static;padding-inline-start:0;margin-top:var(--sp-2)}
  .kp__stations::before,
  .kp__station::before{display:none}
  .kp__station{
    display:block;
    padding:var(--sp-2) 0 0;
    border:0;
    text-align:center;
  }
  .kp__num{display:block;margin-bottom:.2rem}
  .kp__name{display:block;font-size:clamp(.75rem,.5rem + .42vw,.9375rem)}
  .kp__phasetag,
  .kp__tags{display:none}

  .kp__bar{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:.4rem .6rem;
    border:1px solid transparent;
    border-radius:var(--r-sm);
    font-size:.875rem;
    font-weight:600;
    line-height:var(--lh-snug);
    text-align:center;
  }
  .kp__bar--partner{grid-column:span 3;border-color:var(--c-border-control);color:var(--c-text-muted)}
  .kp__bar--twinone{grid-column:span 1;border-color:var(--c-accent);color:var(--c-accent)}
  .kp__bar--estate{grid-column:span 2;background:var(--c-estate);border-color:var(--c-estate);color:var(--c-on-estate)}

  .kp__ai,
  .kp__out{grid-column:1/-1}

  /* TwinAI: eine Linie ueber alle sechs Spalten, eine Raute je Station genau
     in der Spaltenmitte. Der Text steht darunter. */
  .kp__nodes{
    position:relative;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    column-gap:var(--kp-gap);
    align-items:center;
    height:24px;
  }
  .kp__nodes::before{
    content:"";
    position:absolute;
    inset-inline:0;
    top:50%;
    height:3px;
    margin-top:-1.5px;
    background:var(--c-accent);
  }
  /* Rauten 22x14 (vorher 20x12), mittig in ihrer Spalte (justify-self) */
  .kp__node{
    position:relative;
    justify-self:center;
    width:22px;
    height:14px;
    background:var(--c-accent);
    clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  }
  .kp__ai-text{
    display:block;
    margin-top:var(--sp-1);
    font-size:.9375rem;
    font-weight:700;
    line-height:var(--lh-snug);
    color:var(--c-accent);
  }
}

/* ================================================================ 9. Karten */

.card-grid{display:grid;gap:var(--sp-5);list-style:none;margin:0;padding:0}
@media (min-width:800px){.card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:720px){.card-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:560px){.card-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.card-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:var(--sp-6);
  box-shadow:var(--shadow-1);
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}
.section--alt .card{background:var(--c-surface-alt)}
.card:hover{border-color:var(--c-border-strong);transition-delay:0s}

.card__title{font-size:var(--fs-h3);color:var(--c-heading)}
.card__text{font-size:var(--fs-sm);color:var(--c-text-muted)}
/* 14px und --c-text-muted statt 13px/--c-text-faint (Runde 4, 06.10.2026):
   hell 7,31:1 auf --c-surface (#FFFFFF), dunkel 7,87:1 auf --c-surface (#182541);
   nachgerechnet 06.10.2026. */
.card__meta{font-size:.875rem;color:var(--c-text-muted)}

/* Karten einer Reihe sind gleich hoch (Grid streckt sie); die letzte Zeile —
   der Abschlusslink — sitzt am unteren Kartenrand buendig, auch wenn der Text
   darueber unterschiedlich lang ist. Nur Zeilen mit Link: eine Karte, die mit
   Text endet, behaelt ihren Text oben. */
.card-grid > .card > :last-child:has(> .link-arrow,> .link-ext){margin-top:auto}
/* Liste und Hinweis in der Karte sitzen im Abstand der Karte (gap) wie
   Fliesstext — die eigenen Aussenabstaende von .service__list und .notice
   wuerden ihn verdoppeln. */
.card > .service__list,
.card > .notice,
.card > .service__list + .notice{margin-top:0}
.card > .notice{padding:var(--sp-4)}
.card > .notice + p:not([class]){margin-top:0}

.card--deep{
  background:rgba(255,255,255,.05);
  border-color:var(--c-on-deep-border);
  box-shadow:none;
}
.card--deep:hover{border-color:rgba(255,255,255,.38)}
.section--deep .card__title{color:var(--c-on-deep)}
.section--deep .card__text{color:var(--c-on-deep-muted)}
.section--deep .card__meta{color:var(--c-on-deep-muted)}

/* Produktzeichen in den Angebotskarten (#angebote, Leistungsseite): das Zeichen
   steht als erstes Kind ueber dem Titel, Hell-/Dunkelfassung wie bei .brand__mark.
   Reine Zierde (alt leer, aria-hidden) - der Kartentitel nennt den Namen. */
.card__mark{display:block;margin-block-end:var(--sp-2)}
.card__mark-img{display:block;width:56px;height:auto}
.card__mark-img--dark{display:none}

/* ================================================================ 10. Badges */

.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:1.35;
  letter-spacing:.02em;
  padding:.28rem .6rem;
  border-radius:var(--r-sm);
  border:1px solid transparent;
}
.badge--twinone{
  color:var(--c-blue);
  border-color:var(--c-blue);
  background:rgba(30,92,192,.08);
}
.badge--estate{
  color:var(--c-on-estate);
  border-color:var(--c-estate);
  background:var(--c-estate);
}
.section--deep .badge--twinone{
  color:#fff;
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
}

/* ================================================================ 11. Faktenliste */

.facts{margin:0}
.facts__row{
  display:grid;
  gap:var(--sp-1);
  padding-block:var(--sp-3);
  border-top:1px solid var(--c-border);
}
.facts__row:first-child{border-top:0;padding-top:0}
.facts__term{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--c-text-muted);
}
.facts__desc{font-size:var(--fs-body);margin:0}

.section--deep .facts__row{border-top-color:var(--c-on-deep-border)}
.section--deep .facts__term{color:var(--c-on-deep-muted)}

@media (min-width:560px){
  .facts__row{grid-template-columns:220px 1fr;gap:var(--sp-4)}
}

/* ================================================================ 12. Personen */

.people{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  list-style:none;
  margin:0;
  padding:0;
}
@media (min-width:560px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Mehrere Gruppen untereinander (Vorstand / Prokura / Aufsichtsrat) brauchen
   eine sichtbare Zaesur vor der naechsten Ueberschrift. */
.people + h2,
.people + h3{margin-top:var(--sp-7)}
h2 + .people,
h3 + .people{margin-top:var(--sp-4)}

.person{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-4);
  padding:var(--sp-5);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
}
.section--alt .person{background:var(--c-surface-alt)}

.person__mono{
  flex:none;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  background:var(--c-navy);
  color:#fff;
  border-radius:var(--r-sm);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.04em;
}
.person__body{min-width:0}
.person__name{font-weight:600;line-height:1.35}
.person__role{font-size:var(--fs-sm);color:var(--c-text-muted);line-height:1.4}
.person__field{margin-top:var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--c-accent);line-height:1.4}
.person__text{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--c-text-muted);line-height:1.55;overflow-wrap:anywhere}
/* Kasten ohne Fliesstext (Prokura): Monogramm mittig zur Namenszeile */
.person:not(:has(.person__text)){align-items:center}

/* ================================================================ 13. Leistungen */

.services{display:flex;flex-direction:column}

.service{
  display:grid;
  gap:var(--sp-5);
  border-top:1px solid var(--c-border);
  padding-block:clamp(2.5rem,1.5rem + 3vw,4rem);
  /* Sprungziel der .chainnav. html traegt bereits
     scroll-padding-top: --h-header + --sp-4 (92px); die --sp-2 hier ergeben
     zusammen genau Kopfhoehe (76px) + --sp-5 (24px) = 100px Abstand. */
  scroll-margin-top:var(--sp-2);
}
.services > .service:first-child{border-top:0;padding-top:0}

.service__step{
  display:block;
  margin-bottom:var(--sp-3);
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--c-accent);
  font-variant-numeric:tabular-nums;
}
/* Seit der Phasen-Gliederung ist die Leistungsueberschrift ein h3 unter dem
   h2 der Phase. Sie faellt deshalb eine Stufe kleiner aus als --fs-h2 (bis
   2,125rem) — dieselbe Groesse wie .entity__name. */
.service__title{
  font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  letter-spacing:var(--ls-tight);
  color:var(--c-heading);
  margin-bottom:var(--sp-3);
}

/* Erstes Kind von .service__aside; darunter folgen Schrittnummer, Titel, Badge.
   Unter 900px ist die Spalte einspaltig und die Zeichnung steht allein — 190px
   Breite (= ca. 140px Hoehe bei dem Seitenverhaeltnis 240:176) statt 230px. */
.service__illu{
  width:100%;
  max-width:190px;
  margin-block-end:var(--sp-4);
}
@media (min-width:900px){
  .service__illu{max-width:230px;margin-block-end:var(--sp-5)}
}
/* 54ch statt --w-prose (65ch): ch misst die Breite der Ziffer 0, ein Textzeichen ist
   schmaler — 65ch ergaeben im Fliesstext ca. 80 Zeichen je Zeile; 54ch liegen bei
   62-68 (gemessen 06.10.2026). */
.service__body > p{color:var(--c-text-muted);max-width:54ch}
.service__body > * + *{margin-top:var(--sp-4)}

.service__list{
  list-style:none;
  padding:0;
  margin-top:var(--sp-5);
  display:grid;
  gap:var(--sp-3);
}
.service__list > li{
  position:relative;
  padding-inline-start:1.5rem;
  font-size:var(--fs-sm);
  margin-top:0;
}
.service__list > li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.62em;
  width:8px;
  height:8px;
  background:var(--c-accent);
}
.service__action{margin-top:var(--sp-5)}

/* Zeile "Mit TwinAI": gleiche Auszeichnung wie im Panorama (.chain-pano__ki), das
   Label in der Akzentfarbe des KI-Bandes. Steht vor .service__action. */
.service__body > .service__ki{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.2rem .75rem;
  padding-block-start:var(--sp-3);
  border-block-start:1px solid var(--c-border);
  font-size:var(--fs-sm);
  color:var(--c-text-muted);
}
.service__ki-label{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--c-accent);
}

@media (min-width:900px){
  .service{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
    gap:var(--sp-7);
  }
  .service__aside{
    position:sticky;
    top:110px;
    align-self:start;
  }
}

/* --- Phasen (Entwickeln / Vermarkten / Betreiben) ------------------------ */
/* Staerkste Zaesur der Leistungsseite: viel Luft nach oben, eine kraeftigere
   Trennlinie als zwischen den Leistungen und ein kurzer Akzentbalken ueber
   dem Titel. Der Titel bleibt --fs-h2 und damit eine Stufe ueber
   .service__title — die Hierarchie traegt die Groesse, nicht die Farbe. */

.phase{
  margin-top:clamp(3rem,2rem + 3vw,5rem);
  padding-top:clamp(2rem,1.2rem + 2vw,3rem);
  border-top:1px solid var(--c-border-strong);
}
.services > .phase:first-child{margin-top:0;padding-top:0;border-top:0}

/* Die erste Leistung einer Phase haengt direkt unter deren Zeile — eine
   zweite Trennlinie dort waere doppelt. Zweite Variante fuer den Fall, dass
   die Phase vor einem eigenen .services-Block steht. */
.phase + .service,
.phase + .services > .service:first-child{
  border-top:0;
  padding-top:var(--sp-6);
}

.phase__title{
  font-size:var(--fs-h2);
  letter-spacing:var(--ls-tight);
  color:var(--c-heading);
}
.phase__title::before{
  content:"";
  display:block;
  width:32px;
  height:3px;
  margin-bottom:var(--sp-4);
  background:var(--c-accent);
}
.phase__lead{
  margin-top:var(--sp-2);
  max-width:var(--w-prose);
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--c-text-muted);
}

/* --- Sprungmarken zu den sechs Leistungen -------------------------------- */
/* Tabellarisch und ruhig: drei Spalten (die drei Phasen), je Zeile eine
   Trennlinie. Keine Pillen, keine Buttons. */

/* Auf eine knappe Sektion (.section--tight, hier die Sprungleiste) folgt der
   Inhalt, den sie anspringt — der volle Sektionsabstand oben (bis 112px) kam zu
   dessen 72px Fuss dazu und ergab ca. 184px Leerraum. */
.section--tight + .section{padding-block-start:var(--sp-7)}

.chainnav{
  display:grid;
  gap:var(--sp-6);
}
@media (min-width:760px){
  .chainnav{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--sp-6) var(--sp-7);
  }
}

.chainnav__phase{
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--c-border-strong);
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-text-muted);
}

.chainnav__list{display:grid;margin:0;padding:0}

.chainnav__link{
  display:flex;
  align-items:baseline;
  gap:var(--sp-3);
  padding-block:var(--sp-3);
  border-bottom:1px solid var(--c-border);
  color:var(--c-text);
  font-size:var(--fs-sm);
  font-weight:600;
  text-decoration:none;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.chainnav__link:hover{
  color:var(--c-accent);
  border-bottom-color:var(--c-accent);
}
/* Der Ring aus base.css sitzt mit 3px Versatz auf der Nachbarzeile — hier
   enger und mit mitziehender Textfarbe, damit die Zeile eindeutig ist. */
.chainnav__link:focus-visible{
  outline:2px solid var(--c-focus);
  outline-offset:1px;
  color:var(--c-accent);
  border-bottom-color:var(--c-accent);
}

.chainnav__step{
  flex:none;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:var(--c-accent);
}

/* ================================================================ 14. Unternehmen (Oekosystem) */

.entity{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem);
}
.section--alt .entity{background:var(--c-surface-alt)}

.entity__name{
  font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  letter-spacing:var(--ls-tight);
  color:var(--c-heading);
}
.entity__role{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-accent);
}
.entity__text{font-size:var(--fs-sm);color:var(--c-text-muted)}
.entity .facts__row{padding-block:var(--sp-2)}
.entity__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-4);
  margin-top:auto;
  padding-top:var(--sp-2);
}

/* ================================================================ 15. Zweispalter */

.split{display:grid;gap:var(--sp-6)}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start}
  .split--wide-first{grid-template-columns:1.2fr .8fr}
}
/* Eine Ueberschrift, die die linke Spalte eroeffnet, bekommt Luft zum Inhalt
   darunter (Faktenliste oder Absatz): vorher 0px bzw. ca. 8px. Beide Spalten
   beginnen oben buendig, die Ueberschrift oben an derselben Kante wie die
   rechte Karte. */
.split > :first-child > h2 + *{margin-top:var(--sp-5)}
/* Ein Eyebrow ueber dieser Ueberschrift (Unternehmen, „Profil.“) steht im
   Zweispalter nicht in einem .section__head — derselbe Abstand wie dort
   (var(--sp-4)), gemessen vorher 0px. */
.split > :first-child > .eyebrow + h2{margin-top:var(--sp-4)}

/* ================================================================ 16. Tabelle */

.table-wrap{
  overflow-x:auto;
  max-width:100%;
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  -webkit-overflow-scrolling:touch;
}
/* Der Container ist per `tabindex="0"` fokussierbar (Tastatur-Scrollen) und
   braucht darum einen eigenen, sichtbaren Ring: die globale Regel in base.css
   wuerde den Radius auf 2px druecken. --c-focus liegt in beiden Modi deutlich
   ueber 3:1 (hell 6,27:1 auf #FFF und 5,84:1 auf --c-bg-alt; dunkel 7,44:1
   bzw. 7,01:1). */
.table-wrap:focus-visible{
  outline:2px solid var(--c-focus);
  outline-offset:2px;
  border-color:var(--c-focus);
  border-radius:var(--r-md);
}
.table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-sm);
}
.table th{
  background:var(--c-navy);
  color:#fff;
  text-align:start;
  font-weight:600;
  padding:.9rem 1.1rem;
  white-space:nowrap;
}
.table td{
  padding:.9rem 1.1rem;
  border-top:1px solid var(--c-border);
  vertical-align:top;
}
.table tbody tr:nth-child(even) td{background:var(--c-bg-alt)}
/* Auf heller Wechselflaeche waere die Zebra-Zeile sonst unsichtbar. */
.section--alt .table tbody tr:nth-child(even) td{background:var(--c-bg)}

/* ================================================================ 17. CTA-Band */

/* `.cta` bringt bewusst keinen eigenen Hintergrund mit (Spec 7.5) — der kommt
   von `.section--alt` bzw. `.section--deep`. Hier nur der Positionskontext. */
.cta{position:relative}

.cta__inner{display:grid;gap:var(--sp-5)}
.cta__title{font-size:var(--fs-h2);letter-spacing:var(--ls-tight);color:var(--c-heading)}
.cta__text{color:var(--c-text-muted);max-width:var(--w-prose)}
.section--deep .cta__title{color:var(--c-on-deep)}
.section--deep .cta__text{color:var(--c-on-deep-muted)}

@media (min-width:900px){
  .cta__inner{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:var(--sp-8);
  }
}

/* ================================================================ 18. Seitenkopf Unterseiten */

.page-hero{padding-block:clamp(2.75rem,1.8rem + 3.5vw,4.75rem)}
.page-hero > .container > * + *{margin-top:var(--sp-4)}
.page-hero__title{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.page-hero__lead{
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--c-text-muted);
  max-width:var(--w-prose);
}

/* ================================================================ 19. Fliesstext, Hinweis, Linkliste */

.prose{max-width:var(--w-prose)}
.prose h2{font-size:var(--fs-h2);margin-top:var(--sp-7)}
.prose h3{font-size:var(--fs-h3);margin-top:var(--sp-5)}
.prose > :first-child{margin-top:0}
.prose p + p{margin-top:var(--sp-4)}
.prose h2 + p,
.prose h3 + p{margin-top:var(--sp-3)}
.prose ul,
.prose ol{margin-top:var(--sp-4);padding-inline-start:1.2em}
.prose a{text-decoration:underline}
.prose .facts{margin-top:var(--sp-4)}

.notice{
  border:1px solid var(--c-border);
  border-inline-start:3px solid var(--c-accent);
  background:var(--c-bg-alt);
  padding:var(--sp-5);
  font-size:var(--fs-sm);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
/* `.prose > :first-child` loescht den oberen Abstand der ersten Ueberschrift —
   auf den Rechtsseiten stiesse der Fliesstext sonst direkt an den Hinweis. */
.notice + .prose{margin-top:var(--sp-6)}
/* Nach einem Raster oder einer Liste haengt der Kasten sonst am Vorgaenger. */
.card-grid + .notice,
.people + .notice,
.service__list + .notice{margin-top:var(--sp-6)}
/* Zwei Hinweise untereinander (Startseite, Produkt) und der Folgelink unter
   einem Kartenraster (Startseite, Produkte und Angebote) — sonst ohne Abstand. */
.notice + .notice{margin-top:var(--sp-4)}
.card-grid + p:not([class]),
.flow-block + p:not([class]){margin-top:var(--sp-6)}

.section--alt .notice{background:var(--c-bg)}
.section--deep .notice{
  background:rgba(255,255,255,.05);
  border-color:var(--c-on-deep-border);
  border-inline-start-color:#fff;
  color:var(--c-on-deep-muted);
}

.link-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:var(--sp-3);
  justify-items:start;
}
.link-list > li{margin-top:0}
/* Linkliste (404): jede Zeile mindestens 44px hoch, damit sie auch am Telefon
   sicher zu treffen ist; der Zeilenabstand kommt aus der Trefferhoehe, nicht aus
   `gap`. */
.link-list{gap:0}
.link-list a{display:inline-flex;align-items:center;min-height:44px}
.link-list .link-arrow{padding-block:0;margin-block:0}

/* Schmaler Textcontainer (Rechtsseiten, 404): linksbuendig mit dem Seitenkopf
   statt in der Fenstermitte. Der linke Rand ist derselbe wie der von .container
   (halbe Restbreite jenseits von --w-max), die Lesebreite bleibt. */
.container--narrow{margin-inline:max(0px,calc((100% - var(--w-max)) / 2)) auto}
/* 404 hat keinen Kopf-Wrapper: Eyebrow, Ueberschrift, Lead und Liste bekommen
   dieselben Abstaende wie auf den uebrigen Seiten (.section__head). */
.container--narrow > * + *{margin-top:var(--sp-4)}
.container--narrow > .link-list{margin-top:var(--sp-6)}

/* ================================================================ 20. Fussbereich */

.site-footer{
  background:var(--c-deep-2);
  color:var(--c-on-deep);
  /* Kante zum CTA-Band davor: beide sind dunkelblau, sonst verschmelzen sie. */
  border-top:1px solid rgba(255,255,255,.14);
}
.site-footer :focus-visible{outline-color:#fff}

.site-footer__top{
  display:grid;
  gap:var(--sp-7);
  padding-block:var(--sp-8);
}

.site-footer__brand{display:flex;flex-direction:column;gap:var(--sp-4)}

.brand--footer{cursor:default}
.brand--footer .brand__mark{height:30px}
.brand--footer .brand__mark--dark{display:block}
.brand--footer .brand__word-a{color:#7BA6F0}
.brand--footer .brand__word-b{color:#9FB0CE}

.site-footer__claim{
  font-size:var(--fs-sm);
  line-height:1.55;
  color:var(--c-on-deep-muted);
  max-width:34ch;
}

.footer-col{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer-col__title{
  font-size:var(--fs-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--c-on-deep-muted);
}
.footer-col__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--sp-2);
}
.footer-col__list > li{margin-top:0}
.footer-col__list a{
  font-size:var(--fs-sm);
  color:#fff;
  text-decoration:none;
}
.footer-col__list a:hover{color:#fff;text-decoration:underline}
/* Telefon: Footer-Links 44px hoch (vorher 19px). Der Zeilenabstand kommt jetzt aus
   der Trefferhoehe, nicht aus `gap` — die Spalte waechst nur um ca. 17px je Link. */
@media (max-width:719px){
  .footer-col__list{gap:0}
  .footer-col__list a{display:inline-flex;align-items:center;min-height:44px}
}
.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-5);
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--c-on-deep-border);
  padding-block:var(--sp-5);
  /* 14px: Adresse und Handelsregister sind Pflichtangaben, keine Fussnote.
     --c-on-deep-muted auf --c-deep-2: hell 9,0:1, dunkel 8,7:1. */
  font-size:.875rem;
  color:var(--c-on-deep-muted);
}
.site-footer__legal{line-height:1.5}
.site-footer__meta{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
  font-weight:600;
  letter-spacing:.06em;
}
.site-footer__meta .lang-switch__link{color:var(--c-on-deep-muted)}
.site-footer__meta .lang-switch__link:hover{color:#fff}
.site-footer__meta .lang-switch__link--active{color:#fff}
.site-footer__meta .lang-switch__sep{color:rgba(255,255,255,.45)}
.site-footer__copy{
  margin-inline-start:var(--sp-3);
  font-weight:400;
  letter-spacing:normal;
}

/* Drei gleich breite Linkspalten; die Marke steht ueber ihnen, solange kein Platz
   fuer eine vierte Spalte ist. */
@media (min-width:640px){
  .site-footer__top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer__brand{grid-column:1/-1}
}
@media (min-width:900px){
  .site-footer__top{grid-template-columns:1.2fr repeat(3,minmax(0,1fr))}
  .site-footer__brand{grid-column:auto}
}

/* ================================================================ 21. Dunkelmodus-Korrekturen */
/* Markenfarben (--c-navy/--c-blue/--c-gray) werden bewusst nicht ueber Tokens
   umdefiniert. Wo sie im Dunkelmodus zu wenig Kontrast haetten, korrigieren
   diese beiden identischen Bloecke gezielt. */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand__mark--light{display:none}
  :root:not([data-theme="light"]) .brand__mark--dark{display:block}
  :root:not([data-theme="light"]) .card__mark-img--light{display:none}
  :root:not([data-theme="light"]) .card__mark-img--dark{display:block}
  :root:not([data-theme="light"]) .brand__word-a{color:var(--c-accent)}
  :root:not([data-theme="light"]) .brand__word-b{color:#9FB0CE}
  :root:not([data-theme="light"]) .theme-toggle__icon--moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle__icon--sun{display:block}
  :root:not([data-theme="light"]) .site-header[data-scrolled="true"]{box-shadow:0 12px 26px -20px rgba(0,0,0,.9)}
  :root:not([data-theme="light"]) .hero__grid{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64'%3E%3Cpath d='M0 34.64 60 0M0 0 60 34.64' fill='none' stroke='%237BA6F0' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E");
  }
  :root:not([data-theme="light"]) .hero__accent{color:var(--c-accent)}
  :root:not([data-theme="light"]) .btn--primary{background:var(--c-blue);border-color:rgba(255,255,255,.16)}
  :root:not([data-theme="light"]) .btn--primary:hover{background:var(--c-blue);filter:brightness(1.18)}
  :root:not([data-theme="light"]) .badge--twinone{
    color:var(--c-accent);
    border-color:var(--c-accent);
    background:rgba(123,166,240,.1);
  }
  :root:not([data-theme="light"]) .person__mono{background:var(--c-blue)}
}

:root[data-theme="dark"] .brand__mark--light{display:none}
:root[data-theme="dark"] .brand__mark--dark{display:block}
:root[data-theme="dark"] .card__mark-img--light{display:none}
:root[data-theme="dark"] .card__mark-img--dark{display:block}
:root[data-theme="dark"] .brand__word-a{color:var(--c-accent)}
:root[data-theme="dark"] .brand__word-b{color:#9FB0CE}
:root[data-theme="dark"] .theme-toggle__icon--moon{display:none}
:root[data-theme="dark"] .theme-toggle__icon--sun{display:block}
:root[data-theme="dark"] .site-header[data-scrolled="true"]{box-shadow:0 12px 26px -20px rgba(0,0,0,.9)}
:root[data-theme="dark"] .hero__grid{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64'%3E%3Cpath d='M0 34.64 60 0M0 0 60 34.64' fill='none' stroke='%237BA6F0' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .hero__accent{color:var(--c-accent)}
:root[data-theme="dark"] .btn--primary{background:var(--c-blue);border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .btn--primary:hover{background:var(--c-blue);filter:brightness(1.18)}
:root[data-theme="dark"] .badge--twinone{
  color:var(--c-accent);
  border-color:var(--c-accent);
  background:rgba(123,166,240,.1);
}
:root[data-theme="dark"] .person__mono{background:var(--c-blue)}

/* ================================================================ Ablauf in vier Schritten (Startseite #angebote)
   "TwinAI und TwinEstate arbeiten zusammen": geordnete Liste, Pfeile zwischen den
   Schritten sind reine Zierde (::after), kein Inhalt. Schmal untereinander. */
.flow-block{margin-block-start:var(--sp-7)}
.flow-block__title{font-size:var(--fs-h3);color:var(--c-heading)}
.flow-block__text{margin-block-start:var(--sp-3);color:var(--c-text-muted);max-width:60ch}
.flow{
  list-style:none;
  margin:var(--sp-5) 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
}
.flow__step{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
  min-width:0;
}
.section--alt .flow__step{background:var(--c-surface-alt)}
.flow__title{font-weight:600;color:var(--c-heading);line-height:var(--lh-snug)}
.flow__text{font-size:var(--fs-sm);color:var(--c-text-muted)}
.flow__step:not(:last-child)::after{
  content:"\2193";
  position:absolute;
  inset-inline-start:50%;
  inset-block-end:calc(-1 * var(--sp-5));
  transform:translateX(-50%);
  width:var(--sp-5);
  height:var(--sp-5);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--c-accent);
  font-weight:700;
  line-height:1;
}
@media (min-width:900px){
  .flow{grid-template-columns:repeat(4,1fr)}
  .flow__step:not(:last-child)::after{
    content:"\2192";
    inset-inline-start:auto;
    inset-inline-end:calc(-1 * var(--sp-5));
    inset-block-end:auto;
    inset-block-start:50%;
    transform:translateY(-50%);
  }
}

/* ---- Zwei Kaesten unter dem Ablauf: "KI in TwinEstate" / "TwinAI" (Startseite #angebote).
   Gleichwertig nebeneinander ab 800px, schmal untereinander. Dachzeile ist Text, kein Etikett. */
.flow-cols{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-5);
  margin:var(--sp-6) 0 var(--sp-5);
}
@media (min-width:800px){.flow-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flow-col{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:var(--sp-5);
  min-width:0;
}
.section--alt .flow-col{background:var(--c-surface-alt)}
.flow-col__meta{font-size:.875rem;color:var(--c-text-muted)}
.flow-col__title{margin-block-start:var(--sp-1);font-size:var(--fs-h3);color:var(--c-heading)}
.flow-col__list{margin:var(--sp-3) 0 0;padding-inline-start:1.25em;list-style:disc;display:flex;flex-direction:column;gap:var(--sp-2);overflow-wrap:anywhere}