/* ==========================================================================
   NICERU Website - Seitenlayout und Bausteine
   Baut auf niceru-design.css auf und verwendet nur deren Rollen-Tokens.
   Mobile first, Breakpoints 640 / 768 / 1024 / 1280 px.
   ========================================================================== */

/* Ersatzschrift mit der Laufweite von Manrope (Arial/Helvetica angepasst), bis Manrope
   geladen ist - verhindert, dass Menü und Texte beim Schriftwechsel verspringen.
   Werte aus den Manrope-Metriken: size-adjust für Gewicht 500 (Menü), Ober-/Unterlänge 1,066/0,3 em. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 105%;
  ascent-override: 101.52%;
  descent-override: 28.57%;
  line-gap-override: 0%;
}

:root {
  --header-height: 72px;
  /* Gelbes Warnzeichen (Hinweis auf der Fernwartung): Fläche gelb, Rand und Ausrufezeichen
     dunkel - in beiden Modi gleich, wie ein Warnschild */
  --warning-sign: #f5b800;
  --on-warning-sign: var(--graphit);
  --font-sans: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Footer auch auf kurzen Seiten am unteren Rand */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }
main:focus { outline: none; }

/* Absätze in allen Browsern gleich umbrechen: text-wrap: pretty aus der Design-CSS
   unterstützt Firefox nicht, dort brächen Zeilen sonst anders um als in Chrome. */
p { text-wrap: wrap; }

/* Sprungziele und per Tab fokussierte Elemente nicht unter dem Sticky-Header verstecken
   (scroll-padding gilt für beides; scroll-margin an den Zielen käme noch hinzu) */
html { scroll-padding-top: calc(var(--header-height) + var(--space-4)); }

ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; margin: 0; }

.icon { flex: none; }

/* --------------------------------------------------------------------------
   Header & Navigation
   -------------------------------------------------------------------------- */
.site-header__inner { gap: var(--space-4); }
.site-header .logo { flex: none; }

.site-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.header-cta { display: none; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--primary-soft); color: var(--primary); }
/* Knöpfe brauchen JavaScript: sichtbar über die Klasse .js, die das Inline-Skript im <head>
   vor dem ersten Zeichnen setzt - so verschiebt sich der Header beim Laden nicht. */
.theme-toggle,
.menu-toggle { display: none; }
.js .theme-toggle,
.js .menu-toggle { display: inline-grid; }

/* Theme-Umschalter: zeigt das Ziel-Design (Mond = dunkel aktivieren) */
.theme-toggle__light { display: none; }
:root[data-theme="dark"] .theme-toggle__dark { display: none; }
:root[data-theme="dark"] .theme-toggle__light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__dark { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__light { display: block; }
}

.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

/* Mobiles Menü (mit JavaScript): aufklappendes Panel unter dem Header */
.js .site-nav { display: none; }
.js .site-nav[data-open] {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: var(--space-2) var(--gutter) var(--space-6);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.site-nav__list .nav__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}
.site-nav__list .nav__link::after { display: none; }
.site-nav__list .nav__link[aria-current="page"] { font-weight: var(--fw-bold); }
.site-nav__cta { margin-top: var(--space-6); width: 100%; }

/* Ohne JavaScript: Menü als umbrechende Liste unter dem Logo */
html:not(.js) .site-header { position: static; }
html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: var(--space-3); }
html:not(.js) .site-nav { order: 3; width: 100%; }
html:not(.js) .site-nav__list { display: flex; flex-wrap: wrap; column-gap: var(--space-4); }
html:not(.js) .site-nav__list .nav__link { border: 0; min-height: 44px; }
html:not(.js) .site-nav__cta { display: none; }

@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
  .site-nav__cta { display: none; }
}

