/* ==========================================================================
   NK Webdesign & NK Systems & Engineering
   Helles Marken-System nach Logo-Vorgabe: Tinte-Schwarz + Königsblau auf Weiß.
   Bausteine: Doppelrand-Karten (Schale + Kern), schwebende Pill-Navigation,
   Knopf-im-Knopf-CTAs, weiche Streuschatten, Feder-Kurven statt ease-in-out.
   Radius-System: Knöpfe = Pille, Schalen = 28px, Kerne = 20px, Eingaben = 12px.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token ---------- */
:root {
  --papier: #f5f6f9;
  --weiss: #ffffff;
  --tinte: #0d1117;
  --tinte-2: #465062;
  --tinte-3: #8a93a6;

  --blau: #2f5bff;
  --blau-dunkel: #1e42d6;
  --blau-hell: #7d99ff;
  --blau-tief: rgba(47, 91, 255, 0.08);

  --haar: rgba(13, 17, 23, 0.09);
  --haar-weich: rgba(13, 17, 23, 0.06);

  --schrift: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", monospace;

  --radius-schale: 28px;
  --radius-kern: 20px;
  --radius-eingabe: 12px;

  --schatten-schwebend: 0 30px 70px -30px rgba(13, 17, 23, 0.28), 0 8px 24px -12px rgba(13, 17, 23, 0.12);
  --schatten-leicht: 0 14px 40px -20px rgba(13, 17, 23, 0.20);

  /* Kritisch gedämpft (kein Überschwung): die Vorgabe für alles Ruhige. */
  --feder: cubic-bezier(0.32, 0.72, 0, 1);
  /* Leicht unterdämpfte Feder für Momente mit Schwung (Rückfall: weiche Kurve). */
  --feder-schwung: cubic-bezier(0.34, 1.36, 0.4, 1);

  --breite: 1240px;
}

/* Echte Federphysik, wo der Browser sie kann (zeta 0,72, 3,8 % Überschwung). */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --feder-schwung: linear(0, 0.028, 0.098, 0.194, 0.303, 0.415, 0.524, 0.625, 0.715, 0.793, 0.858, 0.911, 0.952, 0.983, 1.006, 1.022, 1.032, 1.037, 1.038, 1.038, 1.035, 1.031, 1.027, 1.023, 1.019, 1.015, 1.011, 1.008, 1.006, 1.004, 1.002, 1.001, 1, 0.999, 0.999, 0.999, 1);
  }
}

/* ---------- Grundgerüst ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--blau); color: #fff; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

p { margin: 0; }

.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }

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

.sprung {
  position: fixed;
  top: -100px; left: 16px;
  z-index: 200;
  background: var(--tinte); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 500; text-decoration: none;
  transition: top 0.3s var(--feder);
}
.sprung:focus-visible { top: 12px; }

.huelle {
  max-width: var(--breite);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.abschnitt { padding: 130px 0; }
.abschnitt-eng { padding: 90px 0; }
.abschnitt-weiss { background: var(--weiss); }

/* ---------- Überschriften ---------- */
.plakette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--haar);
  background: var(--weiss);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinte-2);
  margin-bottom: 26px;
}
.plakette::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--blau);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.plakette-mono { font-family: var(--mono); text-transform: none; letter-spacing: 0.06em; font-size: 12px; }

.ueberschrift {
  font-size: clamp(2.2rem, 4.8vw, 3.7rem);
  max-width: 20ch;
}
.ueberschrift .blau { color: var(--blau); }

.unterzeile {
  margin-top: 20px;
  color: var(--tinte-2);
  font-size: 1.1rem;
  max-width: 56ch;
}

/* ---------- Knöpfe: Knopf-im-Knopf ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--tinte);
  color: #fff;
  font-family: var(--schrift);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.5s var(--feder), background 0.5s var(--feder), box-shadow 0.5s var(--feder), border-color 0.5s var(--feder), color 0.5s var(--feder);
}
.knopf .kreis {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform 0.55s var(--feder-schwung), background 0.4s var(--feder);
}
.knopf:hover { background: var(--blau); box-shadow: 0 16px 40px -16px rgba(47, 91, 255, 0.55); }
.knopf:hover .kreis { transform: translate(2px, -1px) scale(1.08); background: rgba(255, 255, 255, 0.24); }
/* Rückmeldung beim Drücken: sofort, nicht erst beim Loslassen. */
.knopf:active { transform: scale(0.965); transition-duration: 0.08s; }

.knopf-blau { background: var(--blau); }
.knopf-blau:hover { background: var(--blau-dunkel); box-shadow: 0 16px 40px -16px rgba(30, 66, 214, 0.6); }

.knopf-weiss { background: #fff; color: var(--tinte); }
.knopf-weiss .kreis { background: var(--blau); color: #fff; }
.knopf-weiss:hover { background: #fff; box-shadow: 0 18px 46px -18px rgba(255, 255, 255, 0.5); }

.knopf-leise {
  background: transparent;
  color: var(--tinte);
  border-color: var(--haar);
  padding: 14px 26px;
}
.knopf-leise:hover { border-color: var(--blau); color: var(--blau); background: var(--blau-tief); box-shadow: none; }

.textlink {
  color: var(--tinte);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--haar);
  padding-bottom: 2px;
  transition: border-color 0.3s var(--feder), color 0.3s var(--feder);
}
.textlink:hover { color: var(--blau); border-color: var(--blau); }

/* ---------- Schwebende Pill-Navigation ---------- */
.navigation {
  position: fixed;
  top: 14px;
  left: 0; right: 0;
  z-index: 100;
  pointer-events: none;
}
.navigation-innen {
  pointer-events: auto;
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 10px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 999px;
  border: 1px solid rgba(13, 17, 23, 0.07);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  /* Helle Oberkante: Licht fällt auf das Material. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 12px 40px -18px rgba(13, 17, 23, 0.25);
  margin-left: 16px;
  margin-right: 16px;
}
@media (min-width: 1120px) {
  .navigation-innen { margin-left: auto; margin-right: auto; }
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--tinte);
}
.marke svg { display: block; }
.marke .wortmarke {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.marke .wortmarke small {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--tinte-2);
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a:not(.knopf) {
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--tinte-2);
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: 500;
  transition: color 0.3s var(--feder), background 0.3s var(--feder);
}
.nav-links a:not(.knopf):hover { color: var(--tinte); background: rgba(13, 17, 23, 0.05); }
.nav-links a.aktiv { color: var(--blau); }
.nav-links .knopf { padding: 6px 8px 6px 18px; font-size: 0.92rem; margin-left: 8px; }
.nav-links .knopf .kreis { width: 32px; height: 32px; }

/* Klapp-Menü */
.menue-knopf {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--tinte);
  border: none;
  border-radius: 999px;
  color: #fff;
  padding: 12px 18px;
  font-family: var(--schrift);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.menue-knopf .striche {
  position: relative;
  width: 16px; height: 10px;
  flex: none;
}
.menue-knopf .striche::before, .menue-knopf .striche::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.5s var(--feder), top 0.5s var(--feder);
}
.menue-knopf .striche::before { top: 0; }
.menue-knopf .striche::after { top: 8px; }
.menue-knopf[aria-expanded="true"] .striche::before { top: 4px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .striche::after { top: 4px; transform: rotate(-45deg); }

.mobil-menue {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(245, 246, 249, 0.92);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  padding: 110px 28px 40px;
  flex-direction: column;
  gap: 0;
  visibility: hidden;
  opacity: 0;
  /* Materialisiert vom Menü-Knopf aus (oben rechts), statt nur zu erscheinen. */
  transform: scale(0.985);
  transform-origin: top right;
  transition: opacity 0.5s var(--feder), transform 0.5s var(--feder), visibility 0s linear 0.5s;
}
.mobil-menue.offen { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mobil-menue a {
  text-decoration: none;
  color: var(--tinte);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  padding: 18px 4px;
  border-bottom: 1px solid var(--haar);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.7s var(--feder), opacity 0.7s var(--feder), color 0.3s var(--feder);
}
.mobil-menue a:hover { color: var(--blau); }
.mobil-menue.offen a { transform: none; opacity: 1; }
.mobil-menue a:nth-child(1) { transition-delay: 0.06s; }
.mobil-menue a:nth-child(2) { transition-delay: 0.12s; }
.mobil-menue a:nth-child(3) { transition-delay: 0.18s; }
.mobil-menue a:nth-child(4) { transition-delay: 0.24s; }
.mobil-menue a small {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--tinte-3);
  margin-top: 4px;
}
.mobil-menue a.knopf {
  margin-top: 30px;
  border-bottom: none;
  color: #fff;
  font-size: 1.1rem;
  justify-content: center;
}

/* ---------- Doppelrand: Schale + Kern ---------- */
.schale {
  background: rgba(13, 17, 23, 0.045);
  border: 1px solid var(--haar-weich);
  border-radius: var(--radius-schale);
  padding: 8px;
}
.kern {
  background: var(--weiss);
  border-radius: var(--radius-kern);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), var(--schatten-leicht);
  overflow: hidden;
}
.kern-dunkel {
  background: var(--tinte);
  color: #eef1f6;
  box-shadow: var(--schatten-leicht);
}

/* Browser-Rahmen im Kern */
.geraet-leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--haar);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--tinte-3);
  background: var(--weiss);
}
.geraet-leiste::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blau);
  opacity: 0.85;
  flex: none;
}

