/* Falk – erzeugt von build.py. Nicht direkt bearbeiten. */

/* ==== assets/css/tokens.css ==== */
/* ============================================================
   Design-Tokens

   Die zentralen Stellschrauben der Website. Was hier steht, wirkt
   überall. Werte, die nur eine Komponente betreffen (der 7px-Abstand
   in einem Pfeil-Link), stehen bewusst NICHT hier – sie gehören in
   die Komponentendatei, sonst wird diese Liste unbenutzbar.

   Diese Tokens sind später die Vorlage für theme.json:
   Farben  -> settings.color.palette
   Größen  -> settings.typography.fontSizes
   Breite  -> settings.layout.contentSize / wideSize
   ============================================================ */

:root {
  /* ---------- Farben (Corporate Design) ---------- */
  --falk-blue: #00a0e3;
  --falk-navy: #223a8e;
  --navy-deep: #0f1e46;

  --ink: #111827;        /* Überschriften */
  --text: #314052;       /* Fließtext */
  --muted: #6b7788;      /* Zweitrangiger Text */
  --line: #dce4ee;       /* Rahmen und Trennlinien */
  --line-strong: #c6cdd8;/* Kräftigere Trennlinie, z. B. Diagramme */
  --soft: #f4f7fa;       /* Helle Sektionsfläche */
  --soft-2: #eef3f8;     /* Noch hellere Fläche */
  --white: #ffffff;
  --green: #1f9d73;      /* Positivkennzeichnung */
  --warning: #f3a712;

  /* ---------- Layout ---------- */
  --max: 1200px;             /* Inhaltsbreite */
  --shell-gutter: 40px;      /* Seitenabstand des Containers */
  --shell-gutter-sm: 28px;   /* … ab 760px */

  --section-space: 96px;     /* Vertikaler Rhythmus der Sektionen */
  --section-space-lg: 112px; /* Dunkle Bühnen: SCADA, InduSLEEP */
  --section-space-sm: 64px;  /* … ab 760px */

  --grid-gap: 16px;          /* Abstand in Karten-Rastern */
  --card-padding: 24px;      /* Innenabstand einer Karte */

  /* ---------- Abstandsskala ----------
     Verbindlich für alle padding-, margin- und gap-Angaben:

       4 · 8 · 12 · 16 · 20 · 24 · 28 · 32 · 40 · 48 · 56 · 64 · 80 · 96 · 112

     Die Skala steht bewusst als Kommentar und nicht als Token-Liste:
     Ein --space-16 mit dem Wert 16px wäre reine Umbenennung ohne Nutzen,
     und niemand würde --space-16 je auf 18px setzen. Was zählt, ist dass
     nur diese Werte vorkommen – das prüft build.py bei jedem Lauf.

     Ausnahme: die 2px-Korrekturen in der Navigation. Sie richten Text
     optisch aus und sind keine Rhythmus-Entscheidung.

     Für theme.json wird aus dieser Skala settings.spacing.spacingSizes. */

  /* ---------- Form ---------- */
  --radius: 8px;             /* Karten, Bilder, Flächen */
  --radius-lg: 16px;         /* Große Bildflächen, Referenzkarten */
  --radius-sm: 6px;          /* Kleine Flächen, Menüeinträge */
  --radius-pill: 999px;      /* Chips und Badges */
  --shadow: 0 18px 48px rgba(17, 24, 39, 0.12);
  --ease: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Typografie ----------
     Verbindliche Skala für alle font-size-Angaben:

       0,78 · 0,85 · 0,92 · 1 · 1,1 · 1,2 · 1,9 · 2,2 · 2,6 · 3,2 · 4  (rem)

     Die Sprünge im Textbereich liegen bei rund 9 %, im Anzeigebereich bei
     rund 20 %. Zwischen 1,2 und 1,9 klafft bewusst eine Lücke: dort endet
     Fließtext und beginnt Anzeigetypografie.

     build.py prüft die Skala bei jedem Lauf.
     Für theme.json wird daraus settings.typography.fontSizes. */

  /* Textstufen */
  --fs-label: 0.78rem;   /* Versalien: Eyebrow, Kartenkategorie */
  --fs-small: 0.85rem;   /* Navigation, Kartenlinks, Badges */
  --fs-meta: 0.92rem;    /* Sekundärtext, Bildunterschriften */
  --fs-body: 1rem;       /* Fließtext */
  --fs-lead: 1.1rem;     /* Einleitungen */
  --fs-large: 1.2rem;    /* H3, hervorgehobene Zeilen */

  /* Anzeigestufen */
  --fs-display-sm: 1.9rem;
  --fs-display: 2.2rem;
  --fs-display-lg: 2.6rem;
  --fs-display-xl: 3.2rem;
  --fs-display-2xl: 4rem;

  /* Überschriften: Standard, ab 1080px, ab 760px */
  --fs-h1: var(--fs-display-2xl);
  --fs-h1-md: var(--fs-display-xl);
  --fs-h1-sm: var(--fs-display);

  --fs-h2: var(--fs-display-lg);
  --fs-h2-md: var(--fs-display);
  --fs-h2-sm: var(--fs-display-sm);

  --fs-h3: var(--fs-large);

  /* Schmale Laufweite für technische Kennungen (SYS-01, Zustände).
     Systemschriften, keine Webfont-Einbindung. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas,
    "Liberation Mono", monospace;

  --lh-heading: 1.12;
  --lh-body: 1.6;
}


/* ==== assets/css/base.css ==== */
/* ============================================================
   Basis: Reset, Typografie, Inhaltselemente
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--white);
  font-family: Aptos, Carlito, Arial, Helvetica, sans-serif;
  line-height: var(--lh-body);
  letter-spacing: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.eyebrow {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 16px;
  color: var(--falk-navy);
  font-size: var(--fs-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Der Strich steht hinter dem Text und bleibt cyan, während der Text
   im dunkleren Navy steht. Der Farbwechsel gibt der Zeile ihren
   Akzent – deshalb bewusst nicht currentColor. */
.eyebrow::after {
  width: 32px;
  height: 2px;
  content: "";
  background: var(--falk-blue);
}

/* Auf dunklen Flächen trägt Navy nicht. Der Strich bleibt cyan. */
.eyebrow--light {
  color: rgba(255, 255, 255, 0.85);
}

/* Sicherheitsnetz für alle dunklen Flächen. Der Modifier oben ist die
   ausdrückliche Fassung; wer ihn vergisst, bekommt trotzdem einen
   lesbaren Eyebrow statt Navy auf Dunkelblau. Solange der Eyebrow cyan
   war, fiel ein vergessener Modifier nicht auf – seit er navy ist,
   wäre er unsichtbar. */
.hero .eyebrow,
.section--navy .eyebrow,
.indusleep-section .eyebrow,
.cta-band .eyebrow,
.footer--dunkel .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  line-height: var(--lh-heading);
  letter-spacing: 0;
}

h1 {
  max-width: 920px;
  margin-bottom: 24px;
  font-size: var(--fs-h1);
  font-weight: 800;
}

h2 {
  margin-bottom: 20px;
  font-size: var(--fs-h2);
  font-weight: 800;
}

h3 {
  margin-bottom: 12px;
  font-size: var(--fs-h3);
  font-weight: 800;
}

.lead {
  max-width: 820px;
  color: var(--muted);
  font-size: var(--fs-lead);
}

.lead--light {
  color: rgba(255, 255, 255, 0.75);
}

/* --- ab (max-width: 1080px) --- */
@media (max-width: 1080px) {
  h1 {
    font-size: var(--fs-h1-md);
  }

  h2 {
    font-size: var(--fs-h2-md);
  }
}

/* --- ab (max-width: 760px) --- */
@media (max-width: 760px) {
  h1 {
    max-width: 100%;
    font-size: var(--fs-h1-sm);
    line-height: 1.16;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  h2 {
    font-size: var(--fs-h2-sm);
  }
}


/* ==== assets/css/layout.css ==== */
/* ============================================================
   Layout: Container, Sektionen
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.shell {
  width: calc(100% - var(--shell-gutter));
  max-width: var(--max);
  margin-inline: auto;
}

.section {
  padding: var(--section-space) 0;
}

/* Die dunklen Bühnen tragen die Seite und bekommen mehr Luft als die
   hellen Abschnitte dazwischen. Gleiches Padding überall ließe die
   Seite gleichförmig wirken. */
.section--navy {
  padding: var(--section-space-lg) 0;
}

.section--soft {
  background: var(--soft);
}

.section--navy {
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    #0f1e46;
  background-size: 56px 56px;
}

/* Ueberschriften in dunklen Sektionen. Stand vorher inline am h2 der
   SCADA-Sektion und haette bei jeder weiteren dunklen Sektion gefehlt. */
.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

/* Abschnittskopf: Auszeichnung, Überschrift und Einleitung stehen
   untereinander und laufen über die volle Containerbreite.

   Begrenzt auf 820px bricht die Überschrift auf drei kurze Zeilen in
   der linken Hälfte und wirkt gedrängt. Über die volle Breite sind es
   zwei Zeilen, die die Fläche tragen. */
.section-head {
  display: grid;
  gap: 16px;
  margin-bottom: 40px;
}

/* Der Abstand kommt aus dem gap, nicht aus dem Eigenrand der
   Überschrift – sonst addieren sich beide. */
.section-head h2 {
  margin-bottom: 0;
}

/* Die Einleitung folgt der Überschrift nur teilweise: über die volle
   Breite läge sie bei rund 150 Zeichen je Zeile, dort findet das Auge
   den Zeilenanfang nicht mehr. 760px halten sie bei etwa 90 Zeichen.
   Das liegt über dem Ideal von 60 bis 75, ist für zwei bis drei Zeilen
   Einleitung aber vertretbar.

   Überschriften vertragen lange wie kurze Zeilen, Fließtext nicht. */
.section-head .lead {
  max-width: 760px;
}

/* --- ab (max-width: 760px) --- */
@media (max-width: 760px) {
  .shell {
    width: calc(100% - var(--shell-gutter-sm));
  }

  .section {
    padding: var(--section-space-sm) 0;
  }
}

/* --- ab (max-width: 520px) --- */
@media (max-width: 520px) {
  .shell {
    width: min(calc(100% - var(--shell-gutter-sm)), 362px);
    margin-right: auto;
    margin-left: 16px;
  }
}


/* ==== assets/css/components/buttons.css ==== */
/* ============================================================
   Buttons
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.btn {
  display: inline-flex;
  max-width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  text-align: center;
  transition: transform var(--ease), background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  color: var(--white);
  background: var(--falk-blue);
}

.btn--primary:hover {
  background: #008ed0;
}

.btn--navy {
  color: var(--white);
  background: var(--falk-navy);
}

.btn--outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.56);
  background: rgba(255, 255, 255, 0.06);
}

.btn--outline-dark {
  color: var(--falk-navy);
  border-color: rgba(34, 58, 142, 0.32);
  background: var(--white);
}


/* ==== assets/css/components/card.css ==== */
/* ============================================================
   Karte & Pfeil-Link – gemeinsame Grundform

   Wird von Lösungen, Produkten, Referenzen und FAQ genutzt.
   Hier ändern heißt: überall ändern. Nur was wirklich pro
   Abschnitt abweicht (Spaltenzahl, Mindesthöhe, Innenaufbau),
   steht in der jeweiligen Komponentendatei.

   Wird eine weitere Karte gebaut, ihre Klasse hier ergänzen –
   nicht die Regeln kopieren.
   ============================================================ */

/* --- Grundfläche --- */
.solution-card,
.product-card,
.proof-card,
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

/* --- Innenabstand und Bewegung (nicht für FAQ: dort sitzt der
       Abstand im summary/p, damit die ganze Zeile klickbar bleibt) --- */
.solution-card,
.product-card,
.proof-card {
  padding: var(--card-padding);
  /* background-color stand im Original nur bei .solution-card in der
     Transition, ohne Wirkung: keine Hover-Regel ändert den Hintergrund. */
  transition: transform var(--ease), box-shadow var(--ease),
    border-color var(--ease);
}

.solution-card:hover,
.product-card:hover,
.proof-card:hover {
  border-color: rgba(0, 160, 227, 0.42);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* --- Fließtext in Karten --- */
.solution-card p,
.product-card p,
.proof-card p {
  margin-bottom: 0;
  color: var(--muted);
}

/* --- Pfeil-Link am Kartenfuß --- */
.solution-link,
.product-link,
.proof-link,
.link-arrow,
.karte__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 800;
  transition: gap var(--ease), color var(--ease);
}

.solution-link svg,
.product-link svg,
.proof-link svg,
.link-arrow svg,
.karte__link svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.solution-card:hover .solution-link,
.product-card:hover .product-link,
.proof-card:hover .proof-link,
.ref-card:hover .link-arrow,
.karte:hover .karte__link,
.produkt:hover .link-arrow,
.loesung:hover .link-arrow,
.link-arrow:hover {
  gap: 12px;
  color: var(--falk-blue);
}


/* ==== assets/css/components/card-grid.css ==== */
/* ============================================================
   Kartenreihen mit zentriertem Rest

   Problem: Bei festen Spalten bleibt der Rest links stehen. Fünf
   Produkte in vier Spalten ergeben 4 + 1 – die letzte Karte steht
   allein am linken Rand und sieht aus wie ein Fehler.

   Lösung: Flexreihe mit fester Kartenbreite und zentrierter letzter
   Zeile. Die Karten bleiben alle gleich groß (flex-grow: 0), der
   Rest rückt in die Mitte. Das funktioniert mit jeder Anzahl:

     5 Karten bei 3 Spalten -> 3 + 2 mittig
     7 Karten bei 4 Spalten -> 4 + 3 mittig
     8 Karten bei 3 Spalten -> 3 + 3 + 2 mittig

   Die Spaltenzahl setzt jede Komponente selbst über --spalten.
   ============================================================ */

.karte-grid,
.product-grid,
.sys-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  justify-content: center;
}

.karte-grid > *,
.product-grid > *,
.sys-grid > * {
  /* min-width: 0 hebt die Vorgabe auf, dass ein Flex-Element nie
     schmaler als sein Inhalt wird. Ohne das könnte eine lange
     Produktbezeichnung eine Karte über ihre Spaltenbreite hinaus
     aufblähen und die Reihe umbrechen lassen. */
  min-width: 0;
  flex: 0 1 calc(
    (100% - (var(--spalten) - 1) * var(--grid-gap)) / var(--spalten)
  );
}


/* ==== assets/css/components/kopfband.css ==== */
/* ============================================================
   Kopfband mit Tafel

   Der Abschnittskopf steht auf einer dunklen Fläche, die Tafel
   darunter hängt in deren untere Kante hinein. Das trennt einen
   Inhaltsteil sichtbar von der Einleitung darüber – auf der
   Produktübersicht, auf den Lösungsdetailseiten und überall dort,
   wo ein neues Kapitel beginnt.

   Die Kante ist bewusst kein gemessener Pixelwert: das Band ist ein
   eigenes Element und damit immer genau so hoch wie sein Inhalt. Die
   Tafel rückt um feste 40 Pixel hinein, und genau die fehlen unten
   wieder – der Überstand bleibt auf jeder Fensterbreite gleich.

   Die Fläche unter dem Band ist --soft-2 und nicht Weiß, damit die
   weiße Tafel als Tafel lesbar bleibt.
   ============================================================ */
.section--kopfband {
  padding: 0 0 56px;
  background: var(--soft-2);
}

.kopfband {
  padding: var(--section-space) 0 112px;
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    #0c1d43;
  background-size: 56px 56px, 56px 56px, auto;
}

/* Der Kopf läuft über die volle Breite – wie die Abschnittsköpfe der
   Lösungs- und der Produktübersicht. Der Abstand nach unten steht am
   Band, damit er die 40 Pixel Überstand der Tafel mitträgt. */
.kopfband__kopf {
  margin-bottom: 0;
}

.kopfband__kopf .eyebrow,
.kopfband__kopf h2 {
  color: var(--white);
}

.kopfband__kopf .eyebrow::after {
  background: var(--falk-blue);
}

.kopfband__kopf .lead {
  color: rgba(255, 255, 255, 0.74);
}

.kopfband__tafel {
  position: relative;
  /* clip statt hidden: beides schneidet an der abgerundeten Ecke ab,
     aber hidden macht die Tafel zu einem Scrollbereich – eine
     mitlaufende Spalte darin würde dann an der Tafel kleben statt am
     Fenster und stillstehen. */
  overflow: clip;
  border: 1px solid rgba(198, 205, 216, 0.8);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.18);
  transform: translateY(-40px);
}

@media (max-width: 760px) {
  .kopfband {
    padding: var(--section-space-sm) 0 96px;
  }
}


/* ==== assets/css/components/begriffe.css ==== */
/* ============================================================
   Begriffswand

   Technische Nennungen als eigene Bausteine statt als graue
   Aufzählung: Plattformen, Normen, Auslegungsgrößen, Funktionen.
   Genau diese Begriffe suchen Besucher auf technischen Seiten –
   sie sollen die auffälligste Ebene des Abschnitts sein, nicht die
   unauffälligste.

   Offene Nennungen ("weitere nach Projektkontext") tragen einen
   gestrichelten Rahmen und sind damit als Hinweis lesbar, nicht als
   Produktname.

   Die Zahl der Felder ist offen und bestimmt die Spalten: ein Feld
   läuft über die volle Breite, sechs stehen in drei Spalten. Damit
   trägt der Baustein eine einzelne Funktionsliste ebenso wie eine
   vollständige Technologiematrix.
   ============================================================ */
.begriffe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px 40px;
}

.begriffe__feld h3 {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 20px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.begriffe__feld h3 span {
  color: var(--falk-blue);
}

.begriffe__feld ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.begriffe__feld li {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--soft);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* Offene Nennungen sind kein Produktname, sondern ein Hinweis. */
.begriffe__feld li.ist-offen {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 760px) {
  .begriffe {
    gap: 32px;
  }
}


/* ==== assets/css/components/haken.css ==== */
/* ============================================================
   Häkchenliste

   Eigenschaften, Vorteile, Nachweise – alles, was als "das ist
   erfüllt" gelesen werden soll. Der Haken sagt das in einem Zeichen;
   eine Reihe gleich aussehender Chips lässt dieselbe Liste beliebig
   wirken.

   Zwei Fassungen: hell für ruhige Flächen, dunkel für die dunklen
   Zonen. Die Spaltenzahl richtet sich nach dem Platz, nicht nach
   einer festen Zahl – die Liste kann also wachsen.
   ============================================================ */
.haken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.haken li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: var(--fs-meta);
}

.haken li::before {
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  content: "✓";
  border-radius: 50%;
  color: var(--falk-navy);
  background: rgba(0, 160, 227, 0.16);
  font-size: var(--fs-label);
  font-weight: 800;
}

.haken--dunkel li {
  color: rgba(255, 255, 255, 0.74);
}

.haken--dunkel li::before {
  color: var(--white);
  background: rgba(0, 160, 227, 0.28);
}


/* ==== assets/css/components/merkmale.css ==== */
/* ============================================================
   Merkmalsliste

   Funktionen, Parameter, Auslegungsgrößen – kurze Begriffe, die
   zusammengehören und der Reihe nach gelesen werden.

   Bewusst keine Chips: Chips stehen auf dieser Website für Namen
   (Plattformen, Normen, Produkte) und sind dort das Auffällige. Für
   Merkmale wirken sie beliebig – gleich große Kästchen ohne Ordnung.
   Eine Liste mit feiner Trennlinie liest sich ruhiger und lässt sich
   überfliegen.
   ============================================================ */
.merkmale {
  margin: 0;
  padding: 0;
  list-style: none;
}

.merkmale__label {
  margin: 0 0 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.merkmale li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-meta);
}

.merkmale li:last-child {
  border-bottom: 0;
}

/* Was projektabhängig ist, steht ruhiger. */
.merkmale li.ist-offen {
  color: var(--muted);
}


/* ==== assets/css/components/vergleich.css ==== */
/* ============================================================
   Vorher / Nachher

   Zwei Zustände in einer Tafel, getrennt durch eine markierte Kante:
   links der Ausgangszustand, rechts die Lösung. Die Marken benennen
   die Zustände fachlich ("Herkömmlich", "Mit DewCal®") und nicht als
   Vorher/Nachher – gemeint sind zwei Verfahren, nicht zwei Zeitpunkte
   derselben Anlage. Die Form ist dem
   Vorher/Nachher-Schieber nachempfunden – ohne Schieber, weil der
   zwei Aufnahmen desselben Motivs zum Aufdecken braucht. Bei zwei
   Textseiten gibt es nichts aufzudecken; die Kante allein trägt den
   Vergleich.

   Die linke Seite bleibt grau und ohne Akzent: sie ist der
   Ausgangszustand, nicht das Angebot.
   ============================================================ */
.vergleich {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 18px 48px rgba(34, 58, 142, 0.08);
}

.vergleich__seite {
  padding: 40px;
}

.vergleich__seite--vorher {
  background: var(--soft);
}

/* Die Kante zwischen beiden Zuständen. */
.vergleich__seite--nachher {
  border-left: 2px solid var(--falk-blue);
}

.vergleich__seite .vergleich__marke {
  display: inline-block;
  /* Die Regel steht mit der Seite davor, weil .vergleich__seite p den
     Rand sonst auf 0 zieht und die Marke an der Überschrift klebt. */
  margin: 0 0 32px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vergleich__seite--nachher .vergleich__marke {
  color: var(--white);
  background: var(--falk-blue);
}

.vergleich__seite h3 {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: var(--fs-large);
  text-wrap: balance;
}

.vergleich__seite--nachher h3 {
  color: var(--ink);
}

.vergleich__seite p {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-meta);
}

/* Die Größe, in der sich beide Seiten unterscheiden – auf beiden
   Seiten an derselben Stelle, sonst ist es kein Vergleich. */
.vergleich__groesse {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.vergleich__groesse span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vergleich__groesse strong {
  color: var(--ink);
  font-size: var(--fs-body);
}

.vergleich__seite--nachher .vergleich__groesse strong {
  color: var(--falk-navy);
}

@media (max-width: 760px) {
  .vergleich {
    grid-template-columns: 1fr;
  }

  .vergleich__seite {
    padding: 28px;
  }

  .vergleich__seite--nachher {
    border-top: 2px solid var(--falk-blue);
    border-left: 0;
  }
}


/* ==== assets/css/components/karte.css ==== */
/* ============================================================
   Karte – die gemeinsame Form für Lösungen und Produkte

   Beide Abschnitte zeigen dasselbe: ein Angebot von Falk, das auf
   eine Detailseite führt. Gleiche Funktion, gleiche Form. Vorher
   hatten sie unterschiedliche Kennungen, unterschiedliche Flächen
   und den Pfeil an unterschiedlichen Stellen – das signalisiert
   einen Unterschied, den es nicht gibt.

   Unterschieden werden die Abschnitte über Überschrift und
   Hintergrundfläche, nicht über den Aufbau der Karte.

   Aufbau:
     .karte
       .karte__kennung   LÖSUNG 01 / PRODUKT 01
       h3                Bezeichnung
       .karte__text      Beschreibung, füllt die Karte
       .karte__link      Mehr erfahren →

   Beide Absätze haben eine eigene Klasse. Eine Regel wie
   ".karte p { flex: 1 }" wäre bequem, würde aber auch die Kennung
   dehnen – genau der Fehler, der in products.css steckte.

   Die Karten brauchen eine weiße Sektion: sie stehen selbst auf
   Grau. Im Bauplan mit ":weiss" setzen.
   ============================================================ */

.karte {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: var(--card-padding);
  /* Linie oben statt Rahmen ringsum: die Karte hängt an einem
     farbigen Anschlag, der beim Überfahren nach Cyan wechselt. */
  border-top: 3px solid var(--falk-navy);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--soft);
  transition: transform var(--ease), box-shadow var(--ease),
    border-top-color var(--ease), background-color var(--ease);
}

.karte:hover {
  border-top-color: var(--falk-blue);
  background: var(--white);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.karte__kennung {
  flex: none;
  margin-bottom: 16px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.karte__text {
  flex: 1;
  margin-bottom: 0;
  color: var(--muted);
}

/* --- Spaltenzahl. Reihenmechanik in card-grid.css: gleich breite
       Karten, letzte Zeile mittig.

       Drei Spalten für beide Abschnitte. Vier wären möglich, machten die
       Karten aber 288px schmal – die Lösungstexte brachen dann auf acht
       Zeilen um, während die Produktkarten bei 389px standen. Gleiche
       Kartenbreite ist der halbe Zweck der Vereinheitlichung.

         5 Produkte -> 3 + 2 mittig
         7 Lösungen -> 3 + 3 + 1 mittig
   --- */
.karte-grid {
  --spalten: 3;
}

@media (max-width: 1080px) {
  .karte-grid {
    --spalten: 2;
  }
}

@media (max-width: 760px) {
  .karte-grid {
    --spalten: 1;
  }
}


/* ==== assets/css/components/utilbar.css ==== */
/* ============================================================
   Servicezeile über dem Header

   Karriere, Kontakt, Sprachumschalter. Der Platz für DE/EN ist
   bewusst schon vorhanden: nachträglich einzubauen ist deutlich
   teurer, als ihn jetzt freizuhalten.
   ============================================================ */

.utilbar {
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: var(--fs-small);
}

.utilbar__inner {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}

.utilbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: color var(--ease);
}

.utilbar a:hover {
  color: var(--falk-navy);
}

.utilbar .lang {
  color: var(--ink);
  font-weight: 700;
}

.utilbar .lang span {
  color: var(--muted);
  font-weight: 600;
}

@media (max-width: 760px) {
  .utilbar__inner {
    gap: 20px;
    justify-content: center;
  }
}


/* ==== assets/css/components/header.css ==== */
/* ============================================================
   Header & Navigation
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(220, 228, 238, 0.9);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.topbar__inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 28px;
}

.logo {
  flex: 0 0 auto;
}

.logo img {
  width: 178px;
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  /* 0,85 rem waren für die Hauptnavigation zu wenig – das ist die
     kleinste Stufe der Skala und für Kartenlinks und Badges gedacht.
     Der Platz für die Fließtextgröße entstand, als Karriere unter
     Unternehmen wanderte und Kontakt aus der Hauptnavigation kam: Beides
     steht in der Servicezeile, Kontakt zusätzlich als Schaltfläche. */
  font-size: var(--fs-body);
  font-weight: 700;
  color: #44536a;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  /* Ein Menüpunkt bricht nie mitten im Namen um. Ohne das wurde aus
     "Projekte & Wissen" bei knappem Platz ein dreizeiliger Klotz, der
     die ganze Kopfzeile auseinandergezogen hat. */
  white-space: nowrap;
  transition: color var(--ease), background-color var(--ease);
}

.nav__link:hover,
.nav__item:hover > .nav__link {
  color: var(--falk-navy);
  background: rgba(34, 58, 142, 0.06);
}

.chev {
  width: 13px;
  height: 13px;
  color: #8a96aa;
  transition: transform var(--ease), color var(--ease);
}

.nav__item:hover .chev {
  color: var(--falk-navy);
  transform: rotate(180deg);
}

/* Die Klappe sitzt 12px unter dem Menüpunkt. Ohne Gegenmaßnahme ist
   das eine Totzone: die Maus verlässt dort den .nav__item, :hover endet
   und die Klappe schließt, bevor man sie erreicht. Die Brücke unten
   (.nav__drop::before) überspannt diese Lücke unsichtbar. */
.nav__drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  display: grid;
  min-width: 260px;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  /* Beim Schließen 140ms warten. Wer diagonal zum zweiten Eintrag
     zieht, verliert das Menü sonst schon bei kleinen Abweichungen. */
  transition: opacity var(--ease) 140ms, transform var(--ease) 140ms;
}

/* Unsichtbare Brücke über die Lücke zwischen Menüpunkt und Klappe.
   Liegt innerhalb der Klappe, erbt also deren pointer-events – bei
   geschlossenem Menü fängt sie nichts ab.

   16px bei 12px Lücke: die überstehenden 4px reichen in den Menüpunkt
   hinein, was nichts stört, und lassen Reserve für Subpixel-Rundung. */
.nav__drop::before {
  position: absolute;
  top: -16px;
  right: 0;
  left: 0;
  height: 16px;
  content: "";
}

.nav__drop--wide {
  min-width: 430px;
  gap: 0;
  padding: 12px;
  grid-template-columns: 1fr;
}

.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  /* Öffnen ohne Verzögerung, nur das Schließen wartet. */
  transition-delay: 0s;
}

.nav__drop-item {
  display: grid;
  gap: 2px;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  color: #56657a;
  font-size: var(--fs-small);
  line-height: 1.3;
  white-space: nowrap;
  transition: color var(--ease), background-color var(--ease), transform var(--ease);
}

.nav__drop-item:hover {
  color: var(--falk-navy);
  background: var(--soft);
  transform: translateX(2px);
}

.nav__drop--wide .nav__drop-item + .nav__drop-item {
  border-top: 1px solid rgba(220, 228, 238, 0.72);
}

.nav__drop--wide .nav__drop-item:hover {
  border-top-color: transparent;
}

.nav__drop-item strong {
  display: block;
  color: var(--ink);
}

.nav__drop-item span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
}

.nav__cta {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  padding: 12px 24px;
  color: var(--white);
  border-radius: var(--radius);
  background: var(--falk-navy);
  white-space: nowrap;
  transition: background-color var(--ease), transform var(--ease), box-shadow var(--ease);
}

.nav__cta:hover {
  color: var(--white);
  background: #1c3080;
  box-shadow: 0 10px 24px rgba(34, 58, 142, 0.18);
  transform: translateY(-1px);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.menu-toggle svg {
  width: 24px;
  height: 24px;
  color: var(--falk-navy);
}

/* Gemeinsames Mobilmenü für Hauptwebsite und InduSLEEP-Paket. */
.mobile-menu-intro,
.mobile-menu-arrow,
.mobile-menu-label,
.nav__expand,
.menu-backdrop {
  display: none;
}


html.site-menu-open {
  overflow: hidden;
}

/* Nur das Wurzelelement sperrt das Scrollen. Ein eigener Scrollcontainer
   am body würde die Sticky-Kopfzeile nach dem Scrollen aus dem Bild ziehen. */
.site-menu-open body {
  overflow: visible;
}

@media (max-width: 1080px) {
  .topbar--menu {
    --mobile-menu-width: 600px;
    background: var(--white);
  }

  .topbar--menu:not(.is-menu-ready) {
    position: relative;
  }

  .topbar--menu .topbar__inner {
    min-height: 72px;
    gap: 16px;
    flex-wrap: wrap;
  }

  .topbar--menu .menu-toggle {
    display: none;
    width: auto;
    min-width: 104px;
    gap: 8px;
    padding: 8px 12px;
    color: var(--falk-navy);
    font-size: var(--fs-small);
    font-weight: 700;
  }

  .topbar--menu.is-menu-ready .menu-toggle {
    display: inline-flex;
  }

  .topbar--menu .menu-toggle[aria-expanded="true"] {
    background: var(--soft);
    border-color: var(--line-strong);
  }

  .topbar--menu .menu-toggle svg {
    width: 20px;
    height: 20px;
  }

  .topbar--menu .menu-toggle path {
    transform-origin: 12px 12px;
    transition: transform var(--ease), opacity var(--ease);
  }

  .topbar--menu .menu-toggle[aria-expanded="true"] .menu-icon__top {
    transform: rotate(45deg) translateY(5px);
  }

  .topbar--menu .menu-toggle[aria-expanded="true"] .menu-icon__middle {
    opacity: 0;
  }

  .topbar--menu .menu-toggle[aria-expanded="true"] .menu-icon__bottom {
    transform: rotate(-45deg) translateY(-5px);
  }

  /* Ohne JavaScript steht die Navigation offen im Dokumentfluss. */
  .topbar--menu .nav {
    display: grid;
    flex: 0 0 100%;
    width: 100%;
    gap: 0;
    margin: 0;
    padding: 24px 0;
    background: var(--white);
  }

  .topbar--menu.is-menu-ready .nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - var(--mobile-menu-top, 113px));
    max-height: calc(100dvh - var(--mobile-menu-top, 113px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px max(20px, calc((100vw - var(--mobile-menu-width)) / 2));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: 0 20px 32px rgba(15, 30, 70, 0.12);
  }

  .topbar--menu.is-menu-ready .nav:not(.is-open) {
    display: none;
  }

  .mobile-menu-intro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 12px 12px;
    font-size: var(--fs-small);
  }

  .mobile-menu-intro strong {
    color: var(--falk-navy);
    font-weight: 800;
  }

  .mobile-menu-intro > span {
    color: var(--muted);
    font-weight: 400;
  }

  .topbar--menu .nav .nav__link {
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 16px 12px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    font-size: var(--fs-lead);
    line-height: 1.4;
    white-space: normal;
  }

  .topbar--menu .nav .nav__link.is-aktiv {
    color: var(--falk-navy);
    background: var(--soft-2);
    box-shadow: inset 3px 0 var(--falk-blue);
  }

  /* Der Bereichsname bleibt ein Link; der eigene Pfeil öffnet Unterseiten. */
  .topbar--menu .nav__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    border-bottom: 1px solid var(--line);
  }

  .topbar--menu .nav .nav__item > .nav__link {
    border-bottom: 0;
  }

  .topbar--menu .nav__link .chev {
    display: none;
  }

  .topbar--menu.is-menu-ready .nav__expand {
    display: flex;
    width: 48px;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--falk-navy);
    transition: background-color var(--ease), color var(--ease);
  }

  .nav__expand svg {
    width: 20px;
    height: 20px;
    transition: transform var(--ease);
  }

  .nav__expand[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .topbar--menu .nav .nav__item.is-expanded > :is(.nav__link, .nav__expand) {
    color: var(--falk-navy);
    background: var(--soft-2);
  }

  .topbar--menu .nav .nav__drop {
    position: static;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 0;
    margin: 12px 12px 20px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 2px solid var(--falk-blue);
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .topbar--menu.is-menu-ready .nav__item:not(.is-expanded) > .nav__drop {
    display: none;
  }

  .topbar--menu .nav__drop::before,
  .topbar--menu .nav__drop-item span {
    display: none;
  }

  .topbar--menu .nav .nav__drop-item {
    min-height: 44px;
    align-content: center;
    padding: 12px;
    border: 0;
    border-radius: 0;
    color: var(--text);
    font-size: var(--fs-meta);
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    transform: none;
  }

  .topbar--menu .nav .nav__drop-item + .nav__drop-item {
    border-top: 1px solid rgba(220, 228, 238, 0.75);
  }

  .topbar--menu .nav :is(.nav__link, .nav__expand, .nav__drop-item):is(:active, :focus-visible) {
    color: var(--falk-navy);
    background: rgba(0, 160, 227, 0.09);
  }

  .topbar--menu .nav .nav__drop-item strong {
    color: inherit;
    font-weight: inherit;
  }

  .nav.is-open .nav__link.is-aktiv::after {
    display: none;
  }

  .mobile-menu-label,
  .mobile-menu-arrow {
    display: inline;
  }

  .desktop-menu-label {
    display: none;
  }

  .mobile-menu-arrow {
    flex-shrink: 0;
    color: var(--falk-navy);
    font-size: var(--fs-large);
    font-weight: 400;
  }

  .topbar--menu .nav .nav__cta {
    min-height: 52px;
    margin: 24px 0 0;
    padding: 12px 20px;
    font-size: var(--fs-body);
  }

  .topbar--menu :is(.menu-toggle, .nav__link, .nav__cta, .nav__expand, .nav__drop-item):focus-visible {
    outline: 3px solid var(--falk-blue);
    outline-offset: 3px;
  }

  .menu-backdrop:not([hidden]) {
    position: fixed;
    z-index: 49;
    inset: 0;
    display: block;
    background: rgba(15, 30, 70, 0.5);
    touch-action: none;
  }

}

@media (max-width: 1080px) and (hover: hover) {
  .topbar--menu .nav .nav__item:has(> :is(.nav__link, .nav__expand):hover) > :is(.nav__link, .nav__expand),
  .topbar--menu .nav > .nav__link:hover,
  .topbar--menu .nav .nav__drop-item:hover {
    color: var(--falk-navy);
    background: rgba(0, 160, 227, 0.09);
  }
}

@media (max-width: 760px) {
  .topbar--menu .logo img {
    width: 156px;
  }
}

@media (max-width: 1080px) and (max-height: 600px) {
  .topbar--menu.is-menu-ready .nav {
    padding-top: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .topbar--menu .nav .nav__link {
    min-height: 48px;
    padding-block: 12px;
    font-size: var(--fs-body);
  }

  .topbar--menu.is-menu-ready .nav__expand {
    min-height: 48px;
  }

  .topbar--menu .nav .nav__cta {
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar--menu .menu-toggle path,
  .topbar--menu .nav__expand svg {
    transition: none;
  }
}


/* ==== assets/css/components/hero.css ==== */
/* ============================================================
   Hero
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

/* Die Ueberschrift ist nur im dunklen Hero weiss. Global gesetzt waere
   sie auf jeder hellen Unterseite unsichtbar. */
.hero h1 {
  color: var(--white);
}

.hero {
  position: relative;
  min-height: 86svh;
  overflow: hidden;
  color: var(--white);
  background: #0f1e46;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(8, 16, 40, 0.9) 0%, rgba(13, 29, 71, 0.8) 44%, rgba(13, 29, 71, 0.28) 100%),
    linear-gradient(0deg, rgba(8, 16, 40, 0.78) 0%, rgba(8, 16, 40, 0.06) 42%);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: var(--max);
  min-height: calc(86svh - 76px);
  flex-direction: column;
  justify-content: flex-end;
  padding: 96px 0 64px;
}

.hero__intro {
  max-width: 760px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-large);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.hero__trust {
  display: grid;
  max-width: 930px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero__trust-item {
  padding: 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(10, 22, 55, 0.46);
}

.hero__trust-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
  font-size: var(--fs-large);
}

.hero__trust-item span {
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--fs-meta);
}

/* --- ab (max-width: 760px) --- */
@media (max-width: 760px) {
  .hero {
    min-height: 88svh;
  }

  .hero__content {
    min-width: 0;
    min-height: calc(88svh - 76px);
    padding: 64px 0 40px;
  }

  .hero__intro {
    font-size: var(--fs-body);
    overflow-wrap: break-word;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
    white-space: normal;
  }

  .hero__trust {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Variante v2

   Ersetzt die drei Trust-Kacheln durch die Nutzenzeile mit
   Akzentbalken und eine Fußzeile aus Vertrauenszeile und
   Themen-Chips. Die Bühne selbst – Bild, Abdunklung, Höhe –
   bleibt gleich; unterschiedlich ist nur, was unter der
   Überschrift steht.
   ============================================================ */

/* Die Fußzeile bringt ihren eigenen Abstand mit. */
.hero--v2 .hero__content {
  padding-bottom: 0;
}

.hero--v2 .hero__actions {
  margin-bottom: 0;
}

/* Nutzenzeile: hervorgehoben durch einen Balken, nicht durch Farbe –
   der Text bleibt damit gut lesbar. */
.hero__benefit {
  max-width: 680px;
  margin: 0 0 32px;
  padding-left: 16px;
  border-left: 3px solid var(--falk-blue);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-body);
  font-weight: 700;
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 64px;
  padding: 24px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

/* Ohne Chips daneben bekommt die Zeile die volle Spalte. 760px hält
   sie bei zwei Zeilen – darunter wirkt sie wie eine übrig gebliebene
   Spalte, darüber reißt die Lesezeile. */
.hero__trustline {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-meta);
}


@media (max-width: 760px) {
  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 48px;
  }
}

/* ============================================================
   Wiederverwendbarer Unterseiten-Hero

   Kompakter als die Startseitenbühne und bewusst ohne Kennzahlen,
   Diagramme oder Trust-Karten. Bild, Eyebrow, Titel, Einleitung und
   Aktionen lassen sich pro Inhaltsseite austauschen; das Layout bleibt.
   ============================================================ */
.subpage-hero {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
}

.subpage-hero .hero__media::after {
  background:
    linear-gradient(90deg, rgba(7, 20, 47, 0.98) 0%, rgba(10, 27, 63, 0.92) 48%, rgba(10, 27, 63, 0.5) 76%, rgba(10, 27, 63, 0.3) 100%),
    linear-gradient(0deg, rgba(7, 20, 47, 0.5), rgba(7, 20, 47, 0.08));
}

.subpage-hero__media img {
  object-position: 58% center;
}

.subpage-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 580px;
  align-content: center;
  padding: 80px 0;
}

.subpage-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 48px;
  color: rgba(255, 255, 255, 0.56);
  font-size: var(--fs-small);
}