@media (min-width: 1024px) {
  .js .site-nav,
  .js .site-nav[data-open],
  .site-nav {
    display: flex;
    position: static;
    order: 0;
    width: auto;
    max-height: none;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-nav__list,
  html:not(.js) .site-nav__list { display: flex; gap: var(--space-6); }
  .site-nav__list .nav__link {
    min-height: 0;
    border: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }
  .site-nav__list .nav__link::after { display: block; }
  .site-nav__list .nav__link[aria-current="page"] { font-weight: var(--fw-medium); }
  .site-header__tools { margin-left: var(--space-2); }
  .js .menu-toggle { display: none; }
  html:not(.js) .site-header { position: sticky; }
  html:not(.js) .site-header__inner { flex-wrap: nowrap; padding-block: 0; }
}

/* Dropdown „Leistungen“: Button mit aria-expanded, Liste darunter (site.js).
   Mobil eine aufklappende Unterliste im Menü, ab 1024 px ein Panel unter dem Menüpunkt. */
.nav-group__toggle {
  width: 100%;
  justify-content: space-between;
  gap: var(--space-1);
  margin: 0;
  padding-inline: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
}
.nav-group__toggle .icon { transition: transform var(--dur-base) var(--ease-out); }
.nav-group__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-group.is-current > .nav-group__toggle { color: var(--primary); }

.nav-group__menu { margin: 0; padding: 0; list-style: none; }
.js .nav-group__toggle:not([aria-expanded="true"]) + .nav-group__menu { display: none; }

.nav-sub__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding-left: var(--space-4);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.nav-sub__link:hover { color: var(--primary); text-decoration: none; }
.nav-sub__link[aria-current="page"] { color: var(--primary); font-weight: var(--fw-bold); }
.nav-sub__icon { display: grid; place-items: center; flex: none; color: var(--primary); }
.nav-sub__text { display: grid; }
.nav-sub__desc { display: none; }

/* Ohne JavaScript: Leistungen direkt als normale Menüpunkte */
html:not(.js) .nav-group__toggle { display: none; }
html:not(.js) .nav-group { display: contents; }
html:not(.js) .nav-group__menu { display: contents; }
html:not(.js) .nav-group__menu li { display: block; }
html:not(.js) .nav-sub__link { min-height: 44px; padding: 0; border: 0; color: var(--ink-muted); }
html:not(.js) .nav-sub__link[aria-current="page"] { color: var(--primary); }
html:not(.js) .nav-sub__icon { display: none; }
@media (min-width: 1024px) {
  html:not(.js) .site-nav__list { align-items: center; }
  html:not(.js) .nav-sub__link { min-height: 0; padding-block: var(--space-2); font-size: var(--fs-small); line-height: var(--lh-small); }
  html:not(.js) .nav-sub__link[aria-current="page"] { font-weight: var(--fw-medium); }
  /* Menü ohne JavaScript am Desktop wieder zwischen Logo und Header-Button */
  html:not(.js) .site-nav { order: 0; width: auto; }
}

@media (min-width: 1024px) {
  .nav-group { position: relative; display: flex; }
  .nav-group__toggle { width: auto; }
  .nav-group.is-current > .nav-group__toggle::after { transform: scaleX(1); }

  .js .nav-group__menu {
    position: absolute;
    top: calc(100% + var(--space-4));
    left: calc(var(--space-6) * -1);
    z-index: var(--z-overlay);
    display: grid;
    gap: var(--space-1);
    width: 360px;
    padding: var(--space-2);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  /* unsichtbare Brücke, damit das Panel beim Hinüberfahren mit der Maus offen bleibt */
  .js .nav-group__menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--space-4);
  }
  .js .nav-sub__link {
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .js .nav-sub__link:hover,
  .js .nav-sub__link[aria-current="page"] { background: var(--primary-soft); }
  .js .nav-sub__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .js .nav-sub__link:hover .nav-sub__icon,
  .js .nav-sub__link[aria-current="page"] .nav-sub__icon { background: var(--primary); color: var(--on-primary); }
  .js .nav-sub__label { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); }
  .js .nav-sub__desc {
    display: block;
    color: var(--ink-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
  }
}

/* --------------------------------------------------------------------------
   Sektionen & Überschriften
   -------------------------------------------------------------------------- */
.section-head {
  max-width: var(--container-text);
  margin-bottom: var(--space-8);
}
.section-head > :last-child,
.section-head--flush { margin-bottom: 0; }
.section-head p { margin-top: var(--space-4); }
/* Lange Überschrift über die volle Breite (z. B. über den Schritten), Zeilen ausgeglichen */
.section-head--wide { max-width: none; }

/* Sektions-Überschriften ab Tablet eine Stufe größer (h1-Stufe der Schriftskala) */
@media (min-width: 768px) {
  .section-head h2,
  .cta h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
  .section-head { margin-bottom: var(--space-12); }
  .section-head--flush { margin-bottom: 0; }
}

.split {
  display: grid;
  gap: var(--space-8);
}
.split > * { min-width: 0; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
  .split--center { align-items: center; }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Lange Button-Texte auf schmalen Displays umbrechen statt überlaufen */
@media (max-width: 639.98px) {
  .btn-row .btn { width: 100%; }
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding-inline: var(--space-6); font-size: var(--fs-body); line-height: var(--lh-body); }
}

/* --------------------------------------------------------------------------
   Hero (Startseite): Text links, Foto rechts mit 45°-Anschnitt unten links.
   Im Anschnitt liegen zwei Bänder - die eine Verlaufsfläche der Seite, nie hinter Text.
   Mobil steht das Foto oben, darunter der Text.
   Ohne Foto ($heroFoto in app/pages/index.php) steht in der Bildfläche das Bänder-Motiv
   (.hero__visual--baender, unten).
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-4) var(--space-12);
}
.hero__grid {
  flex: 1 0 auto;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.hero__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-bold);
}
.hero__lead { max-width: 56ch; margin-bottom: var(--space-6); }

/* Slogan wird Zeichen für Zeichen getippt (site.js). Alle Zeichen stehen von Anfang an im
   Layout und werden nur sichtbar geschaltet - nichts springt, Umbrüche bleiben gleich.
   Bis das Skript übernimmt, ist der Slogan unsichtbar (kein Aufblitzen); lädt es nicht,
   erscheint er nach 2 s trotzdem. Bei reduzierter Bewegung steht er einfach da. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__slogan:not(.is-typing) { visibility: hidden; animation: slogan-fallback 0s 2s forwards; }
}
@keyframes slogan-fallback { to { visibility: visible; } }
.hero__char:not(.is-shown) { visibility: hidden; }
/* Cursor: Sky-Strich mit runden Enden, ohne eigene Breite im Textfluss.
   Beim Tippen steht er still, danach blinkt er dreimal und blendet aus. */
.hero__caret { position: relative; }
.hero__caret::after {
  content: "";
  position: absolute;
  left: 0.06em;
  top: 0.18em;
  bottom: 0.12em;
  width: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.is-typed .hero__caret::after {
  animation: caret-blink 1s steps(1) 3, caret-out var(--dur-slow) var(--ease-out) 3s forwards;
}
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes caret-out { to { opacity: 0; } }

/* Bildfläche - --cut ist die Kantenlänge des 45°-Anschnitts */
.hero { --hero-visual-h: clamp(220px, 38svh, 400px); } /* mobil auch Maß für die Hintergrund-Geometrie */
.hero__visual {
  --cut: clamp(112px, 34vw, 176px);
  position: relative;
  order: -1;
  height: var(--hero-visual-h);
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
/* Foto ist 116 % hoch, damit es beim Scrollen langsamer mitlaufen kann (Parallax, site.js) */
.hero__media img {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 85% 30%;
  will-change: transform;
}
/* Dark Mode: helles Foto leicht abdunkeln */
:root[data-theme="dark"] .hero__media img { filter: brightness(0.9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__media img { filter: brightness(0.9); }
}

/* Bänder im Anschnitt: Quadrat unten links, dessen Diagonale die Schnittkante ist.
   --d verschiebt ein Band rechtwinklig von der Kante weg in die freie Ecke; Länge und
   Abstand sind so gewählt, dass die runden Enden vollständig sichtbar bleiben.
   Gleiche Geometrie für die Ansprechpartner-Fotos der IT-Check-Seite (.lp-person__cut). */
.hero__cut,
.lp-person__cut {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--cut);
  height: var(--cut);
  container-type: size;
  pointer-events: none;
}
.hero__band,
.lp-person__band {
  top: 50%;
  left: 50%;
  width: var(--len);
  height: var(--thick);
  --dx: calc(var(--d) * -0.7071);
  --dy: calc(var(--d) * 0.7071);
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(45deg);
}
.hero__band--1,
.lp-person__band--1 { --len: 78cqw; --thick: 22cqw; --d: 17cqw; }
.hero__band--2,
.lp-person__band--2 { --len: 36cqw; --thick: 7cqw; --d: 39cqw; }

/* Bildfläche ohne Foto: Bänder-Motiv (Partial baender) über die ganze Fläche - die eine
   Verlaufsfläche der Seite. Beim Laden wird jedes Band von seinem oberen runden Ende aus
   gezogen, danach schwebt es langsam (Animation unten bei „Bewegung“). Auf dem Desktop
   folgen die Bänder leicht der Maus: --mouse-x/--mouse-y setzt site.js, je Band unterschiedlich
   weit (wirkt räumlich). --band-float ist der Schwebe-Weg, --ux/--uy seine Richtung
   (entlang des Bands bzw. beim Signet-Tief-Band quer dazu). */
@property --band-float { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --mouse-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --mouse-y { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hero__visual--baender .niceru-bands { overflow: visible; }
.hero__visual--baender .brand-visual__band {
  --cap: var(--band);
  --ux: 0.7071;
  --uy: 0.7071;
  translate:
    calc(var(--mouse-x, 0px) + var(--band-float, 0px) * var(--ux))
    calc(var(--mouse-y, 0px) + var(--band-float, 0px) * var(--uy));
  transition: --mouse-x calc(var(--dur-slow) * 2) var(--ease-out), --mouse-y calc(var(--dur-slow) * 2) var(--ease-out);
}
.hero__visual--baender .brand-visual__band--2 { --uy: -0.7071; }
.hero__visual--baender .brand-visual__band--3 { --cap: calc(var(--band) * 0.6); }

/* Runder Button unten mittig zum Weiterscrollen - nur auf großen Bildschirmen */
.scroll-cue {
  display: none;
  flex: none;
  align-self: center;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: var(--space-8);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--primary);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.scroll-cue:hover { background: var(--primary-soft); border-color: var(--primary); }

@media (min-width: 640px) {
  .hero__title {
    margin-bottom: var(--space-6);
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    font-weight: var(--fw-extrabold);
  }
  .hero__lead { margin-bottom: var(--space-8); }
}

/* Desktop: Text und Foto nebeneinander, Hero füllt den Bildschirm unter dem Header */
@media (min-width: 1024px) {
  .hero {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    padding-block: var(--space-8);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-12);
    align-items: stretch;
  }
  .hero__text { align-self: center; }
  .hero__visual {
    --cut: clamp(208px, 20vw, 288px);
    order: 0;
    align-self: center;
    height: 100%;
    min-height: 480px;
    max-height: 800px;
  }
  .hero__media img { object-position: 75% 40%; }
  .scroll-cue { display: grid; }
}
/* Breiter Desktop: Text- und Fotospalte gleich breit, damit beide Hero-Buttons nebeneinander passen */
@media (min-width: 1280px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero .btn--lg { padding-inline: var(--space-6); }
}

/* --------------------------------------------------------------------------
   Deko-Baustein: diagonale Formen im 45°-Winkel mit runden Enden (Signet-Striche).
   Eine Basis für alle Deko-Formen, nur Dekoration (nie Inhalt, keine Klicks):
   - Strich: kurzer Marker vor Overlines und in Aufzählungen, immer sichtbar
   - Pill: größere Form (Hintergrund-Geometrie auf allen Breiten, an Sektionen und Karten erst ab
     Desktop). Größe über --deco-w / --deco-h, Ausführung:
       .deco--line    Kontur in --deco-line (Standard line)
       .deco--soft    getönt in primary-soft
       .deco--signal  kleines Sky-Signal (accent)
       .deco--dots    Punktraster (SVG aus dem Partial hintergrund)
     Als Element (.deco, Partial hintergrund) oder als ::before/::after an Sektionen und
     Karten (.deco-pills, .service-card--feature) - die setzen nur noch Lage, Größe und Ausführung.
   -------------------------------------------------------------------------- */
.section-head .overline::before,
.section-label::before,
.hero__overline::before,
.bullets li::before {
  content: "";
  flex: none;
  width: var(--space-4);
  height: 4px;
  border-radius: var(--radius-pill);
  background: currentColor;
  rotate: 45deg;
}

/* Formen der Hintergrund-Geometrie (.deco) gibt es auf allen Breiten - sichtbar sind sie nur dort,
   wo .bg-deco eingeblendet ist. Die Pills an Sektionen und Karten kommen erst ab Desktop. */
.deco {
  position: absolute;
  width: var(--deco-w);
  height: var(--deco-h);
  border-radius: var(--radius-pill);
  rotate: 45deg;
  pointer-events: none;
}
/* Kontur */
.deco--line {
  border: 1.5px solid var(--deco-line, var(--line));
  transition: border-color var(--dur-base) var(--ease-out);
}
/* Getönt */
.deco--soft { background: var(--primary-soft); }
/* Sky-Signal - nur klein */
.deco--signal { background: var(--accent); }
/* Punktraster in Pill-Form: runde Enden per Zuschnitt */
.deco--dots {
  color: var(--line-strong);
  opacity: 0.65;
  clip-path: inset(0 round var(--radius-pill));
}
@media (min-width: 1024px) {
  .deco-pills::before, .deco-pills::after,
  .service-card--feature::before, .service-card--feature::after {
    content: "";
    position: absolute;
    width: var(--deco-w);
    height: var(--deco-h);
    border-radius: var(--radius-pill);
    rotate: 45deg;
    pointer-events: none;
    border: 1.5px solid var(--deco-line, var(--line));
    transition: border-color var(--dur-base) var(--ease-out);
  }
}

/* Hintergrund-Geometrie (Partial hintergrund): einzelne Pills mit runden Enden und Punktraster
   im 45°-Winkel. Flach, ohne Verlauf; eine Ebene über die ganze Fläche (Hero der Startseite,
   Seitenkopf der Unterseiten), die Formen stehen einzeln (keine Gruppen), auch dezent hinter
   dem Text, aber nie hinter Buttons oder dem Bänder-Motiv. Hinter dem Foto verschwinden sie.
   Position per Mittelpunkt (--x, --y) in Prozent der Fläche, Größe per --deco-w und --deco-h,
   Form und Ausführung aus dem Deko-Baustein. Hero und Seitenkopf haben sie auf allen Breiten
   (mobil nur wenige, an den Rändern angeschnitten), die Leitkarte (Betreuung) erst ab Desktop. */
.hero,
.page-head { position: relative; isolation: isolate; overflow: hidden; }
.bg-deco {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero > .bg-deco,
.page-head > .bg-deco { display: block; }
.bg-deco > * {
  left: calc(var(--x) - var(--deco-w) / 2);
  top: calc(var(--y) - var(--deco-h) / 2);
}
/* Konturen hier in line-strong, abgeschwächt - sie stehen frei auf der Fläche */
.bg-deco .deco--line { --deco-line: var(--line-strong); opacity: 0.6; }

@media (max-width: 1023.98px) {
  .bg-deco > * { display: none; }
  /* Hero der Startseite: vier Formen an den Ecken des Bänder-Motivs, halb aus dem Bild -
     links Kontur oben und Punkte unten, rechts getönte Pill oben und Kontur unten.
     Lage in Bruchteilen der Motivhöhe (--hero-visual-h), damit sie neben den Bändern bleiben. */
  .hero .bg-deco > :is(.bg-deco-1, .bg-deco-4, .bg-deco-7, .bg-deco-10) { display: block; }
  .hero .bg-deco-1 { --x: 0px; --y: calc(var(--space-4) + var(--hero-visual-h) * 0.12); --deco-w: 160px; --deco-h: 44px; }
  .hero .bg-deco-4 { --x: 100%; --y: calc(var(--space-4) + var(--hero-visual-h) * 0.2); --deco-w: 200px; --deco-h: 64px; }
  .hero .bg-deco-7 { --x: 0px; --y: calc(var(--space-4) + var(--hero-visual-h) * 0.85); --deco-w: 160px; --deco-h: 48px; }
  .hero .bg-deco-10 { --x: 100%; --y: calc(var(--space-4) + var(--hero-visual-h) * 0.9); --deco-w: 180px; --deco-h: 48px; }

  /* Seitenkopf der Unterseiten: Der Text reicht über die ganze Breite, frei sind nur die Ecken -
     getönte Pill rechts oben, Kontur links unten, Punkte rechts unten, angeschnitten */
  .page-head .bg-deco > :is(.bg-deco-2, .bg-deco-3, .bg-deco-5) { display: block; }
  .page-head .bg-deco-2 { --x: 100%; --y: 24px; --deco-w: 240px; --deco-h: 72px; }
  .page-head .bg-deco-3 { --x: calc(100% - 24px); --y: 100%; --deco-w: 128px; --deco-h: 40px; }
  .page-head .bg-deco-5 { --x: 0px; --y: calc(100% - 12px); --deco-w: 160px; --deco-h: 48px; }
}
/* Tablet: Neben Text und Buttons ist rechts Platz - dort eine getönte Pill */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero .bg-deco > .bg-deco-9 { display: block; }
  .hero .bg-deco-9 { --x: calc(100% - 48px); --y: calc(100% - 96px); --deco-w: 160px; --deco-h: 48px; }
}

@media (min-width: 1024px) {
  .bg-deco { display: block; }

  /* Hero der Startseite - oben: Kontur in der linken Ecke, getönte Pill über dem Text,
     Punkte zur Bildkante hin, große getönte Pill in der rechten Ecke */
  .hero .bg-deco-1 { --x: 4%; --y: 4%; --deco-w: 360px; --deco-h: 96px; }
  .hero .bg-deco-2 { --x: 30%; --y: 10%; --deco-w: 200px; --deco-h: 56px; }
  .hero .bg-deco-3 { --x: 47%; --y: 5%; --deco-w: 224px; --deco-h: 72px; }
  .hero .bg-deco-4 { --x: 96%; --y: 14%; --deco-w: 440px; --deco-h: 128px; }
  /* seitliche Ränder auf Texthöhe - links erst, wenn der Rand neben dem Text breit genug ist */
  .hero .bg-deco-5 { --x: 1.5%; --y: 52%; --deco-w: 200px; --deco-h: 64px; display: none; }
  .hero .bg-deco-6 { --x: 97%; --y: 55%; --deco-w: 160px; --deco-h: 56px; }
  /* unten: Punkte links, Kontur unter dem Text, getönte Pill unter dem Foto, Kontur rechts */
  .hero .bg-deco-7 { --x: 10%; --y: 84%; --deco-w: 240px; --deco-h: 80px; }
  .hero .bg-deco-8 { --x: 33%; --y: 86%; --deco-w: 260px; --deco-h: 72px; }
  .hero .bg-deco-9 { --x: 66%; --y: 95%; --deco-w: 200px; --deco-h: 56px; }
  .hero .bg-deco-10 { --x: 92%; --y: 92%; --deco-w: 320px; --deco-h: 88px; }
  /* Kontur oben zwischen den beiden linken Formen - nur dort, wo sie Text, Buttons und Foto
     nicht berührt (gemessen bis 2560 px, erst ab 1440 px ist oben genug Platz),
     Punkte rechts unter den Buttons */
  .hero .bg-deco-11 { --x: 17%; --y: 5%; --deco-w: 240px; --deco-h: 64px; display: none; }
  .hero .bg-deco-12 { --x: 46%; --y: 72%; --deco-w: 200px; --deco-h: 64px; }
  /* Ohne Foto (Bänder-Motiv) stehen die Formen in der Bildfläche frei: Die Kontur rechts unten
     rückt weiter in die Ecke, sonst kommt sie bei 1024-1280 px dem Sky-Band zu nahe */
  .hero--baender .bg-deco-10 { --x: 96%; --y: 98%; }

  /* Seitenkopf der Unterseiten: Die Formen überschneiden sich in Ruhe nie mit Text, Sprungmarken
     oder dem Bänder-Motiv (beim Scrollen verschiebt der Parallax-Effekt sie). Sie stehen deshalb nur in Flächen, die auf jeder Unterseite frei sind,
     berechnet aus den Spaltengrenzen: --l ist der linke, 100% - --l der rechte Inhaltsrand,
     die Bänder-Spalte ist 400px breit (Bandgruppe ca. 208px mittig), davor 64px Abstand.
     Freie Flächen: linker Rand vor dem Text, die Lücke zwischen Text und Bandgruppe,
     rechts neben der Bandgruppe bis zur Bildschirmkante und die oberen/unteren 48px des Innenabstands
     (Formen dort laufen aus der Fläche heraus). */
  .page-head .bg-deco { --l: max(var(--gutter), (100% - var(--container)) / 2); }
  /* oben: lange Kontur in der linken Ecke, große getönte Pill rechts */
  .page-head .bg-deco-1 { --x: calc(var(--l) - 140px); --y: 40px; --deco-w: 280px; --deco-h: 72px; }
  .page-head .bg-deco-2 { --x: calc(100% - var(--l) + 120px); --y: 20px; --deco-w: 360px; --deco-h: 104px; }
  /* rechter Rand neben der Bandgruppe */
  .page-head .bg-deco-3 { --x: calc(100% - var(--l) + 60px); --y: 62%; --deco-w: 128px; --deco-h: 48px; }
  /* Lücke zwischen Text und Bandgruppe - nur Punkte, eine Pill wirkte dort wie ein viertes Band */
  .page-head .bg-deco-6 { --x: calc(100% - var(--l) - 384px); --y: 30%; --deco-w: 144px; --deco-h: 48px; }
  /* unten: Punkte in der linken Ecke, Kontur unter dem Text, Kontur in der rechten Ecke */
  .page-head .bg-deco-4 { --x: calc(var(--l) - 110px); --y: 100%; --deco-w: 200px; --deco-h: 64px; }
  .page-head .bg-deco-5 { --x: calc(var(--l) + 200px); --y: calc(100% + 52px); --deco-w: 220px; --deco-h: 60px; }
  .page-head .bg-deco-7 { --x: calc(100% - var(--l) + 40px); --y: calc(100% + 50px); --deco-w: 260px; --deco-h: 72px; }
  /* Breite Bildschirme: weitere Formen in den Rändern, nach Bildschirmkante verteilt
     (Bruchteile von --l), damit auch ganz links und rechts etwas steht. Sie kommen erst dazu,
     wenn der Rand breit genug ist. */
  .page-head .bg-deco-8 { --x: calc(var(--l) * 0.3); --y: 55%; --deco-w: 240px; --deco-h: 64px; display: none; }
  .page-head .bg-deco-9 { --x: calc(var(--l) * 0.12); --y: 12%; --deco-w: 160px; --deco-h: 56px; display: none; }
  .page-head .bg-deco-10 { --x: calc(var(--l) * 0.15); --y: 88%; --deco-w: 200px; --deco-h: 56px; display: none; }
  .page-head .bg-deco-11 { --x: calc(100% - var(--l) * 0.25); --y: 62%; --deco-w: 200px; --deco-h: 64px; display: none; }
  .page-head .bg-deco-12 { --x: calc(100% - var(--l) * 0.25); --y: 100%; --deco-w: 220px; --deco-h: 60px; display: none; }
  .page-head .bg-deco-13 { --x: calc(100% - var(--l) * 0.62); --y: 60%; --deco-w: 200px; --deco-h: 56px; display: none; }
}
@media (min-width: 1600px) {
  .page-head .bg-deco-8 { display: block; }
}
@media (min-width: 1920px) {
  .page-head .bg-deco-9,
  .page-head .bg-deco-10,
  .page-head .bg-deco-11,
  .page-head .bg-deco-12 { display: block; }
}
@media (min-width: 2240px) {
  .page-head .bg-deco-13 { display: block; }
}
@media (min-width: 1440px) {
  .hero .bg-deco-5,
  .hero .bg-deco-11 { display: block; }
}

/* Markenmotiv: Bänder liegen in einer eigenen Fläche, nie hinter Text */
.brand-visual {
  position: relative;
  container-type: size;
}
/* Aufbau wie im Signet, alle Maße in Bandbreiten (--band): --u verschiebt ein Band entlang
   der Diagonale, --v rechtwinklig dazu (positiv = nach oben rechts). Zwischen den Bändern
   liegt überall dieselbe Lücke (0,3 Bandbreiten). Das Signet-Tief-Band beginnt auf Höhe des
   Hauptbands, das Sky-Band endet auf Höhe des Hauptbands - so entsteht die Staffelung.
   Die Gruppe ist 3,83 × 5,47 Bandbreiten groß; --band passt sie in die Fläche ein,
   --shift zentriert sie senkrecht. */
.brand-visual__band {
  --band: min(17cqh, 24cqw);
  --shift: calc(var(--band) * 0.1);
  --u: 0;
  --v: 0;
  --dx: calc((var(--u) + var(--v)) * 0.7071 * var(--band));
  --dy: calc((var(--u) - var(--v)) * 0.7071 * var(--band) + var(--shift));
  top: 50%;
  left: 50%;
  height: var(--band);
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(45deg);
}
/* Hauptband (Verlauf) diagonal durch die Mitte */
.brand-visual__band--1 { width: calc(var(--band) * 5); }
/* Signet-Tief-Band oben rechts, gleich breit, oberes Ende bündig mit dem Hauptband */
.brand-visual__band--2 {
  width: calc(var(--band) * 3.2);
  --u: -0.9;
  --v: 1.3;
}
/* Kurzes Band unten links, unteres Ende bündig mit dem Hauptband - Sky nur schmal */
.brand-visual__band--3 {
  width: calc(var(--band) * 2.8);
  height: calc(var(--band) * 0.6);
  --u: 1.1;
  --v: -1.1;
}

/* --------------------------------------------------------------------------
   Karten & Listen
   -------------------------------------------------------------------------- */
.card h3 { margin-bottom: 0; }
.card p { margin-bottom: 0; }

.service-card .card__link { margin-top: auto; padding-top: var(--space-2); }
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card--interactive:focus-within { box-shadow: var(--shadow-md); }
.card__icon { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.card--interactive:hover .card__icon,
.card--interactive:focus-within .card__icon { background: var(--primary); color: var(--on-primary); }

.card__icon--lg { width: 64px; height: 64px; border-radius: var(--radius-lg); }

/* Leistungen (Startseite): Bento - IT-Systeme groß links, die anderen beiden daneben */
.section--raised .service-card { background: var(--surface); }
/* Bereiche von IT-Systeme als Tags unter dem Text */
.service-card__tags { margin: var(--space-2) 0 0; }
.card--interactive:hover,
.card--interactive:focus-within { border-color: var(--primary); }
@media (min-width: 1024px) {
  .services { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .service-card--feature {
    grid-row: span 2;
    padding: var(--space-8);
    overflow: hidden;
  }
  .service-card--feature h3 {
    margin-top: auto;
    padding-top: var(--space-8);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-bold);
  }
  .service-card--feature p { max-width: 44ch; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
  .service-card--feature .card__link { margin-top: var(--space-2); }
  /* Kleine Karten: Icon links, Inhalt rechts */
  .services > :not(.service-card--feature) {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: start;
    gap: var(--space-3) var(--space-6);
  }
  .services > :not(.service-card--feature) > * { grid-column: 2; }
  .services > :not(.service-card--feature) > .card__icon { grid-column: 1; grid-row: 1 / span 3; }
  .services > :not(.service-card--feature) .card__link { margin-top: 0; }
  /* Zwei parallele diagonale Konturen oben rechts (Deko-Baustein) - zitieren die Signet-Striche */
  .service-card--feature::before { top: -48px; right: -88px; --deco-w: 360px; --deco-h: 88px; }
  /* nach unten links versetzt, parallel zur ersten - endet über der Überschrift */
  .service-card--feature::after { top: 32px; right: 56px; --deco-w: 200px; --deco-h: 56px; }
  .service-card--feature:hover,
  .service-card--feature:focus-within { --deco-line: var(--primary); }
}

/* „Kommt dir das bekannt vor?“ */
@media (min-width: 768px) {
  .pain-card { padding: var(--space-8); }
}
.pain-card > .h3:last-child { margin-top: var(--space-2); color: var(--primary); }
/* Hinweis auf größere Teams direkt unter der Karte */
.pain-card + .note { margin-top: var(--space-4); }

/* Aufzählung mit diagonalem Strich als Marker (Deko-Baustein) - Zitat der Signet-Bänder */
.bullets { display: grid; gap: var(--space-3); margin: var(--space-2) 0; }
.bullets li {
  position: relative;
  padding-left: var(--space-8);
}
.bullets li::before {
  position: absolute;
  left: var(--space-1);
  top: calc(var(--lh-body) / 2 - 3px);
  height: 6px;
  background: var(--primary);
}

/* Liste mit Häkchen (Leistungen) */
.checklist { display: grid; gap: var(--space-3); margin: 0; }
.checklist li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
}
.checklist .icon { color: var(--primary); }

/* Schritte 1-4: große Ziffern, verbunden durch eine Linie, die sich beim Einblenden
   in primary füllt und mit einem kleinen Sky-Punkt (accent) beim nächsten Schritt endet.
   Mobil und Tablet als senkrechte Zeitleiste, ab 1024 px waagerecht. */
.steps {
  display: grid;
  gap: var(--space-8);
  counter-reset: step;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-content: start;
  counter-increment: step;
}
.step > :not(.step__line) { grid-column: 2; }
/* Große Ziffer (01, 02 …) als Blickfang */
.step::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 3;
  color: var(--primary);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: var(--space-2); }
.step__line + p { padding-top: var(--space-1); }
.step p { margin: 0; }

/* Verbindungslinie: Spur in line, Füllung in primary, Sky-Punkt am Ende */
.step__line {
  position: absolute;
  top: calc(var(--lh-h2) + var(--space-2));
  bottom: calc(var(--space-8) * -1 + var(--space-2));
  left: calc(var(--space-3) - 1px);
  width: 2px;
  border-radius: var(--radius-pill);
  background: var(--line);
}
.step:last-child .step__line { display: none; }
.step__line::before,
.step__line::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-pill);
}
.step__line::before {
  inset: 0;
  background: var(--primary);
  transform-origin: top center;
}
.step__line::after {
  left: 50%;
  bottom: 0;
  width: var(--space-2);
  height: var(--space-2);
  margin-left: calc(var(--space-1) * -1);
  background: var(--accent);
}

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
  .step { display: block; }
  .step::before {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--fs-display);
    line-height: var(--lh-display);
  }
  .step__line {
    top: calc(var(--lh-display) / 2 - 1px);
    bottom: auto;
    left: calc(var(--space-16) + var(--space-8));
    right: calc(var(--space-3) - var(--space-6));
    width: auto;
    height: 2px;
  }
  .step__line::before { transform-origin: left center; }
  .step__line::after {
    top: 50%;
    left: auto;
    right: 0;
    bottom: auto;
    margin: calc(var(--space-1) * -1) 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .step__line::before {
    transition: transform calc(var(--dur-slow) * 1.5) var(--ease-out) calc(var(--reveal-delay, 0ms) + 300ms);
  }
  .step__line::after {
    transition: transform var(--dur-base) var(--ease-out) calc(var(--reveal-delay, 0ms) + 900ms);
  }
  .step.reveal:not(.is-revealed) .step__line::before { transform: scaleY(0); }
  .step.reveal:not(.is-revealed) .step__line::after { transform: scale(0); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .step.reveal:not(.is-revealed) .step__line::before { transform: scaleX(0); }
}

/* Zitate / Kundenstimmen */
.quote { margin: 0; }
.quote blockquote { flex: 1 0 auto; margin: 0; }
.quote blockquote p { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.quote__icon { color: var(--primary); }
/* Foto, Name und Firma unter einer Haarlinie */
.quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.quote__person { display: grid; }
.quote__name { font-weight: var(--fw-semibold); }
.quote__company { color: var(--ink-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.section--raised .quote { background: var(--surface); }

/* Kundenstimmen als Karussell (Startseite): site.js setzt .is-ready - ohne JavaScript oder bei
   reduzierter Bewegung bleibt das Raster stehen. Die aktive Stimme steht in der Mitte, die
   Nachbarn ragen abgeblendet hinein. Die Leiste läuft bis an den Bildschirmrand und blendet
   außerhalb des Inhaltsbereichs weich aus - so werden die Nachbarkarten nicht hart angeschnitten.
   (100vw enthält eine evtl. Scrollleiste, deshalb schneidet die Sektion waagerecht ab.) */
.section:has(.carousel.is-ready) { overflow-x: clip; }
.carousel.is-ready .carousel__viewport {
  --fade: max(var(--gutter), (100vw - var(--container)) / 2);
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
  touch-action: pan-y; /* waagerechtes Wischen übernimmt site.js */
  -webkit-mask-image: linear-gradient(90deg, transparent, black var(--fade), black calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, black var(--fade), black calc(100% - var(--fade)), transparent);
}
.carousel.is-ready .carousel__track {
  position: relative; /* Bezugspunkt für offsetLeft der Karten */
  display: flex;
  gap: var(--space-4);
  transition: transform var(--dur-slow) var(--ease-out);
}
.carousel.is-ready .carousel__track > * {
  flex: 0 0 min(100% - 2 * var(--space-12), var(--container-text) + 2 * var(--space-6));
  transition: opacity var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out);
}
.carousel.is-ready .carousel__track > :not(.is-active) {
  opacity: 0.4;
  scale: 0.94;
  cursor: pointer;
}
/* Unsichtbarer Sprung zwischen Original und Kopie - ohne Übergang */
.carousel.is-ready .carousel__track.is-jumping,
.carousel.is-ready .carousel__track.is-jumping > * { transition: none; }
@media (min-width: 768px) {
  .carousel.is-ready .carousel__track { gap: var(--space-6); }
  /* Kartenbreite am Inhaltsbereich bemessen, nicht an der randlosen Leiste */
  .carousel.is-ready .carousel__track > * {
    flex-basis: min(100vw - 2 * var(--gutter) - 2 * var(--space-16), var(--container-text) + 2 * var(--space-6));
  }
}
/* Steuerung: Pause links, Punkte mittig, Pfeile rechts */
.carousel__controls:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.carousel__dots { display: flex; flex: 1; justify-content: center; }
.carousel__nav { display: flex; gap: var(--space-2); }
.carousel__btn { border: 1px solid var(--line-strong); }
.carousel__toggle .icon-play,
.carousel[data-paused] .carousel__toggle .icon-pause { display: none; }
.carousel[data-paused] .carousel__toggle .icon-play { display: block; }
/* Punkt: kleine Pill. Der aktive Punkt wird zum Balken, der sich bis zur nächsten Karte
   in primary füllt (Signet-Tief / Sky im Dark Mode). Die Füllung wächst in der Breite (nicht
   per scale), damit beide Enden rund bleiben. Ihr Ende löst in site.js den Wechsel aus;
   data-holding hält sie an, beim Pause-Knopf entfällt sie. */
.carousel { --carousel-interval: 8s; }
.carousel__dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}
.carousel__dot::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.carousel__dot:hover::before { background: var(--ink-muted); }
.carousel__dot[aria-current="true"]::before { width: var(--space-12); background: var(--line-strong); }
.carousel__dot[aria-current="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-2);
  width: var(--space-12);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--primary);
  translate: 0 -50%;
  animation: carousel-progress var(--carousel-interval) linear both;
}
.carousel[data-holding] .carousel__dot::after { animation-play-state: paused; }
.carousel[data-paused] .carousel__dot::after { content: none; }
@keyframes carousel-progress {
  from { width: var(--space-2); }
}

/* Partnerlogos als Laufband (Startseite, Referenzen): Die Liste steht viermal im Track,
   er wandert um die Hälfte nach links und springt unsichtbar zurück. Die Ränder blenden
   weich aus. Maus oder Tastaturfokus darauf hält es an. Logos in Originalfarben, verlinkt auf die Partner,
   im Dark Mode die helle bzw. Negativ-Variante. Bei reduzierter Bewegung steht eine Liste still. */
.partners {
  --partners-duration: 60s;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-6);
}
.partners__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black var(--space-12), black calc(100% - var(--space-12)), transparent);
  mask-image: linear-gradient(90deg, transparent, black var(--space-12), black calc(100% - var(--space-12)), transparent);
}
.partners__track { display: flex; width: max-content; }
/* Abstand nach dem letzten Logo als Innenabstand, damit beide Track-Hälften gleich breit sind
   (doppelte Klasse schlägt die Listen-Rücksetzung ul[role="list"]) */