/* ---------- Bühne (Startseite) ---------- */
.buehne {
  position: relative;
  padding: 190px 0 110px;
  overflow: clip;
  background:
    radial-gradient(52% 44% at 82% 6%, rgba(47, 91, 255, 0.10), transparent 70%),
    linear-gradient(var(--haar-weich) 1px, transparent 1px),
    linear-gradient(90deg, var(--haar-weich) 1px, transparent 1px),
    var(--papier);
  background-size: auto, 72px 72px, 72px 72px, auto;
  background-position: center, center top, center top, center;
}
.buehne-gitter {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.buehne .buehne-titel {
  margin: 0;
  font-size: clamp(2.7rem, 5.6vw, 4.9rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.buehne .buehne-titel .zeile-blau { color: var(--blau); display: block; min-height: 1.15em; }
.tipp-cursor {
  display: inline-block;
  width: 0.55em;
  margin-left: 2px;
  border-bottom: 0.09em solid var(--blau);
  transform: translateY(-0.08em);
}
@media (prefers-reduced-motion: no-preference) {
  .tipp-cursor { animation: blinzeln 1.05s steps(1) infinite; }
}
@keyframes blinzeln { 50% { opacity: 0; } }

.buehne-aktionen {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Z-Achsen-Komposition rechts */
.komposition { position: relative; }
.komposition .schale-haupt {
  transform: rotate(-1.6deg);
}
.komposition .schale-telefon {
  position: absolute;
  right: -14px;
  bottom: -46px;
  width: clamp(130px, 12vw, 185px);
  transform: rotate(2.4deg);
  z-index: 2;
}
.komposition .chip {
  position: absolute;
  left: -22px;
  top: 86px;
  z-index: 2;
  background: var(--weiss);
  border: 1px solid var(--haar);
  border-radius: 16px;
  box-shadow: var(--schatten-schwebend);
  padding: 14px 20px;
  transform: rotate(-3deg);
}
.komposition .chip .mono { font-size: 1.3rem; font-weight: 700; color: var(--blau); }
.komposition .chip p { font-size: 0.78rem; color: var(--tinte-3); margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .komposition .chip { animation: schweben 7s ease-in-out infinite; }
  .komposition .schale-telefon { animation: schweben 9s ease-in-out infinite reverse; }
}
@keyframes schweben {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* ---------- Laufband ---------- */
.laufband {
  border-top: 1px solid var(--haar);
  border-bottom: 1px solid var(--haar);
  background: var(--weiss);
  overflow: hidden;
  padding: 22px 0;
}
.laufband-spur {
  display: flex;
  gap: 0;
  width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .laufband-spur { animation: laufen 32s linear infinite; }
}
@keyframes laufen { to { transform: translateX(-50%); } }
.laufband-teil {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
  flex: none;
}
.laufband-teil span {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinte);
  white-space: nowrap;
}
.laufband-teil svg { flex: none; }

/* ---------- Partner-Band (Logo-Laufband) ---------- */
.partner-band {
  background: var(--weiss);
  border-top: 1px solid var(--haar);
  border-bottom: 1px solid var(--haar);
  padding: 34px 0 38px;
}
.partner-band .band-titel {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-bottom: 26px;
}
.partner-band .laufband {
  border: none;
  padding: 0;
  background: transparent;
}
.laufband-logos .laufband-teil {
  gap: clamp(48px, 6vw, 84px);
  padding-right: clamp(48px, 6vw, 84px);
}
.laufband-logos .partner-logo {
  display: flex;
  align-items: center;
  height: 44px;
  flex: none;
  color: var(--tinte);
}
.laufband-logos .partner-logo img,
.laufband-logos .partner-logo svg { height: 100%; width: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .laufband-logos .laufband-spur { animation-duration: 44s; }
}
@media (max-width: 560px) {
  .laufband-logos .partner-logo { height: 34px; }
}

/* ---------- Sparten-Karten ---------- */
.sparten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 60px;
}
.sparten > * { min-width: 0; }
.sparte {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.65s var(--feder-schwung);
}
.sparte:hover { transform: translateY(-8px); }
.sparte .kern { padding: 0; height: 100%; display: flex; flex-direction: column; }
.sparte-bild { border-bottom: 1px solid var(--haar); overflow: hidden; }
.sparte-bild img {
  width: 100%;
  aspect-ratio: 16 / 8.6;
  object-fit: cover;
  object-position: top;
  transition: transform 1s var(--feder);
}
.sparte:hover .sparte-bild img { transform: scale(1.04); }
.sparte-text { padding: 30px 32px 34px; flex: 1; display: flex; flex-direction: column; }
.sparte-text h3 { font-size: 1.6rem; }
.sparte-text p { margin-top: 12px; color: var(--tinte-2); max-width: 52ch; }
.sparte-zeiger {
  margin-top: auto;
  padding-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--blau);
}
.sparte-zeiger .kreis {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--blau-tief);
  color: var(--blau);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.55s var(--feder-schwung), background 0.4s var(--feder), color 0.4s var(--feder);
}
.sparte:hover .sparte-zeiger .kreis { background: var(--blau); color: #fff; transform: translateX(4px); }

/* Systems-Karte: dunkler Kern mit Mono-Terminal-Stimmung */
.sparte-system .kern { background: var(--tinte); color: #eef1f6; }
.sparte-system .sparte-text p { color: #a6aebe; }
.sparte .terminal {
  padding: 26px 32px 10px;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 2.05;
  color: #a6aebe;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.sparte .terminal .zeile { display: flex; justify-content: space-between; gap: 4px 14px; flex-wrap: wrap; }
.sparte .terminal .ok { color: #6ee7a0; }
.sparte .terminal .blau-hell { color: var(--blau-hell); }

/* ---------- Kennzahlen ---------- */
.zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 60px;
}
.zahl-karte { text-align: left; border-left: 2px solid var(--blau); padding-left: 26px; min-width: 0; }
.zahl-karte .zahl {
  font-family: var(--mono);
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.zahl-karte .zahl .einheit { color: var(--blau); }
.zahl-karte p { margin-top: 10px; color: var(--tinte-2); font-size: 0.97rem; hyphens: auto; overflow-wrap: break-word; }

/* ---------- Arbeit / Galerie ---------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 26px;
  margin-top: 60px;
}
.galerie-gross { grid-column: span 8; }
.galerie-klein { grid-column: span 4; }
.galerie-halb { grid-column: span 6; }
.galerie figure { margin: 0; }
.galerie figcaption {
  margin-top: 14px;
  padding: 0 6px;
  display: flex;
  justify-content: space-between;
  gap: 4px 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.galerie figcaption strong { font-size: 1.05rem; letter-spacing: -0.01em; }
.galerie figcaption span { font-family: var(--mono); font-size: 0.75rem; color: var(--tinte-3); white-space: nowrap; }
.galerie .kern img { width: 100%; object-fit: cover; }
.galerie .foto img { aspect-ratio: 4 / 4.6; }
.galerie .schirm img { aspect-ratio: 16 / 9.2; object-position: top; }
.galerie a { text-decoration: none; color: inherit; display: block; }
.galerie a:hover .schale { border-color: rgba(47, 91, 255, 0.35); }
.galerie a .schale { transition: border-color 0.4s var(--feder); }
.galerie figcaption .live {
  color: var(--blau);
  font-weight: 600;
}

/* ---------- Ladezeit-Rennen ---------- */
.rennen .kern { padding: clamp(28px, 4vw, 48px); }
.rennen-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.rennen-kopf h3 { font-size: 1.5rem; }
.rennen-kopf p { color: var(--tinte-2); margin-top: 8px; max-width: 52ch; }
.bahn { margin-top: 26px; }
.bahn-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.bahn-kopf .name { font-weight: 600; }
.bahn-kopf .zeit { font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--tinte-3); }
.bahn-nk .bahn-kopf .zeit { color: var(--blau); font-weight: 700; }
.bahn-spur {
  height: 14px;
  border-radius: 999px;
  background: var(--papier);
  border: 1px solid var(--haar-weich);
  overflow: hidden;
}
.bahn-fuellung {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--tinte-3);
}
.bahn-nk .bahn-fuellung { background: var(--blau); }
.rennen-fazit {
  margin-top: 30px;
  font-size: 0.95rem;
  color: var(--tinte-2);
}
.rennen-fazit strong { color: var(--blau); }

/* ---------- Vorgehen ---------- */
.vorgehen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 60px;
  counter-reset: schritt;
}
.schritt {
  counter-increment: schritt;
  background: var(--weiss);
  border: 1px solid var(--haar-weich);
  border-radius: var(--radius-kern);
  padding: 28px;
  box-shadow: var(--schatten-leicht);
}
.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--blau);
  display: block;
  margin-bottom: 20px;
}
.schritt h3 { font-size: 1.18rem; }
.schritt p { margin-top: 10px; color: var(--tinte-2); font-size: 0.96rem; }

/* ---------- Code-Fenster (Systems) ---------- */
.code-fenster { font-family: var(--mono); font-size: 0.8rem; line-height: 1.75; }
.code-fenster .geraet-leiste { background: var(--tinte); color: #8a93a6; border-color: rgba(255,255,255,0.09); }
.code-fenster .geraet-leiste::before { background: var(--blau-hell); }
.code-fenster pre {
  margin: 0;
  padding: 22px 24px;
  background: var(--tinte);
  color: #c9d1de;
  overflow-x: auto;
}
.code-fenster .km { color: #8a93a6; }   /* Kommentar */
.code-fenster .sw { color: var(--blau-hell); } /* Schlüsselwort */
.code-fenster .zk { color: #6ee7a0; }   /* Zeichenkette */

/* ---------- Fallstudie ---------- */
.fall-gitter {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  margin-top: 20px;
}
.fall-fakten { margin: 32px 0 0; padding: 0; list-style: none; }
.fall-fakten li {
  padding: 16px 0;
  border-top: 1px solid var(--haar);
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  font-size: 0.98rem;
}
.fall-fakten .schluessel { color: var(--tinte-3); font-family: var(--mono); font-size: 0.8rem; padding-top: 3px; }
.fall-fakten .wert { color: var(--tinte-2); }

/* ---------- Demo-Tabs (CRM-Werkzeug) ---------- */
.demo-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--haar);
  background: var(--papier);
  overflow-x: auto;
}
.demo-tabs button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--tinte-2);
  font-family: var(--schrift);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 13px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s var(--feder), border-color 0.3s var(--feder);
}
.demo-tabs button:hover { color: var(--tinte); }
.demo-tabs button.aktiv { color: var(--blau); border-bottom-color: var(--blau); }
.demo-ansicht[hidden] { display: none; }