.subpage-hero__breadcrumb a {
  transition: color var(--ease);
}

.subpage-hero__breadcrumb a:hover {
  color: var(--white);
}

.subpage-hero h1 {
  max-width: 900px;
  color: var(--white);
  text-wrap: balance;
}

.subpage-hero__lead {
  max-width: 780px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--fs-lead);
}

.subpage-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.subpage-hero a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .subpage-hero,
  .subpage-hero__content {
    min-height: 560px;
  }

  .subpage-hero .hero__media::after {
    background: rgba(7, 20, 47, 0.88);
  }

  .subpage-hero__content {
    padding: 64px 0;
  }

  .subpage-hero__breadcrumb {
    margin-bottom: 32px;
  }

  .subpage-hero__lead {
    font-size: var(--fs-body);
  }

  .subpage-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .subpage-hero__actions .btn {
    width: 100%;
    white-space: normal;
  }
}

/* ============================================================
   Variante v3: Kompetenzmarker statt Karten

   Die drei Kacheln unter dem Hero-Text hatten Fläche, Rahmen und
   Innenabstand wie eine Karte und zogen dadurch Gewicht vom
   Hauptversprechen ab. Jetzt hängen sie an einer kurzen Cyan-Linie,
   ohne eigene Fläche – dieselbe Information, deutlich leiser.
   ============================================================ */

.hero__trust--marker .hero__trust-item {
  padding: 0 0 0 16px;
  border: 0;
  border-left: 2px solid var(--falk-blue);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
}

.hero__trust--marker .hero__trust-item strong {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__trust--marker .hero__trust-item span {
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--fs-meta);
}


/* ==== assets/css/components/stats.css ==== */
/* ============================================================
   Kennzahlen-Band
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.stats {
  color: var(--white);
  background: var(--falk-navy);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  display: grid;
  min-height: 116px;
  place-items: center;
  align-content: center;
  padding: 24px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.stat:last-child {
  border-right: 0;
}

.stat__value {
  margin: 0 0 8px;
  color: var(--white);
  font-size: var(--fs-display-sm);
  font-weight: 800;
  line-height: 1;
}

.stat__value b {
  color: var(--falk-blue);
  font-weight: inherit;
}

.stat__label {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* --- ab (max-width: 1080px) --- */
@media (max-width: 1080px) {
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat:nth-child(2) {
    border-right: 0;
  }
}

/* --- ab (max-width: 760px) --- */
@media (max-width: 760px) {
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .stat:nth-child(2n) {
    border-right: 0;
  }

  .stat:nth-child(n+3) {
    border-bottom: 0;
  }
}


/* ==== assets/css/components/split.css ==== */
/* ============================================================
   Text-Bild-Abschnitt
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.84fr);
  gap: 56px;
  align-items: center;
}

.split__image {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--soft-2);
}

.split__image img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
}

.split__image::after {
  position: absolute;
  right: -12%;
  bottom: -18%;
  width: 72%;
  height: 44%;
  content: "";
  border-radius: 100% 0 0 0;
  background: rgba(255, 255, 255, 0.78);
}

.competence-list {
  display: grid;
  gap: 12px;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
}

.competence-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text);
  font-weight: 700;
}

.competence-list li::before {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  content: "";
  background: var(--falk-blue);
  clip-path: polygon(40% 73%, 18% 51%, 27% 42%, 40% 55%, 73% 22%, 82% 31%);
  font-weight: 900;
}

/* --- ab (max-width: 1080px) --- */
@media (max-width: 1080px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* --- ab (max-width: 760px) --- */
@media (max-width: 760px) {
  .split__image,
.split__image img {
    min-height: 320px;
  }
}


/* ==== assets/css/components/profile.css ==== */
/* ============================================================
   Kurzprofil mit Bild (Variante v2)

   Zweispaltig, Bild links mit angesetzter Eckmarkierung.
   Alternative zum .split-Abschnitt mit Kompetenzliste.
   ============================================================ */

.profile {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}

.profile__figure {
  position: relative;
  margin: 0;
}

/* Eckmarkierung oben links, rein dekorativ. */
.profile__figure::before {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 46%;
  height: 46%;
  content: "";
  border-top: 3px solid var(--falk-blue);
  border-left: 3px solid var(--falk-blue);
  border-radius: var(--radius-lg) 0 0 0;
}

.profile__figure img {
  position: relative;
  width: 100%;
  min-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.profile__text p + p {
  margin-top: 16px;
}

@media (max-width: 1080px) {
  .profile {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 760px) {
  .profile__figure img {
    min-height: 300px;
  }
}

/* ============================================================
   Variante v3: Foto breiter, Winkel verzahnt

   Der Winkel lag vorher 20px neben dem Bild und wirkte dadurch wie
   ein aufgesetztes Dekoelement. Jetzt greift er über die Bildkante –
   er liegt teils auf dem Foto, teils daneben und liest sich damit
   als Rahmen statt als Zierat.

   Kürzer als in der ersten Fassung: der Winkel soll die Fläche
   andeuten, nicht umranden. Zu lange Schenkel lasen sich wieder als
   aufgesetzte Dekoration.

   Das Foto bekommt 8 % mehr Gewicht. Die rechte Seite trägt mit der
   großen Überschrift ohnehin viel; links braucht es Masse dagegen.
   ============================================================ */

.profile--v3 {
  grid-template-columns: minmax(340px, 1.02fr) minmax(0, 1.1fr);
}

.profile--v3 .profile__figure::before {
  top: 28px;
  left: -12px;
  width: 26%;
  height: 22%;
  border-width: 2px;
  border-radius: 0;
}

/* Zweiter Winkel unten rechts schließt den Rahmen, ohne ihn zu
   zeichnen – zwei Ecken genügen, um die Fläche zu fassen. */
.profile--v3 .profile__figure::after {
  position: absolute;
  right: -12px;
  bottom: 28px;
  width: 26%;
  height: 22%;
  content: "";
  border-right: 2px solid var(--falk-blue);
  border-bottom: 2px solid var(--falk-blue);
}

@media (max-width: 1080px) {
  .profile--v3 {
    grid-template-columns: 1fr;
  }
}


/* ==== assets/css/components/solutions.css ==== */
/* ============================================================
   Lösungen-Grid
   Grundform der Karte: components/card.css
   ============================================================ */

.solution-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.solution-card {
  display: grid;
  min-height: 258px;
  align-content: start;
}

/* --- Hervorgehobene Karte (doppelte Breite, dunkel) --- */
.solution-card--featured {
  grid-column: span 2;
  color: var(--white);
  border-color: transparent;
  background: linear-gradient(135deg, #071229 0%, var(--falk-navy) 100%);
  box-shadow: 0 20px 46px rgba(15, 30, 70, 0.24);
}

.solution-card--featured h3 {
  color: var(--white);
}

.solution-card--featured p {
  color: rgba(255, 255, 255, 0.84);
}

.solution-card--featured .card-meta {
  color: #86ddff;
}

.solution-card--featured .solution-link {
  color: rgba(255, 255, 255, 0.82);
}

.solution-card--featured:hover .solution-link {
  color: var(--white);
}

/* --- Kategoriezeile über der Überschrift --- */
.card-meta {
  margin-bottom: 16px;
  color: var(--falk-blue);
  font-size: var(--fs-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* --- ab (max-width: 1080px) --- */
@media (max-width: 1080px) {
  .solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- ab (max-width: 760px) --- */
@media (max-width: 760px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }

  .solution-card--featured {
    grid-column: auto;
  }
}

/* ============================================================
   Lösungsarchitektur

   Wiederverwendbarer Verteiler für Übersichtsseiten. Anders als ein
   Kartenraster zeigt er zusammenhängende Kompetenzgruppen an einer
   durchgehenden Systemlinie. Gruppen, Zeilen und Themenbegriffe können
   je Inhaltsseite ergänzt oder gekürzt werden.
   ============================================================ */
.solution-architecture__head {
  margin-bottom: 56px;
}

.solution-architecture__board {
  border-top: 1px solid var(--line-strong);
}

.solution-architecture__group {
  display: grid;
  grid-template-columns: minmax(240px, 0.4fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line-strong);
}

.solution-architecture__group-head {
  align-self: start;
  padding: 40px 48px 40px 0;
}

.solution-architecture__group-head p {
  margin-bottom: 16px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solution-architecture__group-head h3 {
  margin-bottom: 16px;
  color: var(--ink);
  font-size: var(--fs-display-sm);
  text-wrap: balance;
}

.solution-architecture__group-head span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.solution-architecture__list {
  position: relative;
  border-left: 1px solid rgba(0, 160, 227, 0.34);
}

.solution-path {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 152px;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.36fr) 24px;
  gap: 24px;
  align-items: center;
  padding: 28px 24px 28px 40px;
  border-bottom: 1px solid var(--line);
  transition: color var(--ease), background-color var(--ease), padding-left var(--ease);
}

.solution-path:last-child {
  border-bottom: 0;
}

.solution-path::before {
  position: absolute;
  top: calc(50% - 4px);
  left: -5px;
  width: 9px;
  height: 9px;
  content: "";
  border: 2px solid var(--soft);
  border-radius: 50%;
  background: var(--falk-blue);
}

.solution-path--core {
  min-height: 168px;
}

.solution-path:hover {
  padding-left: 48px;
  color: var(--falk-navy);
  background: var(--white);
}

.solution-path__copy {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.solution-path__copy h4 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-large);
  line-height: var(--lh-heading);
}

.solution-path--core .solution-path__copy h4 {
  font-size: var(--fs-display-sm);
}

.solution-path__copy p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.solution-path__topics {
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
}

.solution-path > svg {
  width: 20px;
  height: 20px;
  color: var(--falk-navy);
  transition: color var(--ease), transform var(--ease);
}

.solution-path:hover > svg {
  color: var(--falk-blue);
  transform: translateX(4px);
}

.solution-path:focus-visible {
  z-index: 1;
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

@media (max-width: 1080px) {
  .solution-architecture__group {
    grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  }

  .solution-architecture__group-head {
    padding-right: 32px;
  }

  .solution-path {
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .solution-path__topics {
    grid-column: 1;
  }

  .solution-path > svg {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 760px) {
  .solution-architecture__head {
    margin-bottom: 40px;
  }

  .solution-architecture__group {
    grid-template-columns: 1fr;
    padding: 40px 0;
  }

  .solution-architecture__group:first-child {
    padding-top: 0;
  }

  .solution-architecture__group:last-child {
    padding-bottom: 0;
  }

  .solution-architecture__group-head {
    padding: 0 0 28px;
  }

  .solution-architecture__group-head h3 {
    font-size: var(--fs-large);
  }

  .solution-architecture__list {
    border-left: 0;
  }

  .solution-path,
  .solution-path--core {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 16px;
    padding: 24px 0;
  }

  .solution-path:hover {
    padding-left: 0;
  }

  .solution-path::before {
    display: none;
  }

  .solution-path--core .solution-path__copy h4 {
    font-size: var(--fs-large);
  }

  .solution-path__topics {
    grid-column: 1 / -1;
  }

  .solution-path > svg {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solution-path,
  .solution-path > svg {
    transition: none;
  }
}


/* ==== assets/css/components/loesung.css ==== */
/* ============================================================
   Lösungsmodule

   Die randlose Fassung war zu leise: beim schnellen Scrollen las
   sich der Bereich als Textsammlung statt als sieben Leistungen.
   Jetzt wieder abgegrenzte Module – aber technisch statt SaaS:
   weiße Fläche auf grauer Sektion, sehr feine Kante, kein Schatten,
   viel Innenabstand, Cyan nur als Marker.

   Die Platzierung läuft über grid-column/grid-row auf zwei Modifiern,
   nicht über nth-child. Fällt ein Modul weg oder kommt eines dazu,
   ordnet der Rest sich selbst.
   ============================================================ */

.loesung-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.loesung {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color var(--ease), transform var(--ease);
}

.loesung:hover {
  border-color: rgba(0, 160, 227, 0.45);
  transform: translateY(-2px);
}

/* --- Leitmodul: doppelte Breite, doppelte Höhe --- */
.loesung--leit {
  position: relative;
  overflow: hidden;
  grid-row: span 2;
  grid-column: span 2;
  justify-content: space-between;
  padding: 40px;
}

/* Sehr leises technisches Raster, nur im Leitmodul. */
.loesung--leit::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 92% 8%, #000, transparent 62%);
  mask-image: radial-gradient(circle at 92% 8%, #000, transparent 62%);
  pointer-events: none;
}

.loesung--leit > * {
  position: relative;
}

/* --- Breites Modul am Fuß --- */
.loesung--breit {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 40px;
}

.loesung--breit .loesung__kopf {
  flex: 0 0 34%;
}

.loesung--breit .loesung__text {
  flex: 1;
  margin-bottom: 0;
}

/* --- Innenaufbau --- */
.loesung__titel {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: var(--fs-large);
  font-weight: 800;
  line-height: var(--lh-heading);
}

.loesung--leit .loesung__titel {
  margin-bottom: 16px;
  font-size: var(--fs-h2-md);
}

.loesung__text {
  flex: 1;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.loesung--leit .loesung__text {
  max-width: 560px;
  color: var(--text);
  font-size: var(--fs-lead);
}

/* --- Tablet: zwei Spalten, Leitmodul über beide --- */
@media (max-width: 1080px) {
  .loesung-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loesung--leit {
    grid-row: auto;
    grid-column: 1 / -1;
  }

  /* Ohne das bliebe unten ein Modul allein: sechs Folgemodule
     ergeben bei zwei Spalten genau drei volle Zeilen. */
  .loesung--breit {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .loesung--breit .loesung__kopf {
    flex: none;
  }

  .loesung--breit .loesung__text {
    margin-bottom: 24px;
  }
}

/* --- Mobil: eine Spalte, Leitmodul bleibt etwas kräftiger --- */
@media (max-width: 760px) {
  .loesung-grid {
    grid-template-columns: 1fr;
  }

  .loesung {
    padding: 24px;
  }

  .loesung--leit {
    padding: 28px 24px;
  }

  .loesung--leit .loesung__titel {
    font-size: var(--fs-h2-sm);
  }

  .loesung--leit .loesung__text {
    font-size: var(--fs-body);
  }
}


/* ============================================================
   Lösungstafel

   Die Bauform der Produktlandschaft für die Lösungsbereiche: dunkles
   Kopfband, darunter eine weiße Tafel, die über die Kante hinausragt.
   Der Baustein bringt seine Fläche selbst mit und ist damit auf jeder
   Seite einsetzbar; wo eine Seite eine eigene Rastersystematik führt
   (--raster, --raster-dunkel, --flaeche-dunkel), übernimmt er deren
   Werte, sonst die Rückfallwerte unten.

   Das dunkle Band ist nicht nur Zierde. Steht die Tafel zwischen zwei
   hellen Abschnitten, trägt es die Abgrenzung nach oben – zwei helle
   Flächen hintereinander sind sonst nicht voneinander zu trennen.

   Die Kante liegt rund 90px unterhalb der Tafeloberkante, damit die
   Tafel sichtbar in das dunkle Band hineinragt und nicht daran
   anstößt. Weil der Abschnittskopf mit der Breite unterschiedlich
   hoch umbricht, wandert die Kante an jedem Haltepunkt mit – die
   Werte sind an der gemessenen Tafeloberkante ausgerichtet.

   Die Tafel selbst nutzt die Klassen der Produktlandschaft: derselbe
   Baustein mit anderem Inhalt, nicht eine zweite Kopie davon.
   ============================================================ */
.loesung-tafel {
  --tafel-kante: 480px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--raster-dunkel, rgba(0, 160, 227, 0.08)) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-dunkel, rgba(0, 160, 227, 0.08)) 1px, transparent 1px),
    linear-gradient(180deg,
      var(--flaeche-dunkel, #0c1d43) 0 var(--tafel-kante),
      var(--tafel-grund, var(--soft)) var(--tafel-kante) 100%);
  background-size: var(--raster, 56px) var(--raster, 56px), var(--raster, 56px) var(--raster, 56px), auto;
}

.loesung-tafel .eyebrow,
.loesung-tafel .product-landscape__head h2 {
  color: var(--white);
}

.loesung-tafel .product-landscape__head .lead {
  color: rgba(255, 255, 255, 0.74);
}

.loesung-tafel .product-landscape__board {
  overflow: hidden;
  border: 1px solid rgba(198, 205, 216, 0.8);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.18);
}

.loesung-tafel .product-domain {
  grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
}

.loesung-tafel .product-domain:last-child {
  border-bottom: 0;
}

.loesung-tafel .product-domain__head {
  padding-left: 32px;
}

.loesung-tafel .product-entry:hover {
  background: #edf8fc;
}

.loesung-tafel__alle {
  margin-top: 32px;
}

@media (max-width: 1080px) {
  .loesung-tafel {
    --tafel-kante: 456px;
  }

  .loesung-tafel .product-domain {
    grid-template-columns: 1fr;
  }

  .loesung-tafel .product-domain__head {
    padding-right: 32px;
  }
}

@media (max-width: 760px) {
  .loesung-tafel {
    --tafel-kante: 400px;
  }

  .loesung-tafel .product-landscape__board {
    border-radius: var(--radius);
  }

  .loesung-tafel .product-domain__head {
    padding: 32px 24px 24px;
  }

  /* Der Baustein nimmt den seitlichen Innenabstand auf schmalen
     Ansichten zurück, weil er dort ohne Tafel steht. Hier steht er in
     einer – ohne Abstand berührte das Symbol die Tafelkante. */
  .loesung-tafel .product-entry,
  .loesung-tafel .product-entry:hover {
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 520px) {
  .loesung-tafel {
    --tafel-kante: 464px;
  }

  .loesung-tafel .product-entry,
  .loesung-tafel .product-entry:hover {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* Die Übersichtsfassung trägt einen kürzeren Abschnittskopf als die
   Startseitenfassung, ihre Tafel beginnt deshalb an anderer Stelle.
   Die Kante liegt jeweils 50px unterhalb der gemessenen Tafelober-
   kante – dasselbe Maß wie bei der Produktlandschaft. Zwischen 761
   und 800px bricht die Überschrift eine Zeile mehr um, dafür der
   eigene Haltepunkt. */
.loesung-tafel--uebersicht {
  --tafel-kante: 419px;
  --tafel-grund: #eaf1f6;
}

@media (max-width: 1080px) {
  .loesung-tafel--uebersicht {
    --tafel-kante: 411px;
  }
}

@media (max-width: 800px) {
  .loesung-tafel--uebersicht {
    --tafel-kante: 451px;
  }
}

@media (max-width: 760px) {
  .loesung-tafel--uebersicht {
    --tafel-kante: 392px;
  }
}

@media (max-width: 520px) {
  .loesung-tafel--uebersicht {
    --tafel-kante: 511px;
  }
}


/* ==== assets/css/components/sys.css ==== */
/* ============================================================
   Lösungskarten (Variante v3)

   Technische Anmutung über eine laufende Kennung (SYS-01 …).
   Alle Karten sind gleich groß – bewusst ohne Hervorhebung, damit
   die Lösungen gleichwertig nebeneinander stehen.

   Vier Spalten: die sieben Lösungen stehen als 4 + 3, die zweite Zeile
   mittig. Legt Falk eine achte an, füllt sie die Zeile auf – die
   Reihenmechanik in card-grid.css kommt mit jeder Anzahl zurecht.
   ============================================================ */

.sys-grid {
  --spalten: 4;
}

.sys {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: var(--card-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color var(--ease), transform var(--ease),
    box-shadow var(--ease);
}

.sys:hover {
  border-color: rgba(0, 160, 227, 0.6);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.sys__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.sys__id {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
}

.sys__head svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: color var(--ease), transform var(--ease);
}

.sys:hover .sys__id {
  color: var(--falk-blue);
}

.sys:hover .sys__head svg {
  color: var(--falk-blue);
  transform: translateX(3px);
}

.sys p {
  flex: 1;
  margin-bottom: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

@media (max-width: 1080px) {
  .sys-grid {
    --spalten: 2;
  }
}

@media (max-width: 760px) {
  .sys-grid {
    --spalten: 1;
  }
}


/* ==== assets/css/components/scada.css ==== */
/* ============================================================
   SCADA-Abschnitt
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.scada {
  display: grid;
  /* Die Grafik bekommt rund 7 % mehr Fläche als die Textspalte:
     sie ist die eigentliche Aussage dieser Bühne. */
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 56px;
  align-items: center;
}

.data-map {
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
}

.data-map__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.data-map__label {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--fs-meta);
  font-weight: 800;
}

.data-map__box {
  padding: 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  font-weight: 800;
}

.data-map__box--active {
  border-color: rgba(0, 160, 227, 0.72);
  background: rgba(0, 160, 227, 0.2);
}

.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.benefits li {
  padding: 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.07);
}

/* --- ab (max-width: 1080px) --- */
@media (max-width: 1080px) {
  .scada {
    grid-template-columns: 1fr;
  }
}

/* --- ab (max-width: 760px) --- */
@media (max-width: 760px) {
  .benefits {
    grid-template-columns: 1fr;
  }

  .data-map__row {
    grid-template-columns: 1fr;
  }
}


/* ==== assets/css/components/pyramid.css ==== */
/* ============================================================
   Automatisierungspyramide (SCADA)

   Die Standarddarstellung der Branche: Maschine unten, darüber die
   Software-Ebenen als zusammengehöriger Kern, ganz oben die per
   Schnittstelle angebundenen Fremdsysteme.

   Die Breite jeder Stufe steht in einer Modifier-Klasse, nicht in
   einem Inline-Style. Im Block-Editor lässt sich eine Klasse setzen,
   ein Inline-Style nicht – Falk müsste sonst HTML anfassen.
   --w1 ist die schmalste, --w5 die breiteste Stufe.
   ============================================================ */

.pyramid {
  display: grid;
  gap: 12px;
}

.pyramid__level {
  width: var(--w, 100%);
  margin-inline: auto;
  padding: 12px 20px;
  border-radius: var(--radius);
  text-align: center;
  line-height: 1.35;
}

.pyramid__level--w1 { --w: 56%; }
.pyramid__level--w2 { --w: 66%; }
.pyramid__level--w3 { --w: 82%; }
.pyramid__level--w4 { --w: 96%; }
.pyramid__level--w5 { --w: 100%; }

.pyramid__level strong {
  display: block;
  font-size: var(--fs-body);
}

.pyramid__level span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-label);
  font-weight: 600;
  opacity: 0.8;
}

/* --- Oberste Ebene: angebundene Fremdsysteme, deshalb gestrichelt --- */
.pyramid__level--top {
  border: 2px dashed rgba(34, 58, 142, 0.5);
  color: var(--falk-navy);
  background: var(--white);
}

/* --- Verbinder zwischen Fremdsystemen und Kern --- */
.pyramid__connector {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: -2px 0;
}

.pyramid__connector i {
  width: 0;
  height: 12px;
  border-left: 2px dashed rgba(34, 58, 142, 0.55);
}

.pyramid__connector em {
  color: var(--muted);
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: 700;
}

/* --- Kernbereich: die Ebenen in einer gemeinsamen Softwarelogik --- */
.pyramid__core {
  position: relative;
  display: grid;
  gap: 12px;
  padding-top: 32px;
}

.pyramid__core-tag {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  color: #06122e;
  background: var(--falk-blue);
  font-size: var(--fs-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.pyramid__level--core {
  color: var(--white);
  background: linear-gradient(120deg, #1b2f74, var(--falk-navy));
}

.pyramid__level--core span {
  color: rgba(255, 255, 255, 0.78);
}

/* --- Basis: die Anlage selbst --- */
.pyramid__level--base {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--soft-2);
}

/* Auf schmalen Schirmen laufen alle Stufen auf volle Breite –
   gestufte Breiten wären dort nicht mehr lesbar. */
@media (max-width: 520px) {
  .pyramid__level {
    --w: 100%;
  }

  .pyramid__core-tag {
    width: max-content;
    max-width: 90%;
    white-space: normal;
    text-align: center;
  }
}


/* ==== assets/css/components/chain.css ==== */
/* ============================================================
   Datenfluss als Kette (SCADA, Alternative zur Pyramide)

   Zeigt dieselben Ebenen als Fluss von unten nach oben statt als
   Pyramide. Weniger etabliert als die Pyramide, dafür schmaler und
   auf Mobil ruhiger.
   ============================================================ */

.chain {
  display: grid;
  gap: 0;
}

.chain__node {
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  background: var(--white);
}

.chain__node strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-body);
}

.chain__node span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
}

/* Angebundene Fremdsysteme: gestrichelt abgesetzt. */
.chain__node--dashed {
  border-style: dashed;
  background: transparent;
}

.chain__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 8px 32px;
}

.chain__link i {
  width: 0;
  height: 28px;
  border-left: 2px solid var(--falk-blue);
}

.chain__link--dashed i {
  border-left-style: dashed;
}

.chain__link em {
  color: var(--muted);
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Kernbereich: gemeinsame Softwarelogik --- */
.chain__core {
  position: relative;
  padding: 20px;
  border: 1px solid var(--falk-navy);
  background: var(--white);
}

.chain__core-tag {
  display: block;
  margin-bottom: 12px;
  color: var(--falk-navy);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chain__core .chain__node {
  border-color: var(--line);
}

.chain__core .chain__node + .chain__node {
  border-top: 0;
}

.chain__core .chain__node strong {
  color: var(--falk-navy);
}


/* ==== assets/css/components/regelkreis.css ==== */
/* ============================================================
   Regelkreis

   Sollwert, Stellgrößen, Istwerte – und der Rückweg zum Vergleich.
   Eine Kette von oben nach unten würde die Hälfte der Aussage
   verschlucken: geregelt wird im Kreis, aus den Istwerten entsteht
   der nächste Stellwert. Der Rückweg läuft deshalb sichtbar an der
   linken Seite zurück, die Alarmierung hängt am Vergleich, weil dort
   die Abweichung entsteht.

   Die Klammer ist eine dunkle Tafel wie die übrigen Systemgrafiken
   der Seiten – damit ist sie als Schema erkennbar und nicht als
   weiterer Inhaltsblock.
   ============================================================ */
.regelkreis {
  position: relative;
  margin: 0;
  padding: 28px 28px 28px 56px;
  border-radius: var(--radius-lg);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    var(--navy-deep);
  background-size: 56px 56px, 56px 56px, auto;
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.18);
}

.regelkreis figcaption {
  margin-bottom: 20px;
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.regelkreis__stufe {
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  transition: border-color var(--ease), background-color var(--ease);
}

/* Die Stufe, die gerade gelesen wird. Den Zustand setzt dasselbe
   Skript, das auch die Ebenen-Grafik führt. */
.regelkreis__stufe.ist-aktiv,
.regelkreis__rueckweg.ist-aktiv {
  border-color: var(--falk-blue);
  background: rgba(0, 160, 227, 0.2);
}

.regelkreis__rueckweg.ist-aktiv {
  border: 1px solid var(--falk-blue);
  border-radius: var(--radius);
}

.regelkreis__stufe span {
  display: block;
  margin-bottom: 8px;
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.regelkreis__stufe strong {
  color: var(--white);
  font-size: var(--fs-meta);
}

.regelkreis__komponenten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.regelkreis__komponenten b {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-small);
  font-weight: 700;
}

.regelkreis__pfeil {
  margin: 0;
  padding: 12px 0 12px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.regelkreis__pfeil::before {
  margin-right: 12px;
  color: #8be0ff;
  content: "↓";
}

/* Der Rückweg: eine Linie an der linken Kante, die vom Vergleich
   wieder nach oben zur Vorgabe führt. */
.regelkreis__rueckweg {
  position: relative;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  transition: border-color var(--ease), background-color var(--ease);
}

.regelkreis__rueckweg::before {
  position: absolute;
  top: -20px;
  bottom: 20px;
  left: -36px;
  width: 24px;
  border: 1px dashed rgba(139, 224, 255, 0.55);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  content: "";
}

.regelkreis__rueckweg::after {
  position: absolute;
  top: -28px;
  left: -40px;
  color: #8be0ff;
  content: "↑";
  font-size: var(--fs-meta);
}

.regelkreis__vergleich {
  margin: 0 0 8px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.regelkreis__alarm {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
}

@media (max-width: 760px) {
  .regelkreis {
    padding: 20px 20px 20px 48px;
  }
}


/* ==== assets/css/components/ebenen.css ==== */
/* ============================================================
   Ebenen mit mitlaufender Systemgrafik

   Links bleibt die Systemgrafik stehen, rechts laufen die Ebenen
   durch. Welche Ebene gerade gelesen wird, hebt die Grafik hervor –
   der Leser sieht damit an jeder Stelle, wo im System er sich
   befindet. Das ersetzt die sonst übliche Kachelreihe, bei der die
   Ebenen nebeneinanderstehen und ihr Zusammenhang verloren geht.

   Die Grafik ist aus Textbausteinen gebaut, nicht als Bild: sie
   nutzt damit dieselben Tokens wie die Seite, bleibt bei jeder
   Schriftgröße lesbar und lässt sich inhaltlich ändern, ohne dass
   jemand eine Datei nachzeichnen muss. Für Screenreader ist sie
   ausgeblendet – die Ebenen stehen daneben im Text.

   Ohne JavaScript bleibt die Hervorhebung aus; Grafik und Text
   stehen dann unverändert nebeneinander.
   ============================================================ */
.ebenen__kopf {
  max-width: 860px;
  margin-bottom: 56px;
}

.ebenen__layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
  gap: 80px;
  align-items: start;
}

.ebenen__spalte {
  position: sticky;
  top: 120px;
}

/* --- Die Systemgrafik --- */
.ebenen__grafik {
  margin: 0;
  padding: 28px;
  border-radius: var(--radius-lg);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    var(--navy-deep);
  background-size: 56px 56px, 56px 56px, auto;
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.18);
}

.ebenen__grafik figcaption {
  margin-bottom: 20px;
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ebenen__ebene,
.ebenen__extern {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  transition: border-color var(--ease), background-color var(--ease),
    color var(--ease);
}

.ebenen__ebene span,
.ebenen__extern span {
  color: rgba(139, 224, 255, 0.7);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}

.ebenen__ebene strong,
.ebenen__extern strong {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* Das ERP steht außerhalb der Lösung – gestrichelt, damit der
   Unterschied ohne Beschriftung erkennbar ist. */
.ebenen__extern {
  border-style: dashed;
}

.ebenen__schnittstelle {
  position: relative;
  margin: 0;
  padding: 16px 0 16px 40px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Die Linie zwischen Lösung und ERP: hier läuft die Schnittstelle. */
.ebenen__schnittstelle::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  border-left: 1px dashed rgba(139, 224, 255, 0.55);
  content: "";
}

/* Die sieben Ebenen der Falk-Lösung stehen in einer Klammer:
   eine Fläche, eine Kante, keine Systembrüche. Sie laufen von oben
   nach unten, damit die Hervorhebung der Scrollrichtung folgt – die
   Automatisierungspyramide steht dafür auf dem Kopf. */
.ebenen__stapel {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(0, 160, 227, 0.38);
  border-radius: var(--radius);
  background: rgba(0, 160, 227, 0.06);
}

.ebenen__klammer {
  margin: 12px 0 0;
  padding-left: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Die gerade gelesene Ebene. */
.ebenen__ebene.ist-aktiv,
.ebenen__extern.ist-aktiv {
  border-color: var(--falk-blue);
  background: rgba(0, 160, 227, 0.2);
}

.ebenen__ebene.ist-aktiv strong,
.ebenen__extern.ist-aktiv strong,
.ebenen__ebene.ist-aktiv span,
.ebenen__extern.ist-aktiv span {
  color: var(--white);
}

/* --- Die Ebenen im Text --- */
.ebenen__schritte {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ebenen__schritt {
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}

.ebenen__schritt:first-child {
  padding-top: 0;
}

.ebenen__schritt:last-child {
  border-bottom: 0;
}

.ebenen__stufe {
  margin: 0 0 12px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ebenen__schritt h3 {
  margin: 0 0 12px;
  font-size: var(--fs-large);
}

.ebenen__schritt p:not(.ebenen__stufe) {
  max-width: 640px;
  margin: 0;
  color: var(--text);
}

.ebenen__claim {
  max-width: 860px;
  margin: 56px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: var(--lh-body);
}

@media (max-width: 1080px) {
  /* Untereinander: erst die Grafik als Überblick, dann die Ebenen.
     Mitlaufen ergibt hier keinen Sinn mehr – die Grafik wäre so hoch
     wie der halbe Bildschirm. */
  .ebenen__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ebenen__spalte {
    position: static;
    max-width: 560px;
  }
}

@media (max-width: 760px) {
  .ebenen__grafik {
    padding: 20px;
  }

  .ebenen__schritt {
    padding: 32px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ebenen__ebene,
  .ebenen__extern {
    transition: none;
  }
}


/* ==== assets/css/components/process-explorer.css ==== */
/* ============================================================
   Process Explorer

   Eigenständige, interaktive Alternative zur statischen Timeline.
   Die Phasennavigation bleibt kompakt; der ausgewählte Inhalt erhält
   darunter bewusst die gesamte verfügbare Fläche.
   ============================================================ */

.process-explorer-section {
  background:
    linear-gradient(135deg, rgba(0, 160, 227, 0.06), transparent 40%),
    var(--soft);
}

.process-explorer-section__head {
  max-width: 800px;
}

.process-explorer {
  --process-progress: 20%;
  margin-top: 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.1);
}

.process-explorer__tabs {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  background: var(--navy-deep);
}

.process-explorer__tabs::before,
.process-explorer__tabs::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  content: "";
  pointer-events: none;
}

.process-explorer__tabs::before {
  background: rgba(255, 255, 255, 0.16);
}

.process-explorer__tabs::after {
  right: auto;
  width: var(--process-progress);
  background: var(--falk-blue);
  transition: width var(--ease);
}

.process-explorer__tab {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 24px 20px 28px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
}

.process-explorer__tab:last-child {
  border-right: 0;
}

.process-explorer__tab span {
  flex: 0 0 auto;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 700;
}

.process-explorer__tab strong {
  overflow: hidden;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.process-explorer__tab:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}

.process-explorer__tab[aria-selected="true"] {
  color: var(--white);
  background: rgba(0, 160, 227, 0.14);
}

.process-explorer__tab:focus-visible {
  z-index: 1;
  outline: 2px solid var(--white);
  outline-offset: -4px;
}

.process-explorer__viewport {
  min-height: 320px;
}

.process-explorer__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
  min-height: 320px;
  animation: process-explorer-in 320ms ease both;
}

.process-explorer__panel[hidden] {
  display: none;
}

.process-explorer__panel:focus-visible {
  outline: 2px solid var(--falk-blue);
  outline-offset: -4px;
}

.process-explorer__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px;
}

.process-explorer__meta,
.process-explorer__result span {
  margin: 0 0 16px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.process-explorer__content h3 {
  max-width: 680px;
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-heading);
}

.process-explorer__content > p:last-child {
  max-width: 680px;
  margin: 20px 0 0;
  color: var(--text);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.process-explorer__result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px;
  border-left: 1px solid rgba(0, 160, 227, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), transparent 64%),
    rgba(0, 160, 227, 0.1);
}

.process-explorer__result p {
  margin: 0;
  color: var(--falk-navy);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
}

/* --- Helle, freundlichere Katalogvariante --- */
.process-explorer-section--light {
  background:
    radial-gradient(circle at 92% 12%, rgba(0, 160, 227, 0.11), transparent 32%),
    linear-gradient(180deg, var(--white), var(--soft));
}

.process-explorer--light {
  border-color: #d7e7ef;
  box-shadow: 0 18px 48px rgba(34, 58, 142, 0.09);
}

.process-explorer--light .process-explorer__tabs {
  border-bottom: 1px solid #d7e7ef;
  background: #edf6fa;
}

.process-explorer--light .process-explorer__tabs::before {
  background: #d7e7ef;
}

.process-explorer--light .process-explorer__tab {
  border-right-color: #d7e7ef;
  color: var(--muted);
}

.process-explorer--light .process-explorer__tab:hover {
  color: var(--falk-navy);
  background: rgba(255, 255, 255, 0.58);
}

.process-explorer--light .process-explorer__tab[aria-selected="true"] {
  color: var(--falk-navy);
  background: var(--white);
}

.process-explorer--light .process-explorer__tab:focus-visible {
  outline-color: var(--falk-navy);
}

.process-explorer--light .process-explorer__result {
  border-left-color: #d7e7ef;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), transparent 64%),
    #e8f7fc;
}

.process-explorer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 40px;
  border-top: 1px solid #d7e7ef;
  background: rgba(255, 255, 255, 0.82);
}

.process-explorer__cta > div {
  max-width: 720px;
}

.process-explorer__cta-label {
  display: block;
  margin-bottom: 8px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.process-explorer__cta p {
  margin: 0;
  color: var(--text);
  line-height: var(--lh-body);
}

.process-explorer__cta strong {
  color: var(--ink);
}

.process-explorer__cta .btn {
  flex: 0 0 auto;
}

@keyframes process-explorer-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1080px) {
  .process-explorer__tab {
    display: block;
    padding: 20px 16px 24px;
  }

  .process-explorer__tab strong {
    display: block;
    margin-top: 8px;
  }

  .process-explorer__content {
    padding: 48px 40px;
  }
}

@media (max-width: 760px) {
  .process-explorer {
    margin-top: 40px;
  }

  .process-explorer__tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .process-explorer__tab {
    flex: 0 0 152px;
    padding: 20px 16px 24px;
    scroll-snap-align: start;
  }

  .process-explorer__panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .process-explorer__viewport {
    min-height: 0;
  }

  .process-explorer__content,
  .process-explorer__result {
    padding: 32px 28px;
  }

  .process-explorer__content h3 {
    font-size: var(--fs-large);
  }

  .process-explorer__content > p:last-child {
    margin-top: 16px;
    font-size: var(--fs-body);
  }

  .process-explorer__result {
    border-top: 1px solid rgba(0, 160, 227, 0.18);
    border-left: 0;
  }

  .process-explorer--light .process-explorer__result {
    border-top-color: #d7e7ef;
  }

  .process-explorer__result p {
    font-size: var(--fs-body);
  }

  .process-explorer__cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-explorer__tabs::after,
  .process-explorer__tab {
    transition: none;
  }

  .process-explorer__panel {
    animation: none;
  }
}


/* ==== assets/css/components/indusleep.css ==== */
/* ============================================================
   InduSLEEP-Abschnitt
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.indusleep-section {
  position: relative;
  overflow: hidden;
  padding: var(--section-space-lg) 0;
  color: var(--white);
  background:
    linear-gradient(rgba(0, 160, 227, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 160, 227, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, #050e1f 0%, var(--navy-deep) 42%, #102c6d 100%);
  background-size: 50px 50px, 50px 50px, auto;
}

.indusleep-section::after {
  position: absolute;
  top: -220px;
  right: -160px;
  width: 620px;
  height: 620px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 160, 227, 0.18), transparent 68%);
  pointer-events: none;
}

.indusleep-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.88fr);
  gap: 56px;
  align-items: center;
}

.indusleep-logo {
  width: 270px;
  height: auto;
  margin-bottom: 20px;
}

.indusleep-section h2 {
  color: var(--white);
}

.indusleep-section .lead {
  color: rgba(255, 255, 255, 0.68);
}

.indusleep-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 28px;
}

.indusleep-badge {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(0, 160, 227, 0.28);
  border-radius: var(--radius-pill);
  color: #8be0ff;
  background: rgba(0, 160, 227, 0.13);
  font-size: var(--fs-small);
  font-weight: 800;
}

.indusleep-badge::before {
  width: 13px;
  height: 13px;
  content: "";
  background: #55dca2;
  clip-path: polygon(40% 73%, 18% 51%, 27% 42%, 40% 55%, 73% 22%, 82% 31%);
}

.energy-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.energy-panel__metric {
  min-height: 96px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.energy-panel__metric strong {
  display: block;
  margin-bottom: 8px;
  color: var(--white);
  font-size: var(--fs-display);
  line-height: 1;
}

.energy-panel__metric span {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

.energy-panel__metric strong span {
  color: var(--falk-blue);
  font-weight: inherit;
}

.energy-panel__note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.52);
  font-size: var(--fs-meta);
}

/* --- ab (max-width: 1080px) --- */
@media (max-width: 1080px) {
  .indusleep-wrap {
    grid-template-columns: 1fr;
  }
}

/* --- ab (max-width: 760px) --- */
@media (max-width: 760px) {
  .energy-panel {
    grid-template-columns: 1fr;
  }
}


/* ==== assets/css/components/indusleep-detail.css ==== */
/* ============================================================
   InduSLEEP® Produkt- und Rechner-Landingpage
   Inhalt: Texte/03_01_InduSLEEP.docx
   ============================================================ */

.indusleep-landingpage {
  --indusleep-cyan: #00a0e3;
  --indusleep-blue: #223a8e;
  --indusleep-night: #071229;
  --indusleep-green: #55dca2;
}

.indusleep-landingpage #prinzip,
.indusleep-landingpage #vorteile,
.indusleep-landingpage #rechner,
.indusleep-landingpage #eignung,
.indusleep-landingpage #umsetzung,
.indusleep-landingpage #faq,
.indusleep-landingpage #kontakt {
  scroll-margin-top: 96px;
}

/* ---------- Hero ---------- */

.indusleep-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 96px;
  color: var(--white);
  background:
    linear-gradient(rgba(0, 160, 227, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 160, 227, 0.065) 1px, transparent 1px),
    radial-gradient(circle at 82% 18%, rgba(0, 160, 227, 0.24), transparent 34%),
    linear-gradient(135deg, #050e1f 0%, var(--navy-deep) 52%, #17397c 100%);
  background-size: 56px 56px, 56px 56px, auto, auto;
}

.indusleep-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  height: 6px;
  content: "";
  background: var(--falk-blue);
}

.indusleep-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  gap: 64px;
  align-items: center;
}

.indusleep-hero__copy,
.indusleep-hero__visual {
  min-width: 0;
}

.indusleep-hero__logo {
  width: 176px;
  height: 112px;
  margin-bottom: 24px;
  padding: 8px 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  object-fit: contain;
}

.indusleep-hero h1 {
  max-width: 720px;
  color: var(--white);
  font-size: var(--fs-display-xl);
}

.indusleep-hero__lead {
  max-width: 680px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--fs-lead);
}

.indusleep-hero__claim {
  max-width: 620px;
  margin-bottom: 28px;
  padding-left: 20px;
  border-left: 3px solid var(--falk-blue);
  color: var(--white);
  font-weight: 800;
}

.indusleep-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.indusleep-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 28px 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-small);
  font-weight: 700;
  list-style: none;
}

.indusleep-hero__proof li {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.indusleep-hero__proof li::before {
  width: 14px;
  height: 14px;
  content: "";
  background: var(--indusleep-green);
  clip-path: polygon(40% 73%, 18% 51%, 27% 42%, 40% 55%, 73% 22%, 82% 31%);
}

.indusleep-hero__visual {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 0 32px 80px rgba(2, 8, 23, 0.42);
  backdrop-filter: blur(8px);
}

.indusleep-hero__figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius);
  background: #0a1730;
}

.indusleep-hero__figure::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(7, 18, 41, 0.02), rgba(7, 18, 41, 0.42));
}