.partners__list.partners__list {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-4) var(--space-12) var(--space-4) 0;
}
.partners__item { flex: none; }
.partners__link { display: block; border-radius: var(--radius-sm); }
/* Logohöhe: mobil kleiner, damit mehr als ein Logo im Ausschnitt steht */
.partners__logo { display: block; width: auto; height: var(--space-8); }
.partners__item--s .partners__logo { height: var(--space-6); }
.partners__item--l .partners__logo { height: calc(var(--space-8) + var(--space-2)); }
@media (min-width: 768px) {
  .partners__logo { height: calc(var(--space-8) + var(--space-2)); }
  .partners__item--s .partners__logo { height: var(--space-8); }
  .partners__item--l .partners__logo { height: var(--space-12); }
}
/* Hell/Dunkel: wie der Theme-Umschalter (System-Einstellung oder data-theme) */
.partners__logo--dunkel { display: none; }
:root[data-theme="dark"] .partners__logo--hell { display: none; }
:root[data-theme="dark"] .partners__logo--dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partners__logo--hell { display: none; }
  :root:not([data-theme="light"]) .partners__logo--dunkel { display: block; }
}
/* Pause-Knopf wie beim Karussell: nur mit JavaScript und nur, wenn sich das Band bewegt */
.partners__toggle { display: none; border: 1px solid var(--line-strong); }
.partners__toggle .icon-play,
.partners[data-paused] .partners__toggle .icon-pause { display: none; }
.partners[data-paused] .partners__toggle .icon-play { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .partners__track { animation: partners-scroll var(--partners-duration) linear infinite; }
  .partners__viewport:hover .partners__track,
  .partners__viewport:focus-within .partners__track,
  .partners[data-paused] .partners__track { animation-play-state: paused; }
  .js .partners__toggle { display: inline-grid; }
}
@keyframes partners-scroll {
  to { translate: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .partners__viewport { -webkit-mask-image: none; mask-image: none; }
  .partners__track { width: auto; }
  .partners__list.partners__list { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: var(--space-6); padding-right: 0; }
  .partners__list[aria-hidden] { display: none; }
}

/* Einsatzgebiet: Umriss Deutschland (flach, primary-soft mit primary-Kontur)
   und Marker an den Standorten. Markerposition über --x / --y in Prozent der Kartenfläche. */
.region-map {
  position: relative;
  width: min(100%, 240px);
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .region-map { width: 320px; }
}
.region-map__land {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.region-map__land path {
  fill: var(--primary-soft);
  stroke: var(--primary);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
/* Marker: Punkt in primary mit Ring in der Flächenfarbe (::after), darunter ein kleiner
   Sky-Hof als Signal (::before) */
.region-map__marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--space-4);
  height: var(--space-4);
  translate: -50% -50%;
}
.region-map__marker::before,
.region-map__marker::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-pill);
}
.region-map__marker::before {
  inset: calc(var(--space-2) * -1);
  background: var(--accent);
  opacity: 0.35;
}
.region-map__marker::after {
  inset: 0;
  border: 3px solid var(--surface-raised);
  background: var(--primary);
}
/* Beschriftung als Pill links oder rechts vom Punkt */
.region-map__label {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--space-3));
  translate: 0 -50%;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.region-map__marker--right .region-map__label { right: auto; left: calc(100% + var(--space-3)); }