/* Unterschrift-Kennzeichen in der Einsatz-Ansicht */
.signum {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--haar);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  font-family: var(--schrift);
  transition: all 0.3s var(--feder);
}
.signum.signiert { color: #047857; border-color: rgba(4, 120, 87, 0.3); background: rgba(4, 120, 87, 0.06); }
.signum.ausstehend { color: #b45309; border-color: rgba(180, 83, 9, 0.35); background: rgba(180, 83, 9, 0.06); }
.signum svg { flex: none; }

/* Sicherungs-Ansicht */
.sicherung-liste { list-style: none; margin: 0; padding: 0; }
.sicherung-liste li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--haar-weich);
  font-size: 0.9rem;
  color: var(--tinte-2);
}
.sicherung-liste .mono { font-size: 0.8rem; }
.sicherung-liste .umfang { color: var(--tinte-3); font-family: var(--mono); font-size: 0.76rem; }
.sicherung-status {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: #047857;
}
.sicherung-status.laeuft { color: var(--blau); }
.sicherung-fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--haar);
  background: var(--papier);
  flex-wrap: wrap;
}
.sicherung-fuss .hinweis { font-family: var(--mono); font-size: 0.74rem; color: var(--tinte-3); }
.sicherung-fuss .knopf { padding: 6px 8px 6px 16px; font-size: 0.85rem; }
.sicherung-fuss .knopf .kreis { width: 30px; height: 30px; }

/* ---------- Strecke: Vom Einsatz zur Abrechnung ---------- */
.strecke {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 60px;
}
.station {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--haar-weich);
  border-radius: var(--radius-kern);
  padding: 26px 22px;
  box-shadow: var(--schatten-leicht);
}
.station::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  background: var(--blau);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 1;
}
.station:last-child::after { display: none; }
.station .mono {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blau);
  display: block;
  margin-bottom: 14px;
}
.station h3 { font-size: 1.02rem; }
.station p { margin-top: 8px; color: var(--tinte-2); font-size: 0.88rem; line-height: 1.5; }

/* ---------- Vorher / Nachher ---------- */
.vergleich {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 60px;
}
.vergleich .kern { padding: 34px; height: 100%; }
.vergleich h3 { font-size: 1.3rem; }
.vergleich ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.vergleich li { display: flex; gap: 12px; align-items: baseline; font-size: 0.98rem; color: var(--tinte-2); }
.vergleich-vorher li::before {
  content: "";
  flex: none;
  width: 9px; height: 2px;
  background: var(--tinte-3);
  transform: translateY(-4px);
}
.vergleich-nachher .kern { background: var(--tinte); color: #eef1f6; }
.vergleich-nachher li { color: #c9d1de; }
.vergleich-nachher li::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  background: var(--blau-hell);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transform: translateY(-1px);
}
.vergleich-nachher .stempelzeile {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--blau-hell);
}

/* ---------- Rollen ---------- */
.rollen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 52px;
}
.rolle {
  background: var(--weiss);
  border: 1px solid var(--haar-weich);
  border-radius: var(--radius-kern);
  padding: 24px;
  box-shadow: var(--schatten-leicht);
}
.rolle .mono {
  font-size: 0.7rem;
  color: var(--blau);
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}
.rolle h3 { font-size: 1.05rem; }
.rolle p { margin-top: 8px; color: var(--tinte-2); font-size: 0.88rem; line-height: 1.5; }

/* ---------- Dokument-Karten ---------- */
.dokumente {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 52px;
}
.dokument {
  background: var(--weiss);
  border: 1px solid var(--haar-weich);
  border-radius: var(--radius-kern);
  padding: 24px;
  box-shadow: var(--schatten-leicht);
  transition: transform 0.55s var(--feder-schwung), border-color 0.4s var(--feder);
}
.dokument:hover { transform: translateY(-5px); border-color: rgba(47, 91, 255, 0.35); }
.dokument .ecke {
  width: 34px; height: 42px;
  border: 1.5px solid var(--blau);
  border-radius: 5px;
  position: relative;
  margin-bottom: 18px;
  background: var(--blau-tief);
}
.dokument .ecke::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 11px; height: 11px;
  background: var(--weiss);
  border-left: 1.5px solid var(--blau);
  border-bottom: 1.5px solid var(--blau);
  border-radius: 0 0 0 5px;
}
.dokument .ecke::after {
  content: "PDF";
  position: absolute;
  left: 50%; bottom: 5px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--blau);
}
.dokument h3 { font-size: 1.02rem; }
.dokument p { margin-top: 8px; color: var(--tinte-2); font-size: 0.87rem; line-height: 1.5; }