.indusleep-hero__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.indusleep-hero__sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.indusleep-hero__state {
  position: relative;
  display: grid;
  min-height: 116px;
  align-content: start;
  gap: 4px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(5, 14, 31, 0.72);
}

.indusleep-hero__state::after {
  position: absolute;
  top: 50%;
  right: -9px;
  z-index: 2;
  width: 10px;
  height: 10px;
  content: "";
  border-top: 2px solid rgba(255, 255, 255, 0.48);
  border-right: 2px solid rgba(255, 255, 255, 0.48);
  transform: rotate(45deg) translateY(-50%);
}

.indusleep-hero__state:last-child::after {
  display: none;
}

.indusleep-hero__state span {
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
}

.indusleep-hero__state strong {
  color: var(--white);
}

.indusleep-hero__state small {
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.4;
}

.indusleep-hero__state--accent {
  border-color: rgba(0, 160, 227, 0.5);
  background: rgba(0, 160, 227, 0.15);
}

.indusleep-hero__signal {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
}

.indusleep-hero__signal span {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--indusleep-green);
  box-shadow: 0 0 0 6px rgba(85, 220, 162, 0.12);
}

.indusleep-hero__signal p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--fs-meta);
}

.indusleep-hero__signal strong {
  color: var(--white);
}

/* ---------- Problem und Prinzip ---------- */

.indusleep-principle {
  background:
    linear-gradient(rgba(34, 58, 142, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 58, 142, 0.035) 1px, transparent 1px),
    var(--white);
  background-size: 56px 56px;
}

.indusleep-principle__head {
  max-width: 920px;
}

.indusleep-problems {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}

.indusleep-problem {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.06);
}

.indusleep-problem__index {
  display: block;
  margin-bottom: 20px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 800;
}

.indusleep-problem h3 {
  margin-bottom: 12px;
}

.indusleep-problem p {
  margin: 0;
  color: var(--muted);
}

.indusleep-architecture {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}

.indusleep-architecture__intro {
  padding: 40px;
  color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    var(--navy-deep);
  background-size: 56px 56px;
}

.indusleep-architecture__intro h3 {
  max-width: 840px;
  color: var(--white);
  font-size: var(--fs-display-sm);
}

.indusleep-architecture__intro p:last-child {
  max-width: 760px;
  margin-bottom: 0;
}

.indusleep-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.indusleep-flow__step {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 232px;
  align-content: start;
  gap: 12px;
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}

.indusleep-flow__step:last-child {
  border-right: 0;
}

.indusleep-flow__step span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
}

.indusleep-flow__step strong {
  color: var(--ink);
  line-height: 1.3;
}

.indusleep-flow__step small {
  color: var(--muted);
  line-height: 1.5;
}

.indusleep-flow__step--accent {
  background: rgba(0, 160, 227, 0.07);
}

.indusleep-flow__step--accent span,
.indusleep-flow__step--preserve span,
.indusleep-flow__step--ready span {
  color: var(--white);
  border-color: var(--falk-blue);
  background: var(--falk-blue);
}

.indusleep-flow__step--preserve {
  background: rgba(34, 58, 142, 0.06);
}

.indusleep-flow__step--ready span {
  border-color: var(--green);
  background: var(--green);
}

.indusleep-functions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 28px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.indusleep-functions span {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--falk-navy);
  background: var(--white);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* ---------- Nutzen ---------- */

.indusleep-benefits {
  background: var(--soft);
}

.indusleep-benefits__head {
  max-width: 960px;
}

.indusleep-benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 16px;
}

.indusleep-load-profile,
.indusleep-resilience {
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.indusleep-benefit-label,
.indusleep-fit__label {
  display: block;
  margin-bottom: 12px;
  color: var(--falk-blue);
  font-size: var(--fs-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.indusleep-load-profile__copy p {
  color: var(--muted);
}

.indusleep-load-profile__chart {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--soft);
}

.indusleep-load-profile__row {
  display: grid;
  grid-template-columns: 152px minmax(80px, 1fr) 136px;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 700;
}

.indusleep-load-profile__row b {
  color: var(--ink);
  font-size: var(--fs-label);
}

.indusleep-load-profile__bar {
  position: relative;
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--line);
}

.indusleep-load-profile__bar::after {
  position: absolute;
  inset: 0 auto 0 0;
  content: "";
  border-radius: inherit;
  background: var(--falk-navy);
}

.indusleep-load-profile__bar--production::after {
  width: 100%;
}

.indusleep-load-profile__bar--without::after {
  width: 76%;
  background: var(--warning);
}

.indusleep-load-profile__bar--with::after {
  width: 28%;
  background: var(--green);
}

.indusleep-load-profile__chart small {
  color: var(--muted);
}

.indusleep-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.indusleep-times span {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 700;
}

.indusleep-resilience {
  color: rgba(255, 255, 255, 0.72);
  border-color: transparent;
  background:
    linear-gradient(rgba(0, 160, 227, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 160, 227, 0.06) 1px, transparent 1px),
    var(--navy-deep);
  background-size: 48px 48px;
}

.indusleep-resilience h3 {
  color: var(--white);
}

.indusleep-resilience__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.indusleep-resilience__side {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.indusleep-resilience__side span {
  display: block;
  margin-bottom: 12px;
  color: var(--white);
  font-weight: 800;
}

.indusleep-resilience__side ul,
.indusleep-fit__card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.indusleep-resilience__side li,
.indusleep-fit__card li {
  position: relative;
  padding-left: 20px;
}

.indusleep-resilience__side li::before,
.indusleep-fit__card li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: var(--falk-blue);
}

.indusleep-resilience__side--without li::before {
  background: var(--warning);
}

.indusleep-resilience__side--with {
  border-color: rgba(85, 220, 162, 0.32);
  background: rgba(85, 220, 162, 0.08);
}

.indusleep-resilience__side--with li::before {
  background: var(--indusleep-green);
}

.indusleep-resilience__note {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-meta);
}

.indusleep-maintenance {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(460px, 1.25fr);
  gap: 40px;
  align-items: center;
  margin-top: 16px;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.indusleep-maintenance__copy p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.indusleep-maintenance__timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.indusleep-maintenance__timeline span {
  display: grid;
  min-height: 96px;
  place-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--soft);
  font-size: var(--fs-small);
  font-weight: 800;
  text-align: center;
}

.indusleep-maintenance__timeline i {
  position: relative;
  height: 2px;
  background: var(--falk-blue);
}

.indusleep-maintenance__timeline i::after {
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  content: "";
  border-top: 2px solid var(--falk-blue);
  border-right: 2px solid var(--falk-blue);
  transform: rotate(45deg);
}

.indusleep-maintenance__optional {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* ---------- Rechner-Einbettung ---------- */

.indusleep-calculator-section {
  position: relative;
  overflow: hidden;
  padding: 112px 0;
  color: var(--white);
  background:
    linear-gradient(rgba(0, 160, 227, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 160, 227, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 12% 10%, rgba(0, 160, 227, 0.2), transparent 30%),
    var(--indusleep-night);
  background-size: 56px 56px, 56px 56px, auto, auto;
}

.indusleep-calculator-section__intro {
  display: grid;
  gap: 40px;
  margin-bottom: 40px;
}

/* Die drei Merkposten stehen unter dem Text, nicht daneben: neben zwei
   Absätzen bleibt ihnen zu wenig Breite, und "Keine Kontaktdaten"
   bricht dann mitten im Begriff um. */
.indusleep-calculator-section__intro > div {
  max-width: 860px;
}

.indusleep-calculator-section h2 {
  color: var(--white);
}

.indusleep-calculator-section__intro p {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.7);
}

.indusleep-calculator-section__intro p:last-child {
  margin-bottom: 0;
}

.indusleep-calculator-section__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.indusleep-calculator-section__facts li {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
}

.indusleep-calculator-section__facts strong,
.indusleep-calculator-section__facts span {
  display: block;
}

.indusleep-calculator-section__facts strong {
  margin-bottom: 4px;
  color: var(--white);
  font-size: var(--fs-small);
}

.indusleep-calculator-section__facts span {
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--fs-label);
  line-height: 1.4;
}

.indusleep-calculator-frame {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  background: #f4f7fb;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.36);
}

.indusleep-calculator-frame__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  min-height: 48px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: var(--white);
  font-size: var(--fs-label);
  font-weight: 700;
}

.indusleep-calculator-frame__bar div {
  display: flex;
  gap: 8px;
}

.indusleep-calculator-frame__bar div span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}

.indusleep-calculator-frame__bar div span:nth-child(2) {
  background: rgba(0, 160, 227, 0.5);
}

.indusleep-calculator-frame__bar div span:nth-child(3) {
  background: rgba(85, 220, 162, 0.72);
}

.indusleep-calculator-frame__bar p {
  margin: 0;
  color: var(--ink);
  text-align: center;
}

.indusleep-calculator-frame__bar > span {
  justify-self: end;
}

.indusleep-calculator-frame__iframe {
  display: block;
  width: 100%;
  height: 1180px;
  border: 0;
  background: #f4f7fb;
}

.indusleep-calculator-section__note {
  max-width: 840px;
  margin: 20px auto 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--fs-meta);
  text-align: center;
}

/* ---------- Eignung und Förderung ---------- */

.indusleep-fit-funding {
  background:
    linear-gradient(rgba(34, 58, 142, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 58, 142, 0.035) 1px, transparent 1px),
    var(--white);
  background-size: 56px 56px;
}

.indusleep-fit-funding__head {
  max-width: 960px;
}

.indusleep-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.indusleep-fit__card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.96);
}

.indusleep-fit__card--potential {
  border-top: 4px solid var(--warning);
}

.indusleep-fit__card--check {
  border-top: 4px solid var(--falk-blue);
}

.indusleep-fit__card li {
  color: var(--text);
}

.indusleep-fit__card--potential li::before {
  background: var(--warning);
}

.indusleep-funding {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: 48px;
  align-items: center;
  margin-top: 48px;
  padding: 48px;
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(rgba(0, 160, 227, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 160, 227, 0.06) 1px, transparent 1px),
    var(--navy-deep);
  background-size: 48px 48px;
}

.indusleep-funding h3 {
  color: var(--white);
  font-size: var(--fs-display-sm);
}

.indusleep-funding__copy p {
  margin-bottom: 16px;
}

.indusleep-funding__notice {
  margin-bottom: 0;
  padding: 16px;
  border-left: 3px solid var(--falk-blue);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--fs-meta);
}

.indusleep-funding__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.indusleep-funding__steps li {
  min-width: 0;
  min-height: 176px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
}

.indusleep-funding__steps span,
.indusleep-funding__steps strong,
.indusleep-funding__steps small {
  display: block;
}

.indusleep-funding__steps span {
  margin-bottom: 20px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
}

.indusleep-funding__steps strong {
  margin-bottom: 8px;
  color: var(--white);
  line-height: 1.3;
}

.indusleep-funding__steps small {
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

.indusleep-faq {
  background: var(--soft);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .indusleep-hero__layout,
  .indusleep-calculator-section__intro,
  .indusleep-maintenance,
  .indusleep-funding {
    grid-template-columns: 1fr;
  }

  .indusleep-hero__visual {
    max-width: 780px;
  }

  .indusleep-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .indusleep-flow__step {
    min-height: 208px;
    border-bottom: 1px solid var(--line);
  }

  .indusleep-flow__step:last-child {
    border-right: 1px solid var(--line);
  }

  .indusleep-benefits__grid {
    grid-template-columns: 1fr;
  }

  .indusleep-maintenance__optional {
    grid-column: 1;
  }

  .indusleep-calculator-section__facts {
    max-width: 720px;
  }

  .indusleep-funding__steps li {
    min-height: 152px;
  }
}

@media (max-width: 760px) {
  .indusleep-hero {
    padding: 64px 0;
  }

  .indusleep-hero__layout {
    gap: 48px;
  }

  .indusleep-hero__logo {
    width: 144px;
    height: 96px;
  }

  .indusleep-hero h1 {
    font-size: var(--fs-display);
  }

  .indusleep-hero__actions,
  .indusleep-hero__actions .btn {
    width: 100%;
  }

  .indusleep-hero__sequence,
  .indusleep-problems,
  .indusleep-resilience__compare,
  .indusleep-fit {
    grid-template-columns: 1fr;
  }

  .indusleep-hero__state {
    min-height: auto;
  }

  .indusleep-hero__state::after {
    top: auto;
    right: 50%;
    bottom: -8px;
    transform: rotate(135deg) translateY(-50%);
  }

  .indusleep-architecture__intro,
  .indusleep-maintenance,
  .indusleep-funding {
    padding: 28px;
  }

  .indusleep-flow {
    grid-template-columns: 1fr;
  }

  .indusleep-flow__step {
    min-height: auto;
    border-right: 0;
  }

  .indusleep-flow__step:last-child {
    border-right: 0;
    border-bottom: 0;
  }

  .indusleep-load-profile,
  .indusleep-resilience,
  .indusleep-fit__card {
    padding: 24px;
  }

  .indusleep-load-profile__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .indusleep-load-profile__row b {
    color: var(--muted);
  }

  .indusleep-maintenance__timeline {
    grid-template-columns: 1fr;
  }

  .indusleep-maintenance__timeline i {
    width: 2px;
    height: 24px;
    justify-self: center;
  }

  .indusleep-maintenance__timeline i::after {
    top: auto;
    right: -4px;
    bottom: 0;
    transform: rotate(135deg);
  }

  .indusleep-calculator-section {
    padding: 80px 0;
  }

  .indusleep-calculator-section__facts,
  .indusleep-funding__steps {
    grid-template-columns: 1fr;
  }

  .indusleep-calculator-frame__bar {
    grid-template-columns: 1fr auto;
  }

  .indusleep-calculator-frame__bar p {
    display: none;
  }

  .indusleep-calculator-frame__iframe {
    height: 1320px;
  }

  .indusleep-funding__steps li {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  .indusleep-hero__visual {
    padding: 8px;
  }

  .indusleep-hero__figure img {
    aspect-ratio: 4 / 3;
  }

  .indusleep-problem,
  .indusleep-architecture__intro,
  .indusleep-load-profile,
  .indusleep-resilience,
  .indusleep-maintenance,
  .indusleep-fit__card,
  .indusleep-funding {
    padding: 24px 20px;
  }

  .indusleep-functions {
    padding: 20px;
  }

  .indusleep-calculator-frame__bar > span {
    display: none;
  }

  .indusleep-calculator-frame__bar {
    grid-template-columns: 1fr;
  }
}


/* ==== assets/css/components/indusleep-v2.css ==== */
/* ============================================================
   InduSLEEP® Landingpage V2
   Rechnerzentrierte, bewusst reduzierte Alternative.
   ============================================================ */

.indusleep-v2 {
  background: var(--white);
}

.indusleep-v2 #v2-rechner,
.indusleep-v2 #indusleep-v2-funktion,
.indusleep-v2 #indusleep-v2-eignung,
.indusleep-v2 #indusleep-v2-faq,
.indusleep-v2 #indusleep-v2-kontakt {
  scroll-margin-top: 96px;
}

/* ---------- Einstieg und Rechner ---------- */

.indusleep-v2-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 80px;
  color: var(--white);
  background:
    linear-gradient(rgba(0, 160, 227, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 160, 227, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 50% 0, rgba(0, 160, 227, 0.22), transparent 32%),
    linear-gradient(180deg, #071229 0%, #0f1e46 52%, #08142f 100%);
  background-size: 56px 56px, 56px 56px, auto, auto;
}

.indusleep-v2-hero__intro {
  display: grid;
  justify-items: center;
  max-width: 920px;
  text-align: center;
}

.indusleep-v2-hero__logo {
  width: 136px;
  height: 104px;
  margin-bottom: 20px;
  padding: 8px 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  object-fit: contain;
}

.indusleep-v2-hero h1 {
  max-width: 800px;
  margin-bottom: 20px;
  color: var(--white);
  font-size: var(--fs-display-xl);
}

.indusleep-v2-hero__intro > p:last-of-type {
  max-width: 760px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-lead);
}

.indusleep-v2-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 760px;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.indusleep-v2-hero__facts li {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
}

.indusleep-v2-hero__facts strong,
.indusleep-v2-hero__facts span {
  display: block;
}

.indusleep-v2-hero__facts strong {
  margin-bottom: 4px;
  color: var(--white);
  font-size: var(--fs-small);
}

.indusleep-v2-hero__facts span {
  color: rgba(255, 255, 255, 0.56);
  font-size: var(--fs-label);
}

.indusleep-v2-calculator {
  overflow: hidden;
  margin-top: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  background: var(--soft-2);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.38);
}

.indusleep-v2-calculator__head {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: var(--white);
}

.indusleep-v2-calculator__head span {
  display: block;
  margin-bottom: 4px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.indusleep-v2-calculator__head h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-display-sm);
}

.indusleep-v2-calculator__head p {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
}

.indusleep-v2-calculator__iframe {
  display: block;
  width: 100%;
  height: 1200px;
  border: 0;
  background: var(--soft-2);
}

.indusleep-v2-hero__note {
  max-width: 820px;
  margin-top: 20px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-meta);
  text-align: center;
}

/* ---------- Funktion und Nutzen ---------- */

.indusleep-v2-change {
  background:
    linear-gradient(rgba(34, 58, 142, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 58, 142, 0.035) 1px, transparent 1px),
    var(--white);
  background-size: 56px 56px;
}

.indusleep-v2-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 40px;
}

.indusleep-v2-section-head h2 {
  max-width: 760px;
  margin-bottom: 0;
}

.indusleep-v2-section-head > p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: var(--fs-lead);
}

.indusleep-v2-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.06);
  list-style: none;
}

.indusleep-v2-flow__item {
  position: relative;
  min-width: 0;
  min-height: 232px;
  padding: 32px;
  border-right: 1px solid var(--line);
}

.indusleep-v2-flow__item:last-child {
  border-right: 0;
}

.indusleep-v2-flow__item::after {
  position: absolute;
  top: 50%;
  right: -9px;
  z-index: 2;
  width: 12px;
  height: 12px;
  content: "";
  border-top: 2px solid var(--falk-blue);
  border-right: 2px solid var(--falk-blue);
  background: var(--white);
  transform: rotate(45deg) translateY(-50%);
}

.indusleep-v2-flow__item:last-child::after {
  display: none;
}

.indusleep-v2-flow__item span {
  display: block;
  margin-bottom: 24px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.indusleep-v2-flow__item strong {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: var(--fs-large);
  line-height: 1.3;
}

.indusleep-v2-flow__item p {
  margin: 0;
  color: var(--muted);
}

.indusleep-v2-flow__item--focus {
  background: rgba(0, 160, 227, 0.08);
}

.indusleep-v2-flow__item--focus::after {
  background: #f0f9fd;
}

.indusleep-v2-flow__item--result {
  background: var(--soft);
}

.indusleep-v2-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.indusleep-v2-benefits article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
}

.indusleep-v2-benefits__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius);
  color: var(--falk-blue);
  background: rgba(0, 160, 227, 0.1);
}

.indusleep-v2-benefits__icon svg {
  width: 24px;
  height: 24px;
}

.indusleep-v2-benefits h3 {
  margin-bottom: 8px;
}

.indusleep-v2-benefits p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* ---------- Eignung und Umsetzung ---------- */

.indusleep-v2-decision {
  color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(rgba(0, 160, 227, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 160, 227, 0.055) 1px, transparent 1px),
    var(--navy-deep);
  background-size: 56px 56px;
}

.indusleep-v2-section-head--light h2 {
  color: var(--white);
}

.indusleep-v2-section-head--light > p {
  color: rgba(255, 255, 255, 0.64);
}

.indusleep-v2-check {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.indusleep-v2-check article {
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.065);
}

.indusleep-v2-check article > span,
.indusleep-v2-route__intro > span {
  display: block;
  margin-bottom: 12px;
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.indusleep-v2-check h3 {
  color: var(--white);
  font-size: var(--fs-display-sm);
}

.indusleep-v2-check ul {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.indusleep-v2-check li {
  position: relative;
  padding-left: 24px;
}

.indusleep-v2-check li::before {
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: var(--falk-blue);
}

.indusleep-v2-route {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 40px;
  align-items: center;
  margin-top: 16px;
  padding: 32px;
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--white);
}

.indusleep-v2-route__intro > span {
  color: var(--falk-blue);
}

.indusleep-v2-route__intro h3 {
  color: var(--ink);
  font-size: var(--fs-display-sm);
}

.indusleep-v2-route__intro p {
  margin: 0;
  color: var(--muted);
}

.indusleep-v2-route ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.indusleep-v2-route li {
  min-width: 0;
  min-height: 152px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.indusleep-v2-route li span,
.indusleep-v2-route li strong,
.indusleep-v2-route li small {
  display: block;
}

.indusleep-v2-route li span {
  margin-bottom: 20px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
}

.indusleep-v2-route li strong {
  margin-bottom: 8px;
  color: var(--ink);
}

.indusleep-v2-route li small {
  color: var(--muted);
  line-height: 1.45;
}

.indusleep-v2-funding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 16px;
  padding: 24px 32px;
  border: 1px solid rgba(0, 160, 227, 0.36);
  border-radius: var(--radius);
  background: rgba(0, 160, 227, 0.1);
}

.indusleep-v2-funding strong {
  color: var(--white);
}

.indusleep-v2-funding p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: var(--fs-meta);
}

.indusleep-v2-funding a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #8be0ff;
  font-size: var(--fs-small);
  font-weight: 800;
  white-space: nowrap;
}

.indusleep-v2-funding svg {
  width: 18px;
  height: 18px;
}

/* ---------- FAQ und Abschluss ---------- */

.indusleep-v2-faq {
  background: var(--soft);
}

.indusleep-v2-contact {
  padding: 80px 0;
  color: rgba(255, 255, 255, 0.7);
  background:
    radial-gradient(circle at 85% 30%, rgba(0, 160, 227, 0.24), transparent 28%),
    linear-gradient(135deg, #071229, #17397c);
}

.indusleep-v2-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}

.indusleep-v2-contact h2 {
  max-width: 760px;
  color: var(--white);
}

.indusleep-v2-contact p {
  max-width: 680px;
  margin-bottom: 0;
}

.indusleep-v2-contact__actions {
  display: grid;
  gap: 12px;
  min-width: 280px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .indusleep-v2-section-head,
  .indusleep-v2-route,
  .indusleep-v2-contact__layout {
    grid-template-columns: 1fr;
  }

  .indusleep-v2-benefits {
    grid-template-columns: 1fr;
  }

  .indusleep-v2-contact__actions {
    min-width: 0;
    max-width: 360px;
  }
}

@media (max-width: 760px) {
  .indusleep-v2-hero {
    padding: 48px 0 64px;
  }

  .indusleep-v2-hero h1 {
    font-size: var(--fs-display);
  }

  .indusleep-v2-flow,
  .indusleep-v2-check,
  .indusleep-v2-route ol {
    grid-template-columns: 1fr;
  }

  .indusleep-v2-hero__logo {
    width: 112px;
    height: 84px;
  }

  .indusleep-v2-hero__facts li {
    padding: 12px 8px;
  }

  .indusleep-v2-calculator__head {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
  }

  .indusleep-v2-calculator__head p {
    white-space: normal;
  }

  .indusleep-v2-calculator__iframe {
    height: 1480px;
  }

  .indusleep-v2-section-head {
    gap: 20px;
  }

  .indusleep-v2-flow__item {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .indusleep-v2-flow__item:last-child {
    border-bottom: 0;
  }

  .indusleep-v2-flow__item::after {
    top: auto;
    right: 50%;
    bottom: -8px;
    transform: rotate(135deg) translateY(-50%);
  }

  .indusleep-v2-benefits article {
    grid-template-columns: 1fr;
  }

  .indusleep-v2-route,
  .indusleep-v2-check article {
    padding: 24px;
  }

  .indusleep-v2-route li {
    min-height: auto;
  }

  .indusleep-v2-funding {
    grid-template-columns: 1fr;
  }

  .indusleep-v2-contact {
    padding: 64px 0;
  }

  .indusleep-v2-contact__actions,
  .indusleep-v2-contact__actions .btn {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 520px) {
  .indusleep-v2-calculator__head h2,
  .indusleep-v2-check h3,
  .indusleep-v2-route__intro h3 {
    font-size: var(--fs-large);
  }

  .indusleep-v2-flow__item,
  .indusleep-v2-check article,
  .indusleep-v2-route,
  .indusleep-v2-funding {
    padding: 24px 20px;
  }
}


/* ==== assets/css/components/energy.css ==== */
/* ============================================================
   InduSLEEP-Panel mit Zustandswechsel (Variante v3)

   Zeigt "Produktion ↔ Ruhezustand" als Gegenüberstellung statt als
   Fließtext. Die beiden Pfeile stehen für das kontrollierte Herunter-
   und Wiederanfahren – die eigentliche Produkteigenschaft.

   Rein statisch, keine Animation und kein JavaScript.
   ============================================================ */

.energy {
  padding: var(--card-padding);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.energy__flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.energy__state {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

/* Der Ruhezustand ist der Nutzen – deshalb farblich abgesetzt. */
.energy__state--sleep {
  color: #4ade9f;
  border-color: rgba(74, 222, 159, 0.5);
  background: rgba(74, 222, 159, 0.07);
}

.energy__swap {
  display: grid;
  gap: 2px;
  color: var(--falk-blue);
}

.energy__swap svg {
  width: 20px;
  height: 20px;
}

/* Zweiter Pfeil zurück: das Wiederanfahren. */
.energy__swap svg:last-child {
  color: #4ade9f;
  transform: rotate(180deg);
}

.energy__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.energy__item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--falk-blue);
  font-size: var(--fs-large);
  font-weight: 800;
  line-height: 1.15;
}

.energy__item span {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
  font-weight: 700;
}

@media (max-width: 760px) {
  .energy__grid {
    grid-template-columns: 1fr;
  }
}


/* ==== assets/css/components/products.css ==== */
/* ============================================================
   Produkt-Teaser
   Grundform der Karte: components/card.css
   ============================================================ */

/* Drei Spalten: die fünf Produkte stehen damit als 3 + 2, die zweite
   Zeile mittig unter der ersten. Reihenmechanik in card-grid.css. */
.product-grid {
  --spalten: 3;
}

.product-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

/* Der Beschreibungstext füllt die Karte, damit der Link unten bündig
   steht. Ausgenommen ist das Label .card-meta: das ist ebenfalls ein <p>
   und würde sonst mitwachsen – die Überschriften säßen dann in jeder
   Karte auf einer anderen Höhe. */
.product-card p:not(.card-meta) {
  flex: 1;
}

@media (max-width: 1080px) {
  .product-grid {
    --spalten: 2;
  }
}

@media (max-width: 760px) {
  .product-grid {
    --spalten: 1;
  }
}

/* ============================================================
   Variante "akzent": Linie oben statt Rahmen ringsum

   Die Karte hängt an einer 3px-Linie in Navy und steht auf hellem
   Grau. Beim Überfahren wechselt die Linie nach Cyan und die Karte
   hellt nach Weiß auf – die Karte kommt dem Leser entgegen, statt
   nur einen Schatten zu bekommen.

   Wichtig: Diese Karten brauchen eine weiße Sektion. Auf
   .section--soft hätten Karte und Untergrund dieselbe Farbe.
   Der Hintergrund wird im Bauplan gesetzt (":weiss").
   ============================================================ */

.product-card--akzent {
  border: 0;
  border-top: 3px solid var(--falk-navy);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--soft);
  transition: transform var(--ease), box-shadow var(--ease),
    border-top-color var(--ease), background-color var(--ease);
}

.product-card--akzent:hover {
  border-top-color: var(--falk-blue);
  background: var(--white);
}


/* ==== assets/css/components/produkt.css ==== */
/* ============================================================
   Produktkarten mit Bild

   Produkte sind gegenständlich, Lösungen sind es nicht. Deshalb
   trägt hier das Bild die Karte und nicht die Typografie: eine
   Bildfläche im Verhältnis 4:3, darunter Name, Beschreibung, Link.

   V3 verwendet technische Visualisierungen aus assets/img/produkte/.
   Zum Austausch genügt es, die Bildreferenz zu ersetzen – Seitenverhältnis
   und Zuschnitt stecken im CSS, nicht in der Datei.

   Zuschnitt: object-fit cover. Liegen alternative Produktbilder
   freigestellt vor, genügt hier ein Wechsel auf contain plus ein
   heller Hintergrund auf .produkt__bild.
   ============================================================ */

.produkt-grid {
  --spalten: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  justify-content: center;
}

.produkt {
  display: flex;
  min-width: 0;
  flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--grid-gap)) / var(--spalten));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color var(--ease), transform var(--ease);
}

.produkt:hover {
  border-color: rgba(0, 160, 227, 0.45);
  transform: translateY(-2px);
}

/* --- Bildfläche --- */
.produkt__bild {
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: var(--soft-2);
}

.produkt__bild img {
  display: block;
  width: 100%;
  height: auto;
  /* Festes Verhältnis: ein Produktbild kann beliebige Maße
     haben, ohne dass die Karten unterschiedlich hoch werden. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Textteil --- */
.produkt__inhalt {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px;
}

.produkt__art {
  margin: 0 0 8px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.produkt__name {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: var(--fs-large);
  font-weight: 800;
  line-height: var(--lh-heading);
}

.produkt__text {
  flex: 1;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: var(--fs-meta);
}

@media (max-width: 1080px) {
  .produkt-grid {
    --spalten: 2;
  }
}

@media (max-width: 760px) {
  .produkt-grid {
    --spalten: 1;
  }

  .produkt__inhalt {
    padding: 24px;
  }
}


/* ==== assets/css/components/industries.css ==== */
/* ============================================================
   Branchen
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.industries {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.industry {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(34, 58, 142, 0.16);
  border-radius: var(--radius);
  color: var(--falk-navy);
  background: var(--white);
  font-weight: 800;
}


/* ==== assets/css/components/branchen.css ==== */
/* ============================================================
   Branchen – bildgetrieben

   Das Foto war vorher eine Illustration neben dem Text. Hier trägt
   es den Abschnitt: es reicht bis an die äußere Kante des Inhalts
   und bekommt mehr Fläche als die Textspalte.

   Die Tags stehen ruhiger und großzügiger als die bisherige
   Chip-Reihe – weniger Rahmen, mehr Abstand.
   ============================================================ */

/* Das Bild bekommt mehr Fläche als der Text – es soll den Abschnitt
   tragen und nicht neben ihm stehen. */
.branchen {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 56px;
  align-items: center;
}

.branchen__figur {
  position: relative;
  margin: 0;
  overflow: hidden;
  /* Dieselbe geschwungene Ecke wie im CTA-Band – das Formmotiv
     kommt an genau zwei Stellen der Seite vor. */
  border-radius: var(--radius-lg) 140px var(--radius-lg) var(--radius-lg);
}

.branchen__figur img {
  width: 100%;
  height: 100%;
  min-height: 470px;
  object-fit: cover;
}

/* Eine Stufe kleiner als sonst: die Textspalte ist hier schmaler als
   in anderen Abschnitten, weil das Bild Vorrang hat. Bei voller Größe
   bräche die Überschrift auf vier Zeilen. */
.branchen h2 {
  font-size: var(--fs-h2-md);
}

.branchen__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 32px;
}

.branchen__tag {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-meta);
  font-weight: 700;
  transition: color var(--ease), border-color var(--ease);
}

.branchen__tag:hover {
  color: var(--falk-navy);
  border-color: var(--falk-blue);
}

/* Kein zusätzlicher Einzug für Folge-Tags: sonst stehen die
   Unterstriche versetzt und die Reihe wirkt unruhig. */

@media (max-width: 1080px) {
  .branchen {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .branchen__figur img {
    min-height: 320px;
  }
}

@media (max-width: 760px) {
  .branchen__figur {
    border-radius: var(--radius) 64px var(--radius) var(--radius);
  }

  .branchen__figur img {
    min-height: 240px;
  }
}

/* ============================================================
   Variante kompakt

   Flacher Branchenverteiler für Inhalts- und Detailseiten. Ohne
   Bildbühne und Chips bleibt die Sektion ein kurzer Querverweis.
   Das automatische Raster funktioniert mit beliebig vielen Links.
   ============================================================ */
.section.industries-compact {
  padding: 64px 0;
}

.industries-compact__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 32px;
}

.industries-compact__head h2 {
  max-width: 720px;
  margin-bottom: 0;
  font-size: var(--fs-display);
  text-wrap: balance;
}

.industries-compact__intro {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.industries-compact__intro p {
  max-width: 560px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.industries-compact__all {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 800;
}

.industries-compact__all svg,
.industries-compact__list svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: color var(--ease), transform var(--ease);
}

.industries-compact__all:hover svg,
.industries-compact__list a:hover svg {
  color: var(--falk-blue);
  transform: translateX(4px);
}

.industries-compact__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--line-strong);
}

.industries-compact__list a {
  display: grid;
  min-height: 64px;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-meta);
  font-weight: 700;
  transition: color var(--ease), padding-left var(--ease);
}

.industries-compact__list a:hover {
  padding-left: 8px;
  color: var(--falk-navy);
}

.industries-compact__all:focus-visible,
.industries-compact__list a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .section.industries-compact {
    padding: 48px 0;
  }

  .industries-compact__head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .industries-compact__head h2 {
    font-size: var(--fs-display-sm);
  }

  .industries-compact__list {
    grid-template-columns: 1fr;
  }

  .industries-compact__list a {
    min-height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industries-compact__all svg,
  .industries-compact__list a,
  .industries-compact__list svg {
    transition: none;
  }
}

/* ============================================================
   Branchen – Variante automatisierung

   Verteiler für die Lösungsdetailseiten. Anders als die kompakte
   Variante nennt er zu jeder Branche die Aufgaben, die dort
   automatisiert werden; die reine Namensliste wirkte im unteren
   Seitenteil zu blass. Das Bild in der linken Spalte gibt dem
   Abschnitt einen Halt und füllt den Raum unter der Einleitung.
   ============================================================ */
