/* NETZkultur – Website: Design-Tokens und alle gemeinsamen Bausteine.
   Gestaltung der Startseite 4 als Grundlage aller Seiten (Andrea Tissen, 2026-10-21: „nimm startseite 4 als ausgangsbasis …
   Nimm das Design dieser Seite und baue alle anderen Seiten in dem Stil nach“), abgeleitet aus landingpages/neu/css/style.css
   (neu.infra-struktur.de): Tokens, Breakpoints (480/640/768/1024/1200) und Bewegung wie dort, Logo und Inhalte von NETZkultur.
   Kopfleiste: schwebend in Primärblau #004994, Menü-Hover wie .on-gradient-link auf neu, Kontakt als Glas-Button, unter 1024 px
   Menü als Kachel. Footer und Lippstadt-Skyline im Verlauf #002555 → #004994. Akzentfarbe #009ee3, Verläufe Primärblau → Akzentblau
   (weichen bewusst vom CD-Manual ab; Andrea Tissen, 2026-10-21). Keine Netz-Grafik (gehört nur zu infra-struktur).
   Bewegung nur ohne „Bewegung reduzieren“ und endlich. Nur für die Startseite: css/startseite.css. Bausteine und Markup:
   tools/netzkultur/README.md („Bausteine“). Seitenspezifisches in css/<seite>.css. */

/* Schrift Poppins, selbst gehostet, SIL OFL (assets/fonts/OFL.txt). Schnitte wie im CD-Manual von NETZkultur: Fließtext 400,
   Hervorhebungen, Buttons und Menü 600, Überschriften, Eyebrows und Zahlen 700. Kursiv in denselben Schnitten für „kultur“
   in „NETZkultur“ (überall, wie im Logo; Andrea Tissen, 2026-10-21). */
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* Corporate Design wie neu.infra-struktur.de */
  --primary: #004994;
  --primary-700: #003c7a;
  --primary-900: #002650;
  --secondary: #002555; /* Sekundärblau aus dem CD-Manual: Footer-Verlauf links */
  --accent: #009ee3;
  --accent-700: #0074ad; /* dunkles Akzentblau für Schrift: ≥ 4,5:1 auf Weiß */
  --accent-hover: #008bc8;
  --accent-50: #e5f5fc;
  --bg: #f5f6fb;      /* Seitengrund */
  --tile: #ffffff;    /* Kacheln */
  --tile-2: #dfe8f7;  /* Hellblau: Abschnitte (.section--tint), Icon-Kacheln */
  --tile-hell: #eef3fb; /* Hover-Flächen auf Weiß */
  --ink: #000000;
  --lavender: #8e9aca;
  --rot: #d93025;     /* Kreuz in .checklist--x */
  --gradient: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  --gradient-diag: linear-gradient(120deg, var(--primary) 0%, #0074bc 55%, var(--accent) 100%);
  /* Hintergrund der Seitenköpfe (Startseite .hero__bg und .page-hero), exakt wie .hero__bg auf neu */
  --kopf-verlauf:
    radial-gradient(50% 60% at 90% 25%, rgba(0, 158, 227, .16), transparent 70%),
    radial-gradient(45% 55% at 0% 0%, rgba(0, 73, 148, .10), transparent 70%),
    linear-gradient(180deg, #e9eef9 0%, var(--bg) 85%);

  /* Ableitungen */
  --text: #1a1f2b;
  --muted: #4b5568;
  --line: #e3e8f2;
  --white: #fff;
  --hell: #bfe6f8; /* helles Akzentblau für Eyebrows und Icons auf Verlauf und Dunkelblau (.eyebrow--light) */

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --shadow-s: 0 1px 2px rgba(0, 38, 80, .06), 0 4px 14px -6px rgba(0, 38, 80, .14);
  --shadow: 0 2px 6px rgba(0, 38, 80, .05), 0 14px 32px -14px rgba(0, 38, 80, .22);
  --shadow-l: 0 4px 12px rgba(0, 38, 80, .06), 0 28px 56px -24px rgba(0, 38, 80, .36);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 64px;
  --header-gap: 10px;
  --section-y: clamp(4rem, 9vw, 7rem);
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--header-gap) * 2 + 1rem);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: .01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h2 { font-size: clamp(1.875rem, 1.35rem + 2.1vw, 2.875rem); font-weight: 700; }
h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
/* Zweiter Teil der H1 (<span class="light">) in eigener Zeile, so groß wie der Rest und im selben Schnitt (700, nicht kursiv;
   Andrea Tissen, 2026-10-21: „stelle nicht kursiv dar und im selben schriftschnitt wie die restliche H1“), Farbverlauf
   #004994 → #009ee3 als Schriftfarbe. width: fit-content, damit der Verlauf genau über den Text läuft; Innenabstand unten,
   damit Unterlängen (g, p, y) im Verlauf bleiben und nicht abgeschnitten werden (Andrea Tissen, 2026-10-21: „stelle das nicht
   abgeschnitten dar“); der Gegenrand unten hält den Abstand gleich */
h1 .light { display: block; width: fit-content; margin-top: .06em; margin-bottom: -.14em; padding: 0 .04em .22em 0; font-size: 1em; font-style: normal; font-weight: 700; line-height: 1.06; color: var(--primary); }
/* „NETZ*kultur*“ in Überschriften wie der Zusatz der H1: kursiv, 600, Verlauf #004994 → #009ee3 (Andrea Tissen, 2026-10-21);
   Innenabstand rechts mit Gegenrand, damit der kursive Überhang im Verlauf bleibt, ohne den Abstand zum „?“ zu ändern */
h2 em { font-style: italic; font-weight: 600; color: var(--primary); }
/* „kultur“ in „NETZkultur“ überall im Text kursiv wie im Logo (Andrea Tissen, 2026-10-21: „Schreibe übrigens überall wo
   NETZkultur steht "kultur" kursiv“): NETZ<span class="kultur">kultur</span>, Schnitt und Farbe vom umgebenden Text */
.kultur { font-style: italic; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  h1 .light { background: linear-gradient(90deg, #004994, #009ee3); -webkit-background-clip: text; background-clip: text; color: transparent; }
  h2 em { margin-right: -.08em; padding-right: .08em; background: linear-gradient(90deg, #004994, #009ee3); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.light { font-weight: 400; }

p { margin: 0; text-wrap: pretty; }
strong { font-weight: 600; color: var(--ink); }
a { color: var(--primary); }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
::selection { background: var(--tile-2); color: var(--ink); }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Schmale Spalte für Fließtext (Rechtstexte, Ratgeber) */
.container--schmal { max-width: calc(860px + 2 * var(--gutter)); }

.icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.nb { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.center { text-align: center; }
.klein { font-size: .875rem; line-height: 1.55; }
.text-muted { color: var(--muted); }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .75rem 1rem; border-radius: var(--radius-s);
  background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Fokusring in Primärblau (≥ 3:1 auf allen hellen Flächen), auf Verlauf und dunklem Blau weiß */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
:is(.site-header__inner, .site-footer, .cta-band, .final-cta__inner, .jobs-banner, .section--secure, .quote--featured) :focus-visible { outline-color: var(--white); }
.site-header .site-nav :focus-visible { outline-color: var(--primary); }
@media (min-width: 1024px) {
  .site-header .site-nav__list > .site-nav__item > :focus-visible, .site-header .site-nav__cta:focus-visible { outline-color: var(--white); }
}

/* ---------- Bausteine ---------- */

.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--h); padding: 0 1.4em;
  border: 1.5px solid transparent; border-radius: 8px;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn .icon { width: .95em; height: .95em; transition: transform .2s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:hover .icon:first-child { transform: none; }
/* „infra-struktur“ in span.nb fließt im Button als Text mit (sonst eigener Flex-Eintrag mit Abstand) */
.btn .nb { display: contents; }

/* Hauptaktion in der Akzentfarbe; in .cta-band, .final-cta und .jobs-banner weiß mit blauer Schrift */
.btn--cta { background: var(--accent); color: var(--white); box-shadow: 0 10px 22px -12px rgba(0, 158, 227, .9); }
.btn--cta:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(0, 158, 227, .95); }
.btn--cta:active { transform: none; }
.btn--on-dark { box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); }

/* Zweitaktion: weiß mit Linie (auf hellen und dunklen Flächen) */
.btn--ghost { background: var(--white); border-color: var(--line); color: var(--primary); box-shadow: var(--shadow-s); }
.btn--ghost:hover { border-color: var(--primary); transform: translateY(-1px); }

/* Zweitaktion auf Verlauf und Dunkelblau: Glas mit weißem Rand (wie der Kontakt-Button in der Kopfleiste) */
.btn--glass { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .9); color: var(--white); }
.btn--glass:hover { background: rgba(255, 255, 255, .3); }

.btn--lg { --h: 56px; padding: 0 1.6em; font-size: 1.0625rem; }
.btn--sm { --h: 40px; padding: 0 1.1em; font-size: .875rem; }

/* Reihe aus Buttons und Textlinks */
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2rem; }
.knopfreihe--mitte { justify-content: center; }

/* Subheadline: fett, Versalien, gesperrt, Primärfarbe */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  color: var(--primary);
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow .icon { width: 1.25em; height: 1.25em; }
.eyebrow--light { color: var(--hell); }
/* „infra-struktur“ in span.nb fließt als Text mit (sonst eigener Flex-Eintrag mit Abstand wie ein Icon) */
.eyebrow .nb { display: contents; }

/* Listenpunkte: Kreis in Akzentblau, weißer Haken */
.checklist { display: grid; gap: .85rem; margin-top: 1.5rem; }
.checklist li { display: flex; align-items: flex-start; gap: .75rem; }
.checklist__mark { display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin-top: .1em; border-radius: 50%; background: var(--accent); color: var(--white); }
.checklist__mark .icon { width: 13px; height: 13px; }
/* Kompakt (in Kacheln) */
.checklist--klein { gap: .6rem; margin-top: 1.1rem; font-size: 1rem; line-height: 1.55; }
.checklist--klein .checklist__mark { width: 22px; height: 22px; margin-top: .05em; }
.checklist--klein .checklist__mark .icon { width: 11px; height: 11px; }
/* Probleme: rotes Kreuz (Icon i-xmark statt i-check) */
.checklist--x .checklist__mark { background: var(--rot); }
/* Aufzählung mit Punkten in Akzentblau, ohne Markup im <li> */
.punktliste { display: grid; gap: .6rem; margin-top: 1.25rem; }
.punktliste li { position: relative; padding-left: 1.6rem; }
.punktliste li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); }

