/* ============================================================
   Cunz IT — zentrales Stylesheet
   Alle Farben, Schriften und Abstände kommen aus dem
   CI-Styleguide (Corporate-Identity/styleguide.md).
   Diese Datei ist die EINZIGE Stelle, an der Design definiert wird.
   ============================================================ */

/* ---------- Schriften (lokal eingebettet, siehe Styleguide) ---------- */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design-Tokens: heller Modus ---------- */
:root {
  --bg: #FFFFFF;
  --bg-alt: #F6F8FA;
  --surface: #FFFFFF;
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(28, 112, 182, 0.30);
  --text: #0F172A;
  --text-muted: #334155;
  --accent: #1c70b6;
  --accent-contrast: #FFFFFF;
  --accent-2: #96661F;
  --ring-opacity: 0.05;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04);

  /* 8px-Raster */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px;

  --maxw: 1120px;
  --radius: 4px;

  color-scheme: light;
}

/* ---------- Design-Tokens: dunkler Modus ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F172A;
    --bg-alt: #0A1118;
    --surface: #0A1118;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(61, 139, 212, 0.45);
    --text: #FFFFFF;
    --text-muted: #94A3B8;
    --accent: #3d8bd4;
    --accent-contrast: #0A1118;
    --accent-2: #D9A653;
    --ring-opacity: 0.08;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F172A;
  --bg-alt: #0A1118;
  --surface: #0A1118;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(61, 139, 212, 0.45);
  --text: #FFFFFF;
  --text-muted: #94A3B8;
  --accent: #3d8bd4;
  --accent-contrast: #0A1118;
  --accent-2: #D9A653;
  --ring-opacity: 0.08;
  --shadow: none;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-alt: #F6F8FA;
  --surface: #FFFFFF;
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(28, 112, 182, 0.30);
  --text: #0F172A;
  --text-muted: #334155;
  --accent: #1c70b6;
  --accent-contrast: #FFFFFF;
  --accent-2: #96661F;
  --ring-opacity: 0.05;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color-scheme: light;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Open Sans", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sprungmarke für Tastatur-/Screenreader-Nutzer */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: var(--s1) var(--s2);
  z-index: 100;
}
.skip-link:focus { left: var(--s2); top: var(--s2); }

/* ---------- Layout-Container ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--s3);
  padding-right: var(--s3);
}

.section { padding: var(--s12) 0; }
.section--tight { padding: var(--s10) 0; }
.section--alt { background: var(--bg-alt); }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.12; }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
h3 { font-size: 21px; line-height: 1.3; }
h4 { font-size: 17px; }

p { margin: 0; }

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.eyebrow--muted { color: var(--text-muted); }

.lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 62ch;
}

.body-text { color: var(--text-muted); max-width: 68ch; }

.accent { color: var(--accent); }

/* Vertikale Abstände über flex/gap statt Einzel-Margins */
.stack { display: flex; flex-direction: column; }
.stack--s1 { gap: var(--s1); }
.stack--s2 { gap: var(--s2); }
.stack--s3 { gap: var(--s3); }
.stack--s4 { gap: var(--s4); }
.stack--s6 { gap: var(--s6); }

/* ---------- Kopfbereich / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 84px;
}

.brand { display: flex; align-items: center; text-decoration: none; }
/* Höhe bewusst großzügig: Das Logo enthält den Schriftzug im Ring und
   ist darunter nicht mehr lesbar (auf der bisherigen Website ebenso genutzt). */
.brand img { height: 46px; width: auto; display: block; }
.site-footer .brand img { height: 40px; }
.brand .logo-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  .brand .logo-hell   { display: none; }
  .brand .logo-dunkel { display: block; }
}
:root[data-theme="dark"] .brand .logo-hell   { display: none; }
:root[data-theme="dark"] .brand .logo-dunkel { display: block; }
:root[data-theme="light"] .brand .logo-hell   { display: block; }
:root[data-theme="light"] .brand .logo-dunkel { display: none; }

.nav { display: flex; align-items: center; gap: var(--s1); }

.nav a {
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--s1) 12px;
  border-radius: var(--radius);
  transition: color 0.18s ease, background-color 0.18s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--bg-alt); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* SAP-Reiter: "SAP" hervorgehoben in der Akzentfarbe, "S/4HANA" bleibt
   normaler Menütext. Bewusst kein SAP-Logo (fremde Marke) — die drei
   Buchstaben in eigener Schrift und eigener Farbe sind markenrechtlich
   unbedenklich und passen zur CI. Größe in em, damit sie beim Zoomen
   mitwächst; die Farbe kommt aus --accent und stimmt dadurch im hellen
   wie im dunklen Modus. */