/* Schmale Displays: Beschriftung unter dem Punkt, damit sie nicht über den Rand ragt */
@media (max-width: 479.98px) {
  .region-map__marker--below-sm .region-map__label {
    top: calc(100% + var(--space-3));
    left: 50%;
    translate: -50% 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .region-map__marker {
    transition: scale var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--reveal-delay, 0ms) + 500ms);
  }
  .region-map__marker:nth-of-type(2) { transition-delay: calc(var(--reveal-delay, 0ms) + 650ms); }
  .region-map__marker:nth-of-type(3) { transition-delay: calc(var(--reveal-delay, 0ms) + 800ms); }
  .region-map.reveal:not(.is-revealed) .region-map__marker { scale: 0.4; opacity: 0; }
  /* Sky-Hof pulsiert dezent - zeigt "hier sind wir vor Ort" */
  .region-map__marker::before { animation: niceru-pulse calc(var(--dur-slow) * 6) var(--ease-out) infinite; }
  .region-map__marker:nth-of-type(2)::before { animation-delay: 600ms; }
  .region-map__marker:nth-of-type(3)::before { animation-delay: 1200ms; }
}
@keyframes niceru-pulse {
  0% { transform: scale(0.6); opacity: 0.5; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Unterseiten: Seitenkopf, Sprungmarken, Leistungsabschnitte, Abschluss
   -------------------------------------------------------------------------- */
/* Seitenkopf auf neutraler Fläche (surface-raised) mit dem Bänder-Motiv rechts */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-12);
}
.page-head__grid { display: grid; gap: var(--space-8); align-items: center; }
/* Mobil kein Bänder-Motiv: es stünde in einer eigenen Zeile unter dem Text und nähme nur Platz weg
   (die Startseite hat ihr eigenes Motiv im Hero) */