.industries-solution__layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  gap: 80px;
  align-items: start;
}

.industries-solution__intro h2 {
  text-wrap: balance;
}

.industries-solution__all {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 800;
}

.industries-solution__all svg,
.industries-solution__list svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: color var(--ease), transform var(--ease);
}

.industries-solution__all:hover svg {
  color: var(--falk-blue);
  transform: translateX(4px);
}

.industries-solution__figure {
  margin: 32px 0 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.industries-solution__figure img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.industries-solution__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--line-strong);
}

.industries-solution__list a {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--ease);
}

.industries-solution__name {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 800;
}

.industries-solution__list small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.industries-solution__list a:hover {
  padding-left: 8px;
}

.industries-solution__list a:hover .industries-solution__name {
  color: var(--falk-navy);
}

.industries-solution__list a:hover svg {
  color: var(--falk-blue);
  transform: translateX(4px);
}

.industries-solution__all:focus-visible,
.industries-solution__list a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

@media (max-width: 1080px) {
  .industries-solution__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .industries-solution__figure {
    display: none;
  }
}

@media (max-width: 760px) {
  .industries-solution__list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industries-solution__all svg,
  .industries-solution__list a,
  .industries-solution__list svg {
    transition: none;
  }
}

/* ============================================================
   Branchen – Variante Zeilenindex

   Der bewusst flachste Verteiler: keine Bildbuehne, keine Chips,
   sondern acht ruhige Direktziele in einem zweispaltigen Index.
   ============================================================ */
.section.industries-index {
  padding: 48px 0;
}

.industries-index__layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: 56px;
  align-items: start;
}

.industries-index__intro h2 {
  margin-bottom: 16px;
  font-size: var(--fs-display-sm);
  text-wrap: balance;
}

.industries-index__intro > p:not(.eyebrow) {
  max-width: 440px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.industries-index__all,
.industries-index__list a {
  transition: color var(--ease), padding-left var(--ease);
}

.industries-index__all {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 800;
}

.industries-index__all svg,
.industries-index__list svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: transform var(--ease);
}

.industries-index__all:hover svg,
.industries-index__list a:hover svg {
  transform: translateX(4px);
}

.industries-index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  border-top: 1px solid var(--line-strong);
}

.industries-index__list a {
  display: grid;
  min-height: 56px;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.industries-index__list a > span {
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
}

.industries-index__list strong {
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.35;
}

.industries-index__list a:hover {
  padding-left: 8px;
  color: var(--falk-navy);
}

.industries-index__all:focus-visible,
.industries-index__list a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

/* ============================================================
   Branchen – Variante Bildleiste

   Ein Foto bleibt als visueller Anker erhalten, wird aber auf eine
   flache Querformatbuehne begrenzt. Die Ziele liegen daneben.
   ============================================================ */
.section.industries-imagebar {
  padding: 48px 0;
  color: rgba(255, 255, 255, 0.76);
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    var(--navy-deep);
  background-size: 40px 40px;
}

.industries-imagebar__layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}

.industries-imagebar__figure {
  position: relative;
  height: 260px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.industries-imagebar__figure::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 24%, rgba(15, 30, 70, 0.9));
}

.industries-imagebar__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industries-imagebar__figure figcaption {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 20px;
  left: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-end;
  color: var(--white);
}

.industries-imagebar__figure figcaption strong {
  color: var(--falk-blue);
  font-size: var(--fs-display-xl);
  line-height: 0.9;
}

.industries-imagebar__figure figcaption span {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.industries-imagebar__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.industries-imagebar__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 28px;
}

.industries-imagebar__head h2 {
  max-width: 660px;
  margin-bottom: 0;
  color: var(--white);
  font-size: var(--fs-display-sm);
  text-wrap: balance;
}

.industries-imagebar__head > a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 800;
}

.industries-imagebar__head svg {
  width: 18px;
  height: 18px;
  transition: transform var(--ease);
}

.industries-imagebar__head > a:hover svg {
  transform: translateX(4px);
}

.industries-imagebar__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.industries-imagebar__links a {
  display: flex;
  min-height: 56px;
  align-items: center;
  padding: 12px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.35;
  transition: color var(--ease), background var(--ease);
}

.industries-imagebar__links a:nth-child(4n) {
  border-right: 0;
}

.industries-imagebar__links a:hover {
  color: var(--white);
  background: rgba(0, 160, 227, 0.18);
}

.industries-imagebar__head > a:focus-visible,
.industries-imagebar__links a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

/* ============================================================
   Branchen – Variante Cluster

   Drei Prozessfamilien geben Orientierung, ohne acht gleich grosse
   Einzelkarten zu stapeln. Mobil bleiben sie in einer flachen Reihe.
   ============================================================ */
.section.industries-clusters {
  padding: 56px 0;
  background: var(--soft);
}

.industries-clusters__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.72fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 32px;
}

.industries-clusters__head h2 {
  max-width: 560px;
  margin-bottom: 0;
  font-size: var(--fs-display-sm);
  text-wrap: balance;
}

.industries-clusters__head > div:last-child > p {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.industries-clusters__head a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 800;
}

.industries-clusters__head svg {
  width: 18px;
  height: 18px;
  transition: transform var(--ease);
}

.industries-clusters__head a:hover svg {
  transform: translateX(4px);
}

.industries-clusters__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.industries-cluster {
  position: relative;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 4px solid var(--falk-navy);
  border-radius: var(--radius);
  background: var(--white);
}

.industries-cluster--accent {
  border-top-color: var(--falk-blue);
}

.industries-cluster__number {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
}

.industries-cluster h3 {
  max-width: calc(100% - 40px);
  margin-bottom: 8px;
  color: var(--falk-navy);
}

.industries-cluster > p {
  min-height: 48px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: var(--fs-small);
}

.industries-cluster nav {
  border-top: 1px solid var(--line);
}

.industries-cluster nav a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
  transition: color var(--ease), padding-left var(--ease);
}

.industries-cluster nav a:hover {
  padding-left: 8px;
  color: var(--falk-navy);
}

.industries-clusters__head a:focus-visible,
.industries-cluster nav a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

@media (max-width: 1080px) {
  .industries-imagebar__layout {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 32px;
  }

  .industries-imagebar__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .industries-imagebar__links a:nth-child(4n) {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
  }

  .industries-imagebar__links a:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .section.industries-index,
  .section.industries-imagebar,
  .section.industries-clusters {
    padding: 40px 0;
  }

  .industries-index__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .industries-index__list {
    grid-template-columns: 1fr;
  }

  .industries-index__list a {
    min-height: 48px;
  }

  .industries-imagebar__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .industries-imagebar__figure {
    height: 160px;
  }

  .industries-imagebar__head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  .industries-imagebar__links a {
    min-height: 48px;
    padding: 8px 12px;
  }

  .industries-clusters__head {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
  }

  .industries-clusters__grid {
    display: flex;
    width: calc(100vw - 28px);
    gap: 12px;
    padding-right: 28px;
    overflow-x: auto;
    scroll-padding-left: 28px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .industries-cluster {
    flex: 0 0 min(82vw, 320px);
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industries-index__all,
  .industries-index__all svg,
  .industries-index__list a,
  .industries-index__list svg,
  .industries-imagebar__head svg,
  .industries-imagebar__links a,
  .industries-clusters__head svg,
  .industries-cluster nav a {
    transition: none;
  }
}


/* ==== assets/css/components/branchenuebersicht.css ==== */
/* ============================================================
   Branchenübersicht

   Dokumentgetreue Verteilerseite auf Grundlage von
   Texte/04_00_Branchen_Uebersicht.docx. Die acht Branchen bleiben
   eigenständige Informationsbereiche ohne Scheinlinks auf noch nicht
   vorhandene Detailseiten.
   ============================================================ */

.industry-overview {
  --industry-grid-size: 56px;
  --industry-landscape-cutoff: 480px;
}

.industry-overview main {
  background: var(--white);
}

.industry-overview .subpage-hero .hero__media::after {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 16, 40, 0.96) 0%, rgba(10, 31, 70, 0.9) 54%, rgba(34, 58, 142, 0.7) 100%);
  background-size: var(--industry-grid-size) var(--industry-grid-size), var(--industry-grid-size) var(--industry-grid-size), auto;
}

/* ------------------------------------------------------------
   Einordnung
   ------------------------------------------------------------ */
.industry-overview .section-head,
.industry-overview .faq,
.industry-overview .faq > *,
.industry-overview .v4-contact__copy {
  min-width: 0;
}

.industry-overview h1,
.industry-overview h2,
.industry-overview h3 {
  hyphens: manual;
  overflow-wrap: break-word;
}

.industry-overview .faq summary {
  hyphens: auto;
  overflow-wrap: break-word;
}

.industry-overview .industry-intro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 86% 24%, rgba(0, 160, 227, 0.14), transparent 40%),
    linear-gradient(90deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    #f7fafc;
  background-size: auto, var(--industry-grid-size) var(--industry-grid-size), var(--industry-grid-size) var(--industry-grid-size), auto;
}

.industry-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 80px;
  align-items: stretch;
}

.industry-intro__copy h2,
.industry-intro__copy > p:not(.eyebrow) {
  max-width: 780px;
}

.industry-intro__copy > p:last-child {
  margin-bottom: 0;
}

.industry-intro__claim {
  margin: 32px 0 0;
  padding: 20px 24px;
  border: 0;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  background: rgba(237, 246, 250, 0.84);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
}

.industry-intro__figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(34, 58, 142, 0.14);
  border-radius: var(--radius-lg);
  background: var(--soft-2);
  box-shadow: 0 20px 56px rgba(15, 30, 70, 0.12);
}

.industry-intro__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center;
}

/* ------------------------------------------------------------
   Acht Branchenfelder
   ------------------------------------------------------------ */
.industry-overview .industry-landscape {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #0c1d43 0 var(--industry-landscape-cutoff), #eaf1f6 var(--industry-landscape-cutoff) 100%);
  background-size: var(--industry-grid-size) var(--industry-grid-size), var(--industry-grid-size) var(--industry-grid-size), auto;
}

.industry-landscape__head {
  margin-bottom: 56px;
}

.industry-overview .industry-landscape__head .eyebrow,
.industry-overview .industry-landscape__head h2 {
  color: var(--white);
}

.industry-overview .industry-landscape__head .eyebrow::after {
  background: var(--falk-blue);
}

.industry-overview .industry-landscape__head .lead {
  color: rgba(255, 255, 255, 0.72);
}

.industry-landscape__grid {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(198, 205, 216, 0.8);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.18);
}

.industry-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 480px;
  flex-direction: column;
  padding: 32px;
  border: 0;
  border-radius: 0;
  background: var(--white);
  box-shadow: inset -1px -1px 0 var(--line);
}

.industry-card::before {
  position: absolute;
  top: 0;
  right: 32px;
  left: 32px;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--falk-blue) 0 48px, rgba(0, 160, 227, 0.14) 48px 100%);
}

.industry-card__head {
  margin-bottom: 24px;
}

.industry-card h3 {
  margin: 0;
  font-size: var(--fs-display-sm);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.industry-card > p {
  color: var(--text);
}

.industry-card ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: auto 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.industry-card li {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--falk-navy);
  background: var(--soft);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.5;
}

.industry-card li::before {
  display: none;
}

/* ------------------------------------------------------------
   Gemeinsame Kompetenzklammer
   ------------------------------------------------------------ */
.industry-capabilities__head {
  margin-bottom: 56px;
}

.industry-capabilities__head .lead {
  color: rgba(255, 255, 255, 0.72);
}

.industry-capabilities__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.industry-capability {
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}

.industry-capability > span {
  display: block;
  margin-bottom: 24px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.industry-capability h3 {
  min-height: 64px;
  margin-bottom: 16px;
  font-size: var(--fs-large);
}

.industry-capability p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-meta);
}

/* ------------------------------------------------------------
   Abschluss-CTA
   ------------------------------------------------------------ */
.industry-overview .industry-contact {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    #0c1d43;
  background-size: var(--industry-grid-size) var(--industry-grid-size), var(--industry-grid-size) var(--industry-grid-size), auto;
}

.industry-overview .industry-contact::after {
  display: none;
}

/* ------------------------------------------------------------
   FAQ auf derselben Rasterfläche wie die Übersichtsseiten
   ------------------------------------------------------------ */
.industry-overview #faq {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    var(--white);
  background-size: var(--industry-grid-size) var(--industry-grid-size), var(--industry-grid-size) var(--industry-grid-size), auto;
}

.industry-overview #faq .faq__intro {
  position: static;
}

.industry-overview #faq .faq__list {
  gap: 12px;
  border-top: 0;
}

.industry-overview #faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
}

.industry-overview #faq details[open] {
  border-color: rgba(0, 160, 227, 0.38);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.08);
}

.industry-overview #faq .faq--luftig summary {
  padding: 24px 28px;
}

.industry-overview #faq .faq--luftig details p {
  padding: 0 64px 24px 28px;
}

@media (max-width: 1080px) {
  .industry-overview {
    --industry-landscape-cutoff: 560px;
  }

  .industry-intro__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .industry-intro__claim {
    max-width: 760px;
  }

  .industry-intro__figure {
    max-width: 820px;
  }

  .industry-intro__figure img {
    min-height: 420px;
  }

  .industry-capabilities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .industry-overview {
    --industry-grid-size: 48px;
    --industry-landscape-cutoff: 600px;
  }

  .industry-intro__layout {
    gap: 32px;
  }

  .industry-card {
    padding: 24px;
  }

  .industry-intro__figure img {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .industry-landscape__head,
  .industry-capabilities__head {
    margin-bottom: 40px;
  }

  .industry-landscape__grid,
  .industry-capabilities__grid {
    grid-template-columns: 1fr;
  }

  .industry-card {
    min-height: 0;
  }

  .industry-card ul {
    grid-template-columns: 1fr;
  }

  .industry-capability h3 {
    min-height: 0;
  }

  .industry-card::before {
    right: 24px;
    left: 24px;
  }

  .industry-overview #faq .faq--luftig summary {
    padding: 20px;
  }

  .industry-overview #faq .faq--luftig details p {
    padding: 0 20px 20px;
  }
}


/* ==== assets/css/components/proof.css ==== */
/* ============================================================
   Referenzen / Nachweise
   Grundform der Karte: components/card.css
   ============================================================ */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.proof-card {
  display: flex;
  flex-direction: column;
  min-height: 190px;
}

/* Der Beschreibungstext füllt die Karte, damit der Link unten bündig
   steht. Ausgenommen ist das Label .card-meta: das ist ebenfalls ein <p>
   und würde sonst mitwachsen – die Überschriften säßen dann in jeder
   Karte auf einer anderen Höhe. */
.proof-card p:not(.card-meta) {
  flex: 1;
}

/* --- ab (max-width: 1080px) --- */
@media (max-width: 1080px) {
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- ab (max-width: 760px) --- */
@media (max-width: 760px) {
  .proof-grid {
    grid-template-columns: 1fr;
  }
}


/* ==== assets/css/components/editorial.css ==== */
/* ============================================================
   Editorial Links – redaktioneller Verteiler

   Dieser Abschnitt ist kein Leistungs- und kein Produktbereich: er
   leitet in andere Teile der Website weiter. Deshalb bewusst weder
   Karten noch Zeitleiste, sondern große Linkzeilen.

   Die frühere senkrechte Cyan-Linie ist entfallen. Sie las sich als
   Chronologie, obwohl die Einträge Inhaltsbereiche sind.

   Unterschied zu den Lösungsmodulen: keine Flächen, keine Rahmen,
   Titel deutlich größer, Nummer und Pfeil rechts statt links.
   ============================================================ */

.editorial {
  border-top: 1px solid var(--line);
}

.editorial__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--ease);
}

.editorial__zeile:hover {
  padding-left: 16px;
}

.editorial__titel {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: var(--fs-display-sm);
  font-weight: 800;
  line-height: var(--lh-heading);
  transition: color var(--ease);
}

.editorial__zeile:hover .editorial__titel {
  color: var(--falk-navy);
}

.editorial__text {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* Nummer und Pfeil stehen rechts – der Blick läuft über den Titel
   ans Zeilenende, nicht über eine Nummernspalte am Anfang. */
.editorial__ziel {
  display: flex;
  align-items: center;
  gap: 20px;
}

.editorial__nr {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.editorial__pfeil {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--falk-navy);
  transition: border-color var(--ease), background-color var(--ease),
    color var(--ease);
}

.editorial__pfeil svg {
  width: 16px;
  height: 16px;
}

.editorial__zeile:hover .editorial__nr {
  color: var(--falk-blue);
}

.editorial__zeile:hover .editorial__pfeil {
  color: var(--white);
  border-color: var(--falk-navy);
  background: var(--falk-navy);
}

@media (max-width: 760px) {
  .editorial__zeile {
    gap: 20px;
    padding: 24px 0;
  }

  .editorial__zeile:hover {
    padding-left: 0;
  }

  .editorial__titel {
    font-size: var(--fs-large);
  }

  .editorial__nr {
    display: none;
  }

  .editorial__pfeil {
    width: 36px;
    height: 36px;
  }
}


/* ==== assets/css/components/refs.css ==== */
/* ============================================================
   Referenzkarten als Schiene (Variante v2)

   Horizontal scrollbar mit scroll-snap. Die beiden Schaltflächen
   sind reine Zugabe: ohne JavaScript lässt sich die Schiene mit
   Finger, Trackpad und Tastatur genauso bedienen.
   ============================================================ */

.refs__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 40px;
}

.refs__nav {
  display: flex;
  gap: 12px;
}

.refs__btn {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(34, 58, 142, 0.3);
  border-radius: 50%;
  color: var(--falk-navy);
  background: var(--white);
  transition: background-color var(--ease), color var(--ease),
    border-color var(--ease);
}

.refs__btn:hover {
  color: var(--white);
  border-color: var(--falk-navy);
  background: var(--falk-navy);
}

.refs__btn svg {
  width: 20px;
  height: 20px;
}

.refs__track {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.refs__track::-webkit-scrollbar {
  display: none;
}

.ref-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 340px;
  min-height: 230px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  scroll-snap-align: start;
  transition: border-color var(--ease), box-shadow var(--ease),
    transform var(--ease);
}

.ref-card:hover {
  border-color: rgba(0, 160, 227, 0.55);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.ref-card p {
  flex: 1;
  margin-bottom: 0;
  color: var(--muted);
}

.ref-card .link-arrow {
  margin-top: 20px;
}

@media (max-width: 1080px) {
  .refs__head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ref-card {
    flex-basis: 82vw;
  }
}


/* ==== assets/css/components/rail.css ==== */
/* ============================================================
   Kartenschiene

   Horizontal scrollbare Kartenreihe mit scroll-snap. Schaltflächen
   und Fortschrittsbalken sind reine Zugabe: ohne JavaScript lässt
   sich die Schiene mit Finger, Trackpad und Tastatur genauso
   bedienen, und ohne CSS-Overflow steht sie als einfache Reihe da.

   Die Karten selbst gehören der jeweiligen Komponente – die Schiene
   bestimmt nur Lauf, Abstand und Bedienung. Wie breit eine Karte ist,
   entscheidet ihre eigene flex-basis.
   ============================================================ */
.rail__nav {
  display: flex;
  gap: 12px;
}

.rail__btn {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(34, 58, 142, 0.3);
  border-radius: 50%;
  color: var(--falk-navy);
  background: var(--white);
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease),
    border-color var(--ease), opacity var(--ease);
}

.rail__btn:hover {
  color: var(--white);
  border-color: var(--falk-navy);
  background: var(--falk-navy);
}

.rail__btn:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

/* Am Anfang und am Ende der Schiene führt die Schaltfläche nirgendwohin.
   Sie bleibt sichtbar, damit die Reihe nicht springt. */
.rail__btn[disabled] {
  cursor: default;
  opacity: 0.3;
}

.rail__btn[disabled]:hover {
  color: var(--falk-navy);
  border-color: rgba(34, 58, 142, 0.3);
  background: var(--white);
}

.rail__btn svg {
  width: 20px;
  height: 20px;
}

.rail__track {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  /* Platz für Anhebung und Schatten der Karten beim Überfahren.
     Seitlich bleibt die Schiene bündig zum Abschnittskopf, deshalb
     wird nur oben und unten Raum freigehalten. */
  padding: 4px 0 20px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.rail__track::-webkit-scrollbar {
  display: none;
}

.rail__track:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

/* Der Balken zeigt, welcher Ausschnitt der Reihe gerade zu sehen ist.
   Breite und Position kommen als Anteile aus dem Skript. */
.rail__progress {
  position: relative;
  height: 2px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--line);
}

.rail__progress span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--falk-blue);
  transform-origin: left center;
  transform: scaleX(var(--rail-anteil, 1))
    translateX(calc(var(--rail-position, 0) * (100% / var(--rail-anteil, 1))));
  transition: transform var(--ease);
}

/* Ohne Skript bleibt der Balken vollständig gefüllt und damit stumm. */
@media (prefers-reduced-motion: reduce) {
  .rail__track {
    scroll-behavior: auto;
  }

  .rail__btn,
  .rail__progress span {
    transition: none;
  }
}

/* Ohne Skript führen die Schaltflächen nirgendwohin – dann bleibt die
   Reihe die Schiene von oben und wird mit Finger oder Trackpad bewegt. */
[data-deck] .rail__nav {
  display: none;
}

[data-deck-bereit] .rail__nav {
  display: flex;
}

/* ------------------------------------------------------------
   Kartenstapel

   Die aktive Karte steht groß vorn in der Mitte, die folgenden
   liegen versetzt dahinter nach rechts, die zuletzt gesehene
   schaut links hinter ihr hervor. Beim Weiterschalten rutscht der
   ganze Stapel eine Karte nach links.

   Alle Karten liegen im selben Rasterfeld übereinander; die Höhe
   des Abschnitts ergibt sich damit aus der höchsten Karte, ohne
   ein festes Maß. Wo eine Karte liegt, setzt das Skript als zwei
   Werte je Karte: den Abstand zur aktiven Karte (mit Vorzeichen)
   und die Tiefe im Stapel. Wie das aussieht, steht hier.

   Eingeschaltet wird der Stapel erst vom Skript. Ohne Skript bleibt
   die scrollbare Reihe von oben stehen – der Inhalt ist derselbe.
   ------------------------------------------------------------ */
.rail__track--stapel {
  --stapel-versatz: 26%;
  /* Der Stapel wächst nach rechts. Damit die Gruppe als Ganzes mittig
     im Abschnitt steht, sitzt die vorderste Karte etwas links davon. */
  --stapel-schwerpunkt: 13%;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  /* Der Stapel darf am rechten Rand auslaufen, ohne die Seite
     seitlich scrollbar zu machen. Senkrecht bleibt Platz für den
     Schatten der vordersten Karte. */
  overflow-x: clip;
  overflow-y: visible;
  scroll-snap-type: none;
}

.rail__track.rail__track--stapel > * {
  z-index: var(--stapel-ebene, 1);
  grid-area: 1 / 1;
  width: clamp(280px, 60%, 640px);
  justify-self: center;
  transform-origin: 50% 100%;
  transform:
    translateX(calc(var(--stapel-abstand, 0) * var(--stapel-versatz) - var(--stapel-schwerpunkt)))
    translateY(calc(var(--stapel-tiefe, 0) * -8px))
    rotate(calc(var(--stapel-abstand, 0) * 1.6deg))
    scale(calc(1 - var(--stapel-tiefe, 0) * 0.09));
  /* Die vorderen Karten bleiben deckend, damit sie als Karten lesbar
     bleiben; erst die hintersten verblassen ganz. */
  opacity: clamp(0, calc((3.3 - var(--stapel-tiefe, 0)) / 1.6), 1);
  box-shadow: 0 24px 56px rgba(17, 24, 39, calc(0.16 * max(0, 1 - var(--stapel-tiefe, 0))));
  /* Länger als der Standardübergang: hier wandert der ganze Stapel,
     nicht nur eine Fläche. */
  transition: transform 440ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 440ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 440ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hinter der vordersten Karte wird der Inhalt nur angedeutet: von der
   angeschnittenen Karte wäre sonst das Ende einzelner Zeilen scharf zu
   lesen, und das wirkt wie ein Fehler. Unscharf bleibt erkennbar, dass
   dort etwas steht – je tiefer im Stapel, desto weicher. Anklicken
   lässt sich der angedeutete Inhalt nicht; der Klick gilt der Karte. */
.rail__track--stapel > *:not(.ist-vorn) > * {
  opacity: 0.55;
  filter: blur(calc(var(--stapel-tiefe, 0) * 2px));
  pointer-events: none;
}

.rail__track--stapel > * > * {
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Eine Karte aus dem Stapel holt man, indem man sie anklickt. */
.rail__track--stapel > *:not(.ist-vorn) {
  cursor: pointer;
}

@media (max-width: 760px) {
  .rail__track--stapel {
    --stapel-versatz: 18%;
    --stapel-schwerpunkt: 9%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail__track.rail__track--stapel > *,
  .rail__track--stapel > * > * {
    transition: none;
  }
}


/* ==== assets/css/components/verweise.css ==== */
/* ============================================================
   Verweisblock

   Der Abschnitt "wohin geht es von hier aus weiter". Er kommt auf
   Lösungs-, Produkt- und Detailseiten immer wieder vor und ist
   deshalb bewusst inhaltsoffen gebaut:

     Kopf     Eyebrow, Überschrift, optionale Einleitung und ein
              optionaler Sammellink ("Alle Lösungen ansehen").
     Gruppen  beliebig viele. Jede Gruppe kann eine Beschriftung
              tragen ("Angrenzende Lösungen") oder ohne auskommen.
     Einträge beliebig viele je Gruppe: Titel, eine Zeile Erklärung,
              Pfeil.

   Die Spaltenzahl ergibt sich aus der Zahl der Gruppen: eine Gruppe
   läuft über die volle Breite, zwei stehen nebeneinander, drei oder
   vier brechen um, sobald es zu eng wird. Es muss also nichts
   angepasst werden, wenn eine Seite mehr oder weniger Ziele hat.
   ============================================================ */
.verweise__kopf {
  max-width: 860px;
  margin-bottom: 48px;
}

.verweise__kopf .btn {
  justify-self: start;
  margin-top: 8px;
}

.verweise__gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
}

.verweise__label {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Ohne Beschriftung beginnt die Gruppe trotzdem mit einer Kante,
   damit eine einzelne Gruppe nicht in der Fläche schwebt. */
.verweise__gruppe {
  border-top: 1px solid var(--line-strong);
}

.verweise__gruppe:has(.verweise__label) {
  border-top: 0;
}

.verweis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 4px 20px;
  align-items: center;
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--ease), background-color var(--ease);
}

.verweis:hover {
  padding-left: 16px;
  background: var(--white);
}

.verweis strong {
  color: var(--ink);
  font-size: var(--fs-body);
}

.verweis small {
  max-width: 760px;
  grid-column: 1;
  color: var(--muted);
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
}

.verweis svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  color: var(--falk-navy);
  transition: color var(--ease), transform var(--ease);
}

.verweis:hover svg {
  color: var(--falk-blue);
  transform: translateX(4px);
}

.verweis:hover strong {
  color: var(--falk-navy);
}

.verweis:focus-visible,
.verweise__kopf a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

@media (max-width: 1080px) {
  .verweise__gruppen {
    gap: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .verweis,
  .verweis svg {
    transition: none;
  }
}


/* ==== assets/css/components/verweiskarten.css ==== */
/* ============================================================
   Verweiskarten

   Die kräftige Fassung des Verweisblocks: Abschnittskopf links,
   rechts eine Tafel aus Karten mit Symbol, Text und Zielzeile.

   Wann diese und wann der schlichte Verweisblock (verweise.css)?

     verweise.css      viele Ziele, nach Art gruppiert, am Ende einer
                       Detailseite. Eine Zeile je Ziel.
     verweiskarten.css wenige, gleichrangige Ziele, die für sich
                       stehen sollen – Patente, Zertifikate, Karriere.
                       Jedes bekommt Fläche, Symbol und einen
                       ausformulierten Klickgrund.

   Die Zahl der Karten ist offen; sie stehen untereinander in einer
   Tafel und teilen sich deren Rahmen.
   ============================================================ */
.verweiskarten__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.28fr);
  gap: 80px;
  align-items: start;
}

.verweiskarten__kopf > p:last-child {
  max-width: 680px;
  color: var(--muted);
}

.verweiskarten {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(34, 58, 142, 0.14);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 20px 56px rgba(15, 30, 70, 0.1);
}

.verweiskarte {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 32px;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--ease);
}

.verweiskarte:last-child {
  border-bottom: 0;
}

.verweiskarte:hover {
  background: #edf8fc;
}

.verweiskarte__symbol {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgba(0, 160, 227, 0.28);
  border-radius: var(--radius);
  color: var(--falk-navy);
  background: rgba(0, 160, 227, 0.08);
}

.verweiskarte__symbol svg {
  width: 36px;
  height: 36px;
}

.verweiskarte__text {
  display: grid;
  gap: 8px;
}

.verweiskarte__text strong {
  color: var(--ink);
  font-size: var(--fs-large);
}

.verweiskarte__text > span:last-child {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.verweiskarte__ziel {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 800;
  white-space: nowrap;
}

.verweiskarte__ziel svg {
  width: 18px;
  height: 18px;
  transition: transform var(--ease);
}

.verweiskarte:hover .verweiskarte__ziel svg {
  transform: translateX(4px);
}

.verweiskarte:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: -3px;
}

@media (max-width: 1080px) {
  .verweiskarten__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .verweiskarten {
    max-width: 820px;
  }

  /* Untereinander ist für Text und Zielzeile nebeneinander kein Platz
     mehr – die Zielzeile rückt unter den Text. */
  .verweiskarte {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .verweiskarte__ziel {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .verweiskarten__layout {
    gap: 32px;
  }

  .verweiskarte {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px 20px;
    padding: 24px;
  }

  .verweiskarte__symbol {
    width: 48px;
    height: 48px;
  }

  .verweiskarte__symbol svg {
    width: 28px;
    height: 28px;
  }

  .verweiskarte__ziel {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .verweiskarte {
    grid-template-columns: 1fr;
  }

  .verweiskarte__ziel {
    grid-column: 1;
    justify-content: space-between;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .verweiskarte,
  .verweiskarte__ziel svg {
    transition: none;
  }
}


/* ==== assets/css/components/logos.css ==== */
/* ============================================================
   Logo-Laufband
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.logos {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  padding: 112px 0;
}

/* Kleinere Ueberschrift als in normalen Sektionen: das Band ist ein
   Ueberleitungselement, keine eigene Sektion. Stand vorher inline im
   Markup - im Block-Editor waere das fuer Falk nicht aenderbar. */
.logos h2 {
  margin-bottom: 0;
  font-size: var(--fs-display-sm);
}

.logos__track {
  display: flex;
  width: max-content;
  min-width: 100%;
  gap: 16px;
  padding: 56px 0 0;
  animation: logo-run 42s linear infinite;
}

.logo-tile {
  display: grid;
  width: 174px;
  height: 72px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.logo-tile img {
  max-width: 132px;
  max-height: 46px;
  object-fit: contain;
}

@keyframes logo-run {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


/* ==== assets/css/components/marquee.css ==== */
/* ============================================================
   Logo-Laufband, Schwarz/Weiß (Variante sw)

   Kundenlogos entsättigt, damit die Fremdmarken das Seitenbild nicht
   zerreißen; beim Überfahren erscheint die Originalfarbe. Der Lauf
   hält beim Überfahren an, damit einzelne Logos lesbar bleiben.
   ============================================================ */

.partners {
  overflow: hidden;
  padding: 80px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.partners__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

.partners__head h2 {
  margin-bottom: 0;
  font-size: var(--fs-display-sm);
}

.marquee {
  position: relative;
}

/* Weiche Kanten links und rechts, damit die Logos aus- statt
   abgeschnitten wirken. */
.marquee::before,
.marquee::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 80px;
  content: "";
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--white), transparent);
}

.marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--white), transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--grid-gap);
  animation: marquee 44s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee .logo-tile {
  display: grid;
  width: 180px;
  height: 80px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.marquee .logo-tile img {
  max-width: 130px;
  max-height: 44px;
  object-fit: contain;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity var(--ease), filter var(--ease);
}

.marquee .logo-tile:hover img {
  opacity: 1;
  filter: grayscale(0);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt ein ruhiges Band. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
}


/* ==== assets/css/components/logoband.css ==== */
/* ============================================================
   Logoband – ruhiges Referenzband

   Keine Kacheln, keine Rahmen, keine Schatten: die Logos stehen
   frei auf Weiß. Vorher hatte jedes Logo eine eigene Karte, wodurch
   das Band wie ein weiteres Raster wirkte.

   Die Logos sind auf vergleichbare optische Größe normalisiert –
   begrenzt wird die Höhe, nicht die Breite, sonst wirken breite
   Wortmarken größer als kompakte Bildmarken.
   ============================================================ */

.logoband {
  overflow: hidden;
  padding: 80px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.logoband__kopf {
  margin-bottom: 48px;
}

.logoband__lauf {
  position: relative;
}

/* Weiche Kanten, damit die Logos aus- statt abgeschnitten wirken. */
.logoband__lauf::before,
.logoband__lauf::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 120px;
  content: "";
  pointer-events: none;
}

.logoband__lauf::before {
  left: 0;
  background: linear-gradient(90deg, var(--white), transparent);
}

.logoband__lauf::after {
  right: 0;
  background: linear-gradient(-90deg, var(--white), transparent);
}

/* 80 Sekunden statt 44: der Lauf soll kaum auffallen. */
.logoband__spur {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 112px;
  animation: logoband 80s linear infinite;
}

.logoband__lauf:hover .logoband__spur {
  animation-play-state: paused;
}

.logoband__spur img {
  width: auto;
  height: 46px;
  flex: 0 0 auto;
  opacity: 0.62;
  filter: grayscale(1);
  transition: opacity var(--ease), filter var(--ease);
}

.logoband__spur img:hover {
  opacity: 1;
  filter: grayscale(0);
}

@keyframes logoband {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logoband__spur {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 64px;
    animation: none;
  }
}

@media (max-width: 760px) {
  .logoband {
    padding: 56px 0;
  }

  .logoband__spur {
    gap: 56px;
  }

  .logoband__spur img {
    height: 32px;
  }
}


/* ==== assets/css/components/cta.css ==== */
/* ============================================================
   CTA-Band
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.cta-band {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--falk-navy);
}

.cta-band::after {
  position: absolute;
  right: -16%;
  bottom: -42%;
  width: 62%;
  height: 74%;
  content: "";
  border-radius: 100% 0 0 0;
  background: rgba(255, 255, 255, 0.09);
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 64px 0;
}

.cta-band h2 {
  max-width: 760px;
  color: var(--white);
}

.cta-band p {
  max-width: 760px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--fs-lead);
}

/* --- ab (max-width: 760px) --- */
@media (max-width: 760px) {
  .cta-band__inner {
    grid-template-columns: 1fr;
    padding: 56px 0;
  }
}

/* ============================================================
   Variante "tief": dunkleres Blau als Verlauf

   Statt der flächigen Navy-Fläche ein Verlauf von fast schwarzem
   Blau nach hellerem Navy. Der Abschluss der Seite wirkt dadurch
   schwerer und setzt sich klarer vom Footer ab.
   ============================================================ */

.cta-band--tief {
  background: linear-gradient(120deg, #101a3d 0%, var(--falk-navy) 70%, #2c4bb4 100%);
}

.cta-band--tief::after {
  right: -14%;
  bottom: -48%;
  width: 60%;
  height: 82%;
  background: rgba(0, 160, 227, 0.14);
}

.cta-band--tief p {
  color: rgba(255, 255, 255, 0.8);
}


/* ==== assets/css/components/faq.css ==== */
/* ============================================================
   FAQ
   Grundform der Aufklapp-Karte: components/card.css
   ============================================================ */

.faq {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
}

.faq__list {
  display: grid;
  gap: 12px;
}

.faq details {
  overflow: hidden;
  padding: 0;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.faq details[open] {
  border-color: rgba(0, 160, 227, 0.42);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.08);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 20px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  content: "+";
  border: 1px solid rgba(0, 160, 227, 0.28);
  border-radius: 50%;
  color: var(--falk-blue);
  background: rgba(0, 160, 227, 0.08);
  font-size: var(--fs-large);
  line-height: 1;
  transition: transform var(--ease), color var(--ease), background-color var(--ease);
}

.faq details[open] summary::after {
  color: var(--white);
  content: "−";
  background: var(--falk-blue);
  transform: rotate(180deg);
}

.faq details p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--muted);
}

/* --- ab (max-width: 1080px) --- */
@media (max-width: 1080px) {
  .faq {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Variante luftig

   Mehr Innenabstand, keine Rahmen um die geschlossenen Fragen –
   nur eine Trennlinie. Der Abschnitt liegt hinter mehreren
   Marketingflächen und soll bewusst ruhiger wirken als diese.
   Cyan bleibt dem geöffneten Zustand vorbehalten.
   ============================================================ */

.faq--luftig .faq__list {
  gap: 0;
  border-top: 1px solid var(--line);
}

.faq--luftig details {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.faq--luftig details[open] {
  border-color: var(--line);
  box-shadow: none;
}

.faq--luftig summary {
  padding: 28px 0;
}

.faq--luftig summary:hover {
  color: var(--falk-navy);
}

.faq--luftig details[open] summary {
  color: var(--falk-navy);
}

.faq--luftig details[open] summary::after {
  color: var(--white);
  border-color: var(--falk-blue);
  background: var(--falk-blue);
}

.faq--luftig details p {
  padding: 0 56px 28px 0;
}


/* ==== assets/css/components/footer.css ==== */
/* ============================================================
   Footer
   Quelle: Falk_Relaunch_Startseite_Template.html (1:1 extrahiert)
   ============================================================ */

.footer {
  padding: 56px 0 32px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(250px, 1.25fr) minmax(280px, 1.25fr) repeat(2, minmax(0, 0.9fr));
  gap: 32px;
  margin-bottom: 32px;
}

.footer img {
  width: 180px;
  height: auto;
  margin-bottom: 20px;
}

.footer p {
  color: var(--muted);
}

.footer h3 {
  margin-bottom: 16px;
  font-size: var(--fs-body);
}

.footer ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer a {
  color: var(--muted);
  font-weight: 700;
}

.footer a:hover {
  color: var(--falk-navy);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* --- ab (max-width: 760px) --- */
/* Zwischenstufe fuer Tablet. Ohne sie sprang das Raster von vier
   Spalten direkt auf eine: zwischen 761px und rund 950px erzwangen
   die Mindestbreiten der ersten beiden Spalten mehr Platz als der
   Container hat, die Seite scrollte waagerecht. */
@media (max-width: 1080px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

@media (max-width: 760px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
  }
}

/* ============================================================
   Variante "dunkel"

   Navy statt heller Fläche. Der Footer schließt die Seite damit
   sichtbar ab, statt sie auslaufen zu lassen.

   Das Logo liegt als dunkles SVG vor und wird per Filter invertiert –
   so bleibt es eine einzige Logodatei für die ganze Website.
   ============================================================ */

.footer--dunkel {
  border-top: 0;
  color: rgba(255, 255, 255, 0.75);
  background: var(--navy-deep);
}

.footer--dunkel img {
  filter: brightness(0) invert(1);
}

.footer--dunkel h3 {
  color: var(--white);
}

.footer--dunkel a {
  color: rgba(255, 255, 255, 0.68);
}

.footer--dunkel a:hover {
  color: var(--falk-blue);
}

.footer--dunkel p {
  color: rgba(255, 255, 255, 0.62);
}

.footer--dunkel .footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.14);
}


/* ==== assets/css/components/v4.css ==== */
/* ============================================================
   Startseite V4 – Codex-Entwurf

   V4 nutzt die bestehenden Falk-Tokens und Inhalte, ordnet sie aber
   als zusammenhängende Dramaturgie: Systemversprechen, Arbeitsweise,
   Leistungsindex, technische Architektur, Produkte und Nachweise.
   ============================================================ */

/* ------------------------------------------------------------
   Hero: asymmetrische Systembühne
   ------------------------------------------------------------ */
.hero-v4 {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: #08142f;
}

.hero-v4::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(90deg, #08142f 0%, rgba(8, 20, 47, 0.98) 42%, rgba(8, 20, 47, 0.7) 68%, rgba(8, 20, 47, 0.32) 100%),
    linear-gradient(0deg, rgba(8, 20, 47, 0.96) 0%, transparent 44%);
  pointer-events: none;
}

.hero-v4::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, black, transparent 72%);
  pointer-events: none;
}

.hero-v4__media {
  position: absolute;
  inset: 0 0 0 42%;
}

.hero-v4__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}

.hero-v4__grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: clamp(560px, calc(100svh - 210px), 700px);
  grid-template-columns: minmax(0, 920px);
  align-items: center;
  padding: 64px 0 48px;
}