.nav a.nav-sap { display: inline-flex; align-items: baseline; gap: 5px; }
.nav a.nav-sap .nav-sap__wort {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.4em;
  letter-spacing: 0.03em;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px;
  cursor: pointer;
  line-height: 0;
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--s1) var(--s3) var(--s3);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--border); border-radius: 0; }
  .nav a:hover { background: none; }
  .nav a:last-child { border-bottom: none; }
}

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 13px 24px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn--primary { background: var(--accent); color: var(--accent-contrast); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost { border-color: var(--border); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

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

/* ---------- Hero ---------- */
.hero { position: relative; padding: var(--s12) 0; overflow: hidden; }
.hero__inner { position: relative; z-index: 1; max-width: 760px; }

/* Hero mit Bild: Text links, Motiv rechts. Das Bild ist bewusst
   dunkel gehalten, damit es neben dem Text nicht um Aufmerksamkeit
   konkurriert, sondern Tiefe gibt. */
.hero--bild .hero__raster {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  gap: var(--s8);
  align-items: center;
}
@media (max-width: 980px) {
  .hero--bild .hero__raster { grid-template-columns: 1fr; gap: var(--s5); }
}
.hero--bild .hero__inner { max-width: none; }

.hero__motiv {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #0a1118;
}
@media (max-width: 980px) { .hero__motiv { aspect-ratio: 16 / 9; } }
.hero__motiv img, .hero__motiv video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Der Signatur-Ring als feiner Aufdruck auf dem Motiv */
.hero__motiv::after {
  content: "";
  position: absolute;
  right: var(--s3);
  bottom: var(--s3);
  width: 46px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-mask-image: var(--ring-maske);
  mask-image: var(--ring-maske);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Hero mit vollflächigem Video-Hintergrund (Über-uns). Video und ein
   abgedunkelter Verlauf liegen als Ebenen hinter dem Text, der über
   var(--text)/--accent-Neufestlegung hell auf Dunkel bleibt. */
.hero--video .hero__video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero--video .hero__video-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(10, 17, 24, 0.86) 0%, rgba(10, 17, 24, 0.62) 45%, rgba(10, 17, 24, 0.3) 100%);
}
.hero--video .hero__inner {
  position: relative;
  z-index: 2;
  --text: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.82);
  --accent: #3d8bd4;
  color: var(--text);
}

/* ---------- Bild-Banner auf den Leistungsseiten ---------- */
.motiv-banner {
  position: relative;
  height: clamp(180px, 26vw, 320px);
  overflow: hidden;
  background: #0a1118;
}
.motiv-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Weiche Kante nach unten, damit das Bild in die Seite übergeht
   statt als Fremdkörper abzuschließen.
   ACHTUNG: Blendet nach --bg-alt aus, weil auf allen Leistungsseiten
   direkt unter dem Banner eine graue Sektion folgt. Wird dort einmal
   ein weißer Abschnitt angehängt, muss dieser Wert mit angepasst
   werden — sonst entsteht genau an der Kante ein sichtbarer Absatz. */
.motiv-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,17,24,0) 68%, var(--bg-alt) 100%);
}

/* ---------- Bildkopf auf Leistungskarten ---------- */
.card__motiv {
  margin: calc(var(--s4) * -1) calc(var(--s3) * -1) 0;
  height: 150px;
  overflow: hidden;
  background: #0a1118;
}
.card__motiv img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.card--link:hover .card__motiv img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .card__motiv img { transition: none; } }

.ring-watermark {
  position: absolute;
  top: -140px;
  right: -180px;
  width: 620px;
  height: 620px;
  opacity: var(--ring-opacity);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) { .ring-watermark { width: 380px; height: 380px; right: -140px; } }

/* Größere, kräftigere Variante fürs Hero-Bild auf der Startseite —
   bewusst eigene Werte statt --ring-opacity, damit die dezente
   Version auf den anderen Seiten unangetastet bleibt. */
.ring-watermark--prominent {
  top: -210px;
  right: -260px;
  width: 900px;
  height: 900px;
  opacity: 0.4;
}
@media (max-width: 980px) {
  .ring-watermark--prominent { width: 620px; height: 620px; top: -150px; right: -180px; }
}