/* Textlink mit Pfeil; inline, damit der Pfeil bei Umbruch am Textende bleibt */
.more-link { color: var(--primary); font-weight: 700; text-decoration: none; }
.more-link .icon { width: .9em; height: .9em; margin-left: .45em; vertical-align: -.1em; transition: transform .2s var(--ease); }
.more-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.more-link:hover .icon { transform: translateX(3px); }
.more-link--hell { color: var(--white); }

/* Ganze Kachel klickbar (Klasse .linked an der Kachel): Fläche per ::after am Textlink */
.linked { position: relative; }
.linked .more-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.linked .more-link:focus-visible { outline: none; }
.linked:has(.more-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- Kopfleiste: Vorlage tools/netzkultur/vorlagen/kopf.html, gestaltet wie die schwebende Leiste von neu ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: var(--header-gap) var(--header-gap) 0;
}
.site-header__inner {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  height: var(--header-h);
  padding: 0 clamp(.875rem, 3vw, 1.75rem);
  border-radius: 14px;
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 10px 30px -18px rgba(0, 38, 80, .8);
  transition: box-shadow .25s;
}
.site-header.is-scrolled .site-header__inner { box-shadow: 0 16px 36px -14px rgba(0, 38, 80, .65); }

.site-header__logo { display: inline-flex; flex: none; margin-right: auto; color: var(--white); border-radius: 6px; }
/* Wortmarke NETZkultur (einfarbig über currentColor); Breite so, dass sie optisch so viel Raum nimmt wie das Logo von neu */
.logo { display: block; width: 150px; height: auto; aspect-ratio: 333.5 / 44; overflow: visible; }

/* Menü-Knopf: nur mit JavaScript (main.js entfernt hidden) und unter 1024 px.
   Ohne JavaScript steht die komplette Navigation im Footer. */
.nav-toggle {
  display: inline-flex; align-items: center; gap: .55rem; flex: none;
  min-width: 44px; min-height: 44px; margin-right: -.4rem; padding: 0 .7rem;
  border: 0; border-radius: 8px; background: transparent; color: var(--white);
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: background-color .3s;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .16); }
.nav-toggle .icon { width: 20px; height: 20px; }
.nav-toggle__zu, .site-header.is-open .nav-toggle__auf { display: none; }
.site-header.is-open .nav-toggle__zu { display: block; }

.site-nav__list, .site-nav__sub { list-style: none; }
.site-nav__link--produkt { white-space: nowrap; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 0; background: none;
  font: inherit; font-weight: 600; line-height: 1.3; text-decoration: none;
  cursor: pointer;
}
.site-nav__chevron { width: 11px; height: 11px; transition: transform .25s var(--ease); }
.site-nav__trigger[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }
.site-nav__extern { width: 11px; height: 11px; opacity: .8; }

/* Einträge der Klappkarten (Desktop) und der aufgeklappten Gruppen (Kachel) */
.site-nav__sublink {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .7rem .75rem; border-radius: var(--radius-s);
  color: var(--ink); text-decoration: none;
  transition: background-color .2s;
}
/* Hover-Fläche #eef3fb (Andrea Tissen, 2026-10-21) */
.site-nav__sublink:hover, .site-nav__sublink[aria-current="page"] { background: var(--tile-hell); }
.site-nav__sublink strong { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.site-nav__sublink small { display: block; margin-top: .1rem; color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.site-nav__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--radius-s); background: var(--tile-2); color: var(--primary); }
.site-nav__icon .icon { width: 17px; height: 17px; }

/* Unter 1024 px: Navigation als Kachel unter der Leiste (wie neu) */
@media (max-width: 1023.98px) {
  .site-nav { display: none; }
  html.js .site-nav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    display: block;
    max-height: calc(100vh - var(--header-h) - 2.5rem);
    max-height: calc(100dvh - var(--header-h) - 2.5rem);
    overflow-y: auto; overscroll-behavior: contain;
    padding: .6rem; border-radius: 14px;
    background: var(--tile); color: var(--ink); box-shadow: var(--shadow-l);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
  }
  html.js .site-header.is-open .site-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .site-nav__list { display: grid; gap: .1rem; }
  .site-nav__link {
    display: flex; width: 100%; justify-content: space-between; gap: 1rem;
    min-height: 52px; padding: .7rem 1rem; border-radius: var(--radius-s);
    color: var(--ink); font-size: 1.0625rem; text-align: left;
    transition: background-color .2s, color .2s;
  }
  a.site-nav__link:not([target])::after {
    content: ""; width: .5em; height: .5em; flex: none; margin-right: .2rem;
    border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg);
  }
  .site-nav__chevron, .site-nav__extern { width: 14px; height: 14px; margin-right: .1rem; color: var(--accent); opacity: 1; }
  .site-nav__link:hover, .site-nav__link:focus-visible, .site-nav__link[aria-expanded="true"] { background: var(--bg); color: var(--ink); }
  .site-nav__link[aria-current="page"], .site-nav__group.is-active > .site-nav__trigger { background: var(--tile-2); color: var(--primary); box-shadow: inset 4px 0 0 var(--accent); }
  .site-nav__panel { display: none; padding: .15rem 0 .5rem .5rem; }
  .site-nav__trigger[aria-expanded="true"] + .site-nav__panel { display: block; }
  /* Kontakt wie „Demo anfordern“ im Menü von neu: Akzentfarbe über die ganze Breite */
  .site-nav__cta {
    --h: 56px;
    width: 100%; margin-top: .5rem; padding: 0 1.6em;
    background: var(--accent); color: var(--white); font-size: 1.0625rem;
    box-shadow: 0 10px 22px -12px rgba(0, 158, 227, .9);
  }
  .site-nav__cta:hover { background: var(--accent-hover); }
  html.nav-open { overflow: hidden; }
  html.nav-open body::after {
    content: ""; position: fixed; inset: 0; z-index: 40;
    background: rgba(0, 26, 56, .38);
  }
}