/* ---------- Branchen-Pills ---------- */
.branchen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.branchen span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--haar);
  background: var(--weiss);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tinte-2);
}
.branchen span::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--blau);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* ---------- Versprechen-Panel ---------- */
.versprechen .kern { padding: clamp(32px, 5vw, 56px); }
.versprechen h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: #fff; }
.versprechen-gitter {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.versprechen .merkmale { grid-template-columns: 1fr 1fr; margin-top: 30px; }
.versprechen .merkmale li { color: #c9d1de; }
.versprechen .merkmale li::before { background: var(--blau-hell); }
.versprechen-person {
  border-left: 2px solid var(--blau-hell);
  padding-left: 26px;
}
.versprechen-person p { color: #c9d1de; font-size: 1.02rem; }
.versprechen-person .mono {
  display: block;
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--blau-hell);
}

/* ---------- Pakete ---------- */
.pakete {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 60px;
  align-items: stretch;
}
.paket { display: flex; flex-direction: column; height: 100%; }
.paket .kern { padding: 34px 32px; height: 100%; display: flex; flex-direction: column; }
.paket-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.paket h3 { font-size: 1.35rem; }
.paket .abzeichen {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blau);
  border-radius: 999px;
  padding: 5px 12px;
  flex: none;
}
.paket .wofuer { margin-top: 10px; color: var(--tinte-2); font-size: 0.97rem; }
.paket .merkmale { grid-template-columns: 1fr; margin-top: 24px; gap: 12px; }
.paket-fuss {
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--haar);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--tinte-3);
  margin-top: auto;
}
.paket-fuss strong { color: var(--blau); font-weight: 700; }
.paket-empfohlen .schale { background: rgba(47, 91, 255, 0.10); border-color: rgba(47, 91, 255, 0.25); }
.pakete-hinweis { margin-top: 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pakete-hinweis p { color: var(--tinte-3); font-size: 0.94rem; }

/* Ablauf mit drei Schritten (Kontakt) */
.vorgehen-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Modul-Explorer (MediLeo) ---------- */
.explorer {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 26px;
  margin-top: 56px;
  align-items: start;
}
.explorer-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.explorer-liste button {
  text-align: left;
  background: var(--weiss);
  border: 1px solid var(--haar-weich);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--schrift);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--tinte-2);
  cursor: pointer;
  transition: all 0.35s var(--feder);
}
.explorer-liste button:hover { border-color: var(--blau); color: var(--tinte); }
.explorer-liste button.aktiv {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}
.explorer-tafel .kern { padding: 34px; min-height: 340px; }
.explorer-tafel .mono {
  font-size: 0.74rem;
  color: var(--blau);
  font-weight: 700;
  display: block;
  margin-bottom: 14px;
}
.explorer-tafel h3 { font-size: 1.5rem; }
.explorer-tafel p { margin-top: 12px; color: var(--tinte-2); }
.explorer-tafel .merkmale { grid-template-columns: 1fr; margin-top: 20px; gap: 11px; }
@media (max-width: 900px) {
  .explorer { grid-template-columns: 1fr; }
  .explorer-tafel .kern { min-height: 0; }
}
@media (max-width: 560px) {
  .explorer-liste { grid-template-columns: 1fr; }
}