/* ---------- Herz-Band: wiederkehrendes Wasserzeichen-Motiv, das sich als
   blauer "roter Faden" durch die Seite zieht und am Ende (Kontakt-Sektion)
   sichtbar zum Herz wird. Gleiches Prinzip wie .ring-watermark: Bild liegt
   per z-index hinter dem eigentlichen Sektionsinhalt. ---------- */
.section--herzfaden { position: relative; overflow: hidden; }
.section--herzfaden > .container { position: relative; z-index: 1; }

.herzfaden-echo {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
  width: 480px;
  height: auto;
}

.cta-block__herz {
  width: 150px;
  height: auto;
}

/* ---------- Karten-Raster (3 Säulen) ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (max-width: 880px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4) var(--s3) var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card--link:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.card__icon { width: 40px; height: 40px; color: var(--accent); }
.card__icon svg { width: 100%; height: 100%; display: block; }

.card__eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card p { color: var(--text-muted); font-size: 15px; }

.card__more {
  margin-top: auto;
  padding-top: var(--s1);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  transition: color 0.18s ease;
}
.card__more svg { width: 14px; height: 14px; transition: transform 0.18s ease; }
.card--link:hover .card__more { color: var(--accent); }
.card--link:hover .card__more svg { transform: translateX(3px); }

/* ---------- Leistungslisten ---------- */
.leistungsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.leistungsliste li {
  position: relative;
  padding-left: 26px;
  color: var(--text-muted);
  font-size: 15px;
}
.leistungsliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