.hero-v4__copy {
  max-width: 920px;
}

.hero-v4 h1 {
  margin-bottom: 28px;
  color: var(--white);
  font-size: var(--fs-display-2xl);
  text-wrap: balance;
}

.hero-v4__lead {
  max-width: 680px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--fs-lead);
}

.hero-v4__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.hero-v4__textlink {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 800;
  transition: border-color var(--ease), color var(--ease);
}

.hero-v4__textlink:hover {
  color: #8be0ff;
  border-color: var(--falk-blue);
}

.hero-v4__textlink svg {
  width: 18px;
  height: 18px;
}

.hero-v4__metrics {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-v4__metric {
  display: grid;
  gap: 4px;
  padding: 28px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-v4__metric--first {
  padding-left: 0;
}

.hero-v4__metric--edge {
  border-right: 0;
}

.hero-v4__metrics strong {
  color: var(--white);
  font-size: var(--fs-display-sm);
  line-height: 1;
}

.hero-v4__metrics strong span {
  color: var(--falk-blue);
}

.hero-v4__metrics small {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* ------------------------------------------------------------
   Unternehmensprofil und Prozesslinie
   ------------------------------------------------------------ */
.v4-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 64px;
  align-items: center;
}

.v4-intro__copy {
  min-width: 0;
}

.v4-intro__copy h2 {
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

.v4-intro__copy > p:not(.eyebrow) {
  max-width: 620px;
}

.v4-intro__figure {
  position: relative;
  min-height: 440px;
  margin: 0;
  isolation: isolate;
}

.v4-intro__figure::before,
.v4-intro__figure::after {
  position: absolute;
  z-index: 2;
  width: 26%;
  height: 22%;
  content: "";
  pointer-events: none;
}

.v4-intro__figure::before {
  top: 28px;
  left: -12px;
  border-top: 2px solid var(--falk-blue);
  border-left: 2px solid var(--falk-blue);
}

.v4-intro__figure::after {
  right: -12px;
  bottom: 28px;
  border-right: 2px solid var(--falk-blue);
  border-bottom: 2px solid var(--falk-blue);
}

.v4-intro__figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.v4-intro__figure figcaption {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 24px;
  display: grid;
  max-width: 300px;
  gap: 4px;
  padding: 20px 24px;
  border-left: 3px solid var(--falk-blue);
  color: var(--white);
  background: rgba(8, 20, 47, 0.9);
  backdrop-filter: blur(10px);
}

.v4-intro__figure figcaption span {
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v4-intro__figure figcaption strong {
  font-size: var(--fs-large);
  line-height: var(--lh-heading);
}

.v4-intro__process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 80px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.v4-intro__process li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 28px 24px 0 0;
}

.v4-intro__process li::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 48px;
  height: 3px;
  content: "";
  background: var(--falk-blue);
}

.v4-intro__process span {
  margin-bottom: 12px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
}

.v4-intro__process strong {
  color: var(--ink);
  font-size: var(--fs-large);
}

.v4-intro__process small {
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* ------------------------------------------------------------
   Leistungen als Index
   ------------------------------------------------------------ */
.v4-services__layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 80px;
  align-items: start;
}

.v4-services__intro {
  position: sticky;
  top: 120px;
}

.v4-services__intro h2 {
  text-wrap: balance;
}

.v4-services__intro .btn {
  margin-top: 20px;
}

.v4-services__list {
  border-top: 1px solid var(--line-strong);
}

.v4-service {
  display: grid;
  min-height: 112px;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 20px;
  align-items: center;
  padding: 24px 16px;
  border-bottom: 1px solid var(--line);
  transition: color var(--ease), background-color var(--ease), padding-left var(--ease);
}

.v4-service:hover {
  padding-left: 24px;
  color: var(--falk-navy);
  background: var(--white);
}

.v4-service__body {
  display: grid;
  gap: 8px;
}

.v4-service__body strong {
  color: var(--ink);
  font-size: var(--fs-large);
  line-height: var(--lh-heading);
}

.v4-service__body small {
  color: var(--muted);
  font-size: var(--fs-meta);
}

.v4-service > svg {
  width: 20px;
  height: 20px;
  color: var(--falk-navy);
  transition: transform var(--ease), color var(--ease);
}

.v4-service:hover > svg {
  color: var(--falk-blue);
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   SCADA-Systemarchitektur
   ------------------------------------------------------------ */
.v4-scada {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 160, 227, 0.15), transparent 32%),
    linear-gradient(135deg, #07142f 0%, var(--navy-deep) 58%, #142f70 100%);
}

.v4-scada::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.v4-scada__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(480px, 1.2fr);
  gap: 64px;
  align-items: center;
}

.v4-scada__copy h2 {
  text-wrap: balance;
}

.v4-scada__benefits {
  display: grid;
  gap: 12px;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
}

.v4-scada__benefits li {
  position: relative;
  padding-left: 28px;
  color: rgba(255, 255, 255, 0.76);
}

.v4-scada__benefits li::before {
  position: absolute;
  top: 10px;
  left: 0;
  width: 12px;
  height: 2px;
  content: "";
  background: var(--falk-blue);
}

.link-arrow--light {
  color: var(--white);
}

.v4-systemmap {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
}

.v4-systemmap__interfaces {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: 20px;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(3, 11, 28, 0.46);
}

.v4-systemmap__interface-copy {
  display: grid;
  gap: 4px;
}

.v4-systemmap__interface-copy span {
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v4-systemmap__interface-copy small {
  color: rgba(255, 255, 255, 0.48);
  font-size: var(--fs-small);
}

.v4-systemmap__interface-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.v4-systemmap__interface-list strong {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-small);
}

.v4-systemmap__connector {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 24px;
}

.v4-systemmap__connector i {
  border-top: 1px dashed rgba(0, 160, 227, 0.36);
}

.v4-systemmap__connector span {
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.v4-systemmap__core {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
}

.v4-systemmap__rail {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(0, 160, 227, 0.28);
  background: rgba(0, 160, 227, 0.08);
}

.v4-systemmap__rail span {
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.v4-systemmap__layers {
  display: grid;
  gap: 4px;
  padding: 12px 20px;
}

.v4-systemmap__layer {
  display: grid;
  min-height: 86px;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-left: 2px solid rgba(0, 160, 227, 0.42);
  background: rgba(255, 255, 255, 0.045);
}

.v4-systemmap__layer--data {
  border-left-color: #55dca2;
  background: rgba(85, 220, 162, 0.075);
}

.v4-systemmap__foundation {
  display: grid;
  gap: 4px;
  padding: 0 20px 20px 64px;
}

.v4-systemmap__layer--field {
  border-left-color: rgba(0, 160, 227, 0.72);
  background: rgba(0, 160, 227, 0.065);
}

.v4-systemmap__layer--machine {
  border-left-color: var(--falk-blue);
  background: rgba(0, 160, 227, 0.11);
}

.v4-systemmap__layer > span {
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
}

.v4-systemmap__layer div {
  display: grid;
  gap: 4px;
}

.v4-systemmap__layer strong {
  color: var(--white);
  font-size: var(--fs-large);
}

.v4-systemmap__layer small {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------
   Produktindex
   ------------------------------------------------------------ */
.v4-products__head {
  display: grid;
  gap: 16px;
  margin-bottom: 56px;
}

.v4-products__head h2,
.v4-products__head .lead {
  margin-bottom: 0;
}

.v4-products__head .lead {
  max-width: 760px;
}

.v4-products__index {
  border-top: 1px solid var(--line-strong);
}

.v4-product {
  display: grid;
  grid-template-columns: minmax(140px, 0.38fr) minmax(0, 1fr) 44px;
  gap: 24px;
  align-items: center;
  padding: 28px 20px;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--ease), color var(--ease);
}

.v4-product:hover,
.v4-product--featured {
  background: var(--soft);
}

.v4-product__meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v4-product__content {
  display: grid;
  gap: 8px;
}

.v4-product__content strong {
  color: var(--ink);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-heading);
}

.v4-product__content small {
  max-width: 680px;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.v4-product__arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--falk-navy);
  background: var(--white);
  transition: border-color var(--ease), background-color var(--ease), color var(--ease);
}

.v4-product__arrow svg {
  width: 18px;
  height: 18px;
}

.v4-product:hover .v4-product__arrow {
  color: var(--white);
  border-color: var(--falk-navy);
  background: var(--falk-navy);
}

/* ------------------------------------------------------------
   Nachweise und Wissensverteiler
   ------------------------------------------------------------ */
.v4-proof__head {
  display: grid;
  gap: 16px;
  margin-bottom: 48px;
}

.v4-proof__head h2,
.v4-proof__head .lead {
  margin-bottom: 0;
}

.v4-proof__head .lead {
  max-width: 760px;
}

.v4-proof__primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.v4-proofcard {
  position: relative;
  display: grid;
  min-height: 220px;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 20px;
  align-items: start;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}

.v4-proofcard--lead {
  min-height: 456px;
  grid-row: span 2;
  align-content: end;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  border-color: transparent;
  background: #0a1838;
}

.v4-proofcard--lead::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(180deg, rgba(5, 15, 38, 0.08) 0%, rgba(8, 20, 47, 0.42) 42%, rgba(8, 20, 47, 0.96) 100%),
    linear-gradient(90deg, rgba(34, 58, 142, 0.5), rgba(0, 160, 227, 0.08));
  pointer-events: none;
}

.v4-proofcard__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
}

.v4-proofcard > div,
.v4-proofcard > svg {
  position: relative;
  z-index: 2;
}

.v4-proofcard:hover {
  border-color: rgba(0, 160, 227, 0.42);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.v4-proofcard--lead:hover .v4-proofcard__image {
  transform: scale(1.025);
}

.v4-proofcard div {
  align-self: end;
}

.v4-proofcard p {
  margin-bottom: 12px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v4-proofcard h3 {
  color: var(--ink);
  font-size: var(--fs-display-sm);
}

.v4-proofcard div > span {
  color: var(--muted);
  font-size: var(--fs-meta);
}

.v4-proofcard > svg {
  width: 24px;
  height: 24px;
  color: var(--falk-navy);
  transition: color var(--ease), transform var(--ease);
}

.v4-proofcard:hover > svg {
  color: var(--falk-blue);
  transform: translateX(4px);
}

.v4-proofcard--lead p,
.v4-proofcard--lead h3,
.v4-proofcard--lead > svg {
  color: var(--white);
}

.v4-proofcard--lead h3 {
  font-size: var(--fs-display);
}

.v4-proofcard--lead div > span {
  color: rgba(255, 255, 255, 0.68);
}

.v4-proof__secondary {
  display: grid;
  /* Nicht auf drei Eintraege festgelegt: auto-fit legt so viele Spalten
     an, wie Eintraege vorhanden sind und nebeneinander passen. Bei drei
     Eintraegen ergibt das exakt die bisherige Aufteilung. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 24px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.v4-proof__secondary a {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 800;
  transition: color var(--ease), background-color var(--ease);
}

.v4-proof__secondary a:last-child {
  border-right: 0;
}

.v4-proof__secondary a:hover {
  color: var(--falk-navy);
  background: var(--white);
}

.v4-proof__secondary b {
  color: var(--falk-blue);
  font-size: var(--fs-large);
}

/* ------------------------------------------------------------
   Kontaktabschluss
   ------------------------------------------------------------ */
.v4-contact {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  color: var(--white);
  background:
    radial-gradient(circle at 18% 110%, rgba(0, 160, 227, 0.24), transparent 34%),
    linear-gradient(120deg, #07142f 0%, var(--falk-navy) 100%);
}

.v4-contact::after {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 56px rgba(255, 255, 255, 0.025), 0 0 0 112px rgba(255, 255, 255, 0.018);
  pointer-events: none;
}

.v4-contact__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.68fr);
  gap: 80px;
  align-items: center;
}

.v4-contact__copy h2 {
  max-width: 760px;
  color: var(--white);
  text-wrap: balance;
}

.v4-contact__copy > p:last-child {
  max-width: 720px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-lead);
}

.v4-contact__action {
  padding: 40px;
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--white);
  box-shadow: 0 24px 80px rgba(3, 9, 24, 0.3);
}

.v4-contact__label {
  margin-bottom: 16px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.v4-contact__action h3 {
  font-size: var(--fs-display-sm);
}

.v4-contact__action > p:not(.v4-contact__label) {
  margin-bottom: 24px;
  color: var(--muted);
}

/* ------------------------------------------------------------
   Bildgetragene Branchen-Hierarchie mit V1-Chips
   ------------------------------------------------------------ */
.v4-industries__layout {
  display: grid;
  grid-template-areas: "image copy";
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: 56px;
  align-items: center;
}

.v4-industries__copy {
  grid-area: copy;
}

.v4-industries__copy h2 {
  font-size: var(--fs-h2-md);
}

.v4-industries__image {
  position: relative;
  grid-area: image;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg) 140px var(--radius-lg) var(--radius-lg);
  background: var(--soft-2);
}

.v4-industries__image img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center 42%;
}

.v4-industries .industry {
  transition: color var(--ease), border-color var(--ease),
    background-color var(--ease), transform var(--ease);
}

.v4-industries .industry:hover {
  color: var(--white);
  border-color: var(--falk-navy);
  background: var(--falk-navy);
  transform: translateY(-2px);
}

.faq--v4 .faq__intro {
  position: sticky;
  top: 120px;
  align-self: start;
}

/* ------------------------------------------------------------
   Gemeinsame Interaktionszustände und responsive Anpassungen
   ------------------------------------------------------------ */
.hero-v4 a:focus-visible,
.v4-intro a:focus-visible,
.v4-services a:focus-visible,
.v4-scada a:focus-visible,
.v4-products a:focus-visible,
.v4-proof a:focus-visible,
.v4-contact a:focus-visible,
.v4-industries a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

@media (max-width: 1080px) {
  .hero-v4__grid {
    grid-template-columns: 1fr;
  }

  .hero-v4__copy {
    max-width: 820px;
  }

  .hero-v4 h1 {
    font-size: var(--fs-h1-md);
  }

  .v4-intro__grid,
  .v4-scada__layout,
  .v4-contact__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .v4-services__layout {
    grid-template-columns: minmax(240px, 0.64fr) minmax(0, 1.36fr);
    gap: 48px;
  }

  .v4-products__head,
  .v4-proof__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .v4-contact__action {
    max-width: 620px;
  }

  .v4-industries__layout {
    grid-template-areas:
      "copy"
      "image";
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .v4-industries__image,
  .v4-industries__image img {
    min-height: 360px;
  }

  .faq--v4 .faq__intro {
    position: static;
  }
}

@media (max-width: 760px) {
  .hero-v4__media {
    inset: 0;
  }

  .hero-v4::before {
    background: linear-gradient(0deg, rgba(8, 20, 47, 0.98) 0%, rgba(8, 20, 47, 0.86) 68%, rgba(8, 20, 47, 0.62) 100%);
  }

  .hero-v4__grid {
    min-height: auto;
    padding: 64px 0 48px;
  }

  .hero-v4 h1 {
    font-size: var(--fs-h1-sm);
  }

  .hero-v4__lead {
    font-size: var(--fs-body);
  }

  .hero-v4__actions {
    align-items: stretch;
  }

  .hero-v4__actions .btn {
    width: 100%;
  }

  .hero-v4__textlink {
    justify-content: center;
  }

  .hero-v4__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-v4__metric,
  .hero-v4__metric--first {
    padding: 24px 16px;
  }

  .hero-v4__metric--edge {
    border-right: 0;
  }

  .hero-v4__metric--top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .v4-intro__grid {
    gap: 40px;
  }

  .v4-intro__figure,
  .v4-intro__figure img {
    min-height: 300px;
  }

  .v4-intro__figure::before {
    top: 20px;
    left: -8px;
  }

  .v4-intro__figure::after {
    right: -8px;
    bottom: 20px;
  }

  .v4-intro__figure figcaption {
    right: 16px;
    bottom: 16px;
    left: 16px;
    max-width: none;
  }

  .v4-intro__process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
    margin-top: 56px;
    border-top: 0;
  }

  .v4-intro__process li {
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }

  .v4-services__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .v4-services__intro {
    position: static;
  }

  .v4-service {
    min-height: 96px;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 12px;
    padding: 20px 0;
  }

  .v4-service:hover {
    padding-left: 0;
    background: transparent;
  }

  .v4-service__body small {
    display: none;
  }

  .v4-systemmap__core {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .v4-systemmap__layers {
    padding: 12px;
  }

  .v4-systemmap__layer {
    min-height: 80px;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    padding: 12px;
  }

  .v4-systemmap__layer strong {
    font-size: var(--fs-body);
  }

  .v4-systemmap__layer small {
    font-size: var(--fs-label);
  }

  .v4-systemmap__interfaces {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .v4-systemmap__interface-list {
    justify-content: flex-start;
  }

  .v4-systemmap__connector {
    gap: 8px;
    padding: 8px 12px;
  }

  .v4-systemmap__foundation {
    padding: 0 12px 12px 48px;
  }

  .v4-products__head,
  .v4-proof__head {
    margin-bottom: 40px;
  }

  .v4-product {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 12px;
    padding: 24px 0;
  }

  .v4-product__meta {
    display: none;
  }

  .v4-product__content strong {
    font-size: var(--fs-large);
  }

  .v4-product__arrow {
    width: 36px;
    height: 36px;
  }

  .v4-proof__primary {
    grid-template-columns: 1fr;
  }

  .v4-proofcard,
  .v4-proofcard--lead {
    min-height: 260px;
    grid-row: auto;
    padding: 24px;
  }

  .v4-proof__secondary {
    grid-template-columns: 1fr;
  }

  .v4-proof__secondary a {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .v4-proof__secondary a:last-child {
    border-bottom: 0;
  }

  .v4-contact {
    padding: 64px 0;
  }

  .v4-contact__layout {
    gap: 48px;
  }

  .v4-contact__action {
    padding: 28px;
  }

  .branchen h2 {
    font-size: var(--fs-h2-sm);
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .v4-industries h2 {
    font-size: var(--fs-h2-sm);
    hyphens: manual;
    overflow-wrap: normal;
  }

  .v4-industries__image {
    min-height: 260px;
    border-radius: var(--radius) 64px var(--radius) var(--radius);
  }

  .v4-industries__image img {
    min-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v4-service,
  .v4-service > svg,
  .v4-product,
  .v4-product__arrow,
  .v4-proofcard,
  .v4-proofcard > svg,
  .v4-proofcard__image {
    transition: none;
  }
}


/* ==== assets/css/components/scada-schwerpunkt.css ==== */
/* ============================================================
   SCADA-Schwerpunkt

   Der Verweis auf Leitsysteme & SCADA. Ein Baustein, zwei Füllungen:

     Lösungsübersicht    Text, Kette, Schnittstellenleiste und die
                         Vorteilsliste – dort ist SCADA ein eigener
                         Schwerpunkt.
     Lösungsdetailseite  nur Text und Kette – dort ist SCADA ein
                         Querverweis und soll das Seitenthema nicht
                         überstrahlen.

   Die Kette ist in beiden Fällen dieselbe: SPS/PLC, HMI, SCADA,
   Prozessdaten. Genau daran erkennt man die beiden Seiten als
   Teil derselben Aussage wieder.

   Schnittstellenleiste, Vorteilsliste und Schlusszeile sind
   optional – der Baustein funktioniert mit und ohne sie.
   ============================================================ */
.solution-scada__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(480px, 1.12fr);
  gap: 80px;
  align-items: center;
}

.solution-scada__copy h2 {
  text-wrap: balance;
}

.solution-scada__copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.7);
}

.solution-scada__copy .btn {
  margin-top: 20px;
}

.solution-scada__figure {
  position: relative;
  margin: 0;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(5, 14, 36, 0.62);
  box-shadow: 0 24px 80px rgba(3, 9, 24, 0.24);
}

.solution-scada__figure figcaption {
  margin-bottom: 28px;
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.solution-scada__chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1.18fr);
  /* stretch statt center: braucht ein Feld zwei Zeilen, werden alle
     Felder mit hoch. Sonst steht ein höheres Feld allein und die Kette
     wirkt schief. */
  align-items: stretch;
}

.solution-scada__chain div {
  display: grid;
  min-height: 112px;
  align-content: center;
  gap: 4px;
  padding: 16px;
  border: 1px solid rgba(0, 160, 227, 0.32);
  border-radius: var(--radius);
  background: rgba(0, 160, 227, 0.08);
}

.solution-scada__chain span {
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}

.solution-scada__chain strong {
  color: var(--white);
  font-size: var(--fs-meta);
  /* Lange Begriffe brechen an einem gesetzten Trennpunkt (&shy;) um,
     statt über die Kante zu laufen. Automatische Trennung ist hier
     bewusst aus: in so schmalen Feldern entstehen daraus Bruchstücke
     wie "atmosphä-re". */
  overflow-wrap: break-word;
}

.solution-scada__chain small {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-small);
}

.solution-scada__chain i {
  align-self: center;
  color: #8be0ff;
  font-size: var(--fs-large);
  font-style: normal;
  text-align: center;
}

.solution-scada__interfaces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.solution-scada__interfaces span {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.44);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solution-scada__interfaces strong {
  padding: 8px 12px;
  border-left: 2px solid var(--falk-blue);
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--fs-small);
}

/* Die Vorteilsliste nutzt den gemeinsamen Haken-Baustein; hier steht
   nur, wie sie im Schwerpunkt sitzt. */
.solution-scada__benefits {
  margin: 56px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.solution-scada__note {
  max-width: 620px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-meta);
}

.solution-scada a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

@media (max-width: 1080px) {
  .solution-scada__layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .solution-scada__figure {
    max-width: 820px;
  }
}

@media (max-width: 760px) {
  .solution-scada__figure {
    padding: 24px;
  }

  .solution-scada__chain {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .solution-scada__chain div {
    min-height: 88px;
  }

  .solution-scada__chain i {
    transform: rotate(90deg);
  }

  .solution-scada__interfaces {
    grid-template-columns: 1fr;
  }
}


/* ==== assets/css/components/loesungsseite.css ==== */
/* ============================================================
   Lösungsübersicht

   Technische Verteilerseite auf Grundlage von
   Texte/02_00_Loesungen_Übersicht.docx. Die Grafikmodule bestehen
   aus HTML, CSS und Inline-SVG und bleiben dadurch redaktionell,
   responsiv und für die spätere WordPress-Übernahme nutzbar.
   ============================================================ */

/* ------------------------------------------------------------
   Kompetenzverbund
   ------------------------------------------------------------ */
.solution-competence__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 80px;
  align-items: center;
}

.solution-competence__copy {
  min-width: 0;
}

.solution-competence__copy h2 {
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.solution-competence__copy > p:not(.eyebrow) {
  max-width: 680px;
}

.solution-competence__copy > p:last-child {
  margin-bottom: 0;
}

.solution-competence__map {
  position: relative;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft);
}

.solution-competence__map::after {
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 55px;
  width: 1px;
  content: "";
  background: rgba(0, 160, 227, 0.32);
}

.solution-competence__label {
  margin-bottom: 20px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solution-competence__map ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solution-competence__map li {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 72px;
  grid-template-columns: 48px minmax(112px, 0.48fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.solution-competence__map li:last-child {
  border-bottom: 0;
}

.solution-competence__map li > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(0, 160, 227, 0.3);
  border-radius: 50%;
  color: var(--falk-blue);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
}

.solution-competence__map strong {
  color: var(--ink);
  font-size: var(--fs-meta);
}

.solution-competence__map small {
  color: var(--muted);
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------
   Projektanlässe
   ------------------------------------------------------------ */
.solution-needs__head {
  margin-bottom: 48px;
}

.solution-needs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.solution-need {
  display: flex;
  min-width: 0;
  min-height: 300px;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.solution-need__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.solution-need__meta span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--falk-navy);
}

.solution-need h3 {
  max-width: 520px;
  font-size: var(--fs-display-sm);
}

.solution-need > p:not(.solution-need__meta) {
  max-width: 620px;
  flex: 1;
  color: var(--muted);
}

.solution-need__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.solution-need__tags a {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  color: var(--falk-navy);
  background: var(--soft-2);
  font-size: var(--fs-label);
  font-weight: 700;
  transition: color var(--ease), background-color var(--ease);
}

.solution-need__tags a:hover {
  color: var(--white);
  background: var(--falk-navy);
}


/* ------------------------------------------------------------
   Projektablauf
   ------------------------------------------------------------ */
.solution-process__head {
  margin-bottom: 48px;
}

.solution-process__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 40px;
  align-items: start;
}

.solution-process__steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solution-process__steps > li {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.solution-process__steps > li::after {
  position: absolute;
  bottom: -16px;
  left: 59px;
  width: 1px;
  height: 16px;
  content: "";
  background: var(--falk-blue);
}

.solution-process__steps > li:last-child::after {
  display: none;
}

.solution-process__nr {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: var(--radius);
  color: var(--white);
  background: var(--navy-deep);
  box-shadow: 0 12px 28px rgba(15, 30, 70, 0.18);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 800;
}

.solution-process__steps h3 {
  margin-bottom: 8px;
}

.solution-process__steps li > div > p {
  margin-bottom: 0;
  color: var(--muted);
}

.solution-process__aside {
  position: sticky;
  top: 120px;
  padding: 32px;
  border-radius: var(--radius-lg);
  color: var(--white);
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 160, 227, 0.24), transparent 36%),
    var(--navy-deep);
  box-shadow: var(--shadow);
}

.solution-process__aside-label {
  margin-bottom: 16px;
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solution-process__aside h3 {
  color: var(--white);
  font-size: var(--fs-display-sm);
}

.solution-process__aside > p:not(.solution-process__aside-label) {
  color: rgba(255, 255, 255, 0.68);
}

.solution-process__aside ul {
  display: grid;
  gap: 16px;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
}

.solution-process__aside li {
  position: relative;
  padding-left: 28px;
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--fs-meta);
}

.solution-process__aside li::before {
  position: absolute;
  top: 4px;
  left: 0;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  content: "✓";
  border-radius: 50%;
  color: var(--white);
  background: rgba(255, 255, 255, 0.16);
  font-size: var(--fs-label);
  font-weight: 800;
}

/* Helle Alternative für Inhaltsseiten, auf denen die dunkle Bühne
   zu viel Gewicht bekommt. Struktur und Inhalte bleiben identisch. */
.solution-process--friendly .solution-process__steps > li {
  border-color: rgba(0, 160, 227, 0.22);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(34, 58, 142, 0.06);
}

.solution-process--friendly .solution-process__nr {
  color: var(--falk-navy);
  border: 1px solid rgba(0, 160, 227, 0.32);
  background: rgba(0, 160, 227, 0.08);
  box-shadow: none;
}

.solution-process--friendly .solution-process__steps > li::after {
  background: rgba(0, 160, 227, 0.48);
}

.solution-process--friendly .solution-process__aside {
  overflow: hidden;
  color: var(--text);
  border: 1px solid rgba(0, 160, 227, 0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 160, 227, 0.12), transparent 38%),
    linear-gradient(145deg, var(--white), #eef8fc);
  box-shadow: 0 18px 48px rgba(34, 58, 142, 0.1);
}

.solution-process--friendly .solution-process__aside::before {
  position: absolute;
  top: 0;
  left: 32px;
  width: 80px;
  height: 3px;
  content: "";
  background: var(--falk-blue);
}

.solution-process--friendly .solution-process__aside-label {
  color: var(--falk-navy);
}

.solution-process--friendly .solution-process__aside h3 {
  color: var(--ink);
}

.solution-process--friendly .solution-process__aside > p:not(.solution-process__aside-label) {
  color: var(--muted);
}

.solution-process--friendly .solution-process__aside li {
  color: var(--text);
}

.solution-process--friendly .solution-process__aside li::before {
  color: var(--falk-navy);
  background: rgba(0, 160, 227, 0.14);
}

/* ------------------------------------------------------------
   Eigenentwicklungen im Lösungskontext
   ------------------------------------------------------------ */
.solution-products__head {
  margin-bottom: 48px;
}

.solution-products__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px;
}

.solution-product {
  display: grid;
  min-width: 0;
  min-height: 180px;
  grid-column: 2;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-content: center;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.solution-product:hover {
  border-color: rgba(0, 160, 227, 0.48);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.solution-product--featured {
  position: relative;
  min-height: 572px;
  grid-row: 1 / span 3;
  grid-column: 1;
  align-content: end;
  overflow: hidden;
  padding: 40px;
  color: var(--white);
  border-color: transparent;
  background:
    radial-gradient(circle at 74% 18%, rgba(0, 160, 227, 0.28), transparent 30%),
    linear-gradient(135deg, #0a1838, var(--falk-navy));
}

.solution-product--featured::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.solution-product__meta,
.solution-product__body,
.solution-product__link,
.solution-product__symbol {
  position: relative;
  z-index: 1;
}

.solution-product__meta {
  grid-column: 1 / -1;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solution-product__symbol {
  position: absolute;
  top: 40px;
  right: 40px;
  display: grid;
  width: 200px;
  height: 200px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #8be0ff;
  background: rgba(255, 255, 255, 0.04);
}

.solution-product__symbol svg {
  width: 112px;
  height: 112px;
}

.solution-product__body {
  display: grid;
  gap: 8px;
}

.solution-product__body strong {
  color: var(--ink);
  font-size: var(--fs-large);
  line-height: var(--lh-heading);
}

.solution-product--featured .solution-product__body strong {
  color: var(--white);
  font-size: var(--fs-display);
}

.solution-product__body small {
  max-width: 600px;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.solution-product--featured .solution-product__body small {
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--fs-body);
}

.solution-product__link {
  align-self: end;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 800;
  white-space: nowrap;
}

.solution-product--featured .solution-product__link {
  grid-column: 1 / -1;
  margin-top: 16px;
  color: #8be0ff;
}

.solution-product__link b {
  display: inline-block;
  margin-left: 8px;
  transition: transform var(--ease);
}

.solution-product:hover .solution-product__link b {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   FAQ und Kontaktabschluss
   ------------------------------------------------------------ */
.faq--solution .faq__intro {
  position: sticky;
  top: 120px;
  align-self: start;
}

.solution-contact__buttons {
  display: grid;
  gap: 12px;
}

.solution-contact__buttons .btn {
  width: 100%;
}

.solution-contact__buttons .btn--outline-dark {
  min-height: 56px;
}

.solution-need__tags a:focus-visible,
.solution-product:focus-visible,
.solution-process a:focus-visible,
.solution-contact a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

/* ------------------------------------------------------------
   Responsive Anpassungen
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .solution-competence__layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .solution-competence__map {
    max-width: 820px;
  }

  .solution-process__layout {
    grid-template-columns: 1fr;
  }

  .solution-process__aside {
    position: static;
  }

  .solution-products__grid {
    grid-template-columns: 1fr;
  }

  .solution-product,
  .solution-product--featured {
    grid-column: 1;
  }

  .solution-product--featured {
    min-height: 480px;
    grid-row: auto;
  }

  .faq--solution .faq__intro {
    position: static;
  }
}

@media (max-width: 760px) {
  .solution-competence__map,
  .solution-process__aside {
    padding: 24px;
  }

  .solution-competence__map::after {
    left: 47px;
  }

  .solution-competence__map li {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .solution-competence__map li small {
    grid-column: 2;
  }

  .solution-needs__grid {
    grid-template-columns: 1fr;
  }

  .solution-need h3 {
    font-size: var(--fs-large);
  }

  .solution-need {
    min-height: 0;
    padding: 24px;
  }

  .solution-process__steps > li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    padding: 24px;
  }

  .solution-process__nr {
    width: 48px;
    height: 48px;
  }

  .solution-process__steps > li::after {
    left: 47px;
  }

  .solution-product {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .solution-product--featured {
    min-height: 440px;
    padding: 28px;
  }

  .solution-product__symbol {
    top: 28px;
    right: 28px;
    width: 160px;
    height: 160px;
  }

  .solution-product__symbol svg {
    width: 96px;
    height: 96px;
  }

  .solution-product__link {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .solution-process__steps > li {
    grid-template-columns: 1fr;
  }

  .solution-process__steps > li::after {
    left: 47px;
  }

  .solution-product--featured {
    min-height: 480px;
  }

  .solution-product__symbol {
    width: 128px;
    height: 128px;
  }

  .solution-product__symbol svg {
    width: 80px;
    height: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solution-need__tags a,
  .solution-product,
  .solution-product__link b {
    transition: none;
  }
}

/* ============================================================
   Lösungsübersicht V2: funktionale Seitenzonen

   Die finale Produktübersicht trennt nicht jeden Baustein einzeln,
   sondern bündelt gleichartige Verweise. V2 überträgt dieses Prinzip:
   Kompetenz und Lösungsarchitektur bilden eine Orientierungszone;
   Produkte und Branchen eine gemeinsame Anschlusszone. Nachweise,
   Kontakt und FAQ folgen demselben ruhigen Flächenrhythmus.
   ============================================================ */

.solution-overview {
  --solution-overview-grid-size: 56px;
  --solution-architecture-cutoff: 392px;
}

.solution-overview main {
  background: var(--white);
}

.solution-overview .subpage-hero .hero__media::after {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 16, 40, 0.96) 0%, rgba(10, 31, 70, 0.9) 54%, rgba(34, 58, 142, 0.7) 100%);
  background-size: var(--solution-overview-grid-size) var(--solution-overview-grid-size), var(--solution-overview-grid-size) var(--solution-overview-grid-size), auto;
}

/* Der Kompetenzverbund führt auf einer hellen Rasterfläche ein. Der
   cyanfarbene Schein rechts oben liegt hinter der Kompetenzkarte und
   gibt dem Einstieg dieselbe Anmutung wie die Einleitung der
   Produktübersicht. Er ist die einzige Lichtquelle der Seite und
   sitzt bewusst dort, wo kein Raster tragen muss. */
.solution-overview .solution-competence {
  background:
    radial-gradient(ellipse at 86% 24%, rgba(0, 160, 227, 0.16), transparent 40%),
    linear-gradient(90deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    #f7fafc;
  background-size: auto, var(--solution-overview-grid-size) var(--solution-overview-grid-size), var(--solution-overview-grid-size) var(--solution-overview-grid-size), auto;
}

/* Die Kernaussage aus den Positionierungsbausteinen. Sie steht auf
   jeder Übersichtsseite an derselben Stelle: als letzter Absatz der
   Einleitung, abgesetzt durch Fläche und cyanfarbene Kante.
   Entspricht .product-origin__claim auf der Produktübersicht. */
.solution-competence__claim {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  background: rgba(237, 246, 250, 0.84);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
}

.solution-overview .solution-competence {
  padding-bottom: 64px;
}

.solution-overview .solution-competence__map {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 56px rgba(15, 30, 70, 0.09);
}

/* Die Lösungsarchitektur übernimmt die Bühnenlogik der Produktliste:
   blaues Kopfband, durchgehendes Raster und eine deckend weiße Tafel,
   die in den hellen unteren Teil der Sektion hineinragt. */
.solution-overview .solution-architecture {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--section-space) 0;
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #0c1d43 0 var(--solution-architecture-cutoff), #eaf1f6 var(--solution-architecture-cutoff) 100%);
  background-size: var(--solution-overview-grid-size) var(--solution-overview-grid-size), var(--solution-overview-grid-size) var(--solution-overview-grid-size), auto;
}

.solution-overview .solution-architecture__head .eyebrow,
.solution-overview .solution-architecture__head h2 {
  color: var(--white);
}

.solution-overview .solution-architecture__head .eyebrow::after {
  background: var(--falk-blue);
}

.solution-overview .solution-architecture__head .lead {
  color: rgba(255, 255, 255, 0.72);
}

.solution-overview .solution-architecture__board {
  overflow: hidden;
  border: 1px solid rgba(198, 205, 216, 0.8);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.18);
}

.solution-overview .solution-architecture__group-head {
  padding-left: 32px;
}

.solution-overview .solution-architecture__group:last-child {
  border-bottom: 0;
}

.solution-overview .solution-path::before {
  border-color: var(--white);
}

.solution-overview .solution-path:hover {
  background: #edf8fc;
}

/* Projektanlässe folgen unmittelbar auf die helle Hälfte der
   Lösungstafel. Zwei ruhige Flächen hintereinander wären dort nicht
   voneinander zu trennen, deshalb tragen sie das Raster: ihre Karten
   sind Tafeln, und das Raster endet an deren Kante. Weiß gegen die
   kühlere Tafelhälfte darüber setzt den zweiten Schritt – die Kante
   trägt damit einen Ton- und einen Texturwechsel.
   Die Ziffern sind keine Reihenfolge. */
.solution-overview .solution-needs {
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.05) 1px, transparent 1px),
    var(--white);
  background-size: var(--solution-overview-grid-size) var(--solution-overview-grid-size), var(--solution-overview-grid-size) var(--solution-overview-grid-size), auto;
}

.solution-overview .solution-need__meta span {
  display: none;
}

/* Der SCADA-Schwerpunkt übernimmt das Navy und dieselbe Rasterweite
   wie die übrigen technischen Bühnen. */
.solution-overview .solution-scada {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    #0c1d43;
  background-size: var(--solution-overview-grid-size) var(--solution-overview-grid-size), var(--solution-overview-grid-size) var(--solution-overview-grid-size), auto;
}

/* Der interaktive Projektablauf bringt eine 135°-Diagonale mit; auf
   einer Seite mit durchgehender Flächensystematik ist das eine
   Lichtquelle zu viel. Ruhiges Weiß zwischen der dunklen SCADA-Bühne
   darüber und den Eigenentwicklungen darunter. */