.page-head__visual { display: none; }
@media (min-width: 768px) {
  .page-head__grid { grid-template-columns: minmax(0, 1fr) 240px; }
  .page-head__visual { display: block; height: 240px; }
}
@media (min-width: 1024px) {
  .page-head__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-16); }
  .page-head__visual { height: 320px; }
}
.page-head h1 { margin-bottom: var(--space-2); hyphens: manual; }
.page-head__sub {
  margin-bottom: var(--space-4);
  color: var(--primary);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
}
.page-head__intro { max-width: var(--container-text); margin-bottom: 0; }
.page-head h1:last-child { margin-bottom: 0; }
.page-head__actions { margin-top: var(--space-8); }
.page-head__hint { margin: var(--space-3) 0 0; }
@media (min-width: 1024px) {
  .page-head { padding-block: var(--space-16); }
  .page-head h1 {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    font-weight: var(--fw-extrabold);
  }
}
/* Seitenkopf mit mehr Inhalt (Fernwartung): weniger Rand oben und unten, dafür innen mehr Platz.
   Ab 1024 px insgesamt so hoch wie die anderen Seitenköpfe: 2 × space-12 + Bänder-Motiv (320 px)
   + 2 × space-4 = 2 × space-16 + 320 px */
.page-head--compact { padding-block: var(--space-8); }
@media (min-width: 1024px) {
  .page-head--compact { padding-block: var(--space-12); }
  .page-head--compact .page-head__grid { min-height: calc(320px + 2 * var(--space-4)); }
}