/* ---------- Prozess / Fahrplan ---------- */
.prozess { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); counter-reset: schritt; }
@media (max-width: 880px) { .prozess { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .prozess { grid-template-columns: 1fr; } }

.prozess__schritt { display: flex; flex-direction: column; gap: 10px; padding-top: var(--s2); border-top: 2px solid var(--border); }
.prozess__nr {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.prozess__schritt p { font-size: 15px; color: var(--text-muted); }

/* ---------- Blog-Liste ---------- */
.blog-liste { display: grid; gap: var(--s3); }

.blog-eintrag {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
  align-items: start;
}
@media (max-width: 700px) { .blog-eintrag { grid-template-columns: 1fr; gap: var(--s1); } }

.blog-eintrag__meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blog-eintrag__kategorie { color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
.blog-eintrag h3 a { color: var(--text); text-decoration: none; }
.blog-eintrag h3 a:hover { color: var(--accent); }
.blog-eintrag p { color: var(--text-muted); font-size: 15px; margin-top: var(--s1); max-width: 68ch; }

/* Hinweisbox für Platzhalter-Inhalte im Grundgerüst */
.hinweis {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--s3);
  background: var(--bg-alt);
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.hinweis strong { color: var(--text); }

/* ---------- Abschluss-Aufruf ---------- */
.cta-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s8) var(--s5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  background: var(--bg-alt);
}
.cta-block p { max-width: 54ch; color: var(--text-muted); }
/* Auf grauem Grund würde sich der Block sonst nicht mehr abheben */
.section--alt .cta-block { background: var(--surface); }

/* ---------- Fußbereich ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--s8) 0 var(--s5);
  margin-top: var(--s6);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s5);
}
@media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .site-footer__grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--s4); } .site-footer__grid > div:first-child { grid-column: auto; } }

.site-footer h4 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s2);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--text-muted); text-decoration: none; font-size: 15px; }
.site-footer a:hover { color: var(--accent); }
.site-footer__claim { color: var(--text-muted); font-size: 15px; max-width: 40ch; margin-top: var(--s2); }
.site-footer__legal {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
  .card, .btn, .card__more, .card__more svg, .nav a { transition: none; }
}

/* ============================================================
   Vertrauens-Bausteine (ergänzt 2026-07-27)
   ============================================================ */

/* ---------- Kennzahlen ----------
   Trennlinien statt Kacheln — die vorige Box-je-Zahl-Variante wirkte laut
   Feedback "billig". Der Hover blendet eine dünne Blau-Linie unter der
   jeweiligen Zahl ein, statt die ganze Fläche einzufärben. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.kennzahl {
  border-left: 1px solid var(--border);
  padding: 0 var(--s3) var(--s2);
  position: relative;
}
.kennzahlen .kennzahl:nth-child(4n+1) { border-left: none; padding-left: 0; }
.kennzahl::after {
  content: "";
  position: absolute;
  left: var(--s3); right: var(--s3); bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.kennzahlen .kennzahl:nth-child(4n+1)::after { left: 0; }
.kennzahl:hover::after { transform: scaleX(1); }

.kennzahl__wert {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.kennzahl__label { font-size: 14px; color: var(--text-muted); margin-top: 6px; display: block; }

/* Der eine Gold-Akzent dieses Abschnitts: dauerhafte Unterstreichung auf der
   Kennzahl, die das stärkste Versprechen trägt (Geschwindigkeit). */
.kennzahl--marke .kennzahl__wert {
  display: inline-block;
  border-bottom: 2px solid var(--accent-2);
  padding-bottom: 2px;
}

@media (max-width: 780px) {
  .kennzahlen { grid-template-columns: repeat(2, 1fr); row-gap: var(--s3); }
  .kennzahlen .kennzahl:nth-child(4n+1) { border-left: 1px solid var(--border); padding-left: var(--s3); }
  .kennzahlen .kennzahl:nth-child(4n+1)::after { left: var(--s3); }
  .kennzahlen .kennzahl:nth-child(2n+1) { border-left: none; padding-left: 0; }
  .kennzahlen .kennzahl:nth-child(2n+1)::after { left: 0; }
}
@media (max-width: 420px) {
  .kennzahlen { grid-template-columns: 1fr; row-gap: var(--s3); }
  .kennzahlen .kennzahl { border-left: none; padding-left: 0; }
  .kennzahlen .kennzahl::after { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kennzahl::after { transition: none; }
}

/* ---------- Kundenlogos ----------
   Echte Partner-Logo-Dateien (Herkunft: assets/img/logos/HERKUNFT.md), jede in
   einer festen weißen Karte. Die Partnerlogos liegen in ganz unterschiedlichen
   Formaten vor (transparent, weißer Hintergrund, einzelne mit eigener
   Akzentfarbe im Logo selbst) — eine einheitliche weiße Karte macht daraus eine
   ruhige Reihe, unabhängig vom hellen/dunklen Modus der Seite. */
.logo-leiste {
  position: relative;
  overflow: hidden;
  /* Weicher Rand statt hartem Schnitt, wo die Reihe unter dem Container
     verschwindet — wirkt wie ein durchlaufendes Band, kein abgeschnittenes Bild. */
  -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
}
.logo-leiste__spur {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: max-content;
  animation: logo-leiste-scroll 36s linear infinite;
}
/* Pause zum genauen Hinsehen, sobald die Maus über der Reihe steht. */
.logo-leiste:hover .logo-leiste__spur { animation-play-state: paused; }
@keyframes logo-leiste-scroll {
  from { transform: translateX(0); }
  /* Die Liste steht zweimal im Markup — bei -50% ist die erste Kopie exakt
     einmal durchgelaufen, der Sprung zurück auf 0 fällt nicht auf. */
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-leiste { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .logo-leiste__spur { animation: none; flex-wrap: wrap; width: auto; }
  .logo-leiste__spur [aria-hidden="true"] { display: none; }
}
.logo-chip {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 10px 20px;
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
}
.logo-chip img {
  display: block;
  max-height: 26px;
  max-width: 120px;
  width: auto;
  height: auto;
}
/* Quadratische Icon-Logos (statt breiter Wortmarke) wirken bei gleicher
   Bildhöhe optisch kleiner als die anderen — bekommen etwas mehr Höhe,
   damit die Reihe gleichmäßig wirkt. */
.logo-chip--icon img { max-height: 34px; }

/* ---------- Kundenstimme ---------- */
.stimme {
  border-left: 2px solid var(--accent);
  padding: var(--s1) 0 var(--s1) var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 70ch;
}
.stimme blockquote {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}
.stimme figcaption {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.stimmen-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s5); }
@media (max-width: 880px) { .stimmen-raster { grid-template-columns: 1fr; } }

.stimmen-raster .stimme blockquote { font-size: 16px; }

/* ---------- Team ----------
   Zwei Spalten mit Bild neben dem Text: Die Profile erzählen eine
   Laufbahn und brauchen Zeilenlänge, keine vier schmalen Säulen. */
.team-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (max-width: 880px) { .team-raster { grid-template-columns: 1fr; } }

.person-karte {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  /* Die Bildspalte bekommt eine eigene Fläche, damit unter dem Porträt
     kein loses Loch entsteht, wenn der Text länger läuft als das Bild. */
  background: linear-gradient(to right, var(--bg-alt) 180px, var(--surface) 180px);
}
@media (max-width: 560px) {
  .person-karte { grid-template-columns: 1fr; background: var(--surface); }
}

/* Quadratisch und in fester Größe: So bleibt die Kopfgröße über alle
   vier Porträts vergleichbar, egal wie lang der Text daneben wird. */
.person-karte__bild {
  width: 180px;
  height: 180px;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  background: var(--bg-alt);
}
@media (max-width: 560px) { .person-karte__bild { width: 100%; height: auto; aspect-ratio: 4 / 3; } }

.person-karte__text { padding: var(--s3); display: flex; flex-direction: column; gap: 10px; }
.person-karte__rolle {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.person-karte h3 { font-size: 18px; }
.person-karte__aufgabe { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.person-karte__aufgabe strong { color: var(--text); font-weight: 600; }
.person-karte__zerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; margin-top: auto; padding-top: var(--s2); }
.person-karte__zerts li { font-size: 13px; color: var(--text-muted); }
.person-karte__zerts li::before { content: "✓ "; color: var(--accent); }

/* Einzelner Ansprechpartner auf Leistungsseiten */
.ansprechpartner {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s3);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s3);
  background: var(--surface);
}
@media (max-width: 620px) { .ansprechpartner { grid-template-columns: 1fr; } }
.ansprechpartner img { width: 140px; height: 140px; object-fit: cover; border-radius: var(--radius); display: block; }
.ansprechpartner__text { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Vergleichstabelle ---------- */
.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.vergleich { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
table.vergleich th, table.vergleich td { padding: 14px var(--s2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); transition: background-color 0.15s ease, border-color 0.15s ease; }
table.vergleich thead th {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  background: var(--bg-alt);
  white-space: nowrap;
}
table.vergleich tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
table.vergleich td { color: var(--text-muted); }
table.vergleich .spalte-wir { background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text); font-weight: 600; border-left: 2px solid transparent; }
table.vergleich tbody tr:last-child th, table.vergleich tbody tr:last-child td { border-bottom: none; }

/* Zeilen-Hover: die ganze Zeile hellt sich ab, unsere Spalte zusätzlich stärker.
   Beides in Markenblau — Gold ist an dieser Tabelle bewusst nur der dauerhafte
   Strich unter "Cunz IT" im Kopf, siehe unten. */
table.vergleich tbody tr:hover th,
table.vergleich tbody tr:hover td { background: var(--bg-alt); }
table.vergleich tbody tr:hover .spalte-wir {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-left-color: var(--accent);
}
/* Spalten-Hervorhebung beim Überfahren der Kopfzeile — moderne Browser (:has),
   degradiert in älteren einfach zum reinen Zeilen-Hover oben. */
table.vergleich:has(thead th.spalte-wir:hover) tbody .spalte-wir {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-left-color: var(--accent);
}
thead th.spalte-wir {
  position: relative;
}
/* Der eine Gold-Akzent dieses Abschnitts: dauerhafte Unterstreichung des
   Spaltennamens — markiert die empfohlene Spalte unabhängig vom Hover. */
thead th.spalte-wir span {
  border-bottom: 2px solid var(--accent-2);
  padding-bottom: 3px;
}

/* ---------- Zielgruppen-Karten ---------- */
.zielgruppe {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
}
.zielgruppe__groesse {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.zielgruppe p { font-size: 15px; color: var(--text-muted); }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 76ch; display: flex; flex-direction: column; gap: var(--s3); }
.rechtstext h2 { font-size: 24px; margin-top: var(--s4); }
.rechtstext h3 { font-size: 18px; margin-top: var(--s2); }
.rechtstext p, .rechtstext li { color: var(--text-muted); font-size: 15px; line-height: 1.7; }
.rechtstext ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.rechtstext address { font-style: normal; color: var(--text-muted); font-size: 15px; line-height: 1.7; }

/* ---------- Bewertungs-Auszeichnung (Google) ---------- */
.bewertung {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px var(--s2);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  width: fit-content;
  transition: border-color 0.18s ease;
}
.bewertung:hover { border-color: var(--border-strong); }

/* Der eine Gold-Akzent des Hero-Abschnitts: Sterne folgen der international
   üblichen Gold-Farbe, statt dem strukturellen Markenblau. */
.bewertung__sterne { display: flex; gap: 2px; color: var(--accent-2); line-height: 0; }
.bewertung__sterne svg { width: 16px; height: 16px; }

.bewertung__wert { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.bewertung__text { font-size: 14px; color: var(--text-muted); }

/* Bewertungs-Zeile im Referenzen-Kopf */
.bewertung-gross {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
}
.bewertung-gross__wert {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Herkunftsangabe unter einer Kundenstimme */
.stimme__quelle { color: var(--accent); text-decoration: none; }
.stimme__quelle:hover { text-decoration: underline; }

/* ============================================================
   Google-Rezensionen-Widget (selbst gehostet, keine externen Skripte)
   ============================================================ */
.g-widget {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.g-widget__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}

.g-widget__marke { display: flex; align-items: center; gap: 14px; }
.g-widget__marke svg { width: 30px; height: 30px; flex-shrink: 0; }
.g-widget__titel { font-weight: 700; font-size: 17px; line-height: 1.25; }
.g-widget__untertitel { font-size: 13px; color: var(--text-muted); }

.g-widget__wertung { display: flex; align-items: center; gap: 12px; }
/* Der eine Gold-Akzent dieses Abschnitts: dauerhafte Unterstreichung der
   Gesamtnote, die den ganzen Referenzen-Bereich trägt. */
.g-widget__note {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--accent-2);
  padding-bottom: 4px;
}
.g-sterne { display: inline-flex; gap: 2px; color: #F5A623; line-height: 0; }
.g-sterne svg { width: 17px; height: 17px; }

/* --- Karussell --- */
.g-widget__buehne { position: relative; }
.g-widget__spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--s3)) / 3);
  gap: var(--s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.g-widget__spur::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .g-widget__spur { scroll-behavior: auto; } }

@media (max-width: 900px) { .g-widget__spur { grid-auto-columns: calc((100% - var(--s3)) / 2); } }
@media (max-width: 620px) { .g-widget__spur { grid-auto-columns: 86%; } }

.g-karte {
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  min-height: 100%;
}

.g-karte__kopf { display: flex; align-items: center; gap: 12px; }
.g-karte__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.g-karte__name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.g-karte__datum { font-size: 12px; color: var(--text-muted); }
.g-karte__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Steuerung */
.g-widget__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
}
.g-widget__pfeile { display: flex; gap: var(--s1); }
.g-pfeil {
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.g-pfeil:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.g-pfeil:disabled { opacity: 0.35; cursor: default; }
.g-pfeil svg { width: 16px; height: 16px; }

.g-widget__link {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.g-widget__link:hover { text-decoration: underline; }

/* ============================================================
   Erweiterungen nach dem Feedback vom 27.07.2026
   ============================================================ */

/* ---------- Abschnitts-Trenner: das Signatur-Motiv aus der CI ----------
   Laut styleguide.md dient die unterbrochene Ring-Form als Trenner
   zwischen Content-Blöcken — statt einer schlichten Linie.
   Als Maske eingebunden, damit die Farbe dem hellen/dunklen Modus folgt. */
/* Sitzt INNERHALB eines Abschnitts und trennt dort zwei inhaltliche Blöcke.
   Zwischen Abschnitten wird bewusst nicht getrennt — dort übernimmt der
   Wechsel der Hintergrundfarbe diese Aufgabe. */
.trenner {
  display: flex;
  justify-content: center;
  margin: var(--s2) 0;
}
.trenner::before {
  content: "";
  width: 34px;
  height: 21px;
  background-color: var(--accent);
  -webkit-mask-image: var(--ring-maske);
  mask-image: var(--ring-maske);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
:root {
  --ring-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 605.71 365.32'%3E%3Cpath d='M585.22,935.89a182.4,182.4,0,0,0,146.59-73.66v-38l-58-.27a113.4,113.4,0,0,1-201.72-62.45l-69.36.37C407.3,858.75,487.25,935.89,585.22,935.89Z' transform='translate(-402.57 -570.57)'/%3E%3Cpath d='M585.22,639.84a113.2,113.2,0,0,1,88.63,42.64l58-.29v-38a182.38,182.38,0,0,0-146.59-73.67c-100.61,0-182.22,81.35-182.65,181.87l69.27-.38A113.39,113.39,0,0,1,585.22,639.84Z' transform='translate(-402.57 -570.57)'/%3E%3C/svg%3E");
}

/* ---------- Hero: die vier Bausteine als Terminal-Zeile ----------
   Der Text steht als echte Liste im HTML (für Suchmaschinen, KI-Antwort-
   maschinen und Screenreader). Das Skript ersetzt sie durch die Animation. */
.hero-bausteine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.hero-bausteine li {
  font-size: 17px;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1);
}
/* Bleibt für Vorlesehilfen erhalten, sobald die Animation übernimmt */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-bausteine .baustein-tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  color: var(--accent);
}

.tipper {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.5;
  /* Platz für zwei Zeilen reservieren, damit beim Wechsel nichts springt */
  min-height: calc(2 * 1.5em);
  display: block;
  border-left: 2px solid var(--accent);
  padding-left: var(--s2);
}
.tipper__klar { color: var(--text); font-weight: 600; }
.tipper__tag { color: var(--accent); }
.tipper__cursor {
  display: inline-block;
  width: 9px;
  height: 1.05em;
  margin-left: 2px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: blinken 1s steps(1, end) infinite;
}
@keyframes blinken { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tipper__cursor { animation: none; } }

/* ---------- Zwei Wege: wie Anfragen bei uns ankommen ---------- */
.wege-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.wege-start__box {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px var(--s3);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Der eine Gold-Akzent dieses Abschnitts: markiert den Ausgangspunkt, an dem
   sich der Leser selbst wiederfindet — dauerhaft, nicht an Hover gebunden. */
.wege-start__box::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  flex-shrink: 0;
}
/* Volle Breite, damit die Abzweigungen genau über den Kartenmitten enden.
   Der negative Rand schließt die Lücke zum Karten-Raster darunter. */
.wege-start__gabel { width: 100%; height: 56px; color: var(--border-strong); margin-bottom: calc(var(--s6) * -1); }
.wege-start__gabel svg { width: 100%; height: 100%; display: block; }
@media (max-width: 880px) { .wege-start__gabel { display: none; } .wege-start { gap: var(--s3); } }

.wege { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (max-width: 880px) { .wege { grid-template-columns: 1fr; } }

.weg {
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.weg__kennung {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.weg > p { color: var(--text-muted); font-size: 15px; }
.weg__ergebnis {
  margin-top: auto;
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.weg__ergebnis span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---------- SAP: Rollen in Besetzungsreihenfolge ----------
   Die Nummerierung trägt hier echte Information: Sie gibt die Reihenfolge
   vor, in der die Positionen besetzt werden sollten. */
.phasen { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
@media (max-width: 1000px) { .phasen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .phasen { grid-template-columns: 1fr; } }

.phase { display: flex; flex-direction: column; gap: var(--s2); }
.phase__kopf {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--accent);
}
.phase__nr {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.phase__titel { font-size: 17px; font-weight: 700; line-height: 1.25; }
.phase__wann { font-size: 13px; color: var(--text-muted); }

/* Die Nummer steht über dem Titel, damit dem Rollennamen die volle
   Kachelbreite bleibt — sonst bricht er in schmalen Spalten dreizeilig um. */
.rolle {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.18s ease;
}
.rolle:hover { border-color: var(--border-strong); }
.rolle__nr {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rolle__titel { font-size: 15px; font-weight: 700; line-height: 1.3; }
.rolle__was { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .rolle { transition: none; } }

/* ---------- Hervorgehobener Einschub (Change Management als Klammer) ----------
   Zweispaltig: links die Aussage, rechts die Begründung. So bleibt die
   Zeilenlänge lesbar, ohne dass rechts eine leere Fläche entsteht. */
.klammer {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  padding: var(--s5);
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 880px) {
  .klammer { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4); }
}

.klammer__kopf { display: flex; flex-direction: column; gap: var(--s2); }
.klammer__text { display: flex; flex-direction: column; gap: var(--s2); }
.klammer h3 { font-size: 22px; }
.klammer p { color: var(--text-muted); font-size: 15px; }
.klammer__ketten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s1);
  margin-top: var(--s1);
  padding-top: var(--s2);
  border-top: 1px solid var(--border-strong);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.klammer__ketten span { display: inline-flex; align-items: center; gap: var(--s1); }
.klammer__ketten span::after { content: "+"; color: var(--accent); }
.klammer__ketten span:last-child::after { content: "→ Enablement"; color: var(--accent); }

/* ============================================================
   Kontaktformular (ergänzt 2026-08-18)
   Nutzt ausschließlich die Variablen von oben, damit der
   Dunkelmodus ohne eigene Regeln mitläuft.
   ============================================================ */
.formular { display: grid; gap: var(--s3); max-width: 720px; }
.formular__reihe { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .formular__reihe { grid-template-columns: 1fr; } }

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.feld__pflicht { color: var(--accent); }

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 12px var(--s2);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:hover,
.feld select:hover,
.feld textarea:hover { border-color: var(--border-strong); }
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(28, 112, 182, 0.16);
}
:root[data-theme="dark"] .feld input:focus-visible,
:root[data-theme="dark"] .feld select:focus-visible,
:root[data-theme="dark"] .feld textarea:focus-visible { box-shadow: 0 0 0 3px rgba(61, 139, 212, 0.28); }

/* Fehlerhafte Felder erst nach einem Absendeversuch färben, nicht beim Tippen. */
.formular.ist-geprueft .feld input:invalid,
.formular.ist-geprueft .feld textarea:invalid { border-color: #b3261e; }
:root[data-theme="dark"] .formular.ist-geprueft .feld input:invalid,
:root[data-theme="dark"] .formular.ist-geprueft .feld textarea:invalid { border-color: #f2b8b5; }

.feld__hinweis { font-size: 13px; color: var(--text-muted); }

.zustimmung { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; color: var(--text-muted); }
.zustimmung input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.zustimmung a { color: var(--accent); }

/* Spamfalle: für Menschen unsichtbar, für Bots ausfüllbar.
   Nicht display:none — manche Bots überspringen genau das. */
.formular__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__meldung {
  padding: var(--s3);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-alt);
  font-size: 15px;
  color: var(--text);
}
.formular__meldung--fehler { border-left-color: #b3261e; }
.formular__meldung h3 { font-size: 17px; margin-bottom: 6px; }

.direktkontakt { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.direktkontakt__eintrag { display: flex; flex-direction: column; gap: 2px; }
.direktkontakt__label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.direktkontakt a { color: var(--text); font-size: 17px; text-decoration: none; }
.direktkontakt a:hover { color: var(--accent); }

/* ================================================================
   Umschalter hell / dunkel in der Kopfleiste
   (ergänzt am 19.08.2026)

   Die Farben stehen bereits weiter oben in den drei Token-Blöcken —
   hier geht es nur um Anordnung und Symbolwechsel.
   ================================================================ */

/* Navigation und Bedienelemente als ein rechter Block, damit die
   Kopfleiste weiterhin genau zwei Flex-Kinder hat (Logo | Rest). */
.kopf-rechts {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* Ohne JavaScript bewirkt der Knopf nichts — dann bleibt er verborgen.
   Das Skript im <head> setzt die Klasse, bevor gezeichnet wird. */
.theme-schalter { display: none; }
:root.js-an .theme-schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  /* 11px ergibt zusammen mit dem 18px-Symbol und dem Rahmen ein Ziel von
     42 x 42 px — genau so groß wie der Menüknopf daneben. Unter dem Daumen
     zählt das mehr als die exakte optische Größe des Symbols. */
  padding: 11px;
  cursor: pointer;
  line-height: 0;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.theme-schalter:hover {
  color: var(--text);
  background: var(--bg-alt);
  border-color: var(--border-strong);
}
.theme-schalter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Welches Symbol sichtbar ist, entscheidet dieselbe Logik wie beim Logo:
   erst die Systemeinstellung, dann die ausdrückliche Wahl. Gezeigt wird
   immer das Ziel des Klicks — bei heller Ansicht der Mond, bei dunkler
   die Sonne. */
.theme-schalter__mond  { display: block; }
.theme-schalter__sonne { display: none; }

@media (prefers-color-scheme: dark) {
  .theme-schalter__mond  { display: none; }
  .theme-schalter__sonne { display: block; }
}

:root[data-theme="dark"]  .theme-schalter__mond  { display: none; }
:root[data-theme="dark"]  .theme-schalter__sonne { display: block; }
:root[data-theme="light"] .theme-schalter__mond  { display: block; }
:root[data-theme="light"] .theme-schalter__sonne { display: none; }

/* Auf schmalen Bildschirmen steht der Umschalter neben dem Menüknopf.
   Er gehört bewusst NICHT in die aufklappbare Navigation — die ist dort
   zugeklappt, und die Darstellung soll man ohne Umweg wechseln können. */
@media (max-width: 880px) {
  .kopf-rechts { gap: var(--s1); }
}