.solution-overview .process-explorer-section {
  background: var(--white);
}

/* Anschlusszone: Eigenentwicklungen und Branchen stehen gemeinsam
   auf einer dunklen Verteilerfläche. */
.solution-overview .solution-connections {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.09) 1px, transparent 1px),
    #0c1d43;
  background-size: var(--solution-overview-grid-size) var(--solution-overview-grid-size), var(--solution-overview-grid-size) var(--solution-overview-grid-size), auto;
}

.solution-overview .solution-connections .solution-products__head .eyebrow,
.solution-overview .solution-connections .solution-products__head h2 {
  color: var(--white);
}

.solution-overview .solution-connections .solution-products__head .eyebrow::after {
  background: var(--falk-blue);
}

.solution-overview .solution-connections .solution-products__head .lead {
  color: rgba(255, 255, 255, 0.68);
}

.solution-overview .solution-connections .solution-product {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.14);
  background: #0c1d43;
  box-shadow: none;
}

.solution-overview .solution-connections .solution-product:hover {
  border-color: rgba(0, 160, 227, 0.52);
  background:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
    #0c1d43;
}

.solution-overview .solution-connections .solution-product--featured {
  background: #162b61;
}

.solution-overview .solution-connections .solution-product--featured::before {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px);
  background-size: var(--solution-overview-grid-size) var(--solution-overview-grid-size);
  -webkit-mask-image: none;
  mask-image: none;
}

.solution-overview .solution-connections .solution-product__body strong {
  color: var(--white);
}

.solution-overview .solution-connections .solution-product__body small {
  color: rgba(255, 255, 255, 0.64);
}

.solution-overview .solution-connections .solution-product__link {
  color: #8be0ff;
}

.solution-overview .solution-connections .solution-product--industries {
  min-height: 0;
  grid-column: 1 / -1;
  grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}

.solution-overview .solution-connections .solution-product--industries .solution-product__meta {
  grid-column: auto;
}

.solution-overview .solution-connections .solution-product--industries .solution-product__body strong {
  font-size: var(--fs-large);
}

/* Nachweise bleiben wie auf der finalen Produktübersicht rasterlos. */
.solution-overview .v4-proof {
  padding: var(--section-space) 0;
  background: var(--soft);
}

.solution-overview .solution-contact {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    #0c1d43;
  background-size: var(--solution-overview-grid-size) var(--solution-overview-grid-size), var(--solution-overview-grid-size) var(--solution-overview-grid-size), auto;
}

.solution-overview .solution-contact::after {
  display: none;
}

.solution-overview #faq {
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    var(--white);
  background-size: var(--solution-overview-grid-size) var(--solution-overview-grid-size), var(--solution-overview-grid-size) var(--solution-overview-grid-size), auto;
}

.solution-overview #faq .faq__list {
  gap: 12px;
  border-top: 0;
}

.solution-overview #faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
}

.solution-overview #faq details[open] {
  border-color: rgba(0, 160, 227, 0.38);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.08);
}

.solution-overview #faq .faq--luftig summary {
  padding: 24px 28px;
}

.solution-overview #faq .faq--luftig details p {
  padding: 0 64px 24px 28px;
}

@media (max-width: 1080px) {
  .solution-overview .solution-connections .solution-product--industries {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .solution-overview .solution-connections .solution-product--industries .solution-product__meta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .solution-overview {
    --solution-overview-grid-size: 48px;
    --solution-architecture-cutoff: 448px;
  }

  .solution-overview .solution-competence {
    padding-bottom: 40px;
  }

  .solution-overview .solution-architecture {
    padding: var(--section-space-sm) 0;
  }

  .solution-overview .solution-architecture__board {
    border-radius: var(--radius);
  }

  .solution-overview .solution-architecture__group-head {
    padding: 0 24px 28px;
  }

  .solution-overview .solution-architecture__list {
    margin: 0 24px;
  }

  .solution-overview .solution-connections .solution-product--industries {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .solution-overview .solution-connections .solution-product--industries .solution-product__meta {
    grid-column: 1;
  }

  .solution-overview .v4-proof {
    padding: var(--section-space-sm) 0;
  }

  .solution-overview #faq .faq--luftig summary {
    padding: 20px;
  }

  .solution-overview #faq .faq--luftig details p {
    padding: 0 20px 20px;
  }
}

@media (max-width: 520px) {
  .solution-overview {
    --solution-architecture-cutoff: 480px;
  }
}


/* ==== assets/css/components/loesungsdetail.css ==== */
/* ============================================================
   Lösungsdetailseiten

   Gemeinsames Schema für die konkreten Lösungsseiten 02_01 bis
   02_07. Die Inhalte wechseln je Thema; Hero, Lösungsprofil,
   Leistungsindex, Projektanlässe, Technologiematrix und Querverweis
   bleiben als wiederverwendbare Muster bestehen.
   ============================================================ */

/* --- Detail-Hero: Ergänzung des gemeinsamen Unterseiten-Heros --- */
.subpage-hero--detail .subpage-hero__lead {
  max-width: 860px;
  margin-bottom: 20px;
}

.subpage-hero__benefit {
  max-width: 780px;
  margin: 0 0 32px;
  padding-left: 16px;
  border-left: 3px solid var(--falk-blue);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-body);
  font-weight: 700;
}

/* --- Lösungsprofil und zusammenhängende Kompetenzebenen --- */
.detail-profile__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  gap: 80px;
  align-items: center;
}

.detail-profile__copy > p:not(.eyebrow) {
  max-width: 680px;
}

.detail-profile__claim {
  margin-top: 32px;
  padding: 20px 24px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  background: var(--soft);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
}

.detail-system {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft);
}

.detail-system__label {
  margin: 0 0 20px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.detail-system ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.detail-system li {
  display: grid;
  grid-template-columns: 40px minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.detail-system li > span {
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
}

.detail-system strong {
  color: var(--ink);
  font-size: var(--fs-meta);
}

.detail-system small {
  color: var(--muted);
  font-size: var(--fs-small);
}

/* --- Leistungsindex: Kopfband und Tafel ---

   Dasselbe Muster wie die Produktlandschaft der Produktübersicht: der
   Abschnittskopf steht auf der dunklen Fläche, die Tafel hängt in deren
   untere Kante hinein. Wo die Kante liegt, steht in der Flächen-
   systematik am Ende dieser Datei – dort gehört sie hin, weil sie
   von der Fläche der Seite abhängt, nicht vom Baustein.

   Titel und Kurzzeile eines Bausteins stehen als ein Block hinter der
   Nummer; sie liefen vorher in zwei weit auseinanderliegenden Spalten
   und wirkten dadurch unverbunden. */

.detail-service {
  border-bottom: 1px solid var(--line);
  transition: background-color var(--ease);
}

.detail-service summary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  gap: 24px;
  align-items: start;
  padding: 28px 32px;
  cursor: pointer;
  list-style: none;
  transition: color var(--ease), background-color var(--ease);
}

.detail-service summary::-webkit-details-marker {
  display: none;
}

.detail-service__nr {
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.detail-service summary::after {
  color: var(--falk-blue);
  content: "+";
  font-size: var(--fs-large);
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.detail-service[open] summary::after {
  content: "−";
}

.detail-service summary:hover {
  color: var(--falk-navy);
  background: var(--soft);
}

/* Der geöffnete Baustein bekommt innerhalb der Tafel eine eigene
   Fläche und die blaue Kante der Seite. */
.detail-service[open] {
  background: var(--soft);
  box-shadow: inset 3px 0 0 var(--falk-blue);
}

.detail-service h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-large);
}

.detail-service summary small {
  display: block;
  max-width: 720px;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
}

.detail-service[open] summary h3 {
  color: var(--falk-navy);
}

.detail-service__body {
  padding: 0 56px 28px 80px;
}

.detail-service__body p {
  max-width: 760px;
  color: var(--text);
}

/* Vier Stichworte je Baustein: was beim Öffnen konkret dazukommt. */
.detail-service__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 20px;
}

.detail-service__tags span {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 700;
}

.detail-service__body a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 800;
}

.detail-service__body a::after {
  content: "→";
  color: var(--falk-blue);
}

.detail-services__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: center;
  padding: 28px 32px;
}

.detail-services__foot p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* --- Projektanlässe: sechs Karten auf einer Schiene ---

   Vorher standen Anlass, Frage und Beitrag in drei Textspalten je Zeile –
   sechsmal dieselben Beschriftungen und deutlich zu viel Text für einen
   Orientierungsblock. Jetzt trägt jede Karte eine Ausgangslage in einer
   Überschrift und den Falk-Beitrag in einer Zeile; die Schiene zeigt drei
   davon gleichzeitig. Die Schienenmechanik selbst steht in rail.css und
   ist auch für andere Kartenreihen verwendbar. */
.detail-needs__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px 56px;
  align-items: end;
  margin-bottom: 40px;
}

.detail-needs__head .lead {
  max-width: 720px;
  margin-bottom: 0;
}

.detail-need {
  display: flex;
  flex: 0 0 calc((100% - 32px) / 3);
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  scroll-snap-align: start;
  /* Kein transform in der Überblendung: auf der gefächerten Schiene
     kommt er mit jedem Scroll-Schritt neu (siehe rail.css). */
  transition: border-color var(--ease), box-shadow var(--ease);
}

.detail-need:hover {
  border-color: rgba(0, 160, 227, 0.55);
  box-shadow: 0 22px 48px rgba(17, 24, 39, 0.14);
}

.detail-need__type {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-need__type span {
  color: var(--falk-blue);
}

.detail-need h3 {
  margin: 0 0 12px;
  font-size: var(--fs-large);
  text-wrap: balance;
}

/* Die typische Fragestellung ist der Aufhänger der Karte: sie steht in
   Textfarbe, der Falk-Beitrag darunter ruhiger und an den Fuß gesetzt,
   damit die Beiträge über alle Karten hinweg auf einer Linie liegen. */
.detail-need__question {
  margin: 0 0 24px;
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.detail-need__answer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.detail-need__label {
  margin: 0 0 8px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-need__answer p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* Letzte Karte des Stapels: der Anschluss für alle, die sich in keinem
   der sechs Anlässe wiederfinden. Sie trägt die dunkle Fläche der Seite
   und beendet den Stapel damit sichtbar. */
.detail-need--cta {
  border-color: transparent;
  background: var(--navy-deep);
}

.detail-need--cta .detail-need__type {
  color: rgba(255, 255, 255, 0.6);
}

.detail-need--cta .detail-need__type span {
  color: #8be0ff;
}

.detail-need--cta h3 {
  color: var(--white);
}

.detail-need--cta .detail-need__question {
  color: rgba(255, 255, 255, 0.78);
}

.detail-need--cta .detail-need__answer {
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* --- Technologien als Technikwand ---

   Vorher eine Begriffsmatrix: links Text, rechts sechs Zeilen mit
   grauen Nennungen, durch Mittelpunkte getrennt. Genau diese
   Nennungen sind aber der Inhalt, den Besucher hier suchen – sie
   waren das Blasseste im ganzen Abschnitt.

   Jetzt trägt der Abschnitt den Text über die volle Breite und
   darunter eine Wand aus sechs Feldern. Jede Nennung ist ein eigener
   Baustein; offene Nennungen ("nach Projektkontext") bekommen einen
   gestrichelten Rahmen und sind damit als Hinweis lesbar, nicht als
   Produktname. */
.detail-tech__head {
  margin-bottom: 32px;
}

.detail-tech__text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  max-width: 1080px;
}

.detail-tech__text p:last-child {
  margin-bottom: 0;
}

.detail-tech__wand {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line-strong);
}

.detail-tech__claim {
  max-width: 860px;
  margin: 48px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: var(--lh-body);
}

.detail-service summary:focus-visible,
.detail-service__body a:focus-visible,
.detail-need--cta a:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

@media (max-width: 1080px) {
  .detail-profile__layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .detail-system {
    max-width: 820px;
  }

  .detail-tech__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-need {
    flex-basis: calc((100% - 16px) / 2);
  }

}

@media (max-width: 760px) {
  .detail-system {
    padding: 24px;
  }

  .detail-system li {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .detail-system small {
    grid-column: 2;
  }

  .detail-service summary {
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 12px;
    padding: 20px;
  }

  .detail-service__nr {
    display: none;
  }

  .detail-service__body {
    padding: 0 20px 24px;
  }

  .detail-services__foot {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .detail-needs__head {
    grid-template-columns: 1fr;
  }

  .detail-need {
    flex-basis: 82%;
    padding: 24px;
  }


  .detail-tech__text,
  .detail-tech__wall {
    grid-template-columns: 1fr;
    gap: 32px;
  }

}


@media (prefers-reduced-motion: reduce) {
  .detail-service,
  .detail-service summary,
  .detail-need {
    transition: none;
  }
}

/* ============================================================
   Lösungsdetail – Flächensystematik

   Dieselbe Systematik wie auf Produktübersicht, Lösungsübersicht und
   Startseite V4.5, übertragen auf das Schema der Detailseiten:

     Das Raster ist der Grund; was darauf steht, steht auf einer Tafel.
     Rasterfeld und ruhige Fläche wechseln sich ab.
     Dunkle Zonen tragen ein Navy, eine Rasterweite, keine Lichtquellen.

   Rasterfelder sind hier die Abschnitte, deren Inhalt eine eigene
   Fläche hat: das Lösungsprofil (Ebenenkarte und Kernaussage), die
   Projektanlässe (sechs Karten), der interaktive Projektablauf (eine
   große Tafel) und das FAQ (je Frage eine Tafel). Ruhig bleiben die
   Abschnitte, deren Inhalt als Zeilenliste auf der Fläche steht –
   Leistungsbausteine, Technologiematrix, Branchen und Verknüpfungen.
   Der geöffnete Leistungsbaustein ist die Ausnahme: er steht auf einer
   ruhigen weißen Fläche und braucht deshalb eine eigene Tafel.

   Welche ruhige Fläche weiß und welche grau steht, entscheidet der
   Bauplan: es wechselt sich ab, damit zwei helle Abschnitte
   hintereinander eine Kante haben.

   Die Bühne behält ihren seitlichen Verlauf über dem Foto und
   bekommt das Raster darüber – wie auf den Übersichtsseiten.
   ============================================================ */

.solution-detail {
  --raster: 56px;
  --raster-dunkel: rgba(0, 160, 227, 0.08);
  --raster-hell: rgba(34, 58, 142, 0.05);
  --flaeche-dunkel: #0c1d43;
}

.solution-detail .subpage-hero .hero__media::after {
  background:
    linear-gradient(90deg, var(--raster-dunkel) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-dunkel) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 16, 40, 0.96) 0%, rgba(10, 31, 70, 0.9) 54%, rgba(34, 58, 142, 0.7) 100%);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

/* ---------------- Dunkle Zonen ----------------

   Vier dunkle Flächen gliedern die Seite: das Kopfband der
   Leistungsbausteine, das Zwischen-CTA, der SCADA-Querverweis und der
   Kontaktabschluss. Sie brachten bisher
   drei verschiedene Gründe mit – Corporate-Navy mit Kreisornament,
   eine 125°-Diagonale mit Lichtschein bei 84/18 und eine 120°-
   Diagonale mit Radialschein und Ringen. Jetzt tragen sie dieselbe
   Fläche wie die dunklen Zonen der übrigen Seiten. */
.solution-detail .cta-band,
.solution-detail .solution-scada,
.solution-detail .solution-contact {
  background:
    linear-gradient(90deg, var(--raster-dunkel) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-dunkel) 1px, transparent 1px),
    var(--flaeche-dunkel);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

.solution-detail .cta-band::after,
.solution-detail .solution-contact::after {
  display: none;
}

.solution-detail .footer--dunkel {
  background: var(--flaeche-dunkel);
}

/* ---------------- Rasterfelder ----------------

   Das Lösungsprofil führt die Seite ein und bekommt denselben
   cyanfarbenen Schein rechts oben wie die Einleitungen der beiden
   Übersichtsseiten. Er ist die einzige Lichtquelle der Seite. */
.solution-detail .detail-profile {
  background:
    radial-gradient(ellipse at 86% 24%, rgba(0, 160, 227, 0.16), transparent 40%),
    linear-gradient(90deg, var(--raster-hell) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-hell) 1px, transparent 1px),
    var(--soft);
  background-size: auto, var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

.solution-detail .detail-needs,
.solution-detail .process-explorer-section,
.solution-detail #faq {
  background:
    linear-gradient(90deg, var(--raster-hell) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-hell) 1px, transparent 1px),
    var(--soft);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

/* Ebenenkarte und Kernaussage standen auf --soft und wären auf dem
   grauen Rasterfeld verschwunden. */
.solution-detail .detail-system {
  background: var(--white);
}

.solution-detail .detail-profile__claim {
  background: rgba(237, 246, 250, 0.84);
}

/* Die luftige FAQ-Variante trägt nur Trennlinien. Auf dem Raster
   stünde ihr Text unmittelbar auf dem Gitter, deshalb wird hier jede
   Frage eine eigene kleine Tafel. */
.solution-detail #faq .faq__list {
  gap: 12px;
  border-top: 0;
}

.solution-detail #faq details,
.solution-detail #faq details[open] {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.solution-detail #faq details[open] {
  border-color: rgba(0, 160, 227, 0.38);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.08);
}

.solution-detail #faq summary {
  padding: 24px 28px;
}

.solution-detail #faq details p {
  padding: 0 64px 24px 28px;
}

@media (max-width: 760px) {
  .solution-detail #faq summary {
    padding: 20px;
  }

  .solution-detail #faq details p {
    padding: 0 20px 20px;
  }
}


/* ==== assets/css/components/produktuebersicht.css ==== */
/* ============================================================
   Produktübersicht

   Gemeinsames Seitenschema mit der Lösungsübersicht, aber eine
   eigenständige Produktlandschaft statt Kartenraster. Gruppen und
   Produktzeilen funktionieren mit einer variablen Anzahl Einträge.
   ============================================================ */

/* ------------------------------------------------------------
   Innovationsprofil
   ------------------------------------------------------------ */
.product-origin__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  gap: 80px;
  align-items: center;
}

.product-origin__copy > p:not(.eyebrow, .product-origin__claim) {
  max-width: 680px;
}

.product-origin__claim {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  background: var(--soft);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
}

.product-origin__path {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft);
}

.product-origin__label {
  margin: 0 0 20px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-origin__path ol {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.product-origin__path li {
  display: grid;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.product-origin__path li:last-child {
  border-bottom: 0;
}

.product-origin__path li > span {
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-origin__path strong {
  color: var(--ink);
  font-size: var(--fs-large);
}

.product-origin__path small {
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* ------------------------------------------------------------
   Produktlandschaft
   ------------------------------------------------------------ */
.product-landscape__head {
  margin-bottom: 56px;
}

.product-landscape__board {
  border-top: 1px solid var(--line-strong);
}

.product-domain {
  display: grid;
  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line-strong);
}

.product-domain__head {
  align-self: start;
  padding: 40px 32px 40px 0;
}

.product-domain__head > p {
  margin-bottom: 12px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-domain__head h3 {
  margin-bottom: 12px;
  font-size: var(--fs-display-sm);
  text-wrap: balance;
}

.product-domain__head > span {
  color: var(--muted);
  font-size: var(--fs-meta);
}

.product-domain__list {
  border-left: 1px solid var(--line-strong);
}

.product-entry {
  display: grid;
  min-width: 0;
  min-height: 168px;
  grid-template-columns: 56px minmax(0, 1fr) minmax(160px, 0.44fr) 24px;
  gap: 24px;
  align-items: center;
  padding: 28px 20px 28px 32px;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--ease), padding-left var(--ease);
}

.product-entry:last-child {
  border-bottom: 0;
}

.product-entry:hover {
  padding-left: 40px;
  background: var(--white);
}

.product-entry__symbol {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  color: var(--falk-navy);
  border: 1px solid rgba(0, 160, 227, 0.32);
  border-radius: var(--radius);
  background: rgba(0, 160, 227, 0.08);
}

.product-entry__symbol svg {
  width: 32px;
  height: 32px;
}

.product-entry__body {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.product-entry__body > small,
.product-entry__application small {
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-entry__body > strong {
  color: var(--ink);
  font-size: var(--fs-large);
  line-height: var(--lh-heading);
}

.product-entry__body > span:not(.product-entry__tags, .product-entry__flow) {
  color: var(--muted);
  font-size: var(--fs-meta);
}

.product-entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.product-entry__tags b {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  color: var(--falk-navy);
  background: var(--white);
  font-size: var(--fs-label);
}

.product-entry:hover .product-entry__tags b {
  background: var(--soft-2);
}

.product-entry__flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 700;
}

.product-entry__flow i {
  color: var(--falk-blue);
  font-style: normal;
}

.product-entry__application {
  display: grid;
  gap: 8px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.product-entry__application strong {
  color: var(--text);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.product-entry__arrow {
  width: 20px;
  height: 20px;
  color: var(--falk-navy);
  transition: color var(--ease), transform var(--ease);
}

.product-entry:hover .product-entry__arrow {
  color: var(--falk-blue);
  transform: translateX(4px);
}

.product-entry:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--falk-blue);
  outline-offset: -3px;
}

/* ------------------------------------------------------------
   Responsive Anpassungen
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .product-overview {
    --product-landscape-cutoff: 352px;
  }

  .product-origin__layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .product-origin__path {
    max-width: 820px;
  }

  .product-domain {
    grid-template-columns: 1fr;
  }

  .product-domain__head {
    max-width: 760px;
    padding: 40px 0 32px;
  }

  .product-domain__list {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .product-origin__path {
    padding: 24px;
  }

  .product-landscape__head {
    margin-bottom: 40px;
  }

  .product-domain__head h3 {
    font-size: var(--fs-large);
  }

  .product-entry,
  .product-entry:hover {
    min-height: 0;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    gap: 16px;
    padding: 24px 0;
  }

  .product-entry__symbol {
    width: 48px;
    height: 48px;
  }

  .product-entry__symbol svg {
    width: 28px;
    height: 28px;
  }

  .product-entry__application {
    grid-column: 2 / 4;
    padding: 16px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .product-entry__arrow {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 520px) {
  .product-origin__claim {
    padding: 16px 20px;
  }

  .product-entry,
  .product-entry:hover {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .product-entry__symbol {
    width: 40px;
    height: 40px;
  }

  .product-entry__symbol svg {
    width: 24px;
    height: 24px;
  }

  .product-entry__application {
    grid-column: 2;
  }

  .product-entry__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-entry,
  .product-entry__arrow {
    transition: none;
  }
}

/* ============================================================
   Produktübersicht: Flächen und Zonen

   Alles ab hier hängt an der Body-Klasse `product-overview` und gilt
   ausschließlich für diese Seite. Die Bausteine selbst bleiben
   unverändert und auf anderen Seiten weiterverwendbar – die Seite
   entscheidet über ihre Flächen, nicht der Baustein.

   Die Reihenfolge der Abschnitte hier folgt der Reihenfolge auf der
   Seite: Bühne, Innovationsprofil, Produktlandschaft, Lösungszone,
   Nachweise, Kontakt, FAQ.
   ============================================================ */

.product-overview {
  --product-overview-grid-size: 56px;
  --product-landscape-cutoff: 392px;
}

.product-overview main {
  background: var(--white);
}

.product-overview .subpage-hero .hero__media::after {
  background: linear-gradient(90deg, rgba(5, 16, 40, 0.96) 0%, rgba(10, 31, 70, 0.9) 54%, rgba(34, 58, 142, 0.7) 100%);
}

.product-overview .product-origin {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 86% 24%, rgba(0, 160, 227, 0.16), transparent 40%),
    linear-gradient(180deg, var(--white) 0%, #f8fbfd 100%);
}

.product-overview .product-origin::before {
  display: none;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
  content: "";
  opacity: 0.48;
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 28%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 28%, #000 58%);
}

.product-overview .product-origin__path {
  border-color: rgba(34, 58, 142, 0.16);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.12);
  backdrop-filter: blur(8px);
}

.product-overview .product-origin__claim {
  background: rgba(237, 246, 250, 0.84);
}

.product-overview .product-landscape {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #0c1d43 0 var(--product-landscape-cutoff), #eaf1f6 var(--product-landscape-cutoff) 100%);
}

/* Der Lichtschein im dunklen Kopfband ist entfallen: er sass genau
   dort, wo das Raster durchlaeuft, und machte die Flaeche uneinheitlich. */

.product-overview .product-landscape__head .eyebrow,
.product-overview .product-landscape__head h2 {
  color: var(--white);
}

.product-overview .product-landscape__head .eyebrow::after {
  background: var(--falk-blue);
}

.product-overview .product-landscape__head .lead {
  color: rgba(255, 255, 255, 0.74);
}

/* Deckendes Weiß, nicht 96 Prozent: die Tafel beginnt oberhalb der
   Kante, an der die Sektion von Navy auf Hell wechselt. Bei 96 Prozent
   schien das Navy im oberen Teil durch und die Tafel hatte dort einen
   grauen Balken, der genau an dieser Kante endete. */
.product-overview .product-landscape__board {
  overflow: hidden;
  border: 1px solid rgba(198, 205, 216, 0.8);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.18);
}

.product-overview .product-domain:last-child {
  border-bottom: 0;
}

.product-overview .product-domain {
  grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
}

.product-overview .product-domain__head {
  padding-left: 32px;
}

.product-overview .product-entry:hover {
  background: #edf8fc;
}

.product-overview .product-related {
  position: relative;
  overflow: hidden;
  background: #eaf1f6;
}

.product-overview .product-related::before {
  display: none;
}

.product-overview .product-related .v4-services__layout {
  overflow: hidden;
  gap: 0;
  align-items: stretch;
  border: 1px solid rgba(34, 58, 142, 0.14);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.14);
}

.product-overview .product-related .v4-services__intro {
  position: relative;
  top: auto;
  padding: 48px;
  color: var(--white);
  background: #0c1d43;
}

.product-overview .product-related .v4-services__intro .eyebrow,
.product-overview .product-related .v4-services__intro h2 {
  color: var(--white);
}

.product-overview .product-related .v4-services__intro > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.74);
}

.product-overview .product-related .v4-services__intro .btn--navy {
  color: var(--white);
  background: var(--falk-blue);
}

.product-overview .product-related .v4-services__list {
  padding: 16px 32px;
  border-top: 0;
}

.product-overview .product-related .v4-service:hover {
  background: #edf8fc;
}

/* Kontaktband auf dieselbe ruhige Flaeche wie die uebrigen dunklen
   Zonen. Der Radialschein unten links und die konzentrischen Ringe
   oben rechts (.v4-contact::after) entfallen dafuer. */
.product-overview .solution-contact {
  background: #0c1d43;
}

.product-overview .solution-contact::after {
  display: none;
}

.product-overview .v4-proof,
.product-overview .industries-compact {
  position: relative;
  overflow: hidden;
  background: #edf3f7;
}

.product-overview .v4-proof {
  padding-bottom: 64px;
}

.product-overview .section.industries-compact {
  padding-top: 0;
}

.product-overview .industries-compact > .shell {
  padding-top: 32px;
}

.product-overview .industries-compact__list {
  padding: 0 24px;
  border: 1px solid rgba(34, 58, 142, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 48px rgba(15, 30, 70, 0.08);
  backdrop-filter: blur(8px);
}

.product-overview #faq {
  background: var(--soft);
}

.product-overview #faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
}

.product-overview #faq .faq__list {
  gap: 12px;
  border-top: 0;
}

.product-overview #faq details[open] {
  border-color: rgba(0, 160, 227, 0.38);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.08);
}

.product-overview #faq .faq--luftig summary {
  padding: 24px 28px;
}

.product-overview #faq .faq--luftig details p {
  padding: 0 64px 24px 28px;
}

@media (max-width: 1080px) {
  .product-overview .product-origin {
    background:
      radial-gradient(ellipse at 72% 78%, rgba(0, 160, 227, 0.14), transparent 40%),
      linear-gradient(180deg, var(--white) 0%, #f8fbfd 100%);
  }

  .product-overview .product-origin::before {
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 24%, #000 64%);
    mask-image: linear-gradient(180deg, transparent 24%, #000 64%);
  }

  .product-overview .product-domain__head {
    padding-left: 32px;
    padding-right: 32px;
  }

  .product-overview .product-domain {
    grid-template-columns: 1fr;
  }

  .product-overview .product-related .v4-services__intro {
    padding: 40px;
  }
}

@media (max-width: 760px) {
  .product-overview {
    --product-overview-grid-size: 48px;
    --product-landscape-cutoff: 400px;
  }

  .product-overview .product-landscape__board {
    border-radius: var(--radius);
  }

  .product-overview .product-domain__head {
    padding: 32px 24px 24px;
  }

  .product-overview .product-entry,
  .product-overview .product-entry:hover {
    padding-right: 24px;
    padding-left: 24px;
  }

  .product-overview .industries-compact__list {
    padding: 0 20px;
  }

  .product-overview .v4-proof {
    padding-bottom: 40px;
  }

  .product-overview .industries-compact > .shell {
    padding-top: 24px;
  }

  .product-overview .product-related .v4-services__layout {
    border-radius: var(--radius);
  }

  .product-overview .product-related .v4-services__intro {
    padding: 32px 24px;
  }

  .product-overview .product-related .v4-services__list {
    padding: 8px 24px;
  }

  .product-overview #faq .faq--luftig summary {
    padding: 20px;
  }

  .product-overview #faq .faq--luftig details p {
    padding: 0 20px 20px;
  }
}

@media (max-width: 520px) {
  .product-overview {
    --product-landscape-cutoff: 448px;
  }

  .product-overview .product-entry,
  .product-overview .product-entry:hover {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* ------------------------------------------------------------
   Durchgängiges technisches Raster

   Alle Seitenflächen verwenden dieselbe Rasterweite. Auf kleinen
   Ansichten wird sie einmal zentral reduziert und bleibt ebenfalls
   in allen Abschnitten identisch.

   Damit ein Raster als Fläche liest, muss der Grund darunter
   gleichmäßig sein. Deshalb tragen die dunklen Zonen alle dasselbe
   Navy und keine Lichtscheine – ein Fleck ließe die Textur zufällig
   heller und dunkler wirken. Einzige Ausnahme ist die Bühne: dort
   liegt das Raster über einem Foto, und der seitliche Verlauf gehört
   zum Bild.
   ------------------------------------------------------------ */
.product-overview .subpage-hero .hero__media::after {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 16, 40, 0.96) 0%, rgba(10, 31, 70, 0.9) 54%, rgba(34, 58, 142, 0.7) 100%);
  background-size: var(--product-overview-grid-size) var(--product-overview-grid-size), var(--product-overview-grid-size) var(--product-overview-grid-size), auto;
}

.product-overview .product-origin::before {
  display: block;
  width: 100%;
  opacity: 0.42;
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.08) 1px, transparent 1px);
  background-size: var(--product-overview-grid-size) var(--product-overview-grid-size);
  -webkit-mask-image: none;
  mask-image: none;
}

.product-overview .product-landscape {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #0c1d43 0 var(--product-landscape-cutoff), #eaf1f6 var(--product-landscape-cutoff) 100%);
  background-size: var(--product-overview-grid-size) var(--product-overview-grid-size), var(--product-overview-grid-size) var(--product-overview-grid-size), auto;
}

.product-overview .product-related {
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.055) 1px, transparent 1px),
    #eaf1f6;
  background-size: var(--product-overview-grid-size) var(--product-overview-grid-size);
}

.product-overview .product-related .v4-services__intro {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.09) 1px, transparent 1px),
    #0c1d43;
  background-size: var(--product-overview-grid-size) var(--product-overview-grid-size);
}

.product-overview .v4-proof,
.product-overview .industries-compact {
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.05) 1px, transparent 1px),
    #edf3f7;
  background-size: var(--product-overview-grid-size) var(--product-overview-grid-size);
}

.product-overview .solution-contact {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    #0c1d43;
  background-size: var(--product-overview-grid-size) var(--product-overview-grid-size), var(--product-overview-grid-size) var(--product-overview-grid-size), auto;
}

.product-overview #faq {
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    var(--soft);
  background-size: var(--product-overview-grid-size) var(--product-overview-grid-size);
}

/* ------------------------------------------------------------
   Die vier Zonen unterhalb der Produktlandschaft

   Der Verteilerteil einer Übersichtsseite besteht aus Abschnitten,
   die alle dasselbe tun: in andere Bereiche der Website führen.
   Bekommt jeder davon einen eigenen Abschnittskopf und eine eigene
   Tönung, sehen sie verschieden aus, sind aber gleich wichtig
   geblieben – die Seite wirkt templateartig, obwohl der Inhalt
   verschieden ist. Frühere Entwürfe haben sie über abgestufte
   Grautöne getrennt; das trennt die falsche Ebene.

   Diese Fassung fasst sie stattdessen zusammen:

   1. Lösungsbereiche und Branchen bilden eine gemeinsame dunkle
      Zone „wohin es von hier aus weitergeht". Einen eigenen
      Branchenabschnitt gibt es nicht – die Branchen sind die fünfte,
      breite Kachel derselben Fläche. Sie hätten sonst die Form eines
      Kapitels, aber nicht dessen Gewicht.

   2. Der Lösungskontext trägt keinen Kasten. Auf der hellen
      Produktlandschaft steht bereits eine große weiße Tafel; ein
      zweiter gerahmter Container direkt darunter wiederholt dieselbe
      Form eine Nummer kleiner. Stattdessen trägt die Sektion selbst
      die dunkle Fläche.

   3. Die Nachweise stehen allein auf ruhigem Grau, ohne Raster –
      wie derselbe Baustein auf der Startseite V4. Er lebt von einer
      großen Bildkarte und weißen Flächen; Rasterlinien, die
      dazwischen durchlaufen, nehmen ihnen die Kante.

   Daraus wird die Folge: dunkle Lösungszone, graue Nachweisebene,
   dunkles Kontaktband, weißes FAQ. Vier Flächen, vier echte Wechsel.
   ------------------------------------------------------------ */

/* ============ Zone 1: Anschluss – Lösungen und Branchen ============ */

.product-overview .product-related {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.09) 1px, transparent 1px),
    #0c1d43;
  background-size:
    var(--product-overview-grid-size) var(--product-overview-grid-size),
    var(--product-overview-grid-size) var(--product-overview-grid-size),
    auto;
}

.product-overview .product-related .v4-services__layout {
  overflow: visible;
  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr);
  gap: 64px;
  align-items: start;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.product-overview .product-related .v4-services__intro {
  position: static;
  padding: 0;
  background: none;
}

/* Die vier Lösungen als Kachelraster. Eine weitere untereinander
   stehende Linkliste hätte die Seite genau da wiederholt, wo sie
   ohnehin zu gleichförmig war. */
/* Die Trennlinien entstehen als Fugen, nicht als Zellenrahmen: die
   Tafel führt die Linienfarbe als Fläche, die Kacheln decken sie
   wieder ab. Rahmen an den Zellen würden an den gerundeten Ecken
   abgeschnitten und die Tafel dort offen lassen; so bleibt sie
   geschlossen, und die Bauart trägt beliebig viele Kacheln.
   Wie die weiße Produkttafel steht sie damit als eigene Fläche über
   dem Raster, statt es zu überlagern. */
.product-overview .product-related .v4-services__list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.14);
}

.product-overview .product-related .v4-service {
  min-height: 176px;
  align-content: start;
  align-items: start;
  padding: 28px;
  border: 0;
  background: #0c1d43;
}

.product-overview .product-related .v4-service:hover {
  padding-left: 28px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)),
    #0c1d43;
}

.product-overview .product-related .v4-service__body strong {
  color: var(--white);
}

.product-overview .product-related .v4-service__body small {
  color: rgba(255, 255, 255, 0.66);
}

.product-overview .product-related .v4-service > svg,
.product-overview .product-related .v4-service:hover > svg {
  color: var(--falk-blue);
}

/* ============ Zone 2: Nachweise ============

   Hier läuft das Raster bewusst aus. Der Baustein lebt von einer
   großen Bildkarte und mehreren weißen Flächen; Rasterlinien, die
   dazwischen durchlaufen, nehmen ihnen genau die Kante, die sie
   tragen sollen. Auf der Startseite V4 steht er aus demselben Grund
   auf ruhigem Grau. */
.product-overview .v4-proof {
  padding: var(--section-space) 0;
  background: var(--soft);
}

/* ============ Zone 4: FAQ ============

   Das FAQ stünde sonst auf demselben Grau wie die Nachweisebene.
   Weiß mit feinem Raster gibt ihm einen eigenen Grund und schließt
   die Seite mit dem Motiv, mit dem sie beginnt. */
.product-overview #faq {
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    var(--white);
  background-size:
    var(--product-overview-grid-size) var(--product-overview-grid-size),
    var(--product-overview-grid-size) var(--product-overview-grid-size),
    auto;
}

@media (max-width: 1080px) {
  .product-overview .product-related .v4-services__layout {
    gap: 48px;
  }

  .product-overview .product-related .v4-services__intro {
    padding: 0;
  }
}

@media (max-width: 760px) {
  /* Die Spaltenteilung oben ist stärker als die Standardregel des
     Bausteins und muss deshalb hier ausdrücklich zurückgenommen
     werden – sonst bleibt der Block auch auf dem Telefon zweispaltig. */
  .product-overview .product-related .v4-services__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .product-overview .product-related .v4-services__list {
    grid-template-columns: 1fr;
    border-radius: var(--radius);
  }

  .product-overview .product-related .v4-service {
    min-height: 0;
    padding: 24px;
  }

  .product-overview .product-related .v4-service:hover {
    padding-left: 24px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)),
      #0c1d43;
  }

  .product-overview .product-related .v4-service__body small {
    display: block;
  }

  .product-overview .v4-proof {
    padding: var(--section-space-sm) 0;
  }
}

/* ---- Fünfte Kachel: die Branchen ----

   Damit sie nicht als fünfter Lösungsbereich gelesen wird, liegt sie
   über beide Spalten, führt keine Beschreibung, sondern die
   Branchennamen selbst, und ist flacher als die vier darüber. Wer
   nach der eigenen Industrie sucht, findet sie beim Überfliegen. */
.product-overview .product-related .v4-service--branchen {
  min-height: 0;
  grid-column: 1 / -1;
  align-content: center;
  align-items: center;
}

.product-overview .product-related .v4-service--branchen .v4-service__body {
  grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.product-overview .product-related .v4-service--branchen small {
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 760px) {
  .product-overview .product-related .v4-service--branchen .v4-service__body {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}


/* ==== assets/css/components/produktdetail.css ==== */
/* ============================================================
   Produktdetailseiten

   Gemeinsames Schema für die Produktseiten 03_01 bis 03_05:
   Produktprofil, variables Funktionsprinzip, Systemsteuerung sowie
   Nutzen- und Anwendungsindex. Inhalte wechseln je Produkt.
   ============================================================ */

/* ------------------------------------------------------------
   Produktdetail-Hero ohne Bildbühne
   ------------------------------------------------------------ */
/* Das Produktmotiv liegt hinter dem Text, nicht daneben: ein Hero für
   alle Produktseiten, nur das Motiv wechselt. Der Verlauf darüber ist
   derselbe wie auf den Lösungsdetailseiten, damit beide Seitenarten
   dieselbe Bühne haben. */
.product-detail-hero {
  background: var(--navy-deep);
}

.product-detail-hero .subpage-hero__media::after {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 16, 40, 0.96) 0%, rgba(10, 31, 70, 0.9) 54%, rgba(34, 58, 142, 0.7) 100%);
  background-size: 56px 56px, 56px 56px, auto;
}