/* ---------- Chat-Ansicht in der Demo ---------- */
.chat-verlauf {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  display: grid;
  gap: 10px;
  min-height: 240px;
  max-height: 300px;
  overflow-y: auto;
}
.chat-verlauf li {
  max-width: 78%;
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.chat-verlauf li small {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  opacity: 0.7;
  margin-bottom: 2px;
}
.chat-kraft {
  justify-self: end;
  background: var(--blau);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-standort {
  justify-self: start;
  background: var(--papier);
  border: 1px solid var(--haar);
  color: var(--tinte);
  border-bottom-left-radius: 4px;
}
.chat-eingabe {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--haar);
}
.chat-eingabe input {
  flex: 1;
  min-width: 0;
  background: var(--papier);
  border: 1px solid var(--haar);
  border-radius: 999px;
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 0.92rem;
  padding: 10px 16px;
}
.chat-eingabe input:focus { outline: none; border-color: var(--blau); }
.chat-eingabe .knopf { padding: 6px 8px 6px 16px; font-size: 0.85rem; }
.chat-eingabe .knopf .kreis { width: 30px; height: 30px; }

/* MediLeo-Wortmarke */
.medileo-marke .leo { color: var(--blau); }

/* ---------- MediLeo-Thema: die Unterseite trägt die Produktmarke ----------
   Farben aus crm-system/DESIGN.md: Nachtblau #0A2A6E (Struktur),
   Puls-Blau #1F5FD1 (Handlung), Mähne FFB547→E5572B (Achtung). */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
.medileo-thema {
  --papier: #F3F5F9;
  --weiss: #FFFFFF;
  --tinte: #0A2A6E;
  --tinte-2: #3D4C77;
  --tinte-3: #71809F;
  --blau: #1F5FD1;
  --blau-dunkel: #16469E;
  --blau-hell: #7DA1E8;
  --blau-tief: rgba(31, 95, 209, 0.09);
  --haar: rgba(10, 42, 110, 0.12);
  --haar-weich: rgba(10, 42, 110, 0.08);
  --maehne: linear-gradient(135deg, #FFB547, #E5572B);
  --schrift: "Plus Jakarta Sans", "Space Grotesk", system-ui, sans-serif;
  font-family: var(--schrift);
}
.medileo-thema .kern-dunkel, .medileo-thema .demo-kopf { background: #0A2A6E; }
.medileo-thema .plakette::before,
.medileo-thema .merkmale li::before { background: var(--maehne); }
.medileo-thema .zahl-karte { border-left-color: transparent; border-image: var(--maehne) 1; border-left-width: 3px; border-left-style: solid; }
.medileo-thema .fusszeile { background: #081F52; }
.medileo-thema .schlussblock {
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(255, 181, 71, 0.25), transparent 60%),
    radial-gradient(60% 80% at 90% 100%, rgba(8, 31, 82, 0.5), transparent 65%),
    #1F5FD1;
}
.medileo-kopf-logo { height: 52px; width: auto; margin-bottom: 26px; display: block; }

/* ---------- MediLeo Kino-Held: Nachtblau, Mähnen-Kante, großes Produktbild ---------- */
.ml-held {
  position: relative;
  padding: 168px 0 0;
  background:
    radial-gradient(55% 45% at 82% 0%, rgba(255, 181, 71, 0.16), transparent 65%),
    radial-gradient(60% 50% at 8% 100%, rgba(31, 95, 209, 0.5), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    #0A2A6E;
  background-size: auto, auto, 72px 72px, 72px 72px, auto;
  color: #fff;
}
.ml-held::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--maehne);
}
.ml-held-logo { height: 46px; width: auto; margin-bottom: 30px; }
.ml-held h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  letter-spacing: -0.035em;
  max-width: 15ch;
  color: #fff;
}
.ml-held h1 .maehne-wort {
  background: var(--maehne);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ml-held .unterzeile { color: #C3D0EC; max-width: 52ch; }
.ml-held .kopf-aktionen { margin-top: 38px; }
.ml-held .knopf-leise { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.ml-held .knopf-leise:hover { border-color: #FFB547; color: #FFB547; background: rgba(255, 181, 71, 0.08); }

/* Das große Produktbild: schräg im Raum, ragt in den nächsten Abschnitt */
.ml-held-bild {
  margin-top: 64px;
  perspective: 1600px;
}
.ml-held-bild .schale {
  transform: rotateX(9deg) scale(0.99);
  transform-origin: center top;
  transition: transform 1s var(--feder);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 60px 120px -40px rgba(4, 14, 40, 0.9);
}
.ml-held-bild:hover .schale { transform: rotateX(2deg) scale(1); }
.ml-held-bild img { width: 100%; display: block; }
.ml-held-bild .schaufenster { margin-top: 0; }
.ml-held-bild { margin-bottom: clamp(-160px, -10vw, -80px); position: relative; z-index: 2; }
.ml-nach-held { padding-top: clamp(150px, 16vw, 230px); }




/* Schwebende Chips am Produktbild (gleiche Bauart wie in der Komposition) */
.ml-chips { position: relative; }
.ml-chips .chip {
  position: absolute;
  left: -22px;
  top: -26px;
  z-index: 3;
  background: var(--weiss);
  border: 1px solid var(--haar);
  border-radius: 16px;
  box-shadow: var(--schatten-schwebend);
  padding: 14px 20px;
  transform: rotate(-3deg);
}
.ml-chips .chip .mono { font-size: 1.3rem; font-weight: 700; color: var(--blau); }
.ml-chips .chip p { font-size: 0.78rem; color: var(--tinte-3); margin-top: 2px; }
.ml-chips .chip-rechts {
  left: auto;
  right: -18px;
  transform: rotate(2.5deg);
}
@media (prefers-reduced-motion: no-preference) {
  .ml-chips .chip { animation: schweben 7s ease-in-out infinite; }
}
@media (max-width: 900px) {
  .ml-chips .chip { left: -6px; }
  .ml-chips .chip-rechts { left: auto; right: 4px; }
}

/* ---------- Feature-Kapitel: große Bilder, die verkaufen ---------- */
.kapitel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  padding: clamp(48px, 6vw, 84px) 0;
}
.kapitel > * { min-width: 0; }
.kapitel + .kapitel { border-top: 1px solid var(--haar-weich); }
.kapitel-tausch .kapitel-text { order: 2; }
.kapitel-tausch .kapitel-bild { order: 1; }
.kapitel .mono {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--blau);
  display: block;
  margin-bottom: 16px;
}
.kapitel h3 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -0.03em; }
.kapitel .kapitel-text > p { margin-top: 14px; color: var(--tinte-2); font-size: 1.05rem; }
.kapitel .merkmale { grid-template-columns: 1fr; margin-top: 22px; gap: 12px; }
.kapitel-bild img { width: 100%; display: block; }
.kapitel-breit { display: block; }
.kapitel-breit .kapitel-text { max-width: 640px; margin-bottom: 40px; }
.kapitel-breit .kapitel-bild { order: 0; }
@media (max-width: 900px) {
  .kapitel { grid-template-columns: 1fr; gap: 28px; }
  .kapitel-tausch .kapitel-text { order: 1; }
  .kapitel-tausch .kapitel-bild { order: 2; }
}

/* ---------- NK-Show: derselbe Kino-Aufbau wie MediLeo, in NK-Farben ---------- */
.nk-show { --maehne: linear-gradient(135deg, #9db2ff, #2f5bff); }
.nk-show .ml-held {
  background:
    radial-gradient(55% 45% at 82% 0%, rgba(47, 91, 255, 0.22), transparent 65%),
    radial-gradient(60% 50% at 8% 100%, rgba(47, 91, 255, 0.28), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #0d1117;
  background-size: auto, auto, 72px 72px, 72px 72px, auto;
}
.nk-show .ml-held .unterzeile { color: #b4bccb; }
.nk-show .ml-held .knopf-leise:hover { border-color: #9db2ff; color: #9db2ff; background: rgba(47, 91, 255, 0.12); }

.nk-show .schaufenster .dia figcaption { background: rgba(13, 17, 23, 0.92); }
.nk-show .schaufenster .dia figcaption .mono { color: #9db2ff; }
.kapitel-text .knopf { margin-top: 26px; }

/* ---------- Software-Verteiler: drei Kästen ---------- */
.sparten-3 { grid-template-columns: repeat(3, 1fr); }
.sparte-vorschau {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--haar);
  position: relative;
}
.sparte-vorschau img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--feder); }
.sparte:hover .sparte-vorschau img { transform: scale(1.04); }
.sparte-vorschau-medileo { background: #0A2A6E; }
.sparte-vorschau-dv {
  background: radial-gradient(70% 90% at 50% 110%, rgba(34, 211, 238, 0.35), transparent 60%), #0B1B2E;
  display: flex; justify-content: center; gap: 14px; padding: 22px 16px 0;
}
.sparte-vorschau-dv img {
  width: 34%; height: auto; object-fit: initial;
  border-radius: 16px 16px 0 0;
  border: 4px solid #1c2f47; border-bottom: none;
  align-self: flex-end;
}
.sparte-vorschau-dv img:nth-child(2) { width: 38%; }
.sparte-logo {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 #fff;
  transition: transform 0.6s var(--feder-schwung);
}
.sparte:hover .sparte-logo { transform: translateY(-3px); }
.sparte .sparte-vorschau .sparte-logo img {
  width: auto; height: 36px; object-fit: contain;
  border: 0; border-radius: 0; transform: none; align-self: center;
}
.sparte .sparte-vorschau .sparte-logo-dv img { height: 24px; }
.sparte-logo-dv > span {
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em;
  color: #292420; white-space: nowrap;
}
.sparte-logo-dv > span span { color: #0E7490; }
.marke-leo { color: #E5572B; }
.marke-vision { color: #0E7490; }
.sparte .etikett {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--tinte-3);
  margin-bottom: 8px;
}
.sparte-system .etikett { color: #8a93a6; }
@media (max-width: 1080px) { .sparten-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .sparten-3 { grid-template-columns: 1fr; } }

/* ---------- Handy-Rahmen für App-Bildschirme ---------- */
.telefon-rahmen {
  border-radius: 38px;
  border: 9px solid #111827;
  background: #111827;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(4, 12, 30, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.telefon-rahmen img { display: block; width: 100%; border-radius: 29px; }
.kapitel-telefon { display: flex; justify-content: center; }
.kapitel-telefon .telefon-rahmen { width: min(300px, 78vw); }
.kapitel-telefon.doppelt { gap: 22px; }
.kapitel-telefon.doppelt .telefon-rahmen { width: min(250px, 42vw); }
.kapitel-telefon.doppelt .telefon-rahmen:nth-child(2) { margin-top: 60px; }

/* ---------- DriverVision-Thema ---------- */
.dv-thema {
  --papier: #FAF6F0;
  --weiss: #FFFFFF;
  --tinte: #1F1B18;
  --tinte-2: #5B5248;
  --tinte-3: #8A7F72;
  --blau: #0E7490;
  --blau-dunkel: #0B5C72;
  --blau-hell: #5ED3EA;
  --blau-tief: rgba(14, 116, 144, 0.10);
  --haar: rgba(41, 36, 32, 0.12);
  --haar-weich: rgba(41, 36, 32, 0.07);
  --maehne: linear-gradient(135deg, #5ED3EA, #0E7490);
}
.dv-thema .ml-held {
  background:
    radial-gradient(50% 55% at 50% 100%, rgba(34, 211, 238, 0.28), transparent 70%),
    radial-gradient(45% 45% at 90% 0%, rgba(14, 116, 144, 0.35), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #0B1B2E;
  background-size: auto, auto, 72px 72px, 72px 72px, auto;
  text-align: center;
  overflow-x: clip;
}
.dv-thema .ml-held h1, .dv-thema .ml-held .unterzeile { margin-left: auto; margin-right: auto; }
.dv-thema .ml-held .kopf-aktionen { justify-content: center; }
.dv-thema .ml-held .unterzeile { color: #B7C4D4; }
.dv-thema .ml-held .knopf-leise:hover { border-color: #5ED3EA; color: #5ED3EA; background: rgba(94, 211, 234, 0.1); }
.dv-thema .kern-dunkel, .dv-thema .fusszeile { background: #0B1B2E; }
.dv-thema .schlussblock {
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(94, 211, 234, 0.3), transparent 60%),
    radial-gradient(60% 80% at 90% 100%, rgba(11, 27, 46, 0.5), transparent 65%),
    #0E7490;
}
.dv-wortmarke {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff;
  margin: 0 0 26px;
}
.dv-wortmarke img { width: clamp(84px, 9vw, 110px); height: auto; }
.dv-wortmarke span span { color: #5ED3EA; }

/* Drei Handys, gefächert */
.handy-faecher {
  position: relative;
  height: clamp(420px, 52vw, 640px);
  margin: 60px auto clamp(-150px, -9vw, -70px);
  max-width: 900px;
  z-index: 2;
}
.handy-faecher .telefon-rahmen {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(170px, 22vw, 280px);
  transform-origin: 50% 100%;
  transition: transform 0.9s var(--feder-schwung);
}
.handy-faecher .h-links { transform: translateX(-140%) translateY(60px) rotate(-9deg); }
.handy-faecher .h-mitte { transform: translateX(-50%); z-index: 2; }
.handy-faecher .h-rechts { transform: translateX(40%) translateY(60px) rotate(9deg); }
.handy-faecher:hover .h-links { transform: translateX(-155%) translateY(40px) rotate(-12deg); }
.handy-faecher:hover .h-rechts { transform: translateX(55%) translateY(40px) rotate(12deg); }
@media (max-width: 700px) {
  .handy-faecher .h-links { transform: translateX(-112%) translateY(50px) rotate(-8deg); }
  .handy-faecher .h-rechts { transform: translateX(12%) translateY(50px) rotate(8deg); }
}

/* Rollen-Umschalter */
.rollen-schalter {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin-top: 44px;
  background: var(--weiss);
  border: 1px solid var(--haar);
  border-radius: 999px;
  flex-wrap: wrap;
}
.rollen-schalter button {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 11px 22px;
  font-family: var(--schrift);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tinte-2);
  cursor: pointer;
  transition: background 0.35s var(--feder), color 0.35s var(--feder);
}
.rollen-schalter button:hover { color: var(--tinte); }
.rollen-schalter button.aktiv { background: var(--blau); color: #fff; }
.rollen-schalter button:active { transform: scale(0.96); transition-duration: 0.08s; }
.rolle-tafel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: 40px;
}
.rolle-tafel[hidden] { display: none; }
.rolle-tafel .mono { font-size: 0.74rem; font-weight: 700; color: var(--blau); display: block; margin-bottom: 14px; }
.rolle-tafel h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.03em; }
.rolle-tafel > div > p { margin-top: 14px; color: var(--tinte-2); font-size: 1.05rem; max-width: 52ch; }
.rolle-tafel .merkmale { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
.rolle-tafel .kapitel-telefon { justify-content: flex-end; }
@media (max-width: 900px) {
  .rolle-tafel { grid-template-columns: 1fr; }
  .rolle-tafel .kapitel-telefon { justify-content: center; }
}

/* ---------- Werkstatt-Terminal (Individualsoftware) ---------- */
.werkstatt {
  max-width: 880px;
  margin: 60px auto clamp(-150px, -9vw, -70px);
  position: relative;
  z-index: 2;
  text-align: left;
}
.werkstatt .kern { background: #0d1117; }
.werkstatt .geraet-leiste { background: #111723; color: #8a93a6; border-color: rgba(255, 255, 255, 0.08); justify-content: center; }
.werkstatt pre {
  margin: 0;
  padding: 24px 26px 28px;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.4vw, 0.9rem);
  line-height: 1.9;
  color: #c9d1de;
  white-space: pre-wrap;
  min-height: 330px;
}
.werkstatt .z { display: block; }
.werkstatt .ok { color: #6ee7a0; }
.werkstatt .hinw { color: #8a93a6; }
.werkstatt .blau-hell { color: #9db2ff; }
.werkstatt .fett { color: #fff; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  html.js .werkstatt .z {
    opacity: 0;
    animation: zeile-rein 0.35s var(--feder) forwards;
    animation-delay: calc(var(--n) * 0.32s + 0.6s);
  }
}
@keyframes zeile-rein { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* Weiterleitungs-Block zur Demo-Buchung auf medileo.de */
.demo-weiter .mono { font-size: 0.74rem; font-weight: 700; color: var(--blau); display: block; margin-bottom: 14px; }
.demo-weiter h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.025em; }
.demo-weiter p { margin: 14px 0 28px; color: var(--tinte-2); }

/* MediLeo-Laufband: Module ziehen vorbei */
.medileo-thema .laufband { background: var(--weiss); }
.medileo-thema .laufband-teil span { color: var(--tinte); font-size: 1.2rem; }

/* ---------- Schaufenster: animierter Rundgang aus echten Bildschirmfotos ---------- */
.schaufenster { margin-top: 56px; }
.schaufenster .kern { position: relative; aspect-ratio: 16 / 10.4; }
.schaufenster .dia {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}
.schaufenster .dia img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top left;
}
.schaufenster .dia figcaption {
  position: absolute;
  left: 16px; bottom: 16px;
  background: rgba(10, 42, 110, 0.92);
  color: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.88rem;
  font-weight: 600;
}
.schaufenster .dia figcaption .mono {
  color: #FFB547;
  font-size: 0.72rem;
  margin-right: 10px;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .schaufenster .dia {
    animation: dia-lauf 25s infinite;
    animation-delay: var(--dia, 0s);
  }
  html.js .schaufenster .dia img {
    animation: dia-zoom 25s infinite;
    animation-delay: var(--dia, 0s);
  }
}
/* Ohne Bewegung oder ohne JavaScript zeigt das Fenster das erste Bild. */
.schaufenster .dia:first-child { opacity: 1; }
@keyframes dia-lauf {
  0% { opacity: 0; z-index: 2; }
  2.5% { opacity: 1; }
  20% { opacity: 1; }
  24% { opacity: 0; z-index: 1; }
  100% { opacity: 0; }
}
@keyframes dia-zoom {
  0% { transform: scale(1); }
  24% { transform: scale(1.045); }
  100% { transform: scale(1.045); }
}
.schaufenster-punkte {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
.schaufenster-punkte span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--haar);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .schaufenster-punkte span {
    animation: punkt-lauf 25s infinite;
    animation-delay: var(--dia, 0s);
  }
}
@keyframes punkt-lauf {
  0%, 2.5% { background: var(--blau); }
  20% { background: var(--blau); }
  24%, 100% { background: rgba(10, 42, 110, 0.15); }
}

/* ---------- Ausklapp-Fragen ---------- */
.fragen { margin-top: 54px; }
.fragen details {
  background: var(--weiss);
  border: 1px solid var(--haar-weich);
  border-radius: var(--radius-kern);
  margin-bottom: 14px;
  box-shadow: var(--schatten-leicht);
  overflow: hidden;
}
.fragen summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.3s var(--feder);
}
.fragen summary:hover { color: var(--blau); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.35rem;
  color: var(--blau);
  transition: transform 0.5s var(--feder);
  flex: none;
}
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen .antwort { padding: 0 28px 28px; color: var(--tinte-2); max-width: 70ch; }

/* ---------- CRM-Demo ---------- */
.demo-schale .kern { font-size: 0.92rem; }
.demo-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--tinte);
  color: #eef1f6;
}
.demo-kopf .titel { font-weight: 600; font-size: 0.98rem; }
.demo-kopf .hinweis { font-family: var(--mono); font-size: 0.7rem; color: #8a93a6; text-align: right; }
.demo-werkzeuge {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--haar);
  flex-wrap: wrap;
}
.demo-werkzeuge input[type="search"] {
  flex: 1;
  min-width: 150px;
  background: var(--papier);
  border: 1px solid var(--haar);
  border-radius: var(--radius-eingabe);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 0.92rem;
  padding: 10px 14px;
  transition: border-color 0.3s var(--feder);
}
.demo-werkzeuge input:focus { outline: none; border-color: var(--blau); }
.demo-werkzeuge input::placeholder { color: var(--tinte-3); }
.demo-filter { display: flex; gap: 6px; }
.demo-filter button {
  background: transparent;
  border: 1px solid var(--haar);
  border-radius: 999px;
  color: var(--tinte-2);
  font-family: var(--schrift);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 8px 15px;
  cursor: pointer;
  transition: all 0.4s var(--feder);
}
.demo-filter button:hover { border-color: var(--blau); color: var(--blau); }
.demo-filter button.aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }
.demo-tabelle { width: 100%; border-collapse: collapse; }
.demo-tabelle th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--tinte-3);
  padding: 12px 20px;
  border-bottom: 1px solid var(--haar);
}
.demo-tabelle td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--haar-weich);
  color: var(--tinte-2);
  white-space: nowrap;
}
.demo-tabelle td:first-child { color: var(--tinte); font-weight: 500; white-space: normal; }
.demo-tabelle tr:last-child td { border-bottom: none; }
.demo-tabelle .betrag { font-family: var(--mono); font-size: 0.86rem; text-align: right; font-variant-numeric: tabular-nums; }
.status {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--haar);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  font-family: var(--schrift);
  transition: all 0.3s var(--feder);
}
.status.offen { color: #b45309; border-color: rgba(180, 83, 9, 0.35); background: rgba(180, 83, 9, 0.06); }
.status.bezahlt { color: #047857; border-color: rgba(4, 120, 87, 0.3); background: rgba(4, 120, 87, 0.06); }
.demo-fuss {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--tinte-3);
  border-top: 1px solid var(--haar);
  background: var(--papier);
}
.demo-fuss strong { color: var(--blau); font-weight: 700; }
.demo-leer { padding: 36px 20px; text-align: center; color: var(--tinte-3); font-size: 0.92rem; white-space: normal; }

/* ---------- Merkmalliste ---------- */
.merkmale {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 30px;
}
.merkmale li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--tinte-2);
  font-size: 0.98rem;
}
.merkmale li::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  background: var(--blau);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transform: translateY(-1px);
}

/* ---------- Bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 26px;
  margin-top: 60px;
}
.kachel-2 { grid-column: span 2; }
.kachel-3 { grid-column: span 3; }
.kachel-4 { grid-column: span 4; }
.kachel-6 { grid-column: span 6; }
.bento .kern { padding: 32px; height: 100%; }
.bento .kern.kein-polster { padding: 0; }
.bento h3 { font-size: 1.28rem; }
.bento .kern > p { margin-top: 12px; color: var(--tinte-2); }
.bento .kern-dunkel > p { color: #a6aebe; }
.bento .gross {
  font-family: var(--mono);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 700;
  color: var(--blau);
  letter-spacing: -0.02em;
  margin-top: 10px;
}
.bento .kachel-bild img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  object-position: top;
}
.bento .kachel-bild .bento-text { padding: 26px 32px 30px; }

/* ---------- Blauer Schlussblock ---------- */
.schlussblock {
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(60% 80% at 90% 100%, rgba(13, 17, 23, 0.25), transparent 65%),
    var(--blau);
  color: #fff;
  border-radius: 36px;
  margin: 0 16px;
  overflow: clip;
  position: relative;
  z-index: 2;
}
@media (min-width: 1300px) {
  .schlussblock { margin: 0 auto; max-width: 1440px; }
}
.schlussblock .huelle { padding-top: 110px; padding-bottom: 110px; position: relative; }
.schlussblock h2 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  max-width: 17ch;
  letter-spacing: -0.035em;
}
.schlussblock .unterzeile { color: rgba(255, 255, 255, 0.85); }
.schlussblock-aktionen { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.schlussblock .mail-hinweis { margin-top: 26px; color: rgba(255, 255, 255, 0.75); font-size: 0.96rem; }
.schlussblock .mail-hinweis a { color: #fff; overflow-wrap: anywhere; }
.schlussblock .glyphe {
  position: absolute;
  right: -40px;
  bottom: -70px;
  opacity: 0.16;
  pointer-events: none;
}

/* ---------- Fußzeile ---------- */
.fusszeile {
  background: var(--tinte);
  color: #c9d1de;
  margin-top: -70px;
  padding: 170px 0 42px;
}
.fusszeile-gitter {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 44px;
}
.fusszeile h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 18px;
  letter-spacing: 0.08em;
}
.fusszeile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fusszeile a { color: #c9d1de; text-decoration: none; font-size: 0.98rem; transition: color 0.3s var(--feder); }
.fusszeile a:hover { color: #fff; }
.fusszeile-marke .marke { color: #fff; }
.fusszeile-marke .marke .wortmarke small { color: #6e7787; }
.fusszeile-marke p { margin-top: 16px; color: #8a93a6; font-size: 0.96rem; max-width: 34ch; }
.fusszeile-riese {
  margin-top: 90px;
  font-weight: 700;
  font-size: clamp(6rem, 22vw, 21rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  user-select: none;
  pointer-events: none;
  text-align: center;
  overflow: hidden;
}
.fusszeile-unten {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: #6e7787;
  font-family: var(--mono);
  font-size: 0.78rem;
}

/* ---------- Unterseiten-Kopf ---------- */
.kopf {
  padding: 185px 0 90px;
  position: relative;
  overflow: clip;
  background:
    radial-gradient(50% 44% at 85% 0%, rgba(47, 91, 255, 0.09), transparent 70%),
    linear-gradient(var(--haar-weich) 1px, transparent 1px),
    linear-gradient(90deg, var(--haar-weich) 1px, transparent 1px),
    var(--papier);
  background-size: auto, 72px 72px, 72px 72px, auto;
}
.kopf-gitter {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.kopf h1 {
  font-size: clamp(2.5rem, 5vw, 4.1rem);
  max-width: 15ch;
  letter-spacing: -0.035em;
}
.kopf h1 .blau { color: var(--blau); }
.kopf .unterzeile { font-size: 1.14rem; }
.kopf-aktionen { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Kontakt ---------- */
.kontakt-gitter {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.formular-schale .kern { padding: clamp(28px, 4vw, 44px); }
.formular { display: grid; gap: 24px; }
.feld { display: grid; gap: 8px; }
.feld label { font-weight: 600; font-size: 0.97rem; }
.feld .hilfe { color: var(--tinte-3); font-size: 0.86rem; }
.feld input, .feld textarea, .feld select {
  background: var(--papier);
  border: 1px solid var(--haar);
  border-radius: var(--radius-eingabe);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1rem;
  padding: 14px 16px;
  width: 100%;
  transition: border-color 0.3s var(--feder), box-shadow 0.3s var(--feder);
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none;
  border-color: var(--blau);
  box-shadow: 0 0 0 4px var(--blau-tief);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--tinte-3); }
.feld textarea { resize: vertical; min-height: 150px; }
.feld .fehler { display: none; color: #b3261e; font-size: 0.86rem; }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: #b3261e; }
.feld.ungueltig .fehler { display: block; }

.kontakt-karte .kern { padding: 36px; }
.kontakt-karte h2 { font-size: 1.35rem; }
.kontakt-karte dl { margin: 26px 0 0; display: grid; gap: 20px; }
.kontakt-karte dt { font-family: var(--mono); font-size: 0.76rem; color: var(--tinte-3); }
.kontakt-karte dd { margin: 4px 0 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.kontakt-karte dd a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--haar); }
.kontakt-karte dd a:hover { border-color: var(--blau); color: var(--blau); }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 76ch; }
.rechtstext h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 34px; }
.rechtstext h2 { font-size: 1.3rem; margin: 42px 0 12px; }
.rechtstext p, .rechtstext li { color: var(--tinte-2); }
.platzhalter {
  display: inline-block;
  background: var(--blau-tief);
  color: var(--blau);
  border-radius: 6px;
  padding: 1px 8px;
  font-family: var(--mono);
  font-size: 0.86em;
}

/* ---------- Logo-Intro „Der K-Schnitt“ (nur Startseite, einmal je Sitzung) ---------- */
.intro-schicht { display: none; }
html.intro:not(.intro-ende) .intro-schicht {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 400;
  overflow: hidden;
}
.intro-grund { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.intro-klon { position: absolute; top: 0; left: 0; margin: 0; transform-origin: 0 0; visibility: hidden; }
.intro-klon.zeigt { visibility: visible; }
svg.intro-klon { overflow: visible; shape-rendering: geometricPrecision; }
.intro-klon.intro-wort {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--tinte-3);
}
@media (max-width: 560px) { .intro-klon.intro-wort { font-size: 0.66rem; } }

/* Während des Intros: echtes Nav-Logo verstecken, bis die Kopie gelandet ist */
html.intro:not(.intro-gelandet):not(.intro-ende) .navigation .marke svg,
html.intro:not(.intro-gelandet):not(.intro-ende) .navigation .marke .wortmarke small { visibility: hidden; }
/* Der Seiten-Einstieg würde den schwarzen Grund mit einblenden */
html.js.intro body { animation: none; }

/* Bühne wartet, bis der K-Schnitt sie freigibt, dann läuft sie gestaffelt ein */
@media (prefers-reduced-motion: no-preference) {
  html.intro .buehne-gitter > div:first-child > * { transition: opacity 0.9s var(--feder), transform 0.9s var(--feder); }
  html.intro .buehne-gitter > div:first-child > :nth-child(2) { transition-delay: 0.07s; }
  html.intro .buehne-gitter > div:first-child > :nth-child(3) { transition-delay: 0.14s; }
  html.intro .buehne-gitter > div:first-child > :nth-child(4) { transition-delay: 0.21s; }
  html.intro:not(.intro-frei) .buehne-gitter > div:first-child > * { transform: translateY(28px); }
  html.intro:not(.intro-frei) .buehne .einblenden { transform: translateY(34px); }
}

/* ---------- Scroll-Fortschritt ---------- */
.fortschritt {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blau);
  transform-origin: 0 50%;
  scale: 0 1;
  z-index: 210;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .fortschritt { animation: fortschritt-wachsen linear both; animation-timeline: scroll(); }
  }
}
@keyframes fortschritt-wachsen { from { scale: 0 1; } to { scale: 1 1; } }

/* ---------- Korn (feine Papier-Textur) ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 205;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ---------- Seiten-Übergänge ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js body { animation: seite-herein 0.5s var(--feder); }
  html.js body.verlaesst {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.22s var(--feder), transform 0.22s var(--feder);
  }
}
@keyframes seite-herein {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Wort-Enthüllung für Überschriften ---------- */
.wort-huelle { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
@media (prefers-reduced-motion: no-preference) {
  html.js .wort {
    display: inline-block;
    transform: translateY(112%);
    transition: transform 0.85s var(--feder);
    transition-delay: var(--wv, 0s);
  }
  html.js .zeigt .wort { transform: none; }
}

/* ---------- Cursor-Glut in der Bühne ---------- */
.glut {
  position: absolute;
  top: 0; left: 0;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 91, 255, 0.14), transparent 62%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--feder);
  will-change: transform;
}
.buehne:hover .glut, .kopf:hover .glut { opacity: 1; }

/* ---------- Projektliste mit schwebender Vorschau ---------- */
.projektliste { margin-top: 56px; border-top: 1px solid var(--haar); }
.projekt-zeile {
  display: grid;
  grid-template-columns: 64px 1fr auto 46px;
  align-items: center;
  gap: 10px 24px;
  padding: 30px 6px;
  border-bottom: 1px solid var(--haar);
  text-decoration: none;
  color: inherit;
}
.projekt-zeile .nr { font-family: var(--mono); font-size: 0.85rem; color: var(--tinte-3); }
.projekt-zeile h3 {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  letter-spacing: -0.025em;
  min-width: 0;
  overflow-wrap: break-word;
  transition: color 0.35s var(--feder), transform 0.45s var(--feder);
}
.projekt-zeile .branche { color: var(--tinte-3); font-size: 0.95rem; white-space: nowrap; }
.projekt-zeile .kreis {
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid var(--haar);
  color: var(--tinte-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s var(--feder), color 0.4s var(--feder), transform 0.55s var(--feder-schwung), border-color 0.4s var(--feder);
}
.projekt-zeile:hover h3 { color: var(--blau); transform: translateX(12px); }
.projekt-zeile h3 { transition-timing-function: var(--feder), var(--feder-schwung); }
a.projekt-zeile:hover .kreis { background: var(--blau); border-color: var(--blau); color: #fff; transform: rotate(45deg); }

.projekt-vorschau {
  position: fixed;
  top: 0; left: 0;
  z-index: 95;
  width: min(360px, 30vw);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--schatten-schwebend);
  border: 1px solid var(--haar);
  pointer-events: none;
  opacity: 0;
  scale: 0.8;
  rotate: -4deg;
  filter: blur(10px);
  transform-origin: left top;
  transition: opacity 0.35s var(--feder), scale 0.45s var(--feder-schwung), rotate 0.45s var(--feder-schwung), filter 0.35s var(--feder);
  will-change: transform;
}
.projekt-vorschau.zeigt { opacity: 1; scale: 1; rotate: 2.5deg; filter: blur(0); }
.projekt-vorschau img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

@media (max-width: 760px) {
  .projekt-zeile { grid-template-columns: 1fr 42px; padding: 22px 2px; }
  .projekt-zeile .nr { display: none; }
  .projekt-zeile h3 { grid-column: 1; }
  .projekt-zeile .branche { grid-column: 1; white-space: normal; font-size: 0.85rem; }
  .projekt-zeile .kreis { grid-column: 2; grid-row: 1 / span 2; width: 42px; height: 42px; }
  .projekt-vorschau { display: none; }
}

/* ---------- Laufband: anhalten beim Zeigen ---------- */
.laufband:hover .laufband-spur { animation-play-state: paused; }

/* Riesen-NK schiebt sich beim Scrollen hoch */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fusszeile-riese {
      animation: riese-hoch linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes riese-hoch {
  from { transform: translateY(45%); }
  to { transform: none; }
}

/* ---------- Einblendungen ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .einblenden {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
    transition: opacity 0.9s var(--feder), transform 0.9s var(--feder), filter 0.9s var(--feder);
    transition-delay: var(--verzug, 0s);
  }
  html.js .einblenden.sichtbar { opacity: 1; transform: none; filter: none; }
}

/* Neigbare Karten (Zeiger-Physik, nur transform) */
.neigbar { transform-style: preserve-3d; will-change: transform; }

/* ---------- Sofortiges Drück-Feedback für kleine Bedienelemente ---------- */
.demo-filter button:active,
.demo-tabs button:active,
.status:active,
.signum:active,
.menue-knopf:active,
.projekt-zeile:active h3 {
  transform: scale(0.95);
  transition-duration: 0.08s;
}

/* Nie zwei helle Glas-Schichten stapeln: Ist das Menü offen, wird die Pille fest. */
body:has(.mobil-menue.offen) .navigation-innen {
  background: #ffffff;
}

/* ---------- Weniger Transparenz gewünscht: Material wird frostig-fest ---------- */
@media (prefers-reduced-transparency: reduce) {
  .navigation-innen {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .mobil-menue {
    background: var(--papier);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Mehr Kontrast gewünscht: klare Kanten statt Hauchlinien ---------- */
@media (prefers-contrast: more) {
  :root {
    --haar: rgba(13, 17, 23, 0.4);
    --haar-weich: rgba(13, 17, 23, 0.32);
    --tinte-2: #29303e;
    --tinte-3: #444c5c;
  }
  .navigation-innen { background: #ffffff; }
  .knopf-leise { border-width: 2px; }
}

/* ---------- Anpassung ---------- */
@media (max-width: 1080px) {
  .galerie-gross, .galerie-klein { grid-column: span 12; }
  .kachel-2 { grid-column: span 3; }
}

@media (max-width: 760px) {
  .galerie-halb { grid-column: span 12; }
}

@media (max-width: 900px) {
  .abschnitt { padding: 90px 0; }
  .nav-links { display: none; }
  .menue-knopf { display: inline-flex; }

  .strecke { grid-template-columns: 1fr; gap: 18px; }
  .station::after {
    right: auto;
    top: auto;
    left: 30px;
    bottom: -15px;
    transform: rotate(90deg);
  }
  .vergleich { grid-template-columns: 1fr; }
  .rollen, .dokumente { grid-template-columns: 1fr 1fr; }
  .versprechen-gitter { grid-template-columns: 1fr; }
  .versprechen .merkmale { grid-template-columns: 1fr; }
  .pakete { grid-template-columns: 1fr; }
  .vorgehen-3 { grid-template-columns: 1fr; }

  .buehne { padding-top: 150px; }
  .buehne-gitter, .kopf-gitter, .fall-gitter, .kontakt-gitter { grid-template-columns: 1fr; }
  .buehne-gitter > *, .kopf-gitter > *, .fall-gitter > *, .kontakt-gitter > * { min-width: 0; }
  .komposition { margin-top: 26px; }
  .komposition .chip { left: -6px; }

  .sparten { grid-template-columns: 1fr; }
  .zahlen { grid-template-columns: 1fr 1fr; gap: 34px 26px; }
  .vorgehen { grid-template-columns: 1fr 1fr; }
  .kachel-2, .kachel-3, .kachel-4 { grid-column: span 6; }
  .merkmale { grid-template-columns: 1fr; }
  .fusszeile-gitter { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .huelle { padding-left: 18px; padding-right: 18px; }
  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
  .knopf { padding: 8px 8px 8px 18px; font-size: 0.92rem; gap: 9px; }
  .knopf-leise { padding: 12px 18px; }
  .knopf .kreis { width: 34px; height: 34px; }
  .marke .wortmarke small { font-size: 0.66rem; }
  .zahlen, .vorgehen { grid-template-columns: 1fr; }
  .demo-tabelle .spalte-eng { display: none; }
  .demo-tabelle { display: block; overflow-x: auto; }
  .demo-tabelle td, .demo-tabelle th { padding: 12px 12px; }
  .fall-fakten li { grid-template-columns: 1fr; gap: 4px; }
  .rollen, .dokumente { grid-template-columns: 1fr; }
  .sicherung-liste li { grid-template-columns: 1fr auto; }
  .sicherung-liste .umfang { display: none; }
  .fall-fakten .wert { overflow-wrap: break-word; }
  .kopf { padding-top: 150px; }
  .schlussblock { margin: 0 10px; border-radius: 26px; }
  .schlussblock-aktionen .knopf, .buehne-aktionen .knopf, .kopf-aktionen .knopf { width: 100%; justify-content: center; }
  .komposition .schale-telefon { right: 4px; bottom: -28px; }
  .laufband-teil span { font-size: 1.1rem; }
}

/* ---------- SEO-Ausbau 10/2026: Seitenkopf, Fußzeile, Regionaltext ---------- */
h1.plakette { line-height: 1.4; letter-spacing: 0.18em; }
.fusszeile .fuss-titel { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: #6e7787; margin-bottom: 18px; letter-spacing: 0.08em; }
.fuss-adresse { font-style: normal; margin-top: 18px; color: #8a93a6; font-size: 0.92rem; line-height: 1.65; }
.fuss-adresse a { font-size: inherit; }
.fusszeile-gitter { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.region-gitter { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.region-text p { color: var(--tinte-2); font-size: 1.08rem; line-height: 1.7; }
.region-text p + p { margin-top: 18px; }
.region-orte { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.region-orte li { border: 1px solid var(--haar); background: var(--weiss); border-radius: 999px; padding: 8px 16px; font-size: 0.9rem; color: var(--tinte-2); }
.abschnitt-weiss .region-orte li { background: var(--papier); }
.region-mehr { display: inline-block; margin-top: 26px; font-weight: 600; }
@media (max-width: 960px) {
  .fusszeile-gitter { grid-template-columns: 1fr 1fr; }
  .fusszeile-marke { grid-column: 1 / -1; }
  .region-gitter { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fusszeile-gitter { grid-template-columns: 1fr; }
  .buehne .buehne-titel { hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 400px) {
  /* lange Wörter (z. B. Datenschutzerklärung) passen auch auf kleine Handys */
  .kopf h1 { font-size: clamp(1.9rem, 9.5vw, 2.5rem); }
}