/* Ab 1024 px: Navigation in der Leiste, Gruppen als Klappkarten, Hover wie .on-gradient-link auf neu */
@media (min-width: 1024px) {
  .nav-toggle { display: none !important; }
  .site-header__logo { margin-right: 0; }
  .site-nav { display: flex; align-items: center; margin-left: auto; }
  .site-nav__list { display: flex; align-items: center; gap: .1rem; }
  .site-nav__item { position: relative; }
  /* Hover-Flächen so hoch wie der Kontakt-Button (44 px, Radius 8 px) (Andrea Tissen, 2026-10-21) */
  .site-nav__link {
    position: relative; isolation: isolate;
    min-height: 44px; padding: 0 .7rem; border-radius: 8px;
    color: var(--tile-2); font-size: .9375rem;
    transition: color .4s;
  }
  .site-nav__link::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; background: rgba(255, 255, 255, .24);
    opacity: 0; transition: opacity .4s;
  }
  .site-nav__link:hover, .site-nav__link:focus-visible, .site-nav__link[aria-expanded="true"] { color: var(--white); }
  .site-nav__link:hover::before, .site-nav__link:focus-visible::before, .site-nav__link[aria-expanded="true"]::before { opacity: 1; }
  .site-nav__link[aria-current="page"], .site-nav__group.is-active > .site-nav__trigger { color: var(--white); }
  .site-nav__link[aria-current="page"]::before, .site-nav__group.is-active > .site-nav__trigger::before { opacity: 1; background: rgba(255, 255, 255, .16); }
  /* infra-struktur als eigener Punkt zwischen Jobs und Kontakt, mit hellerer Fläche als die Leiste (Andrea Tissen, 2026-10-21);
     auf /infra-struktur/ selbst so hell wie beim Überfahren */
  .site-nav__link--produkt { margin-left: .4rem; color: var(--white); }
  .site-nav__link.site-nav__link--produkt { padding: 0 1.15em; }
  .site-nav__link--produkt::before { opacity: 1; background: rgba(255, 255, 255, .2); }
  .site-nav__link--produkt:hover::before, .site-nav__link--produkt:focus-visible::before, .site-nav__link--produkt[aria-current="page"]::before { background: rgba(255, 255, 255, .3); }

  .site-nav__panel {
    position: absolute; top: calc(100% + 20px); left: 50%; z-index: 2;
    width: 330px; padding: .6rem;
    border-radius: var(--radius); background: var(--tile); color: var(--ink);
    box-shadow: var(--shadow-l), 0 0 0 1px rgba(0, 38, 80, .04);
    visibility: hidden; opacity: 0; transform: translate(-50%, 6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  /* Brücke über den Abstand zur Leiste, damit die Karte beim Überfahren offen bleibt */
  .site-nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
  .site-nav__panel--breit { width: 620px; }
  .site-nav__panel--breit .site-nav__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  /* Hover-Fläche füllt die ganze Zelle, damit Nachbarn in einer Zeile bündig sind (Andrea Tissen, 2026-10-21) */
  .site-nav__panel--breit .site-nav__sub > li { display: flex; }
  .site-nav__panel--breit .site-nav__sublink { flex: 1; }
  .site-nav__panel--breit .site-nav__sub-weit { grid-column: 1 / -1; margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--line); }
  .site-nav__trigger[aria-expanded="true"] + .site-nav__panel,
  html:not(.js) .site-nav__group:hover > .site-nav__panel,
  html:not(.js) .site-nav__group:focus-within > .site-nav__panel { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }

  /* Kontakt als Glas-Button wie „Demo anfordern“ in der Leiste von neu */
  .site-nav__cta {
    --h: 44px;
    margin-left: .5rem; padding: 0 1.15em;
    border-color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .18); color: var(--white);
    font-size: .9375rem;
  }
  .site-nav__cta:hover { background: rgba(255, 255, 255, .3); }
}
@media (min-width: 1024px) and (hover: hover) {
  html.js .site-nav__group:hover > .site-nav__panel { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }
}
@media (min-width: 1200px) {
  .site-nav__link { padding: 0 .95rem; }
}

/* ---------- Abschnitte ---------- */

/* Hintergründe abwechseln: Seitengrund (ohne Modifier), .section--tint (Hellblau), .section--secure (dunkles Blau) */
.section { padding: var(--section-y) 0; }
.section--tint { background: var(--tile-2); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-head::before { content: ""; display: block; width: 64px; height: 6px; margin-bottom: 1.25rem; border-radius: 99px; background: var(--gradient); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center::before { margin-inline: auto; }
.section-head h2 { margin-top: .75rem; }
.section-head__lead { margin-top: 1.1rem; color: var(--muted); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.section-head__lead strong { color: var(--ink); }
.section-foot { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.section-foot--center { text-align: center; }
/* Abschnittskopf mit Verweis rechts daneben (ab 1024 px), wie auf neu */
.section-head-row { display: grid; gap: 1.25rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-head-row .section-head { margin-bottom: 0; }

/* Dunkler Abschnitt: vollflächig dunkles Primärblau mit Verlaufslicht wie „Sicherheit“ auf neu */
.section--secure {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(60% 120% at 100% 0%, rgba(0, 158, 227, .45), transparent 60%), linear-gradient(160deg, var(--primary) 0%, var(--primary-900) 100%);
  color: rgba(255, 255, 255, .86);
}
.section--secure h2, .section--secure h3, .section--secure strong { color: var(--white); }
.section--secure .section-head::before { background: linear-gradient(90deg, var(--accent), var(--hell)); }
.section--secure .section-head__lead { color: rgba(255, 255, 255, .8); }
.section--secure p a:not([class]) { color: var(--white); }
/* Weiße Kacheln auf Dunkelblau behalten dunkle Schrift und blaue Links */
.section--secure :is(.karte, .quote, .kontakt-karte) :is(h3, strong) { color: var(--ink); }
.section--secure :is(.karte, .quote, .kontakt-karte) p a:not([class]) { color: var(--primary); }

/* ---------- Seitenkopf der Unterseiten (wie die Unterseiten von neu): Verlauf wie auf der Startseite, Brotkrumen,
   genau eine H1 ohne Eyebrow, Lead, Buttons; rechts ein Foto (.foto) oder Video (.video-frame) in .page-hero__visual ---------- */

.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * (var(--header-h) + var(--header-gap)));
  padding: calc(var(--header-h) + var(--header-gap) + clamp(1.5rem, 4.5vw, 3.25rem)) 0 clamp(3.5rem, 8vw, 6rem);
  background: var(--kopf-verlauf);
}
/* Folgt ein Abschnitt auf Seitengrund, läuft der Verlauf ohne Kante hinein: oben weniger Abstand */
.page-hero + .section:not(.section--tint, .section--secure) { padding-top: clamp(1rem, 4vw, 3rem); }
.page-hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.page-hero__title {
  margin-top: 1rem;
  font-size: clamp(2.125rem, 1.35rem + 3vw, 3.5rem);
  font-weight: 700; line-height: 1.08; letter-spacing: .005em;
}
/* Lange deutsche Wörter (z. B. „Unterauftragsverarbeiter“) auf schmalen Bildschirmen trennen statt abschneiden */
@media (max-width: 599.98px) { .page-hero__title { -webkit-hyphens: auto; hyphens: auto; } }
.page-hero__lead { max-width: 40em; margin-top: 1.25rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem); }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2rem; }
/* Weiches Licht hinter Foto oder Video */
.page-hero__visual { position: relative; isolation: isolate; }
.page-hero__visual::before {
  content: ""; position: absolute; z-index: -1; inset: -14% -6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 158, 227, .2), rgba(0, 73, 148, .07) 62%, transparent);
}