.product-detail-hero .subpage-hero__lead {
  max-width: 820px;
}

.product-detail-hero h1 {
  hyphens: none;
  overflow-wrap: normal;
}

/* ------------------------------------------------------------
   Produktprofil: Herausforderung und definierter Zustand
   ------------------------------------------------------------ */
.product-detail-profile__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  gap: 80px;
  align-items: center;
}

.product-detail-profile__copy {
  min-width: 0;
}

.product-detail-profile__text {
  max-width: 680px;
}

.product-detail-profile__claim {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  background: var(--soft);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
}

.product-problem-map {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft);
}

.product-problem-map__label {
  margin: 0 0 20px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-problem-map__state {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.product-problem-map__state > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-problem-map__state strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: var(--fs-large);
  line-height: var(--lh-heading);
}

.product-problem-map__state p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.product-problem-map__state--solution {
  border-color: rgba(0, 160, 227, 0.32);
  background: #edf8fc;
}

.product-problem-map__state--solution > span {
  color: var(--falk-navy);
}

.product-problem-map__transition {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 24px;
}

.product-problem-map__transition span {
  border-top: 1px dashed rgba(0, 160, 227, 0.48);
}

.product-problem-map__transition b {
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------
   Variables Funktionsprinzip
   ------------------------------------------------------------ */
.product-function__head {
  margin-bottom: 48px;
}

.product-function__frame {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 18px 48px rgba(34, 58, 142, 0.08);
}

.product-function__input,
.product-function__output {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
}

.product-function__input {
  border-bottom: 1px solid var(--line);
  background: #edf6fa;
}

.product-function__output {
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.product-function__input span,
.product-function__output span {
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-function__input strong,
.product-function__output strong {
  color: var(--ink);
  font-size: var(--fs-meta);
}

.product-function__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-function__steps li {
  min-width: 0;
  min-height: 320px;
  padding: 32px;
  border-right: 1px solid var(--line);
}

.product-function__steps li:last-child {
  border-right: 0;
}

.product-function__number {
  display: block;
  margin-bottom: 48px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
}

.product-function__steps small {
  display: block;
  margin-bottom: 8px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-function__steps h3 {
  margin-bottom: 12px;
}

.product-function__steps p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* ------------------------------------------------------------
   Automatisierungs- und Regelungslogik
   ------------------------------------------------------------ */
.product-control__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1.18fr);
  gap: 80px;
  align-items: center;
}

.product-control__copy > p:not(.eyebrow, .product-control__claim) {
  max-width: 660px;
}

.product-control__claim {
  margin: 32px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  font-weight: 700;
}

.product-control-map {
  padding: 32px;
  border: 1px solid rgba(0, 160, 227, 0.24);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 160, 227, 0.1), transparent 34%),
    var(--soft);
}

.product-control-map__stage {
  display: grid;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.product-control-map__stage span,
.product-control-map__feedback span {
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-control-map__stage strong {
  color: var(--ink);
  font-size: var(--fs-large);
}

.product-control-map__connector {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px 24px;
}

.product-control-map__connector i {
  border-top: 1px dashed rgba(0, 160, 227, 0.48);
}

.product-control-map__connector b {
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-control-map__components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.product-control-map__components span {
  display: grid;
  min-height: 72px;
  place-items: center;
  padding: 12px;
  border: 1px solid rgba(0, 160, 227, 0.24);
  border-radius: var(--radius);
  color: var(--falk-navy);
  background: rgba(255, 255, 255, 0.76);
  font-size: var(--fs-small);
  font-weight: 800;
  text-align: center;
}

.product-control-map__feedback {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.product-control-map__feedback div {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-top: 2px solid var(--falk-blue);
  background: var(--white);
}

.product-control-map__feedback strong {
  color: var(--text);
  font-size: var(--fs-meta);
}

/* ------------------------------------------------------------
   Nutzen und Anwendungen
   ------------------------------------------------------------ */
.product-benefits__head {
  margin-bottom: 48px;
}

.product-benefits__layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: 56px;
  align-items: start;
}

.product-benefits__summary {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.product-benefits__label {
  margin: 0 0 20px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-benefits__summary ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-benefits__summary li {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
}

.product-benefits__scale {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
}

.product-benefits__scale div {
  display: grid;
  gap: 4px;
}

.product-benefits__scale span {
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
}

.product-benefits__scale strong {
  color: var(--text);
  font-size: var(--fs-meta);
}

.product-benefits__scale i {
  border-top: 1px solid var(--falk-blue);
}

.product-applications {
  border-top: 1px solid var(--line-strong);
}

.product-applications article {
  display: grid;
  grid-template-columns: minmax(180px, 0.48fr) minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.product-applications h3,
.product-applications p {
  margin: 0;
}

.product-applications h3 {
  color: var(--ink);
  font-size: var(--fs-body);
}

.product-applications p {
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* ------------------------------------------------------------
   Ergänzende Produktdetail-Regeln und Responsive Anpassungen
   ------------------------------------------------------------ */
.product-detail-related .v4-services__intro > p:not(.eyebrow) {
  color: var(--muted);
}

@media (max-width: 1080px) {
  .product-detail-profile__layout,
  .product-control__layout,
  .product-benefits__layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .product-problem-map,
  .product-control-map,
  .product-benefits__summary {
    max-width: 820px;
  }
}

@media (max-width: 760px) {
  .product-problem-map,
  .product-control-map,
  .product-benefits__summary {
    padding: 24px;
  }

  .product-function__input,
  .product-function__output {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px 24px;
  }

  .product-function__steps {
    grid-template-columns: 1fr;
  }

  .product-function__steps li {
    min-height: 0;
    padding: 24px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .product-function__steps li:last-child {
    border-bottom: 0;
  }

  .product-function__number {
    margin-bottom: 24px;
  }

  .product-control-map__components {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-benefits__scale {
    grid-template-columns: 1fr;
  }

  .product-benefits__scale i {
    width: 40px;
  }

  .product-applications article {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .product-detail-profile__claim {
    padding: 16px 20px;
  }

  .product-control-map__components,
  .product-control-map__feedback {
    grid-template-columns: 1fr;
  }

  .product-problem-map__state {
    padding: 20px;
  }
}

/* Die Bedien- und Regelungsfunktionen stehen als Begriffswand unter
   der Steuerungsgrafik (Baustein begriffe.css). */
.product-control__funktionen {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line-strong);
}

/* Nutzenvergleich: Kopf, Vorteile und Kennzahl rahmen den Vorher/
   Nachher-Baustein (vergleich.css, haken.css). */
.product-compare__head {
  max-width: 860px;
  margin-bottom: 48px;
}

.product-compare__label {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-compare__claim {
  max-width: 860px;
  margin: 48px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: var(--lh-body);
}

.product-uses__head {
  max-width: 860px;
  margin-bottom: 48px;
}

/* Einsatzbreite: zwei gleichrangige Maßstäbe, darunter die
   Auslegungsgrößen als Begriffswand. */
.product-scale__head {
  max-width: 860px;
  margin-bottom: 48px;
}

.product-scale__groessen {
  margin-top: 48px;
}

.product-scale__claim {
  max-width: 860px;
  margin: 48px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: var(--lh-body);
}

/* ============================================================
   Produktdetail – Flächensystematik

   Dieselbe Regel wie auf den Lösungsdetailseiten: Die dunklen Zonen
   der Seite tragen ein Navy, eine Rasterweite und keine Lichtquellen.
   Ohne das brächte jeder Baustein seinen eigenen dunklen Grund mit –
   das Kopfband ein Raster, der Branchenfokus einen Verlauf, der
   Kontaktabschluss einen Lichtschein. Drei dunkle Zonen, drei
   verschiedene Nächte.

   Rasterfelder sind die Abschnitte, deren Inhalt eine eigene Fläche
   hat: der Einleitungsteaser (Problemkarte), der Kartenstapel der
   Anwendungen und der Projektablauf (eine große Tafel). Ruhig bleiben
   die Abschnitte, deren Inhalt als Zeile oder Text auf der Fläche
   steht.
   ============================================================ */
.product-detail {
  --raster: 56px;
  --raster-dunkel: rgba(0, 160, 227, 0.08);
  --flaeche-dunkel: #0c1d43;
}

.product-detail .section--navy,
.product-detail .solution-contact {
  background:
    linear-gradient(90deg, var(--raster-dunkel) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-dunkel) 1px, transparent 1px),
    var(--flaeche-dunkel);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

.product-detail .solution-contact::after {
  display: none;
}

.product-detail .footer--dunkel {
  background: var(--flaeche-dunkel);
}

/* --- Rasterfelder ---

   Der Einleitungsteaser führt die Seite ein und bekommt denselben
   cyanfarbenen Schein rechts oben wie die Einleitungen der Übersichts-
   und Lösungsdetailseiten. Er ist die einzige Lichtquelle der Seite. */
.product-detail .product-detail-profile {
  --raster-hell: rgba(34, 58, 142, 0.05);

  background:
    radial-gradient(ellipse at 86% 24%, rgba(0, 160, 227, 0.16), transparent 40%),
    linear-gradient(90deg, var(--raster-hell) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-hell) 1px, transparent 1px),
    var(--soft);
  background-size: auto, var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

.product-detail .product-uses,
.product-detail .product-scale,
.product-detail .process-explorer-section {
  --raster-hell: rgba(34, 58, 142, 0.05);

  background:
    linear-gradient(90deg, var(--raster-hell) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-hell) 1px, transparent 1px),
    var(--soft);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

/* Die Problemkarte stand auf --soft und wäre auf dem grauen
   Rasterfeld verschwunden. */
.product-detail .product-problem-map {
  background: var(--white);
}

/* Die Achsenbeschriftung liegt auf der Tafel, nicht auf der Fläche. */
.product-detail .spannweite__achse span {
  background: var(--white);
}

/* ------------------------------------------------------------
   Anwendungen als Kartenstapel

   Die Karten sind gleichrangig: keine Anwendung sticht hervor, keine
   führt weiter. Der Stapel selbst steht in rail.css, hier steht nur,
   wie eine Anwendungskarte aussieht.
   ------------------------------------------------------------ */
.product-uses__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px 56px;
  align-items: end;
  margin-bottom: 40px;
}

.product-uses__head .lead {
  max-width: 720px;
  margin-bottom: 0;
}

.anwendung {
  display: flex;
  min-height: 240px;
  flex: 0 0 calc((100% - 32px) / 3);
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  scroll-snap-align: start;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.anwendung__feld {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.anwendung__feld span {
  color: var(--falk-blue);
}

.anwendung h3 {
  margin: 0 0 12px;
  font-size: var(--fs-large);
  text-wrap: balance;
}

.anwendung p:not(.anwendung__feld) {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-meta);
}

@media (max-width: 1080px) {
  .anwendung {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (max-width: 760px) {
  .product-uses__head {
    grid-template-columns: 1fr;
  }

  .anwendung {
    flex-basis: 82%;
    padding: 24px;
  }
}

/* ------------------------------------------------------------
   Spannweite

   Zwei Enden, dazwischen die Achse. Die Enden sind gleichrangig –
   keines ist das bessere; was sie verbindet, steht auf der Achse.
   ------------------------------------------------------------ */
.spannweite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
  align-items: center;
}

.spannweite__ende {
  padding: 32px;
  border: 1px solid rgba(0, 160, 227, 0.38);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.08);
}

.spannweite__label {
  margin: 0 0 12px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spannweite__ende h3 {
  margin: 0 0 12px;
  font-size: var(--fs-large);
}

.spannweite__ende p {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-meta);
}

/* Die Achse verbindet beide Enden; die Beschriftung sitzt darauf. */
.spannweite__achse {
  position: relative;
  display: grid;
  height: 100%;
  place-items: center;
}

.spannweite__achse::before {
  position: absolute;
  top: 50%;
  right: -8px;
  left: -8px;
  border-top: 1px dashed var(--falk-blue);
  content: "";
}

/* Zwei Punkte markieren die Enden der Spannweite. */
.spannweite__achse::after {
  position: absolute;
  top: calc(50% - 4px);
  right: -12px;
  left: -12px;
  height: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 4px 50%, var(--falk-blue) 4px, transparent 4px),
    radial-gradient(circle at calc(100% - 4px) 50%, var(--falk-blue) 4px, transparent 4px);
  content: "";
}

.spannweite__achse span {
  position: relative;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.product-scale__frage {
  max-width: 860px;
  margin: 48px 0 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.product-scale__groessen {
  margin-top: 24px;
}

@media (max-width: 1080px) {
  .spannweite {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .spannweite__achse {
    height: auto;
    padding: 16px 0;
  }

  .spannweite__achse::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    border-top: 0;
    border-left: 1px dashed var(--line-strong);
  }
}

/* Kennzahl und Vorteile teilen sich eine Zeile: die einzige harte
   Zahl der Seite links, die Eigenschaften rechts. */
.product-compare__bilanz {
  display: grid;
  grid-template-columns: minmax(260px, 0.5fr) minmax(0, 1fr);
  gap: 40px;
  /* stretch statt start: die Kennzahl steht auf derselben Höhe wie die
     Vorteilsliste daneben, sonst hängt sie als kleiner Block in der
     Ecke. */
  align-items: stretch;
  margin-top: 48px;
}

.kennzahl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 32px;
  border-radius: var(--radius);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    var(--navy-deep);
  background-size: 56px 56px, 56px 56px, auto;
}

.kennzahl strong {
  display: block;
  margin-bottom: 12px;
  color: var(--white);
  font-size: var(--fs-display-lg);
  font-weight: 800;
  line-height: 1;
}

.kennzahl figcaption {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-meta);
}

@media (max-width: 1080px) {
  .product-compare__bilanz {
    grid-template-columns: 1fr;
  }
}

/* Die Abschlusskarte des Stapels trägt die dunkle Fläche der Seite und
   beendet ihn damit sichtbar. */
.anwendung--cta {
  border-color: transparent;
  background: var(--navy-deep);
}

.anwendung--cta .anwendung__feld {
  color: rgba(255, 255, 255, 0.6);
}

.anwendung--cta .anwendung__feld span {
  color: #8be0ff;
}

.anwendung--cta h3 {
  color: var(--white);
}

.anwendung--cta p:not(.anwendung__feld) {
  color: rgba(255, 255, 255, 0.78);
}

.anwendung__aktion {
  margin-top: auto;
  padding-top: 20px;
}

/* Auslegungsgrößen: drei Listen nebeneinander. */
.product-scale__groessen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 24px;
}

/* Eine Tafel für einen zusammenhängenden Gedanken: Spannweite und
   Auslegungsgrößen beantworten dieselbe Frage und stehen deshalb in
   einem Objekt statt in zwei losen Blöcken. */
.produkt-tafel {
  padding: 48px;
  border: 1px solid rgba(198, 205, 216, 0.8);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.1);
}

@media (max-width: 760px) {
  .produkt-tafel {
    padding: 24px;
  }
}


/* ==== assets/css/components/indusleep-produktseite.css ==== */
/* ============================================================
   InduSLEEP® Produktdetailseite ohne Rechner
   Inhalt: Texte/03_01_InduSLEEP.docx

   Baut auf dem gemeinsamen Produktdetail-, Kopfband-, Process-
   Explorer-, Leistungsindex-, FAQ- und Kontaktabschluss-System auf.
   ============================================================ */

.indusleep-document-page {
  --indusleep-cyan: #00a0e3;
  --indusleep-blue: #223a8e;
  --indusleep-night: #071229;
  --indusleep-green: #55dca2;
}

.indusleep-document-page main > section[id],
.indusleep-document-page .indusleep-funding[id] {
  scroll-margin-top: 120px;
}

.indusleep-document-page .product-detail-hero h1 {
  max-width: none;
}

/* ---------- Problem und Funktionsprinzip ---------- */

.indusleep-situation-map {
  display: grid;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 48px rgba(34, 58, 142, 0.08);
}

.indusleep-situation-map .product-problem-map__label {
  margin-bottom: 8px;
}

.indusleep-situation-map article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.indusleep-situation-map article > span {
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
}

.indusleep-situation-map strong,
.indusleep-situation-map p {
  display: block;
}

.indusleep-situation-map strong {
  margin-bottom: 8px;
  color: var(--ink);
}

.indusleep-situation-map p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.indusleep-document-function .indusleep-architecture {
  box-shadow: 0 22px 60px rgba(7, 18, 41, 0.16);
}

.indusleep-document-function__unten {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 80px;
  align-items: start;
  margin-top: 48px;
}

.indusleep-document-function__copy > p {
  max-width: 640px;
}

.indusleep-document-function__copy > p:last-child {
  margin-bottom: 0;
}

/* ---------- Gemeinsame Text-/Visual-Aufteilung ---------- */

.indusleep-document-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
  gap: 80px;
  align-items: center;
}

.indusleep-document-split__copy > p:not(.eyebrow, .indusleep-document-claim),
.indusleep-document-resilience__copy > p,
.indusleep-document-fit__intro p {
  color: var(--text);
}

.indusleep-document-claim {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  background: var(--soft);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
}

.indusleep-document-energy__visual {
  padding: 40px;
  box-shadow: 0 18px 48px rgba(34, 58, 142, 0.08);
}

/* ---------- Resilienz ---------- */

.indusleep-document-page .indusleep-document-resilience,
.indusleep-document-page .indusleep-document-fit,
.indusleep-document-page .indusleep-document-process,
.indusleep-document-page .indusleep-document-faq {
  --raster-hell: rgba(34, 58, 142, 0.05);
  background:
    linear-gradient(90deg, var(--raster-hell) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-hell) 1px, transparent 1px),
    var(--soft);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

.indusleep-document-resilience__head {
  max-width: 900px;
}

.indusleep-document-resilience__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  gap: 56px;
  align-items: start;
}

.indusleep-document-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 32px 0 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  list-style: none;
}

.indusleep-document-checks li {
  position: relative;
  padding-left: 20px;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
}

.indusleep-document-checks li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: var(--falk-blue);
}

.indusleep-document-resilience .indusleep-resilience {
  padding: 40px;
  box-shadow: 0 24px 64px rgba(7, 18, 41, 0.18);
}

/* ---------- Wartung ---------- */

.indusleep-document-split--maintenance {
  grid-template-columns: minmax(0, 0.96fr) minmax(460px, 1.04fr);
}

.indusleep-document-maintenance__board {
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft);
}

.indusleep-document-maintenance__board .indusleep-maintenance__timeline {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 20px;
}

.indusleep-document-maintenance__board .indusleep-maintenance__timeline span {
  min-height: 88px;
  background: var(--white);
}

.indusleep-document-maintenance__board .indusleep-maintenance__timeline i {
  width: 2px;
  height: 24px;
  justify-self: center;
}

.indusleep-document-maintenance__board .indusleep-maintenance__timeline i::after {
  top: auto;
  right: -4px;
  bottom: 0;
  transform: rotate(135deg);
}

.indusleep-document-maintenance__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 24px;
}

.indusleep-document-maintenance__facts span {
  padding: 12px;
  border-top: 2px solid var(--falk-blue);
  color: var(--falk-navy);
  background: var(--white);
  font-size: var(--fs-label);
  font-weight: 800;
  line-height: 1.4;
}

/* ---------- Eignung und Förderung ---------- */

.indusleep-document-fit__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin: 0 0 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-strong);
}

.indusleep-document-fit__intro p {
  margin: 0;
}

.indusleep-document-funding__tools {
  min-width: 0;
}

/* Gilt für beide Fassungen: auf der Produktseite steckt der Förderblock
   im gemeinsamen Eignungsabschnitt, in der Rechner-Fassung steht er
   allein. Ohne die zweite Auswahl stünde die Überschrift dort in Navy
   auf Navy. */
.indusleep-document-fit .indusleep-funding h2,
.indusleep-foerderung .indusleep-funding h2 {
  color: var(--white);
  font-size: var(--fs-display-sm);
}

.indusleep-document-funding__services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.indusleep-document-funding__services li {
  position: relative;
  padding: 12px 16px 12px 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.4;
}

.indusleep-document-funding__services li::before {
  position: absolute;
  top: 17px;
  left: 14px;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: var(--falk-blue);
}

.indusleep-document-funding__claim {
  margin: 20px 0 0;
  color: var(--white);
  font-weight: 800;
}

.indusleep-document-fit .indusleep-funding__steps li {
  min-height: 156px;
  padding: 16px;
}

.indusleep-document-fit .indusleep-funding__steps span {
  margin-bottom: 16px;
}

/* ---------- Projekt, Verknüpfungen, Kontakt und FAQ ---------- */

.indusleep-document-process .process-explorer__tab {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  min-height: 102px;
}

.indusleep-document-process .process-explorer__tab strong {
  overflow: visible;
  white-space: normal;
}

.indusleep-document-related .v4-service__body em {
  color: var(--falk-navy);
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.indusleep-document-contact .v4-contact__layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.62fr);
}

/* Der FAQ-Kopf läuft mit, solange die Fragenliste durchläuft – bei zwölf
   Fragen ist der Abschnitt lang genug, dass man sonst nicht mehr weiß,
   worauf sich die Antworten beziehen. Hier stand vorher static und hat
   das Mitlaufen der gemeinsamen FAQ-Variante ausgeschaltet. */
.indusleep-document-faq .faq__intro {
  position: sticky;
  top: 120px;
  align-self: start;
}

@media (max-width: 1080px) {
  .indusleep-document-faq .faq__intro {
    position: static;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .indusleep-document-split,
  .indusleep-document-split--maintenance,
  .indusleep-document-resilience__layout,
  .indusleep-document-contact .v4-contact__layout {
    grid-template-columns: 1fr;
  }

  .indusleep-document-split,
  .indusleep-document-resilience__layout {
    gap: 48px;
  }

  .indusleep-document-function__unten {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .indusleep-document-energy__visual,
  .indusleep-document-resilience .indusleep-resilience,
  .indusleep-document-maintenance__board {
    max-width: 820px;
  }
}

@media (max-width: 760px) {
  .indusleep-situation-map,
  .indusleep-document-energy__visual,
  .indusleep-document-resilience .indusleep-resilience,
  .indusleep-document-maintenance__board {
    padding: 24px;
  }

  .indusleep-document-fit__intro,
  .indusleep-document-checks,
  .indusleep-document-funding__services,
  .indusleep-document-maintenance__facts {
    grid-template-columns: 1fr;
  }

  .indusleep-document-fit__intro {
    gap: 20px;
  }

  .indusleep-document-process .process-explorer__tab {
    min-height: 112px;
  }

  .indusleep-document-related .v4-service {
    align-items: start;
  }

  .indusleep-document-related .v4-service__body small,
  .indusleep-document-related .v4-service__body em {
    display: block;
  }
}

@media (max-width: 520px) {
  .indusleep-situation-map {
    padding: 20px;
  }

  .indusleep-situation-map article {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 20px;
  }

  .indusleep-document-claim {
    padding: 20px;
    font-size: var(--fs-body);
  }
}

/* Resilienz: Der Vergleich trägt den Abschnitt, Erklärung und
   Resilienzeffekte stehen darunter nebeneinander. */
.indusleep-document-resilience__head {
  max-width: 860px;
  margin-bottom: 48px;
}

.indusleep-document-resilience__unten {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 80px;
  align-items: start;
  margin-top: 48px;
}

.indusleep-document-resilience__copy > p {
  max-width: 640px;
}

.indusleep-document-resilience__copy > p:last-child {
  margin-bottom: 0;
}

.indusleep-document-resilience__unten .haken {
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (max-width: 1080px) {
  .indusleep-document-resilience__unten {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ------------------------------------------------------------
   Ablaufgrafik mit Versorgungszustand

   Die fünf Stationen als mitlaufende Grafik (Baustein ebenen.css).
   Der eigentliche Grund für die Grafik steht rechts neben jeder
   Station: was versorgt bleibt und was abgeschaltet ist. In einer
   waagerechten Reihe sieht jede Station gleich aus – hier ist auf
   einen Blick zu sehen, dass die Steuerung durchgehend an bleibt und
   nur die Leistung geht.
   ------------------------------------------------------------ */
.indusleep-ablauf {
  padding: 48px;
}

.ablaufgrafik {
  margin: 0;
  padding: 28px;
  border-radius: var(--radius-lg);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    var(--indusleep-night, #071229);
  background-size: 56px 56px, 56px 56px, auto;
}

.ablaufgrafik figcaption {
  margin-bottom: 20px;
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ablaufgrafik__station {
  position: relative;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  transition: border-color var(--ease), background-color var(--ease);
}

.ablaufgrafik__station + .ablaufgrafik__station {
  margin-top: 8px;
}

/* Der Ruhezustand ist kein Schritt, sondern eine Strecke – deshalb
   eine gestrichelte Kante statt einer festen. */
.ablaufgrafik__station--ruhe {
  border-style: dashed;
}

.ablaufgrafik__station.ist-aktiv {
  border-color: var(--falk-blue);
  border-style: solid;
  background: rgba(0, 160, 227, 0.2);
}

.ablaufgrafik__kopf {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 8px;
}

.ablaufgrafik__kopf span {
  color: #8be0ff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}

.ablaufgrafik__kopf strong {
  color: var(--white);
  font-size: var(--fs-meta);
}

.ablaufgrafik__versorgung {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
}

.ablaufgrafik__versorgung b {
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
  font-weight: 400;
}

/* Ein Punkt je Versorgung: an oder aus. */
.ablaufgrafik__versorgung b::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  content: "";
}

.ablaufgrafik__versorgung .ist-an::before {
  background: #55dca2;
}

.ablaufgrafik__versorgung .ist-aus::before {
  background: rgba(255, 255, 255, 0.28);
}

.ablaufgrafik__dauer {
  margin: 8px 0 0;
  color: rgba(139, 224, 255, 0.8);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  .indusleep-ablauf {
    padding: 24px;
  }

  .ablaufgrafik {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ablaufgrafik__station {
    transition: none;
  }
}

/* Rückweg zum Rechner unter den Förderschritten: zwei der fünf
   Schritte kann der Besucher dort selbst vorwegnehmen. */
.indusleep-funding__rueckweg {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-meta);
}

.indusleep-funding__rueckweg a {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.indusleep-funding__rueckweg a:hover {
  color: #8be0ff;
}

/* ------------------------------------------------------------
   Fassung mit dem Rechner im Mittelpunkt
   ------------------------------------------------------------ */

/* Der Hero übergibt sofort an den Rechner: keine Nutzenzeile, dafür
   drei Marken, die sagen, worauf man sich einlässt. */
.indusleep-rechner-hero__marken {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.indusleep-rechner-hero__marken li {
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-meta);
  font-weight: 700;
}

.indusleep-rechner-hero__marken li::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #55dca2;
  content: "";
}

/* Drei Effekte, die in der Rechnung nicht auftauchen. */
.indusleep-weitere__kopf {
  max-width: 860px;
  margin-bottom: 48px;
}

.indusleep-weitere__felder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.indusleep-weitere__feld {
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}

.indusleep-weitere__nr {
  margin: 0 0 16px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.indusleep-weitere__feld h3 {
  margin: 0 0 12px;
  font-size: var(--fs-large);
  text-wrap: balance;
}

.indusleep-weitere__feld > p:not(.indusleep-weitere__nr) {
  margin: 0 0 24px;
  color: var(--text);
  font-size: var(--fs-meta);
}

.indusleep-weitere__feld .haken {
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (max-width: 1080px) {
  .indusleep-weitere__felder {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Der Rechner steht in dieser Fassung unmittelbar hinter dem Hero und
   schließt oben bündig an ihn an: Beide sind dunkel, die Kante dazwischen
   wäre eine willkürliche Linie mitten in einem Gedanken. */
.indusleep-calculator-section--fokus {
  padding-top: 64px;
}

.indusleep-calculator-section__titel {
  max-width: 860px;
  margin: 0 0 40px;
  color: var(--white);
}

/* ---------- Handlungsaufforderungen an den Entscheidungspunkten ----------

   Die Seite fragt an vier Stellen, und jede fragt etwas anderes: im
   Rechner auf der Ergebnisseite die belastbare Zahl (die steht im Modul
   selbst, direkt neben dem Ergebnis), bei der Förderung die
   Förderfähigkeit, bei der Eignung die Anlagenprüfung, am Ende des
   Ablaufs das Projekt. Gleiche Formulierung an mehreren Stellen wäre
   Wiederholung statt Angebot. */
.indusleep-funding__cta {
  margin-top: 24px;
}

.indusleep-fit__cta {
  margin-top: 24px;
}



/* ==== assets/css/components/indusleep-paket.css ==== */
/* ============================================================
   InduSLEEP® als eigenständiges Webseitenpaket (Subdomain)

   Nur die Teile, die es auf der Hauptseite nicht gibt: die
   Ankernavigation, die Geräteerklärung, das Anfrageformular und die Fußzeile.
   Alles andere – Hero, Rechnerbühne, Kopfband, Projektablauf, FAQ –
   kommt unverändert aus den Komponenten der Website, damit die
   Subdomain aussieht wie die Hauptseite und nicht wie ein Nachbau.
   ============================================================ */

/* ---------- Servicezeile ---------- */

.utilbar--paket .utilbar__inner {
  justify-content: space-between;
}

.utilbar__herkunft {
  margin-right: auto;
}

.utilbar--paket svg {
  width: 14px;
  height: 14px;
}

/* ---------- Ankernavigation ---------- */

/* Die Punkte führen zu Abschnitten, nicht zu weiteren Seiten.
   Der aktive Punkt wird beim Scrollen gesetzt
   (paket-indusleep.js) – ohne ihn wüsste niemand, wo er gerade ist. */
.nav--anker .nav__link {
  position: relative;
}

.nav--anker .nav__link.is-aktiv {
  color: var(--falk-navy);
}

.nav--anker .nav__link.is-aktiv::after {
  position: absolute;
  right: 12px;
  bottom: 4px;
  left: 12px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--falk-blue);
  content: "";
}

.indusleep-paket main > section[id] {
  scroll-margin-top: 96px;
}

@media (max-width: 1080px) {
  .utilbar__herkunft {
    display: none;
  }
}

/* ---------- Schalteinheit und Versorgungsschema ---------- */

.indusleep-hardware {
  scroll-margin-top: 96px;
}

.indusleep-hardware__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 64px;
  align-items: start;
  margin-bottom: 48px;
}

.indusleep-hardware__copy > p {
  max-width: 760px;
}

.indusleep-hardware__copy .lead {
  color: var(--ink);
}

.indusleep-hardware__integration {
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--falk-blue);
  font-weight: 700;
}

.indusleep-hardware__photo {
  margin: 0;
}

.indusleep-hardware__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.indusleep-hardware__photo figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* Einbaubeispiel über die volle Spaltenbreite, hinter dem Schema */
.indusleep-hardware__einbau {
  margin: 48px 0 0;
}

.indusleep-hardware__einbau img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.indusleep-hardware__einbau figcaption {
  max-width: 760px;
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.indusleep-hardware__photo a {
  color: var(--falk-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.indusleep-schema {
  margin: 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft);
  --schema-live: #22649b;
  --schema-power: #7b8795;
}

.indusleep-schema[data-mode="production"] {
  --schema-power: var(--schema-live);
}

.indusleep-schema__head {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.indusleep-schema__eyebrow {
  margin: 0 0 8px;
  color: var(--falk-navy);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.indusleep-schema__head h3 {
  max-width: 580px;
  margin: 0;
  font-size: var(--fs-large);
  line-height: 1.4;
}

.indusleep-schema__switch {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
}

.indusleep-schema__switch[hidden] {
  display: none;
}

.indusleep-schema__switch button {
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-meta);
  font-weight: 700;
}

.indusleep-schema__switch button[aria-pressed="true"] {
  background: var(--falk-navy);
  color: var(--white);
}

.indusleep-schema__switch button:focus-visible,
.indusleep-hardware__detail:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 4px;
}

.indusleep-schema__flow {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) 64px minmax(0, 0.9fr) 88px minmax(0, 1.5fr);
  align-items: center;
}

.indusleep-schema__supply {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.indusleep-schema__supply svg {
  width: 64px;
  height: 80px;
  margin-bottom: 8px;
  color: var(--falk-navy);
}

.indusleep-schema__supply strong {
  color: var(--ink);
  font-size: var(--fs-body);
}

.indusleep-schema__supply > span {
  font-size: var(--fs-small);
}

.indusleep-schema__inlet {
  position: relative;
  height: 3px;
  background: var(--schema-live);
}

.indusleep-schema__inlet::after {
  position: absolute;
  top: -4px;
  right: 2px;
  width: 9px;
  height: 9px;
  border-top: 3px solid var(--schema-live);
  border-right: 3px solid var(--schema-live);
  content: "";
  transform: rotate(45deg);
}

.indusleep-schema__unit {
  display: grid;
  justify-items: center;
  padding: 24px 16px;
  border: 1px solid var(--falk-navy);
  border-radius: var(--radius);
  background: var(--navy-deep);
  color: var(--white);
  text-align: center;
}

.indusleep-schema__unit-label {
  font-size: var(--fs-small);
}

.indusleep-schema__cabinet {
  width: 120px;
  height: 132px;
  margin: 12px 0;
}

.indusleep-schema__unit > strong {
  font-size: var(--fs-large);
}

.indusleep-schema__unit > p {
  margin: 4px 0 0;
  color: #cddbeb;
  font-size: var(--fs-small);
}

.indusleep-schema[data-mode="production"] .indusleep-schema__lamp {
  fill: #1d7359;
}

.indusleep-schema__branches svg {
  display: block;
  width: 100%;
  height: 280px;
}

.indusleep-schema__control-line {
  stroke: var(--schema-live);
}

.indusleep-schema__power-line {
  stroke: var(--schema-power);
  stroke-dasharray: 6 5;
}

.indusleep-schema[data-mode="production"] .indusleep-schema__power-line {
  stroke-dasharray: none;
}

.indusleep-schema__plant {
  position: relative;
  display: grid;
  gap: 24px;
}

.indusleep-schema__plant-label {
  position: absolute;
  top: -32px;
  left: 0;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 700;
}

.indusleep-schema__consumer {
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 128px;
  padding: 16px 20px;
  border: 1px solid #bbd1e4;
  border-left: 3px solid var(--schema-live);
  border-radius: var(--radius);
  background: var(--white);
}

.indusleep-schema__consumer-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
}

.indusleep-schema__consumer-head > strong {
  color: var(--ink);
  font-size: var(--fs-body);
}

.indusleep-schema__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #185e49;
  font-size: var(--fs-small);
  font-weight: 700;
}

.indusleep-schema__status::before {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.indusleep-schema__consumer p {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.indusleep-schema__consumer small {
  color: #536377;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.indusleep-schema__consumer--power {
  border-left-color: var(--schema-power);
}

.indusleep-schema[data-mode="pause"] .indusleep-schema__consumer--power {
  border-style: dashed;
  border-color: var(--schema-power);
  background: #edf0f4;
}

.indusleep-schema[data-mode="pause"] .indusleep-schema__consumer--power .indusleep-schema__status {
  color: #536377;
}

.indusleep-schema__explanation {
  margin: 28px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--falk-blue);
  background: var(--white);
  color: var(--text);
  font-size: var(--fs-body);
}

.indusleep-schema__explanation strong {
  color: var(--ink);
}

.indusleep-schema > figcaption {
  margin-top: 16px;
  color: #536377;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.indusleep-hardware__detail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: var(--falk-navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.indusleep-hardware__detail svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@media (max-width: 1080px) {
  .indusleep-hardware__intro {
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) 200px;
  }

  .indusleep-schema__flow {
    grid-template-columns: minmax(0, 0.65fr) 32px minmax(0, 0.9fr) 48px minmax(0, 1.5fr);
  }
}

@media (max-width: 760px) {
  .indusleep-hardware__intro {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Mobil: Foto über die volle Breite, Bildunterschrift darüber */
  .indusleep-hardware__photo {
    display: flex;
    flex-direction: column;
  }

  .indusleep-hardware__photo figcaption {
    order: -1;
    margin: 0 0 12px;
  }

  /* Hochformat über die volle Breite wäre bis zu 900px hoch: auf 4:3
     zuschneiden, die Schalteinheit mit ihren Leuchten bleibt im Bild */
  .indusleep-hardware__photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 10%;
  }

  /* Auf Handybreite wäre die Einheit im Schaltschrankbild nur noch ein
     Fleck: Ausschnitt auf die linke Hälfte, dort sitzt sie. */
  .indusleep-hardware__einbau img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 22% 50%;
  }

  .indusleep-hardware__einbau {
    margin-top: 32px;
  }
}

@media (max-width: 900px) {
  .indusleep-schema {
    padding: 24px;
  }

  .indusleep-schema__head {
    flex-direction: column;
    align-items: start;
    margin-bottom: 32px;
  }

  .indusleep-schema__flow {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .indusleep-schema__supply {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
    justify-items: start;
    text-align: left;
  }

  .indusleep-schema__supply svg {
    grid-row: span 2;
    width: 48px;
    height: 56px;
    margin: 0;
  }

  .indusleep-schema__supply strong {
    align-self: end;
  }

  .indusleep-schema__inlet {
    width: 3px;
    height: 40px;
  }

  .indusleep-schema__inlet::after {
    top: auto;
    right: -4px;
    bottom: 2px;
    transform: rotate(135deg);
  }

  .indusleep-schema__unit {
    width: 100%;
    max-width: 280px;
  }

  .indusleep-schema__branches {
    width: 3px;
    height: 40px;
    background: var(--schema-live);
  }

  .indusleep-schema__branches svg {
    display: none;
  }

  .indusleep-schema__plant {
    width: 100%;
    gap: 16px;
    padding-left: 16px;
    border-left: 3px solid var(--schema-live);
  }

  .indusleep-schema__plant-label {
    position: static;
    padding: 8px 0 0;
  }

  .indusleep-schema__plant::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: 3px solid var(--schema-live);
    content: "";
  }

  .indusleep-schema__consumer {
    position: relative;
    min-height: 0;
    padding: 16px;
  }

  .indusleep-schema__consumer::before {
    position: absolute;
    top: 50%;
    left: -20px;
    width: 18px;
    border-top: 3px solid var(--schema-live);
    content: "";
  }

  .indusleep-schema__consumer--power::before {
    border-color: var(--schema-power);
  }

  .indusleep-schema[data-mode="pause"] .indusleep-schema__consumer--power::before {
    border-top-style: dashed;
  }

  .indusleep-schema__explanation {
    padding: 16px;
  }
}

@media (max-width: 380px) {
  .indusleep-schema {
    padding: 16px;
  }
}

/* ---------- Kontaktabschnitt ---------- */

.paket-kontakt__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
  margin-top: 40px;
  align-items: start;
}

.paket-kontakt__seite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  overflow-wrap: anywhere;
}

/* Die Verweisgruppen dürfen auch in einen 320px-Viewport passen. */
.indusleep-paket .verweise__gruppen {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.paket-hilfe .haken {
  grid-template-columns: minmax(0, 1fr);
}

.paket-karte {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.paket-karte__label {
  margin: 0 0 4px;
  color: var(--falk-blue);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paket-karte h3 {
  margin: 0 0 16px;
  font-size: var(--fs-large);
}

.paket-karte__zeilen {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: var(--fs-meta);
}

.paket-karte__zeilen li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: center;
}

.paket-karte__zeilen svg {
  width: 18px;
  height: 18px;
  color: var(--falk-navy);
}

.paket-karte__zeilen a {
  color: var(--ink);
  font-weight: 700;
}

.paket-karte__zeilen a:hover {
  color: var(--falk-navy);
}

.paket-hilfe {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.paket-hilfe__label {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 800;
}

.paket-hilfe__hinweis {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* ---------- Formular ---------- */

.paket-form {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.paket-form__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.field {
  display: grid;
  gap: 8px;
}

.field--full {
  grid-column: 1 / -1;
}

/* Honeypot: für Menschen unsichtbar, Bots füllen es aus. */
.field--hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field label {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 800;
}

.req {
  color: var(--falk-blue);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--white);
  appearance: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7788' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}

.field textarea {
  min-height: 128px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--falk-blue);
  box-shadow: 0 0 0 3px rgba(0, 160, 227, 0.16);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #d24a43;
}

.field__error {
  display: none;
  color: #c8362f;
  font-size: var(--fs-label);
  font-weight: 700;
}

.field__error.is-visible {
  display: block;
}

.upload {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px dashed rgba(34, 58, 142, 0.3);
  border-radius: var(--radius);
  background: var(--soft);
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease);
}

.upload:hover {
  border-color: var(--falk-blue);
  background: var(--soft-2);
}

/* Während eine Datei über der Fläche schwebt (paket-indusleep.js).
   Ohne sichtbare Rückmeldung weiß niemand, ob er loslassen darf. */
.upload.ist-ziel {
  border-color: var(--falk-blue);
  border-style: solid;
  background: var(--soft-2);
  box-shadow: 0 0 0 3px rgba(0, 160, 227, 0.16);
}

.upload svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--falk-navy);
}

.upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.upload__text {
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 700;
}

.upload__hint {
  display: block;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
}

/* Ausgewählte Anhänge, jeder einzeln entfernbar (paket-indusleep.js) */
.upload-liste {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.upload-liste__eintrag {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.upload-liste__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-liste__groesse {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-label);
}

.upload-liste__entfernen {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--falk-navy);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.upload-liste__entfernen:hover {
  background: var(--soft);
}

.upload-liste__entfernen:focus-visible {
  outline: 2px solid var(--falk-blue);
  outline-offset: 2px;
}

/* Die Zustimmung ist Fließtext, keine Feldbeschriftung: ohne die
   höhere Gewichtung des Selektors gewinnt .field label und macht den
   Datenschutzsatz fett und dunkel wie ein Label. */
.field label.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 500;
}

.check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--falk-navy);
}

.check a {
  color: var(--falk-navy);
  font-weight: 800;
  text-decoration: underline;
}

.form__failure {
  display: none;
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px solid rgba(210, 74, 67, 0.4);
  border-radius: var(--radius);
  color: #a12822;
  background: rgba(210, 74, 67, 0.07);
  font-size: var(--fs-meta);
  font-weight: 700;
}

.form__failure.is-visible {
  display: block;
}

.form__failure a {
  color: inherit;
  text-decoration: underline;
}

.form__submit {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
}

.form__hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-small);
}

.form__success {
  display: none;
  padding: 48px 32px;
  border: 1px solid rgba(31, 157, 115, 0.3);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: center;
}

.form__success.is-visible {
  display: block;
}

.form__success svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--green);
}

