@layer components {
  /* --- Typo-Bausteine --- */
  .eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--ink);
  }
  .lead { font-size: 1.25rem; line-height: 1.55; font-weight: 300; color: var(--ink-soft); }
  .section__title { margin-top: .25rem; }

  /* --- Buttons (kantig, wie die Linien) --- */
  /* Fernwartung-Button im Header nur ab Desktop-Breite; hier statt in layout.css, weil .button in dieser Schicht gewinnt */
  @media (max-width: 959px) { .button.header__remote { display: none; } }   /* Spezifität über .button */
  .button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    color: var(--ink);
    transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
    & .icon { width: 1.1em; height: 1.1em; transition: transform var(--t-move) var(--ease); }
    &:hover .icon--arrow { transform: translateX(3px); }
  }
  .button--primary {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-ink);
    &:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: #fff; }
  }
  .button--green {
    background: var(--btn-green-bg);
    border-color: var(--btn-green-bg);
    color: var(--btn-green-ink);
    &:hover { background: var(--green-deepest); border-color: var(--green-deepest); color: #fff; }
  }
  .button--outline {
    border-color: var(--rule);
    background: transparent;
    &:hover { background: var(--ink); color: var(--bg); }
  }
  .button--small { padding: .5rem .9rem; font-size: .875rem; }
  .button--large { padding: 1rem 1.75rem; font-size: 1.0625rem; }
  .button-group {
    display: flex; flex-wrap: wrap;
    & .button + .button { margin-left: -1px; }
    /* Mobil: Buttons untereinander mit Luft, volle Breite */
    @media (max-width: 639px) { flex-direction: column; align-items: stretch; gap: .75rem; & .button + .button { margin-left: 0; } }
  }

  /* --- Theme-Toggle --- */
  .theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--rule);
    color: var(--ink);
    transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
    /* Hover nur mit Maus – auf Touch-Geräten bliebe der Zustand nach dem Tippen hängen */
    @media (hover: hover) { &:hover { background: var(--ink); color: var(--bg); } }
    & .icon { width: 1.2rem; height: 1.2rem; }
  }
  /* Monitor/Sonne/Mond liegen übereinander. Das aktuelle Icon steht gerade, wartende Icons stehen bei +90°,
     das abgehende (.is-out, kurz von theme.js gesetzt) dreht nach −90° weiter – ein Wechsel ist eine Drehung in
     eine Richtung. Welches Icon aktuell ist, sagt data-theme am <html> (fehlt = Automatisch), ohne JavaScript. */
  .theme-toggle { position: relative; overflow: hidden; }
  .theme-toggle__icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: rotate(90deg) scale(.5);
    transition: opacity .3s var(--ease), transform .45s var(--ease);
    &.is-out { opacity: 0; transform: rotate(-90deg) scale(.5); }
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle__icon--auto:not(.is-out),   /* fehlt oder unbekannt = Automatisch */
  :root[data-theme="light"] .theme-toggle__icon--light:not(.is-out),
  :root[data-theme="dark"]  .theme-toggle__icon--dark:not(.is-out) { opacity: 1; transform: none; }

  /* Bildmarke im Dark Mode minimal anheben: die dunklen Schattenflächen (#1d4b68 …) würden sonst
     im Hintergrund versinken. Dateien bleiben unverändert, nur ein Filter. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) :is(.logo__mark, .brand-mark) { filter: brightness(1.1) saturate(1.05); }
  }
  :root[data-theme="dark"] :is(.logo__mark, .brand-mark) { filter: brightness(1.1) saturate(1.05); }

  /* Beim Umschalten gleiten Flächen- und Textfarben kurz (Klasse setzt theme.js für ~450 ms) */
  /* Toggle-Icons ausgenommen: sie behalten ihre eigene Dreh-Transition */
  :root.theme-transition, :root.theme-transition *:not(.theme-toggle__icon), :root.theme-transition *::before, :root.theme-transition *::after {
    transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), fill .4s var(--ease), stroke .4s var(--ease) !important;
  }

  /* --- Hero (Start) --- */
  .hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
    min-height: min(80vh, 50rem);
    display: flex;
    align-items: stretch;
  }
  /* Linienfeld wie auf der Visitenkarte: nur rechte Hälfte, links weich auslaufend,
     der Textbereich bleibt frei. Das Feld beginnt bei 30 % der Hero-Breite. */
  .hero__waves {
    position: absolute;
    inset: 0 0 0 22%;
    color: var(--wave);
    pointer-events: none;
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .35) 25%, #000 55%, #000 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .35) 25%, #000 55%, #000 93%, transparent 100%);

    @media (max-width: 899px) {
      inset: 0;
      opacity: .6;
      mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .25) 40%, #000 75%);
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .25) 40%, #000 75%);
    }
  }
  /* Animierte Wellen: Canvas blendet über das statische SVG, sobald der erste Frame steht */
  [data-waves] {
    & svg, & canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
    & canvas { opacity: 0; transition: opacity 1.5s var(--ease); }
    &.is-animated canvas { opacity: 1; }
    &.is-animated .waves--static { opacity: 0; }
  }
  .waves__probe { position: absolute; width: 0; height: 0; overflow: hidden; }
  .hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Unter 1100 px löst sich .hero__content auf (display: contents), damit die Bildmarke zwischen Überschrift
       und Text rücken kann; Abstände und Reihenfolge regelt dann dieser Container */
    @media (max-width: 1099px) {
      gap: 1.75rem;
      padding-block: clamp(4rem, 9vw, 7rem) clamp(3.5rem, 7vw, 5.5rem);
      & .hero__content { display: contents; }
      & .hero__content > .eyebrow { order: 1; }
      & .hero__head { order: 2; }
      & .hero__figure { order: 3; padding-bottom: 0; margin-block: .5rem; }
      & .hero__text { order: 4; }
      & .hero__actions { order: 5; }
    }
    @media (min-width: 1100px) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(22rem, 32rem);
      gap: 3rem;
      align-items: center;
    }
  }

  /* --- Bildmarke mit Säulen-Labels (rechte Hero-Hälfte) --- */
  .hero__figure {
    position: relative;
    @media (min-width: 1100px) {
      aspect-ratio: 1 / 1.05;
      transform: translateX(clamp(0px, 8vw - 7rem, 4rem));   /* ab ~1500 px rückt die Figur in den rechten Rand */
    }
    /* Unter 1100 px: Marke links, Labels rechts daneben auf Höhe ihrer Balken, Führungslinie bis zur Balkenkante */
    @media (max-width: 1099px) {
      --mark-w: clamp(6.5rem, 24vw, 9rem);
      --lead: 1.5rem;
      display: grid;
      grid-template-columns: var(--mark-w) minmax(0, 1fr);
      column-gap: var(--lead);
      align-items: start;
      padding-left: .75rem;       /* Marke nicht auf der Container-Kante */
      padding-bottom: clamp(3rem, 7vw, 5rem);
    }
    @media (max-width: 639px) { --lead: 1rem; }      /* gleicht den linken Abstand bei 390 px aus */
  }
  .hero__figure .brand-mark {
    @media (min-width: 1100px) {
      position: absolute;
      left: 60%; top: 50%;
      width: 46%;
      transform: translate(-50%, -50%);
      z-index: 1;                 /* liegt über den Führungslinien → Linie endet optisch an der Balkenkante */
      pointer-events: none;       /* sonst fängt das SVG-Rechteck Klicks auf überlappten Label-Teilen ab */
    }
    @media (max-width: 1099px) { width: var(--mark-w); }
  }
  .hero__labels {
    list-style: none;
    @media (min-width: 1100px) { position: absolute; inset: 0; z-index: 0; }
    @media (max-width: 1099px) { position: relative; height: calc(var(--mark-w) * 210 / 132); }   /* so hoch wie die Marke */
  }
  .hero__label {
    font-size: .6875rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    & a {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      height: 2rem;               /* ganze Pixel → Führungslinie liegt exakt auf einer Pixelzeile */
      padding: 0 .7rem;
      background: var(--bg);
      border: 1px solid var(--line-strong);
      color: var(--ink);
      text-decoration: none;
      white-space: nowrap;
      transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
      &:hover { color: var(--pillar-deep); border-color: var(--pillar); }
    }
    position: absolute;
    /* Führungslinie zum Balken (technische Beschriftung) */
    &::after {
      content: "";
      position: absolute;
      top: calc(1rem - 1px);    /* Mitte der 2-rem-Box, pixelgenau */
      width: 4.5rem;
      height: 1px;
      background: var(--rule);
    }
    @media (max-width: 1099px) {
      left: 0;
      &::after { right: 100%; width: var(--lead); }
    }
    @media (max-width: 639px) { font-size: .625rem; letter-spacing: .15em; }   /* passt neben die Marke in 390 px */
  }
  .hero__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--pillar); flex: none; }
  @media (min-width: 1100px) {
    .hero__label--1 { top: round(17%, 1px); left: 84%; &::after { right: 100%; width: 6.5rem; } }
    .hero__label--2 { top: round(48.5%, 1px); right: 70%; &::after { left: 100%; width: 6rem; } }
    .hero__label--3 { top: round(76%, 1px); left: 68%; &::after { right: 100%; width: 5rem; } }
  }
  /* Mobil: Label-Mitte auf Höhe der rechten Balkenspitze (24 %, 45,6 %, 67 % der Markenhöhe); die Linien sind
     gestaffelt lang – das kürzeste Label bekommt die längste Linie, damit das längste in 390 px passt */
  @media (max-width: 1099px) {
    .hero__label--1 { top: calc(24% - 1rem);   left: 1.5rem; &::after { width: calc(var(--lead) + 1.5rem); } }
    .hero__label--2 { --out: clamp(2.5rem, 12vw, 6rem); top: calc(45.6% - 1rem); left: var(--out); &::after { width: calc(var(--lead) + var(--out)); } }   /* ganz außen; 2,5 rem ist das Maximum für 390 px */
    .hero__label--3 { top: calc(67% - 1rem); }
  }
  /* Claim-Spalte liegt im Seitenrand; ihre Linie fällt genau auf die linke Container-Kante,
     damit Headline und die folgenden Sektionen in einer Flucht stehen. */
  .hero__claim-col {
    display: none;
    @media (min-width: 1400px) {
      display: block;
      position: absolute;
      top: 0; bottom: 0;
      right: 100%;                 /* Linie exakt auf der Container-Kante */
      width: 3rem;
      border-right: 1px solid var(--rule);
    }
  }
  .hero__head { position: relative; }
  /* Claim hängt an der Oberkante der Headline, mittig in der Randspalte links der Linie */
  .hero__claim {
    display: none;
    @media (min-width: 1400px) {
      position: absolute;
      top: .1em;
      right: calc(100% + 2rem);    /* = Container-Kante; Box ist 3 rem breit wie die Spalte */
      width: 3rem;
      display: flex;
      justify-content: center;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      transform-origin: center;
      font-size: var(--fs-eyebrow);
      letter-spacing: var(--track-eyebrow);
      text-transform: uppercase;
      white-space: nowrap;
      line-height: 1;
    }
  }
  .hero__content {
    max-width: 48rem;
    padding-block: clamp(4rem, 9vw, 7rem) clamp(3.5rem, 7vw, 5.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    align-items: flex-start;
    @media (min-width: 1400px) {
      padding-left: 2rem;          /* Luft zwischen Linie und Text */
      & .eyebrow { display: none; }
    }
  }
  .hero__title { font-size: var(--fs-display); line-height: .98; }
  .hero__text { max-width: 36rem; }
  .hero__actions { margin-top: .25rem; }

  /* --- Leistungsliste (Start) --- */
  .service-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule);
  }
  .service-list__item {
    display: grid;
    grid-template-columns: 2.75rem 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink);
    transition: padding-left var(--t-move) var(--ease);
    &:hover { color: var(--ink); padding-left: .5rem; }
    &:hover .service-list__title { color: var(--pillar-deep); }
    @media (max-width: 639px) { grid-template-columns: 2.5rem 1fr; }
    @media (max-width: 639px) { &.service-list__item--arrow { grid-template-columns: 2.5rem 1fr auto; } }   /* Pfeil bleibt in der Zeile */
  }
  .service-list__icon {
    align-self: start;
    margin-top: .2rem;
    color: var(--pillar);
    & .icon { width: 1.6rem; height: 1.6rem; }
  }
  .service-list--wide .service-list__icon { margin-top: 1.35rem; }   /* auf die Titelzeile unter der Eyebrow */
  .service-list__eyebrow { display: block; margin-bottom: .35rem; font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--pillar-deep); }
  .service-list__title { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; transition: color var(--t-hover) var(--ease); }
  .service-list__text { display: block; margin-top: .4rem; font-weight: 300; color: var(--ink-soft); max-width: 52rem; }
  .service-list__arrow { color: var(--ink); transition: transform var(--t-move) var(--ease); & .icon { width: 1.4rem; height: 1.4rem; } }
  .service-list__item--arrow:hover .service-list__arrow { transform: translateX(4px); }
  .service-list--wide .service-list__item { padding: 1.9rem 0; }
  /* Startseite: Unterleistungen einer Säule als kleine Links unter dem Text (eigene Zeile, keine Links im Link) */
  .service-list .has-sub { border-bottom: 1px solid var(--rule); & > .service-list__item { border-bottom: 0; } }
  .service-list__sub {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin: -.7rem 0 0 calc(2.75rem + 1.25rem);
    padding-bottom: 1.3rem;
    font-size: var(--fs-small);
    font-weight: 300;
    & a {
      color: var(--ink-soft);
      text-decoration: underline transparent;
      text-decoration-thickness: 1px;
      text-underline-offset: .3em;
      transition: color var(--t-hover) var(--ease), text-decoration-color var(--t-hover) var(--ease);
      &:hover { color: var(--pillar-deep); text-decoration-color: currentColor; }
    }
    & li + li::before { content: "·"; margin-right: .9rem; color: var(--ink-muted); }
    @media (max-width: 639px) { margin-left: calc(2.5rem + 1.25rem); flex-direction: column; gap: .35rem; & li + li::before { content: none; } }   /* mobil untereinander, ohne Punkte */
  }
  /* Leistungsübersicht: Gruppen je Säule mit Sprungmarke */
  .service-group { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
  .service-group__title { margin-bottom: 1rem; color: var(--pillar-deep); }   /* Säule klein in Säulenfarbe, die Zeilen tragen die Titel */
  .service-group + .service-group { margin-top: clamp(2.5rem, 5vw, 4rem); }

  /* --- Ansprechpartner (Block): Zeilen zwischen Linien --- */
  .contact-list { list-style: none; border-top: 1px solid var(--rule); }
  .contact {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem 2rem;
    align-items: center;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--rule);
    &.contact--plain { grid-template-columns: minmax(0, 1fr) auto; }   /* ohne Foto */
    @media (max-width: 639px) { grid-template-columns: 1fr; gap: .75rem; &.contact--plain { grid-template-columns: 1fr; } }
  }
  .contact__photo { width: 4.5rem; height: 4.5rem; object-fit: cover; }
  .contact__name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
  .contact__role { margin-top: .3rem; font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--ink-muted); }
  .contact__topics { margin-top: .4rem; color: var(--ink-soft); font-weight: 300; }
  .contact__links {
    list-style: none;
    display: grid;
    gap: .45rem;
    justify-items: start;
    & a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; text-decoration: none; color: var(--ink); &:hover { color: var(--link-hover); } }
    & .icon { color: var(--green); width: 1.1rem; height: 1.1rem; }
  }

  /* Startseite: Icon vorn aus zwei Kopien übereinander – Grundstrich in Säulenfarbe, darüber die Nachzeichnung in
     der dunkleren Säulenfarbe, die beim Hover per stroke-dashoffset (pathLength="1", siehe icon.php) von 0 auf volle
     Länge läuft. Beim Verlassen blendet sie nur aus (kein Rücklauf). Die Zeile rückt beim Hover nicht ein. */
  .service-list--figure .service-list__item:hover { padding-left: 0; }
  .service-list__figure {
    display: grid;
    align-self: start;
    margin-top: .2rem;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--pillar);
    & .icon { width: 100%; height: 100%; grid-area: 1 / 1; }
    & .icon--trace {
      color: var(--pillar-deep);
      opacity: 0;
      transition: opacity var(--t-hover) var(--ease);
      & > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s; }
    }
  }
  .service-list__item:is(:hover, :focus-visible) .icon--trace {
    opacity: 1;
    & > * { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-slow) var(--ease); }
    & > :nth-child(2) { transition-delay: 60ms; }
    & > :nth-child(3) { transition-delay: 120ms; }
    & > :nth-child(4) { transition-delay: 180ms; }
    & > :nth-child(n + 5) { transition-delay: 240ms; }
  }

  /* --- Icons frei in Säulenfarbe (kein Kasten) --- */
  .feature__icon, .info-card__icon {
    display: inline-grid;
    place-items: center;
    width: 2rem; height: 2rem;
    color: var(--pillar, var(--ink));
    & .icon { width: 1.6rem; height: 1.6rem; }
  }

  /* --- Feature-Liste (Leistungsseite): zwei Spalten, nur horizontale Linien --- */
  .features {
    list-style: none;
    display: grid;
    gap: 0 clamp(2rem, 5vw, 4rem);
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    border-bottom: 1px solid var(--rule);
  }
  .feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 1.75rem 0;
    border-top: 1px solid var(--rule);
  }
  .feature--plain { grid-template-columns: 1fr; }
  /* Einspaltig rechts neben der Lesespalte (Bausteine mit Anordnung „Neben dem Text“) */
  .features--list { grid-template-columns: 1fr; & .feature { padding: 1.25rem 0; } }
  .features-aside {
    & .eyebrow { margin-bottom: .75rem; }
    & .features-aside__title { font-size: 1.25rem; margin-bottom: 1.25rem; }
    & .features-aside__text { margin: -.5rem 0 1.25rem; color: var(--ink-soft); font-weight: 300; }
  }
  .feature__title { font-size: 1.125rem; margin-bottom: .4rem; }
  .feature__text { color: var(--ink-soft); font-weight: 300; font-size: var(--fs-small); }

  /* --- Kennzahlen --- */
  .stats {
    padding-block: clamp(3rem, 6vw, 5rem);
  }
  .stats__title { margin-bottom: 2.5rem; }
  .stats__list {
    list-style: none;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
  .stat { display: grid; gap: .75rem; }
  .stat__value {
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    font-weight: 600;
    line-height: .9;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
  }
  .stat__suffix { font-weight: 300; }
  .stat__label {
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    font-weight: 500;
  }

  /* --- Prozess --- */
  .process {
    list-style: none;
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
  .process__step {
    position: relative;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    &::before {
      content: "";
      position: absolute;
      top: -5px; left: 0;
      width: 9px; height: 9px;
      border-radius: 50%;
      background: var(--blue);
    }
    &:nth-child(3n+2)::before { background: var(--pink); }
    &:nth-child(3n+3)::before { background: var(--green); }
  }
  .process__num {
    display: block;
    font-size: .8125rem;
    letter-spacing: .2em;
    font-weight: 500;
    margin-bottom: .6rem;
    font-variant-numeric: tabular-nums;
  }
  .process__title { font-size: 1.125rem; margin-bottom: .4rem; }
  .process__text { color: var(--ink-soft); font-weight: 300; font-size: var(--fs-small); }

  /* --- Partner --- */
  /* Logo-Band (Start, Partnerseiten): volle Breite zwischen zwei Linien, läuft langsam endlos durch.
     Der Track verschiebt sich um die Hälfte (= zwei Listensätze), dann beginnt er nahtlos von vorn.
     Barrierefreiheit: kein Pause-Knopf – „Bewegung reduzieren“ stellt das Band still (s. u.), Hover/Fokus pausiert. */
  .partner-band {
    --band-gap: clamp(2.5rem, 5vw, 4.5rem);
    position: relative;
    overflow: hidden;
    /* fällt mit dem Abstand unter der Überschrift zusammen – es zählt der größere Wert */
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
    /* Linien leicht getönt wie das Wellenfeld: links grau, nach rechts Blau → Grün (vgl. tint in waves.js),
       halb transparent, damit sie zurückhaltender als die harten Abschnittslinien bleiben */
    --band-line: var(--wave);
    border-block: 1px solid;
    border-inline: 0;
    border-image: linear-gradient(90deg,
        color-mix(in oklab, var(--band-line) 45%, transparent),
        color-mix(in oklab, color-mix(in oklab, var(--blue) 40%, var(--band-line)) 45%, transparent) 45%,
        color-mix(in oklab, color-mix(in oklab, var(--green) 40%, var(--band-line)) 45%, transparent)) 1;
    /* weiche Ränder links/rechts für die Logos; die Linien laufen durch */
    &::before, &::after {
      content: "";
      position: absolute;
      inset-block: 0;
      z-index: 1;
      width: clamp(3rem, 12vw, 10rem);
      pointer-events: none;
    }
    &::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
    &::after  { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
  }
  .partner-band__track {
    display: flex;
    width: max-content;
    animation: partner-band var(--band-duration, 100s) linear infinite;
  }
  /* Am Abschnittsende etwas weniger Abstand bis zur Abschnittslinie – die Band-Linie gliedert bereits */
  .section:has(> .partner-band:last-child) { padding-bottom: clamp(3rem, 6vw, 5rem); }
  .partner-band:is(:hover, :focus-within) .partner-band__track { animation-play-state: paused; }
  @keyframes partner-band { to { transform: translateX(-50%); } }
  .partner-wall {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--band-gap);
    padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--band-gap) clamp(1.75rem, 3.5vw, 2.75rem) 0;   /* rechts = Lücke zum nächsten Satz */
  }
  @media (prefers-reduced-motion: reduce) {
    .partner-band__track { animation: none; width: auto; justify-content: center; }
    .partner-wall { flex-wrap: wrap; justify-content: center; row-gap: 2rem; padding-inline: var(--gutter); }
    .partner-wall[aria-hidden="true"] { display: none; }
  }
  /* Partnerlogos: in Partnerübersicht und auf Partnerseiten farbig. Im Logo-Band (Start) und in der Herstellerzeile
     der Leistungsseiten grau, farbig erst bei Hover/Fokus/Berührung (Ruhe- und Hover-Zustand nutzen dieselbe
     Filterliste – sonst springt der Browser). */
  .partner-logo {
    display: block;
    width: fit-content;
    & img {
      height: 2.1rem; width: auto; max-width: 11rem; object-fit: contain;
      transition: filter var(--t-slow) ease, opacity var(--t-slow) ease;
    }
  }
  :is(.partner-band, .logo-row) .partner-logo {
    & img { filter: grayscale(1); opacity: .65; }
    &:is(:hover, :focus-visible, :active) img { filter: grayscale(0); opacity: 1; }
  }
  .partner-logo__text { font-weight: 600; color: var(--ink); }
  /* Dunkle Logos im Dark Mode aufhellen; hue-rotate hält die Markenfarben beim Invertieren ungefähr.
     Helle/farbige Logos sind im Panel ausgenommen (.logo--no-invert). */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .partner-logo img:not(.logo--no-invert) { filter: invert(1) hue-rotate(180deg); }
    :root:not([data-theme="light"]) :is(.partner-band, .logo-row) .partner-logo img:not(.logo--no-invert) { filter: grayscale(1) invert(1) hue-rotate(180deg); opacity: .7; }
    :root:not([data-theme="light"]) :is(.partner-band, .logo-row) .partner-logo:is(:hover, :focus-visible, :active) img:not(.logo--no-invert) { filter: grayscale(0) invert(1) hue-rotate(180deg); opacity: 1; }
  }
  :root[data-theme="dark"] .partner-logo img:not(.logo--no-invert) { filter: invert(1) hue-rotate(180deg); }
  :root[data-theme="dark"] :is(.partner-band, .logo-row) .partner-logo img:not(.logo--no-invert) { filter: grayscale(1) invert(1) hue-rotate(180deg); opacity: .7; }
  :root[data-theme="dark"] :is(.partner-band, .logo-row) .partner-logo:is(:hover, :focus-visible, :active) img:not(.logo--no-invert) { filter: grayscale(0) invert(1) hue-rotate(180deg); opacity: 1; }

  /* Partner-Übersicht: eine Zeile pro Partner, Linie darunter */
  .partner-rows {
    list-style: none;
    border-top: 1px solid var(--rule);
  }
  .partner-row {
    display: grid;
    grid-template-columns: 9rem minmax(12rem, 1fr) minmax(0, 2fr) auto;
    gap: 1rem 2rem;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
    transition: padding-left var(--t-move) var(--ease);
    &:target { padding-left: .75rem; border-left: 3px solid var(--blue); }
    @media (max-width: 899px) {
      grid-template-columns: 7rem 1fr;
      & .partner-row__text, & .partner-row__link { grid-column: 2; }
    }
  }
  .partner-row__logo {
    /* Breite Wortmarken füllen die Spalte, kompakte Logos (z. B. Schmidt) dürfen höher werden */
    & img { width: 100%; height: auto; max-height: 2.75rem; object-fit: contain; object-position: left center; }
    & span { font-weight: 600; font-size: .875rem; }
  }
  .partner-row__title { font-size: 1.125rem; }
  .partner-row__role { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); margin-top: .3rem; }
  .partner-row__text { font-size: var(--fs-small); font-weight: 300; color: var(--ink-soft); }
  .partner-row__link { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; & .icon { width: 1em; height: 1em; } }
  .partner-row__title a { color: inherit; text-decoration: none; &:hover { color: var(--link-hover); } }

  /* Partnerseite: über dem Text Logo, Rolle und Herstellerlink; darunter die Stichworte als Raster mit Linien */
  .topics, .partner-facts, .logo-row { max-width: 52rem; }
  .topics, .logo-row { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
  .partner-facts { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
  .topics .eyebrow, .logo-row .eyebrow { margin-bottom: 1rem; }
  .topic-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--rule);
    & li { padding: .7rem 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); font-weight: 300; }
  }
  .partner-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.5rem;
    & .partner-logo img { height: 2.5rem; max-width: 12rem; }
  }
  .partner-facts__role { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }

  /* Leistungsseite unter dem Text: Herstellerlogos zwischen zwei Linien */
  .logo-row__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
    padding-block: 1.5rem;
    border-block: 1px solid var(--rule);
  }

  /* --- Videoabschnitt (volle Breite, Hintergrundvideo) --- */
  .video-band {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(20rem, 52vw, 40rem);
    overflow: hidden;
    background: #15181b;   /* bis Standbild/Video geladen sind */
    color: #fff;
    /* Linie unten immer, oben nur, wenn der Abschnitt davor keine hat (Seiten-Hero und .section--rule haben eine) */
    border-block: 1px solid var(--rule);
    :is(.page-hero, .section--rule, .video-band) + & { border-top: 0; }
  }
  /* „Hoch“ (Option im Block): wächst bis zur sichtbaren Fensterhöhe unter dem Header */
  /* „Hoch“: rund ein Drittel höher als Normal, aber nie Fensterhöhe – über dem Band stehen ja noch Header und Seitenkopf */
  .video-band--tall { min-height: min(clamp(27rem, 70vw, 54rem), 85svh); }
  .video-band__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Liste aus mehreren Videos: zwei Elemente wechseln sich ab, das aktive liegt sichtbar oben (video-band.js) */
  [data-playlist] .video-band__media { opacity: 0; transition: opacity .7s var(--ease); &.is-active { opacity: 1; } }
  /* Verlauf von links, damit Text auf jedem Video lesbar bleibt */
  .video-band--overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 0 0 / .62), rgb(0 0 0 / .2) 60%, transparent);
  }
  .video-band__content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    justify-items: start;
    padding-block: clamp(2.5rem, 6vw, 5rem);
    & .eyebrow { color: inherit; }
  }
  .video-band__title { max-width: 18ch; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; color: inherit; }
  .video-band__text { max-width: 40rem; font-size: 1.125rem; font-weight: 300; color: rgb(255 255 255 / .85); }
  .video-band__content .button { margin-top: .5rem; }

  /* --- CTA --- */
  .cta {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem);
  }
  .cta__inner {
    display: grid;
    gap: 2rem 4rem;
    align-items: center;
    @media (min-width: 900px) { grid-template-columns: 1.2fr 1fr; }
  }
  .cta__title { margin-top: .75rem; }
  .cta__text { margin-top: 1rem; color: var(--ink-soft); font-size: 1.125rem; font-weight: 300; }
  .cta__actions { display: grid; gap: 1rem; justify-items: start; }
  .cta__phone {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; letter-spacing: -0.03em;
    color: var(--ink); text-decoration: none;
    & .icon { color: var(--green); }
    &:hover { color: var(--green-deep); }
  }
  .cta__mail {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: 1.0625rem; color: var(--ink-soft); text-decoration: none;
    & .icon { color: var(--blue); }
    &:hover { color: var(--ink); }
  }

  /* --- Seiten-Hero (Unterseiten) --- */
  .page-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
  }
  /* Linienfeld rechts: links als Bogen begrenzt (Ellipse vom rechten Rand aus – in der Mitte reicht das Feld weiter
     nach links als oben und unten), dazu weicher Ein- und Auslauf in der Breite. */
  .page-hero__waves {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(58%, 760px);
    color: var(--wave);
    opacity: var(--page-waves-alpha);
    pointer-events: none;
    mask-image: linear-gradient(90deg, transparent, #000 50%, #000 98%, transparent),
                radial-gradient(ellipse 110% 95% at 100% 50%, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, #000 98%, transparent),
                        radial-gradient(ellipse 110% 95% at 100% 50%, #000 55%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    & svg { width: 100%; height: 100%; }
    @media (max-width: 899px) { width: 70%; opacity: calc(var(--page-waves-alpha) * .5); }
  }
  .page-hero--blue  .page-hero__waves { color: color-mix(in oklab, var(--blue) 45%, var(--wave)); }
  .page-hero--pink  .page-hero__waves { color: color-mix(in oklab, var(--pink) 45%, var(--wave)); }
  .page-hero--green .page-hero__waves { color: color-mix(in oklab, var(--green) 45%, var(--wave)); }
  .page-hero__inner { position: relative; display: grid; gap: 1.1rem; max-width: 48rem; }
  .page-hero__title { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); letter-spacing: -0.035em; line-height: 1; }
  .page-hero__intro { max-width: 40rem; }

  .breadcrumb { font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .75rem; }
  .breadcrumb__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    color: var(--ink-muted);
    & li + li::before { content: "/"; margin-right: .5rem; color: var(--line-strong); }
    & a { color: inherit; text-decoration: none; &:hover { color: var(--ink); } }
  }

  /* --- Prose (Blocks) --- */
  .prose {
    max-width: 68ch;
    & > * + * { margin-top: 1.1em; }
    & p { font-weight: 300; font-size: 1.0625rem; }
    & h2 { font-size: 1.625rem; margin-top: 2.25em; }
    & h3 { font-size: 1.25rem; margin-top: 1.75em; }
    & h2:first-child, & h3:first-child { margin-top: 0; }
    & ul, & ol { padding-left: 1.25rem; display: grid; gap: .45rem; font-weight: 300; }
    & li::marker { color: var(--blue); }
    & blockquote {
      margin: 0; padding: .5rem 0 .5rem 1.25rem;
      border-left: 2px solid var(--pink);
      font-size: 1.25rem; font-weight: 300;
      & footer { margin-top: .5rem; font-size: var(--fs-small); }
    }
    & figure { margin: 0; & figcaption { margin-top: .5rem; font-size: var(--fs-small); color: var(--ink-muted); } }
    & hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.5em; }
    & > .hint, & > .buttons, & > figure { margin-block: 2rem; }
  }
  .prose--narrow { max-width: 62ch; }

  /* --- Werte (Über uns) --- */
  .values { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
  .value {
    --dot: var(--blue);
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--rule);
    &:nth-child(3n+2) { --dot: var(--pink); }
    &:nth-child(3n+3) { --dot: var(--green); }
  }
  .value__title {
    display: flex; align-items: center; gap: .6rem;
    font-size: 1.0625rem; margin-bottom: .3rem;
    &::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); flex: none; }
  }
  .value__text { font-size: var(--fs-small); font-weight: 300; color: var(--ink-soft); }

  /* --- Callout / Download / Info --- */
  /* --- Hinweis: Fläche mit Rahmen, rechts läuft das animierte Linienfeld in der Hinweisfarbe aus --- */
  .hint {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
    background: var(--bg);
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    font-weight: 300;
    & .hint__waves {
      position: absolute;
      inset: 0 0 0 auto;
      width: 48%;
      color: color-mix(in oklab, var(--pillar, var(--green)) 40%, var(--wave));
      opacity: .55;
      pointer-events: none;
      mask-image: linear-gradient(90deg, transparent, #000 60%, #000 88%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%, #000 88%, transparent);
      @media (max-width: 639px) { width: 55%; opacity: .35; }
    }
    & .hint__icon { position: relative; color: var(--pillar, var(--blue)); margin-top: .15rem; & .icon { width: 1.5rem; height: 1.5rem; } }
    & .hint__body { position: relative; max-width: min(40rem, 62%); @media (max-width: 639px) { max-width: none; } }
    & .hint__title { margin-bottom: .5rem; font-size: var(--fs-eyebrow); font-weight: 500; color: var(--ink); }   /* vor .prose p */
    & p + p { margin-top: .6em; }
    & .button { margin-top: 1.25rem; }
  }
  .service-list + .hint { margin-top: 2rem; }
  .page-hero__actions { margin-top: .75rem; display: grid; gap: 1.1rem; justify-items: start; max-width: 40rem; }

  .info-grid {
    display: grid;
    gap: 0 clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    border-bottom: 1px solid var(--rule);
  }
  .info-card {
    display: grid;
    gap: .75rem;
    align-content: start;
    padding: 1.75rem 0;
    border-top: 1px solid var(--rule);
  }
  .info-card__title { font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-weight: 500; }
  .info-card__body { color: var(--ink); font-weight: 300; & p + p { margin-top: .5rem; } & strong { font-weight: 600; } }
  .info-card__big { font-size: 1.125rem; font-weight: 600; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; &:hover { color: var(--link-hover); } }

  /* --- Writer-Text außerhalb der Prose (Abschnitts-Blöcke, Hinweise) --- */
  .rich {
    & > * + * { margin-top: 1em; }
    & ul, & ol { padding-left: 1.25rem; display: grid; gap: .45rem; }
    & li::marker { color: var(--pillar, var(--blue)); }
  }

  .buttons { display: flex; flex-wrap: wrap; gap: .75rem; }

  /* Überschrift links, Text rechts */
  .split__body {
    display: grid;
    gap: 1.75rem;
    justify-items: start;
    max-width: 48rem;
  }

  /* Text & Bild: Bild ohne Rahmen, auf dem Handy oben */
  .media-split {
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    @media (min-width: 900px) {
      grid-template-columns: 1fr 1fr;
      & .media-split__figure { order: 2; }
      &.media-split--left .media-split__figure { order: 0; }
    }
  }
  .media-split__figure {
    margin: 0;
    & img { width: 100%; }
  }
  .media-split__body {
    display: grid;
    gap: 1rem;
    justify-items: start;
    max-width: 36rem;
    & .eyebrow { margin-bottom: -.1rem; }
    & .button { margin-top: .75rem; }
  }
  .media-split__text { color: var(--ink-soft); font-weight: 300; font-size: 1.0625rem; }

  /* Fragen & Antworten: Linien zwischen den Fragen, Pfeil dreht beim Öffnen */
  .faq {
    max-width: 52rem;
    border-bottom: 1px solid var(--rule);
  }
  .faq__item { border-top: 1px solid var(--rule); }
  .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 0;
    cursor: pointer;
    list-style: none;
    &::-webkit-details-marker { display: none; }
    & .icon { width: 1.25rem; height: 1.25rem; color: var(--ink-muted); transform: rotate(90deg); transition: transform var(--t-move) var(--ease), color var(--t-hover) var(--ease); }
    &:hover .icon { color: var(--blue); }
  }
  .faq__item[open] .faq__question .icon { transform: rotate(-90deg); }
  .faq__title { font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.3; }
  .faq__answer {
    padding: 0 3rem 1.5rem 0;
    color: var(--ink-soft);
    font-weight: 300;
  }

  /* Seitenliste: wie die Leistungsliste, ohne Icon */
  .page-list {
    --pillar-deep: var(--blue-deep);
    & .service-list__item { grid-template-columns: 1fr auto; }
  }

  /* --- Fehlerseite --- */
  .error { min-height: 50vh; display: grid; align-items: center; }
  .error__inner { display: grid; gap: 1.25rem; justify-items: start; max-width: 40rem; }
  .error__title { font-size: var(--fs-display); }
}