.jump-nav { margin-top: var(--space-8); }
.jump-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jump-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--primary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.jump-nav__link:hover { background: var(--primary-soft); border-color: var(--primary); text-decoration: none; }
.page-head .jump-nav__link { background: var(--surface); }

/* Leistungen der Unterseiten als Kartenraster (Partials leistungen, leistung): mobil untereinander,
   ab 1024 px zweispaltig. Jede Karte belegt zwei Rasterzeilen (Subgrid) - so stehen Text und
   Liste zweier Nachbarkarten auf gleicher Höhe, die Trennlinien fluchten. Bei ungerader Anzahl
   läuft die letzte Karte über beide Spalten, Text links und Liste rechts. */
/* minmax(0, 1fr): ein langes Wort darf die Spalte nicht über den Bildschirm hinaus aufdrücken */
.service-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.service-item { gap: var(--space-6); }
@media (min-width: 768px) {
  .service-item { padding: var(--space-8); }
}
/* Icon-Kachel in einer Zeile mit der Overline */
.service-item__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.service-item__label .overline { margin: 0; }
.service-item h2 { margin-bottom: var(--space-3); }
/* doppelte Klasse schlägt die Listen-Rücksetzung ul[role="list"]; Punkte oben bündig, auch wenn
   die Nachbarliste die Zeile höher macht */
.service-item .service-item__list {
  align-content: start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
@media (min-width: 1024px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .service-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 0 var(--space-16);
    align-items: start;
  }
  /* Overline, Überschrift und Absatz als Zeilen der Karte (Subgrid) - die Liste rechts beginnt
     auf Höhe des Absatzes, nicht neben Overline und Überschrift */
  .service-item:last-child:nth-child(odd) .service-item__head {
    display: grid;
    grid-row: 1 / span 3;
    grid-template-rows: subgrid;
    align-items: start;
  }
  .service-item:last-child:nth-child(odd) .service-item__list { grid-column: 2; grid-row: 3; padding-top: 0; border-top: 0; }}

/* Überschrift einer Sektion nur als Overline (z. B. „Kunden“, „Team“) */
.section-label { margin-bottom: var(--space-6); }

/* Overline mit kurzem Diagonal-Strich (Deko-Baustein) - zitiert die 45°-Striche des Signets */
.section-head .overline,
.section-label,
.hero__overline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Auf Signet-Tief als kleines Sky-Signal */
.theme-inverse .section-head .overline::before,
.theme-inverse .section-label::before { background: var(--accent); }

/* Dezente diagonale Konturen auf Markenflächen (Deko-Baustein; keine Verlaufsfläche, nur Linien) */
.deco-pills { position: relative; overflow: hidden; isolation: isolate; }
@media (min-width: 1024px) {
  .deco-pills::before,
  .deco-pills::after { z-index: -1; --deco-w: 400px; --deco-h: 96px; }
  .deco-pills::before { left: -220px; top: -150px; }
  .deco-pills::after { right: -200px; bottom: -150px; }
}
/* Zentrierte Abschluss-Banner: Konturen links und rechts mittig, mit Abstand zum Text */
@media (min-width: 1280px) {
  .cta.deco-pills::before,
  .cta.deco-pills::after { top: 50%; bottom: auto; translate: 0 -50%; }
  .cta.deco-pills::before { left: -120px; }
  .cta.deco-pills::after { right: -120px; }
}

/* Abschluss-Banner */
.cta { text-align: center; }
.cta h2 { margin-bottom: var(--space-4); }
.cta p { margin-bottom: var(--space-8); }
.cta .btn-row { justify-content: center; }
.cta h2:has(+ .btn-row) { margin-bottom: var(--space-8); }

/* Merkmale (Betreuung): die erste Karte als breite Leitkarte, darunter 2 × 2 */
@media (min-width: 640px) {
  .grid--features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--features > .card--lead { grid-column: 1 / -1; }
}
.card--lead { overflow: hidden; isolation: isolate; } /* Formen (Partial hintergrund) liegen hinter dem Inhalt */
.card--lead__text { display: grid; gap: var(--space-2); max-width: var(--container-text); }
@media (min-width: 768px) {
  .card--lead { flex-direction: row; align-items: center; gap: var(--space-6); padding: var(--space-8); }
}
/* Rechts vier Formen im 45°-Winkel wie die Signet-Striche (Partial hintergrund, Deko-Baustein):
   zwei Konturen, eine getönte Pill und ein Punktraster, teils an der Kartenkante angeschnitten -
   ruhig in line und primary-soft, ohne Sky-Fläche und nie hinter dem Text */
@media (min-width: 1024px) {
  .card--lead .bg-deco-1 { --x: calc(100% - 148px); --y: calc(50% + 28px); --deco-w: 200px; --deco-h: var(--space-12); }
  .card--lead .bg-deco-2 { --x: calc(100% - 268px); --y: 26%; --deco-w: 120px; --deco-h: var(--space-8); }
  .card--lead .bg-deco-3 { --x: calc(100% - 336px); --y: 76%; --deco-w: 128px; --deco-h: 40px; }
  .card--lead .bg-deco-4 { --x: calc(100% - 44px); --y: 16%; --deco-w: 96px; --deco-h: var(--space-6); }
}
/* Bis 1280 px reicht der Platz neben dem Text nur für drei Formen */
@media (min-width: 1024px) and (max-width: 1279px) {
  .card--lead .bg-deco-3 { display: none; }
}

/* Support (Betreuung): Text und Kontaktkarte links, Regionskarte rechts */
.support-contact { display: grid; gap: var(--space-8); }

/* Helle Sektionen: dieselben Konturen, aber rechts oben und unten - weg von Überschrift und Hinweis */
@media (min-width: 1024px) {
  .deco-pills--light::before { left: auto; right: -32px; top: -36px; }
  .deco-pills--light::after { right: -168px; bottom: -96px; }
}

/* Hinweis mit Icon */
.note {
  display: flex;
  gap: var(--space-3);
  max-width: var(--container-text);
  margin: var(--space-12) 0 0;
  padding: var(--space-4) var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.section--raised .note { background: var(--surface); }
.note > .icon { margin-top: 0; color: var(--primary); }
.note--warning > .icon { color: var(--on-warning-sign); }
.note--warning > .icon path:first-child { fill: var(--warning-sign); }
/* Im Seitenkopf kompakt, damit der Kopf nicht höher wird als auf den anderen Seiten */
.page-head .note {
  width: fit-content;
  max-width: 100%;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Kontaktdaten mit Icon-Kacheln */
.contact-list { display: grid; gap: var(--space-4); margin: 0; }
.contact-list > div {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--space-4);
  align-items: center;
}
.contact-list dt {
  display: contents;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
}
.contact-list dt .card__icon { grid-row: span 2; }
.contact-list dd { margin: 0; grid-column: 2; font-weight: var(--fw-semibold); }

.icon-list { display: grid; gap: var(--space-4); }
.icon-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-4);
  align-items: center;
}