.form__success h3 {
  margin: 0 0 8px;
}

.form__success p {
  margin: 0;
  color: var(--muted);
}

.form__success a {
  color: var(--falk-navy);
  font-weight: 800;
}

/* ---------- Fußzeile ---------- */

.footer--paket .footer__grid {
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .paket-kontakt__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer--paket .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .paket-form__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .paket-form,
  .paket-karte,
  .paket-hilfe {
    padding: 24px;
  }

  .form__submit .btn {
    width: 100%;
  }

  .footer--paket .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==== assets/css/components/unternehmen.css ==== */
/* ============================================================
   Unternehmensseiten

   Vorlage für „Falk im Überblick“ und die weiteren Seiten des
   Unternehmensbereichs. Sie folgt denselben Regeln wie die Lösungs-
   und Produktdetailseiten: ein Kopfband trennt den Inhaltsteil vom
   Einleitungsteaser, ruhige Flächen und Rasterfelder wechseln sich
   ab, dunkel ist nur der Kontaktabschluss.

   Zwei Bausteine sind hier neu: die Personenliste und der Zeitstrahl.
   Beide sind so gebaut, dass sie mit unvollständigen Angaben
   funktionieren – auf dieser Seite fehlen Namen, Fotos und die
   Meilensteine zwischen 1993 und heute noch.
   ============================================================ */

/* ------------------------------------------------------------
   Unternehmensprofil: Text und Motiv
   ------------------------------------------------------------ */
.company-profile-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
  gap: 80px;
  align-items: center;
}

.company-profile-intro__copy > p:not(.eyebrow) {
  max-width: 640px;
}

.company-profile-intro__claim {
  margin-top: 32px;
  padding: 20px 24px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  background: rgba(237, 246, 250, 0.84);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
}

.company-profile-intro__bild {
  margin: 0;
}

.company-profile-intro__bild img {
  display: block;
  width: 100%;
  height: 420px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.company-profile-intro__bild figcaption {
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------
   Was Falk ausmacht: vier Schwerpunkte auf einer Tafel
   ------------------------------------------------------------ */
.company-traits__tafel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-trait {
  padding: 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.company-trait:nth-child(2n) {
  border-right: 0;
}

.company-trait:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.company-trait__nr {
  margin: 0 0 16px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.company-trait h3 {
  margin: 0 0 12px;
  font-size: var(--fs-large);
  text-wrap: balance;
}

.company-trait p:not(.company-trait__nr) {
  max-width: 480px;
  margin: 0;
  color: var(--text);
  font-size: var(--fs-meta);
}

/* ------------------------------------------------------------
   Team und Standorte
   ------------------------------------------------------------ */
.company-team__kopf {
  max-width: 860px;
  margin-bottom: 48px;
}

.company-team__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.86fr);
  gap: 80px;
  align-items: start;
}

/* Die Personenliste steht bewusst ohne Namen: Funktionen sind
   gesichert, Namen und Fotos kommen von Falk. Der graue Platz für das
   Foto zeigt, dass dort eines hingehört – eine erfundene Person wäre
   die schlechtere Lösung. */
.company-personen {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-personen li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.company-person__bild {
  display: block;
  width: 56px;
  height: 56px;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
  background: var(--soft);
}

.company-person__text strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-body);
}

.company-person__text small {
  color: var(--muted);
  font-size: var(--fs-small);
}

.company-standorte__text {
  margin: 0 0 32px;
  color: var(--text);
  font-size: var(--fs-meta);
}

.company-standort {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.company-standort + .company-standort {
  margin-top: 16px;
}

.company-standort__art {
  margin: 0 0 8px;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.company-standort h3 {
  margin: 0 0 12px;
  font-size: var(--fs-large);
}

.company-standort address {
  color: var(--text);
  font-size: var(--fs-meta);
  font-style: normal;
  line-height: var(--lh-body);
}

.company-standorte .btn {
  margin-top: 32px;
}

/* ------------------------------------------------------------
   Zeitstrahl

   Drei Stationen auf einer Linie. Die mittlere ist gestrichelt: dort
   fehlen die Meilensteine noch. Eine Lücke zu zeigen ist ehrlicher,
   als sie mit abgeleiteten Jahreszahlen zu füllen – und sie erinnert
   daran, dass hier etwas nachzutragen ist.
   ------------------------------------------------------------ */
.zeitstrahl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zeitstrahl > li {
  position: relative;
  padding-top: 40px;
}

/* Die Linie läuft über alle Stationen; der Punkt sitzt darauf. */
.zeitstrahl > li::before {
  position: absolute;
  top: 7px;
  right: -40px;
  left: 0;
  border-top: 1px solid var(--line-strong);
  content: "";
}

.zeitstrahl > li:last-child::before {
  right: 0;
}

.zeitstrahl > li::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border: 4px solid var(--falk-blue);
  border-radius: 50%;
  background: var(--white);
  content: "";
}

/* Beide Abschnitte zwischen Gründung und heute sind unbestätigt –
   also ist die ganze Strecke gestrichelt, nicht nur ein Stück davon.
   Die Regeln stehen mit .zeitstrahl > li, weil sie sonst gegen die
   Grundform verlieren. */
.zeitstrahl > li:first-child::before,
.zeitstrahl > li.zeitstrahl__luecke::before {
  border-top-style: dashed;
}

.zeitstrahl > li.zeitstrahl__luecke::after {
  border-color: var(--line-strong);
}

.zeitstrahl__jahr {
  margin: 0 0 12px;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-large);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.zeitstrahl__luecke .zeitstrahl__jahr {
  color: var(--muted);
}

.zeitstrahl h3 {
  margin: 0 0 12px;
  font-size: var(--fs-large);
  text-wrap: balance;
}

.zeitstrahl p:not(.zeitstrahl__jahr) {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-meta);
}

.zeitstrahl__luecke p:not(.zeitstrahl__jahr),
.zeitstrahl__luecke h3 {
  color: var(--muted);
}

/* ------------------------------------------------------------
   Flächensystematik der Unternehmensseiten
   ------------------------------------------------------------ */
.company-profile {
  --raster: 56px;
  --raster-hell: rgba(34, 58, 142, 0.05);
  --raster-dunkel: rgba(0, 160, 227, 0.08);
  --flaeche-dunkel: #0c1d43;
}

.company-profile .company-hero .subpage-hero__media::after {
  background:
    linear-gradient(90deg, var(--raster-dunkel) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-dunkel) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 16, 40, 0.96) 0%, rgba(10, 31, 70, 0.9) 54%, rgba(34, 58, 142, 0.7) 100%);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

/* Der Einleitungsteaser bekommt den cyanfarbenen Schein wie auf den
   übrigen Seiten – die einzige Lichtquelle der Seite. */
.company-profile .company-profile-intro {
  background:
    radial-gradient(ellipse at 86% 24%, rgba(0, 160, 227, 0.16), transparent 40%),
    linear-gradient(90deg, var(--raster-hell) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-hell) 1px, transparent 1px),
    var(--soft);
  background-size: auto, var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

/* Die Verweiskarten stehen als weiße Tafel auf einer eigenen Fläche –
   auf Weiß wäre die Tafel keine. --soft-2 setzt sie zugleich vom
   grauen Rasterfeld der Historie darüber ab. */
.company-profile .company-links {
  background:
    linear-gradient(90deg, var(--raster-hell) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-hell) 1px, transparent 1px),
    var(--soft-2);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

.company-profile .company-history {
  background:
    linear-gradient(90deg, var(--raster-hell) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-hell) 1px, transparent 1px),
    var(--soft);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

.company-profile .solution-contact {
  background:
    linear-gradient(90deg, var(--raster-dunkel) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-dunkel) 1px, transparent 1px),
    var(--flaeche-dunkel);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

.company-profile .solution-contact::after {
  display: none;
}

.company-profile .footer--dunkel {
  background: var(--flaeche-dunkel);
}

@media (max-width: 1080px) {
  .company-profile-intro__layout,
  .company-team__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .zeitstrahl {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Untereinander läuft die Linie senkrecht an der linken Kante. */
  .zeitstrahl > li {
    padding: 0 0 0 40px;
  }

  .zeitstrahl > li::before {
    top: 8px;
    right: auto;
    bottom: -32px;
    left: 7px;
    border-top: 0;
    border-left: 1px solid var(--line-strong);
  }

  .zeitstrahl > li:last-child::before {
    bottom: auto;
    height: 0;
  }

  .zeitstrahl > li:first-child::before,
  .zeitstrahl > li.zeitstrahl__luecke::before {
    border-top-style: solid;
    border-left-style: dashed;
  }
}

@media (max-width: 760px) {
  .company-traits__tafel {
    grid-template-columns: 1fr;
  }

  .company-trait {
    padding: 28px;
    border-right: 0;
  }

  .company-trait:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .company-trait:last-child {
    border-bottom: 0;
  }

  .company-profile-intro__bild img {
    height: 280px;
  }
}


/* ==== assets/css/components/projektewissen.css ==== */
/* ============================================================
   Projekte & Wissen – Übersicht

   Kurze Navigationsseite auf Grundlage von
   Texte/05_00_Projekte_und_Wissen_Uebersicht.docx. Vier gleichwertige
   Ziele stehen auf einer geschlossenen Tafel; der Patentverweis bleibt
   bewusst sekundär.
   ============================================================ */

.knowledge-overview {
  --knowledge-grid-size: 56px;
  --knowledge-topics-cutoff: 392px;
}

.knowledge-overview main {
  background: var(--white);
}

.knowledge-overview h1,
.knowledge-overview h2,
.knowledge-overview h3 {
  hyphens: manual;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------
   Kompakter Hero
   ------------------------------------------------------------ */
.knowledge-overview .knowledge-hero,
.knowledge-overview .knowledge-hero .subpage-hero__content {
  min-height: 440px;
}

.knowledge-overview .knowledge-hero .subpage-hero__content {
  padding: 64px 0;
}

.knowledge-overview .knowledge-hero .subpage-hero__breadcrumb {
  margin-bottom: 32px;
}

.knowledge-overview .knowledge-hero .hero__media::after {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 16, 40, 0.97) 0%, rgba(10, 31, 70, 0.92) 56%, rgba(34, 58, 142, 0.72) 100%);
  background-size: var(--knowledge-grid-size) var(--knowledge-grid-size), var(--knowledge-grid-size) var(--knowledge-grid-size), auto;
}

.knowledge-overview .knowledge-hero h1 {
  max-width: 820px;
}

.knowledge-overview .knowledge-hero .subpage-hero__lead {
  max-width: 720px;
  margin-bottom: 24px;
}

/* ------------------------------------------------------------
   Einleitung: Projektpraxis wird zu nutzbarem Wissen
   ------------------------------------------------------------ */
.knowledge-intro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 86% 24%, rgba(0, 160, 227, 0.14), transparent 40%),
    linear-gradient(90deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    #f7fafc;
  background-size: auto, var(--knowledge-grid-size) var(--knowledge-grid-size), var(--knowledge-grid-size) var(--knowledge-grid-size), auto;
}

.knowledge-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 80px;
  align-items: stretch;
}

.knowledge-intro__copy {
  align-self: center;
}

.knowledge-intro__copy h2,
.knowledge-intro__copy > p:not(.eyebrow) {
  max-width: 760px;
}

.knowledge-intro__claim {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  background: rgba(237, 246, 250, 0.84);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
}

.knowledge-intro__figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(34, 58, 142, 0.14);
  border-radius: var(--radius-lg);
  background: var(--soft-2);
  box-shadow: 0 20px 56px rgba(15, 30, 70, 0.12);
}

.knowledge-intro__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  object-position: center;
}

/* ------------------------------------------------------------
   Vier gleichwertige Themenbereiche
   ------------------------------------------------------------ */
.knowledge-topics {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #0c1d43 0 var(--knowledge-topics-cutoff), #eaf1f6 var(--knowledge-topics-cutoff) 100%);
  background-size: var(--knowledge-grid-size) var(--knowledge-grid-size), var(--knowledge-grid-size) var(--knowledge-grid-size), auto;
}

.knowledge-topics__head {
  margin-bottom: 56px;
}

.knowledge-topics__head .eyebrow,
.knowledge-topics__head h2 {
  color: var(--white);
}

.knowledge-topics__head .eyebrow::after {
  background: var(--falk-blue);
}

.knowledge-topics__head .lead {
  color: rgba(255, 255, 255, 0.72);
}

.knowledge-topics__board {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(198, 205, 216, 0.8);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.18);
}

.knowledge-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 380px;
  flex-direction: column;
  padding: 40px;
  background: var(--white);
  box-shadow: inset -1px -1px 0 var(--line);
  transition: background-color var(--ease);
}

.knowledge-card::before {
  position: absolute;
  top: 0;
  right: 40px;
  left: 40px;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--falk-blue) 0 56px, rgba(0, 160, 227, 0.14) 56px 100%);
}

.knowledge-card:hover {
  background: #edf8fc;
}

.knowledge-card__icon {
  display: grid;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  place-items: center;
  margin-bottom: 32px;
  border: 1px solid rgba(0, 160, 227, 0.32);
  border-radius: var(--radius);
  color: var(--falk-navy);
  background: rgba(0, 160, 227, 0.08);
}

.knowledge-card__icon svg {
  width: 36px;
  height: 36px;
}

.knowledge-card__body {
  display: grid;
  gap: 16px;
}

.knowledge-card__body > strong {
  color: var(--ink);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-heading);
}

.knowledge-card__body > span {
  color: var(--muted);
  line-height: var(--lh-body);
}

.knowledge-card__link {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 32px;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 800;
}

.knowledge-card__link svg,
.knowledge-patent__target svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: color var(--ease), transform var(--ease);
}

.knowledge-card:hover .knowledge-card__link svg,
.knowledge-patent__link:hover .knowledge-patent__target svg {
  color: var(--falk-blue);
  transform: translateX(4px);
}

.knowledge-card:focus-visible,
.knowledge-patent__link:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--falk-blue);
  outline-offset: -3px;
}

/* ------------------------------------------------------------
   Sekundärer Patentverweis
   ------------------------------------------------------------ */
.knowledge-patent {
  position: relative;
  overflow: hidden;
  padding: 0 0 96px;
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.05) 1px, transparent 1px),
    #eaf1f6;
  background-size: var(--knowledge-grid-size) var(--knowledge-grid-size), var(--knowledge-grid-size) var(--knowledge-grid-size), auto;
}

.knowledge-patent__link {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(200px, auto);
  gap: 32px;
  align-items: center;
  padding: 32px;
  border: 1px solid rgba(34, 58, 142, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(15, 30, 70, 0.08);
  transition: border-color var(--ease), background-color var(--ease);
}

.knowledge-patent__link:hover {
  border-color: rgba(0, 160, 227, 0.48);
  background: var(--white);
}

.knowledge-patent__icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: var(--radius);
  color: var(--falk-navy);
  background: var(--soft);
}

.knowledge-patent__icon svg {
  width: 36px;
  height: 36px;
}

.knowledge-patent__body {
  display: grid;
  gap: 8px;
}

.knowledge-patent__body .eyebrow {
  margin-bottom: 4px;
}

.knowledge-patent__body > strong {
  color: var(--ink);
  font-size: var(--fs-large);
}

.knowledge-patent__body > span:last-child {
  max-width: 720px;
  color: var(--muted);
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
}

.knowledge-patent__target {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  color: var(--falk-navy);
  font-size: var(--fs-small);
  font-weight: 800;
}

@media (max-width: 1080px) {
  .knowledge-intro__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .knowledge-intro__figure {
    max-width: 820px;
  }

  .knowledge-intro__figure img {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .knowledge-patent__link {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .knowledge-patent__target {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .knowledge-overview {
    --knowledge-grid-size: 48px;
    --knowledge-topics-cutoff: 400px;
  }

  .knowledge-overview .knowledge-hero,
  .knowledge-overview .knowledge-hero .subpage-hero__content {
    min-height: 500px;
  }

  .knowledge-topics__head {
    margin-bottom: 40px;
  }

  .knowledge-intro__layout {
    gap: 32px;
  }

  .knowledge-topics__board {
    grid-template-columns: 1fr;
  }

  .knowledge-card {
    min-height: 0;
    padding: 32px 24px;
  }

  .knowledge-card::before {
    right: 24px;
    left: 24px;
  }

  .knowledge-card__icon {
    margin-bottom: 24px;
  }

  .knowledge-card__link {
    padding-top: 24px;
  }

  .knowledge-patent {
    padding-bottom: 64px;
  }

  .knowledge-patent__link {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }

  .knowledge-patent__target {
    grid-column: 1;
    justify-content: space-between;
  }
}

@media (max-width: 520px) {
  .knowledge-overview {
    --knowledge-topics-cutoff: 448px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knowledge-card,
  .knowledge-card__link svg,
  .knowledge-patent__link,
  .knowledge-patent__target svg {
    transition: none;
  }
}


/* ==== assets/css/components/referenzenuebersicht.css ==== */
/* ============================================================
   Projekte & Referenzen

   Dokumentgetreue Referenzseite auf Grundlage von
   Texte/05_01_Projekte_und_Referenzen.docx. Die Filterlogik stammt
   konzeptionell aus modules/falk-referenzen-filter-template-casestudies.html;
   Gestaltung und Flächen folgen der aktuellen Falk-Rastersystematik.
   ============================================================ */

.reference-overview {
  --reference-grid-size: 56px;
  --reference-index-overlap: 56px;
}

.reference-overview main {
  background: var(--white);
}

.reference-overview h1,
.reference-overview h2,
.reference-overview h3 {
  hyphens: manual;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.reference-overview .reference-hero .hero__media::after {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 16, 40, 0.98) 0%, rgba(10, 31, 70, 0.93) 54%, rgba(34, 58, 142, 0.62) 100%);
  background-size: var(--reference-grid-size) var(--reference-grid-size), var(--reference-grid-size) var(--reference-grid-size), auto;
}

.reference-overview .reference-hero .hero__media img {
  object-position: center 58%;
}

.reference-overview .reference-hero h1 {
  max-width: 920px;
}

.reference-overview .reference-hero .subpage-hero__lead {
  max-width: 780px;
}

/* ------------------------------------------------------------
   Redaktioneller Einstieg
   ------------------------------------------------------------ */
.reference-intro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 86% 24%, rgba(0, 160, 227, 0.14), transparent 40%),
    linear-gradient(90deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    #f7fafc;
  background-size: auto, var(--reference-grid-size) var(--reference-grid-size), var(--reference-grid-size) var(--reference-grid-size), auto;
}

.reference-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 80px;
  align-items: center;
}

.reference-intro__copy > p:not(.eyebrow) {
  max-width: 780px;
}

.reference-intro__claim,
.reference-scope__claim {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--falk-blue);
  color: var(--falk-navy);
  background: rgba(237, 246, 250, 0.9);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
}

.reference-intro__requirements {
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(34, 58, 142, 0.14);
  border-radius: var(--radius-lg);
  background: var(--line);
  box-shadow: 0 20px 56px rgba(15, 30, 70, 0.12);
}

.reference-intro__label {
  margin: 0;
  padding: 24px 32px;
  border-bottom: 1px solid var(--line);
  color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.09) 1px, transparent 1px),
    #0c1d43;
  background-size: var(--reference-grid-size) var(--reference-grid-size);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reference-requirement {
  display: grid;
  grid-template-columns: minmax(112px, 0.32fr) minmax(0, 1fr);
  gap: 8px 24px;
  padding: 28px 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
}

.reference-requirement:last-child {
  border-bottom: 0;
}

.reference-requirement > span {
  grid-row: 1 / span 2;
  color: var(--falk-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reference-requirement strong {
  color: var(--ink);
  font-size: var(--fs-large);
  line-height: var(--lh-heading);
}

.reference-requirement small {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* ------------------------------------------------------------
   Filterbares Projektverzeichnis
   ------------------------------------------------------------ */
.reference-index {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 0 var(--section-space);
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.05) 1px, transparent 1px),
    #eaf1f6;
  background-size: var(--reference-grid-size) var(--reference-grid-size), var(--reference-grid-size) var(--reference-grid-size), auto;
}

.reference-index__band {
  padding: var(--section-space) 0 var(--reference-index-overlap);
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    #0c1d43;
  background-size: var(--reference-grid-size) var(--reference-grid-size), var(--reference-grid-size) var(--reference-grid-size), auto;
}

.reference-index__head {
  margin-bottom: 0;
}

.reference-index__head .eyebrow,
.reference-index__head h2 {
  color: var(--white);
}

.reference-index__head .eyebrow::after {
  background: var(--falk-blue);
}

.reference-index__head .lead {
  color: rgba(255, 255, 255, 0.72);
}

.reference-index__body {
  position: relative;
  margin-top: calc(var(--reference-index-overlap) * -1);
}

.reference-explorer {
  overflow: hidden;
  border: 1px solid rgba(198, 205, 216, 0.8);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.18);
}

.reference-filters {
  display: grid;
  gap: 24px;
  padding: 32px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.04) 1px, transparent 1px),
    #f7fafc;
  background-size: var(--reference-grid-size) var(--reference-grid-size), var(--reference-grid-size) var(--reference-grid-size), auto;
}

.reference-filter {
  display: grid;
  gap: 12px;
}

.reference-filter__label {
  margin: 0;
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reference-filter__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reference-filter__button {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(34, 58, 142, 0.18);
  border-radius: var(--radius-pill);
  color: var(--falk-navy);
  background: var(--white);
  font-size: var(--fs-small);
  font-weight: 750;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background-color var(--ease);
}

.reference-filter__button:hover {
  border-color: rgba(0, 160, 227, 0.58);
  background: #edf8fc;
}

.reference-filter__button.is-active {
  border-color: var(--falk-navy);
  color: var(--white);
  background: var(--falk-navy);
}

.reference-filter__button:focus-visible {
  outline: 3px solid var(--falk-blue);
  outline-offset: 3px;
}

.reference-explorer__result {
  margin: 0;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reference-projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 32px;
  background: var(--white);
}

.reference-project {
  display: grid;
  min-width: 0;
  overflow: hidden;
  grid-template-rows: 240px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.reference-project[hidden] {
  display: none !important;
}

.reference-project--case {
  min-height: 520px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(320px, 0.84fr) minmax(0, 1.16fr);
  grid-template-rows: 1fr;
  border-color: rgba(34, 58, 142, 0.2);
  background: #f7fafc;
}

.reference-project--case-reverse .reference-project__media {
  order: 2;
}

.reference-project__media {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  place-items: center;
  color: #8be0ff;
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.1) 1px, transparent 1px),
    #0c1d43;
  background-size: 48px 48px;
}

.reference-project__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reference-project--case .reference-project__media img {
  min-height: 520px;
}

.reference-project--case-reverse .reference-project__media img {
  object-position: center 36%;
}

.reference-project__media svg {
  width: min(84%, 520px);
  height: auto;
}

.reference-project__media > span {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reference-project__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 32px;
}

.reference-project--case .reference-project__body {
  justify-content: center;
  padding: 48px;
}

.reference-project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 16px;
}

.reference-project__label {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  color: var(--white);
  background: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reference-project__kicker {
  color: var(--falk-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reference-project h3 {
  margin-bottom: 16px;
  color: var(--ink);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-heading);
}

.reference-project--case h3 {
  font-size: var(--fs-h3);
}

.reference-project__body > p {
  margin-bottom: 24px;
  color: var(--muted);
  line-height: var(--lh-body);
}

.reference-project__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}

.reference-project__facts > div {
  padding: 16px;
  border: 1px solid rgba(34, 58, 142, 0.14);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.reference-project__facts strong,
.reference-project__facts span {
  display: block;
}

.reference-project__facts strong {
  margin-bottom: 4px;
  color: var(--falk-navy);
  font-size: var(--fs-meta);
}

.reference-project__facts span {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.reference-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.reference-project__tags li {
  padding: 8px 12px;
  border: 1px solid rgba(34, 58, 142, 0.12);
  border-radius: var(--radius-pill);
  color: var(--falk-navy);
  background: var(--soft);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
}

.reference-project__tags li::before {
  display: none;
}

.reference-explorer__empty {
  display: grid;
  gap: 8px;
  margin: 0 32px 32px;
  padding: 32px;
  border: 1px dashed rgba(34, 58, 142, 0.28);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  background: var(--soft);
}

.reference-explorer__empty[hidden] {
  display: none;
}

.reference-explorer__empty strong {
  color: var(--falk-navy);
  font-size: var(--fs-large);
}

/* ------------------------------------------------------------
   Weitere Projekterfahrung
   ------------------------------------------------------------ */
.reference-scope {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    var(--white);
  background-size: var(--reference-grid-size) var(--reference-grid-size), var(--reference-grid-size) var(--reference-grid-size), auto;
}

.reference-scope__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: 80px;
  align-items: center;
}

.reference-scope__copy > p:not(.eyebrow) {
  max-width: 720px;
}

.reference-scope__fields {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(34, 58, 142, 0.18);
  border-radius: var(--radius-lg);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.09) 1px, transparent 1px),
    #0c1d43;
  background-size: var(--reference-grid-size) var(--reference-grid-size), var(--reference-grid-size) var(--reference-grid-size), auto;
  box-shadow: 0 24px 64px rgba(15, 30, 70, 0.18);
}

.reference-scope__fields > div {
  padding: 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.reference-scope__fields > div:last-child {
  border-right: 0;
}

.reference-scope__fields h3 {
  margin-bottom: 24px;
  color: var(--white);
  font-size: var(--fs-large);
}

.reference-scope__fields ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reference-scope__fields li {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
}

.reference-scope__fields li::before {
  display: none;
}

/* ------------------------------------------------------------
   Patente und Publikationen
   ------------------------------------------------------------ */
.reference-knowledge {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.05) 1px, transparent 1px),
    #eaf1f6;
  background-size: var(--reference-grid-size) var(--reference-grid-size), var(--reference-grid-size) var(--reference-grid-size), auto;
}

/* ------------------------------------------------------------
   Kontakt und FAQ
   ------------------------------------------------------------ */
.reference-contact {
  background:
    linear-gradient(90deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 227, 0.08) 1px, transparent 1px),
    #0c1d43;
  background-size: var(--reference-grid-size) var(--reference-grid-size), var(--reference-grid-size) var(--reference-grid-size), auto;
}

.reference-contact::after {
  display: none;
}

.reference-faq {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 58, 142, 0.045) 1px, transparent 1px),
    var(--white);
  background-size: var(--reference-grid-size) var(--reference-grid-size), var(--reference-grid-size) var(--reference-grid-size), auto;
}

.reference-faq .faq__intro {
  position: static;
}

.reference-faq .faq__list {
  gap: 12px;
  border-top: 0;
}

.reference-faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
}

.reference-faq details[open] {
  border-color: rgba(0, 160, 227, 0.38);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.08);
}

.reference-faq .faq--luftig summary {
  padding: 24px 28px;
}

.reference-faq .faq--luftig details p {
  padding: 0 64px 24px 28px;
}

@media (max-width: 1080px) {
  .reference-intro__layout,
  .reference-scope__layout,
  .reference-intro__requirements,
  .reference-scope__fields {
    max-width: 820px;
  }

  .reference-project--case {
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  }

  .reference-project--case .reference-project__body {
    padding: 40px;
  }
}

@media (max-width: 760px) {
  .reference-overview {
    --reference-grid-size: 48px;
    --reference-index-overlap: 48px;
  }

  .reference-index {
    padding-bottom: var(--section-space-sm);
  }

  .reference-index__band {
    padding-top: var(--section-space-sm);
  }

  .reference-intro__layout,
  .reference-scope__layout {
    gap: 32px;
  }

  .reference-requirement {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .reference-requirement > span {
    grid-row: auto;
  }

  .reference-explorer {
    border-radius: var(--radius);
  }

  .reference-filters,
  .reference-projects {
    padding: 24px;
  }

  .reference-filter__buttons {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .reference-filter__button {
    flex: 0 0 auto;
  }

  .reference-explorer__result {
    padding: 20px 24px;
  }

  .reference-projects {
    grid-template-columns: 1fr;
  }

  .reference-project,
  .reference-project--case {
    min-height: 0;
    grid-column: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 240px minmax(0, 1fr);
  }

  .reference-project--case-reverse .reference-project__media {
    order: 0;
  }

  .reference-project--case .reference-project__media img {
    min-height: 0;
  }

  .reference-project__body,
  .reference-project--case .reference-project__body {
    padding: 24px;
  }

  .reference-project__facts {
    grid-template-columns: 1fr;
  }

  .reference-explorer__empty {
    margin: 0 24px 24px;
    padding: 24px;
  }

  .reference-scope__fields {
    grid-template-columns: 1fr;
  }

  .reference-scope__fields > div {
    padding: 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .reference-scope__fields > div:last-child {
    border-bottom: 0;
  }

  .reference-faq .faq--luftig summary {
    padding: 20px;
  }

  .reference-faq .faq--luftig details p {
    padding: 0 20px 20px;
  }
}

@media (max-width: 520px) {
  .reference-projects,
  .reference-filters {
    padding: 20px;
  }

  .reference-explorer__empty {
    margin: 0 20px 20px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .reference-filter__button {
    transition: none;
  }
}


/* ==== assets/css/components/startseite-flaechen.css ==== */
/* ============================================================
   Startseite V4.5 – Flächensystematik

   V4 brachte jede dunkle Fläche selbst mit: die SCADA-Bühne eine
   135°-Diagonale von #07142f über Navy nach #142f70 mit einem
   Lichtschein bei 82/18 und einem 48px-Raster, InduSLEEP eine andere
   Diagonale mit einem Lichtkreis oben rechts und einem 50px-Raster,
   das Kontaktband eine dritte Diagonale mit Radialschein und
   konzentrischen Ringen, der Footer einen vierten Navyton. Drei
   Rasterweiten, vier Navytöne, drei Lichtquellen. Einzeln fällt das
   nicht auf, in Folge wirkt die Seite zusammengesetzt statt gebaut.

   Die Systematik hier beantwortet zwei Fragen.

   1. Wo liegt das Raster?

      Das Raster ist der Grund; was darauf steht, steht auf einer
      Tafel. Es liegt deshalb auf den dunklen Bühnen und unter den
      drei hellen Feldern, deren Inhalt eine eigene Fläche mitbringt
      oder bekommt: Einleitung (Tafel), Produkte (Bildkarten),
      FAQ (je Frage eine Tafel). Es wird damit nie zum Hintergrund
      von Fließtext – dieselbe Regel wie auf der Produktübersicht.

      Ruhig und ohne Raster bleiben die Abschnitte, deren Inhalt frei
      auf der Fläche steht: Lösungen, Branchen, Nachweise, Logoband.
      Die Nachweisebene ausdrücklich – sie lebt von einer großen
      Bildkarte und weißen Karten, denen durchlaufende Linien die
      Kante nehmen.

      Eine Ausnahme trägt die Bühne. Ihr seitlicher Verlauf über dem
      Foto bleibt, und die Maske des Bausteins lässt das Raster vor
      dem Bild enden – ein regelmäßiges Gitter konkurriert dort mit
      der Regelmäßigkeit der Werkshalle.

   2. Worauf steht eine dunkle Zone?

      Auf einem Navy, einer Rasterweite, ohne Lichtquellen. Ein
      Raster liest sich nur dann als Fläche, wenn der Grund darunter
      gleichmäßig ist.

   Ob eine helle Fläche weiß oder grau steht, entscheidet der
   Bauplan über :weiss und :soft – das ist eine Entscheidung der
   Seite und nicht des Bausteins.

   Die Werte stehen als Eigenschaften am Seitenrumpf: wer die
   Systematik verschieben will, ändert sie hier einmal.

   Zum ruhigen Vergleich steht die unveränderte V4 daneben: dieselben
   Bausteine, aber jeder Abschnitt mit der Fläche, die er selbst
   mitbringt.
   ============================================================ */

.home-flaechen {
  --raster: 56px;
  --raster-dunkel: rgba(0, 160, 227, 0.08);
  --raster-hell: rgba(34, 58, 142, 0.05);
  --flaeche-dunkel: #0c1d43;
}

/* ---------------- Dunkle Zonen ----------------

   SCADA, InduSLEEP, Kontaktband und Footer tragen dieselbe Fläche.
   Der Footer bekommt kein Raster: er schließt die Seite ab und ist
   keine Inhaltszone. Dass er dieselbe Farbe trägt, verhindert die
   sichtbare Naht zwischen Kontaktband und Fußbereich. */
.home-flaechen .v4-scada,
.home-flaechen .indusleep-section,
.home-flaechen .v4-contact {
  background:
    linear-gradient(90deg, var(--raster-dunkel) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-dunkel) 1px, transparent 1px),
    var(--flaeche-dunkel);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

.home-flaechen .footer--dunkel {
  background: var(--flaeche-dunkel);
}

/* Die mitgebrachten Lichtquellen der drei Bausteine: das eigene
   48px-Raster der SCADA-Bühne, der Lichtkreis über InduSLEEP und die
   konzentrischen Ringe im Kontaktband. */
.home-flaechen .v4-scada::after,
.home-flaechen .indusleep-section::after,
.home-flaechen .v4-contact::after {
  display: none;
}

/* ---------------- Die Einleitung ----------------

   Sie besteht aus zwei Teilen: Text mit Foto und der Prozesszeile
   darunter. Ohne Tafel sind das zwei lose Reihen auf einer offenen
   Fläche – die Tafel bindet sie zu einem Objekt und gibt dem ersten
   Abschnitt nach der Bühne eine Kante. Dass sie auf dem Raster steht,
   ist die Folge derselben Regel wie überall: das Raster ist der
   Grund, was darauf steht, steht auf einer Tafel. */
.home-flaechen .v4-intro {
  background:
    linear-gradient(90deg, var(--raster-hell) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-hell) 1px, transparent 1px),
    var(--soft);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

/* Die Einleitung trägt ein großes Foto; stünde es allein auf dem
   Raster, liefe das Gitter um seine Kante herum und um den Text
   daneben. Deshalb liegt hier das ganze Layout auf einer Tafel,
   einschließlich der Prozesszeile darunter, die sonst als einzige
   frei auf dem Grund stünde. */
.home-flaechen .v4-intro > .shell {
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

/* ---------------- Helle Rasterfelder ----------------

   Nur dort, wo der Inhalt selbst indexartig ist. Die Produktbild-
   karten sind fertige Tafeln – deckend, mit Rahmen und eigenem
   Bildfeld. Die FAQ-Fragen werden weiter unten zu welchen gemacht. */
.home-flaechen #produkte,
.home-flaechen #faq {
  background:
    linear-gradient(90deg, var(--raster-hell) 1px, transparent 1px),
    linear-gradient(0deg, var(--raster-hell) 1px, transparent 1px),
    var(--soft);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), auto;
}

/* Die luftige FAQ-Variante trägt nur Trennlinien und keine Fläche.
   Auf dem Raster stünde ihr Text unmittelbar auf dem Gitter, deshalb
   wird hier jede Frage eine eigene kleine Tafel. */
.home-flaechen #faq .faq__list {
  gap: 12px;
  border-top: 0;
}

.home-flaechen #faq details,
.home-flaechen #faq details[open] {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.home-flaechen #faq details[open] {
  border-color: rgba(0, 160, 227, 0.38);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.08);
}

.home-flaechen #faq summary {
  padding: 24px 28px;
}

.home-flaechen #faq details p {
  padding: 0 64px 24px 28px;
}

@media (max-width: 760px) {
  .home-flaechen .v4-intro > .shell {
    padding: 24px;
  }

  .home-flaechen #faq summary {
    padding: 20px;
  }

  .home-flaechen #faq details p {
    padding: 0 20px 20px;
  }
}