.brotkrumen { font-size: .875rem; line-height: 1.4; }
.brotkrumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.brotkrumen li { display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); }
.brotkrumen li + li::before {
  content: ""; width: .42em; height: .42em; flex: none;
  border-top: 2px solid var(--lavender); border-right: 2px solid var(--lavender); transform: rotate(45deg);
}
.brotkrumen a { color: var(--primary); font-weight: 600; text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; text-underline-offset: 3px; }
.brotkrumen [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Zwei Spalten: Text und Foto/Video/Zitat; ab 1024 px nebeneinander. Text steht im Markup zuerst,
   .split--media-links setzt das Medium am Rechner nach links ---------- */

.split { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.split__text > * + * { margin-top: 1.1rem; }
.split__text > .section-head { margin-bottom: 0; }
.split__text > .section-head + * { margin-top: 1.5rem; }
.split__text > .checklist, .split__text > .knopfreihe { margin-top: 1.75rem; }
/* Absätze unter dem Abschnittskopf im selben Grau wie dessen Lead (Andrea Tissen, 2026-10-21: „nimm das selbe grau als
   schriftfarbe wie im Fließtext zuvor“); dunkle Abschnitte setzen ihre Farbe selbst */
.split__text > p { color: var(--muted); }
.section--secure .split__text > p { color: rgba(255, 255, 255, .8); }

/* Foto mit großem Radius und Schatten (Seitenkopf, .split, Kacheln) */
.foto { width: 100%; border-radius: var(--radius-l); background: var(--tile-2); box-shadow: var(--shadow-l); }

/* ---------- Kachelraster mit Icon-Kacheln (als <ul> möglich): ab 640 px zwei Spalten, --3 ab 1024 px drei, --4 ab 1200 px vier;
   bleibt bei zwei Spalten eine Kachel übrig, nimmt sie die volle Breite ---------- */

.raster { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .raster--2, .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1023.98px) { .raster--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 640px) and (max-width: 1199.98px) { .raster--4 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Kachel wie die Leistungs-Kacheln der Startseite; mit .linked und .more-link ganz klickbar (hebt sich, Verlaufslinie unten) */
.karte {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(1.5rem, 3.5vw, 2.25rem); border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.karte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.karte.linked:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.karte.linked:hover::after { transform: scaleX(1); }
.karte h3 { font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); line-height: 1.3; }
.karte p { color: var(--muted); font-size: 1rem; }
.karte .checklist { margin-top: .4rem; }
.karte .more-link { margin-top: auto; padding-top: .8rem; }
.karte-icon { display: grid; place-items: center; width: 54px; height: 54px; flex: none; margin-bottom: .5rem; border-radius: 14px; background: var(--tile-2); color: var(--primary); }
.karte-icon .icon { width: 24px; height: 24px; }
/* Hervorgehoben: hellblaue Kachel ohne Schatten */
.karte--tint { background: var(--tile-2); box-shadow: none; }
.karte--tint .karte-icon { background: var(--white); }

/* ---------- Vorteile kreativ (ul.raster.vorteile: raster--3 mit sechs oder raster--4 mit acht .karte; Andrea Tissen, 2026-10-21:
   „stelle das kreativer und animiert dar“, zuerst CloudBackup, dann CloudDrive). Erste Kachel als dunkle Bühne über zwei Spalten
   mit geordneten Vierecken, dritte mit Verlaufsrand, letzte über die ganze Breite (bei sechs bzw. acht Kacheln bliebe sie sonst
   allein in der Zeile); Icons im Verlauf, die sich beim Einblenden von unten füllen und beim Überfahren kippen.
   Ohne JavaScript und bei „Bewegung reduzieren“ sofort der Endzustand ---------- */
@property --rand-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rand-umlauf { from { --rand-winkel: 0deg; } to { --rand-winkel: 360deg; } }
.vorteile .karte-icon { position: relative; isolation: isolate; overflow: hidden; color: var(--white); box-shadow: 0 10px 20px -10px rgba(0, 73, 148, .7); }
.vorteile .karte-icon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gradient-diag); }
.vorteile > li:hover .karte-icon { rotate: -6deg; scale: 1.06; }
/* Bühne */
.vorteile > :first-child {
  isolation: isolate; justify-content: center;
  background:
    radial-gradient(60% 90% at 88% 25%, rgba(0, 158, 227, .45), transparent 62%),
    linear-gradient(135deg, var(--secondary) 0%, var(--primary) 72%, #0063b4 100%);
  box-shadow: var(--shadow-l);
}
.vorteile > :first-child::before {
  content: ""; position: absolute; right: 0; top: 0; z-index: -1;
  width: calc(12 * 26px); height: calc(8 * 26px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Crect width='14' height='14' rx='3.6' fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 26px 26px;
  opacity: .2;
  -webkit-mask-image: linear-gradient(225deg, #000 10%, transparent 75%); mask-image: linear-gradient(225deg, #000 10%, transparent 75%);
}
.vorteile > :first-child h3 { color: var(--white); font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
.vorteile > :first-child { color: rgba(255, 255, 255, .86); }
.vorteile > :first-child p { max-width: 34rem; color: rgba(255, 255, 255, .82); font-size: 1.0625rem; }
.vorteile > :first-child .karte-icon { width: 64px; height: 64px; background: rgba(255, 255, 255, .14); box-shadow: none; }
.vorteile > :first-child .karte-icon::before { background: rgba(255, 255, 255, .16); }
.vorteile > :first-child .karte-icon .icon { width: 28px; height: 28px; }
/* Verlaufsrand */
.vorteile > :nth-child(3) {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--tile), var(--tile)) padding-box,
    conic-gradient(from var(--rand-winkel), var(--primary), var(--accent), var(--hell), var(--accent), var(--primary)) border-box;
}
/* Breit: Icon links, Text rechts, Verlaufslinie unten sichtbar */
.vorteile > :last-child::after { transform: scaleX(1); }
@media (min-width: 640px) {
  .vorteile > :first-child, .vorteile > :last-child { grid-column: 1 / -1; }
  .vorteile > :last-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: center; }
  .vorteile > :last-child .karte-icon { grid-row: span 2; margin-bottom: 0; }
}
@media (min-width: 1024px) { .vorteile > :first-child { grid-column: span 2; } }
/* Paar (.vorteile--paar an ul.raster.raster--2 mit zwei Kacheln, Ratgeber „Was ist ein CloudServer?“): Bühne und Verlaufsrand
   nebeneinander, beide eine Spalte breit; die zweite wieder als normale Kachel (Spalte, linksbündig) */
.vorteile.vorteile--paar > :first-child, .vorteile.vorteile--paar > :last-child { grid-column: auto; }
.vorteile.vorteile--paar > :last-child { display: flex; align-items: stretch; }
.vorteile.vorteile--paar > :last-child .karte-icon { grid-row: auto; margin-bottom: .5rem; }
/* Überschrift so groß wie in der Bühne daneben (Andrea Tissen, 2026-10-21: „genau so groß … wie die Überschrift Fenster 1“) */
.vorteile.vorteile--paar > li h3 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
.vorteile.vorteile--paar > :last-child {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--tile), var(--tile)) padding-box,
    conic-gradient(from var(--rand-winkel), var(--primary), var(--accent), var(--hell), var(--accent), var(--primary)) border-box;
}
@media (prefers-reduced-motion: no-preference) {
  .vorteile .karte-icon { transition: rotate .35s var(--ease), scale .35s var(--ease); }
  .js .vorteile > [data-reveal] .karte-icon::before { clip-path: inset(100% 0 0 0); }
  .js .vorteile > .is-visible .karte-icon::before { animation: icon-fuellen .7s var(--ease) calc(var(--d, 0ms) + .35s) forwards; }
  .js .vorteile > [data-reveal] .karte-icon { color: var(--primary); }
  .js .vorteile > .is-visible .karte-icon { animation: icon-weiss .3s linear calc(var(--d, 0ms) + .7s) forwards; }
  .js .vorteile > :first-child.is-visible .karte-icon { animation: icon-weiss .3s linear calc(var(--d, 0ms) + .7s) forwards, icon-pop .6s var(--ease) calc(var(--d, 0ms) + .5s) both; }
  .js .vorteile > :nth-child(3).is-visible, .js .vorteile.vorteile--paar > :last-child.is-visible { animation: rand-umlauf 1.8s var(--ease) calc(var(--d, 0ms) + .4s) 1; }
}
@keyframes icon-fuellen { to { clip-path: inset(0); } }
@keyframes icon-weiss { to { color: var(--white); } }
@keyframes icon-pop { 50% { scale: 1.15; rotate: -8deg; } }

/* ---------- Beispiele kreativ im dunklen Abschnitt (ul.raster.raster--3.beispiele in .section--secure; Andrea Tissen,
   2026-10-21: „stelle die kacheln auch kreativer dar, ggf. animiert“; ohne Nummern und gestrichelte Linie, Andrea Tissen,
   2026-10-21): Glas-Kacheln, Icon im Verlauf, das beim Einblenden kurz aufspringt, die Linie unten füllt sich wie ein
   Fortschrittsbalken („gesichert“). Ohne JavaScript und bei „Bewegung reduzieren“ sofort der Endzustand ---------- */