/* Kontakt auf der Startseite: Ansprechpartner und direkte Kontaktdaten unter dem Text */
.contact-people {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.people { display: grid; gap: var(--space-4); }
.person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.person > span:last-child { display: grid; }
.person__name { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.person__role { color: var(--ink-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
/* Avatare rund (radius-pill) - Platzhalter bewusst sichtbar */
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Fotos im Dark Mode leicht abdunkeln, damit sie nicht überstrahlen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.avatar, .profile__photo, .lp-person__photo) img { filter: brightness(0.9); }
}
:root[data-theme="dark"] :is(.avatar, .profile__photo, .lp-person__photo) img { filter: brightness(0.9); }
.avatar--ph {
  border: 1.5px dashed var(--line-strong);
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
}

/* Kontaktseite */
.contact-layout { display: grid; gap: var(--space-6); }
.contact-aside { display: grid; gap: var(--space-6); align-content: start; }
.contact-aside .btn { align-self: start; }
.form-card > h2 { margin-bottom: var(--space-6); }
@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; }
}

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--space-3);
}
.field--check input { margin: 2px 0 0; }
.field--check label { font-weight: var(--fw-medium); }
.field--check .field__error { grid-column: 1 / -1; }

/* Referenzen */
.cases { display: grid; gap: var(--space-6); }
.case { gap: var(--space-4); }
@media (min-width: 768px) {
  .case { padding: var(--space-8); }
}
.case h3 { margin: 0; }
.case__service { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.case__facts { display: grid; gap: var(--space-6); margin: var(--space-2) 0; }
.case__facts dt { margin-bottom: var(--space-2); }
.case__facts dd { margin: 0; }
@media (min-width: 1024px) {
  .case__facts { grid-template-columns: repeat(3, 1fr); }
}
.case__quote {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.case__quote blockquote { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.case__quote blockquote p { margin: 0; }
.case__quote figcaption {
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
}
.case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.case--placeholder {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.case--placeholder .ph-block { border: 0; min-height: 0; padding: 0; justify-items: start; }
@media (min-width: 768px) {
  .case--placeholder { padding: var(--space-8); }
}

/* Über uns */
.profiles {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.profile h3 { margin: var(--space-2) 0 0; }
.profile__photo { aspect-ratio: 3 / 2; margin-bottom: var(--space-2); }
picture.profile__photo { display: block; margin-bottom: 0; overflow: hidden; border-radius: var(--radius-lg); }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Foto beim Drüberfahren über die Karte minimal vergrößern - auch auf der IT-Check-Seite
   (dort Foto und Bänder im Anschnitt zusammen, damit die Ecke passt) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  picture.profile__photo,
  .lp-person__media { transition: transform var(--dur-base) var(--ease-out); }
  .profile:hover picture.profile__photo,
  .lp-person:hover .lp-person__media { transform: scale(1.03); }
}
.section--raised .profile { background: var(--surface); }
.profile__role { color: var(--primary); font-weight: var(--fw-semibold); }
/* Schwerpunkte am unteren Kartenrand - bei unterschiedlich langem Text stehen sie
   in beiden Karten auf gleicher Höhe */
.profile__focus { display: grid; gap: var(--space-2); margin-top: auto; }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Kennzahlen (Über uns): mobil Icon links neben Zahl und Text, ab 640 px drei Kacheln
   nebeneinander. Die Zahl zählt beim Scrollen hoch (site.js), danach wächst die Sky-Marke. */
.stats {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
.stat {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
  padding: var(--space-6);
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.stat__icon { grid-row: 1 / span 2; align-self: start; }
.stat__value {
  display: block;
  color: var(--primary);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
}
.stat__count { display: inline-block; text-align: right; }
/* Sky-Marke unter der Zahl */
.stat__value::after {
  content: "";
  display: block;
  width: var(--space-8);
  height: var(--space-1);
  margin: var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform-origin: left center;
}
.stat__label { color: var(--ink-muted); }

@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .stat { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .stat__icon { grid-row: auto; margin-bottom: var(--space-6); }
  /* Diagonale Kontur oben rechts, rundes Ende ragt in die Kachel - zitiert die Signet-Striche */
  .stat::before {
    content: "";
    position: absolute;
    top: -48px;
    right: -10px;
    width: 200px;
    height: 56px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    rotate: 45deg;
    pointer-events: none;
  }
}
@media (min-width: 1024px) {
  .stat__value { font-size: var(--fs-display); line-height: var(--lh-display); }
}

@media (prefers-reduced-motion: no-preference) {
  .stat__value::after { transition: transform var(--dur-slow) var(--ease-out); }
  .stat.is-counting .stat__value::after { transform: scaleX(0); }
}

/* Fernwartung */
.section--raised .download-card { background: var(--surface); }
.download-card h3 { margin: 0; }
.download-list { display: grid; margin: 0; padding: 0; list-style: none; }
.download-option {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}
.download-option:last-child { padding-bottom: 0; }
.download-option p { margin: 0; }
.download-option__label { font-weight: var(--fw-semibold); }
.download-option .btn { justify-self: start; }
@media (max-width: 639.98px) {
  .download-option .btn { justify-self: stretch; }
}
/* Download, der noch kommt - ausgegraut, nicht klickbar */
.btn--soon { background: var(--line); color: var(--ink-muted); cursor: default; }
.btn.btn--soon[aria-disabled="true"] { opacity: 1; }
/* RustDesk Config String - unauffällige Karte unter den Download-Karten mit Text und einem Feld
   mit Haarlinie, Kopieren als graues Icon. Klick in den String markiert ihn ganz. */
.config-string {
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.section--raised .config-string { background: var(--surface); }
.config-string p { margin: 0; }
.config-string__field {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-left: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.config-string__code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding-block: var(--space-2);
  color: var(--ink-muted);
  font-size: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: all;
}
/* Kopieren braucht JavaScript (Klasse .js, siehe Header-Knöpfe) */
.config-string__copy { display: none; color: var(--ink-muted); }
.js .config-string__copy { display: inline-grid; }
.config-string__copy[data-copied] { color: var(--success); }
.config-string__copy .icon-check,
.config-string__copy[data-copied] .icon-copy { display: none; }
.config-string__copy[data-copied] .icon-check { display: block; }

/* Rechtstexte */
.prose { max-width: calc(var(--container-text) + 2 * var(--gutter)); }
.prose h2 { margin-top: var(--space-12); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-8); }
.prose h4 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose h3 + h4 { margin-top: 0; }
.prose li + li { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   Kampagnenseite IT-Check (app/pages/it-check.php): Landingpage für die Flyer.
   Header und Footer schlicht (templates/header-kampagne.php, footer-kampagne.php).
   -------------------------------------------------------------------------- */
/* Header ohne Menü: Button mit voller Klickfläche (44 px) */
.site-header--kampagne .site-header__tools .btn { min-height: 44px; }

/* Footer: Marke links, Pflichtseiten rechts (doppelte Klasse schlägt die Spalten von .footer__grid weiter unten) */
@media (min-width: 768px) {
  .footer__grid.footer__grid--kampagne { grid-template-columns: minmax(0, 1fr) auto; }
}

/* „IT-Check“ in Überschriften nicht am Bindestrich umbrechen */
.lp-nowrap { white-space: nowrap; }

/* Hero: zweiter Teil der Überschrift in einer eigenen Zeile in primary. Lange Wörter
   („Ansprechpartner“) auf schmalen Displays trennen statt abschneiden. */
.lp-hero .hero__title { hyphens: auto; }
.lp-hero__accent { display: block; color: var(--primary); }
/* Mobil kleineres Bänder-Motiv: Überschrift und Button sollen nach dem Scannen des QR-Codes
   ohne Scrollen zu sehen sein */
@media (max-width: 1023.98px) {
  .lp-hero { --hero-visual-h: clamp(120px, 20svh, 200px); }
}

/* Ansprechpartner im Hero: Foto(s), Name und Region als Pill - führt zum Abschnitt Ansprechpartner */
.lp-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.lp-contact:hover { border-color: var(--primary); color: var(--ink); text-decoration: none; }
.lp-contact__avatars { display: flex; flex: none; }
.lp-contact .avatar {
  width: var(--space-12);
  height: var(--space-12);
  border: 2px solid var(--surface-raised);
}
.lp-contact .avatar + .avatar { margin-left: calc(var(--space-3) * -1); }
.lp-contact__text { display: grid; min-width: 0; }
.lp-contact__name { font-weight: var(--fw-semibold); }
.lp-contact__meta { color: var(--ink-muted); font-size: var(--fs-small); line-height: var(--lh-small); }

/* „Kennst du das?“: die vier Probleme mit Icon-Kachel, eine Stufe größer als Fließtext */
.section--raised .lp-pain { background: var(--surface); }
.lp-pain .icon-list { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }

/* „Kostenlos und unverbindlich“ deutlich unter den Karten zum IT-Check */
.lp-callout {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
}
.lp-callout .h3 { margin: 0; color: var(--primary); }
.lp-callout__icon {
  display: grid;
  place-items: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
}
@media (min-width: 768px) {
  .lp-callout {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8);
  }
}

/* Leistungen in einer Zeile unter den drei Gründen */
.lp-services {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.lp-services__title {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
}
.lp-services p { margin: 0; color: var(--ink-muted); }

/* Ansprechpartner: eine Person als breite Karte mit Foto links, zwei nebeneinander */
.lp-people {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.section--raised .lp-person { background: var(--surface); }
.lp-person { gap: var(--space-6); }
/* Foto mit 45°-Anschnitt unten links wie die Signet-Striche, im Anschnitt zwei Bänder
   (Signet-Tief und ein schmales Sky-Band - kein Verlauf, den hat schon das Bänder-Motiv im Hero) */
.lp-person__media {
  --cut: var(--space-16);
  position: relative;
}
.lp-person__photo {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.lp-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.lp-person__text { display: grid; gap: var(--space-6); align-content: start; }
.lp-person h3 { margin: 0 0 var(--space-1); }
@media (min-width: 768px) {
  .lp-person:only-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8);
  }
  .lp-person:only-child .lp-person__media { --cut: calc(var(--space-12) * 2); }
  .lp-person:only-child .lp-person__photo { aspect-ratio: 4 / 3; }
}

/* Vertrauen: Kennzahlen unter den Kundenstimmen */
.lp-trust .stats { margin-top: var(--space-12); }

/* --------------------------------------------------------------------------
   Platzhalter [eckige Klammern] - bewusst sichtbar
   -------------------------------------------------------------------------- */
.ph {
  padding-inline: var(--space-1);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ph-block {
  display: grid;
  place-items: center;
  min-height: 96px;
  margin: 0;
  padding: var(--space-6);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--ink-muted);
  font-weight: var(--fw-semibold);
  text-align: center;
}
.ph-block--quote { min-height: 120px; }
.ph-block--logo { min-height: 64px; min-width: 160px; padding: var(--space-3) var(--space-6); }

/* Button ohne Ziel (z. B. [Download für Windows]) - sichtbar als Platzhalter, nicht klickbar */
.btn--ph {
  border: 1.5px dashed var(--line-strong);
  background: transparent;
  color: var(--ink-muted);
  font-weight: var(--fw-semibold);
  cursor: default;
}
.btn.btn--ph[aria-disabled="true"] { opacity: 1; }

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */
.form-card { padding: var(--space-6); }
@media (min-width: 768px) {
  .form-card { padding: var(--space-8); }
}
.form-grid { display: grid; column-gap: var(--space-4); }
/* Felder oben ausrichten: Eine Fehlermeldung im Nachbarfeld streckt Label und Eingabe nicht mit */
.form-grid > .field { align-content: start; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid__full { grid-column: 1 / -1; }
}
.contact-form .btn { margin-top: var(--space-2); }
.field__error { margin: 0; }

/* Meldung, wenn der Versand nicht geklappt hat */
.form-error {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-weight: var(--fw-semibold);
}
.form-error[hidden] { display: none; }
.contact-form[aria-busy="true"] .btn { cursor: progress; }

/* Feld nur für Bots (Honeypot) - für Menschen unsichtbar und nicht erreichbar */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Optionale Felder: „(optional)“ in ink-muted, hebt sich vom Label ab */
.field__opt { color: var(--ink-muted); font-weight: var(--fw-medium); }
/* Auswahl ohne Wert („Bitte wählen“) wie ein Platzhalter, die Optionen in ink */
.field select:has(option[value=""]:checked) { color: var(--ink-muted); }
.field select option { color: var(--ink); }

.form-success { display: grid; gap: var(--space-4); justify-items: start; }
.form-success[hidden] { display: none; }
.form-success:focus { outline: none; }
.form-success__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--success);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer__grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer__brand { grid-column: 1 / -1; max-width: 40ch; }
.footer__brand .logo { margin-bottom: var(--space-4); }
/* Wortbildmarke nie umfärben - auch nicht durch die Footer-Linkfarbe */
.site-footer .logo,
.site-footer .logo:hover { color: var(--ink); text-decoration: none; }
.footer__brand p { margin-bottom: var(--space-2); }
.footer__slogan {
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-bold);
}
.footer__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--ink);
}
.footer__col ul { display: grid; gap: var(--space-2); }
.footer__col a { display: inline-block; padding-block: 2px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.footer__bottom p { margin: 0; }

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}

/* ==========================================================================
   Bewegung - kurz und präzise, kein Bounce (Dauer/Easing aus den Tokens).
   Alles nur bei prefers-reduced-motion: no-preference.
   ========================================================================== */

/* Header beim Scrollen leicht durchscheinend */
.site-header {
  transition: background-color var(--dur-base) var(--ease-out);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
  }
}

/* Karten heben sich leicht an, Buttons geben beim Klick nach */
.card--interactive {
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.btn {
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

@keyframes niceru-rise {
  from { opacity: 0; transform: translateY(var(--space-6)); }
}
@keyframes niceru-fade-in {
  from { opacity: 0; }
}
@keyframes niceru-slide-up {
  from { transform: translateY(var(--space-6)); }
}
@keyframes niceru-band-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0)) rotate(45deg) scaleX(0.3);
  }
}
/* Band wird von seinem oberen Ende aus gezogen - clip-path mit runden Ecken, die Enden bleiben rund */
@keyframes niceru-band-draw {
  0% { opacity: 0; clip-path: inset(0 calc(100% - var(--cap)) 0 0 round var(--radius-pill)); }
  15% { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0 round var(--radius-pill)); }
}
@keyframes niceru-band-float {
  from { --band-float: -12px; }
  to { --band-float: 12px; }
}
@keyframes niceru-cue {
  from { transform: translateY(-3px); }
  to { transform: translateY(3px); }
}
@keyframes niceru-menu-in {
  from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero und Seitenkopf: Text ist nach kurzem Einblenden sofort lesbar und gleitet gestaffelt
     an seinen Platz, Bänder wachsen diagonal herein. Kein langes Ausblenden = kein Flackern
     beim Seitenwechsel. */
  .hero__text > *,
  .page-head__text > * {
    animation: niceru-fade-in var(--dur-fast) var(--ease-out) both,
      niceru-slide-up var(--dur-slow) var(--ease-out) both;
  }
  /* Überschrift ist ab dem ersten Bild sichtbar und gleitet nur an ihren Platz */
  .hero__text > :first-child,
  .page-head__text > :first-child {
    animation: niceru-slide-up var(--dur-slow) var(--ease-out) both;
  }
  .hero__text > :nth-child(2),
  .page-head__text > :nth-child(2) { animation-delay: 80ms; }
  .hero__text > :nth-child(3),
  .page-head__text > :nth-child(3) { animation-delay: 160ms; }
  .hero__text > :nth-child(4),
  .page-head__text > :nth-child(4) { animation-delay: 240ms; }

  .brand-visual__band {
    animation: niceru-band-in calc(var(--dur-slow) * 1.5) var(--ease-out) both;
  }
  .brand-visual__band--2 { animation-delay: 120ms; }
  .brand-visual__band--3 { animation-delay: 240ms; }
  /* Hero ohne Foto: Bänder werden nacheinander gezogen und schweben dann unterschiedlich
     schnell (wirkt nicht mechanisch) */
  .hero__visual--baender .brand-visual__band {
    animation:
      niceru-band-draw calc(var(--dur-slow) * 2.5) var(--ease-out) both,
      niceru-band-float 9s ease-in-out 1400ms infinite alternate;
  }
  .hero__visual--baender .brand-visual__band--2 {
    animation-delay: 260ms, 1700ms;
    animation-duration: calc(var(--dur-slow) * 2.5), 11s;
  }
  .hero__visual--baender .brand-visual__band--3 {
    animation-delay: 520ms, 2000ms;
    animation-duration: calc(var(--dur-slow) * 2.5), 7s;
  }

  .hero__media { animation: niceru-fade-in var(--dur-slow) var(--ease-out) both; }
  /* Hintergrund-Geometrie blendet nur ein (keine Bewegung, die Parallax übernimmt site.js) */
  .bg-deco { animation: niceru-fade-in calc(var(--dur-slow) * 2) var(--ease-out) 200ms both; }
  .hero__band {
    animation: niceru-band-in calc(var(--dur-slow) * 1.5) var(--ease-out) 200ms both;
  }
  .hero__band--2 { animation-delay: 320ms; }

  /* Pfeil im Scroll-Button bewegt sich sanft als Hinweis */
  .scroll-cue .icon { animation: niceru-cue calc(var(--dur-slow) * 2) var(--ease-out) infinite alternate; }

  .card--interactive:hover { transform: translateY(calc(var(--space-1) * -1)); }
  .btn:active { transform: scale(0.98); }

  @media (max-width: 1023.98px) {
    .js .site-nav[data-open] { animation: niceru-menu-in var(--dur-base) var(--ease-out); }
  }
  .js .nav-group__toggle[aria-expanded="true"] + .nav-group__menu {
    animation: niceru-menu-in var(--dur-base) var(--ease-out);
  }

  .form-success:not([hidden]) { animation: niceru-rise var(--dur-slow) var(--ease-out) both; }

  /* Beim Scrollen einblenden - Klasse .reveal setzt site.js nur für Elemente unterhalb
     des sichtbaren Bereichs, ohne JavaScript ist alles sofort sichtbar. */
  /* Ausblenden sofort (ohne Übergang), animiert wird nur das Einblenden */
  .reveal {
    opacity: 0;
    transform: translateY(var(--space-12)) scale(0.97);
  }
  .reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  /* Weicher Farbwechsel beim Umschalten Hell/Dunkel */
  .theme-switching,
  .theme-switching *,
  .theme-switching *::before,
  .theme-switching *::after {
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out) !important;
  }
}

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}