.beispiele > li {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.beispiele > li:hover { transform: translateY(-4px); border-color: rgba(191, 230, 248, .5); background-color: rgba(255, 255, 255, .1); }
.section--secure .beispiele > li h3 { color: var(--white); }
.beispiele > li p { color: rgba(255, 255, 255, .78); }
.beispiele .karte-icon { background: var(--gradient-diag); color: var(--white); box-shadow: 0 10px 22px -10px rgba(0, 158, 227, .8); }
.beispiele > li::after { transform: scaleX(1); background: linear-gradient(90deg, var(--accent), var(--hell)); }
@media (prefers-reduced-motion: no-preference) {
  .js .beispiele > [data-reveal]::after { transform: scaleX(0); transition: transform 1.2s var(--ease) calc(var(--d, 0ms) + .5s); }
  .js .beispiele > .is-visible::after { transform: scaleX(1); }
  .js .beispiele > .is-visible .karte-icon { animation: icon-pop .6s var(--ease) calc(var(--d, 0ms) + .3s) both; }
}

/* ---------- Kachelfelder: gleich große, gerade Quadrate im festen Raster, zum Inhalt hin ausgeblendet (Andrea Tissen, 2026-10-21:
   „stelle die vierecke geordneter dar“); nur auf dunklen Flächen und Verläufen, nie auf hellem Grund. Raster 26 px
   (Quadrat 14 px, Abstand 12 px) ---------- */
.kachelfeld {
  --raster: 26px; --spalten: 6; --zeilen: 4;
  --muster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Crect width='14' height='14' rx='3.6' fill='%23bfe6f8'/%3E%3C/svg%3E");
  position: absolute; display: block;
  width: calc(var(--spalten) * var(--raster)); height: calc(var(--zeilen) * var(--raster));
  background: var(--muster) 0 0 / var(--raster) var(--raster);
  opacity: .45;
  -webkit-mask-image: var(--blende); mask-image: var(--blende);
}
.kachelfeld--weiss { --muster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Crect width='14' height='14' rx='3.6' fill='%23ffffff'/%3E%3C/svg%3E"); opacity: .22; }
.kachelfeld--ro { --blende: linear-gradient(225deg, #000 15%, transparent 85%); }
.kachelfeld--lu { --blende: linear-gradient(45deg, #000 15%, transparent 85%); }

/* Kachelfelder im Abschluss-Band, im Abschluss „Lass uns sprechen“ und im Jobs-Band: mittig, rund ausgeblendet */
.cta-band__kacheln, .final-cta__kacheln, .jobs-banner__kacheln { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta-band__kacheln .kachelfeld { left: 50%; top: 50%; translate: -50% -50%; --spalten: 12; --zeilen: 5; --blende: radial-gradient(closest-side, #000 25%, transparent); }
.final-cta__kacheln .kachelfeld { left: 50%; top: 50%; translate: -50% -50%; --spalten: 16; --zeilen: 9; --blende: radial-gradient(closest-side, #000 25%, transparent); }
/* Rechner: zwischen Text und Kontaktkarte, nicht hinter der Überschrift */
@media (min-width: 1024px) { .final-cta__kacheln .kachelfeld { left: 57%; --spalten: 14; } }
.jobs-banner__kacheln .kachelfeld { right: 0; top: 0; --spalten: 12; --zeilen: 7; --blende: linear-gradient(225deg, #000 10%, transparent 75%); }

/* ---------- Abschluss-Band im Verlauf (wie in den Funktionen von neu): Text links, Buttons rechts; als letzter Block eines
   Abschnitts oder allein in einem Abschnitt ---------- */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-l); background: var(--gradient); color: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-l);
}
.cta-band:first-child { margin-top: 0; }
.cta-band__title { color: var(--white); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 700; line-height: 1.2; }
.cta-band__text { margin-top: .4rem; }
.cta-band .btn--cta { background: var(--white); color: var(--primary); }
.cta-band .btn--cta:hover { background: var(--tile-hell); }
.cta-band .knopfreihe { flex: none; margin-top: 0; gap: .75rem; }
@media (min-width: 768px) {
  .cta-band { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* Zwei Buttons (.knopfreihe): Text und Buttons erst ab 1200 px nebeneinander, sonst wird der Text zu schmal */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .cta-band:has(> .knopfreihe) { flex-direction: column; align-items: flex-start; }
  .cta-band:has(> .knopfreihe) .cta-band__kacheln .kachelfeld { left: auto; right: 0; translate: 0 -50%; }
}

/* ---------- Abschluss-Band mit Formular (.cta-band--formular, Leistungsseiten; Andrea Tissen, 2026-10-21: „füge hier noch ein
   Formular ein mit Vorname nachname E-Mail und Telefon wie bei neu.infra-struktur“): Text und Kontaktwege links, weiße
   Formularkarte rechts (ab 1024 px), darunter auf schmalen Bildschirmen. Logik: js/formular.js (Baustein bausteine/formular/,
   von sync.py erzeugt); ohne https-Adresse in action wird nichts gesendet (Vorschau-Hinweis) ---------- */
.cta-band--formular { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); align-items: start; }
.cta-band--formular .cta-band__title { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); }
.cta-band--formular .cta-band__text { max-width: 34rem; margin-top: .9rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }
.cta-band--formular .knopfreihe { margin-top: 1.75rem; }
.cta-band--formular .cta-band__kacheln .kachelfeld { left: 0; top: auto; bottom: 0; translate: none; --spalten: 14; --zeilen: 8; --blende: linear-gradient(45deg, #000 10%, transparent 70%); }
@media (min-width: 1024px) {
  .cta-band--formular { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: center; }
}
.demo-form {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--radius); background: var(--tile); color: var(--text);
  box-shadow: 0 30px 60px -30px rgba(0, 20, 50, .6);
}
.demo-form__title { color: var(--ink); font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.demo-form__grid { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .demo-form__grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .35rem; align-content: start; }
.field label { color: var(--ink); font-size: .9375rem; font-weight: 600; }
.req { color: var(--accent-700); }
.field input {
  width: 100%; min-height: 50px; padding: 0 .95rem;
  border: 1.5px solid #d3dceb; border-radius: 8px; background: var(--bg);
  font: inherit; font-size: 1rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input:hover { border-color: #b4c3dc; }
.field input:focus { outline: none; border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 4px rgba(0, 73, 148, .14); }
.field input[aria-invalid="true"] { border-color: #c62828; box-shadow: 0 0 0 4px rgba(198, 40, 40, .12); }
.field__error { color: #c62828; font-size: .8125rem; font-weight: 600; text-wrap: balance; }
.cta-band .demo-form__submit { width: 100%; margin-top: 1.5rem; background: var(--accent); color: var(--white); }
.cta-band .demo-form__submit:hover { background: var(--accent-hover); }
.cta-band .demo-form__submit:disabled { cursor: progress; opacity: .75; transform: none; }
.demo-form__legal { margin-top: 1rem; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.demo-form__legal a { color: var(--primary); }
.demo-form__status:not(:empty) { margin-top: 1rem; padding: .8rem 1rem; border-radius: 8px; background: var(--accent-50); color: var(--ink); font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.demo-form__status.is-fehler { background: #fdecea; color: #8e1c1c; }
.demo-form__status.is-fehler a { color: inherit; text-underline-offset: 3px; }
/* Fangfeld für Bots: für Menschen unsichtbar, nicht per Tab erreichbar */
.demo-form__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demo-form--danke p:not(.demo-form__title) { margin-top: .75rem; }
.demo-form__nr { color: var(--muted); font-size: .875rem; }
.demo-form__nr span { white-space: nowrap; }
.demo-form--danke:focus { outline: none; }
/* Spamschutz am Formular: Hinweis ohne Einwilligung (Consent-Baustein blendet ihn ein und aus), reCAPTCHA-Badge aus,
   dafür Hinweis im Rechtstext unter dem Button (Vorgabe von Google, Skill formular-crm; Andrea Tissen, 2026-10-22) */
.demo-form__spamschutz { margin-top: 1.25rem; padding: .9rem 1rem; border-radius: 8px; background: var(--tile-hell); color: var(--muted); font-size: .875rem; line-height: 1.5; }
.demo-form__spamschutz-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .7rem; }
.demo-form__mehr { padding: .4rem 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: .875rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.grecaptcha-badge { visibility: hidden; }

/* ---------- Animierte Grafik im Seitenkopf statt Foto (.hg, Andrea Tissen, 2026-10-21: Checklisten und alle Leistungsseiten):
   Verlaufsfläche mit geordneten Vierecken, darauf eine weiße Karte mit Titel und drei (.hg--vier: vier) Zeilen, die
   nacheinander einen Status bekommen (Haken), ein Balken füllt sich, danach zwei Kacheln mit Icons. Bewegung einmalig
   bzw. endlich, bei „Bewegung reduzieren“ sofort der Endzustand. Rein dekorativ (aria-hidden). Markup: README → Bausteine ---------- */
.hg { position: relative; isolation: isolate; width: 100%; max-width: 540px; aspect-ratio: 6 / 5; margin-inline: auto; }
.hg__flaeche { position: absolute; inset: 4% 3% 6% 14%; z-index: -1; overflow: hidden; border-radius: var(--radius-l); background: var(--gradient-diag); box-shadow: var(--shadow-l); }
.hg__flaeche .kachelfeld { right: 0; top: 0; --spalten: 12; --zeilen: 9; --blende: linear-gradient(225deg, #000 10%, transparent 70%); }
.hg__funkel { position: absolute; color: var(--white); line-height: 0; }
.hg__funkel .icon { width: 16px; height: 16px; }
.hg__funkel--1 { right: 12%; bottom: 22%; }
.hg__funkel--2 { right: 24%; bottom: 12%; opacity: .7; }
.hg__funkel--2 .icon { width: 11px; height: 11px; }
.hg__karte {
  position: absolute; left: 0; top: 17%; width: 76%;
  padding: clamp(1rem, 3.2vw, 1.5rem); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-l);
  rotate: -3deg;
}
/* Variante mit vier Punkten (Checkliste vor der Ferienzeit): Karte höher ansetzen, Zeilen enger */
.hg--vier .hg__karte { top: 10%; }
.hg--vier .hg__karte ul { gap: clamp(.35rem, 1vw, .55rem); }
.hg__titel { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; color: var(--ink); font-size: clamp(.9375rem, .85rem + .4vw, 1.125rem); font-weight: 700; line-height: 1.3; }
.hg__titel .icon { width: 20px; height: 20px; flex: none; color: var(--accent); }
.hg__karte ul { display: grid; gap: clamp(.45rem, 1.2vw, .7rem); }
.hg__karte li { display: flex; align-items: center; gap: .8rem; padding: clamp(.4rem, 1.2vw, .55rem) .6rem; border-radius: 12px; background: var(--tile-hell); }
.hg__icon { display: grid; place-items: center; width: clamp(30px, 6vw, 36px); aspect-ratio: 1; flex: none; border-radius: 10px; background: var(--white); color: var(--primary); }
.hg__icon .icon { width: 17px; height: 17px; }
.hg__zeile { display: grid; flex: 1; gap: 6px; }
.hg__zeile i { display: block; height: 7px; border-radius: 99px; background: #c9d6ec; }
.hg__zeile i + i { width: 62%; background: #dde6f4; }
.hg__haken { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 2px solid var(--accent); border-radius: 50%; background: var(--accent); color: var(--white); }
.hg__haken .icon { width: 12px; height: 12px; }
.hg__fortschritt { height: 8px; margin-top: 1rem; overflow: hidden; border-radius: 99px; background: var(--tile-2); }
.hg__fortschritt span { display: block; height: 100%; border-radius: inherit; background: var(--gradient); transform-origin: left; }
.hg__chip { position: absolute; display: grid; place-items: center; width: clamp(52px, 10vw, 68px); aspect-ratio: 1; border-radius: 18px; background: var(--white); box-shadow: var(--shadow); color: var(--primary); }
.hg__chip .icon { width: 46%; height: 46%; }
.hg__chip--a { right: 9%; top: 0; rotate: 6deg; }
.hg__chip--b { right: 0; top: 46%; rotate: -5deg; color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .hg__flaeche { animation: hg-auf .7s var(--ease) both; }
  .hg__karte { animation: hg-rein .7s var(--ease) .2s both; }
  .hg__haken { animation: hg-haken .4s var(--ease) calc(1s + var(--i) * .6s) both; }
  .hg__zeile { animation: hg-erledigt .4s var(--ease) calc(1.1s + var(--i) * .6s) both; }
  .hg__fortschritt span { animation: hg-fortschritt 1.8s var(--ease) 1s both; }
  .hg__chip { animation: hg-pop .5s var(--ease) 2.4s both, hg-schweben 2.6s ease-in-out 2.9s 2 alternate; }
  .hg__chip--b { animation-delay: 2.6s, 3.1s; }
  .hg__funkel { animation: hg-funkeln 1.2s ease-in-out 2.6s 3 both; }
  .hg__funkel--2 { animation-delay: 3s; }
  .hg--vier .hg__fortschritt span { animation: hg-fortschritt-vier 2.4s var(--ease) 1s both; }
  .hg--vier .hg__chip { animation-delay: 3s, 3.5s; }
  .hg--vier .hg__chip--b { animation-delay: 3.2s, 3.7s; }
  .hg--vier .hg__funkel { animation-delay: 3.2s; }
  .hg--vier .hg__funkel--2 { animation-delay: 3.6s; }
}
@keyframes hg-auf { from { opacity: 0; scale: .94; } }
@keyframes hg-rein { from { opacity: 0; translate: -16px 20px; } }
@keyframes hg-haken { from { background-color: var(--white); color: transparent; scale: .75; } 60% { scale: 1.12; } }
@keyframes hg-erledigt { to { opacity: .5; } }
@keyframes hg-fortschritt { 0% { transform: scaleX(.04); } 20% { transform: scaleX(.34); } 33% { transform: scaleX(.34); } 53% { transform: scaleX(.67); } 66% { transform: scaleX(.67); } 86%, 100% { transform: scaleX(1); } }
@keyframes hg-fortschritt-vier { 0% { transform: scaleX(.03); } 17% { transform: scaleX(.25); } 25% { transform: scaleX(.25); } 42% { transform: scaleX(.5); } 50% { transform: scaleX(.5); } 67% { transform: scaleX(.75); } 75% { transform: scaleX(.75); } 92%, 100% { transform: scaleX(1); } }
@keyframes hg-pop { from { opacity: 0; scale: .6; } }
@keyframes hg-schweben { to { translate: 0 -8px; } }
@keyframes hg-funkeln { 0%, 100% { opacity: .35; scale: .8; } 50% { opacity: 1; scale: 1.15; } }

/* ---------- Video im Rahmen (js/main.js): Standbild als <img>, Video blendet ein, sobald es läuft; Pause-Knopf (WCAG 2.2.2) ---------- */
.video-frame {
  position: relative;
  aspect-ratio: 3 / 2; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-l);
  background: var(--primary-900);
  box-shadow: 0 30px 60px -30px rgba(0, 10, 30, .7);
}
.video-frame > img, .video-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame > video { opacity: 0; transition: opacity .6s var(--ease); }
.video-frame.is-playing > video { opacity: 1; }
.video-frame__knopf {
  position: absolute; right: 14px; bottom: 14px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--primary);
  box-shadow: 0 6px 18px -6px rgba(0, 20, 50, .5);
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.video-frame__knopf:hover { background: var(--white); transform: scale(1.06); }
.video-frame__knopf .icon { width: 15px; height: 15px; }
.video-frame__knopf .i-play, .video-frame.is-paused .video-frame__knopf .i-pause { display: none; }
.video-frame.is-paused .video-frame__knopf .i-play { display: block; }
.video-frame__knopf:focus-visible { box-shadow: 0 0 0 3px var(--primary); }

/* ---------- Video von YouTube, lädt erst nach Einwilligung (Baustein consent, Dienst „youtube“; Andrea Tissen, 2026-10-21).
   Bis dahin zeigt der Platzhalter das lokale Standbild aus --standbild (style-Attribut der figure, URL relativ zur Seite);
   auf dem Handy steht der Hinweis unter dem Bild, ab 640 px auf dem Bild. Wie .video auf neu.infra-struktur.de ---------- */
.video { position: relative; max-width: 960px; margin-inline: auto; overflow: hidden; border-radius: var(--radius-l); background: var(--primary); box-shadow: var(--shadow-l); }
.video__frame { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.video .lpc-platzhalter {
  aspect-ratio: auto !important; min-height: 0; border-radius: 0;
  padding: calc(56.25% + 1.25rem) 1.25rem 1.5rem;
  background: var(--standbild) center top / 100% auto no-repeat, var(--primary);
  color: rgba(255, 255, 255, .92);
}
.video .lpc-knopf--laden { border-color: var(--white); background: var(--white); color: var(--primary); }
.video .lpc-knopf--laden:hover { border-color: var(--tile-hell); background: var(--tile-hell); }
.video .lpc-textknopf { color: var(--white); }
.video :focus-visible { outline-color: var(--white); }
.video__link { display: block; padding: 1.25rem; color: var(--white); font-weight: 700; text-align: center; }
@media (min-width: 640px) {
  .video .lpc-platzhalter {
    aspect-ratio: 16 / 9 !important; align-content: end; padding: clamp(1.5rem, 3vw, 2.25rem);
    background: linear-gradient(180deg, rgba(0, 38, 80, 0) 30%, rgba(0, 38, 80, .82) 62%, rgba(0, 38, 80, .94) 100%), var(--standbild) center / cover no-repeat;
  }
}

/* ---------- Zitate und Rezensionen wie auf neu; .quote--featured im Verlauf ---------- */
.quotes { display: grid; gap: 1.25rem; }
.quote { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem; border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s); }
.quote__mark { width: 28px; height: 28px; color: var(--accent); }
.quote blockquote { color: var(--ink); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: anywhere; }
.quote figcaption { display: flex; align-items: center; gap: .85rem; margin-top: auto; line-height: 1.35; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--tile-2); color: var(--primary); font-size: .9375rem; font-weight: 700; }
/* Profilbild aus der Google-Rezension statt Initialen (Andrea Tissen, 2026-10-21) */
.avatar--bild { overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.avatar--bild img { width: 100%; height: 100%; object-fit: cover; }
.quote__name { display: block; color: var(--ink); font-weight: 700; }
.quote__org { display: block; color: var(--muted); font-size: .875rem; }
.quote--featured { position: relative; overflow: hidden; background: var(--gradient); box-shadow: var(--shadow-l); }
.quote--featured .quote__mark { color: var(--white); opacity: .85; }
.quote--featured blockquote { color: var(--white); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 600; line-height: 1.4; }
.quote--featured .avatar { background: rgba(255, 255, 255, .18); color: var(--white); }
.quote--featured .quote__name { color: var(--white); }
.quote--featured .quote__org { color: rgba(255, 255, 255, .85); }
@media (min-width: 768px) {
  .quote--featured { padding: 2.25rem 2.5rem; }
}
/* Zwei Zitate nebeneinander erst ab 1024 px (drei: .raster--3) */
@media (min-width: 1024px) {
  .quotes--duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Stellen: Link-Kacheln mit Verlaufskante (Startseite, Jobs-Band) ---------- */
.stellen { display: grid; gap: 1rem; }
.stelle {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.35rem 1.15rem 1.15rem;
  border-radius: var(--radius); background: var(--tile); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.stelle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient); }
.stelle:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.stelle__icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--tile-2); color: var(--primary); }
.stelle__icon .icon { width: 22px; height: 22px; }
.stelle__body { display: grid; flex: 1; min-width: 0; }
.stelle__titel { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.stelle__meta { margin-top: .2rem; color: #6b7280; font-size: .9375rem; font-weight: 400; line-height: 1.4; } /* helleres Grau und dünnerer Schnitt (Andrea Tissen, 2026-10-21), 4,8:1 auf Weiß */
.stelle__pfeil { width: 18px; height: 18px; color: var(--accent); transition: transform .2s var(--ease); }
.stelle:hover .stelle__pfeil { transform: translateX(3px); }

/* Jobs-Band: Verlaufskachel mit geordneten Kacheln, Text und Stellen links, freigestelltes Teamfoto rechts, senkrecht mittig
   (Andrea Tissen, 2026-10-22: „setze das bild vertikal gesehen mittig in der Karte“; vorher auf der Unterkante stehend) */
.jobs-banner {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  border-radius: var(--radius-l); background: var(--gradient);
  color: rgba(255, 255, 255, .9); box-shadow: var(--shadow-l);
}
.jobs-banner h2 { margin-top: .75rem; color: var(--white); }
.jobs-banner__text > p:not(.eyebrow) { max-width: 34rem; margin-top: 1.1rem; }
.jobs-banner .stellen { margin-top: 1.75rem; }
.jobs-banner__bild { align-self: center; width: min(100%, 520px); margin-inline: auto; filter: drop-shadow(0 16px 20px rgba(0, 20, 50, .3)); }
@media (min-width: 1024px) {
  .jobs-banner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 3rem; }
}

/* Deutschlandflagge hinter „hosted in Germany“ (Startseite, Andrea Tissen, 2026-10-21) und „gehostet in Deutschland“
   (/infra-struktur/, 2026-10-22); heller Rand, damit Schwarz auf Dunkelblau sichtbar bleibt. Markup:
   <span class="flagge-de" aria-hidden="true"></span> direkt hinter dem Wort, beides in <span class="nb">, damit sie nicht allein umbricht */
.flagge-de {
  display: inline-block; width: 1.4em; height: .84em; margin-left: .5em; vertical-align: -.06em;
  border-radius: 3px; background: linear-gradient(#000 0 33.34%, #d00 33.34% 66.67%, #ffce00 66.67%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
}
/* In Überschriften kleiner (Andrea Tissen, 2026-10-22: „füge eine kleine Deutschlandflagge ein“) */
:is(h1, h2) .flagge-de { width: .9em; height: .54em; margin-left: .3em; vertical-align: .06em; border-radius: 4px; }

/* ---------- Ansprechpartner: rundes Foto, Name, Rolle ---------- */
.person { display: flex; align-items: center; gap: 1rem; }
.person img { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--white), var(--shadow-s); }
.person strong { display: block; color: var(--ink); font-weight: 600; line-height: 1.35; }
.person small { display: block; color: var(--muted); font-size: .875rem; line-height: 1.45; }

/* ---------- FAQ wie auf neu: Kopf links (am Rechner mitlaufend), Fragen als weiße Kacheln rechts ---------- */
.faq { display: grid; gap: .5rem; }
.faq__list { display: grid; gap: .75rem; }
.faq details { border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s); transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding: 1rem 1.35rem;
  border-radius: var(--radius);
  color: var(--ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
  list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 18px; height: 18px; color: var(--accent); transition: transform .3s var(--ease); }
/* Nur text-wrap-style: die Kurzform text-wrap hebt das nowrap von span.nb auf */
.faq summary > span { text-wrap-style: balance; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding: 0 1.35rem 1.35rem; color: var(--muted); }
@media (min-width: 1024px) {
  .faq { grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 3rem); margin-bottom: 0; }
}

/* ---------- Abschluss „Lass uns sprechen“: große Verlaufskachel wie der Abschluss auf neu, rechts eine weiße Karte mit den
   Kontaktwegen statt Formular ---------- */
.final-cta { padding: var(--section-y) 0; }
.final-cta__inner {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
  border-radius: var(--radius-l); background: var(--gradient);
  color: rgba(255, 255, 255, .9); box-shadow: var(--shadow-l);
}
.final-cta h2 { margin-top: .75rem; color: var(--white); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.final-cta__text { max-width: 34rem; margin-top: 1.2rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }

/* Kontaktkarte: Telefon, E-Mail, Button zur Kontaktseite */
.kontakt-karte {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border-radius: var(--radius); background: var(--tile); color: var(--text);
  box-shadow: 0 30px 60px -30px rgba(0, 20, 50, .6);
}
.kontakt-karte__titel { color: var(--ink); font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.kontakt-karte__liste { display: grid; gap: 1.15rem; margin-top: 1.4rem; }
.kontakt-karte__liste li { display: flex; align-items: flex-start; gap: .9rem; }
.kontakt-karte__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--tile-2); color: var(--primary); }
.kontakt-karte__icon .icon { width: 18px; height: 18px; }
.kontakt-karte h3 { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.kontakt-karte__wert { display: block; margin-top: .1rem; color: var(--ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; overflow-wrap: break-word; }
a.kontakt-karte__wert { text-decoration: none; }
a.kontakt-karte__wert:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.kontakt-karte__klein { margin-top: .1rem; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.kontakt-karte__btn { width: 100%; margin-top: 1.6rem; }
@media (min-width: 1024px) {
  .final-cta__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
}

/* ---------- Fließtext (Rechtstexte, Ratgeber) und Tabellen ---------- */
.prose { max-width: 46rem; }
/* Abstände zwischen den Kindern, auch wenn der Text in <section> gegliedert ist (Rechtstexte); Spezifität eines Elements,
   damit .prose h2/h3 gewinnen */
.prose > * + *, :where(.prose) section > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.prose h3 { margin-top: 1.75rem; }
.prose a:not([class]) { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul { display: grid; gap: .6rem; }
.prose ul > li { position: relative; padding-left: 1.6rem; }
.prose ul > li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); }
.prose ol { display: grid; gap: .6rem; padding-left: 1.4rem; list-style: decimal; }
.prose ol > li::marker { color: var(--accent-700); font-weight: 600; }

/* Tabelle im Wrapper: auf dem Handy seitlich scrollbar statt gequetscht */
.tabelle-wrap { overflow-x: auto; border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s); }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.tabelle th, .tabelle td { min-width: 9rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tabelle th { background: var(--tile-2); color: var(--ink); font-weight: 600; }
/* Letzte Zeile der Tabelle ohne Linie, auch bei Zeilenköpfen <th scope="row">; die Linie unter dem Tabellenkopf bleibt */
.tabelle > :last-child > tr:last-child > * { border-bottom: 0; }

/* ---------- Footer: Vorlage tools/netzkultur/vorlagen/fuss.html, Aufbau wie der Footer von neu; Fläche und die Lippstadt-Skyline
   darüber im Verlauf von links #002555 nach rechts #004994 (Andrea Tissen, 2026-10-21). Skyline und Fläche sind gleich breit,
   der Verlauf läuft deshalb ohne Kante durch. Die Skyline steht auf dem Seitengrund: letzter Abschnitt ohne Hintergrund. ---------- */
.site-footer { --footer-verlauf: linear-gradient(90deg, #002555 0%, #004994 100%); color: rgba(255, 255, 255, .86); font-size: .9375rem; line-height: 1.6; }
/* Skyline ganz, ohne Anschnitt (Andrea Tissen, 2026-10-21): Fläche im Seitenverhältnis der Grafik, Maske auf volle Breite.
   ::after reicht 2 px unter die Fläche, damit die transparente letzte Zeile der Datei hinter dem Footer liegt.
   ::before legt einen schmalen Streifen im Footer-Verlauf unter die Nahtstelle: Liegt die Oberkante des Footers auf
   einem Bruchteil eines Pixels, mischt der Browser die Kantenzeile sonst mit dem halbtransparenten Maskenrand und
   dem hellen Seitengrund, und eine feine helle Linie wird sichtbar (Andrea Tissen, 2026-10-22, gesehen auf /clouddrive…/). */
.site-footer__skyline { position: relative; aspect-ratio: 2400 / 426; }
.site-footer__skyline img { display: none; }
.site-footer__skyline::before { content: ""; position: absolute; inset: auto 0 -2px; height: 3px; background: var(--footer-verlauf); }
.site-footer__skyline::after {
  content: ""; position: absolute; inset: 0 0 -2px; background: var(--footer-verlauf);
  -webkit-mask: url("../assets/img/deko/skyline-lippstadt-2400.webp") center bottom / 100% auto no-repeat;
  mask: url("../assets/img/deko/skyline-lippstadt-2400.webp") center bottom / 100% auto no-repeat;
}
.site-footer__main { position: relative; padding: clamp(3rem, 7vw, 4.5rem) 0 1.75rem; background: var(--footer-verlauf); }
.site-footer a { color: var(--white); }
.site-footer__grid { display: grid; gap: 2.5rem 1.25rem; }
.site-footer__marke { display: grid; gap: 1.1rem; align-content: start; max-width: 25rem; }
.site-footer__logo { display: inline-flex; justify-self: start; color: var(--white); border-radius: 6px; }
.site-footer__logo .logo { width: 180px; }
.site-footer__slogan { color: var(--white); line-height: 1.45; }
.site-footer__slogan strong { color: var(--white); }
.site-footer__kontakt { display: grid; gap: .5rem; }
.site-footer__kontakt li { display: flex; align-items: flex-start; gap: .65rem; }
.site-footer__kontakt .icon { width: 1rem; height: 1rem; margin-top: .3em; color: var(--hell); }
/* Telefon und E-Mail: unsichtbar vergrößerte Tippfläche auf mind. 44 px Höhe */
.site-footer__kontakt a { position: relative; text-decoration: none; }
.site-footer__kontakt a::after { content: ""; position: absolute; inset: -10px -8px; }
.site-footer__kontakt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__titel { margin: 0 0 .5rem; color: var(--white); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; }
.site-footer__klein { margin-bottom: .6rem; color: rgba(255, 255, 255, .8); font-size: .875rem; line-height: 1.5; }
/* Spalten-Links mit Hover wie .on-gradient-link auf neu: halbtransparente weiße Fläche, Text von Hellblau zu Weiß */
.site-footer__spalte > ul:not(.social) { display: grid; margin-inline: -.75rem; }
.site-footer__spalte > ul:not(.social) a, .site-footer__recht a {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .75rem; border-radius: 7px;
  color: var(--tile-2); font-weight: 600; text-decoration: none;
  transition: color .4s;
}
.site-footer__spalte > ul:not(.social) a::before, .site-footer__recht a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: rgba(255, 255, 255, .24);
  opacity: 0; transition: opacity .4s;
}
.site-footer__spalte > ul:not(.social) a:hover, .site-footer__spalte > ul:not(.social) a:focus-visible,
.site-footer__recht a:hover, .site-footer__recht a:focus-visible { color: var(--white); }
.site-footer__spalte > ul:not(.social) a:hover::before, .site-footer__spalte > ul:not(.social) a:focus-visible::before,
.site-footer__recht a:hover::before, .site-footer__recht a:focus-visible::before { opacity: 1; }
.site-footer__downloads .icon { width: 1rem; height: 1rem; color: var(--hell); }
/* Social Media: runde Icon-Knöpfe, 44 px Tippfläche */
.social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: var(--white);
  transition: background-color .3s, border-color .3s, transform .2s var(--ease);
}
.social a:hover, .social a:focus-visible { border-color: var(--white); background: rgba(255, 255, 255, .24); transform: translateY(-2px); }
.social .icon { width: 18px; height: 18px; }
.site-footer__unten {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: 1.25rem;
}
/* Trennlinie nur über der Inhaltsbreite (der Container hat seitlich Innenabstand) */
.site-footer__unten::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid rgba(255, 255, 255, .22); }
.site-footer__copy, .site-footer__stand { color: rgba(255, 255, 255, .8); font-size: .875rem; }
.site-footer__recht { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.site-footer__recht a { padding: .45rem .75rem; font-size: .875rem; }
/* Zwei Spalten erst ab 480 px: darunter würde „Bürosoftware infra-struktur“ am Bindestrich umbrechen */
@media (min-width: 480px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__marke, .site-footer__spalte:last-child { grid-column: 1 / -1; }
}
/* Tablet und kleiner Desktop: zwei mal zwei (Marke | Leistungen, Unternehmen | Fernwartung) */
@media (min-width: 768px) {
  .site-footer__grid { gap: 2.5rem 2rem; }
  .site-footer__marke, .site-footer__spalte:last-child { grid-column: auto; }
  .site-footer__recht { margin-left: auto; margin-right: -.75rem; }
}
/* Vier Spalten erst ab 1200 px, darunter würden Öffnungszeiten und Social-Icons umbrechen */
@media (min-width: 1200px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}

/* Cookie-Banner (Baustein bausteine/consent/) im CD von NETZkultur; „body“ erhöht die Spezifität,
   weil consent.js seine eigene consent.css nach dieser Datei lädt */
body .lpc, body .lpc-platzhalter {
  --lpc-primary: #004994;
  --lpc-accent: #009ee3;
  --lpc-bg: #eef3fb;
  --lpc-tile-2: #dfe8f7;
  font-family: var(--font);
}

/* ---------- Bewegung ---------- */

@keyframes klingeln { 0%, 100% { rotate: 0deg; } 15%, 45% { rotate: -14deg; } 30%, 60% { rotate: 14deg; } 75% { rotate: 0deg; } }

@media (prefers-reduced-motion: no-preference) {
  /* Weich scrollen erst nach dem Laden (main.js: html.is-loaded): Sprungziele von anderen Seiten erscheinen sofort */
  html.is-loaded { scroll-behavior: smooth; }
  /* Einblenden über „translate“, damit „transform“ für den Hover-Lift der Kacheln frei bleibt */
  .js [data-reveal] {
    opacity: 0; translate: 0 18px;
    transition: opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s), transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .js [data-reveal].is-visible { opacity: 1; translate: none; }
  /* Telefon-Icon im Abschluss-Band klingelt zweimal (nur Telefon-Links, nicht z. B. „Jetzt bewerben“ mit Extern-Icon) */
  .js .cta-band.is-visible .btn--cta[href^="tel:"] .icon { animation: klingeln 1.1s ease-in-out .8s 2; }
}

/* ---------- Breakpoints ---------- */

@media (max-width: 479px) {
  .page-hero__actions .btn { flex: 1 1 100%; }
  .nav-toggle { padding: 0 .6rem; }
  .nav-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Schmale Handys: Kontaktkarte kompakter, damit „kontakt@netzkultur.de“ in eine Zeile passt */
@media (max-width: 399px) {
  .final-cta__inner { padding-inline: 1rem; }
  .kontakt-karte__liste li { gap: .75rem; }
  .kontakt-karte__icon { width: 38px; height: 38px; border-radius: 10px; }
  .kontakt-karte__wert { font-size: 1rem; }
}
@media (max-width: 359px) {
  .site-header__inner { gap: .5rem; }
  .logo { width: 132px; }
}
@media (min-width: 768px) {
  :root { --header-h: 72px; }
  body { font-size: 1.125rem; }
  .logo { width: 178px; }
}
@media (min-width: 1024px) {
  .section-head-row { grid-template-columns: minmax(0, 1fr) auto; }
  .page-hero__grid:has(> .page-hero__visual) { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--media-links > .split__text { order: 1; }
}

@media print {
  .site-header, .video-frame__knopf { display: none !important; }
  .section--secure, .cta-band, .final-cta__inner, .jobs-banner, .quote--featured, .site-footer, .site-footer__main { background: none !important; color: #000 !important; }
  .site-footer__skyline { display: none !important; }
  h1 .light, h2 em { background: none !important; color: var(--primary) !important; }
}