/* ============================================================
   ADence Redesign · Startseite
   Ruhige, technische Systemmarke · Blau/Türkis aus dem Logo
   ============================================================ */

/* ---------- Schriften (selbst gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-normal-100-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-normal-100-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-normal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plexmono-normal-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

/* ---------- Design-Tokens ---------- */
:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --ink: #0c1626;
  --ink-2: #46536b;
  --line: #dde4ef;

  --blue: #2f4d9e;
  --blue-deep: #223a7c;
  --teal: #2fa3ba;
  --teal-ink: #1e7b90; /* dunkleres Teal: 4,9:1 auf Weiß, Buttons/Kleintext */
  --grad: linear-gradient(115deg, var(--blue) 10%, var(--teal-ink) 90%);

  --dark: #0a1322;
  --dark-2: #0e1a30;
  --dark-line: rgba(255, 255, 255, 0.09);
  --dark-text: #b9c4d8;

  --ok: #2ec98b;
  --info: #4f8ef7;

  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(12, 22, 38, 0.05), 0 12px 32px -12px rgba(12, 22, 38, 0.12);
  --shadow-lg: 0 2px 4px rgba(12, 22, 38, 0.06), 0 24px 56px -16px rgba(34, 58, 124, 0.22);
  --wrap: 1180px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  scrollbar-color: var(--teal) #0d1930; /* Firefox */
}
/* WebKit-Scrollleiste in Markenfarben */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0d1930; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--blue), var(--teal));
  border-radius: 99px;
  border: 3px solid #0d1930;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3b5fc0, #3fd6e8);
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

/* Sektionen clippen ausragende Deko, html/body bleiben unangetastet
   (sticky Header funktioniert weiter, kein horizontales Scrollen auf Mobile) */
section, .footer, .hero { overflow-x: clip; }

::selection { background: rgba(47, 163, 186, 0.25); }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; }

h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.1rem);
  font-weight: 740;
  font-stretch: 108%;
}
h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 720;
  font-stretch: 106%;
}

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.1rem;
}
.kicker--light { color: #7fd0e0; }
.kicker--center { text-align: center; }

:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
}
.hero :focus-visible, .section--dark :focus-visible, .cta :focus-visible, .footer :focus-visible { outline-color: #7fd0e0; }

.skip {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 300;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  padding: 0.8rem 1.3rem;
  border-radius: 99px;
  transform: translateY(-250%);
  transition: transform 0.2s ease;
}
.skip:focus-visible { transform: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Status-Punkte */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-2);
  flex: none;
}
.dot--ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(46, 201, 139, 0.18); }
.dot--info { background: var(--info); box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.18); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 620;
  line-height: 1;
  padding: 1rem 1.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(47, 77, 158, 0.55);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(47, 77, 158, 0.65); }
.btn--ghost {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--blue); transform: translateY(-2px); }
.btn--ghost-light {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--ghost-light:hover { border-color: #fff; }
.btn--light { background: #fff; color: var(--blue-deep); }
.btn--light:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.4); }
.btn--small { padding: 0.72rem 1.15rem; font-size: 0.92rem; }

/* ---------- Header: schwebende Glasbar mit Laser-Rahmen ---------- */
@property --nav-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px clamp(0.9rem, 3vw, 2rem) 0;
  pointer-events: none;
  /* Eigener GPU-Layer: verhindert Flackern über animiertem Hintergrund */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.38s ease, opacity 0.3s ease;
}
/* Beim Runterscrollen sanft ausblenden, beim Hochscrollen wieder rein */
.nav--hidden {
  transform: translateY(-120%) translateZ(0);
  opacity: 0;
  pointer-events: none;
}

.nav__inner {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.6rem 0.9rem 0.6rem 1.4rem;
  border-radius: 999px;
  background: rgba(245, 247, 251, 0.78);
  border: 1px solid rgba(12, 22, 38, 0.08);
  box-shadow: 0 12px 34px -14px rgba(12, 22, 38, 0.25);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Laser, der dauerhaft um die Bar läuft (eigener Layer, entkoppelt vom Glas) */
.nav__inner::before {
  content: "";
  --nav-angle: 0deg; /* Fallback ohne @property: Laser statisch statt unsichtbar */
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(
    from var(--nav-angle),
    transparent 0turn 0.62turn,
    rgba(63, 214, 232, 0.0) 0.68turn,
    rgba(63, 214, 232, 0.55) 0.78turn,
    #3fd6e8 0.86turn,
    rgba(111, 149, 232, 0.9) 0.93turn,
    transparent 0.995turn
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: navlaser 5.5s linear infinite;
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
}
@keyframes navlaser { to { --nav-angle: 360deg; } }

.nav__brand { display: flex; align-items: center; gap: 0.18rem; }
.nav__brand img { width: 36px; height: 36px; }
.nav__brandname { font-size: 1.42rem; font-weight: 750; font-stretch: 105%; letter-spacing: -0.015em; margin-top: 0.1em; }
.nav__branddot { color: var(--teal); }

.nav__links { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.8rem); }
.nav__links a,
.nav__links button.nav__gruppenlink {
  font-size: 0.97rem;
  font-weight: 550;
  color: var(--ink-2);
  transition: color 0.15s ease;
}
.nav__links a:hover,
.nav__links button.nav__gruppenlink:hover { color: var(--ink); }

.nav__actions { display: flex; align-items: center; gap: 0.9rem; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid rgba(12, 22, 38, 0.12);
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
/* Mittlerer Balken beim X dreifach weg (Opacity allein liess ihn auf dem
   iPhone stehen, das X sah wie ein Stern aus). */
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); visibility: hidden; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none;
  pointer-events: auto;
  flex-direction: column;
  gap: 0.4rem;
  max-width: var(--wrap);
  margin: 0.6rem auto 0;
  padding: 1rem 1.4rem 1.4rem;
  border-radius: 22px;
  background: rgba(245, 247, 251, 0.96);
  border: 1px solid rgba(12, 22, 38, 0.08);
  box-shadow: 0 24px 50px -18px rgba(12, 22, 38, 0.35);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav__mobile a:not(.btn) {
  padding: 0.65rem 0.25rem;
  font-weight: 550;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.nav__mobile .btn { margin-top: 0.9rem; }
.nav.is-open .nav__mobile { display: flex; }

/* Dunkle Variante über dem Hero */
.nav__logo--light { display: none; }
.nav--dark .nav__logo--dark { display: none; }
.nav--dark .nav__logo--light { display: block; }
.nav--dark .nav__inner {
  background: rgba(10, 20, 38, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px -14px rgba(0, 0, 0, 0.6);
}
.nav--dark .nav__brandname { color: #fff; }
.nav--dark .nav__links a,
.nav--dark .nav__links button.nav__gruppenlink { color: #b9c4d8; }
.nav--dark .nav__links a:hover,
.nav--dark .nav__links button.nav__gruppenlink:hover { color: #fff; }
.nav--dark .nav__burger { border-color: rgba(255, 255, 255, 0.2); }
.nav--dark .nav__burger span { background: #fff; }
.nav--dark .nav__mobile {
  background: rgba(10, 18, 34, 0.97);
  border-color: rgba(255, 255, 255, 0.1);
}
.nav--dark .nav__mobile a:not(.btn) { color: #b9c4d8; border-color: rgba(255, 255, 255, 0.08); }

/* Glas nur ganz oben: beim Scrollen deckend, kein backdrop-filter-Repaint
   pro Frame (fixe Glas-Header machen sonst das Scrollen zaeh) */
.nav.is-scrolled .nav__inner {
  background: rgba(245, 247, 251, 0.97);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav--dark.is-scrolled .nav__inner {
  background: rgba(10, 18, 34, 0.95);
}

/* ---------- Hero (dunkel, animiert) ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--dark);
  color: #fff;
}

.hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: translateZ(0);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(52rem 34rem at 78% 12%, rgba(47, 163, 186, 0.16), transparent 62%),
    radial-gradient(44rem 30rem at 4% 90%, rgba(47, 77, 158, 0.22), transparent 62%),
    radial-gradient(30rem 20rem at 50% 110%, rgba(79, 142, 247, 0.1), transparent 70%);
}
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70rem 46rem at 60% 30%, #000 25%, transparent 78%);
  mask-image: radial-gradient(70rem 46rem at 60% 30%, #000 25%, transparent 78%);
}
/* Feines Rauschen für Tiefe */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.6"/></svg>');
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
  flex: 1;
  padding-top: clamp(6rem, 13vh, 8rem);
  padding-bottom: clamp(1.5rem, 3.5vh, 3rem);
  width: 100%;
}

.hero .wrap { max-width: 1260px; }
/* Zeile 1 als kleinerer Vorspann, Zeile 2 ist die grosse Aussage */
.hero__l1 {
  display: block;
  font-size: 0.55em;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.035em;
  color: #cfdcef;
  margin-bottom: 0.3em;
}
.hero h1 {
  font-size: clamp(2.05rem, 3.7vw, 3.4rem);
  font-stretch: 100%;
  letter-spacing: -0.028em;
  line-height: 1.1;
  white-space: nowrap;
}
.grad-glow {
  background: linear-gradient(115deg, #57b6ff 5%, #3fd6e8 55%, #2fa3ba 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(63, 214, 232, 0.3));
}

@property --badge-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.hero__badge {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfe0f2;
  background: rgba(10, 20, 38, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 0;
  margin-bottom: 1.6rem;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Laser, der um das Badge läuft */
.hero__badge::before {
  content: "";
  --badge-angle: 0deg;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(
    from var(--badge-angle),
    transparent 0turn 0.7turn,
    rgba(63, 214, 232, 0.5) 0.82turn,
    #3fd6e8 0.9turn,
    transparent 0.995turn
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: badgelaser 7s linear infinite;
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
}
@keyframes badgelaser { to { --badge-angle: 360deg; } }
/* Glanz, der alle paar Sekunden über das Badge fegt
   (Transform statt background-position: läuft flüssig durch und
   blendet während der Bewegung aus, kein sichtbares Stehenbleiben) */
.hero__badge::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
  transform: translateX(0) skewX(-12deg);
  opacity: 0;
  animation: badgeshine 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes badgeshine {
  0% { transform: translateX(0) skewX(-12deg); opacity: 0; }
  8% { opacity: 1; }
  30% { opacity: 1; }
  40% { transform: translateX(420%) skewX(-12deg); opacity: 0; }
  100% { transform: translateX(420%) skewX(-12deg); opacity: 0; }
}
.hero__badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.95rem 0.6rem 1.1rem;
  background: rgba(46, 201, 139, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #4be3a8;
  font-weight: 600;
}
.hero__badge-ping {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
/* Radar-Ring, der vom Punkt nach außen pulst */
.hero__badge-ping::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 201, 139, 0.7);
  animation: ping 1.8s cubic-bezier(0, 0.6, 0.4, 1) infinite;
}
@keyframes ping {
  from { transform: scale(0.6); opacity: 1; }
  to { transform: scale(2.4); opacity: 0; }
}
.hero__badge-text {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.15rem 0.6rem 0.95rem;
}
.hero__badge-text i { font-style: normal; color: rgba(255, 255, 255, 0.35); }

.hero__type {
  display: flex;
  align-items: center;
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 600;
  color: #3fd6e8;
  /* Feste Höhe + kein Umbruch: Layout bleibt beim Tippen absolut ruhig */
  height: 1.6em;
  overflow: hidden;
  white-space: nowrap;
}
.hero__caret {
  width: 2px;
  height: 1.15em;
  margin-left: 3px;
  background: #3fd6e8;
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  color: var(--dark-text);
  max-width: 32em;
  margin-top: 1.2rem;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
.hero__cta--center { justify-content: center; }

.hero__trust {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.9rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #8b98af;
}

/* Orbit-Ringe hinter dem System-Board */
.hero__orbit {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px dashed rgba(127, 208, 224, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: orbit 40s linear infinite, orbitin 0.9s ease 0.7s forwards;
  pointer-events: none;
}
@keyframes orbitin { to { opacity: 1; } }
.hero__orbit i {
  position: absolute;
  top: -3px; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3fd6e8;
  box-shadow: 0 0 12px 2px rgba(63, 214, 232, 0.55);
}
.hero__orbit--1 { width: 115%; aspect-ratio: 1; }
.hero__orbit--2 {
  width: 138%;
  aspect-ratio: 1;
  animation: orbit 64s linear reverse infinite, orbitin 0.9s ease 0.85s forwards;
  border-color: rgba(79, 142, 247, 0.13);
}
.hero__orbit--2 i { background: #5b83e0; box-shadow: 0 0 12px 2px rgba(91, 131, 224, 0.55); }
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Marquee am unteren Hero-Rand */
.hero__marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  animation: risein 0.8s cubic-bezier(0.3, 1.25, 0.45, 1) 0.7s backwards;
}
@keyframes risein {
  from { opacity: 0; transform: translateY(46px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__marquee-track {
  --mq-gap: 2.2rem;
  display: flex;
  align-items: center;
  gap: var(--mq-gap);
  width: max-content;
  padding: 0.95rem 0;
  animation: marquee 40s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.hero__marquee-track span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8b98af;
  white-space: nowrap;
}
.hero__marquee-track i { font-style: normal; font-size: 0.5rem; color: #2fa3ba; }
@keyframes marquee { to { transform: translate3d(calc(-50% - var(--mq-gap) / 2), 0, 0); } }
.hero__marquee:hover .hero__marquee-track { animation-play-state: paused; }

/* ---------- Boot-Glitch beim ersten Laden (digitale Verzerrung) ---------- */
.bootfx { display: none; }
html.intro .bootfx {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 400;
  /* Nur ein kurzer Schleier. Die eigentliche Stoerung passiert an den
     echten Elementen (siehe Startverzerrung weiter unten). */
  background: rgba(10, 19, 34, 0.22);
  pointer-events: none;
  animation: bootout 0.5s ease 1.75s forwards;
}
html.intro .bootfx canvas { width: 100%; height: 100%; display: block; }
@keyframes bootout { to { opacity: 0; visibility: hidden; } }
/* Explosion wartet, bis die Verzerrung vorbei ist */
html.intro .hero [data-explode] { animation-delay: calc(var(--ed, 0s) + 1.7s); }
html.intro .hero__marquee { animation-delay: 2.25s; }
html.intro .hero__orbit--1 { animation-delay: 0s, 2.25s; }
html.intro .hero__orbit--2 { animation-delay: 0s, 2.35s; }

/* ---------- Hero: Partikel-Orb, der sich ins AD-Zeichen verwandelt ---------- */
.orbwrap {
  position: relative;
  aspect-ratio: 1;
  max-width: 600px;
  margin-inline: auto;
}
.orbwrap canvas {
  position: absolute;
  /* Groesser als der Wrap: die wachsende Kugel darf nirgends anstossen */
  inset: -26%;
  width: 152%;
  height: 152%;
}
/* Weicher Farbnebel hinter dem Orb */
.orbwrap__glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 42%, rgba(47, 77, 158, 0.5), transparent 55%),
    radial-gradient(circle at 64% 58%, rgba(63, 214, 232, 0.34), transparent 55%);
  filter: blur(46px);
  animation: orbglow 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes orbglow {
  from { opacity: 0.5; transform: scale(0.92); }
  to { opacity: 0.85; transform: scale(1.05); }
}

/* ============================================================
   Hero-Logo Variante "Vollglas": transparenter Koerper,
   Hintergrund scheint gebrochen durch, Rim-Light, Aberration
   ============================================================ */
.orbwrap__tilt--glass { position: relative; }
.orbwrap__tilt--glass > i {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
  pointer-events: none;
}
/* Platzhalter haelt die Groesse (Glas hat kein eigenes Bild im Fluss) */
.orbwrap__tilt--glass::before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* Linsen-Versatz: der Farbnebel erscheint INNERHALB des Glases
   vergroessert und verschoben. Genau das laesst es als Glas lesen. */
.g-disp {
  transform: translateZ(10px);
  /* Nur der INHALT ist verschoben/groesser, die Maske bleibt die Logo-Form:
     drinnen sitzt der Farbnebel woanders als draussen = Linseneffekt */
  background:
    radial-gradient(circle at 16% 18%, rgba(52, 86, 240, 1), transparent 68%),
    radial-gradient(circle at 86% 84%, rgba(38, 220, 240, 1), transparent 66%),
    radial-gradient(circle at 66% 8%, rgba(140, 96, 255, 0.65), transparent 58%);
  filter: blur(16px) saturate(1.35);
  opacity: 0.95;
}

/* Duenne, umlaufende Glaskante: macht die Form klar lesbar */
.g-edge {
  transform: translateZ(21px);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(200, 245, 255, 0.6) 45%, rgba(150, 220, 255, 0.45) 75%, rgba(255, 255, 255, 0.55));
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: 100%, 99%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: 100%, 98.6%;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-composite: subtract;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Glaskoerper: verwaschener Hintergrund = echte Lichtbrechung */
.g-frost {
  transform: translateZ(12px);
  -webkit-backdrop-filter: blur(5px) saturate(4.2) brightness(0.94) contrast(1.15);
  backdrop-filter: blur(5px) saturate(4.2) brightness(0.94) contrast(1.15);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012) 60%, rgba(255, 255, 255, 0.025));
}
/* Materialdicke: leicht getoente, halbtransparente Schichten */
.g-body {
  transform: translateZ(calc(12px - var(--i) * 1.6px));
  background: linear-gradient(150deg, rgba(120, 175, 255, 0.09), rgba(90, 215, 235, 0.07));
  opacity: calc(0.08 - var(--i) * 0.009);
}
/* Markenfarbe nur angedeutet, damit A und D erkennbar bleiben */
.g-tint {
  transform: translateZ(13px);
  background-image: url("../img/adence_logo.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.08;
  filter: saturate(2) brightness(1.2);
  mix-blend-mode: screen;
}
/* Chromatische Aberration: Farbsaum an den Kanten wie bei echtem Glas */
.g-ab {
  transform: translateZ(14px);
  mix-blend-mode: screen;
  opacity: 0.3;
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: contain, contain;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: subtract;
}
.g-ab--r {
  background: rgba(255, 90, 140, 0.85);
  -webkit-mask-position: center, calc(50% + 3px) calc(50% + 2px);
  mask-position: center, calc(50% + 3px) calc(50% + 2px);
}
.g-ab--b {
  background: rgba(80, 190, 255, 0.9);
  -webkit-mask-position: center, calc(50% - 3px) calc(50% - 2px);
  mask-position: center, calc(50% - 3px) calc(50% - 2px);
}
/* Innenschatten unten rechts: gibt dem Koerper Volumen */
.g-inner {
  transform: translateZ(15px);
  background: linear-gradient(135deg, transparent 40%, rgba(6, 16, 40, 0.55) 85%, rgba(4, 10, 28, 0.8));
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, calc(50% - 9px) calc(50% - 9px);
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: contain, contain;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, calc(50% - 9px) calc(50% - 9px);
  mask-composite: subtract;
  filter: blur(3px);
  opacity: 0.68;
}
/* Rim-Light: helle Glaskante oben links */
.g-rim {
  transform: translateZ(16px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(190, 240, 255, 0.42) 40%, rgba(120, 200, 255, 0.14) 70%, transparent);
  opacity: 0.6;
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, calc(50% + 2.5px) calc(50% + 2.5px);
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: contain, contain;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, calc(50% + 2.5px) calc(50% + 2.5px);
  mask-composite: subtract;
  mix-blend-mode: screen;
}
/* Breite Reflexion ueber die Flaeche */
.g-gloss {
  transform: translateZ(17px);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 22%, transparent 44%),
    linear-gradient(118deg, transparent 64%, rgba(120, 220, 255, 0.16) 88%, rgba(255, 255, 255, 0.2) 100%);
  mix-blend-mode: screen;
  opacity: 0.26;
}
/* Scharfe Glanzpunkte */
.g-spec {
  transform: translateZ(18px);
  background:
    radial-gradient(18% 9% at 30% 12%, rgba(255, 255, 255, 0.95), transparent 72%),
    radial-gradient(9% 6% at 62% 23%, rgba(255, 255, 255, 0.5), transparent 72%),
    radial-gradient(13% 7% at 73% 83%, rgba(180, 240, 255, 0.4), transparent 72%);
  filter: blur(1.2px);
  mix-blend-mode: screen;
  opacity: 0.55;
}
/* Weicher Schatten dahinter */
.g-cast {
  transform: translateZ(-26px) translate(12px, 18px);
  background: rgba(4, 10, 26, 0.7);
  filter: blur(30px);
  opacity: 0.45;
}

/* Farbiges Leuchten direkt hinter dem Logo: nur so kann Glas Farbe brechen */
.orbwrap__aurora {
  position: absolute;
  top: 50%; left: 50%;
  width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 32%, rgba(52, 86, 240, 1), transparent 62%),
    radial-gradient(circle at 72% 70%, rgba(38, 220, 240, 0.98), transparent 60%),
    radial-gradient(circle at 58% 22%, rgba(140, 96, 255, 0.6), transparent 55%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 1.2s ease 0.2s;
  animation: auroradrift 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.orbwrap.is-final .orbwrap__aurora { opacity: 1; }
@keyframes auroradrift {
  0% { transform: translate(-52%, -48%) rotate(0deg) scale(1); }
  100% { transform: translate(-48%, -52%) rotate(22deg) scale(1.08); }
}

/* Kanten-Lupe: am Rand bricht das Glas staerker (Linsen-Effekt) */
.g-lens {
  transform: translateZ(11px);
  -webkit-backdrop-filter: blur(2px) saturate(3.6) brightness(1.2);
  backdrop-filter: blur(2px) saturate(3.6) brightness(1.2);
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: 100%, 88%;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-composite: subtract;
}

/* Leichte Ringe um das Logo, die langsam pulsieren */
.orbwrap__rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 1.2s ease 0.3s;
  pointer-events: none;
}
.orbwrap.is-final .orbwrap__rings { opacity: 1; }
.orbwrap__rings i {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(127, 208, 224, 0.28);
  animation: ringpulse 5s ease-in-out infinite;
}
.orbwrap__rings i:nth-child(1) { width: 54%; aspect-ratio: 1; }
.orbwrap__rings i:nth-child(2) {
  width: 72%; aspect-ratio: 1;
  border-color: rgba(88, 122, 224, 0.22);
  animation-delay: 1.2s;
}
.orbwrap__rings i:nth-child(3) {
  width: 92%; aspect-ratio: 1;
  border-style: dashed;
  border-color: rgba(127, 208, 224, 0.14);
  animation-delay: 2.4s;
  animation-duration: 6.5s;
}
@keyframes ringpulse {
  0%, 100% { transform: scale(0.97); opacity: 0.45; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* Finale: echtes Logo mit Licht- und Gradient-Effekten */
.orbwrap__final {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 1.05s cubic-bezier(0.33, 0, 0.2, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.orbwrap.is-final .orbwrap__final { opacity: 1; transform: none; }
/* Kurzer Lichtimpuls genau im Moment des Wechsels */
.orbwrap__final::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(200, 245, 255, 0.85), rgba(120, 190, 255, 0.35) 45%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.orbwrap.is-final .orbwrap__final::after { animation: logobloom 1.15s cubic-bezier(0.2, 0, 0.2, 1) forwards; }
@keyframes logobloom {
  0% { opacity: 0; transform: scale(0.86); }
  18% { opacity: 0.55; }
  100% { opacity: 0; transform: scale(1.3); }
}
/* Finale: Hintergrund-Leuchten wird kraeftiger und atmet */
.orbwrap.is-final .orbwrap__glow {
  inset: -4%;
  animation: orbglowfinal 4.5s ease-in-out infinite alternate;
}
@keyframes orbglowfinal {
  from { opacity: 0.75; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.12); }
}
.orbwrap canvas { transition: opacity 0.9s ease, filter 0.9s ease; }
.orbwrap.is-final canvas {
  opacity: 0;
  /* Weichzeichnen beim Ausblenden: die Punkte zerfliessen ins Logo */
  filter: blur(13px);
  transition: opacity 0.95s cubic-bezier(0.4, 0, 0.25, 1) 0.2s, filter 0.95s ease 0.2s;
}
.orbwrap__logo {
  position: relative;
  width: 54%;
  animation: logofloat 7s ease-in-out infinite;
}
/* 3D-Buehne: pendelt leicht, folgt der Maus */
.orbwrap__final { perspective: 900px; }
.orbwrap__tilt {
  position: relative;
  transform-style: preserve-3d;
  animation: logosway 9s ease-in-out infinite;
  transition: transform 0.25s ease-out;
}
.orbwrap__tilt.is-tilting { animation: none; }
@keyframes logosway {
  0%, 100% { transform: rotateX(9deg) rotateY(-11deg); }
  50% { transform: rotateX(4deg) rotateY(11deg); }
}
/* --- Schlagschatten hinter dem Koerper: erzeugt Tiefe im Raum --- */
.orbwrap__cast {
  position: absolute;
  inset: 0;
  transform: translateZ(-30px) translate(10px, 16px) scale(1.01);
  background: rgba(4, 10, 26, 0.75);
  /* Sehr weich: soll Tiefe andeuten, nicht als zweites Logo lesbar sein */
  filter: blur(34px);
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
  opacity: 0.5;
}

/* --- Glaskoerper: Vorderseite --- */
.orbwrap__front {
  position: relative;
  width: 100%;
  height: auto;
  transform: translateZ(16px);
  /* Satt, aber im dunkleren Blauton (nicht ins Grelle kippen) */
  filter: saturate(1.5) brightness(1.02)
          drop-shadow(0 0 26px rgba(47, 120, 190, 0.32))
          drop-shadow(0 10px 20px rgba(4, 10, 26, 0.5))
          drop-shadow(0 26px 52px rgba(4, 10, 26, 0.45));
  animation: logoglow 4.5s ease-in-out infinite alternate;
}

/* --- Extrusion: gestapelte Ebenen ergeben echte Materialdicke --- */
.orbwrap__depth {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(16px - var(--i) * 1.5px));
  background: linear-gradient(150deg, #2b3f7a, #12325c 45%, #0b1b38);
  /* Je tiefer die Ebene, desto dunkler: erzeugt die Kantenwoelbung */
  filter: brightness(calc(1 - var(--i) * 0.055));
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
}

/* --- Lichtbrechung im Glas: Farbnebel scheint durch den Koerper --- */
.orbwrap__refract {
  position: absolute;
  inset: 0;
  transform: translateZ(17px);
  background:
    radial-gradient(circle at 72% 78%, rgba(63, 214, 232, 0.6), transparent 46%),
    radial-gradient(circle at 24% 26%, rgba(120, 165, 255, 0.5), transparent 48%);
  filter: blur(10px);
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* --- Bevel: helle Kante oben links, dunkle unten rechts ---
   Trick: dieselbe Logo-Maske zweimal, versetzt voneinander abgezogen,
   uebrig bleibt nur der schmale Rand innerhalb der Form. */
.orbwrap__bevel {
  position: absolute;
  inset: 0;
  transform: translateZ(18px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(190, 235, 255, 0.5) 45%, transparent 75%);
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, calc(50% + 4px) calc(50% + 4px);
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: contain, contain;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, calc(50% + 4px) calc(50% + 4px);
  mask-composite: subtract;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.orbwrap__bevel--dark {
  background: linear-gradient(135deg, transparent 25%, rgba(6, 14, 34, 0.7) 60%, rgba(4, 10, 26, 0.95));
  -webkit-mask-position: center, calc(50% - 4px) calc(50% - 4px);
  mask-position: center, calc(50% - 4px) calc(50% - 4px);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

/* --- Breiter Glanz ueber die Flaeche --- */
.orbwrap__gloss {
  position: absolute;
  inset: 0;
  transform: translateZ(19px);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 20%, transparent 40%),
    linear-gradient(118deg, transparent 60%, rgba(63, 180, 214, 0.18) 86%, rgba(255, 255, 255, 0.22) 100%);
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.72;
}

/* --- Spiegelnder Lichtpunkt oben links (macht es „glasig") --- */
.orbwrap__spec {
  position: absolute;
  inset: 0;
  transform: translateZ(20px);
  background:
    radial-gradient(28% 16% at 30% 12%, rgba(255, 255, 255, 0.95), transparent 70%),
    radial-gradient(14% 9% at 62% 22%, rgba(255, 255, 255, 0.55), transparent 70%);
  filter: blur(1.5px);
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.9;
}


@keyframes logofloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes logoglow {
  from { filter: saturate(1.45) brightness(0.98) drop-shadow(0 0 18px rgba(47, 120, 190, 0.25)) drop-shadow(0 12px 34px rgba(30, 52, 120, 0.5)); }
  to { filter: saturate(1.55) brightness(1.06) drop-shadow(0 0 40px rgba(63, 180, 214, 0.45)) drop-shadow(0 14px 46px rgba(47, 77, 158, 0.6)); }
}

/* ---------- Hero: System-Board (dunkles Glas) ---------- */
.hero__system { position: relative; perspective: 1400px; }

.sys {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 660 / 600;
  max-width: 640px;
  margin-inline: auto;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  will-change: transform;
  backface-visibility: hidden;
}

/* Zoom: Karte waechst wie unter einer Lupe (~doppelte Groesse).
   Die Klasse setzt JS mit kurzem Nachlauf, damit der Zustand stabil bleibt
   (reines :hover verliert beim Skalieren kurz das Ziel und flackert) */
.sys__node { cursor: default; }
.sys .sys__node.is-zoom {
  border-color: rgba(63, 214, 232, 0.85);
  transform: scale(1.85);
  z-index: 6;
  animation-play-state: paused;
}
.sys .sys__node.is-zoom::after { opacity: 1; }
.sys__node--web  { transform-origin: top left;     --fa: 10px; --fb: 14px; --fd: 26s; }
.sys__node--crm  { transform-origin: top right;    --fa: 13px; --fb: 9px;  --fd: 30s; }
.sys__node--ki   { transform-origin: center center; --fa: 8px;  --fb: 11px; --fd: 24s; }
.sys__node--task { transform-origin: bottom left;  --fa: 11px; --fb: 13px; --fd: 32s; }
.sys__node--dash { transform-origin: bottom right; --fa: 14px; --fb: 9px;  --fd: 28s; }

/* Nach der Explosion: sanftes Treiben in alle Richtungen (translate-Property,
   kollidiert nicht mit transform von Hover/Tilt) */
/* Hoehere Spezifitaet als .hero [data-explode], sonst faellt floaty weg */
.hero .sys__node[data-explode] {
  animation:
    assemble 0.95s cubic-bezier(0.3, 1.25, 0.45, 1) var(--ed, 0s) backwards,
    floaty var(--fd, 8s) ease-in-out calc(var(--ed, 0s) + 1.4s) infinite;
}
@keyframes floaty {
  0%, 100% { translate: 0 0; }
  25% { translate: var(--fa, 5px) calc(var(--fb, 7px) * -1); }
  50% { translate: calc(var(--fb, 7px) * -0.8) var(--fa, 5px); }
  75% { translate: calc(var(--fa, 5px) * 0.6) calc(var(--fb, 7px) * 0.7); }
}

/* Explosion beim Laden: Elemente fliegen aus allen Richtungen zusammen */
.hero [data-explode] {
  animation: assemble 0.95s cubic-bezier(0.3, 1.25, 0.45, 1) var(--ed, 0s) backwards;
}
@keyframes assemble {
  from {
    opacity: 0;
    transform: translate(var(--ex, 0px), var(--ey, 0px)) rotate(var(--er, 0deg)) scale(var(--es, 0.85));
    filter: blur(8px);
  }
  55% { filter: blur(0); }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: blur(0);
  }
}

.sys__lines {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  /* Linien erst zeigen, wenn die Karten zusammengesetzt sind */
  opacity: 0;
  animation: linesin 0.7s ease 1.15s forwards;
  transform: translateZ(0);
}
@keyframes linesin { to { opacity: 1; } }
.sys__lines path {
  stroke: url(#beam);
  stroke-opacity: 0.8;
  stroke-width: 1.8;
  stroke-dasharray: 7 9;
  animation: dashflow 1.2s linear infinite;
}
@keyframes dashflow { to { stroke-dashoffset: -32; } }
.sys__pulse--teal { fill: #3fd6e8; filter: drop-shadow(0 0 6px rgba(63, 214, 232, 0.9)); }
.sys__pulse--blue { fill: #6f95e8; filter: drop-shadow(0 0 6px rgba(111, 149, 232, 0.9)); }

.sys__node {
  position: absolute;
  background: rgba(13, 25, 46, 0.9);
  border: 1px solid rgba(127, 208, 224, 0.16);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.6);
  padding: 2.8cqw 3.1cqw;
  transition:
    border-color 0.35s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateZ(0);
  will-change: transform;
}
/* Glow liegt auf einem eigenen Layer und wird nur per Opacity eingeblendet
   (kein box-shadow-Repaint pro Frame = kein Ruckeln) */
.sys__node::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow:
    0 0 0 3px rgba(63, 214, 232, 0.16),
    0 0 70px -8px rgba(63, 214, 232, 0.55),
    0 46px 100px -22px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.sys__node.is-active {
  border-color: rgba(63, 214, 232, 0.7);
  box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.12), 0 0 34px -4px rgba(63, 214, 232, 0.35), 0 20px 50px -18px rgba(0, 0, 0, 0.6);
  transform: translateY(-3px);
}

.sys__node--web  { left: 3.6%; top: 5%;    width: 33.5%; }
.sys__node--crm  { left: 65%;  top: 3%;    width: 31.6%; }
.sys__node--ki   { left: 32%;  top: 32%;   width: 36.6%; }
.sys__node--task { left: 3.6%; top: 64.5%; width: 34%; }
.sys__node--dash { left: 63.5%; top: 56.5%; width: 33%; }

.sys__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  margin-bottom: 1.6cqw;
}
.sys__tag {
  font-family: var(--font-mono);
  font-size: 1.7cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fd0e0;
}
.sys__status {
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  font-family: var(--font-mono);
  font-size: 1.6cqw;
  color: #8b98af;
}
.sys__status .dot, .sys__rail .dot { width: 1.2cqw; height: 1.2cqw; }

.sys__title { font-size: 2.5cqw; font-weight: 680; letter-spacing: -0.01em; color: #fff; }

.sys__form { display: flex; flex-direction: column; gap: 1.3cqw; margin-top: 1.6cqw; }
.sys__line {
  display: block;
  height: 1.5cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
}
.sys__line--w80 { width: 80%; }
.sys__line--w70 { width: 70%; }
.sys__line--w55 { width: 55%; }
.sys__line--w50 { width: 50%; }
.sys__btn {
  align-self: flex-start;
  background: var(--grad);
  color: #fff;
  font-size: 1.8cqw;
  font-weight: 620;
  padding: 1.1cqw 2.4cqw;
  border-radius: 1.2cqw;
  margin-top: 0.5cqw;
}

.sys__row { display: flex; align-items: center; gap: 1.8cqw; margin-top: 1.8cqw; }
.sys__row > div { flex: 1; display: flex; flex-direction: column; gap: 1.1cqw; }
.sys__avatar {
  width: 5.4cqw; height: 5.4cqw;
  flex: none;
  border-radius: 50%;
  background: rgba(63, 214, 232, 0.16);
  color: #3fd6e8;
  font-family: var(--font-mono);
  font-size: 1.8cqw;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.sys__avatar--b { background: rgba(111, 149, 232, 0.18); color: #9db7f2; }
.sys__assig { font-family: var(--font-mono); font-size: 1.7cqw; color: #8b98af; }

.sys__chips { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.6cqw; }
.sys__chip {
  font-family: var(--font-mono);
  font-size: 1.6cqw;
  padding: 0.8cqw 1.6cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  color: #b9c4d8;
}
.sys__chip--hot { background: rgba(63, 214, 232, 0.16); color: #3fd6e8; }

.sys__meter {
  height: 1.4cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 2cqw;
  overflow: hidden;
}
.sys__meter span {
  display: block;
  height: 100%;
  width: 86%;
  border-radius: inherit;
  background: var(--grad);
  /* Als Skalierung statt Breite: eine animierte Breite zwingt den Browser
     bei jedem Bild zu einem neuen Layout, eine Transformation nicht */
  transform-origin: left center;
  animation: meter 3.4s ease-in-out infinite alternate;
}
@keyframes meter { from { transform: scaleX(0.395); } to { transform: scaleX(1); } }

.sys__bars { display: flex; align-items: flex-end; gap: 1.2cqw; height: 7cqw; margin-top: 1.6cqw; }
.sys__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 0.7cqw 0.7cqw 0 0;
  background: linear-gradient(180deg, var(--teal), var(--blue));
  opacity: 0.85;
  transform-origin: bottom;
  animation: bar 3s ease-in-out infinite alternate;
}
.sys__bars i:nth-child(2n) { animation-delay: 0.5s; }
.sys__bars i:nth-child(3n) { animation-delay: 0.9s; }
@keyframes bar { from { transform: scaleY(0.75); } to { transform: scaleY(1); } }
.sys__kpi {
  font-family: var(--font-mono);
  font-size: 1.7cqw;
  font-weight: 600;
  color: #3fd6e8;
  margin-top: 1.2cqw;
}

.sys__rail {
  position: absolute;
  left: 3.6%; right: 3.4%; bottom: 0;
  display: flex;
  align-items: center;
  gap: 3cqw;
  background: rgba(13, 25, 46, 0.85);
  border: 1px solid rgba(127, 208, 224, 0.22);
  border-radius: var(--radius-sm);
  padding: 1.9cqw 3cqw;
  transition: box-shadow 0.4s ease;
}
.sys__rail.is-active { box-shadow: 0 0 0 4px rgba(47, 163, 186, 0.18); }
.sys__rail .sys__tag { color: #7fd0e0; }
.sys__railitem {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  font-family: var(--font-mono);
  font-size: 1.6cqw;
  color: var(--dark-text);
}

/* ---------- Kundenlogos ---------- */
.logos {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.logos .kicker { margin-bottom: 1.6rem; }
.logos__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  align-items: center;
}
.logos__item {
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  min-height: 74px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.logos__item:hover { border-color: rgba(47, 163, 186, 0.4); transform: translateY(-2px); }
.logos__item img {
  max-height: 44px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.logos__item:hover img { filter: none; opacity: 1; }

/* Dunkle Fassung: gleiche Aufteilung, nur die Farben drehen.
   Die Logos liegen weiter auf hellen Kacheln, sonst verschwinden die
   dunklen Schriftzuege der Marken im Untergrund. */
.logos--dunkel {
  --dunkel-sektion: #142440;
  border-block: 0;
  background:
    linear-gradient(180deg, var(--dunkel-sektion) 0, transparent 140px),
    linear-gradient(0deg, var(--dunkel-sektion) 0, transparent 140px),
    radial-gradient(44rem 24rem at 82% 12%, rgba(63, 214, 232, 0.14), transparent 62%),
    radial-gradient(38rem 22rem at 12% 88%, rgba(47, 77, 158, 0.3), transparent 62%),
    var(--dunkel-sektion);
  color: var(--dark-text);
}
.logos--dunkel .logos__item {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.14);
}
/* Umgekehrt zur hellen Fassung: die Marken stehen farbig da und gehen
   beim Darueberfahren in Graustufen. */
.logos--dunkel .logos__item img { filter: none; opacity: 1; }
.logos--dunkel .logos__item:hover {
  background: #fff;
  border-color: rgba(63, 214, 232, 0.55);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
}
.logos--dunkel .logos__item:hover img { filter: grayscale(1); opacity: 0.72; }

/* ---------- Sektionen allgemein ---------- */
.section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.section--tint { background: linear-gradient(180deg, #eef2f8, var(--bg)); }
.section--dark {
  /* Etwas heller und freundlicher als der Hero, aber dieselbe Blaufamilie.
     Der Hero bleibt bewusst beim tiefen --dark. */
  --dunkel-sektion: #142440;
  background:
    /* Kanten auf die Grundfarbe ausblenden, damit zwei dunkle Sektionen
       nahtlos ineinander übergehen */
    linear-gradient(180deg, var(--dunkel-sektion) 0, transparent 160px),
    linear-gradient(0deg, var(--dunkel-sektion) 0, transparent 160px),
    radial-gradient(50rem 30rem at 85% 14%, rgba(63, 214, 232, 0.16), transparent 60%),
    radial-gradient(40rem 26rem at 0% 86%, rgba(70, 110, 210, 0.2), transparent 60%),
    var(--dunkel-sektion);
  color: #fff;
}


.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Variante fuer laengere Einleitungen, die in EINE Zeile sollen: der Kopf darf
   die volle Breite nutzen, die Ueberschrift bleibt aber im gewohnten Mass */
.section__head--breit { max-width: none; }
.section__head--breit > h2,
.section__head--breit > .kicker { max-width: 46rem; }
/* Variante, bei der auch die Ueberschrift die volle Breite nutzen darf.
   Die Maximalgroesse ist eine Spur kleiner, damit die laengste dieser
   Zeilen auf breiten Schirmen sicher einzeilig bleibt (sie braucht sonst
   rund acht Pixel mehr, als der Textbereich hergibt). */
.section__head--voll { max-width: none; }
.section__head--voll > h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }

/* Kopf im Stil der Einstiegs-Sektion: Akzentstrich, gesperrter Kicker,
   grosse Ueberschrift. Damit sehen die Sektionen gleich aus. */
.section__head--marke { max-width: none; }
.section__head--marke > h2 {
  font-size: clamp(1.9rem, 3.35vw, 3rem);
  font-stretch: 100%;
  letter-spacing: -0.03em;
  line-height: 1.08;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .section__head--marke > h2 {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(1.75rem, 6.4vw, 2.3rem);
  }
}
.section__intro { font-size: 1.13rem; color: var(--ink-2); margin-top: 1.1rem; }
.section__intro--light { color: var(--dark-text); }

/* ---------- Einstiegs-Karten ---------- */
.goals {
  /* Flex statt Grid, damit eine nicht volle letzte Reihe mittig steht statt
     linksbuendig zu haengen. Die Spaltenzahl kommt aus --spalten (Standard 2,
     wie auf der Startseite); die Karten teilen sich die Breite entsprechend. */
  --spalten: 2;
  --luecke: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luecke);
}
.goals > * {
  flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
  min-width: 0;
}
.goal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem 1.5rem;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease;
}
.goal::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
/* Nur bei echtem Zeiger, sonst klebt der Zustand auf Touch nach dem Antippen */
@media (hover: hover) {
  .goal:hover { border-color: transparent; }
}

.goal__num {
  position: absolute;
  top: 1.3rem; right: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
  opacity: 0.55;
}
.goal__icon {
  margin-right: 1rem;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(47, 77, 158, 0.08);
  display: grid;
  place-items: center;
}
.goal__icon svg { width: 24px; height: 24px; stroke: var(--blue); fill: none; }
.goal__title { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.015em; }
.goal__text { color: var(--ink-2); font-size: 0.97rem; line-height: 1.55; }
.goal__link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.goal__link::after { content: " →"; }

/* ---------- Kernbereiche ---------- */
.core {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.8rem, 3.5vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
}
.core + .core { margin-top: 1.4rem; }
.core--flip .core__copy { order: 2; }
.core--flip .core__visual { order: 1; }

.core__index {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-ink);
  margin-bottom: 0.6rem;
}
.core__index::after { content: " /"; color: var(--line); }
.core h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 720; font-stretch: 106%; margin-bottom: 0.8rem; }
.core > .core__copy > p { color: var(--ink-2); }

.ticks { list-style: none; margin-top: 1.3rem; display: grid; gap: 0.55rem; }
.ticks li { position: relative; padding-left: 1.7rem; color: var(--ink-2); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 8.4l2.7 2.7L12 5.6" fill="none" stroke="white" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 100% no-repeat,
    linear-gradient(115deg, var(--blue), var(--teal));
}
.ticks--light li { color: var(--dark-text); }
.ticks--cols { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.ticks--cols li { white-space: nowrap; }
@media (max-width: 620px) {
  .ticks--cols { grid-template-columns: 1fr; }
  .ticks--cols li { white-space: normal; }
}
.ticks--big { gap: 0.9rem; }
.ticks--big li { font-size: 1.13rem; color: var(--ink); padding-left: 2rem; }
.ticks--big li::before { top: 0.35em; width: 18px; height: 18px; }

/* ---------- UI-Mockups (CSS-gebaut) ---------- */
.mock {
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: #f2f5fa;
}
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5dce8; }
.mock__url {
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.15rem 0.8rem;
}
.mock__body { padding: 1.3rem; }
.mock__hero { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.1rem; }
.mock__h { width: 62%; height: 14px; border-radius: 99px; background: #dfe6f1; }
.mock__l { height: 9px; border-radius: 99px; background: #e8edf5; }
.mock__l--w60 { width: 60%; }
.mock__pill {
  align-self: flex-start;
  margin-top: 0.4rem;
  background: var(--grad);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 620;
  padding: 0.45rem 1rem;
  border-radius: 8px;
}
.mock__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
.mock__cols span { height: 52px; border-radius: 8px; background: #eef2f9; border: 1px solid var(--line); }

.mock--app { display: grid; grid-template-columns: 52px 1fr; }
.mock__side { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 0.8rem; background: var(--dark); }
.mock__side i { width: 100%; aspect-ratio: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.14); }
.mock__side i.is-on { background: linear-gradient(115deg, var(--blue), var(--teal)); }
.mock__main { padding: 1.1rem 1.2rem; }
.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 1rem; }
.mock__kpis span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  font-size: 0.68rem;
  color: var(--ink-2);
}
.mock__kpis b { font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; }
.mock__rows { display: flex; flex-direction: column; gap: 0.5rem; }
.mock__rows i { height: 26px; border-radius: 6px; background: #eef2f9; border: 1px solid var(--line); }
.mock__rows i:first-child { background: rgba(47, 163, 186, 0.1); border-color: rgba(47, 163, 186, 0.3); }

.mock--chat { padding: 1.1rem 1.2rem; }
.mock__chathead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.mock__msg {
  max-width: 88%;
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  margin-bottom: 0.7rem;
}
.mock__msg--user {
  margin-left: auto;
  background: var(--grad);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.mock__msg--ai {
  background: #eef2f9;
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.mock__input { height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; align-items: center; padding-inline: 0.9rem; }
.mock__input span { width: 34%; height: 8px; border-radius: 99px; background: #e8edf5; }

/* ---------- DSGPT ---------- */
.dsgpt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Die Sektion steht auf hellem Grund, die Ueberschrift muss dunkel sein.
   (Frueher war der Abschnitt dunkel, daher stand hier Weiss.) */
.dsgpt h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }

.dmock {
  background: var(--dark-2);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.dmock__top {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--dark-line);
}
.dmock__logo {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dmock__tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.dmock__tabs i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--dark-text);
  padding: 0.3rem 0.7rem;
  border-radius: 99px;
}
.dmock__tabs i.is-on { background: rgba(47, 163, 186, 0.16); color: #7fd0e0; }
.dmock__body { padding: 1.2rem; }
.dmock__msg {
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  margin-bottom: 0.8rem;
  max-width: 92%;
}
.dmock__msg--user { margin-left: auto; background: rgba(79, 142, 247, 0.16); color: #dce6f7; border-bottom-right-radius: 4px; }
.dmock__msg--ai { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--dark-line); color: var(--dark-text); border-bottom-left-radius: 4px; }
.dmock__model {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #7fd0e0;
  margin-bottom: 0.45rem;
}
.dmock__stat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--dark-line);
}
.dmock__stat span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--dark-text);
}

/* ---------- Projekte ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.filter {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.42rem 1rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--surface);
}
.filter.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.case {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  margin-bottom: 1.4rem;
}
.case__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; }
.case__tags span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(47, 77, 158, 0.08);
  border-radius: 99px;
  padding: 0.3rem 0.8rem;
}
.case h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 720; margin-bottom: 0.8rem; }
.case__copy > p { color: var(--ink-2); }
.mock--case { max-width: 520px; }

.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.case-sm {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.case-sm:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.case-sm h3 { font-size: 1.14rem; font-weight: 700; margin-bottom: 0.6rem; line-height: 1.3; }
.case-sm p { color: var(--ink-2); font-size: 0.96rem; }

/* ---------- Prozess ---------- */
.steps {
  list-style: none;
  --spalten: 4;
  --luecke: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luecke);
  counter-reset: step;
}
.steps > * {
  flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
  min-width: 0;
}
/* Fuenf Schritte als Raster statt Flex: drei oben, darunter zwei breite,
   die die Reihe fuellen. Sonst stuende der fuenfte allein unten links. */
.steps--n5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: stretch;
}
.steps--n5 > * { grid-column: span 2; flex: none; }
.steps--n5 > *:nth-last-child(-n+2) { grid-column: span 3; }
@media (max-width: 1080px) {
  .steps--n5 { grid-template-columns: repeat(2, 1fr); }
  .steps--n5 > *,
  .steps--n5 > *:nth-last-child(-n+2) { grid-column: auto; }
  .steps--n5 > *:last-child { grid-column: span 2; }
}
@media (max-width: 700px) {
  .steps--n5 { grid-template-columns: 1fr; }
  .steps--n5 > *:last-child { grid-column: auto; }
}

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
}
.step::before {
  content: "";
  position: absolute;
  top: 2.35rem;
  right: -1.1rem;
  width: 1.1rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--teal) 0 4px, transparent 4px 8px);
}
.step:last-child::before { display: none; }
.step__num {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.step h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
.step p { color: var(--ink-2); font-size: 0.97rem; }

/* ---------- Technologie & Betrieb ---------- */
.ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.op {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.op:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(47, 163, 186, 0.4); }
.op .dot { margin-bottom: 0.9rem; }
.op h3 { font-size: 1.08rem; font-weight: 680; color: #fff; margin-bottom: 0.45rem; }
.op p { color: var(--dark-text); font-size: 0.94rem; }

/* ---------- Warum ADence ---------- */
.stats {
  /* Flex statt festem 5er-Grid: bei weniger Kennzahlen stehen sie mittig
     statt links angeschlagen. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.stats > * { flex: 1 1 10rem; max-width: 15rem; }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.2rem 1.3rem;
  text-align: center;
}
.stat b {
  display: block;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 760;
  font-stretch: 106%;
  letter-spacing: -0.02em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat b::after { content: "+"; }
/* Prozentwerte brauchen kein Plus */
.stat--exakt b::after { content: none; }
/* Die Beschriftung kann auch eine Ueberschrift sein (sektion_zahlen 'stufe',
   damit die Ueberschriftenstruktur der Originalseite erhalten bleibt). Sie
   muss dann trotzdem wie eine Beschriftung aussehen, nicht wie eine H2. */
.stat span,
.stat .stat__label {
  display: block;
  margin-top: 0.35rem;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.why {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* Ansprechpartner auf der Startseite: eigene Spaltenzahl, sonst greift die
   spaetere .team-Regel mit --spalten:4 und die drei Bilder werden winzig. */
.why__team .team { --spalten: 3; margin-top: 1.2rem; }
.member img { border-radius: var(--radius); box-shadow: var(--shadow); }
.member figcaption { margin-top: 0.7rem; }
.member b { display: block; font-size: 0.98rem; }
.member span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2); }

/* ---------- Kundenstimmen ---------- */
.quotes { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1.1rem; align-items: start; }
.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow);
}
.quote blockquote { font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.quote figcaption { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.quote b { display: block; }
.quote figcaption span { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-2); }

/* ---------- Wissen ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.post {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.post__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-ink);
  background: rgba(47, 163, 186, 0.12);
  border-radius: 99px;
  padding: 0.3rem 0.8rem;
}
.post h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.post__more {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
}
.post__more::after { content: " →"; }

.lexikon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  background: linear-gradient(115deg, rgba(47, 77, 158, 0.07), rgba(47, 163, 186, 0.09));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
}
.lexikon h3 { font-size: 1.25rem; font-weight: 720; margin-bottom: 0.3rem; }
.lexikon p { color: var(--ink-2); }

/* ---------- Abschluss-CTA ---------- */
.cta {
  position: relative;
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--dark);
  color: #fff;
  text-align: center;
}
.cta__bg {
  position: absolute;
  inset: 0;
  background:
    /* unten auf die Footer-Farbe blenden, oben auf die Grundfarbe */
    linear-gradient(0deg, #071020 0, transparent 180px),
    linear-gradient(180deg, var(--dark) 0, transparent 140px),
    radial-gradient(42rem 26rem at 50% 12%, rgba(47, 163, 186, 0.18), transparent 65%),
    radial-gradient(36rem 24rem at 15% 88%, rgba(47, 77, 158, 0.25), transparent 60%);
}
.cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(50rem 30rem at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(50rem 30rem at 50% 40%, #000 30%, transparent 75%);
}
.cta__inner { position: relative; max-width: 46rem; }
.cta h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.cta p { color: var(--dark-text); font-size: 1.13rem; margin-top: 1.1rem; }
.cta__note { font-family: var(--font-mono); font-size: 0.8rem !important; margin-top: 2rem !important; color: #8b98af !important; }

/* ---------- Footer ---------- */
.footer { background: #071020; color: var(--dark-text); padding-top: clamp(3.5rem, 6vw, 5rem); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}
.footer__brand img { width: 44px; height: 44px; margin-bottom: 1rem; }
.footer__claim {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7fd0e0;
  margin-bottom: 0.8rem;
}
.footer__brand p:last-child { font-size: 0.95rem; max-width: 30em; }
.footer__col h3 {
  font-size: 0.82rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
}
.footer__col a, .footer__col address {
  display: block;
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--dark-text);
  transition: color 0.15s ease;
}
.footer__col a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.4rem;
  border-top: 1px solid var(--dark-line);
  font-size: 0.85rem;
}
.footer__made { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.75rem; }


/* ---------- Nach-oben-Button ---------- */
.totop {
  position: fixed;
  right: clamp(10px, 1.4vw, 22px);
  bottom: 22px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--grad);
  border: 1px solid transparent;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(47, 77, 158, 0.65);
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.totop.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.totop svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.totop:hover {
  transform: translateY(-3px) scale(1.12);
  box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.15), 0 0 30px -2px rgba(63, 214, 232, 0.45), 0 14px 30px -10px rgba(0, 0, 0, 0.5);
}
.totop:focus-visible { outline: 2px solid #3fd6e8; outline-offset: 3px; }

/* ---------- Schnellkontakt-Leiste (rechts, immer sichtbar) ---------- */
.rail {
  position: fixed;
  right: clamp(10px, 1.4vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rail__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(10, 20, 38, 0.82);
  border: 1px solid rgba(127, 208, 224, 0.3);
  color: #9fdceb;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease;
}
.rail__btn svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rail__btn:hover {
  transform: scale(1.22);
  border-color: #3fd6e8;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.15), 0 0 30px -2px rgba(63, 214, 232, 0.45), 0 14px 30px -10px rgba(0, 0, 0, 0.6);
  z-index: 2;
}
.rail__btn:hover svg { transform: scale(1.08) rotate(-8deg); }
/* Puls-Ring beim Hover */
.rail__btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid rgba(63, 214, 232, 0.6);
  opacity: 0;
  pointer-events: none;
}
.rail__btn:hover::after { animation: ping 0.9s cubic-bezier(0, 0.6, 0.4, 1); }
/* Beschriftung fliegt links heraus */
.rail__label {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #eaf6fb;
  background: rgba(10, 20, 38, 0.92);
  border: 1px solid rgba(127, 208, 224, 0.3);
  border-radius: 99px;
  padding: 0.45rem 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rail__btn:hover .rail__label, .rail__btn:focus-visible .rail__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.rail__btn--cta {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}
.rail__btn--cta:hover { border-color: rgba(255, 255, 255, 0.6); }
.rail__btn:focus-visible {
  outline: 2px solid #3fd6e8;
  outline-offset: 3px;
}
/* Nur fuer Screenreader */
.rail__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


@media (max-width: 1340px) {
  .rail {
    top: auto;
    bottom: 12px;
    right: 50%;
    transform: translateX(50%);
    flex-direction: row;
    gap: 9px;
    background: rgba(10, 20, 38, 0.75);
    border: 1px solid rgba(127, 208, 224, 0.25);
    border-radius: 999px;
    padding: 7px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6);
  }
  .rail__btn { width: 42px; height: 42px; box-shadow: none; }
  .rail__btn svg { width: 18px; height: 18px; }
  .rail__btn:hover { transform: scale(1.12); }
  .rail__label { display: none; }
  .totop { bottom: 76px; right: 12px; width: 42px; height: 42px; }
  .totop svg { width: 18px; height: 18px; }
}


/* ============================================================
   Sektions-Atmosphaere + Hover-Effekte (Hero-Niveau fuer den Rest)
   ============================================================ */

/* Helle Sektionen: feines Raster + weiche Farb-Glows statt leerer Flaeche */
.section { position: relative; }
.section:not(.section--dark)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40rem 26rem at 90% 0%, rgba(47, 163, 186, 0.08), transparent 60%),
    radial-gradient(34rem 24rem at 2% 100%, rgba(47, 77, 158, 0.07), transparent 60%),
    linear-gradient(rgba(47, 77, 158, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 77, 158, 0.04) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px, 46px 46px;
}
/* Rotierender Deko-Ring, abwechselnd rechts oben / links unten */
.section:not(.section--dark)::after {
  content: "";
  position: absolute;
  width: 360px;
  aspect-ratio: 1;
  right: -140px;
  top: 50px;
  border: 1.5px dashed rgba(47, 77, 158, 0.16);
  border-radius: 50%;
  animation: ringspin 70s linear infinite;
  pointer-events: none;
}
.section--tint::after {
  right: auto;
  left: -150px;
  top: auto;
  bottom: 60px;
  animation-direction: reverse;
  border-color: rgba(47, 163, 186, 0.2);
}
@keyframes ringspin { to { rotate: 360deg; } }
.section > .wrap { position: relative; z-index: 1; }

/* Spotlight: Glow folgt dem Cursor ueber die Karte */
.spot { position: relative; }
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 163, 186, 0.14), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.spot:hover::before { opacity: 1; }
.section--dark .spot::before {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(63, 214, 232, 0.13), transparent 65%);
}

/* Mockups in Kernbereichen/Case heben sich beim Hover der Karte */
.core .mock, .case .mock {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.9s ease;
}
.core:hover .mock, .case:hover .mock {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 6px 12px rgba(12, 22, 38, 0.06), 0 30px 70px -22px rgba(34, 58, 124, 0.34);
}
.core, .case { transition: border-color 0.3s ease; }
.core:hover, .case:hover { border-color: rgba(47, 163, 186, 0.45); }

/* Prozess-Schritte: Nummer kippt an, Karte hebt sich */
.step { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.6s ease; }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); }
.step__num { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.step:hover .step__num { transform: rotate(-8deg) scale(1.12); }

/* Zahlen: Karte hebt sich, Zahl leuchtet */
.stat { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease; }
.stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.45); }
.stat b { transition: filter 0.3s ease; }
.stat:hover b { filter: drop-shadow(0 0 14px rgba(47, 163, 186, 0.45)); }

/* Team: Foto zoomt sanft im Rahmen */
.member { overflow: visible; }
.member img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; }
.member:hover img {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 16px rgba(12, 22, 38, 0.1), 0 30px 60px -18px rgba(34, 58, 124, 0.4);
}

/* Kundenlogos: heben sich und werden farbig */
.logos__item { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.35s ease; }
.logos__item:hover { transform: translateY(-4px); border-color: rgba(47, 163, 186, 0.5); box-shadow: var(--shadow); }

/* Zitate: dezente Anhebung */
.quote { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; }
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Betriebs-Karten (dunkle Sektion): Statuspunkt pulsiert beim Hover */
.op { transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.op:hover { transform: translateY(-4px); }
.op .dot { position: relative; }
.op:hover .dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 201, 139, 0.7);
  animation: ping 1.1s cubic-bezier(0, 0.6, 0.4, 1) infinite;
}

/* Lexikon-Banner reagiert */
.lexikon { transition: border-color 0.3s ease, box-shadow 0.35s ease; }
.lexikon:hover { border-color: rgba(47, 163, 186, 0.5); box-shadow: var(--shadow); }

/* DSGPT-Mockup schwebt dezent */
.dmock { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease; }
.dsgpt__visual:hover .dmock {
  transform: translateY(-8px) rotate(0.4deg);
  box-shadow: 0 40px 90px -22px rgba(0, 0, 0, 0.7), 0 0 50px -10px rgba(63, 214, 232, 0.25);
}


/* DSGPT-Chat: Nachrichten erscheinen nacheinander wie in einem echten Chat */
.dmock.play .dmock__msg {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.dmock.play .dmock__msg--user { transform: translateX(16px); }
.dmock.play .dmock__msg.is-on { opacity: 1; transform: none; }
.dmock__msg--ai { position: relative; }
.dmock__msg--ai.is-typing .dmock__text,
.dmock__msg--ai.is-typing .dmock__model { visibility: hidden; }
.dmock__dots {
  position: absolute;
  top: 0.95rem;
  left: 1rem;
  display: none;
  gap: 5px;
}
.dmock__msg--ai.is-typing .dmock__dots { display: flex; }
.dmock__dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7fd0e0;
  animation: chatdot 1s ease-in-out infinite;
}
.dmock__dots i:nth-child(2) { animation-delay: 0.15s; }
.dmock__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatdot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* Sektions-Partikel: liegt zwischen Hintergrund und Inhalt */
.section__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cta { overflow-x: clip; }
.cta .section__particles { z-index: 0; }

/* ---------- Scroll-Reveal ---------- */
/* Eintritts-Animation ueber die eigenstaendigen Properties translate/scale
   statt ueber transform. Sonst ueberschreibt der Endzustand
   (html.js [data-reveal].in) wegen hoeherer Spezifitaet JEDEN Hover-Lift,
   der mit transform arbeitet, und die Karten heben sich nie an. */
html.js [data-reveal] {
  opacity: 0;
  translate: 0 22px;
  scale: 0.985;
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s);
}
html.js [data-reveal].in { opacity: 1; translate: none; scale: none; }
/* Elemente mit Parallax bekommen ihr translate laufend vom Skript gesetzt:
   dort nur einblenden, sonst ueberschreiben sich beide gegenseitig */
html.js [data-reveal][data-plx] { translate: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .steps { --spalten: 2; }
  .step:nth-child(2)::before { display: none; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .logos__grid { grid-template-columns: repeat(4, 1fr); }
  .quotes { grid-template-columns: 1fr 1fr; }
  .quote:first-child { grid-column: 1 / -1; }
}

@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__actions .btn { display: none; }

  .hero { min-height: 0; }
  .hero__grid { padding-top: 6.5rem; }
  /* minmax(0,...) statt 1fr: sonst weitet ein nowrap-Inhalt die Spalte auf */
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__system { order: 2; }
  .hero__copy { order: 1; }
  .hero h1 { font-size: clamp(2.05rem, 5vw, 2.6rem); }

  .core, .core--flip { grid-template-columns: 1fr; }
  .core--flip .core__copy { order: 1; }
  .core--flip .core__visual { order: 2; }
  .case { grid-template-columns: 1fr; }
  .case__visual { order: 2; }
  .dsgpt { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .cases { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .ops { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .hero h1 { white-space: normal; text-wrap: balance; font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
  .hero__l1 { font-size: 0.62em; margin-bottom: 0.25em; }
  .hero h1 br { display: none; }
  .hero__type { font-size: 1rem; }
  .hero__badge {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    white-space: normal;
    max-width: 100%;
  }
  .hero__badge-status { padding: 0.5rem 0.7rem 0.5rem 0.85rem; }
  .hero__badge-text { flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0.85rem; }
  .goals { --spalten: 1; }
  .steps { --spalten: 1; }
  .step::before { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:last-child { grid-column: 1 / -1; }
  .logos__grid { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; }
  .ops { grid-template-columns: 1fr; }
  /* Spezifitaet: muss die spaetere Regel .team.team{--spalten:2} schlagen,
     sonst steht die dritte Person allein in der zweiten Reihe */
  .why__team .team.team { --spalten: 3; --luecke: 0.6rem; }
  .member b { font-size: 0.82rem; }
  .hero__cta .btn { width: 100%; }
  .lexikon { padding: 1.5rem 1.3rem; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; translate: none; scale: none; transition: none; }
  .sys__meter span, .sys__bars i { animation: none; }
  .sys__pulse--teal, .sys__pulse--blue { display: none; }
  .btn, .goal, .post, .case-sm { transition: none; }
  .sys__node, .sys__rail, .sys__lines path,
  .hero__orbit, .hero__marquee-track, .hero__caret { animation: none; }
  .hero__particles { display: none; }
  .orbwrap canvas { display: none; }
  .orbwrap__final { opacity: 1; transform: none; transition: none; }
  .orbwrap__final::after { animation: none; opacity: 0; }
  .orbwrap__logo, .orbwrap__front { animation: none; }
  .orbwrap__tilt { animation: none; transition: none; }
  .orbwrap__glow { animation: none; }
  .orbwrap__rings { opacity: 1; transition: none; }
  .orbwrap__rings i { animation: none; }
  .orbwrap__aurora { animation: none; opacity: 0.9; transition: none; }
  .nav__inner::before { animation: none; }
  .sys { transition: none; }
  .sys__node { transition: none; }
  .hero__badge::before, .hero__badge::after, .hero__badge-ping::after { animation: none; }
  .rail__btn, .rail__btn svg, .rail__label { transition: none; }
  .rail__btn:hover::after { animation: none; }
  .totop { transition: opacity 0.2s ease; transform: none; }
  .totop.is-visible { transform: none; }
  .hero [data-explode], .hero .sys__node[data-explode] { animation: none; }
  .section:not(.section--dark)::after { animation: none; }
  .spot::before { transition: none; }
  .core .mock, .case .mock, .step, .stat, .member img, .logos__item, .quote, .op, .dmock { transition: none; }
  .op:hover .dot::after { animation: none; }
  .dsgpt__chips span { transition: none; }
  .sys__node::after { transition: none; }
  .sys__lines { animation: none; opacity: 1; }
  .hero__orbit, .hero__orbit--2 { animation: none; opacity: 1; }
  .hero__marquee { animation: none; }
  .nav { transition: none; }
}

/* ============================================================
   2050-Upgrade: Scroll-Effekte, Live-System, Interaktivitaet
   ============================================================ */

/* ---------- Scroll-Fortschritt: Laserlinie am oberen Rand ---------- */
.scrollbeam {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 210;
  pointer-events: none;
}
.scrollbeam i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #3fd6e8);
  box-shadow: 0 0 12px rgba(63, 214, 232, 0.75), 0 0 4px rgba(63, 214, 232, 0.9);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ---------- Ueberschriften: Woerter steigen einzeln aus einer Maske ---------- */
.splitline .w {
  display: inline-block;
  overflow: hidden;
  /* Puffer, damit Ober- und Unterlaengen nicht abgeschnitten werden */
  padding: 0.12em 0.06em 0.18em;
  margin: -0.12em -0.06em -0.18em;
}
/* Kein will-change: die Transition laeuft nur einmal, eine Dauer-Promotion
   wuerde 40+ Wort-Spans fuer immer als eigene GPU-Layer halten */
.splitline .w > * {
  display: inline-block;
  font-style: normal;
  transform: translateY(120%) rotate(3deg);
  /* Groesserer Abstand zwischen den Woertern: bei 0.055s war die ganze Zeile
     nach einer halben Sekunde durch und der Effekt kaum wahrnehmbar. */
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--wi, 0) * 0.11s);
}
.splitline.in .w > * { transform: none; }

/* ---------- Deko-Orbs: weiche Farbkugeln mit Parallax ---------- */
.deco-orb {
  position: absolute;
  width: clamp(260px, 34vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(58px);
  opacity: 0.6;
  z-index: 0;
}
.deco-orb--teal { background: radial-gradient(circle at 40% 40%, rgba(47, 163, 186, 0.34), transparent 66%); }
.deco-orb--blue { background: radial-gradient(circle at 60% 40%, rgba(47, 77, 158, 0.32), transparent 66%); }

/* ---------- Live-System-Sektion (Board aus dem alten Hero) ---------- */
.section--system {
  background:
    /* Ober- und Unterkante auf die Grundfarbe blenden: sonst schneiden die
       Farbverläufe an der Sektionsgrenze hart ab und man sieht eine Kante */
    linear-gradient(180deg, var(--dunkel-sektion) 0, transparent 160px),
    linear-gradient(0deg, var(--dunkel-sektion) 0, transparent 160px),
    radial-gradient(46rem 30rem at 10% 12%, rgba(47, 77, 158, 0.24), transparent 60%),
    radial-gradient(52rem 34rem at 96% 82%, rgba(47, 163, 186, 0.16), transparent 62%),
    var(--dunkel-sektion);
}
/* Feines Technik-Raster wie im Hero */
.section--system::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(64rem 42rem at 68% 45%, #000 30%, transparent 80%);
  mask-image: radial-gradient(64rem 42rem at 68% 45%, #000 30%, transparent 80%);
}
.sysgrid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sysgrid h2 { color: #fff; }

/* Die Sektion bleibt stehen, waehrend sich das Board zusammensetzt.
   Erst wenn der Aufbau durch ist, laeuft die Seite weiter. */
.section--system { padding: 0; }
.sysstage { position: relative; height: 205vh; }
.syspin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(4.5rem, 8vh, 6.5rem) 0 clamp(2rem, 4vh, 3.5rem);
}
.syspin > .wrap { width: 100%; }

@media (max-width: 900px) {
  .sysstage { height: auto; }
  .syspin { position: static; min-height: 0; padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sysstage { height: auto !important; }
  .syspin { position: static; min-height: 0; padding: 4rem 0; }
}
.syswrap { position: relative; perspective: 1400px; }
.syswrap .sys { max-width: 600px; }

/* Die Karten haengen am Scroll: --bau laeuft von 0 (auseinander) auf 1
   (zusammengesetzt) und wieder zurueck. Jede Karte hat ihren eigenen
   Einsatzpunkt (--bo), damit sie gestaffelt eintreffen.
   floaty arbeitet auf `translate`, transform bleibt hier frei. */
html.js .syswrap:not(.is-live) [data-explode] { opacity: 0; }
html.js .syswrap:not(.is-live) .sys__lines { opacity: 0; }

html.js .syswrap.is-live [data-explode] {
  /* eigener Fortschritt: erst ab --bo, dann ueber 0.62 der Strecke */
  --b: clamp(0, calc((var(--bau, 0) - var(--bo, 0)) / 0.62), 1);
  /* weich abrunden, sonst wirkt der Anflug mechanisch */
  --bw: calc(var(--b) * var(--b) * (3 - 2 * var(--b)));
  opacity: var(--bw);
  transform:
    translate(calc((1 - var(--bw)) * var(--ex, 0px)), calc((1 - var(--bw)) * var(--ey, 0px)))
    rotate(calc((1 - var(--bw)) * var(--er, 0deg)))
    scale(calc(var(--es, 0.85) + (1 - var(--es, 0.85)) * var(--bw)));
  filter: blur(calc((1 - var(--bw)) * 8px));
}
/* Der Zoom beim Darueberfahren muss die Aufbau-Regel oben schlagen,
   sonst bleibt die Karte klein. Im gebauten Zustand ist der Aufbau-Anteil
   ohnehin neutral, deshalb reicht hier das reine Vergroessern. */
html.js .syswrap.is-live.ist-bereit .sys .sys__node.is-zoom {
  transform: scale(1.85);
  filter: none;
  opacity: 1;
}

/* Einsatzpunkte: die mittlere Karte zuerst, dann von aussen nach innen */
html.js .syswrap.is-live .sys__node--ki { --bo: 0; }
html.js .syswrap.is-live .sys__node--web { --bo: 0.1; }
html.js .syswrap.is-live .sys__node--crm { --bo: 0.16; }
html.js .syswrap.is-live .sys__node--task { --bo: 0.24; }
html.js .syswrap.is-live .sys__node--dash { --bo: 0.3; }
html.js .syswrap.is-live .sys__rail { --bo: 0.36; }

/* Das Schweben startet erst, wenn alles steht */
html.js .syswrap.ist-gebaut .sys__node[data-explode] {
  animation: floaty var(--fd, 8s) ease-in-out infinite;
}
/* Die Verbindungslinien zeichnen sich mit dem Aufbau */
html.js .syswrap.is-live .sys__lines {
  opacity: clamp(0, calc((var(--bau, 0) - 0.42) / 0.3), 1);
  animation: none;
}

/* Schritt-Liste links: laeuft synchron zum Board, klickbar */
.sysflow { list-style: none; margin-top: 1.6rem; display: grid; gap: 0.45rem; }
.sysflow__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  color: var(--dark-text);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.4;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.sysflow__item b {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: #7fd0e0;
  border: 1px solid rgba(127, 208, 224, 0.3);
  border-radius: 8px;
  padding: 0.22rem 0.5rem;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sysflow__item:hover { border-color: rgba(63, 214, 232, 0.45); background: rgba(255, 255, 255, 0.055); color: #fff; }
.sysflow__item.is-on {
  border-color: rgba(63, 214, 232, 0.75);
  background: rgba(63, 214, 232, 0.09);
  color: #fff;
  transform: translateX(7px);
  box-shadow: 0 0 26px -8px rgba(63, 214, 232, 0.45);
}
.sysflow__item.is-on b { background: var(--grad); color: #fff; border-color: transparent; }
.sysflow__hint { margin-top: 1.1rem; font-family: var(--font-mono); font-size: 0.74rem; color: #8b98af; }

/* ---------- Kernbereiche: Karten stapeln sich beim Scrollen ---------- */
@media (min-width: 941px) {
  html.js .cores-stack .core {
    position: sticky;
    top: calc(104px + var(--si, 0) * 30px);
    scale: var(--ss, 1);
    filter: brightness(var(--sb, 1));
    transform-origin: 50% 0;
  }
  html.js .cores-stack .core:nth-of-type(1) { --si: 0; }
  html.js .cores-stack .core:nth-of-type(2) { --si: 1; }
  html.js .cores-stack .core:nth-of-type(3) { --si: 2; }
  html.js .cores-stack .core + .core { margin-top: 3.5rem; }
}

/* ---------- Prozess: gepinnte Scroll-Story ---------- */
.prozess__count { display: none; }
.steps--flow .step::before { display: none; }
.steps--flow { position: relative; }
html.js .steps--flow .step {
  opacity: 0.35;
  transform: translateY(26px) scale(0.97);
  filter: saturate(0.4);
  transition:
    opacity 0.5s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease,
    border-color 0.3s ease,
    box-shadow 0.35s ease;
}
html.js .steps--flow .step.is-on {
  opacity: 1;
  transform: none;
  filter: none;
  border-color: rgba(47, 163, 186, 0.5);
  box-shadow: var(--shadow-lg);
}
/* Karten liegen ueber der Fortschrittslinie, sonst zieht der Leuchtstrich
   quer ueber die weissen Karten statt nur durch die Luecken */
.steps--flow .step { z-index: 1; }
.steps--flow .step.is-on .step__num { animation: numpulse 2.2s ease-out infinite; }
@keyframes numpulse {
  0% { box-shadow: 0 0 0 0 rgba(63, 214, 232, 0.45); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(63, 214, 232, 0); }
}

/* Pinning braucht Hoehe: unter 640px Fensterhoehe wuerde der gepinnte
   Inhalt unten abgeschnitten und waere gar nicht mehr wegscrollbar */
@media (min-width: 1081px) and (min-height: 640px) {
  html.js .prozess { padding: 0; }
  html.js .prozess__stage { height: 220vh; }
  html.js .prozess__pin {
    position: sticky;
    top: 0;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: stretch;
    padding: 5.2rem 0 3.6rem;
  }
  /* Kopf oben, Karten mittig im freien Raum, Abschluss unten */
  html.js .prozess__pin > .wrap {
    width: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: clamp(1.6rem, 4vh, 3rem);
    align-items: center;
  }
  html.js .prozess__pin .steps--flow { align-self: center; }
  /* Der feste Abstand unter dem Kopf wuerde die Karten aus der Mitte
     druecken: hier uebernimmt die Aufteilung des Rasters. */
  html.js .prozess__pin .section__head { margin-bottom: 0; padding-bottom: 0; }
  /* Die Fortschrittslinie ist das letzte Element im Kopf: ihr Kasten darf
     unten keinen Rest mitschleppen, sonst sitzen die Karten zu tief. */
  html.js .prozess__pin .prozess__spur { margin-bottom: 0; }
  html.js .prozess .prozess__count {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--ink-2);
    margin-top: 1.2rem;
  }
  html.js .prozess .prozess__count b {
    color: var(--teal-ink);
    font-size: 1.5rem;
    font-weight: 600;
  }
  html.js .prozess .prozess__spur {
    display: block;
    width: min(360px, 34%);
    height: 3px;
    margin-top: 0.85rem;
    border-radius: 3px;
    background: rgba(34, 58, 124, 0.1);
    overflow: hidden;
  }
  html.js .prozess .prozess__spur i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--grad);
    transform: scaleX(var(--flow, 0));
    transform-origin: left center;
    transition: transform 140ms linear;
  }
  /* Leuchtende Verbindungslinie, die sich mit dem Scrollen fuellt */
  .steps--flow::before, .steps--flow::after {
    content: "";
    position: absolute;
    top: 3.05rem;
    left: 2rem;
    right: 2rem;
    height: 2px;
    z-index: 0;
  }
  .steps--flow::before { background: var(--line); }
  .steps--flow::after {
    background: linear-gradient(90deg, var(--blue), #3fd6e8);
    box-shadow: 0 0 14px rgba(63, 214, 232, 0.6);
    transform: scaleX(var(--flow, 0));
    transform-origin: left;
  }
}

/* ---------- Karten-Tilt: rotate-Eigenschaft kollidiert nicht mit Hover-Lift ---------- */
.posts, .cases, .quotes, .ops, .stats { perspective: 1100px; }

.post, .case-sm { transition: transform 0.22s ease, box-shadow 0.22s ease, rotate 0.3s ease-out; }
.quote { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, rotate 0.3s ease-out; }
.stat { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease, rotate 0.3s ease-out; }
.op { transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.3s ease-out; }

/* ---------- Footer: riesige Wortmarke, Farbe zieht durch ---------- */
.footer__word {
  position: relative;
  margin: clamp(1.5rem, 4vw, 3rem) auto 0;
  max-width: var(--wrap);
  padding-inline: 1rem;
  font-size: clamp(3.2rem, 13vw, 10.5rem);
  line-height: 1;
  font-weight: 830;
  font-stretch: 110%;
  letter-spacing: -0.03em;
  text-align: center;
  user-select: none;
}
.footer__word-line, .footer__word-fill { display: block; }
.footer__word-line {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.14);
}
.footer__word-line i { font-style: normal; -webkit-text-stroke: 1.5px rgba(63, 214, 232, 0.55); }
.footer__word-fill {
  position: absolute;
  inset: 0;
  padding-inline: 1rem;
  background: linear-gradient(100deg, #57b6ff 5%, #3fd6e8 55%, #2fa3ba 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(63, 214, 232, 0.22));
  clip-path: inset(-5% 100% -5% 0);
  transition: clip-path 1.5s cubic-bezier(0.6, 0, 0.2, 1) 0.2s;
}
.footer__word-fill i { font-style: normal; }
.footer__word.in .footer__word-fill { clip-path: inset(-5% 0% -5% 0); }

/* ---------- Leucht-Cursor (nur Maus, nie Touch) ---------- */
.cursorfx { display: none; }
html.js .cursorfx.is-on { display: block; }
.cursorfx__dot, .cursorfx__ring, .cursorfx__glow {
  position: fixed;
  /* Muss ueber dem Einwilligungsbanner (z-index 3000) liegen, sonst ist im
     Dialog gar kein Zeiger zu sehen: die Seite blendet den echten aus. */
  top: 0; left: 0;
  /* Ueber allem: Header (100), Schnellkontakt (90) und Fortschrittslinie (210).
     Sonst verschwindet der eigene Zeiger hinter der Kopfleiste. */
  z-index: 3500;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.cursorfx__dot {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #3fd6e8;
  box-shadow: 0 0 10px rgba(63, 214, 232, 0.9);
}
.cursorfx__ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(63, 214, 232, 0.5);
  transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, border-color 0.25s ease;
}
.cursorfx.is-link .cursorfx__ring {
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-color: rgba(63, 214, 232, 0.95);
}
.cursorfx__glow {
  width: 380px; height: 380px;
  margin: -190px 0 0 -190px;
  background: radial-gradient(circle, rgba(63, 214, 232, 0.075), transparent 60%);
  mix-blend-mode: screen;
}

/* ---------- Responsive fuer die neuen Teile ---------- */
@media (max-width: 940px) {
  .sysgrid { grid-template-columns: 1fr; }
  .syswrap { margin-top: 1.5rem; }
  .sysflow__hint { display: none; }
}
@media (pointer: coarse) {
  .cursorfx { display: none !important; }
}

/* ---------- Reduzierte Bewegung: alles Neue stillegen ---------- */
@media (prefers-reduced-motion: reduce) {
  .scrollbeam i { box-shadow: none; }
  .cursorfx { display: none !important; }
  .splitline .w > * { transform: none !important; transition: none; }
  html.js .syswrap:not(.is-live) [data-explode] { opacity: 1; animation: none; }
  html.js .syswrap.is-live [data-explode] { opacity: 1; transform: none; filter: none; }
  html.js .syswrap.is-live .sys__lines { opacity: 1; }
  html.js .syswrap:not(.is-live) .sys__lines { opacity: 1; animation: none; }
  .syswrap.is-live [data-explode], .syswrap.is-live .sys__node[data-explode] { animation: none; }
  .sysflow__item, .sysflow__item b { transition: none; }
  .sysflow__item.is-on { transform: none; }
  html.js .cores-stack .core { position: static; scale: none; filter: none; }
  html.js .steps--flow .step { opacity: 1; transform: none; filter: none; transition: none; }
  .steps--flow .step.is-on .step__num { animation: none; }
  html.js .prozess { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
  html.js .prozess__stage { height: auto; }
  html.js .prozess__pin { position: static; min-height: 0; display: block; padding: 0; }
  /* Zaehler haengt an der Scroll-Story, die hier nicht laeuft */
  html.js .prozess .prozess__count,
  html.js .prozess .prozess__spur { display: none; }
  .steps--flow::after { transform: none; }
  /* rotate abschalten UND die Transitionen wieder stilllegen: die neuen
     Tilt-Regeln stehen spaeter im Stylesheet und wuerden sonst gewinnen */
  .post, .case-sm, .quote, .stat, .op { rotate: none !important; }
  .goal, .post, .case-sm, .quote, .stat, .op { transition: none; }
  .deco-orb { display: none; }
  .footer__word-fill { transition: none; clip-path: inset(-5% 0% -5% 0); }
}

/* ============================================================
   Unterseiten: Seitenkopf, Brotkrumen, Prosa, FAQ
   ============================================================ */

/* ---------- Seitenkopf (dunkel wie der Hero, aber flacher) ---------- */
.page-hero {
  position: relative;
  background: var(--dark);
  color: #fff;
  /* Volle Bildschirmhoehe, Inhalt mittig: der Hero traegt die Seite, statt
     nur ein Streifen ueber dem Inhalt zu sein. min-height statt height,
     damit lange Ueberschriften nicht abgeschnitten werden. */
  min-height: 100vh;
  min-height: 100svh;          /* Handy: ohne die Browserleisten rechnen */
  display: grid;
  align-items: center;
  padding: clamp(7rem, 12vh, 9rem) 0 clamp(4rem, 8vh, 6rem);
  overflow-x: clip;
  text-align: center;
}
.page-hero .hero__particles { z-index: 1; }
.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 58rem;
  /* Mittig gesetzt: bei zentriertem Text wirkt linksbuendig verrutscht */
  margin-inline: auto;
}
.page-hero .krumen ol { justify-content: center; }
.page-hero .hero__cta { justify-content: center; }
.page-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  font-stretch: 102%;
  letter-spacing: -0.026em;
  margin-top: 0.2rem;
}
.page-hero__text {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--dark-text);
  max-width: 42em;
  margin: 1.2rem auto 0;
}
.page-hero .hero__cta { margin-top: 2rem; }
/* Sanfter Auslauf nach unten, damit die folgende Sektion nicht hart anstoesst */
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(245, 247, 251, 0.06));
  pointer-events: none;
}

/* ---------- Brotkrumen ---------- */
.krumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: #8b98af;
  margin-bottom: 1.4rem;
}
.krumen li + li::before { content: "/"; margin-right: 0.7rem; color: rgba(255, 255, 255, 0.25); }
.krumen a { color: #7fd0e0; transition: color 0.15s ease; }
.krumen a:hover { color: #fff; }
.krumen [aria-current] { color: var(--dark-text); }

/* ---------- Fliesstext-Sektionen ---------- */
.prosa { max-width: 46rem; }
.prosa > * + * { margin-top: 1.1rem; }
.prosa h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: 2.2rem;
}
.prosa p { color: var(--ink-2); }
.section--dark .prosa p { color: var(--dark-text); }
.prosa .ticks { margin-top: 1rem; }
/* Erstes Wort-Highlight wie auf der Startseite */
.prosa strong { font-weight: 660; color: var(--ink); }
.section--dark .prosa strong { color: #fff; }

/* Sektionsbild neben dem Text */
.prosa__bild {
  margin-top: 1.8rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.prosa__bild img { width: 100%; }

/* ---------- Haeufige Fragen ---------- */
/* Mittig gesetzt: linksbuendig liess die rechte Haelfte leer.
   Die Fragen selbst bleiben linksbuendig, nur der Block wird zentriert. */
.faq { display: grid; gap: 0.7rem; max-width: 52rem; margin-inline: auto; }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 1.4rem;
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}
.faq__item[open] { border-color: rgba(47, 163, 186, 0.45); box-shadow: var(--shadow); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-weight: 620;
  font-size: 1.04rem;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--teal-ink);
  border-bottom: 2px solid var(--teal-ink);
  rotate: 45deg;
  transition: rotate 0.3s ease;
}
.faq__item[open] summary::after { rotate: -135deg; }
.faq__item p { color: var(--ink-2); padding-bottom: 1.2rem; max-width: 44em; }

/* ---------- Verwandte Seiten: Karten sind Links ---------- */
a.case-sm { display: block; }
a.case-sm::after {
  content: "Weiterlesen →";
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
}

/* ---------- Responsive ---------- */
@media (max-width: 620px) {
  .page-hero { padding-top: 7rem; }
  .page-hero h1 { font-size: clamp(1.8rem, 7.6vw, 2.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item, .faq__item summary::after { transition: none; }
  .page-hero .hero__particles { display: none; }
}

/* ============================================================
   Übersichtsseiten: Blog-Liste und Lexikon
   ============================================================ */

/* ---------- Blog: Liste statt Dreierraster (viele Beiträge) ---------- */
.posts--liste { grid-template-columns: repeat(2, 1fr); }
.posts--liste .post h2 {
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
}
.posts--liste .post p {
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.55;
}
@media (max-width: 940px) { .posts--liste { grid-template-columns: 1fr; } }

/* ---------- Lexikon: Sprungleiste und Buchstabengruppen ---------- */
.abc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.abc a {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
}
.abc a:hover {
  transform: translateY(-3px);
  border-color: transparent;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(47, 77, 158, 0.55);
}

.abc__gruppe { margin-bottom: clamp(2rem, 4vw, 3.2rem); scroll-margin-top: 120px; }
.abc__titel {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--line);
}
.abc__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.7rem;
}
.abc__eintrag {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.3s ease;
}
.abc__eintrag:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 163, 186, 0.5);
  box-shadow: var(--shadow);
}
.abc__eintrag b { font-size: 1rem; font-weight: 660; letter-spacing: -0.01em; }
.abc__eintrag span {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .abc a, .abc__eintrag { transition: none; }
  .abc a:hover, .abc__eintrag:hover { transform: none; }
}

/* ---------- Lesestrecke: mehrere Abschnitte in einer Sektion ---------- */
/* Ohne das bekaeme jeder Absatz eine bildschirmhohe Sektion und die Seite
   waere eine endlose Scrollstrecke aus Leerraum. */
.section--lese { padding: clamp(3rem, 5.5vw, 5rem) 0; }
.prosa--lang { max-width: 44rem; }
.prosa--lang h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-top: 2.8rem;
}
.prosa--lang > h2:first-child { margin-top: 0; }
.prosa--lang h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  margin-top: 1.9rem;
}
.prosa--lang p + p { margin-top: 0.9rem; }
.prosa--lang .ticks { margin-block: 1.2rem; }
.prosa--lang .prosa__bild { margin-block: 1.8rem; }

/* Zwei aufeinanderfolgende Lesestrecken brauchen keine doppelte Luft */
.section--lese + .section--lese { padding-top: 0; }
/* ... aber nur, solange der Hintergrund derselbe bleibt. Wechselt er, klebte
   die Kante der getoenten Flaeche sonst direkt an der Ueberschrift. */
.section--lese:not(.section--tint) + .section--lese.section--tint,
.section--lese.section--tint + .section--lese:not(.section--tint) { padding-top: clamp(3rem, 5.5vw, 5rem); }

/* Link von einem Kernbereich auf seine Detailseite */
.core__link { margin-top: 1.4rem; }
.core__link a {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--teal-ink);
  border-bottom: 1px solid rgba(30, 123, 144, 0.35);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.core__link a::after { content: " →"; }
.core__link a:hover { color: var(--blue); border-color: var(--blue); }

/* ============================================================
   Einstiegs-Karten aufgewertet (wirken sonst zu beiläufig für
   die wichtigsten Einstiegspunkte der Seite)
   ============================================================ */

/* Ikone und Ueberschrift stehen nebeneinander statt das Symbol allein
   ueber dem Text: wirkt weniger nach Standard-Kachel */
.goal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon titel"
    "text text"
    "link link";
  column-gap: 0;
  row-gap: 0.8rem;
  align-items: center;
  border-radius: calc(var(--radius) + 2px);
  padding: 1.7rem 1.6rem 1.5rem;
  /* Weich und traege: der Hub soll sich anfuehlen wie Anheben, nicht wie
     Umschalten. background-image ist NICHT animierbar, der Verlaufsrand
     liegt deshalb als eigene Ebene darueber (::after). */
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.goal__icon  { grid-area: icon; }
.goal__title { grid-area: titel; }
.goal__text  { grid-area: text; }
.goal__link  { grid-area: link; }

@media (hover: hover) {
  .goal {
    transition:
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.4s ease,
      background-color 0.4s ease;
  }
  .goal:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(12, 22, 38, 0.05), 0 26px 56px -22px rgba(34, 58, 124, 0.32);
  }
  /* Die Nummern-Kachel zieht ruhig mit, nicht schlagartig */
  /* Doppelte Klasse, damit diese Kurve die allgemeine 0.3s-Regel schlaegt */
  .goals.sp-2 .goal > .goal__num.goal__num {
    transition:
      background 0.55s cubic-bezier(0.4, 0.05, 0.25, 1),
      border-color 0.5s ease,
      color 0.5s ease,
      transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
  }
  .goals.sp-2 .goal:hover > .goal__num { transform: rotate(-5deg) scale(1.06); }
}

/* Ziffer bleibt klein und dezent oben rechts (wie urspruenglich) */

/* Icon-Kachel im Markenverlauf statt flächigem Hellblau */
.goal__icon {
  margin-right: 1rem;
  width: 48px; height: 48px;
  border-radius: 13px;
  background: var(--grad);
  box-shadow: 0 8px 20px -8px rgba(47, 77, 158, 0.55);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}
.goal__icon svg { width: 23px; height: 23px; stroke: #fff; }
/* Grundrand der Karte, ueber dem der Verlaufsrahmen liegt */
.goal { background: var(--surface); border: 1px solid var(--line); }
/* Ueberschrift sitzt neben dem Symbol und darf zweizeilig werden.
   Rechts bleibt Platz, damit lange Titel nicht unter die Ziffer laufen. */
.goal__title { line-height: 1.25; padding-right: 2.1rem; }
@media (hover: hover) {
  .goal:hover .goal__icon {
    transform: rotate(-6deg) scale(1.08);
    box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.14), 0 14px 30px -10px rgba(47, 77, 158, 0.65);
  }
}

.goal__title { font-size: 1.22rem; letter-spacing: -0.018em; }
.goal__text { position: relative; z-index: 1; }

/* Der Verweis unten bekommt einen Pfeil, der beim Hover mitgeht */
.goal__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.3rem;
}
.goal__link::after {
  content: "→";
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .goal:hover .goal__link::after { transform: translateX(5px); }
}

/* Verlaufsrahmen als eigene Ebene: oben kraeftig, laeuft um die Ecken herum
   und nach unten aus. Wird per Deckkraft eingeblendet, also weich animierbar. */
.goal::after {
  inset: 0;
  top: 0;
  bottom: 0;
  height: auto;
  width: auto;
  border-radius: inherit;
  padding: 1.6px;
  background: linear-gradient(170deg,
      #3fd6e8 0%,
      var(--blue) 22%,
      rgba(47, 77, 158, 0.35) 48%,
      transparent 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transform: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
@media (hover: hover) {
  .goal:hover::after { opacity: 1; }
}

@media (max-width: 620px) {
  .goal__icon { margin-right: 0.85rem; width: 44px; height: 44px; }
  .goal__icon svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .goal, .goal__num, .goal__icon, .goal__link::after { transition: none; }
  .goal:hover { transform: none; }
  .goal:hover .goal__num { transform: none; }
  .goal:hover .goal__icon { transform: none; }
  .goal:hover .goal__link::after { transform: none; }
}


/* ------------------------------------------------------------
   Karten haben ZWEI Animationen: das Einblenden beim Scrollen
   (opacity/translate/scale) und den Hover (transform/box-shadow).
   Die Reveal-Regel html.js [data-reveal] ist spezifischer als .goal
   und wuerde die transition-Eigenschaft komplett ersetzen, wodurch
   der Hover hart umspringt. Deshalb hier BEIDE Gruppen zusammen,
   mit gleicher Spezifitaet und spaeter im Stylesheet.
   ------------------------------------------------------------ */
html.js .goal,
html.js .post,
html.js .case-sm,
html.js .quote,
html.js .stat,
html.js .op,
html.js .step,
html.js .lkarte,
html.js .preis,
html.js .teamer,
html.js .leistung__liste,
html.js .galerie__bild,
html.js .member {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    background-color 0.35s ease,
    rotate 0.35s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  html.js .step,
  html.js .lkarte,
  html.js .preis,
  html.js .teamer,
  html.js .leistung__liste,
  html.js .galerie__bild,
  html.js .member,
  html.js .goal,
  html.js .post,
  html.js .case-sm,
  html.js .quote,
  html.js .stat,
  html.js .op { transition: none; }
}

/* ============================================================
   Einstiegs-Karten: scroll-gekoppeltes Zusammensetzen
   Die vier Karten fahren aus ihren Richtungen ins Raster, gesteuert
   vom Scroll-Fortschritt (--auf, 0..1). Bewusst anders als der
   Sticky-Stapel der Kernbereiche.
   ============================================================ */

/* Richtungen im Stylesheet statt inline: nur so koennen Media Queries sie
   fuer schmale Schirme ueberschreiben (Inline-Styles gewinnen sonst immer).
   Die Karten starten weit auseinander und tief im Raum, dann fahren sie an
   ihren Platz. Werte pro Karte, damit der Einflug nicht gleichfoermig wirkt. */
/* --fk = Drehwinkel, --fz = Anteil der Z-Achse an der Drehachse. Die Achse
   (1 0 z) kippt die Karte nach hinten UND legt sie leicht schraeg, ohne dass
   zwei getrennte rotate-Werte noetig waeren. */
html.js .goals [data-fold]:nth-child(1) { --fx: -160px; --fy:  70px; --fz: -0.45; --fk: 12deg; --ft: -420px; }
html.js .goals [data-fold]:nth-child(2) { --fx:  160px; --fy:  70px; --fz:  0.45; --fk: 12deg; --ft: -360px; }
html.js .goals [data-fold]:nth-child(3) { --fx: -140px; --fy: 120px; --fz:  0.35; --fk: 15deg; --ft: -520px; }
html.js .goals [data-fold]:nth-child(4) { --fx:  140px; --fy: 120px; --fz: -0.35; --fk: 15deg; --ft: -460px; }

/* Der Raum, in dem die Karten fliegen. Ohne perspective bleibt der
   Tiefenversatz wirkungslos. */
html.js .goals-pin > .goals {
  perspective: 1400px;
  perspective-origin: 50% 42%;
}
/* Leuchtender Kern hinter dem Raster: gibt dem Einflug ein Ziel */
html.js .goals-pin > .goals::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38rem 22rem at 50% 45%, rgba(47, 163, 186, 0.16), transparent 68%),
    radial-gradient(26rem 18rem at 22% 78%, rgba(47, 77, 158, 0.12), transparent 70%);
  filter: blur(6px);
}
html.js .goals-pin { position: sticky; }
html.js .goals-pin > .goals { position: relative; isolation: isolate; }

/* Bei flachen Fenstern faellt der Startversatz kleiner aus, sonst steht die
   unterste Karte im ersten Moment ausserhalb der Buehne */
@media (max-height: 820px) {
  html.js .goals [data-fold]:nth-child(1),
  html.js .goals [data-fold]:nth-child(2) { --fy: 18px; }
  html.js .goals [data-fold]:nth-child(3),
  html.js .goals [data-fold]:nth-child(4) { --fy: 24px; }
}

/* Die Nummer blendet zuletzt auf und waechst dabei: kleiner Akzent, der den
   Einflug abschliesst. */
html.js .goals [data-fold] .goal__num {
  opacity: calc(-0.4 + 1.4 * var(--auf));
  scale: calc(0.7 + 0.3 * var(--auf));
  transform-origin: 100% 0;
}
html.js [data-fold] {
  /* --auf wird vom Scroll-Motor gesetzt; ohne JS bleibt alles sichtbar */
  --auf: 0;
  translate:
    calc(var(--fx, 0px) * (1 - var(--auf)))
    calc(var(--fy, 0px) * (1 - var(--auf)))
    calc(var(--ft, 0px) * (1 - var(--auf)));
  /* Kippung um die X-Achse plus Drehung in der Ebene: zusammen sieht der
     Einflug raeumlich aus statt nur verschoben. */
  rotate: 1 0 var(--fz, 0) calc(var(--fk, 0deg) * (1 - var(--auf)));
  scale: calc(0.94 + 0.06 * var(--auf));
  opacity: calc(0.15 + 0.85 * var(--auf));
  /* Kurze Glättung, damit einzelne Frames nicht hart springen */
  transition:
    translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    /* Hover muss auch waehrend der Scroll-Bewegung weich bleiben */
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: translate, scale, opacity;
}
/* Ist die Karte angekommen, uebernimmt wieder der Hover die Bewegung */
html.js [data-fold].is-fertig {
  --auf: 1;
  translate: none;
  rotate: none;
  scale: none;
  opacity: 1;
  will-change: auto;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}

/* Mobil: nur von unten, kein seitlicher Versatz und keine Drehung.
   Auf schmalen Schirmen wirkt seitliches Einfahren unruhig. */
@media (max-width: 620px) {
  html.js .goals [data-fold]:nth-child(1),
  html.js .goals [data-fold]:nth-child(2),
  html.js .goals [data-fold]:nth-child(3),
  html.js .goals [data-fold]:nth-child(4) {
    --fx: 0px;
    --fy: 30px;
    --fr: 0deg;
  }
  html.js [data-fold] { scale: calc(0.97 + 0.03 * var(--auf)); }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-fold],
  html.js [data-fold].is-fertig {
    translate: none;
    rotate: none;
    scale: none;
    opacity: 1;
    transition: none;
    will-change: auto;
  }
}

/* ---------- Feine Trennung zwischen zwei dunklen Sektionen ----------
   Die Farbverläufe gehen nahtlos ineinander über, deshalb braucht es
   eine dezente Linie, damit man den Schnitt trotzdem wahrnimmt. */
.section--system::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: min(var(--wrap), 88%);
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(127, 208, 224, 0.14) 18%,
      rgba(127, 208, 224, 0.42) 50%,
      rgba(127, 208, 224, 0.14) 82%,
      transparent);
  pointer-events: none;
}

/* ============================================================
   Projektkarten: richten sich beim Scrollen auf
   Dritter Effekt der Seite, bewusst anders als der Sticky-Stapel
   (Kernbereiche) und das Zusammensetzen (Einstiegskarten).
   ============================================================ */
.cases { perspective: 1400px; }

html.js [data-rise] {
  --auf: 0;
  transform-origin: 50% 100%;
  /* Aus der Fläche nach vorn klappen */
  rotate: x calc(-72deg * (1 - var(--auf)));
  translate: 0 calc(28px * (1 - var(--auf)));
  opacity: calc(0.1 + 0.9 * var(--auf));
  transition:
    rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    /* Hover muss auch waehrend der Scroll-Bewegung weich bleiben */
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: rotate, translate, opacity;
  backface-visibility: hidden;
}
html.js [data-rise].is-fertig {
  --auf: 1;
  rotate: none;
  translate: none;
  opacity: 1;
  will-change: auto;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobil flacher: ein steiler Winkel wirkt auf schmalen Schirmen unruhig */
@media (max-width: 620px) {
  html.js [data-rise] {
    rotate: x calc(-38deg * (1 - var(--auf)));
    translate: 0 calc(20px * (1 - var(--auf)));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-rise],
  html.js [data-rise].is-fertig {
    rotate: none;
    translate: none;
    opacity: 1;
    transition: none;
    will-change: auto;
  }
}

/* ============================================================
   Grosse Projektkarte: die beiden Haelften fahren zusammen
   Vierter Effekt: das Mockup dreht sich heran wie ein zugewandter
   Bildschirm, der Text schiebt sich von der Seite dazu.
   ============================================================ */
html.js [data-turn] {
  --auf: 0;
  /* Die Karte kommt als Ganzes aus der Tiefe nach vorn */
  scale: calc(0.93 + 0.07 * var(--auf));
  opacity: calc(0.3 + 0.7 * var(--auf));
  transition:
    scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    /* Hover muss auch waehrend der Scroll-Bewegung weich bleiben */
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: scale, opacity;
}
/* Das Mockup zieht leicht versetzt nach: erzeugt Tiefe in der Karte */
html.js [data-turn] .case__visual {
  translate: 0 calc(34px * (1 - var(--auf)));
  transition: translate 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: translate;
}
html.js [data-turn] .case__copy {
  translate: 0 calc(14px * (1 - var(--auf)));
  transition: translate 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: translate;
}
html.js [data-turn].is-fertig,
html.js [data-turn].is-fertig .case__visual,
html.js [data-turn].is-fertig .case__copy {
  scale: none;
  translate: none;
  opacity: 1;
  will-change: auto;
}
/* Nach dem Ankommen wieder die weichen Hover-Uebergaenge der Karte */
html.js [data-turn].is-fertig {
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-turn],
  html.js [data-turn] .case__visual,
  html.js [data-turn] .case__copy,
  html.js [data-turn].is-fertig {
    scale: none;
    translate: none;
    opacity: 1;
    transition: none;
    will-change: auto;
  }
}

/* ============================================================
   Prozess-Story: der Ablauf soll wie ein laufender Vorgang wirken
   ============================================================ */

/* Leuchtender Punkt, der die Fortschrittslinie entlangwandert */
.steps__laeufer { display: none; }
@media (min-width: 1081px) and (min-height: 640px) {
  html.js .steps__laeufer {
    display: block;
    position: absolute;
    top: 3.05rem;
    left: 2rem;
    z-index: 2;
    width: 14px;
    height: 14px;
    margin: -6px 0 0 -7px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #eaffff, #3fd6e8 45%, #2f4d9e);
    box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.18), 0 0 18px 3px rgba(63, 214, 232, 0.7);
    /* Wandert mit dem Fuellstand der Linie mit */
    translate: calc(var(--flow, 0) * (100cqw - 0px)) 0;
    opacity: calc(0.15 + 0.85 * min(1, var(--flow, 0) * 8));
    transition: translate 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    pointer-events: none;
  }
  /* Bezugsbreite fuer den Laeufer: der Bereich zwischen den Linienenden */
  html.js .steps--flow { container-type: inline-size; }
}

/* Bereits erledigte Schritte: ruhig, aber klar abgehakt */
html.js .steps--flow .step.is-on .step__num {
  background: linear-gradient(150deg, #2f4d9e, #1e7b90);
}
html.js .steps--flow .step.is-on:not(.is-aktuell) .step__num {
  /* Ziffer weicht dem Haken */
  color: transparent;
  position: relative;
}
html.js .steps--flow .step.is-on:not(.is-aktuell) .step__num::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 12.6l4 4L18 8" fill="none" stroke="white" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 60% no-repeat;
}

/* Der Schritt, der gerade laeuft: tritt deutlich hervor */
html.js .steps--flow .step.is-aktuell {
  border-color: transparent;
  box-shadow:
    0 0 0 1.5px rgba(63, 214, 232, 0.55),
    0 6px 14px rgba(12, 22, 38, 0.06),
    0 26px 54px -20px rgba(34, 58, 124, 0.4);
  scale: 1.035;
}
html.js .steps--flow .step.is-aktuell .step__num {
  box-shadow: 0 0 0 5px rgba(63, 214, 232, 0.16), 0 10px 22px -8px rgba(47, 77, 158, 0.7);
}
html.js .steps--flow .step.is-aktuell h3 { color: var(--blue); }

/* Noch nicht erreichte Schritte bleiben zurueckhaltend */
html.js .steps--flow .step:not(.is-on) .step__num {
  background: #dde4ef;
  color: #8b98af;
  box-shadow: none;
}

/* Zaehler oben: die grosse Zahl wechselt mit einem kurzen Impuls */
html.js .prozess .prozess__count b {
  display: inline-block;
  min-width: 2.1ch;
  animation: zaehlerpuls 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zaehlerpuls {
  0% { transform: translateY(6px) scale(0.9); opacity: 0.3; }
  100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .steps__laeufer { display: none; }
  html.js .steps--flow .step.is-aktuell { scale: none; }
  html.js .prozess .prozess__count b { animation: none; }
}

/* ============================================================
   Kundenstimmen als laufendes Band
   Dunkle Glaskarten statt weisser Bloecke, damit der Rand-Auslauf
   nicht wie abgeschnittener Text wirkt. Alle Karten gleich hoch.
   ============================================================ */
.note {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
  padding: 0.7rem 1.2rem 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
}
.note__wert {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.note__rechts { display: grid; gap: 0.15rem; }
.note__sterne { font-size: 0.82rem; letter-spacing: 0.12em; color: #ffc857; line-height: 1; }
.note__text { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--dark-text); }

.stimmen {
  position: relative;
  display: grid;
  gap: 1.1rem;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  overflow: hidden;
  padding-block: 0.4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.stimmen__band {
  display: flex;
  align-items: stretch;          /* alle Karten gleich hoch */
  gap: 1.1rem;
  width: max-content;
  animation: stimmenlauf 72s linear infinite;
  will-change: transform;
}
@keyframes stimmenlauf {
  /* Genau um die Haelfte: der zweite Kartensatz ist die Kopie des ersten */
  to { transform: translate3d(calc(-50% - 0.55rem), 0, 0); }
}
.stimmen:hover .stimmen__band,
.stimmen:focus-within .stimmen__band { animation-play-state: paused; }

.stimme {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  flex: 0 0 clamp(290px, 26vw, 400px);
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028));
  color: #fff;
  transition: border-color 0.35s ease, background 0.35s ease, translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Feiner Lichtsaum oben, gibt den Karten Tiefe ohne harten Schatten */
.stimme::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.4), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}
@media (hover: hover) {
  .stimme:hover {
    translate: 0 -5px;
    border-color: rgba(103, 209, 226, 0.45);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
  }
}
.stimme blockquote {
  position: relative;
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.9);
}
/* Anfuehrungszeichen als Form statt als Schriftzeichen: das Glyph rutschte
   je nach Schriftart aus der Zeilenbox und war kaum zu sehen. */
.stimme blockquote::before {
  content: "";
  display: block;
  width: 30px;
  height: 22px;
  margin-bottom: 0.85rem;
  background: var(--grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 30V17C0 7.6 5.6 1.4 15.6 0l1.6 5.4C11 6.8 8 10 7.8 14.6H15V30H0zm22.8 0V17C22.8 7.6 28.4 1.4 38.4 0L40 5.4c-6.2 1.4-9.2 4.6-9.4 9.2H38V30H22.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 30V17C0 7.6 5.6 1.4 15.6 0l1.6 5.4C11 6.8 8 10 7.8 14.6H15V30H0zm22.8 0V17C22.8 7.6 28.4 1.4 38.4 0L40 5.4c-6.2 1.4-9.2 4.6-9.4 9.2H38V30H22.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.85;
}
.stimme figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.stimme__ava {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--grad);
}
.stimme[style*="--ton: 1"] .stimme__ava { background: linear-gradient(140deg, #2fa3ba, #5ad0c8); }
.stimme[style*="--ton: 2"] .stimme__ava { background: linear-gradient(140deg, #3f6fd8, #7f5ae0); }
.stimme__wer { display: grid; gap: 0.1rem; min-width: 0; }
.stimme__wer b { font-size: 0.95rem; font-weight: 650; }
.stimme__wer span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--dark-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stimme__sterne { font-size: 0.72rem; letter-spacing: 0.1em; color: #ffc857; }

@media (max-width: 620px) {
  .stimme { flex-basis: 80vw; padding: 1.4rem 1.25rem 1.2rem; gap: 1rem; }
  .stimme blockquote { font-size: 0.96rem; }
  .stimmen__band { animation-duration: 52s; }
  .note { margin-top: 1.1rem; }
}

/* Ohne Bewegung: aus den Baendern wird ein ruhiges Raster, Kopien entfallen */
@media (prefers-reduced-motion: reduce) {
  .stimmen { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .stimmen__band {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .stimme { flex: 1 1 300px; transition: none; }
  .stimme[aria-hidden="true"] { display: none; }
}

/* ---------- Projektkarten: Buehne, auf der die Seite stehen bleibt ----------
   Waehrend die Karten sich aufrichten, haelt der Abschnitt an. Nur auf
   breiten und hohen Fenstern, sonst waere der Inhalt eingeklemmt. */
@media (min-width: 1081px) and (min-height: 640px) {
  html.js .cases-stage { height: 185vh; }
  html.js .cases-pin {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Oben ausrichten, nicht zentrieren: sonst legt sich die Resthoehe des
       Pins als zusaetzlicher Abstand zwischen Ueberschrift und grosse Karte */
    justify-content: flex-start;
    padding-top: 3.4rem;
    padding-bottom: clamp(0.8rem, 2vh, 2rem);
  }
  /* Der Innenabstand des Pins ersetzt den Abstand unter der Ueberschrift,
     sonst addieren sich beide zu einer Luecke */
  html.js #projekte .section__head { margin-bottom: 0; }
  /* Der Abstand zwischen grosser und kleinen Karten gehoert jetzt in den Pin */
  html.js .cases-pin > .case--featured { margin-bottom: 45px; }
  html.js .cases-pin > .cases { width: 100%; }

  /* Flachere Fenster: grosse und kleine Karten muessen zusammen in den Pin
     passen, sonst wird die unterste Kartenzeile abgeschnitten. Was der Pin
     oben einspart, bekommt die Ueberschrift zurueck */
  @media (max-height: 880px) {
    html.js .cases-pin { padding-top: 1.5rem; padding-bottom: 0.4rem; }
    html.js #projekte .section__head { margin-bottom: 1.9rem; }
    html.js .cases-pin > .case--featured {
      margin-bottom: 20px;
      padding: clamp(1.4rem, 2.6vw, 2.1rem);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js .cases-stage { height: auto; }
  html.js .cases-pin { position: static; min-height: 0; display: block; padding-block: 0; }
}

/* ---------- Eigener Mauszeiger: Systemzeiger ausblenden ----------
   Die Klasse setzt das Skript nur, wenn der eigene Zeiger wirklich
   laeuft (echter Zeiger, keine reduzierte Bewegung). */
html.eigenerzeiger,
html.eigenerzeiger a,
html.eigenerzeiger button,
html.eigenerzeiger summary,
html.eigenerzeiger [role="button"] { cursor: none; }
/* In Eingabefeldern bleibt der Systemzeiger: dort braucht man die Schreibmarke */
html.eigenerzeiger input,
html.eigenerzeiger textarea,
html.eigenerzeiger select { cursor: auto; }

/* ---------- Einstiegskarten: Buehne, auf der die Seite stehen bleibt ---------- */
@media (min-width: 1081px) and (min-height: 640px) {
  html.js .goals-stage { height: 190vh; }
  html.js .goals-pin {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(3rem, 7.5vh, 4.5rem);
    padding-bottom: clamp(0.8rem, 2vh, 2rem);
  }
  /* Im Pin ist der Kopf Teil der Buehne: eigener Abstand statt des
     Standard-Abstands der Sektion, sonst rutschen die Karten nach unten raus */
  html.js .goals-pin > .section__head { margin-bottom: clamp(1.6rem, 4vh, 3rem); }
  html.js .goals-pin > .goals { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .goals-stage { height: auto; }
  html.js .goals-pin { position: static; min-height: 0; display: block; padding: 0; }
}

/* ============================================================
   Startverzerrung: Bildstoerung an den echten Elementen
   Der SVG-Filter (index.php, #glitchfx) verschiebt ganze Bildzeilen
   und trennt die Farbkanaele. Die Klasse setzt und entfernt das Skript.
   ============================================================ */
html.glitchlauf .nav { filter: url('#glitchfx'); will-change: filter; }
/* Das Hintergrund-Raster kurz anheben, damit die Risse Material haben */
html.glitchlauf .hero__bg { filter: url('#glitchfx') brightness(1.5) saturate(1.25); will-change: filter; }
html.glitchlauf .hero__particles { filter: url('#glitchfx'); will-change: filter; }

/* Feine Bildschirmzeilen auf dem Schleier, solange die Stoerung laeuft */
html.intro .bootfx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(8, 14, 26, 0.3) 0 1px, transparent 1px 3px);
}

@media (prefers-reduced-motion: reduce) {
  html.glitchlauf .nav,
  html.glitchlauf .hero__bg,
  html.glitchlauf .hero__particles { filter: none; will-change: auto; }
}

/* Die Filter-Definition darf keinen Platz im Textfluss einnehmen:
   als Inline-SVG erzeugte sie sonst eine leere Zeile ueber dem Hero */
.fxdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Wortmarke waehrend der Startstoerung ----------
   Steht mittig im noch leeren Hero und wird vom selben Filter zerrissen
   wie der Rest: als haette jemand die Seite uebernommen. Aufbau und
   Proportionen wie die Marke in der Kopfleiste (AD-Zeichen + "ence.").
   Verschwindet zusammen mit dem Schleier (bootout am Elternteil). */
html.intro .bootfx__marke {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Rechnerisch mittig wirkt die Marke rechtslastig: das AD-Zeichen traegt
     mehr Gewicht als das schlanke "ence.". Deshalb ein kleiner optischer
     Ausgleich nach links, in em, damit er mitskaliert. */
  translate: calc(-50% - 0.3em) -50%;
  display: flex;
  align-items: center;
  gap: 0.06em;
  font-size: clamp(64px, 9vw, 128px);
  filter: drop-shadow(0 0 40px rgba(63, 214, 232, 0.35));
  animation: bootlogoein 0.3s ease both;
}
html.intro .bootfx__marke img {
  /* Verhaeltnis wie in der Kopfleiste: Zeichen etwa 1,6-fache Texthoehe */
  width: auto;
  height: 1.6em;
}
html.intro .bootfx__marke span {
  font-family: var(--font-sans);
  font-weight: 750;
  font-stretch: 105%;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1;
  margin-top: 0.08em;
}
html.intro .bootfx__marke span i { font-style: normal; color: var(--teal); }
html.glitchlauf .bootfx__marke {
  filter: url('#glitchfx') drop-shadow(0 0 40px rgba(63, 214, 232, 0.35));
}
@keyframes bootlogoein {
  from { opacity: 0; scale: 0.94; }
  to { opacity: 1; scale: 1; }
}

/* ---------- Kurze Bildstoerung am Hero-Logo beim Erscheinen ----------
   Setzt das Skript fuer wenige hundert Millisekunden, wenn das echte Logo
   aus dem verdichteten Kern hervortritt. Gleiche Machart wie die
   Startstoerung, nur mit eigenem Filter (#glitchlogo). */
.orbwrap.is-glitch .orbwrap__final { filter: url('#glitchlogo'); will-change: filter; }
@media (prefers-reduced-motion: reduce) {
  .orbwrap.is-glitch .orbwrap__final { filter: none; will-change: auto; }
}

/* ===========================================================================
   Bausteine der Unterseiten
   =========================================================================== */

/* ---------- Bild und Text nebeneinander ---------- */
/* Oben ausrichten statt mittig: bei langem Text schwebte das Bild sonst in
   der Mitte und liess ueber und unter sich grosse Leerflaechen. */
.case--split { align-items: start; }
/* Das Bild laeuft ein Stueck mit, damit es neben langem Text nicht
   verloren oben klebt */
@media (min-width: 861px) {
  .case--split .case__visual { position: sticky; top: 6rem; }
}
.case--split .case__copy h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); margin-bottom: 0.9rem; }
.case--split .case__copy p + p { margin-top: 0.85rem; }
/* Jede zweite Sektion gespiegelt: Bild wandert nach rechts */
.case--flip .case__visual { order: 2; }

.bildrahmen {
  margin: 0;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.bildrahmen img { display: block; width: 100%; height: auto; }

/* ---------- Karten mit Aufzaehlung ---------- */
.lkarten {
  --spalten: 3;
  --luecke: clamp(1rem, 1.8vw, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luecke);
}
.lkarten > * {
  flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
  min-width: 0;
}
.lkarte {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Leuchtkante oben, die bei Hover ueber die Ecken laeuft (wie die Einstiegskarten) */
.lkarte::after {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), var(--blue), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lkarte__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 0.5rem;
}
.lkarte h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.lkarte__text { color: var(--ink-2); margin-bottom: 0.9rem; }
.lkarte .ticks { margin-top: 0; }
/* Folgt in einer Karte ein Absatz auf eine Aufzaehlung, braucht er Abstand,
   sonst klebt der Schlusssatz am letzten Listenpunkt. */
.lkarte .ticks + .lkarte__text { margin-top: 0.9rem; }
.ticks--klein li { font-size: 0.95rem; padding-left: 1.5rem; }

/* ---------- Bildergalerie ---------- */
.galerie {
  --spalten: 3;
  --luecke: clamp(0.9rem, 1.6vw, 1.4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luecke);
}
.galerie > * {
  flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
  min-width: 0;
}
.galerie__bild {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.galerie__bild img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- Tabelle ---------- */
.tabellenrahmen {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  /* Breite Tabellen scrollen in sich, die Seite bleibt ruhig */
  overflow-x: auto;
}
.tabelle { width: 100%; border-collapse: collapse; min-width: 480px; }
.tabelle th, .tabelle td {
  padding: 0.9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.tabelle th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-ink);
  background: var(--bg);
}
.tabelle td { color: var(--ink-2); }
.tabelle tr:last-child td { border-bottom: 0; }
/* Zeile beim Ueberfahren leicht anheben, macht breite Tabellen lesbarer */
@media (hover: hover) {
  .tabelle tbody tr { transition: background-color 0.25s ease; }
  .tabelle tbody tr:hover { background: var(--bg); }
}
/* Preisuebersicht: erste Spalte als Zeilenkopf, letzte Spalte als Betrag */
.tabelle--preise td:first-child { color: var(--ink); font-weight: 600; }
.tabelle--preise td:last-child,
.tabelle--preise th:last-child { text-align: right; white-space: nowrap; }
.tabelle--preise td:last-child {
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hover erst ab echtem Zeigegeraet, sonst klebt der Zustand auf Touch */
@media (hover: hover) {
  .lkarte { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.8s ease, border-color 0.8s ease; }
  .lkarte:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(47, 163, 186, 0.4);
  }
  .lkarte:hover::after { opacity: 1; }
  .galerie__bild { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; }
  .galerie__bild:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .galerie__bild img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  .galerie__bild:hover img { transform: scale(1.04); }
}

@media (max-width: 860px) {
  /* Gespiegelte Reihenfolge aufheben: einspaltig steht das Bild immer oben */
  .case--flip .case__visual { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lkarte, .galerie__bild, .galerie__bild img { transition: none; }
  .lkarte:hover, .galerie__bild:hover { transform: none; }
  .galerie__bild:hover img { transform: none; }
}

/* Spaltenzahl der Raster. Als Klasse statt inline, sonst koennten die
   Mobil-Regeln darunter sie nicht ueberschreiben. */
/* Doppelte Klasse, damit die Angabe nicht von den Standardwerten der
   Raster weiter unten ueberschrieben wird (gleiche Spezifitaet, spaetere
   Regel gewinnt sonst). Die Mobil-Regeln stehen ganz am Ende und schlagen
   diese hier wieder. */
.sp-1.sp-1 { --spalten: 1; }
.sp-2.sp-2 { --spalten: 2; }
.sp-3.sp-3 { --spalten: 3; }
.sp-4.sp-4 { --spalten: 4; }

/* Kartenraster auf kleinen Schirmen: erst zwei, dann eine Spalte.
   Die doppelte Klasse hebt die Spezifitaet ueber die sp-Klassen. */
@media (max-width: 1080px) {
  .lkarten.lkarten, .galerie.galerie, .preise.preise, .steps.steps { --spalten: 2; }
}
@media (max-width: 720px) {
  .lkarten.lkarten, .galerie.galerie, .goals.goals, .preise.preise,
  .steps.steps { --spalten: 1; }
}

/* ---------- Preispakete ---------- */
.preise {
  --spalten: 4;
  --luecke: clamp(0.9rem, 1.5vw, 1.4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luecke);
  align-items: stretch;
}
.preise > * {
  flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
  min-width: 0;
}
.preis {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2vw, 1.9rem);
  box-shadow: var(--shadow);
}
/* Das hervorgehobene Paket bekommt den Markenverlauf als Rahmen */
.preis--hervor {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  box-shadow: var(--shadow-lg);
}
.preis__marke {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  translate: -50% 0;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.preis__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 0.45rem;
}
.preis__name { font-size: 1.35rem; margin-bottom: 0.5rem; }
.preis__text { color: var(--ink-2); font-size: 0.94rem; margin-bottom: 1rem; }
.preis__betrag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.5rem;
  margin-bottom: 0.25rem;
}
/* Der Streichpreis steht allein in der ersten Zeile. Sonst passen
   "4.000 €", "ab 3.000 €" und "netto" nicht nebeneinander und die Einheit
   rutscht als loser Rest unter den Betrag. */
.preis__vorher { flex-basis: 100%; }
.preis__betrag b { white-space: nowrap; }
.preis__einheit { white-space: nowrap; }
.preis__vorher { color: var(--ink-2); font-size: 0.9rem; }
.preis__betrag b {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.preis__einheit { color: var(--ink-2); font-size: 0.85rem; }
.preis__ersparnis {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(47, 163, 186, 0.12);
  color: var(--teal-ink);
  font-size: 0.78rem;
  font-weight: 600;
}
.preis .ticks { margin-top: 0; margin-bottom: 1.3rem; }
/* Schiebt den Knopf aller Karten auf dieselbe Grundlinie */
.preis__cta { margin-top: auto; width: 100%; justify-content: center; }
.preise__hinweis {
  margin-top: 1.6rem;
  text-align: center;
  color: var(--ink-2);
  font-size: 0.9rem;
}

@media (hover: hover) {
  .preis { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.8s ease, border-color 0.7s ease; }
  .preis:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .preis:not(.preis--hervor):hover { border-color: rgba(47, 163, 186, 0.45); }
}

@media (max-width: 720px)  { .preise { --spalten: 1; } }
@media (prefers-reduced-motion: reduce) {
  .preis { transition: none; }
  .preis:hover { transform: none; }
}

/* Einfahr-Richtungen fuer die Karten der Unterseiten. Ohne diese Angaben
   blieben --fx/--fy leer und die Karten wuerden nur ein- statt aufklappen.
   Die Werte stehen im Stylesheet statt inline, damit die Mobil-Regel
   weiter unten sie ueberschreiben kann. */
html.js .lkarten [data-fold]:nth-child(3n+1),
html.js .preise  [data-fold]:nth-child(3n+1) { --fx: -38px; --fy: 30px; --fr: -3deg; }
html.js .lkarten [data-fold]:nth-child(3n+2),
html.js .preise  [data-fold]:nth-child(3n+2) { --fx:   0px; --fy: 40px; --fr:  0deg; }
html.js .lkarten [data-fold]:nth-child(3n+3),
html.js .preise  [data-fold]:nth-child(3n+3) { --fx:  38px; --fy: 30px; --fr:  3deg; }
/* Zwei- und vierspaltige Raster: die Dreier-Logik oben passt dort nicht.
   Bei zwei Spalten fuhr die linke Karte der zweiten Reihe nach rechts und
   die rechte nach links, beide ueberlappten sich in der Mitte
   (chatbot-entwicklung, 15.09.2026). Jede Karte faehrt jetzt von der Seite
   ein, auf der sie steht. */
html.js .lkarten.sp-2 [data-fold]:nth-child(odd),
html.js .preise.sp-2  [data-fold]:nth-child(odd)  { --fx: -38px; --fy: 30px; --fr: -3deg; }
html.js .lkarten.sp-2 [data-fold]:nth-child(even),
html.js .preise.sp-2  [data-fold]:nth-child(even) { --fx:  38px; --fy: 30px; --fr:  3deg; }
html.js .lkarten.sp-4 [data-fold]:nth-child(4n+1),
html.js .preise.sp-4  [data-fold]:nth-child(4n+1) { --fx: -38px; --fy: 30px; --fr: -3deg; }
html.js .lkarten.sp-4 [data-fold]:nth-child(4n+2),
html.js .preise.sp-4  [data-fold]:nth-child(4n+2) { --fx: -12px; --fy: 40px; --fr: -1deg; }
html.js .lkarten.sp-4 [data-fold]:nth-child(4n+3),
html.js .preise.sp-4  [data-fold]:nth-child(4n+3) { --fx:  12px; --fy: 40px; --fr:  1deg; }
html.js .lkarten.sp-4 [data-fold]:nth-child(4n+4),
html.js .preise.sp-4  [data-fold]:nth-child(4n+4) { --fx:  38px; --fy: 30px; --fr:  3deg; }

/* Auf schmalen Schirmen nur senkrecht: seitliches Einfahren wuerde dort
   waagerechten Ueberlauf ausloesen */
@media (max-width: 860px) {
  /* :nth-child(n) trifft alles und hebt die Spezifitaet auf das Niveau der
     Richtungsregeln oben an. Ohne das gewinnen dort die nth-child-Regeln und
     die Karten fahren seitlich ein: auf schmalen Schirmen ragen sie dabei
     ueber den Rand. */
  html.js .lkarten [data-fold]:nth-child(n),
  html.js .preise [data-fold]:nth-child(n),
  html.js .goals [data-fold]:nth-child(n),
  html.js .lkarten.sp-2 [data-fold]:nth-child(n),
  html.js .lkarten.sp-4 [data-fold]:nth-child(n),
  html.js .preise.sp-2 [data-fold]:nth-child(n),
  html.js .preise.sp-4 [data-fold]:nth-child(n) { --fx: 0px; --fy: 26px; --fr: 0deg; }
}

/* Lange Komposita ("Suchmaschinenoptimierung", "Warenwirtschaftssystem")
   passen in schmale Karten nicht in eine Zeile und ragten heraus.
   Trennung erlauben und im Notfall hart umbrechen. */
.goal__title, .goal__text,
.lkarte h3, .lkarte__text, .lkarte .ticks li,
.preis__name, .preis__text, .preis .ticks li,
.case-sm h3, .case-sm p,
.step h3, .step p,
.faq__item summary {
  overflow-wrap: break-word;
}
/* Trennung nur bei Ueberschriften: dort stehen die langen Komposita
   ("Suchmaschinenoptimierung"), die sonst aus der Karte ragen */
.goal__title, .lkarte h3, .preis__name, .case-sm h3, .step h3 {
  hyphens: auto;
}

/* ---------- Bild in einer Karte ----------
   Im Original steht das Bild ueber dem Titel und gehoert inhaltlich dazu,
   nicht in eine Sammelgalerie am Seitenende. */
.goal__bild, .lkarte__bild {
  display: block;
  margin: -0.4rem 0 1rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
}
.lkarte__bild { margin: -0.4rem 0 1.1rem; }

.goal__bild img, .lkarte__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Logos und Grafiken vollstaendig zeigen statt beschneiden.
   Steht bewusst NACH der cover-Regel, gleiche Spezifitaet. */
.lkarte__bild--passend img { object-fit: contain; padding: 0.6rem; background: #fff; }
/* Die Nummer sitzt oben rechts; mit Bild darueber braucht sie eigenen Grund */
.goal__bild + .goal__num { top: 1rem; }

@media (hover: hover) {
  .goal__bild img, .lkarte__bild img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  .goal:hover .goal__bild img, .lkarte:hover .lkarte__bild img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .goal__bild img, .lkarte__bild img { transition: none; }
  .goal:hover .goal__bild img, .lkarte:hover .lkarte__bild img { transform: none; }
}

/* Preiskarten: alles untereinander, damit Text und Leistungen Luft haben.
   Der Knopf sitzt bei allen Karten einer Reihe auf gleicher Hoehe. */
.preis { gap: 0; }
.preis__label { margin-bottom: 0.5rem; }
.preis__name { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.015em; }
.preis__text { margin-top: 0.4rem; color: var(--ink-2); line-height: 1.6; }
.preis__betrag { margin-top: 0.9rem; }
.preis__ersparnis { margin-top: 0.5rem; }
.preis .ticks {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.preis .ticks li { margin-bottom: 0.45rem; }
/* Der Knopf ist das letzte Element der Karte und wird nach unten geschoben,
   damit er bei allen Karten einer Reihe auf gleicher Hoehe sitzt. */
.preis .ticks { margin-bottom: 1.3rem; }
.preis__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

@media (min-width: 900px) {
  /* zwei Karten je Reihe duerfen breiter atmen */
  .preise.sp-2 .preis { padding: clamp(1.6rem, 2.2vw, 2.2rem); }
}

/* Karte mit Bild: das Raster von .goal kennt nur Icon, Titel, Text und Link.
   Ohne eigenen Bereich landete das Bild in einer impliziten Spalte und
   quetschte den Titel auf wenige Pixel Breite (senkrechte Schrift). */
.goal--mitbild {
  grid-template-areas:
    "bild bild"
    "icon titel"
    "text text"
    "link link";
}
.goal--mitbild .goal__bild { grid-area: bild; width: 100%; }
/* Ohne Icon soll der Titel die ganze Zeile bekommen */
.goal--mitbild .goal__title { grid-column: 1 / -1; }

/* ---------- Feinschliff Preiskarten ---------- */
/* Label als Chip statt nackter Monospace-Zeile */
.preis__label {
  display: inline-block;
  align-self: flex-start;
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  background: rgba(47, 163, 186, 0.1);
  border: 1px solid rgba(47, 163, 186, 0.22);
  margin-bottom: 0.75rem;
}
/* Auf dunklem Grund: Hinweiszeile und Sektionstitel hell */
.section--dark .preise__hinweis { color: var(--dark-text); }
.section--dark .section__head h2 { color: #fff; }

/* ---------- Footer auf schmalen Schirmen ----------
   Vier feste Spalten quetschten sich auf Handybreite: die Linkspalten wurden
   rechts abgeschnitten, Impressum und Datenschutz waren unerreichbar. */
.footer__col { min-width: 0; }
.footer__col a { overflow-wrap: break-word; }
@media (max-width: 940px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Fehlende Hover-Transitions (Audit 06.08.2026) ----------
   Diese Elemente hatten Hover-Bewegung, aber keine Transition: der Zustand
   sprang hart um. Alle bekommen dieselbe weiche Kurve wie die Startseite. */
.lkarte, .preis, .member, .step,
.btn--primary, .btn--ghost, .btn--light, .btn--ghost-light,
.dsgpt__visual {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease,
    border-color 0.35s ease,
    background-color 0.35s ease,
    color 0.25s ease;
}
/* Die Schrittkarten heben sich beim Zeigen leicht an */
@media (hover: hover) {
  .step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(47, 163, 186, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lkarte, .preis, .member, .step,
  .btn--primary, .btn--ghost, .btn--light, .btn--ghost-light,
  .dsgpt__visual { transition: none; }
  .step:hover { transform: none; }
}

/* ---------- Leistungs-Abschnitt (Struktur wie im Original, zweispaltig) ---------- */
.leistung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}
.leistung--flip .leistung__text { order: 2; }
.leistung__text h2 { margin-bottom: 1rem; }
.leistung__text .kicker { margin-bottom: 0.7rem; }
.leistung__text p + p { margin-top: 0.9rem; }
.leistung__text > p { color: var(--ink-2); }
.leistung__cta { margin-top: 1.6rem; }

/* Die Aufzaehlung sitzt in einer eigenen Karte: das gibt der rechten
   Haelfte Gewicht, statt sie leer stehen zu lassen */
.leistung__liste {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  box-shadow: var(--shadow);
}
.section--tint .leistung__liste { background: #fff; }
.leistung__listentitel {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 1rem;
}
.leistung__liste .ticks { margin-top: 0; }
.leistung__bild { margin: 0; }

@media (max-width: 900px) {
  .leistung { grid-template-columns: 1fr; }
  .leistung--flip .leistung__text { order: 0; }
}

/* ---------- Team-Raster ---------- */
.team {
  --spalten: 4;
  --luecke: clamp(1rem, 1.8vw, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luecke);
}
.team > * {
  flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
  min-width: 0;
}
/* Hervorgehobene Ansprechpartner: erst auf breiten Schirmen Portrait links
   neben dem Text, darunter bleibt das normale gestapelte Kartenlayout. */
@media (min-width: 1100px) {
  .team--gross .teamer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 17.5rem;
    padding: 1.6rem 2rem 1.6rem calc(14rem + 2rem);
    text-align: left;
  }
  .team--gross .teamer__bild {
    position: absolute;
    inset: 0 auto 0 0;
    width: 14rem;
    margin: 0;
  }
  .team--gross .teamer__bild img,
  .team--gross .teamer__bild--platzhalter {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .team--gross .teamer__name,
  .team--gross .teamer__rolle,
  .team--gross .teamer__motto { margin-inline: 0; }
  .team--gross .teamer__name { font-size: 1.4rem; margin-block: 0 0.35rem; }
  .team--gross .teamer__rolle { margin-block: 0 0.7rem; }
  .team--gross .teamer__motto { margin-block: 0; font-size: 1rem; }
}
/* Zwei grosse Karten nebeneinander sind unter 640px zu schmal */
/* Die grossen Ansprechpartner-Karten haben immer zwei Spalten: die
   allgemeine Team-Umschaltung auf drei wuerde sie unnoetig schrumpfen. */
@media (max-width: 1080px) { .team.team--gross.team--gross { --spalten: 2; } }
/* Spezifitaet: muss die spaetere Regel .team.team{--spalten:2} schlagen */
@media (max-width: 640px) { .team.team--gross.team--gross { --spalten: 1; } }
.teamer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 0 1.4rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
}
.teamer__bild { margin: 0 0 1rem; background: var(--bg); }
.teamer__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}
/* Ohne Foto: Initiale im Markenverlauf statt einer leeren Fläche */
.teamer__bild--platzhalter {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--grad);
}
.teamer__bild--platzhalter span {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}
.teamer__name { font-size: 1.15rem; margin: 0 1rem 0.2rem; }
.teamer__rolle {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0 1rem 0.7rem;
}
.teamer__motto {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0 1.1rem;
  font-style: italic;
}

@media (hover: hover) {
  .teamer { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.35s ease; }
  .teamer:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); }
  .teamer__bild img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  .teamer:hover .teamer__bild img { transform: scale(1.05); }
}
@media (max-width: 1080px) { .team.team { --spalten: 3; } }
@media (max-width: 780px)  { .team.team { --spalten: 2; } }
@media (prefers-reduced-motion: reduce) {
  .teamer, .teamer__bild img { transition: none; }
  .teamer:hover { transform: none; }
  .teamer:hover .teamer__bild img { transform: none; }
}

/* ---------- Lesestrecke: mittig statt linksbündig ----------
   Bei langen Texten (Hoster-Vergleich, Ratgeber) stand die 44rem breite
   Spalte am linken Rand und liess die halbe Seite leer. Zentriert wirkt
   sie als bewusst gesetzte Lesespalte statt als abgeschnittene Seite. */
.section--lese .prosa--lang { margin-inline: auto; }

/* ---------- Prozess-Sektion: rein optische Ergaenzungen ---------- */

/* Fortschrittsbalken unter dem Schrittzaehler. Speist sich aus derselben
   --flow-Variable wie die Verbindungslinie, laeuft also synchron. Wird nur
   dort gezeigt, wo auch der Zaehler sichtbar ist (gepinnte Ansicht). */
.prozess__spur { display: none; }

/* Weiche Farbwolken im Hintergrund: die Sektion war sehr flach, jetzt hat
   sie Tiefe, ohne dass etwas den Blick von den Karten wegzieht. */
.prozess { position: relative; overflow-x: clip; }
.prozess__pin { position: relative; }

.prozess__orb {
  opacity: 0.5;
  z-index: 0;
}

.prozess__orb--a { top: -14%; left: -10%; }
.prozess__orb--b { bottom: -16%; right: -8%; }

.prozess .prozess__stage,
.prozess .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .prozess__spur i { transition: none; }
}

/* Zwischenüberschriften bekommen mehr Luft und eine feine Linie,
   damit lange Strecken sichtbar in Abschnitte zerfallen */
.prosa--lang h3 {
  margin-top: 3.4rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}
.prosa--lang h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Steht die Zwischenueberschrift direkt unter der Abschnittsueberschrift,
   braucht sie keine zweite Trennlinie: die klebte sonst unter der H2. */
.prosa--lang h2 + h3 { margin-top: 1.6rem; padding-top: 0; border-top: 0; }
/* Häkchen-Listen in der Lesestrecke als abgesetzter Block */
.section--lese .prosa--lang .ticks {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2vw, 1.7rem) clamp(1.2rem, 2vw, 1.8rem);
  box-shadow: var(--shadow);
  margin-top: 1.4rem;
}
.section--lese.section--tint .prosa--lang .ticks { background: #fff; }

/* ---------- Klappmenü in der Kopfleiste ----------
   Der Elternpunkt bleibt ein echter Link (springt zur Sektion), der Pfeil
   daneben öffnet die Unterseiten. So funktioniert beides: schnell zur
   Übersicht springen ODER gezielt eine Unterseite wählen. */
.nav__gruppe { position: relative; display: flex; align-items: center; gap: 0.25rem; }
.nav__pfeil {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.2s ease, rotate 0.25s ease;
}
.nav__pfeil svg { width: 15px; height: 15px; }
.nav__pfeil:hover { color: var(--ink); background: rgba(12, 22, 38, 0.06); }
.nav__gruppe:hover .nav__pfeil,
.nav__pfeil[aria-expanded="true"] { rotate: 180deg; }

.nav__unter {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  translate: -50% 0;
  min-width: 12rem;
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem;
  border-radius: 16px;
  /* Gleiche Optik wie das Megamenue: dunkles, fast deckendes Glas */
  background:
    linear-gradient(160deg, rgba(19, 34, 58, 0.99), rgba(9, 17, 31, 0.99));
  border: 1px solid rgba(127, 208, 224, 0.18);
  box-shadow: 0 24px 55px -20px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  isolation: isolate;
  /* Geschlossen: unsichtbar UND nicht anklickbar (sonst fängt es Klicks ab) */
  opacity: 0;
  visibility: hidden;
  translate: -50% 6px;
  transition: opacity 0.22s ease, translate 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
  z-index: 60;
}
/* Unsichtbare Brücke, damit der Zeiger die Lücke überqueren kann */
.nav__unter::before {
  content: "";
  position: absolute;
  inset: -0.8rem 0 100% 0;
}
.nav__gruppe:hover .nav__unter,
.nav__gruppe:focus-within .nav__unter,
.nav__unter.offen {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
  transition-delay: 0s;
}
/* Der Kasten ist dunkel, die Eintraege daher hell. Gilt in beiden
   Kopfleisten-Zustaenden, sonst waeren sie ueber hellem Grund unlesbar. */
.nav__unter a,
.nav--dark .nav__links .nav__unter a {
  color: var(--dark-text);
  padding: 0.45rem 0.75rem;
  border-radius: 9px;
  font-size: 0.93rem;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, translate 0.18s ease;
}
.nav__unter a:hover,
.nav__unter a:focus-visible,
.nav--dark .nav__links .nav__unter a:hover,
.nav--dark .nav__links .nav__unter a:focus-visible {
  background: rgba(127, 208, 224, 0.1);
  color: #fff;
  translate: 3px 0;
}

/* Untermenü-Einträge im Mobilmenü eingerückt und dezenter */
.nav__mobile-unter {
  padding-left: 1.4rem !important;
  font-size: 0.95rem;
  opacity: 0.85;
}
.nav__mobile-unter::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 1px;
  margin-right: 0.5rem;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.5;
}

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

/* ---------- Preise: Kategorien als mitlaufende Seitenspalte ---------- */
/* Die Preisseite bekommt mehr Breite als der Rest: die Kategorienspalte
   nimmt links Platz weg, sonst werden die Karten rechts zu schmal. */
.preisgruppen > .wrap { max-width: min(1460px, 94vw); }
.preislayout {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}
.reiter {
  /* Bleibt beim Scrollen stehen, solange die Sektion laeuft. Die Sektion
     clippt nur waagerecht (overflow-x: clip) und bildet damit KEINEN
     Scroll-Container: sticky funktioniert hier. */
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.reiter__titel {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.3rem 0.7rem 0.6rem;
}
.reiter__knopf {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.28s ease, color 0.22s ease, box-shadow 0.28s ease;
}
.reiter__icon { font-size: 1.1em; line-height: 1; flex: 0 0 auto; }
.reiter__text {
  flex: 1 1 auto;
  min-width: 0;
  /* Lange Kategorienamen duerfen umbrechen, statt die Zahl zu ueberlappen */
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.25;
}
/* Anzahl der Positionen: gibt der Spalte Informationswert */
.reiter__zahl {
  flex: 0 0 auto;
  min-width: 1.6em;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(12, 22, 38, 0.07);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-align: center;
  transition: background-color 0.28s ease, color 0.22s ease;
}
.reiter__knopf:hover { color: var(--ink); background: rgba(47, 163, 186, 0.09); }
.reiter__knopf.is-aktiv {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(34, 58, 124, 0.65);
}
.reiter__knopf.is-aktiv .reiter__zahl { background: rgba(255, 255, 255, 0.22); color: #fff; }
.reiter__knopf:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Ohne JavaScript bleiben alle Gruppen sichtbar: kein Inhalt geht verloren.
   Erst die Klasse html.js blendet die inaktiven aus. */
html.js .preisgruppe { display: none; }
html.js .preisgruppe.is-aktiv { display: block; animation: gruppeauf 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes gruppeauf {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: none; }
}
.preisgruppe__intro {
  margin: 0 0 clamp(1.4rem, 2.5vw, 2rem);
  color: var(--ink-2);
  max-width: 46rem;
}
.preisblock__kopf { margin: clamp(1.8rem, 3vw, 2.6rem) 0 clamp(1rem, 1.8vw, 1.5rem); }
.preisblock__kopf:first-child { margin-top: 0; }
.preisblock__kopf h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin-bottom: 0.35rem; }
.preisblock__kopf p { color: var(--ink-2); max-width: 44rem; }
.preisgruppe .preise + .preisblock__kopf { margin-top: clamp(2.2rem, 3.6vw, 3rem); }
/* In der rechten Spalte immer genau ZWEI Karten je Reihe (Marcels Vorgabe):
   die Leistungslisten brauchen Breite, sonst bricht jede Zeile um.
   Auf schmalen Schirmen greift weiter unten eine Regel mit einer Spalte. */
.preisinhalt .preise { --spalten: 2; }
@media (max-width: 780px) {
  .preisinhalt .preise, .preisinhalt .preise.preise { --spalten: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .preisgruppe.is-aktiv { animation: none; }
  .reiter__knopf, .reiter__zahl { transition: none; }
}

/* Unter 1080px wandert die Kategorienliste nach oben und wird waagerecht */
@media (max-width: 1080px) {
  .preislayout { grid-template-columns: 1fr; }
  .reiter {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.4rem;
    padding: 0.45rem;
    border-radius: 999px;
    /* Bei vielen Kategorien in sich scrollen statt umbrechen */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .reiter::-webkit-scrollbar { display: none; }
  .reiter__titel { display: none; }
  .reiter__knopf { width: auto; white-space: nowrap; border-radius: 999px; }
  .reiter__zahl { display: none; }
  .preisinhalt .preise { --spalten: 2; }
}

/* ---------- Nachgezogene Hover-Übergänge ----------
   Diese Regeln änderten ihren Zustand ohne Transition und sprangen hart. */
.rail__btn, .rail__btn--cta,
.krumen a, .footer__col a, .nav__mobile a,
.faq__item summary, .tabelle tr,
.galerie__bild, .bildrahmen,
.leistung__liste, .teamer {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.32s ease,
    background-color 0.32s ease,
    color 0.22s ease,
    opacity 0.28s ease;
}
/* Die Leistungs-Karte hebt sich beim Zeigen leicht an */
@media (hover: hover) {
  .leistung__liste:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(47, 163, 186, 0.35);
  }
  .tabelle tbody tr:hover { background: rgba(47, 163, 186, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .rail__btn, .rail__btn--cta, .krumen a, .footer__col a, .nav__mobile a,
  .faq__item summary, .tabelle tr, .galerie__bild, .bildrahmen,
  .leistung__liste, .teamer { transition: none; }
  .leistung__liste:hover { transform: none; }
}

/* ---------- FAQ-Sektion mittig ----------
   Der Fragenblock ist zentriert; Kicker und Überschrift standen daneben
   linksbündig und wirkten dadurch verrutscht. Die Fragen selbst bleiben
   linksbündig, nur die Ausrichtung des Kopfes ändert sich. */
/* Die FAQ-Sektion nutzt denselben zentrierten Kopf */
#faq .section__head { text-align: center; margin-inline: auto; max-width: 52rem; }
#faq .section__head .kicker { display: inline-flex; align-items: center; }
#faq .section__head .section__intro { margin-inline: auto; }

/* ---------- Zentrierter Sektionskopf ----------
   Für Sektionen, deren Inhalt mittig steht (Schritte, FAQ). Als Klasse
   statt :has(), damit es auch in älteren Browsern greift. */
.section__head--mittig {
  text-align: center;
  margin-inline: auto;
  max-width: 52rem;
}
.section__head--mittig .kicker {
  /* inline-flex, damit die Linie vor dem Text mittig mitwandert */
  display: inline-flex;
  align-items: center;
}
/* Kinder mit eigener max-width muessen selbst zentriert werden, sonst
   sitzen sie trotz text-align:center linksbuendig im Kopf. */
.section__head--mittig h2,
.section__head--mittig h3,
.section__head--mittig p,
.section__head--mittig .section__intro { margin-inline: auto; }

/* ---------- Einzelne Karte am Ende: volle Breite ----------
   Bleibt in der letzten Reihe nur EINE Karte übrig, wird sie über die
   ganze Breite gezogen statt verloren links zu stehen.
   Wichtig: Die Regel muss zur tatsächlichen Spaltenzahl passen. Bei drei
   Spalten steht die dritte Karte NICHT allein, sondern in der ersten Reihe. */
.sp-2 > :last-child:nth-child(odd),
.sp-3 > :last-child:nth-child(3n + 1),
.sp-4 > :last-child:nth-child(4n + 1) { flex-basis: 100%; }

/* In der rechten Preisspalte gelten immer zwei Spalten, unabhängig von
   der sp-Klasse, die der Generator gesetzt hat */
.preisinhalt .preise > :last-child:nth-child(odd) { flex-basis: 100%; }
.preisinhalt .preise.sp-3 > :last-child:nth-child(3n + 1),
.preisinhalt .preise.sp-4 > :last-child:nth-child(4n + 1) { flex-basis: auto; }

/* Wo die Media Queries auf zwei Spalten herunterschalten, gilt wieder
   die ungerade Regel; die 3er- und 4er-Regeln müssen dort zurücktreten. */
@media (max-width: 1080px) {
  .lkarten.lkarten > :last-child:nth-child(odd),
  .galerie.galerie > :last-child:nth-child(odd),
  .preise.preise > :last-child:nth-child(odd),
  .steps.steps > :last-child:nth-child(odd) { flex-basis: 100%; }
  .lkarten.sp-3 > :last-child:nth-child(3n + 1),
  .lkarten.sp-4 > :last-child:nth-child(4n + 1),
  .preise.sp-3 > :last-child:nth-child(3n + 1),
  .preise.sp-4 > :last-child:nth-child(4n + 1),
  .steps.sp-3 > :last-child:nth-child(3n + 1),
  .steps.sp-4 > :last-child:nth-child(4n + 1) { flex-basis: auto; }
}
/* Personenkacheln NIE auf volle Breite ziehen: ein Portrait im Format 4:5
   wuerde dann fast bildschirmhoch. Eine einzelne Restkachel behaelt ihre
   Spaltenbreite und steht dank justify-content mittig. */
.team.team > :last-child:nth-child(odd),
.team.team > :last-child:nth-child(3n + 1),
.team.team > :last-child:nth-child(4n + 1) {
  flex-basis: calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
}
/* Einspaltig ist ohnehin alles voll breit. Team-Kacheln bleiben ausgenommen,
   siehe Regel oben. */
@media (max-width: 780px) {
  .sp-2:not(.team) > :last-child,
  .sp-3:not(.team) > :last-child,
  .sp-4:not(.team) > :last-child { flex-basis: 100%; }
  /* Auch in der Preisspalte (/preise/): dort setzen speziellere Regeln
     flex-basis auf auto, eine einzelne Karte wurde dadurch schmal. */
  .preisinhalt .preise.preise.preise > :last-child { flex-basis: 100%; }
}

/* ---------- Weiter zur nächsten Kategorie ----------
   Am Ende jeder Kategorie (außer der letzten): springt nach oben und
   schaltet um, damit man nicht selbst zurückscrollen muss. */
.weiterkat {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding: 1.15rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.32s ease;
}
.weiterkat__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-ink);
  flex: 0 0 auto;
}
.weiterkat__name {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink);
}
.weiterkat__pfeil {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--blue);
  transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .weiterkat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(47, 163, 186, 0.45);
  }
  .weiterkat:hover .weiterkat__pfeil { translate: 5px 0; }
}
.weiterkat:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 640px) {
  .weiterkat { flex-wrap: wrap; gap: 0.35rem 0.8rem; }
  .weiterkat__label { flex: 1 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .weiterkat, .weiterkat__pfeil { transition: none; }
  .weiterkat:hover { transform: none; }
  .weiterkat:hover .weiterkat__pfeil { translate: none; }
}

/* ===========================================================================
   Portfolio-Strecke (übernommen aus dem Projekt kiwebsite, Stand 10.08.2026)
   Waagerecht durchblätterbare Projektkarten mit Laptop- und Handy-Mockup.
   Die Sektion ist dunkel gehalten, deshalb sind die Variablen des
   Quellprojekts hier lokal auf unsere Palette abgebildet.
   =========================================================================== */
.portfoliostrecke {
  --accent:     #3fd6e8;
  --bg-card:    #11172e;
  --border:     rgba(244, 244, 240, 0.1);
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --fs-lg:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --header-h:   84px;
  --ink-muted:  rgba(244, 244, 240, 0.65);
  --r-lg:       28px;
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --t-fast: 200ms; --t-med: 400ms;
  --font-serif: var(--font-sans);
}
/* In diesem Block ist --ink hell (dunkler Grund), abweichend vom Rest */
.portfoliostrecke { --ink: #f4f4f0; }


.pv3-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}


.pv3-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-6) var(--s-5);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t-med) var(--ease);
}

.pv3-card:hover { border-color: rgba(34, 211, 238, 0.4); }

.pv3-card::before {
  content: "";
  position: absolute;
  inset: -20% -20% auto auto;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 70%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}

.pv3-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  margin-bottom: var(--s-5);
  z-index: 1;
  animation: pv3-float 6s ease-in-out infinite;
}


.pv3-laptop {
  position: absolute;
  inset: 0 15% 0 0;
  display: flex;
  flex-direction: column;
}

.pv3-laptop__bezel {
  background: #050818;
  border: 1px solid rgba(244, 244, 240, 0.15);
  border-radius: 10px 10px 0 0;
  padding: 8px 8px 4px;
  box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.7);
  flex: 1;
  overflow: hidden;
}

.pv3-laptop__bezel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* Nur Valtea & Hochzeitsplanung: Screenshot weiter nach links rücken, damit das
   linksbündige Logo nicht vom cover-Zuschnitt angeschnitten wird. */
.pv3-laptop__bezel img[src*="valtea"] {
  object-position: left center;
}

/* Hochzeitsplanung braucht nur einen leichten Versatz, nicht ganz links. */
.pv3-laptop__bezel img[src*="hochzeitsplanung-hamburg"] {
  object-position: 22% center;
}

/* IBONS ist etwas breiter als der Bildschirmausschnitt. Der Laptop behaelt
   sein normales Format (alles andere sieht nach keinem echten Geraet aus),
   der Screenshot rueckt nur nach links, damit das Logo vollstaendig im Bild
   bleibt. Beschnitten wird dadurch rechts der Rand der Kopfzeile. */
.pv3-laptop__bezel img[src*="ibons"] { object-position: left center; }

.pv3-laptop__base {
  width: 115%;
  height: 6px;
  margin-left: -7.5%;
  background: linear-gradient(to bottom,
    rgba(244, 244, 240, 0.2),
    rgba(244, 244, 240, 0.08));
  border-radius: 0 0 6px 6px;
  position: relative;
}

.pv3-laptop__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 2px;
  background: rgba(244, 244, 240, 0.2);
  border-radius: 0 0 4px 4px;
}

.pv3-phone {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22%;
  aspect-ratio: 9/19;
  background: #050818;
  border: 1px solid rgba(244, 244, 240, 0.18);
  border-radius: 14px;
  padding: 4px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: pv3-float-phone 5s ease-in-out infinite;
}

.pv3-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  display: block;
}

@keyframes pv3-float-phone {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.pv3-card__caption {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
}

.pv3-card__cat {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.pv3-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--s-1) 0 0;
  text-transform: none;
}


.pscroll {
  position: relative;
}


.pscroll__sticky {
  position: relative;
  height: 100vh;
  /* Nur waagerecht clippen (die Folien liegen nebeneinander). Mit
     overflow:hidden wurde auch senkrecht geschnitten, dann verschwand auf
     flachen Fenstern die Pfeilreihe am unteren Rand. */
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  /* Kein Kopf-Freiraum noetig: die Buehne klebt nicht (position: relative),
     der Abstand nach oben kommt allein aus dem Sektions-Padding wie bei
     jeder anderen Sektion. Vorher summierten sich beide auf 249 px. */
  padding-top: 0;
}

/* Fuer Ankerspruenge trotzdem unter dem festen Kopf halten. */
.portfoliostrecke { scroll-margin-top: var(--header-h); }


/* Pfeil-Navigation für Portfolio-Slides */
.pscroll__nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  /* Ohne align-items sitzt die 3 px hohe Fortschrittsleiste am oberen Rand
     der Zeile, die Pfeile daneben aber auf voller Höhe: die Linie wirkt
     dadurch nach oben verrutscht. */
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) clamp(2rem, 4vw, 4rem) 0;
}

.pscroll__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(244, 244, 240, 0.06);
  border: 1px solid rgba(244, 244, 240, 0.18);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

.pscroll__arrow:hover {
  background: rgba(244, 244, 240, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

.pscroll__arrow:disabled {
  /* Nicht zu blass: bei 0.25 wirkte der Knopf wie ein Darstellungsfehler */
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.pscroll__arrow svg { width: 20px; height: 20px; }

/* Section-Head sitzt im Sticky-Container, behält Standard-Padding */
.pscroll__sticky > .sec-head {
  flex: 0 0 auto;
  margin-bottom: var(--s-5);
}


/* Fuellt die restliche Buehnenhoehe (zwischen Kopfzeile und Pfeilreihe),
   damit die Folie und damit das Mockup so gross wie moeglich werden. */
.pscroll__viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pscroll__track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.pslide {
  flex: 0 0 100%;
  height: 100%;
  /* Der Laptop-Fuss ist breiter als der Bildschirm: ohne Clip ragt er in die
     Nachbarfolie und ist am Rand als grauer Strich zu sehen. */
  overflow-x: clip;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding: clamp(1.5rem, 3vh, 2.5rem) clamp(2rem, 4vw, 4rem) clamp(4rem, 6vh, 5rem);
  align-content: start;
}


.pslide__index {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.pslide__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Die Bildspalte ist Groessen-Container, damit sich das Mockup an der
   verfuegbaren HOEHE ausrichten kann (100cqh) und nicht nur an der Breite. */
.pslide__visual {
  height: 100%;
  container-type: size;
}

.pslide__visual .pv3-stage {
  width: 100%;  /* Rueckfall fuer Browser ohne Container-Einheiten */
  /* So gross wie moeglich: begrenzt durch Spaltenbreite, durch die Hoehe der
     Folie (in 16/9 umgerechnet) und durch 860 px auf grossen Schirmen.
     Vorher deckelte nur die Breite, dadurch blieb senkrecht Luft ungenutzt
     und das Mockup wirkte klein. */
  width: min(100%, calc(100cqh * 16 / 9), 860px);
  height: auto;
  margin-bottom: 0;
}

.pslide__body { align-self: center; }

.pslide__cat {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.pslide__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-4);
  text-transform: none;
}

.pslide__text {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 var(--s-5);
  max-width: 50ch;
}

.pslide__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.pslide__link span { transition: transform var(--t-fast) var(--ease); }

.pslide__link:hover span { transform: translateX(5px); }

/* Progress und CTA im normalen Flex-Flow am Sticky-Boden */
.pscroll__progress {
  /* Im Quellprojekt lag die Leiste in einem eigenen Block; hier sitzt sie
     zwischen den Pfeilen und braucht deshalb wachsende Breite statt 'auto'
     (sonst bleibt sie 0 px breit und ist unsichtbar). */
  flex: 1 1 auto;
  max-width: 22rem;
  margin: 0 clamp(1rem, 3vw, 2.5rem);
  height: 3px;
  background: rgba(244, 244, 240, 0.08);
  border-radius: 1px;
  overflow: hidden;
}

.pscroll__sticky .portfolio__cta {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  margin: var(--s-4) clamp(2rem, 4vw, 4rem) 0;
}

/* Der helle Ghost-Knopf hatte auf der dunklen Strecke weissen Grund und
   fast weisse Schrift: hier eigene, dunkeltaugliche Fassung. */
.portfoliostrecke .portfolio__cta .btn--ghost {
  background: rgba(244, 244, 240, 0.06);
  border-color: rgba(244, 244, 240, 0.28);
  color: var(--ink);
}

.portfoliostrecke .portfolio__cta .btn--ghost:hover {
  background: rgba(244, 244, 240, 0.12);
  border-color: rgba(244, 244, 240, 0.5);
}

/* Auf Mobile beides ausblenden — würde mitten im Slide auftauchen */

.pscroll__progress span {
  display: block;
  height: 100%;
  /* Breite und Versatz setzt das Skript: der Balken wandert, statt zu wachsen. */
  width: 8%;
  background: var(--accent);
  border-radius: 1px;
  transition: transform 100ms linear;
}

@media (min-width: 760px) {
 .pv3-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {

  .pslide {
    /* Das Bild bleibt fuehrend, die Textspalte war aber zu eng: lange
       Projektnamen brachen dreifach um. Etwas mehr Anteil fuer den Text. */
    grid-template-columns: 1.65fr 1fr;
    grid-template-rows: 1fr;
    /* Deutliche Luft zwischen Mockup und Text (Vorbild kiwebsite): vorher
       standen beide fast aneinander. */
    gap: clamp(2.5rem, 4.5vw, 4.5rem);
    align-items: center;
    /* Mindestens so breit wie der Ueberstand des Laptop-Fusses (7,5 % der
       Mockup-Breite), sonst schaut er in die benachbarte Folie hinein. */
    padding-inline: var(--s-7);
  }

  /* Bildspalte auf volle Zeilenhoehe strecken, der Text bleibt mittig. */
  .pslide__visual { align-self: stretch; }
}
/* Laptop-Fenster: unter 900 px Innenhoehe passt die Folie in Normalgroesse
   nicht mehr zusammen mit Kopfzeile und Pfeilreihe in eine Bildschirmhoehe. */
@media (min-width: 761px) and (max-height: 900px) {

  .pslide { padding-bottom: clamp(1.25rem, 4vh, 4rem); }

  .pscroll__sticky > .sec-head { margin-bottom: var(--s-4); }

  .pscroll__nav { margin-top: var(--s-3); }
}

@media (max-width: 760px) {

  .pscroll__progress { display: none; }

  .pscroll__sticky .portfolio__cta {
    display: flex;
    justify-content: center;
    margin: var(--s-4) 0 var(--s-2);
  }

  /* Inhalt straffen, damit er über den Pfeilen Platz hat (sonst läuft die
     CTA unter die Pfeile / aus dem sichtbaren Bereich). */
  .pscroll__sticky { padding-top: 0; }

  .pscroll__sticky > .sec-head { margin-bottom: var(--s-3); }

  /* Intro-Text im Kopf auf Mobile ausblenden – umbricht auf ~5 Zeilen und
     drängt die Slides nach unten. Überschrift bleibt. */
  .pscroll__sticky > .sec-head .sec-lead { display: none; }

  /* Track nur so hoch wie der Inhalt (nicht den ganzen Rest füllen),
     damit die Pfeile direkt unter dem Slide sitzen statt ganz unten.
     height:auto überschreibt das height:100% des Tracks. */
  .pscroll__viewport { flex: 0 1 auto; }
  .pscroll__track { height: auto; }

  /* Die Buehne waechst mit dem Inhalt. Mit fester Bildschirmhoehe ragten
     Folie und Pfeile darunter heraus und wurden von overflow:hidden
     abgeschnitten (auf 390 px Breite fehlten rund 200 px). */
  .pscroll__sticky {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    padding-bottom: var(--s-4);
  }

  .pslide { height: auto; gap: var(--s-3); padding-top: var(--s-3); padding-bottom: var(--s-2); align-content: center; }

  /* Ohne feste Spaltenhoehe liefert 100cqh null: mobil wieder ueber die
     Breite steuern, sonst schrumpft das Mockup auf null zusammen. */
  .pslide__visual {
    height: auto;
    container-type: normal;
  }

  .pslide__visual .pv3-stage {
    width: 100%;
    height: auto;
    max-width: min(100%, 520px);
    margin-inline: auto;
    margin-bottom: 0;
  }

  .pslide__title { margin: var(--s-2) 0 var(--s-2); }

  .pslide__text { margin-bottom: var(--s-3); }

  .pscroll__nav { margin-top: var(--s-5); margin-bottom: var(--s-3); }
}

@keyframes pv3-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
/* ============================================================================
   Kontaktformular
   ========================================================================== */
.kform {
  max-width: 52rem;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
/* Honeypot: darf nicht display:none sein, sonst ueberspringen ihn viele Bots */
.kform__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.kform__reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2vw, 1.6rem);
}
.kfeld { margin: 0 0 1.1rem; }
.kfeld label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.kfeld input[type="text"],
.kfeld input[type="email"],
.kfeld input[type="tel"],
.kfeld select,
.kfeld textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.kfeld textarea { resize: vertical; min-height: 8rem; }
.kfeld input:focus-visible,
.kfeld select:focus-visible,
.kfeld textarea:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45, 176, 190, 0.18);
  background: var(--surface);
}
.kfeld--haken label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.kfeld--haken input { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--teal); }
.kfeld__fehler {
  display: block;
  min-height: 0;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: #c0392b;
}
.kfeld.is-fehler input,
.kfeld.is-fehler textarea,
.kfeld.is-fehler select { border-color: #c0392b; }
.kform__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-top: 0.4rem;
}
.kform__hinweis { margin: 0; font-size: 0.85rem; color: var(--ink-2); flex: 1 1 14rem; }
.kform__senden[disabled] { opacity: 0.6; cursor: progress; }
.kform__meldung {
  margin: 1.2rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  border: 1px solid var(--line);
}
.kform__meldung.is-gut { border-color: rgba(45, 176, 190, 0.45); background: rgba(45, 176, 190, 0.1); color: var(--teal-ink); }
.kform__meldung.is-schlecht { border-color: rgba(192, 57, 43, 0.4); background: rgba(192, 57, 43, 0.07); color: #a3301f; }

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

/* Ueberschrift, die auf breiten Schirmen bewusst in EINER Zeile bleibt.
   Unterhalb wieder normaler Umbruch, sonst laeuft sie aus dem Bild. */
@media (min-width: 900px) {
  /* max-width muss weg, sonst laeuft der nicht umbrechende Text aus seiner Box
     heraus (immer nach rechts) und die Zeile steht sichtbar versetzt. */
  /* Spezifitaet: muss .section__head--breit > h2 { max-width: 46rem } schlagen */
  h2.h2--einzeilig.h2--einzeilig { white-space: nowrap; max-width: none; width: max-content; margin-inline: auto; }
}
.section__head--weit { max-width: 62rem; }

/* Lange deutsche Komposita ("Suchmaschinenoptimierung") passen auf schmalen
   Schirmen in keine Ueberschriftenzeile. Silbentrennung greift, weil das
   Dokument lang="de" traegt; break-word ist die Reissleine, wenn nicht. */
h1, h2, h3, .teamer__name, .lkarte h3, .goal__title {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Lange Leistungsnamen im Verzeichnis sauber trennen statt hart umbrechen */
.footer__col a { hyphens: auto; }

/* Visual der Sammelkarte: angedeutetes Leistungsverzeichnis */
.mock--index {
  display: grid;
  gap: 0.75rem;
  padding: 1.2rem;
}
.mock__idx {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.mock__idx b {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.mock__idx i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.mock__idx i:nth-child(2) { width: 78%; }
.mock__idx i:nth-child(3) { width: 56%; }
.mock__idx i:nth-child(4) { width: 66%; }

/* Angebrochene letzte Reihe fuellt die Breite aus, statt eingerueckt zu stehen.
   Zwei Reste teilen sich die Zeile, ein einzelner Rest nimmt sie ganz. */
.goals.sp-3 > :nth-child(3n + 2):last-child,
.goals.sp-3 > :nth-child(3n + 1):nth-last-child(2),
.goals.sp-4 > :nth-child(4n + 2):last-child,
.goals.sp-4 > :nth-child(4n + 1):nth-last-child(2) {
  flex-basis: calc((100% - var(--luecke)) / 2);
}
.goals.sp-4 > :nth-child(4n + 3):last-child,
.goals.sp-4 > :nth-child(4n + 2):nth-last-child(2),
.goals.sp-4 > :nth-child(4n + 1):nth-last-child(3) {
  flex-basis: calc((100% - 2 * var(--luecke)) / 3);
}

/* Eine einzelne Restkarte MIT Bild wird sonst zur Bildtapete: Motiv nach links,
   Text daneben. Erst ab genug Platz, darunter bleibt das gestapelte Layout. */
@media (min-width: 861px) {
  .goals.sp-2 > .goal--mitbild:last-child:nth-child(odd),
  .goals.sp-3 > .goal--mitbild:last-child:nth-child(3n + 1),
  .goals.sp-4 > .goal--mitbild:last-child:nth-child(4n + 1) {
    grid-template-columns: minmax(0, 22rem) auto minmax(0, 1fr);
    grid-template-areas:
      "bild icon titel"
      "bild text text"
      "bild link link";
    align-content: center;
    column-gap: clamp(1.2rem, 2.4vw, 2.2rem);
  }
  .goals.sp-2 > .goal--mitbild:last-child:nth-child(odd) > .goal__bild,
  .goals.sp-3 > .goal--mitbild:last-child:nth-child(3n + 1) > .goal__bild,
  .goals.sp-4 > .goal--mitbild:last-child:nth-child(4n + 1) > .goal__bild {
    grid-area: bild;
    align-self: center;
    margin: 0;
  }
  /* .goal--mitbild zieht den Titel sonst ueber alle Spalten, dann landet er
     ueber dem Bild statt daneben. */
  .goals.sp-2 > .goal--mitbild:last-child:nth-child(odd) > .goal__title,
  .goals.sp-3 > .goal--mitbild:last-child:nth-child(3n + 1) > .goal__title,
  .goals.sp-4 > .goal--mitbild:last-child:nth-child(4n + 1) > .goal__title {
    grid-area: titel;
    grid-column: auto;
    align-self: center;
  }
}

/* ============================================================================
   Lexikon-Suche
   ========================================================================== */
.lexsuche { max-width: 40rem; margin: 0 auto 2rem; }
.lexsuche__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 0.6rem;
  text-align: center;
}
.lexsuche__feld { position: relative; display: flex; align-items: center; }
.lexsuche__lupe {
  position: absolute;
  left: 1rem;
  width: 20px;
  height: 20px;
  color: var(--ink-2);
  pointer-events: none;
}
.lexsuche__feld input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.85rem 3rem 0.85rem 3rem;
  box-shadow: var(--shadow);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Die native Löschen-Schaltfläche stört neben der eigenen */
.lexsuche__feld input::-webkit-search-cancel-button { display: none; }
.lexsuche__feld input:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45, 176, 190, 0.18);
}
.lexsuche__leeren {
  position: absolute;
  right: 0.8rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lexsuche__leeren:hover { background: var(--bg); color: var(--ink); }
.lexsuche__treffer {
  margin: 0.7rem 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-2);
  min-height: 1.2em;
}
.lexsuche__leer {
  margin: 2rem auto;
  max-width: 34rem;
  text-align: center;
  color: var(--ink-2);
}
/* Ausgeblendete Sprungmarken dürfen keine Lücke hinterlassen */
.abc a[hidden] { display: none; }

/* ============================================================================
   Lexikon: Definitionskarte
   ========================================================================== */
.lexdef {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  padding-left: clamp(1.9rem, 3.4vw, 2.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Farbiger Anriss als eigenes Element: border-image wuerde den Radius
   ausschalten und alle vier Seiten einfaerben. */
.lexdef::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad);
}
.lexdef__kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.9rem;
}
.lexdef__marke {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.lexdef__begriff { font-size: 1.05rem; color: var(--ink); }
.lexdef__text {
  margin: 0;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
}

/* ============================================================================
   Hero auf dem Handy
   Das grosse Logo unter dem Text kostet dort eine halbe Bildschirmhoehe und
   traegt nichts bei. Es faellt weg, der frei werdende Platz geht in groessere
   Abstaende zwischen den Textelementen.
   ========================================================================== */
@media (max-width: 700px) {
  .hero__system { display: none; }

  .hero__grid {
    padding-top: clamp(5.2rem, 12vh, 8rem);
    padding-bottom: clamp(2rem, 6vh, 5rem);
    align-content: center;
  }
  /* Ohne die Bildspalte darf der Text den ganzen Bereich fuellen */
  .hero__copy { display: flex; flex-direction: column; }

  .hero__badge { margin-bottom: 0.6rem; }
  .hero h1 {
    font-size: clamp(2.1rem, 8.2vw, 2.7rem);
    line-height: 1.14;
    /* nowrap sprengt auf schmalen Schirmen die Zeile */
    white-space: normal;
  }
  .hero__type { margin-top: 1.6rem; }
  .hero__sub  { margin-top: 1.6rem; }
  .hero__cta  { margin-top: 2.4rem; gap: 0.8rem; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__trust { margin-top: 2.2rem; }
}

/* Schnellkontakt im Mobilmenue: ersetzt die schwebende Leiste, die auf
   kleinen Schirmen ueber dem Inhalt liegt. */
.nav__mobile-kontakt { display: none; }
@media (max-width: 700px) {
  /* Die schwebende Leiste verschwindet, ihre Ziele stecken jetzt im Menue */
  .rail { display: none; }

  .nav__mobile-kontakt {
    display: block;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav__mobile-titel {
    margin: 0 0 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7fd0e0;
  }
  .nav__mobile-kontakt > a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0;
    font-size: 0.95rem;
    color: var(--dark-text);
  }
  .nav__mobile-kontakt > a svg { width: 19px; height: 19px; flex: 0 0 19px; }
  .nav__mobile-social { display: flex; gap: 0.7rem; margin-top: 0.9rem; }
  .nav__mobile-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--dark-text);
  }
  .nav__mobile-social svg { width: 19px; height: 19px; }

  /* Hero fuellt auch auf dem Handy den sichtbaren Bereich.
     dvh statt vh: sonst rechnet der Browser die Adressleiste mit. */
  .hero { min-height: 100svh; }
  .hero__grid { min-height: 0; }

  /* Vertrauenszeile: der Punkt bleibt auf Hoehe der ersten Zeile, statt
     mittig neben einem zweizeiligen Text zu schweben. */
  .hero__trust {
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.55;
  }
  .hero__trust .dot { margin-top: 0.42em; flex: 0 0 auto; }
}

/* Das Mobilmenue liegt in der fixierten Kopfleiste. Ist es laenger als der
   Bildschirm, ragt es unten heraus und laesst sich nicht erreichen, weil
   fixed nicht mitscrollt. Es braucht daher eine eigene Scrollflaeche. */
.nav__mobile {
  max-height: calc(100svh - 6.5rem);
  overflow-y: auto;
  /* Am Ende des Menues nicht die Seite dahinter weiterscrollen */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Hero auf dem Handy: zentriert und luftiger ---------- */
@media (max-width: 700px) {
  .hero__copy { align-items: center; text-align: center; }
  .hero__badge { justify-content: center; }
  .hero__type { justify-content: center; }
  .hero__sub { margin-inline: auto; }
  .hero__cta { justify-content: center; width: 100%; }
  .hero__trust { justify-content: center; text-align: center; }

  /* Mehr Luft zwischen den Elementen, aber an die Bildschirmhoehe gekoppelt:
     auf einem 640-Pixel-Geraet wuerden feste Abstaende den Hero sprengen. */
  .hero__badge { margin-bottom: clamp(0.9rem, 2.2vh, 1.6rem); }
  .hero__type  { margin-top: clamp(1.2rem, 3vh, 2.4rem); }
  .hero__sub   { margin-top: clamp(1.2rem, 3vh, 2.4rem); }
  .hero__cta   { margin-top: clamp(1.6rem, 4vh, 3rem); gap: 0.8rem; }
  .hero__trust { margin-top: clamp(1.5rem, 3.8vh, 3rem); }
}

/* Kurze Handy-Schirme (etwa iPhone SE): der Hero-Inhalt passt sonst nicht in
   den sichtbaren Bereich, trotz gekoppelter Abstaende. */
@media (max-width: 700px) and (max-height: 700px) {
  .hero__grid { padding-top: 4.6rem; padding-bottom: 1.4rem; }
  .hero h1 { font-size: clamp(1.75rem, 6.6vw, 2.2rem); }
  .hero__sub { font-size: 0.98rem; }
  .hero__cta .btn { padding-block: 0.7rem; }
  .hero__trust { font-size: 0.78rem; }
}

/* Vertrauenszeile: gleichmaessig umbrechen statt ein einzelnes Wort in die
   zweite Zeile zu schieben. */
@media (max-width: 700px) {
  .hero__trust {
    max-width: 30ch;
    margin-inline: auto;
    text-wrap: balance;
  }
}

/* ============================================================================
   Megamenue "Leistungen"
   Haengt im Navigationspunkt, oeffnet auf Hover (Maus) und Klick (Tastatur,
   Touch). Liegt ueber allem, ohne die Kopfleiste zu vergroessern.
   ========================================================================== */
.nav__gruppe--mega { position: static; }
.mega {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  translate: -50% 0;
  width: min(1120px, calc(100vw - 2rem));
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: 22px;
  /* Fast deckend: bei nur 8 Prozent Transparenz schien der Hero-Text noch
     durch und machte die Links unlesbar. */
  background:
    linear-gradient(160deg, rgba(19, 34, 58, 0.99), rgba(9, 17, 31, 0.99));
  border: 1px solid rgba(127, 208, 224, 0.18);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  isolation: isolate;
  /* Eigener Layer: sonst flackert das Glas ueber dem animierten Hintergrund */
  transform: translateZ(0);
  backface-visibility: hidden;
  pointer-events: auto;
  z-index: 120;
  /* Bei zwei Spalten wird das Panel hoch: lieber in sich scrollen als unten
     aus dem Fenster laufen. */
  max-height: calc(100svh - 6.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Sichtbarkeit sauber schalten: hidden für Screenreader, opacity für die Optik */
.mega[hidden] { display: block; visibility: hidden; opacity: 0; translate: -50% -8px; pointer-events: none; }
.mega { transition: opacity 0.24s ease, translate 0.24s ease, visibility 0s linear 0s; }
.mega[hidden] { transition: opacity 0.18s ease, translate 0.18s ease, visibility 0s linear 0.18s; }

.mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  align-items: stretch;
}
.mega__spalten {
  display: grid;
  /* Spalten wachsen mit dem laengsten Eintrag, sonst ragt Text wie
     "Suchmaschinenoptimierung" aus seiner Hover-Flaeche heraus */
  grid-template-columns: repeat(4, minmax(min-content, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1.2rem);
}

/* Feine Linien zwischen den Bereichen: die vier Spalten liefen vorher
   ineinander, jetzt ist auf einen Blick klar, was zusammengehoert. */
.mega__spalte + .mega__spalte {
  padding-left: clamp(0.7rem, 1.4vw, 1.4rem);
  border-left: 1px solid rgba(127, 208, 224, 0.13);
}
.mega__titel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  /* Zweizeilige Titel ("Web und Software") sonst tiefer als einzeilige:
     die Grundlinien lagen 12 px versetzt und die Listen begannen ungleich. */
  min-height: 3.05rem;
  box-sizing: content-box;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7fd0e0;
}
.mega__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  background: rgba(127, 208, 224, 0.12);
  border: 1px solid rgba(127, 208, 224, 0.22);
}
.mega__icon svg { width: 15px; height: 15px; }
.mega__spalte a {
  display: block;
  white-space: nowrap;
  padding: 0.34rem 0.5rem;
  margin-left: -0.5rem;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--dark-text);
  transition: background-color 0.18s ease, color 0.18s ease, translate 0.18s ease;
}
.mega__spalte a:hover,
.mega__spalte a:focus-visible {
  background: linear-gradient(90deg, rgba(127, 208, 224, 0.18), rgba(127, 208, 224, 0.04));
  box-shadow: inset 2px 0 0 rgba(127, 208, 224, 0.75);
  color: #fff;
  translate: 3px 0;
}

/* Abschlusskachel: fuehrt auf die vollstaendige Uebersicht */
.mega__alle {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.3rem;
  padding: 1.2rem;
  border-radius: 16px;
  background: var(--grad);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Feines Punktraster im oberen Drittel: fuellt die leere Flaeche der Kachel,
   ohne vom Text abzulenken. */
.mega__alle::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
  z-index: -1;
  pointer-events: none;
}

.mega__alle::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
  z-index: -1;
  transition: scale 0.5s ease;
}
.mega__alle:hover::after { scale: 1.35; }
/* Die Kachel liegt in .nav__links, deren Link-Farbe sonst gewinnt und den
   Text auf hellem Kopfleisten-Zustand grau einfaerbt. */
.nav__links .mega__alle,
.nav__links .mega__alle:hover,
.nav--dark .nav__links .mega__alle,
.nav--dark .nav__links .mega__alle:hover { color: #fff; }

.mega__alle-kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}
.mega__alle-titel { font-size: 1.15rem; font-weight: 650; line-height: 1.2; }
.mega__alle-text { font-size: 0.85rem; opacity: 0.9; line-height: 1.45; }
.mega__alle-pfeil {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: translate 0.25s ease, background-color 0.25s ease;
}
.mega__alle-pfeil svg { width: 17px; height: 17px; }
.mega__alle:hover .mega__alle-pfeil { translate: 4px 0; background: rgba(255, 255, 255, 0.3); }

/* Schmalere Schirme: drei, dann zwei Spalten, Kachel wandert nach unten */
@media (max-width: 1180px) {
  .mega__inner { grid-template-columns: minmax(0, 1fr); }
  .mega__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.8rem); }
  /* Bei zwei Spalten umbrechen die Bereiche: eine senkrechte Linie saesse
     dann auch links am dritten Block, wo gar keine Nachbarspalte ist. */
  .mega__spalte + .mega__spalte { padding-left: 0; border-left: 0; }
  .mega__titel { min-height: 0; }
  .mega__alle { flex-direction: row; align-items: center; justify-content: space-between; }
  .mega__alle-text { display: none; }
  .mega__alle-pfeil { margin-top: 0; }
}
/* Unter 940px uebernimmt das Hamburger-Menue */
@media (max-width: 940px) { .mega { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .mega, .mega__spalte a, .mega__alle-pfeil, .mega__alle::after { transition: none; }
}

/* Noch nicht verlinkter Eintrag im Megamenue: rot als Merker, dass die Seite
   nachgereicht wird. Vor dem Go-Live entweder verlinken oder entfernen. */
.mega__bald {
  display: block;
  padding: 0.34rem 0.5rem;
  margin-left: -0.5rem;
  font-size: 0.92rem;
  color: #ff6b6b;
  cursor: default;
}

/* ============================================================================
   Helle Karten in dunklen Sektionen
   .section--dark faerbt allen Text weiss. Karten mit hellem Grund (--surface)
   brauchen ihre eigenen Farben zurueck, sonst steht Weiss auf Weiss.
   .op bleibt aussen vor: die Karte ist absichtlich dunkel-transparent.
   ========================================================================== */
.section--dark :is(.goal, .case, .case-sm, .quote, .post, .stat, .lkarte, .preis, .teamer, .member, .step) {
  color: var(--ink-2);
}
.section--dark :is(.goal, .case, .case-sm, .quote, .post, .stat, .lkarte, .preis, .teamer, .member, .step)
  :is(h2, h3, h4, b, strong, .goal__title, .teamer__name, .preis__name, .stat b) {
  color: var(--ink);
}

/* ============================================================================
   Einstiegs-Sektion als Bento-Raster
   Vier gleich grosse Kacheln wirkten beliebig. Jetzt traegt die erste Karte
   das Thema aus, zwei schmale stehen daneben, die vierte schliesst als Band.
   ========================================================================== */
.goals--bento {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
.goals--bento > * { flex: none; }            /* das Flex-Raster gilt hier nicht */
.goals--bento .goal--gross { grid-column: 1; grid-row: 1 / span 2; }
.goals--bento .goal--breit { grid-column: 1 / -1; }

/* Grosse Nummer als Wasserzeichen statt kleiner Ziffer in der Ecke */
.goals--bento .goal__num {
  position: absolute;
  top: clamp(0.6rem, 1.4vw, 1.1rem);
  right: clamp(0.9rem, 1.8vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(47, 77, 158, 0.16);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.3s ease;
}
.goals--bento .goal:hover .goal__num { -webkit-text-stroke-color: rgba(47, 163, 186, 0.4); }

/* Icon-Kachel im Markenverlauf statt flaechigem Blau */
.goals--bento .goal__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(47, 77, 158, 0.7);
  transition: scale 0.3s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.3s ease;
}
.goals--bento .goal__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.goals--bento .goal:hover .goal__icon { scale: 1.06; rotate: -4deg; }

/* .goal ist ein Grid mit festen Bereichen. Die Bento-Karten brauchen einen
   zusaetzlichen Bereich fuer die Stichpunkte, sonst landen sie hinter dem
   Link und der Titel klebt am rechten Rand. */
.goals--bento .goal {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon titel"
    "text text"
    "punkte punkte"
    "vis vis"
    "link link";
  justify-content: start;
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.75rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
}
.goals--bento .goal__punkte { grid-area: punkte; }
/* Titel linksbuendig neben dem Icon statt ueber die ganze Zeile gestreckt */
.goals--bento .goal__title { justify-self: start; }
.goals--bento .goal--gross { justify-content: flex-start; }
.goals--bento .goal--gross .goal__title { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.goals--bento .goal--gross .goal__text { font-size: 1.02rem; }

/* Stichpunkte: konkret statt allgemeiner Beschreibung */
.goal__punkte {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.goal__punkte > span {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.94rem;
  color: var(--ink-2);
}
.goal__punkte > span::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad);
  translate: 0 -1px;
}
/* In der breiten Abschlusskarte laufen die Punkte nebeneinander */
.goal__punkte--reihe { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }

/* Inhalt oben zusammen, Link unten: die letzte Zeile bekommt den Restplatz.
   (margin-top:auto reicht im Grid nicht, es wirkt nur innerhalb der Zeile.) */
.goals--bento .goal {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  align-content: stretch;
}
.goals--bento .goal__link { align-self: end; padding-top: 0.8rem; }

@media (max-width: 860px) {
  .goals--bento { grid-template-columns: minmax(0, 1fr); }
  .goals--bento .goal--gross { grid-column: 1; grid-row: auto; }
  .goals--bento .goal--breit { grid-column: 1; }
}

/* ============================================================================
   Kernbereiche: kraeftigerer Kartenkopf und Stapelwirkung
   Die Karten unterschieden sich vorher nur durch ihren Inhalt. Jetzt tragen
   sie einen eigenen Kopf mit Index-Kachel und einen farbigen Anriss oben,
   der beim Stapeln sichtbar bleibt.
   ========================================================================== */
.cores-stack .core {
  position: relative;
  overflow: hidden;
  /* Eigener Farbton je Bereich, unten pro Karte gesetzt */
  --akzent: var(--grad);
}
/* Farbiger Anriss am oberen Rand: bleibt im Stapel als Kante sichtbar.
   Beim Darueberfahren tritt er zurueck, dafuer laeuft ein Licht komplett
   um die Karte herum (gleiches Prinzip wie der Laser am Header). */
.cores-stack .core::before {
  content: "";
  position: absolute;
  /* Nicht nur ein gerader Balken: das Element traegt oben denselben Radius
     wie die Karte und wird per Maske auf seinen Rand reduziert. Dadurch
     laeuft der Anriss ein Stueck um beide Ecken herum. Unten kein Padding,
     sonst zoege die Maske dort eine waagerechte Abschlusslinie. */
  inset: -1px -1px auto -1px;
  height: 26px;
  border-radius: calc(var(--radius) + 7px) calc(var(--radius) + 7px) 0 0;
  padding: 3px 3px 0;
  transition: opacity 0.3s ease;
  background: var(--akzent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 1;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
/* Der Anriss bleibt sichtbar: der Rahmen waechst aus ihm heraus. */

/* Beim Darueberfahren waechst der Strich von oben aus in beide Richtungen
   die Flanken hinunter und schliesst sich unten zum vollen Rahmen.
   --oeffnung ist eine registrierte Variable, deshalb laesst sie sich per
   Transition weich auf- und wieder zufahren. */
@property --oeffnung {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.cores-stack .core::after {
  content: "";
  --oeffnung: 0deg;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent calc(180deg - var(--oeffnung)),
    var(--akz-a) calc(180deg - var(--oeffnung)),
    var(--akz-a) calc(180deg + var(--oeffnung)),
    transparent calc(180deg + var(--oeffnung)),
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(63, 214, 232, 0.45));
  pointer-events: none;
  z-index: 3;
  transition: --oeffnung 1.9s cubic-bezier(0.25, 0.6, 0.3, 1);
}
.cores-stack .core:hover::after { --oeffnung: 180deg; }

/* Der wachsende Rahmen ist bei allen Karten derselbe Ton. Nur der
   Anriss oben und die Kacheln tragen die jeweilige Bereichsfarbe. */
.cores-stack .core { --akz-a: #2f4d9e; }
.cores-stack .core {
  transition: border-color 0.35s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.cores-stack .core:hover {
  border-color: rgba(63, 214, 232, 0.35);
  box-shadow: 0 30px 60px -40px rgba(12, 22, 38, 0.55);
}


/* Index als Kachel statt kleiner Buchstabe mit Schraegstrich.
   Doppelte Klasse, weil `.core > .core__copy > p` sonst die Textfarbe
   ueberschreibt und der Buchstabe dunkel auf dunkel steht. */
.cores-stack .core__index.core__index {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--akzent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 20px -12px rgba(47, 77, 158, 0.75);
}
.cores-stack .core__index::after { content: none; }

/* Leistungen als Chips: kompakter und mehr Struktur als eine Hakenliste */
.cores-stack .core__copy .ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.1rem;
}
.cores-stack .core__copy .ticks li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 1px solid rgba(12, 22, 38, 0.09);
  border-radius: 99px;
  background: linear-gradient(180deg, #fff, #f4f7fb);
  box-shadow: 0 1px 2px rgba(12, 22, 38, 0.05);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.25s ease, color 0.25s ease,
              background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
/* kleiner Punkt in der Bereichsfarbe statt Haken */
.cores-stack .core__copy .ticks li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--akzent);
  flex: 0 0 6px;
  position: static;
  top: auto;
  left: auto;
}
.cores-stack .core:hover .ticks li {
  border-color: rgba(47, 163, 186, 0.4);
  box-shadow: 0 6px 14px -8px rgba(47, 77, 158, 0.4);
}
.cores-stack .core__copy .ticks li:hover {
  transform: translateY(-2px);
  border-color: rgba(63, 214, 232, 0.6);
  background: #fff;
}

/* Einordnung ueber dem Titel als kleines Schild */
.cores-stack .core__index.core__index,
.cores-stack .core__kicker.core__kicker { vertical-align: middle; }
.cores-stack .core__kicker.core__kicker { position: relative; top: -3px; }
.cores-stack .core__kicker.core__kicker {
  display: inline-block;
  padding: 0.34rem 0.8rem;
  border-radius: 99px;
  background: rgba(47, 163, 186, 0.14);
  border: 1px solid rgba(47, 163, 186, 0.3);
  color: #1a5f70;                    /* dunkler als teal-ink: besser lesbar */
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  margin-bottom: 0.7rem;
}

/* Aus dem Textlink wird ein Knopf, wie in der Einstiegs-Sektion */
.cores-stack .core__link { margin-top: 1.6rem; }
.cores-stack .core__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.45rem;
  border: 0;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 14px 30px -18px rgba(47, 77, 158, 0.95);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cores-stack .core__link a::after {
  content: "\2192";
  transition: transform 0.25s ease;
}
.cores-stack .core__link a:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -18px rgba(47, 77, 158, 0.95);
}
.cores-stack .core__link a:hover::after { transform: translateX(4px); }

/* Die vierte Karte gehoerte bisher nicht zum Stapel und lief einfach durch */
@media (min-width: 861px) {
  html.js .cores-stack .core:nth-of-type(4) { --si: 3; }
}

/* Einordnung ueber dem Kartentitel: macht auf einen Blick klar, worum es in
   dieser Karte geht, bevor man den Titel liest. */
.cores-stack .core__kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 0.35rem;
}

/* ============================================================================
   Projektliste "Digitale Lösungen im realen Einsatz"
   Bewusst kein Kartenraster: grosse Zeilen mit Trennlinien, dazu eine
   Vorschau, die dem Zeiger folgt. So unterscheidet sich der Abschnitt klar
   von den Kernbereichen darueber.
   ========================================================================== */
.faelle { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.fall {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.4rem);
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  /* Die Zeile selbst bleibt unangetastet, bewegt werden nur die Inhalte */
}
.fall:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
/* Heller Schleier, der beim Ueberfahren von links einlaeuft */
.fall::before {
  content: "";
  position: absolute;
  inset: 0 -1.2rem;
  z-index: -1;
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fall__nr {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #7fd0e0;
  letter-spacing: 0.1em;
}
.fall__titel {
  display: block;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.fall__text {
  display: block;
  margin-top: 0.4rem;
  max-width: 52ch;
  font-size: 0.95rem;
  color: var(--dark-text);
}
.fall__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.fall__tags i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-text);
  padding: 0.28rem 0.66rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  white-space: nowrap;
}
.fall__pfeil {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: border-color 0.34s ease, opacity 0.34s ease,
              translate 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.fall__pfeil::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.34s ease;
}
.fall__pfeil svg { position: relative; z-index: 1; width: 19px; height: 19px; }

/* Der Scroll-Motor setzt opacity als Inline-Style. Das Zuruecktreten laeuft
   deshalb ueber eine eigene Variable auf den Inhalten, sonst greift es nur
   bei Zeilen, die der Motor gerade nicht anfasst. */
/* Der Scroll-Motor setzt opacity als Inline-Style auf die Zeile. Das
   Zuruecktreten laeuft deshalb ueber eine Variable auf den Inhalten.
   .fall__pfeil steht hier NICHT drin, er hat seine eigene Liste oben,
   sonst wuerde diese Kurzform sie ueberschreiben. */
/* Der Scroll-Motor setzt eine eigene transition auf [data-rise] und
   ueberschreibt damit alles, was an der Zeile selbst haengt. Deckkraft und
   Verschiebung laufen deshalb auf den Inhalten. */
.fall__nr, .fall__haupt, .fall__meta {
  opacity: var(--dim, 1);
  transition: opacity 0.34s ease, translate 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.fall__pfeil { opacity: var(--dim, 1); }
@media (hover: hover) {
  .fall::before { transition-duration: 0.34s; }
  .fall:hover::before { opacity: 1; }
  .fall:hover :is(.fall__nr, .fall__haupt) { translate: 12px 0; }
  .fall:hover .fall__pfeil { border-color: transparent; translate: 4px 0; }
  .fall:hover .fall__pfeil::after { opacity: 1; }
  .faelle:hover .fall { --dim: 0.5; }
  .faelle:hover .fall:hover { --dim: 1; }
}
.fall:focus-visible :is(.fall__nr, .fall__haupt) { translate: 12px 0; }
.fall:focus-visible::before { opacity: 1; }

@media (max-width: 900px) {
  .fall { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem 1rem; }
  /* Alle vier Felder fest zuweisen. Vorher hatte nur der Pfeil eine Zeile
     ("grid-row: 1"): das Raster setzte ihn dadurch zuerst in Spalte 1, alle
     anderen rutschten eine Spalte weiter. Die Nummer sass dann in der
     breiten Textspalte (231 px Leere daneben) und auf schmalen Schirmen
     wurde sie auf null Breite gequetscht. */
  .fall__nr    { grid-column: 1; grid-row: 1; }
  .fall__haupt { grid-column: 2; grid-row: 1; }
  .fall__pfeil { grid-column: 3; grid-row: 1; width: 38px; height: 38px; }
  .fall__meta  { grid-column: 2 / -1; grid-row: 2; }
  .fall__tags { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .fall, .fall::before, .fall__pfeil,
  .fall__nr, .fall__haupt, .fall__meta { transition: none; }
}

/* ============================================================================
   Terminbuchung (Calendly)
   Der Kalender wird erst nach Klick geladen, deshalb steht davor eine
   ruhige Platzhalter-Karte in derselben Hoehe.
   ========================================================================== */
.termin {
  position: relative;
  min-height: 640px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.termin__platz {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  min-height: 640px;
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.termin__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 0.6rem;
  border-radius: 18px;
  color: #fff;
  background: var(--grad);
}
.termin__icon svg { width: 30px; height: 30px; }
.termin__titel { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; }
.termin__text { max-width: 46ch; color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.termin__platz .btn { margin-top: 0.9rem; }
.termin__klein { margin-top: 0.4rem; font-size: 0.85rem; color: var(--ink-2); }
.termin__klein a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
/* Geladener Kalender: Calendly bringt seine eigene Darstellung mit */
.termin.ist-geladen { min-height: 660px; }
.termin .calendly-inline-widget { width: 100%; min-height: 660px; }

@media (max-width: 620px) {
  .termin, .termin__platz { min-height: 560px; }
}

/* Volles Kundenraster auf der Referenzseite: mehr Spalten als im Anriss
   auf der Startseite, damit 76 Logos ruhig wirken statt endlos zu scrollen */
.logos__grid--voll {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
  margin-top: clamp(1.2rem, 3vw, 2rem);
}
.logos__grid--voll .logos__item { padding: 0.7rem 0.9rem; }
.logos__grid--voll .logos__item img { max-height: 46px; }
@media (max-width: 620px) {
  .logos__grid--voll { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.5rem; }
  .logos__grid--voll .logos__item img { max-height: 36px; }
}

/* ============================================================================
   Portfolio: Projekt mit Geraete-Mockup
   Der Screenshot sitzt in einem angedeuteten Laptop, die mobile Ansicht
   ragt rechts unten hervor. Rein per CSS, keine zusaetzlichen Rahmenbilder.
   ========================================================================== */
.pro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
.pro__karte {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  .pro__karte:hover {
    transform: translateY(-6px);
    border-color: rgba(47, 163, 186, 0.45);
    box-shadow: 0 8px 18px rgba(12, 22, 38, 0.07), 0 34px 60px -26px rgba(34, 58, 124, 0.36);
  }
  .pro__karte:hover .pro__handy { transform: translate(0, -6px); }
}

/* Buehne mit Laptop und Handy */
.pro__buehne {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 3vw, 2rem) clamp(2.2rem, 4vw, 3rem);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(47, 163, 186, 0.14), transparent 65%),
    linear-gradient(160deg, #eef3f9, #e3ebf5);
  border-bottom: 1px solid var(--line);
}
.pro__laptop { position: relative; display: block; width: min(100%, 420px); }
.pro__rahmen {
  display: block;
  padding: 7px 7px 0;
  border-radius: 12px 12px 3px 3px;
  background: linear-gradient(160deg, #2a3550, #131c30);
  box-shadow: 0 18px 34px -18px rgba(12, 22, 38, 0.55);
}
.pro__rahmen img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px 6px 0 0;
  background: #fff;
}
/* Angedeutete Laptop-Unterkante */
.pro__fuss {
  display: block;
  width: 112%;
  height: 12px;
  margin-left: -6%;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #26314a, #0f1728);
  box-shadow: 0 12px 22px -12px rgba(12, 22, 38, 0.6);
}
.pro__handy {
  position: absolute;
  right: clamp(0.8rem, 3vw, 2rem);
  bottom: clamp(0.6rem, 2vw, 1.4rem);
  width: clamp(62px, 16%, 96px);
  padding: 4px;
  border-radius: 12px;
  background: linear-gradient(160deg, #2a3550, #131c30);
  box-shadow: 0 16px 30px -14px rgba(12, 22, 38, 0.6);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pro__handy img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  background: #fff;
}

.pro__text { padding: clamp(1.1rem, 2.4vw, 1.6rem); display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.pro__kat {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.pro__text h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: -0.015em; }
.pro__lead { color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.pro__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--blue);
}
.pro__link svg { width: 16px; height: 16px; transition: translate 0.3s ease; }
.pro__link:hover svg { translate: 4px 0; }

@media (max-width: 620px) {
  .pro { grid-template-columns: 1fr; }
  .pro__buehne { padding: 1.3rem 1rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pro__karte, .pro__handy, .pro__link svg { transition: none; }
}

/* Aeltere Mockups bringen Monitor, Tablet und Handy schon im Bild mit und
   kommen deshalb ohne den CSS-Rahmen aus */
.pro__buehne--frei { padding: clamp(0.8rem, 2vw, 1.4rem); background: linear-gradient(160deg, #f2f6fb, #e8eff8); }
.pro__frei { display: block; width: 100%; }
.pro__frei img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Slider: aeltere Mockups bringen Monitor, Tablet und Handy schon mit.
   Sie liegen auf einer hellen Karte, weil ihr Bildhintergrund weiss ist und
   im dunklen Abschnitt sonst wie ein abgeschnittener Kasten aussieht. */
.pv3-stage--frei {
  display: grid;
  place-items: center;
  aspect-ratio: 16/10;
  /* Schwebt wie die uebrigen Folien, nur ohne Geraeterahmen */
}
.pv3-frei {
  width: 100%;
  filter: drop-shadow(0 26px 40px rgba(4, 10, 24, 0.55));
}
.pv3-frei img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  border-radius: 10px;
}

/* ============================================================================
   Faktenband
   Eine ruhige Zeile statt einzelner Zahlen-Kacheln: die Angaben stehen
   nebeneinander, getrennt durch feine Linien.
   ========================================================================== */
.fakten { padding: clamp(1.6rem, 3vw, 2.4rem) 0; }
.fakten__band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.fakten__punkt {
  display: grid;
  gap: 0.2rem;
  padding-left: clamp(0.8rem, 2vw, 1.6rem);
  border-left: 1px solid var(--line);
}
.fakten__punkt:first-child { border-left: 0; padding-left: 0; }
.fakten__punkt b {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.fakten__punkt span { font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }

.fakten--dunkel .fakten__band {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: none;
}
.fakten--dunkel .fakten__punkt { border-left-color: rgba(255, 255, 255, 0.12); }
.fakten--dunkel .fakten__punkt span { color: var(--dark-text); }

@media (max-width: 620px) {
  .fakten__punkt { border-left: 0; padding-left: 0; }
  .fakten__punkt + .fakten__punkt { padding-top: 0.9rem; border-top: 1px solid var(--line); }
}

/* ============================================================================
   Produktkarten mit UI-Mockup
   Bild oben in ruhigem Blau, darunter Chip, Titel, Unterzeile und Text.
   ========================================================================== */
.ukarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.ukarten.sp-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.ukarten.sp-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.ukarte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  a.ukarte:hover {
    transform: translateY(-5px);
    border-color: rgba(47, 163, 186, 0.45);
    box-shadow: 0 8px 18px rgba(12, 22, 38, 0.07), 0 30px 54px -26px rgba(34, 58, 124, 0.34);
  }
  a.ukarte:hover .ukarte__pfeil { background: var(--grad); border-color: transparent; color: #fff; }
  a.ukarte:hover .ukarte__bild img { transform: scale(1.03); }
}
.ukarte__bild {
  display: block;
  overflow: hidden;
  background: linear-gradient(160deg, #eef3fb, #e2eaf6);
  border-bottom: 1px solid var(--line);
}
.ukarte__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ukarte__text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  flex: 1;
}
.ukarte__chip {
  align-self: flex-start;
  margin-bottom: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(34, 58, 124, 0.18);
  border-radius: 99px;
  background: rgba(34, 58, 124, 0.08);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #22397c;
}
.ukarte__titel { font-size: 1.1rem; font-weight: 650; letter-spacing: -0.015em; }
.ukarte__unter { font-size: 0.95rem; color: var(--blue); }
.ukarte__lead { margin-top: 0.35rem; font-size: 0.93rem; line-height: 1.6; color: var(--ink-2); }
.ukarte__pfeil {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: auto;
  padding-top: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--blue);
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.ukarte__pfeil svg { width: 16px; height: 16px; }
.ukarte__lead + .ukarte__pfeil { margin-top: 1rem; }

.section--dark .ukarte {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: none;
  color: #fff;
}
.section--dark .ukarte__lead { color: var(--dark-text); }
.section--dark .ukarte__unter { color: #7fd0e0; }

@media (prefers-reduced-motion: reduce) {
  .ukarte, .ukarte__bild img, .ukarte__pfeil { transition: none; }
}

/* ============================================================================
   Reels: Videos im Hochformat, wie sie in den sozialen Netzen laufen
   ========================================================================== */
.reels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.6rem);
  max-width: 900px;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
}
.reel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #0d1524;
  box-shadow: var(--shadow);
}
.reel__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #0d1524;
}
.reel__ton {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(9, 16, 30, 0.62);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.reel__ton svg { width: 18px; height: 18px; }
.reel__ton:hover { background: rgba(9, 16, 30, 0.85); transform: scale(1.06); }
.reel__ton[data-an="ja"] { background: var(--grad); }
.reel__titel {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  max-width: calc(100% - 3.6rem);
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 10px rgba(6, 12, 24, 0.8);
}
.section--dark .reel { border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }

/* ============================================================================
   Ablauf im Zickzack: die Schritte sitzen abwechselnd links und rechts an
   einer durchgehenden Linie. Ruhiger zu lesen als fuenf schmale Spalten.
   ========================================================================== */
.steps--zickzack {
  position: relative;
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  max-width: 940px;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  counter-reset: schritt;
}
/* Mittellinie */
.steps--zickzack::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.steps--zickzack .step {
  position: relative;
  width: calc(50% - clamp(1.4rem, 3vw, 2.4rem));
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.steps--zickzack .step:nth-child(odd) { justify-self: start; }
.steps--zickzack .step:nth-child(even) { justify-self: end; }
/* Punkt auf der Linie */
.steps--zickzack .step::after {
  content: "";
  position: absolute;
  top: clamp(1.4rem, 2.6vw, 1.9rem);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 4px var(--bg);
}
.steps--zickzack .step:nth-child(odd)::after { right: calc(-1 * clamp(1.4rem, 3vw, 2.4rem) - 5px); }
.steps--zickzack .step:nth-child(even)::after { left: calc(-1 * clamp(1.4rem, 3vw, 2.4rem) - 5px); }
/* Die Ziffer sass auf dem Farbverlauf, der genau in diesem Teal endet:
   auf der rechten Haelfte des Kaestchens war sie praktisch unsichtbar.
   Weiss haelt den Kontrast ueber den ganzen Verlauf. */
.steps--zickzack .step__num { color: #fff; }

@media (max-width: 760px) {
  .steps--zickzack::before { left: 9px; }
  /* Der Einzug fuer die Zeitleiste muss von der Breite abgezogen werden,
     sonst ragt die Karte um genau diese 2rem aus dem Bild. */
  .steps--zickzack .step { width: calc(100% - 2rem); margin-left: 2rem; }
  .steps--zickzack .step:nth-child(odd)::after,
  .steps--zickzack .step:nth-child(even)::after { left: -2.35rem; right: auto; }
}

/* ============================================================================
   Hoerprobe: eigener Abspieler statt Browser-Standard
   ========================================================================== */
.hoer {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  max-width: 760px;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.hoer__knopf {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--grad);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hoer__knopf:hover { transform: scale(1.05); box-shadow: 0 12px 26px -12px rgba(34, 58, 124, 0.6); }
.hoer__knopf svg { width: 24px; height: 24px; }
.hoer__pause { display: none; }
.hoer[data-laeuft="ja"] .hoer__play { display: none; }
.hoer[data-laeuft="ja"] .hoer__pause { display: block; }
.hoer__mitte { flex: 1; min-width: 0; }
.hoer__titel { font-weight: 650; }
.hoer__text { margin-top: 0.15rem; font-size: 0.9rem; color: var(--ink-2); }
.hoer__leiste {
  position: relative;
  height: 6px;
  margin-top: 0.7rem;
  border-radius: 99px;
  background: rgba(12, 22, 38, 0.1);
  cursor: pointer;
  overflow: hidden;
}
.hoer__leiste span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 99px;
  background: var(--grad);
}
.hoer__zeit { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); }

.section--dark .hoer {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: none;
}
.section--dark .hoer__text, .section--dark .hoer__zeit { color: var(--dark-text); }
.section--dark .hoer__leiste { background: rgba(255, 255, 255, 0.14); }

@media (max-width: 560px) {
  .hoer { flex-wrap: wrap; }
  .hoer__zeit { width: 100%; text-align: right; }
}

/* ============================================================================
   Blog-Uebersicht: Beitraege als Karten
   ========================================================================== */
.beitraege {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.beitrag {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: inherit;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.6s ease;
}
@media (hover: hover) {
  .beitrag:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 163, 186, 0.45);
    box-shadow: 0 8px 18px rgba(12, 22, 38, 0.07), 0 30px 54px -26px rgba(34, 58, 124, 0.34);
  }
  .beitrag:hover .beitrag__mehr svg { translate: 4px 0; }
  .beitrag__mehr svg { transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
}
.beitrag__kopf { display: flex; align-items: center; gap: 0.5rem; }
.beitrag__tag {
  padding: 0.24rem 0.62rem;
  border-radius: 99px;
  background: rgba(47, 163, 186, 0.12);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.beitrag__titel { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.35; letter-spacing: -0.015em; }
.beitrag__text { font-size: 0.93rem; line-height: 1.6; color: var(--ink-2); }
.beitrag__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.7rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--blue);
}
.beitrag__mehr svg { width: 16px; height: 16px; transition: translate 0.3s ease; }
.beitrag[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .beitrag, .beitrag__mehr svg { transition: none; }
}

/* Nachladen der Blog-Beitraege */
.mehr { display: grid; justify-items: center; gap: 0.6rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.mehr__zahl { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-2); }
.mehr[hidden] { display: none; }
.beitrag:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Preis und Anfrage-Knopf in den Produktkarten */
.ukarte__lead { flex: 1; }          /* schiebt Preis und Knopf nach unten */
.ukarte__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.ukarte__preis {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ukarte__preis b {
  font-size: 1.32rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ukarte__preis i { font-style: normal; font-size: 0.82rem; color: var(--ink-2); }
.ukarte__knopf { gap: 0.4rem; flex: 0 0 auto; }
.ukarte__knopf svg { width: 15px; height: 15px; transition: translate 0.3s ease; }
.ukarte__knopf:hover svg { translate: 3px 0; }
.section--dark .ukarte__fuss { border-top-color: rgba(255, 255, 255, 0.12); }
.section--dark .ukarte__chip { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); color: #cfe0ff; }
.section--dark .ukarte__preis b { color: #fff; }

/* ============================================================================
   Chatbot Lara
   Gleiche Groesse und Erscheinungsweise wie der Nach-oben-Button, sitzt
   direkt darueber. Das Chatfenster laedt erst auf Klick.
   ========================================================================== */
.chatknopf {
  position: fixed;
  right: clamp(10px, 1.4vw, 22px);
  bottom: 82px;                     /* 22px Grundabstand + 48px Knopf + 12px Luft */
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: linear-gradient(140deg, #22397c, #2fa3ba);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(47, 77, 158, 0.65);
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.chatknopf.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chatknopf svg { width: 21px; height: 21px; }
.chatknopf__zu { display: none; }
.chatknopf[aria-expanded="true"] .chatknopf__auf { display: none; }
.chatknopf[aria-expanded="true"] .chatknopf__zu { display: block; }
.chatknopf:hover {
  transform: translateY(-3px) scale(1.12);
  box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.15), 0 0 30px -2px rgba(63, 214, 232, 0.45), 0 14px 30px -10px rgba(0, 0, 0, 0.5);
}
.chatknopf:focus-visible { outline: 2px solid #3fd6e8; outline-offset: 3px; }

/* Beschriftung erscheint beim Ueberfahren, damit der Knopf klein bleibt */
.chatknopf__hinweis {
  position: absolute;
  right: calc(100% + 10px);
  padding: 0.34rem 0.7rem;
  border-radius: 99px;
  background: #0f1c30;
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
  .chatknopf:hover .chatknopf__hinweis, .chatknopf:focus-visible .chatknopf__hinweis {
    opacity: 1; transform: translateX(0);
  }
}
.chatknopf[aria-expanded="true"] .chatknopf__hinweis { display: none; }

.chatfenster {
  position: fixed;
  right: clamp(10px, 1.4vw, 22px);
  bottom: 142px;
  z-index: 95;
  width: min(380px, calc(100vw - 24px));
  height: min(620px, calc(100vh - 190px));
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px -18px rgba(6, 14, 30, 0.45);
  /* backwards ist Pflicht: ohne das rendert der Browser das Fenster einen
     Frame lang fertig, bevor die Animation bei opacity 0 einsetzt. Genau
     das ist das kurze Zucken beim Oeffnen. */
  /* Keine Einblendung: jede Bewegung beim Oeffnen wurde als Zucken
     wahrgenommen (vom Nutzer so bestaetigt). Das Fenster ist einfach da. */
  animation: none;
}
.chatfenster[hidden] { display: none; }
.chatfenster iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Bis der Chat geladen ist, traegt das Fenster den Seitenton statt Weiss:
   sonst blitzt eine weisse Flaeche auf, bevor der Inhalt kommt. */
.chatfenster { background: #0d1a30; }
.chatfenster iframe { background: #fff; }

@media (max-width: 620px) {
  .chatknopf { bottom: 126px; right: 12px; width: 42px; height: 42px; }
  .chatknopf svg { width: 19px; height: 19px; }
  .chatfenster { bottom: 178px; height: min(560px, calc(100vh - 220px)); }
}
@media (prefers-reduced-motion: reduce) {
  .chatknopf, .chatknopf__hinweis { transition: none; }
  .chatfenster { animation: none; }
}

/* ============================================================================
   Jubilaeum: Text links, Teamfoto gross rechts, Marke ueberlappend davor
   ========================================================================== */
.jubi {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 5vw, 3.5rem);
  align-items: center;
}
.jubi__text { display: grid; gap: 0.9rem; justify-items: start; }
.jubi__text h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -0.025em; }
.jubi__lead { max-width: 46ch; color: var(--dark-text); line-height: 1.7; }
.jubi__zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.6rem);
  width: 100%;
  margin-top: 0.4rem;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.jubi__zahlen b {
  display: block;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.jubi__zahlen span { display: block; margin-top: 0.2rem; font-size: 0.86rem; line-height: 1.45; color: var(--dark-text); }
.jubi__knopf { gap: 0.5rem; margin-top: 0.4rem; }
.jubi__knopf svg { width: 17px; height: 17px; transition: translate 0.3s ease; }
.jubi__knopf:hover svg { translate: 4px 0; }

.jubi__bild { position: relative; }
.jubi__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 34px 70px -28px rgba(4, 10, 24, 0.85);
}
/* Marke ragt ueber die untere linke Ecke des Fotos */
.jubi__marke {
  position: absolute;
  left: clamp(-1.5rem, -2vw, -0.5rem);
  bottom: clamp(-2rem, -3vw, -1rem);
  width: clamp(150px, 34%, 250px);
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(4, 10, 24, 0.6));
  animation: jubi-schweben 7s ease-in-out infinite;
}
@keyframes jubi-schweben {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

@media (min-width: 900px) {
  .jubi { grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
@media (max-width: 620px) {
  .jubi__marke { width: 128px; left: -0.6rem; bottom: -1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jubi__marke { animation: none; }
}

/* ============================================================================
   Bildergalerie mit Lightbox
   ========================================================================== */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.galerie__feld {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #dfe7f2;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.galerie__feld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}
.galerie__feld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(9, 16, 30, 0.45));
  opacity: 0;
  transition: opacity 0.35s ease;
}
@media (hover: hover) {
  .galerie__feld:hover img { transform: scale(1.06); }
  .galerie__feld:hover::after { opacity: 1; }
}
.galerie__feld:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 12, 24, 0.93);
  backdrop-filter: blur(6px);
  animation: lb-auf 0.25s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lb-auf { from { opacity: 0; } }
.lightbox__buehne { display: grid; justify-items: center; gap: 0.8rem; min-width: 0; }
.lightbox__buehne img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}
.lightbox__buehne figcaption { font-family: var(--font-mono); font-size: 0.8rem; color: rgba(255, 255, 255, 0.66); }
.lightbox__pfeil, .lightbox__zu {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.lightbox__pfeil:hover, .lightbox__zu:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.06); }
.lightbox__pfeil svg, .lightbox__zu svg { width: 22px; height: 22px; }
.lightbox__zu { position: absolute; top: clamp(0.8rem, 2vw, 1.6rem); right: clamp(0.8rem, 2vw, 1.6rem); }

@media (max-width: 620px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox__pfeil { position: static; }
  .lightbox__pfeil--vor { grid-column: 1; grid-row: 2; justify-self: start; }
  .lightbox__pfeil--zurueck { grid-column: 1; grid-row: 2; justify-self: end; }
  .lightbox__buehne { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .galerie__feld img, .lightbox { transition: none; animation: none; }
}

/* Feine Trennlinie zwischen Jubilaeum und Kundenstimmen: beide Abschnitte
   sind dunkel und liefen sonst ohne Kante ineinander. */
/* Feine Linie am Sektionsende: setzt zwei dunkle Sektionen voneinander ab,
   die sonst ineinander uebergehen. */
.jubi-sektion,
#arbeiten.section--dark { position: relative; }
.jubi-sektion::after,
#arbeiten.section--dark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1180px, calc(100% - 2.5rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 18%, rgba(255, 255, 255, 0.16) 82%, transparent);
  pointer-events: none;
}

/* Hauptpunkte mit Klappmenue sind Schaltflaechen, keine Links. Farbe und
   Schrift kommen aus derselben Regel wie bei den Links, hier nur die
   Knopf-Voreinstellungen des Browsers abraeumen. */
.nav__links button.nav__gruppenlink {
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
}
.nav__gruppe { gap: 0; }

/* Zwei Wege aus dem Jubilaeums-Abschnitt: Galerie und Team */
.jubi__knoepfe { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }

/* Auf dem Handy standen die beiden Knoepfe unterschiedlich breit
   untereinander. Volle Breite wirkt ruhiger und ist leichter zu treffen. */
@media (max-width: 760px) {
  /* Der Elternblock ist ein Raster mit justify-items:start, deshalb waren die
     Knoepfe nur so breit wie ihr Inhalt. justify-self zieht sie auf die
     volle Breite. */
  .jubi__knoepfe {
    justify-self: stretch;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .jubi__knoepfe .jubi__knopf { width: 100%; justify-content: center; }
}

/* ============================================================================
   Klappmenues in der Kopfleiste: Kopfzeile, Icon, Name und kurze Erklaerung
   ========================================================================== */
.nav__unter { min-width: 19rem; padding: 0.7rem; gap: 0.15rem; }
.nav__unter-titel {
  margin: 0.15rem 0.6rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7fd0e0;
}
.nav__unter a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
  transition: background-color 0.2s ease, translate 0.2s ease;
}
.nav__unter-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #7fd0e0;
  background: rgba(127, 208, 224, 0.1);
  border: 1px solid rgba(127, 208, 224, 0.2);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav__unter-icon svg { width: 17px; height: 17px; }
.nav__unter-text { display: grid; gap: 0.1rem; min-width: 0; }
.nav__unter-name { font-size: 0.93rem; font-weight: 600; color: #eef3fb; }
.nav__unter-info { font-size: 0.78rem; line-height: 1.35; color: rgba(233, 240, 250, 0.6); }
.nav__unter-pfeil {
  display: grid;
  place-items: center;
  width: 22px;
  color: rgba(127, 208, 224, 0.75);
  opacity: 0;
  translate: -4px 0;
  transition: opacity 0.2s ease, translate 0.2s ease;
}
.nav__unter-pfeil svg { width: 15px; height: 15px; }

.nav__unter a:hover,
.nav__unter a:focus-visible {
  background: rgba(127, 208, 224, 0.1);
  translate: 2px 0;
}
.nav__unter a:hover .nav__unter-icon,
.nav__unter a:focus-visible .nav__unter-icon {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}
.nav__unter a:hover .nav__unter-pfeil,
.nav__unter a:focus-visible .nav__unter-pfeil { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .nav__unter a, .nav__unter-icon, .nav__unter-pfeil { transition: none; }
}

/* ============================================================================
   Preisseite: Kopf je Kategorie mit Schaubild
   ========================================================================== */
.preiskopf {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.6vw, 2rem);
  align-items: center;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  padding-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .preiskopf { grid-template-columns: 1.05fr 1fr; } }
.preiskopf__merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
  list-style: none;
  padding: 0;
}
.preiskopf__merkmale li {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 0.8rem;
  color: var(--ink-2);
  background: var(--surface);
}
.preiskopf__eck {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.2rem);
  margin-top: 1.1rem;
}
.preiskopf__eck b {
  display: block;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.preiskopf__eck span { font-size: 0.82rem; color: var(--ink-2); }

/* Schaubild */
.preiskopf__bild {
  padding: clamp(0.9rem, 2vw, 1.3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #101c30, #0b1424);
  box-shadow: 0 24px 50px -26px rgba(6, 14, 30, 0.7);
  color: #dce6f5;
  overflow: hidden;
}
.pvis__kopf {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(220, 230, 245, 0.55);
}
.pvis__punkt { width: 9px; height: 9px; border-radius: 50%; background: rgba(220, 230, 245, 0.25); }
.pvis__punkt:first-child { background: #ff6b6b; }
.pvis__kopf span:last-child { margin-left: auto; color: #7fd0e0; }

/* Codeblock */
.pvis__code { font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.7; }
.pvis__code div { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; }
.pvis__code i { color: rgba(220, 230, 245, 0.3); font-style: normal; }
.pvis__code b { font-weight: 400; color: #7fd0e0; }
.pvis__code em { font-style: normal; color: #9fd8a8; }
.pvis__code u { text-decoration: none; color: #f0c674; }

/* Zeilen mit Balken, fuer Rankings und Kennzahlen */
.pvis__zeile {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.82rem;
}
.pvis__zeile:last-child { border-bottom: 0; }
.pvis__nr { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(220, 230, 245, 0.4); }
.pvis__auf { font-family: var(--font-mono); font-size: 0.74rem; color: #7ee0a8; }
.pvis__balken { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pvis__balken i { display: block; height: 100%; border-radius: 99px; background: var(--grad); }

/* Kacheln fuer Kennzahlen */
.pvis__kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.pvis__kachel {
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pvis__kachel b { display: block; font-size: 1.05rem; letter-spacing: -0.01em; color: #fff; }
.pvis__kachel span { font-size: 0.68rem; color: rgba(220, 230, 245, 0.55); }

/* Handy-Vorschau fuer Social */
.pvis__phones { display: flex; gap: 0.5rem; justify-content: center; }
.pvis__phone {
  flex: 1;
  max-width: 92px;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  background: linear-gradient(170deg, rgba(127, 208, 224, 0.28), rgba(47, 95, 216, 0.22));
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 8px;
}
.pvis__phone i { display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.5); }
.pvis__phone i:nth-child(2) { width: 70%; }
.pvis__phone i:nth-child(3) { width: 45%; }

/* Browserfenster fuer Websites */
.pvis__seite { display: grid; gap: 0.5rem; }
.pvis__seite .kopfzeile { height: 34px; border-radius: 8px; background: rgba(255, 255, 255, 0.09); }
.pvis__seite .reihe { display: grid; grid-template-columns: 2fr 1fr; gap: 0.5rem; }
.pvis__seite .block { height: 60px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.pvis__seite .block--akzent { background: linear-gradient(150deg, rgba(47, 163, 186, 0.35), rgba(47, 95, 216, 0.28)); }
.pvis__seite .zeilen { display: grid; gap: 5px; }
.pvis__seite .zeilen i { display: block; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.pvis__seite .zeilen i:nth-child(2) { width: 80%; }
.pvis__seite .zeilen i:nth-child(3) { width: 55%; }

/* ---------- Datei-Upload im Bewerbungsformular ---------- */

.kfeld--datei { display: grid; gap: 0.5rem; }

.kfeld--datei > label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

/* Das echte Feld liegt unsichtbar ueber der Flaeche: so bleibt die native
   Bedienung (Klick, Tastatur, Dateidialog) erhalten und die Optik ist frei. */
.datei {
  position: relative;
  display: block;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  background: rgba(47, 77, 158, 0.03);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.datei:hover,
.datei.is-ueber { border-color: var(--blue); background: rgba(47, 77, 158, 0.07); }

.datei input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.datei input[type="file"]:focus-visible + .datei__flaeche {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 14px;
}

.datei__flaeche {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  color: var(--ink-2);
}

.datei__flaeche svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--blue); }

.datei__text { display: grid; gap: 0.15rem; line-height: 1.35; }
.datei__text b { color: var(--ink); font-weight: 600; }
.datei__text span { font-size: 0.88rem; }

.datei__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.datei__liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 0.9rem;
}

.datei__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei__groesse { flex: 0 0 auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.kfeld__hinweis {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.kfeld--datei.is-fehler .datei { border-color: #c0392b; background: rgba(192, 57, 43, 0.05); }

@media (max-width: 560px) {
  .datei__flaeche { padding: 0.9rem 1rem; }
  .datei__text span { font-size: 0.82rem; }
}

/* ============================================================================
   Einwilligungsbanner
   Liegt ueber der Seite, bis eine Entscheidung getroffen wurde. Annehmen und
   Ablehnen stehen bewusst gleichwertig nebeneinander (keine hervorgehobene
   Zustimmung, kein versteckter Ablehnen-Weg).
   ========================================================================== */

.cookie[hidden] { display: none; }

.cookie {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: end center;
  padding: clamp(0.75rem, 2vw, 1.5rem);
}

.cookie__hof {
  position: absolute;
  inset: 0;
  background: rgba(10, 19, 34, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.cookie__karte {
  position: relative;
  width: min(100%, 46rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 26px 60px -18px rgba(10, 19, 34, 0.45);
  padding: clamp(1.25rem, 3vw, 2rem);
  animation: cookie-auf 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cookie-auf {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.cookie__titel {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 700;
  margin: 0 0 0.6rem;
  line-height: 1.25;
}

.cookie__text {
  margin: 0 0 1.1rem;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.6;
}

.cookie__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* Beide Hauptwege gleich breit: die Ablehnung darf optisch nicht
   zurueckstehen, sonst ist die Einwilligung nicht freiwillig. */
.cookie__knopf { flex: 1 1 12rem; justify-content: center; }

.cookie__mehr {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0.6rem 0.4rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cookie__mehr:hover { color: var(--ink); }

.cookie__fuss {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.cookie__fuss a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.cookie__fuss a:hover { color: var(--blue); }

/* ---------- Zweite Ebene: einzelne Kategorien ---------- */

.cookie__liste {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.cookie__gruppe {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: rgba(47, 77, 158, 0.02);
}

.cookie__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.cookie__name { font-weight: 650; font-size: 0.98rem; }

.cookie__fest {
  font-size: 0.78rem;
  color: var(--ink-2);
  background: var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.cookie__info {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.cookie__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-2);
  opacity: 0.85;
}

/* Schalter: das echte Kaestchen bleibt bedienbar und fokussierbar */
.cookie__schalter {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  width: 100%;
}

.cookie__schalter input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}

.cookie__bahn {
  flex: 0 0 44px;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background-color 0.22s ease;
}

.cookie__bahn::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 19, 34, 0.3);
  transition: translate 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie__schalter input:checked + .cookie__bahn { background: var(--blue); }
.cookie__schalter input:checked + .cookie__bahn::after { translate: 20px 0; }
.cookie__schalter input:focus-visible + .cookie__bahn {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Seite hinter dem Dialog nicht scrollen */
html.cookie-offen, html.cookie-offen body { overflow: hidden; }

@media (max-width: 560px) {
  .cookie { place-items: end stretch; }
  .cookie__karte { border-radius: 16px; }
  .cookie__knoepfe { flex-direction: column; align-items: stretch; }
  .cookie__knopf { width: 100%; }
  .cookie__mehr { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie__karte { animation: none; }
  .cookie__bahn::after { transition: none; }
}

/* Solange der Einwilligungsdialog offen ist, steht die Hero-Choreografie
   still. Sonst waere sie abgelaufen, bevor der Besucher entschieden hat und
   die Seite ueberhaupt sieht. */
html.cookie-warten .hero *,
html.cookie-warten .hero::before,
html.cookie-warten .hero::after,
html.cookie-warten .bootfx,
html.cookie-warten .bootfx *,
html.cookie-warten .bootfx::before,
html.cookie-warten .bootfx::after {
  animation-play-state: paused !important;
  transition: none !important;
}

/* ---------- Typografie- und Bedienbarkeits-Feinschliff ---------- */

/* Fliesstext: verhindert einzelne Woerter in der letzten Zeile.
   Ueberschriften nutzen weiter balance (weiter oben definiert). */
p, li, dd, figcaption, blockquote, .section__intro, .prosa p {
  text-wrap: pretty;
}

/* Bedienelemente auf mindestens 44 px Hoehe: Burger und Knoepfe lagen mit
   42 bzw. 43 px knapp darunter. */
.nav__burger { min-width: 44px; min-height: 44px; }
.btn { min-height: 44px; }

/* ============================================================================
   Karten unter dem Zeiger: Lichtschein und mitwandernder Rand
   Nur zwei Variablen, kein rotate (das gehoert dem Aufricht-Effekt).
   ========================================================================== */

.goal { --mx: 50%; --my: 50%; --leuchte: 0; }

/* Weicher Schein, der dem Zeiger folgt */
.goal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: var(--leuchte);
  transition: opacity 0.4s ease;
  background: radial-gradient(
    22rem 22rem at var(--mx) var(--my),
    rgba(47, 163, 186, 0.16),
    rgba(47, 77, 158, 0.07) 38%,
    transparent 68%);
}

/* Rand leuchtet dort auf, wo der Zeiger steht */
.goal::after {
  background: radial-gradient(
    16rem 16rem at var(--mx) var(--my),
    rgba(63, 214, 232, 0.85),
    rgba(47, 77, 158, 0.35) 42%,
    transparent 70%);
}

/* Inhalt bleibt ueber dem Schein */
/* Die Nummer ist absolut gesetzt und darf hier nicht mitgenommen werden,
   sonst rutscht sie aus der Ecke in den Textfluss. */
.goal > *:not(.goal__num) { position: relative; z-index: 1; }
.goal > .goal__num { z-index: 1; }

.goal:hover { --leuchte: 1; }

/* Leinwand des Punktnetzes: liegt hinter dem Inhalt und faengt keine Klicks ab */
.netz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* Zu den Raendern hin ausblenden, damit es nicht abrupt endet */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 45%, transparent 88%);
  mask-image: radial-gradient(120% 90% at 50% 45%, #000 45%, transparent 88%);
}

/* Der Inhalt der Sektion bleibt darueber */
[data-netz] > .wrap { position: relative; z-index: 1; }

/* ---------- Zahl auf den Karten ---------- */

.goal__num {
  font-variant-numeric: tabular-nums;
}


/* Die Spur laeuft dauerhaft, deshalb ist will-change hier berechtigt */
.weg__linie i {
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #3fd6e8, var(--blue), transparent);
  animation: weg-spur 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  will-change: transform;
}

@keyframes weg-spur {
  0%   { transform: translateX(0); }
  100% { transform: translateX(386%); }
}

.weg__punkte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.weg__punkt {
  position: relative;
  display: block;
  padding-left: 0.95rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ink-2);
}

/* Der Knoten auf der Linie */
.weg__punkt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 77, 158, 0.12);
}

.weg__punkt:nth-child(2)::before { background: #2f7f9e; box-shadow: 0 0 0 3px rgba(47, 127, 158, 0.12); }
.weg__punkt:nth-child(3)::before { background: var(--teal); box-shadow: 0 0 0 3px rgba(47, 163, 186, 0.14); }

.weg__punkt b {
  display: block;
  font-weight: 650;
  font-size: 0.88rem;
  color: var(--ink);
}

@media (max-width: 620px) {
  .weg__punkte { grid-template-columns: 1fr; gap: 0.4rem; }
  .weg { padding-top: 1rem; }
}

/* Gemeinsamer Rahmen der kleinen Visuals */
.vis {
  display: block;
  align-self: end;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(47, 77, 158, 0.05), rgba(47, 163, 186, 0.05));
  border: 1px solid rgba(47, 77, 158, 0.1);
}

/* Visual 1: Weg vom Klick zum Termin */
.vis--weg .vis__linie {
  position: relative; display: block; height: 2px; border-radius: 2px; overflow: hidden;
  background: linear-gradient(90deg, rgba(47,77,158,.18), rgba(47,163,186,.18));
}
.vis--weg .vis__linie i {
  position: absolute; top: 0; left: -34%; width: 34%; height: 100%;
  background: linear-gradient(90deg, transparent, #3fd6e8, var(--blue), transparent);
  animation: vis-spur 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  will-change: transform;
}
@keyframes vis-spur { to { transform: translateX(394%); } }
.vis--weg .vis__stationen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.7rem; }
.vis--weg .vis__stationen > span {
  position: relative; padding-left: 0.85rem; font-size: 0.76rem; line-height: 1.3; color: var(--ink-2);
}
.vis--weg .vis__stationen > span::before {
  content: ""; position: absolute; left: 0; top: 0.32em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(47,77,158,.12);
}
.vis--weg .vis__stationen > span:nth-child(3)::before { background: var(--teal); box-shadow: 0 0 0 3px rgba(47,163,186,.14); }
.vis--weg .vis__stationen b { display: block; font-size: 0.83rem; font-weight: 650; color: var(--ink); }

/* Visual 2: aus der Tabelle wird ein System */
.vis--fluss { display: flex; align-items: center; gap: 0.7rem; }
.fluss__spalte { flex: 1; display: grid; gap: 4px; }
.fluss__spalte em {
  font-style: normal; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px;
}
.fluss__spalte i { display: block; height: 7px; border-radius: 3px; }
.fluss__spalte--alt i { background: rgba(12, 22, 38, 0.14); }
.fluss__spalte--neu i { background: linear-gradient(90deg, var(--blue), var(--teal)); opacity: 0.25; }
/* Die Zeilen wandern nacheinander von links nach rechts */
.fluss__spalte--neu i:nth-child(2) { animation: fluss-an 4s ease-in-out infinite; }
.fluss__spalte--neu i:nth-child(3) { animation: fluss-an 4s ease-in-out 0.35s infinite; }
.fluss__spalte--neu i:nth-child(4) { animation: fluss-an 4s ease-in-out 0.7s infinite; }
.fluss__spalte--neu i:nth-child(5) { animation: fluss-an 4s ease-in-out 1.05s infinite; }
@keyframes fluss-an {
  0%, 12% { opacity: 0.18; transform: translateX(-4px); }
  30%, 78% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0.18; transform: translateX(-4px); }
}
.fluss__pfeil { flex: 0 0 auto; color: var(--teal-ink); }
.fluss__pfeil svg { width: 20px; height: 20px; display: block; }

/* Visual 3: Chatverlauf mit Quellenangabe */
.vis--chat { display: grid; gap: 0.45rem; }
.chat__zeile {
  display: block; padding: 0.45rem 0.65rem; border-radius: 10px;
  font-size: 0.78rem; line-height: 1.4;
}
.chat__zeile--frage { background: rgba(12, 22, 38, 0.06); color: var(--ink-2); justify-self: start; }
.chat__zeile--antwort {
  background: linear-gradient(120deg, var(--blue), #2f7f9e); color: #fff;
  animation: chatzeile-auf 5s ease-in-out infinite;
}
.chat__zeile--antwort b { display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 500; opacity: 0.85; }
@keyframes chatzeile-auf {
  0%, 8% { opacity: 0; transform: translateY(5px); }
  22%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(5px); }
}
.chat__fuss {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-2);
}
.chat__fuss i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(46, 201, 139, 0.5);
  animation: chat-puls 2.4s ease-out infinite;
}
@keyframes chat-puls { to { box-shadow: 0 0 0 7px rgba(46, 201, 139, 0); } }

/* Visual 4: Ladezeit vorher und nachher */
.vis--tempo { display: grid; gap: 0.5rem; }
.tempo__zeile { display: grid; grid-template-columns: 3.6rem 1fr 2.6rem; align-items: center; gap: 0.5rem; }
.tempo__zeile em {
  font-style: normal; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.tempo__bahn { display: block; height: 7px; border-radius: 4px; background: rgba(12, 22, 38, 0.08); overflow: hidden; }
.tempo__balken { display: block; height: 100%; border-radius: 4px; transform-origin: left center; }
.tempo__balken--alt { background: #d98b4a; animation: tempo-alt 4s ease-in-out infinite; }
.tempo__balken--neu { background: linear-gradient(90deg, var(--blue), var(--teal)); animation: tempo-neu 4s ease-in-out infinite; }
@keyframes tempo-alt { 0%, 6% { width: 0; } 40%, 88% { width: 92%; } 100% { width: 0; } }
@keyframes tempo-neu { 0%, 20% { width: 0; } 42%, 88% { width: 22%; } 100% { width: 0; } }
.tempo__zeile b { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; text-align: right; }
.tempo__zeile:first-child b { color: #b0702f; }
.tempo__zeile:last-child b { color: var(--teal-ink); }


@media (prefers-reduced-motion: reduce) {
  .vis--weg .vis__linie i,
  .fluss__spalte--neu i,
  .chat__zeile--antwort,
  .chat__fuss i,
  .tempo__balken { animation: none; }
  .tempo__balken--alt { width: 92%; }
  .tempo__balken--neu { width: 22%; }
  .fluss__spalte--neu i { opacity: 1; }
}


/* Fortschrittsbalken des selbsttaetigen Durchlaufs */


/* ============================================================================
   ENTWÜRFE zum Vergleich (Kennzeichnung entfernen, sobald entschieden ist)
   ========================================================================== */


/* ---------- Entwurf B: Kartenraster mit eigenem Visual ---------- */


.ziel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

/* Die Ecke ist absolut positioniert und muss ausgenommen bleiben, sonst
   setzt diese Regel sie zurueck in den Fluss und sie rutscht nach links. */
.ziel > *:not(.flut) { position: relative; z-index: 1; }
.ziel:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(12, 22, 38, 0.28); }


/* Gemeinsamer Rahmen der kleinen Visuals */
.vis {
  display: block;
  align-self: end;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(47, 77, 158, 0.05), rgba(47, 163, 186, 0.05));
  border: 1px solid rgba(47, 77, 158, 0.1);
}

/* Visual 1: Weg vom Klick zum Termin */
.vis--weg .vis__linie {
  position: relative; display: block; height: 2px; border-radius: 2px; overflow: hidden;
  background: linear-gradient(90deg, rgba(47,77,158,.18), rgba(47,163,186,.18));
}
.vis--weg .vis__linie i {
  position: absolute; top: 0; left: -34%; width: 34%; height: 100%;
  background: linear-gradient(90deg, transparent, #3fd6e8, var(--blue), transparent);
  animation: vis-spur 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  will-change: transform;
}
@keyframes vis-spur { to { transform: translateX(394%); } }
.vis--weg .vis__stationen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.7rem; }
.vis--weg .vis__stationen > span {
  position: relative; padding-left: 0.85rem; font-size: 0.76rem; line-height: 1.3; color: var(--ink-2);
}
.vis--weg .vis__stationen > span::before {
  content: ""; position: absolute; left: 0; top: 0.32em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(47,77,158,.12);
}
.vis--weg .vis__stationen > span:nth-child(3)::before { background: var(--teal); box-shadow: 0 0 0 3px rgba(47,163,186,.14); }
.vis--weg .vis__stationen b { display: block; font-size: 0.83rem; font-weight: 650; color: var(--ink); }

/* Visual 2: aus der Tabelle wird ein System */
.vis--fluss { display: flex; align-items: center; gap: 0.7rem; }
.fluss__spalte { flex: 1; display: grid; gap: 4px; }
.fluss__spalte em {
  font-style: normal; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px;
}
.fluss__spalte i { display: block; height: 7px; border-radius: 3px; }
.fluss__spalte--alt i { background: rgba(12, 22, 38, 0.14); }
.fluss__spalte--neu i { background: linear-gradient(90deg, var(--blue), var(--teal)); opacity: 0.25; }
/* Die Zeilen wandern nacheinander von links nach rechts */
.fluss__spalte--neu i:nth-child(2) { animation: fluss-an 4s ease-in-out infinite; }
.fluss__spalte--neu i:nth-child(3) { animation: fluss-an 4s ease-in-out 0.35s infinite; }
.fluss__spalte--neu i:nth-child(4) { animation: fluss-an 4s ease-in-out 0.7s infinite; }
.fluss__spalte--neu i:nth-child(5) { animation: fluss-an 4s ease-in-out 1.05s infinite; }
@keyframes fluss-an {
  0%, 12% { opacity: 0.18; transform: translateX(-4px); }
  30%, 78% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0.18; transform: translateX(-4px); }
}
.fluss__pfeil { flex: 0 0 auto; color: var(--teal-ink); }
.fluss__pfeil svg { width: 20px; height: 20px; display: block; }

/* Visual 3: Chatverlauf mit Quellenangabe */
.vis--chat { display: grid; gap: 0.45rem; }
.chat__zeile {
  display: block; padding: 0.45rem 0.65rem; border-radius: 10px;
  font-size: 0.78rem; line-height: 1.4;
}
.chat__zeile--frage { background: rgba(12, 22, 38, 0.06); color: var(--ink-2); justify-self: start; }
.chat__zeile--antwort {
  background: linear-gradient(120deg, var(--blue), #2f7f9e); color: #fff;
  animation: chat-auf 5s ease-in-out infinite;
}
.chat__zeile--antwort b { display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 500; opacity: 0.85; }
@keyframes chat-auf {
  0%, 8% { opacity: 0; transform: translateY(5px); }
  22%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(5px); }
}
.chat__fuss {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-2);
}
.chat__fuss i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(46, 201, 139, 0.5);
  animation: chat-puls 2.4s ease-out infinite;
}
@keyframes chat-puls { to { box-shadow: 0 0 0 7px rgba(46, 201, 139, 0); } }

/* Visual 4: Ladezeit vorher und nachher */
.vis--tempo { display: grid; gap: 0.5rem; }
.tempo__zeile { display: grid; grid-template-columns: 3.6rem 1fr 2.6rem; align-items: center; gap: 0.5rem; }
.tempo__zeile em {
  font-style: normal; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.tempo__bahn { display: block; height: 7px; border-radius: 4px; background: rgba(12, 22, 38, 0.08); overflow: hidden; }
.tempo__balken { display: block; height: 100%; border-radius: 4px; transform-origin: left center; }
.tempo__balken--alt { background: #d98b4a; animation: tempo-alt 4s ease-in-out infinite; }
.tempo__balken--neu { background: linear-gradient(90deg, var(--blue), var(--teal)); animation: tempo-neu 4s ease-in-out infinite; }
@keyframes tempo-alt { 0%, 6% { width: 0; } 40%, 88% { width: 92%; } 100% { width: 0; } }
@keyframes tempo-neu { 0%, 20% { width: 0; } 42%, 88% { width: 22%; } 100% { width: 0; } }
.tempo__zeile b { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; text-align: right; }
.tempo__zeile:first-child b { color: #b0702f; }
.tempo__zeile:last-child b { color: var(--teal-ink); }


@media (prefers-reduced-motion: reduce) {
  .vis--weg .vis__linie i,
  .fluss__spalte--neu i,
  .chat__zeile--antwort,
  .chat__fuss i,
  .tempo__balken { animation: none; }
  .tempo__balken--alt { width: 92%; }
  .tempo__balken--neu { width: 22%; }
  .fluss__spalte--neu i { opacity: 1; }
}


/* ---------- Entwurf A: Wechsler mit Buehne ---------- */


/* Fortschrittsbalken des selbsttaetigen Durchlaufs */


/* ============================================================================
   Farbschimmer am unteren Kartenrand
   Zwei unscharfe Farbwolken mit versetzter Phase. Bewusst ohne harte Kante:
   der frühere dunkle Block wirkte aufgesetzt. Liegt unten, damit kein Text
   darauf liegt.
   ========================================================================== */


.flut {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -3.5rem;
  height: 8rem;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.flut i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  /* Die Unschaerfe nimmt der Form jede Kante */
  filter: blur(22px);
  will-change: transform;
}

.flut i:nth-child(1) {
  background: radial-gradient(60% 100% at 50% 100%,
    rgba(29, 58, 104, 0.55), rgba(31, 74, 122, 0.28) 55%, transparent 80%);
  animation: schimmer var(--dauer, 19s) ease-in-out var(--phase, 0s) infinite;
}

.flut i:nth-child(2) {
  background: radial-gradient(50% 100% at 62% 100%,
    rgba(63, 214, 232, 0.34), rgba(47, 111, 158, 0.18) 58%, transparent 82%);
  animation: schimmer calc(var(--dauer, 19s) * 0.68) ease-in-out calc(var(--phase, 0s) - 7s) infinite reverse;
}

/* Jede Karte anders: Laufzeit, Startphase und Ausschlag unterscheiden sich,
   damit vier nebeneinander nicht im Gleichtakt schwingen. */

@keyframes schimmer {
  0%   { transform: translate(0, 0) scale(1, 1); }
  35%  { transform: translate(calc(var(--weit, 5%) * -1), -6%) scale(1.08, 0.92); }
  70%  { transform: translate(var(--weit, 5%), 3%) scale(0.94, 1.06); }
  100% { transform: translate(0, 0) scale(1, 1); }
}

/* Beim Ueberfahren steigt der Schimmer leicht */
.goal:hover .flut,
.ziel:hover .flut { transform: translateY(-0.5rem); }

.goals--bento .goal__num { z-index: 1; }

@media (max-width: 620px) {
  .flut { bottom: -3rem; height: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .flut i { animation: none; }
  .flut { transition: none; }
}

/* Platz fuer den Wellensaum: ohne diesen Abstand liegt der letzte Link
   auf der dunklen Flaeche und ist schlecht lesbar. */
.goals--bento .goal { padding-bottom: 2.6rem; }
.ziel { padding-bottom: 2.6rem; }


/* Hoehe der Buehne bestimmt, wie lange gescrollt wird: eine Bildschirmhoehe
   je Karte plus eine zum Ankommen. */


/* Die Flut ist absolut positioniert und muss ausgenommen bleiben, sonst
   setzt diese Regel sie in den Fluss zurueck. */


/* Fortschritt: ein Punkt je Karte */


/* Kopf faehrt beim Durchscrollen mit: --kopf laeuft von 0 auf 1 */
[data-stage] .section__head,
[data-zug] .section__head,
.prozess__stage .section__head {
  --kopf: 0;
  transform: translateY(calc(var(--kopf) * -1.6rem)) scale(calc(1 - var(--kopf) * 0.06));
  transform-origin: left center;
  opacity: calc(1 - var(--kopf) * 0.45);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-stage] .section__head,
  [data-zug] .section__head,
  .prozess__stage .section__head { transform: none; opacity: 1; }
}


/* ---------- Ziffernleiste links ---------- */


/* ---------- Geraet in der Mitte ---------- */


@keyframes dpuls {
  0%   { opacity: 0.55; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(3.6); }
}


/* Szenen: Sichtbarkeit haengt an --sichtN, Szene 1 ist ohne Skript sichtbar */

/* ---------- Szene 1: Website bringt eine Anfrage ---------- */

.w-kopf {
  position: absolute; left: 8%; top: 13%;
  width: 46%; height: 12%;
  border-radius: 8px;
  background: linear-gradient(100deg, #7fb0ff, #3fd6e8);
  opacity: calc((var(--bau0, 1) - 0.04) / 0.12);
}
.w-zeile {
  position: absolute; left: 8%; top: 31%;
  width: 38%; height: 5%;
  border-radius: 4px;
  background: rgba(244, 244, 240, 0.16);
  opacity: calc((var(--bau0, 1) - 0.14) / 0.12);
}
.w-zeile--kurz { top: 40%; width: 27%; opacity: calc((var(--bau0, 1) - 0.2) / 0.12); }
.w-knopf {
  position: absolute; left: 8%; top: 53%;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--blue), var(--teal));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: calc((var(--bau0, 1) - 0.28) / 0.12);
}
.w-maus {
  position: absolute;
  left: calc(8% + 3.4rem); top: calc(53% + 0.8rem);
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #7fd0e0;
  box-shadow: 0 0 16px rgba(63, 214, 232, 0.55);
  --t: clamp(0, calc((var(--bau0, 1) - 0.34) / 0.24), 1);
  --k: clamp(0, calc((var(--bau0, 1) - 0.6) / 0.1), 1);
  transform: translate(calc((1 - var(--t)) * 150px), calc((1 - var(--t)) * 90px))
             scale(calc(1 - var(--k) * 0.25));
  opacity: calc((var(--bau0, 1) - 0.3) / 0.1);
}
.w-chip {
  position: absolute; left: 8%; top: 53%;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(127, 176, 255, 0.16);
  border: 1px solid rgba(127, 176, 255, 0.45);
  color: #cfe0ff;
  font-size: 0.68rem;
  --f: clamp(0, calc((var(--bau0, 1) - 0.66) / 0.26), 1);
  transform: translate(calc(var(--f) * 220px), calc(var(--f) * -105px));
  opacity: calc(clamp(0, calc((var(--bau0, 1) - 0.62) / 0.08), 1)
              - clamp(0, calc((var(--bau0, 1) - 0.9) / 0.08), 1));
}
.w-termin {
  position: absolute; right: 8%; top: 13%;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  background: rgba(46, 201, 139, 0.12);
  border: 1px solid rgba(46, 201, 139, 0.4);
  color: #b9e9d3;
  font-size: 0.7rem;
  opacity: calc((var(--bau0, 1) - 0.88) / 0.1);
  transform: translateY(calc((1 - clamp(0, calc((var(--bau0, 1) - 0.88) / 0.12), 1)) * 8px));
}
.w-termin b { display: block; color: #fff; font-size: 0.78rem; }

/* ---------- Szene 2: aus Tabellen wird ein System ---------- */

.s-seite {
  position: absolute; left: 6%; top: 10%; bottom: 10%;
  width: 11%;
  border-radius: 10px;
  background: rgba(244, 244, 240, 0.05);
  border: 1px solid rgba(244, 244, 240, 0.08);
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px 9px;
  opacity: calc((var(--bau1, 0) - 0.05) / 0.12);
}
.s-seite i { height: 8px; border-radius: 4px; background: rgba(127, 208, 224, 0.3); }
.s-kacheln {
  position: absolute; left: 23%; right: 6%; top: 10%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.s-kacheln b {
  background: rgba(244, 244, 240, 0.05);
  border: 1px solid rgba(244, 244, 240, 0.1);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
.s-kacheln b:nth-child(1) { opacity: calc((var(--bau1, 0) - 0.14) / 0.12); }
.s-kacheln b:nth-child(2) { opacity: calc((var(--bau1, 0) - 0.22) / 0.12); }
.s-kacheln b:nth-child(3) { opacity: calc((var(--bau1, 0) - 0.3) / 0.12); }
.s-kacheln i {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 244, 240, 0.5);
  margin-top: 2px;
}
.s-zeilen {
  position: absolute; left: 23%; right: 6%; top: 47%;
  display: grid;
  gap: 10px;
}
.s-zeilen i {
  height: 13px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(127, 176, 255, 0.5), rgba(63, 214, 232, 0.32));
  opacity: var(--r, 0);
  transform: translateX(calc((1 - var(--r, 0)) * -26px));
}
.s-zeilen i:nth-child(1) { --r: clamp(0, calc((var(--bau1, 0) - 0.4) / 0.14), 1); }
.s-zeilen i:nth-child(2) { --r: clamp(0, calc((var(--bau1, 0) - 0.52) / 0.14), 1); }
.s-zeilen i:nth-child(3) { --r: clamp(0, calc((var(--bau1, 0) - 0.64) / 0.14), 1); }
.s-zeilen i:nth-child(4) { --r: clamp(0, calc((var(--bau1, 0) - 0.76) / 0.14), 1); }

/* ---------- Szene 3: KI antwortet mit Quelle ---------- */

.c-frage {
  position: absolute; left: 8%; top: 12%;
  max-width: 58%;
  padding: 0.5rem 0.8rem;
  border-radius: 12px 12px 12px 4px;
  background: rgba(244, 244, 240, 0.09);
  color: #e7ecf4;
  font-size: 0.78rem;
  opacity: calc((var(--bau2, 0) - 0.06) / 0.12);
}
.c-antwort {
  position: absolute; right: 8%; top: 36%;
  max-width: 72%;
  padding: 0.6rem 0.85rem;
  border-radius: 12px 12px 4px 12px;
  background: linear-gradient(120deg, var(--blue), #2f7f9e);
  color: #fff;
  font-size: 0.78rem;
  opacity: calc((var(--bau2, 0) - 0.2) / 0.1);
}
/* Die Antwort tippt sich scrollgesteuert von links frei */
.c-antwort .c-text {
  display: inline-block;
  clip-path: inset(0 calc((1 - clamp(0, calc((var(--bau2, 0) - 0.28) / 0.34), 1)) * 100%) 0 0);
}
.c-antwort b {
  display: block;
  margin-top: 4px;
  font-size: 0.64rem;
  font-weight: 500;
  opacity: calc((var(--bau2, 0) - 0.68) / 0.12);
}
.c-fuss {
  position: absolute; left: 8%; bottom: 13%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: rgba(244, 244, 240, 0.55);
  opacity: calc((var(--bau2, 0) - 0.8) / 0.12);
}
.c-fuss i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: chat-puls 2.4s ease-out infinite;
}

/* ---------- Szene 4: Ladezeit vorher und nachher ---------- */

.t-reihe {
  position: absolute; left: 8%; right: 8%; top: 22%;
  display: grid;
  gap: 1.2rem;
}
.t-fazit {
  position: absolute; left: 8%; bottom: 14%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #b9e9d3;
  font-weight: 650;
  font-size: 0.95rem;
  --z: clamp(0, calc((var(--bau3, 0) - 0.72) / 0.18), 1);
  opacity: var(--z);
  transform: scale(calc(0.86 + var(--z) * 0.14));
  transform-origin: left center;
}
.t-fazit i {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(46, 201, 139, 0.15);
  border: 1px solid rgba(46, 201, 139, 0.5);
  color: #2ec98b;
  font-style: normal;
  font-size: 0.85rem;
}

/* ---------- Wechselnder Text rechts ---------- */


/* ---------- Schmale Schirme ---------- */

/* ============================================================================
   Variante 2: dematerialisieren und neu aufbauen (heller Grund)
   --auf steuert alles: 0 = aufgeloest, 1 = fest. Unschaerfe, Streuung und
   Sichtbarkeit haengen daran, gerechnet wird nur im Skript.
   Die Mockups laufen erst, wenn ihr Schritt vorn ist (Klasse is-vorn),
   sonst wuerden vier Animationen gleichzeitig Rechenzeit verbrauchen.
   ========================================================================== */

.demat { padding: 0; }
.demat__stage { position: relative; height: 400vh; }

.demat__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  outline: none;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Platz fuer den Header, der beim Hochscrollen wieder einfaehrt:
     sonst liegt er auf der Ueberschrift. */
  padding-top: clamp(4.5rem, 9vh, 6.2rem);
}
.demat__pin > .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding-block: clamp(1.2rem, 4vh, 2.8rem);
}

/* Ein grosser Konturring, der beim Scrollen mitwaechst und sich dreht.
   Sonst bleibt der Hintergrund so ruhig wie im Rest der Seite. */
.demat__deko { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.demat__deko i {
  position: absolute;
  right: 4vw; top: 8vh;
  width: 38vw; height: 38vw;
  border-radius: 50%;
  border: 1px solid rgba(47, 77, 158, 0.16);
  box-shadow: inset 0 0 0 1px rgba(47, 163, 186, 0.07);
  opacity: 0.5;
  transform: translate3d(calc(var(--fort, 0) * -16vw), calc((var(--fort, 0) - 0.35) * 46vh), 0)
             rotate(calc(var(--fort, 0) * 40deg))
             scale(calc(0.9 + var(--fort, 0) * 0.3));
}

/* Auftritt beim Herunterscrollen vom Hero: --ein laeuft einmalig von 0
   auf 1. Die Teile von Schritt 1 kommen dabei von aussen ins Bild. Weil
   es eine registrierte Zahl-Variable ist, laesst sie sich animieren und
   beisst sich nicht mit den Scroll-Transformationen. */
@property --ein {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
@keyframes deinlauf { from { --ein: 0; } to { --ein: 1; } }

/* Vor dem Auftritt ist alles verborgen und weit aussen. */
.demat__stage:not(.ist-eingelaufen) .demat__kopf > *,
.demat__stage:not(.ist-eingelaufen) [data-demattext="0"] > *,
.demat__stage:not(.ist-eingelaufen) [data-dematbild="0"],
.demat__stage:not(.ist-eingelaufen) .demat__fort { --ein: 0; }

.demat__stage.ist-eingelaufen .demat__kopf > *,
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:not(:nth-child(5)),
.demat__stage.ist-eingelaufen [data-dematbild="0"],
.demat__stage.ist-eingelaufen .demat__fort {
  animation: deinlauf 0.95s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}
/* Reihenfolge: Kicker, Titel, Unterzeile, dann der Inhalt, zuletzt die Leiste */
.demat__stage.ist-eingelaufen .demat__kicker { animation-delay: 0.02s; --ex: -40px; }
.demat__stage.ist-eingelaufen .demat__h2 { animation-delay: 0.1s; --ex: -60px; }
.demat__stage.ist-eingelaufen .demat__unter { animation-delay: 0.18s; --ex: -45px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(1) { animation-delay: 0.3s; --ex: -70px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(2) { animation-delay: 0.38s; --ex: -95px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(3) { animation-delay: 0.46s; --ex: -80px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(4) { animation-delay: 0.54s; --ex: -65px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(5) {
  animation: dknopfein 0.75s cubic-bezier(0.22, 0.9, 0.3, 1) both 0.62s;
}
@keyframes dknopfein {
  from { transform: translate3d(-46px, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
.demat__stage.ist-eingelaufen [data-dematbild="0"] {
  animation-duration: 1.1s;
  animation-delay: 0.36s;
  --ex: 110px;
}
.demat__stage.ist-eingelaufen .demat__fort { animation-delay: 0.72s; --ex: 0px; }

/* Kopf und Leiste nutzen dieselbe Variable wie der Rest */
.demat__kopf > * {
  transform: translate3d(calc((1 - var(--ein, 1)) * var(--ex, 0px)), calc((1 - var(--ein, 1)) * 14px), 0);
  opacity: var(--ein, 1);
}
.demat__fort {
  transform: translate3d(0, calc((1 - var(--ein, 1)) * 22px), 0);
  opacity: var(--ein, 1);
}

/* Der Wechsel ist bewusst kein reines Ausblenden: der alte Schritt kippt
   in den Raum zurueck und zerfaellt zeilenweise, der neue klappt aus der
   anderen Richtung heran und setzt sich wieder zusammen. --ri sagt, in
   welche Richtung (JS: -1 geht weg, 1 kommt). */
.demat__texte,
.demat__buehnen { perspective: 1500px; perspective-origin: 50% 45%; }

.demat__text,
.dbild {
  grid-area: 1 / 1;
  --auf: 0;
  --ri: 1;
  --weg: calc(1 - var(--auf));
  --weg2: calc((1 - var(--auf)) * (1 - var(--auf)));
  --weg3: calc((1 - var(--auf)) * (1 - var(--auf)) * (1 - var(--auf)));
  /* smoothstep: an beiden Enden flach, deshalb kein sichtbares Einrasten */
  --sicht: calc(var(--auf) * var(--auf) * (3 - 2 * var(--auf)));
  opacity: var(--sicht);
  pointer-events: none;
  transform-style: preserve-3d;
}
.demat__text.is-vorn { pointer-events: auto; }

/* Ganzer Block: kippt weg und faellt nach hinten */
.demat__text {
  transform:
    translate3d(calc(var(--weg2) * var(--ri) * 60px), 0, calc(var(--weg2) * -180px))
    rotateY(calc(var(--weg2) * var(--ri) * 16deg));
}
.dbild {
  transform:
    translate3d(calc(var(--weg2) * var(--ri) * 110px + (1 - var(--ein, 1)) * var(--ex, 0px)),
                calc(var(--weg2) * -24px), calc(var(--weg2) * -280px))
    rotateY(calc(var(--weg2) * var(--ri) * 26deg + (1 - var(--ein, 1)) * -14deg))
    rotateX(calc(var(--weg2) * -8deg))
    scale(calc(1 - (1 - var(--ein, 1)) * 0.06));
  opacity: calc(var(--sicht) * var(--ein, 1));
  filter: blur(calc(var(--weg3) * 7px + (1 - var(--ein, 1)) * 5px));
}

/* Zeilen zerfallen gestaffelt: jede Zeile fliegt anders */
.demat__text > * {
  transform:
    translate3d(calc(var(--weg2) * var(--dx, 0px) + (1 - var(--ein, 1)) * var(--ex, 0px)),
                calc(var(--weg2) * var(--dy, 22px)), calc(var(--weg2) * var(--dz, -40px)))
    rotateX(calc(var(--weg2) * var(--rx, 24deg)));
  opacity: var(--ein, 1);
  filter: blur(calc(var(--weg3) * var(--bl, 6px)));
  transform-origin: 0 50%;
}
.demat__text > *:nth-child(1) { --dx: -22px; --dy: -16px; --dz: -50px; --rx: -18deg; --bl: 3px; }
.demat__text > *:nth-child(2) { --dx: 16px;  --dy: -9px;  --dz: -80px; --rx: 14deg;  --bl: 4px; }
.demat__text > *:nth-child(3) { --dx: -13px; --dy: 15px;  --dz: -65px; --rx: 20deg;  --bl: 5px; }
.demat__text > *:nth-child(4) { --dx: 15px;  --dy: 20px;  --dz: -80px; --rx: -12deg; --bl: 4px; }
/* Der Knopf koppelt sich vom Scroll ab: sobald sein Schritt vorn ist
   (is-vorn), faehrt er ZEITGESTEUERT in die Endlage. Immer dieselbe Dauer
   und Kurve, egal wie schnell gescrollt wird, deshalb rastet nichts ein. */
.demat__text > *:nth-child(5) {
  transform: translate3d(calc((1 - var(--ein, 1)) * var(--ex, 0px)), 22px, 0);
  opacity: 0;
  filter: none;
  transition:
    transform 0.6s cubic-bezier(0.22, 0.9, 0.3, 1),
    opacity 0.45s ease,
    box-shadow 0.25s ease;
}
.demat__text.is-vorn > *:nth-child(5) {
  transform: translate3d(calc((1 - var(--ein, 1)) * var(--ex, 0px)), 0, 0);
  opacity: var(--ein, 1);
  transition-delay: 0.12s, 0.12s, 0s;
}
/* Hover-Lift bleibt erhalten (die Spezialregel oben wuerde ihn sonst schlucken) */
.demat__text.is-vorn > a:nth-child(5):hover { transform: translateY(-2px); }

/* Lichtschein, der beim Wechsel ueber das Fenster zieht */
.dbild .dfenster { position: relative; overflow: hidden; }
.dbild .dfenster::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: linear-gradient(105deg, transparent 42%, rgba(63, 214, 232, 0.28) 50%, transparent 58%);
  transform: translateX(calc((var(--auf) - 0.5) * 230%));
  opacity: calc(var(--weg) * var(--auf) * 3.2);
  pointer-events: none;
}

.demat__kicker,
.kicker--marke {
  display: block;
  margin: 0 0 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* Kurzer, kraeftiger Strich ueber dem Wort. Als Pseudo-Element, weil der
   Entschluessel-Effekt auf Kickern textContent setzt und echte Kinder
   dabei verloren gehen. */
.demat__kicker::before,
.kicker--marke::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: 3px;
  margin-bottom: 0.7rem;
  border-radius: 999px;
  background: var(--grad);
}
/* Auf dunklem Grund heller setzen */
.section--dark .kicker--marke { color: var(--dark-text); }

.demat__h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4.15vw, 3.7rem);
  font-stretch: 100%;
  letter-spacing: -0.032em;
  line-height: 1.06;
  white-space: nowrap;
}
/* Das hervorgehobene Wort bekommt einen wandernden Verlauf */
.demat__h2 .grad {
  background: linear-gradient(100deg, var(--blue) 10%, var(--teal) 40%, var(--blue) 70%, var(--teal) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dgradzug 9s ease-in-out infinite;
}
@keyframes dgradzug {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.demat__unter {
  margin: 1.1rem 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.demat__lage {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(0.5rem, 2vh, 1.4rem);
}

/* ---------- Text links ---------- */

.demat__texte { display: grid; }
.demat__text { display: grid; gap: 0.8rem; align-content: center; }

.demat__nr {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.demat__nr b {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.demat__nr span { font-weight: 400; opacity: 0.65; }
/* feine Linie, die den Titel anschiebt */
.demat__nr::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 4.5rem;
  background: linear-gradient(90deg, rgba(47, 163, 186, 0.5), transparent);
}

.demat__text h3 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2.3rem);
  font-stretch: 100%;
  letter-spacing: -0.028em;
  line-height: 1.08;
  text-wrap: balance;
}
.demat__text h3 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue) 15%, var(--teal) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.demat__lead { color: var(--ink-2); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.65; margin: 0; }

.demat__text ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.demat__text li { position: relative; padding-left: 1.1rem; color: var(--ink-2); font-size: 0.97rem; }
.demat__text li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
.demat__text a {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding: 0.72rem 1.5rem;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 14px 30px -18px rgba(47, 77, 158, 0.95);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.demat__text a::after {
  content: "\2192";
  transition: transform 0.25s ease;
}
.demat__text a:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -18px rgba(47, 77, 158, 0.95); }
.demat__text a:hover::after { transform: translateX(4px); }

/* ---------- Buehne rechts ---------- */

.demat__buehnen { position: relative; display: grid; align-content: center; min-height: clamp(15rem, 30vh, 19rem); }
.dbild { display: grid; align-content: center; }

.dfenster {
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(12, 22, 38, 0.08);
  box-shadow: 0 30px 60px -40px rgba(12, 22, 38, 0.5);
  overflow: hidden;
}
.dfenster__leiste {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(12, 22, 38, 0.06);
  background: rgba(12, 22, 38, 0.02);
}
.dfenster__leiste i { width: 8px; height: 8px; border-radius: 50%; background: rgba(12, 22, 38, 0.13); }
.dfenster__leiste em {
  margin-left: 0.5rem;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-2);
  background: rgba(12, 22, 38, 0.04);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

.dfenster__inhalt {
  display: grid;
  gap: clamp(0.55rem, 1.1vw, 0.85rem);
  padding: clamp(0.8rem, 1.5vw, 1.15rem);
  min-height: clamp(11rem, 24vh, 15rem);
  align-content: center;
}

/* ---------- Gemeinsames ----------
   Jede Szene ist eine kleine Geschichte in mehreren Abschnitten. Die
   Schleifen laufen bewusst lang (12 bis 13 Sekunden), damit man einzelne
   Schritte verfolgen kann statt nur Zappeln zu sehen. */

.dsz { display: grid; align-content: center; }
.dsz--1 { grid-template-columns: 1fr; gap: 0.4rem; }
.dsz--2 { grid-template-columns: 1fr auto 1.15fr; align-items: center; gap: clamp(0.5rem, 1.5vw, 1rem); }
.dsz--3 { grid-template-columns: 1fr; gap: 0.9rem; align-content: center; }
.dsz--4 { grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem clamp(1rem, 2.5vw, 2rem); align-items: center; padding-right: 0.4rem; }

/* ---------- 01: Aus dem Besuch wird ein Termin ---------- */

/* Formular, das sich Feld fuer Feld ausfuellt */
.dform { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; align-items: end; }
.dform .dweb__knopf { grid-column: 1 / -1; }
.dfeld {
  display: grid;
  gap: 1px;
  padding: 0.26rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(12, 22, 38, 0.1);
  background: rgba(12, 22, 38, 0.02);
  opacity: 0;
}
.is-vorn .dfeld { animation: dfeldan 12s ease-out infinite; }
.is-vorn .dfeld:nth-child(1) { animation-delay: 0.7s; }
.is-vorn .dfeld:nth-child(2) { animation-delay: 1.5s; }
.is-vorn .dfeld:nth-child(3) { animation-delay: 2.3s; }
@keyframes dfeldan {
  0% { opacity: 0; transform: translateY(5px); border-color: rgba(12, 22, 38, 0.1); }
  4% { opacity: 1; transform: none; }
  6%, 12% { border-color: rgba(47, 163, 186, 0.55); background: rgba(47, 163, 186, 0.05); }
  16%, 92% { opacity: 1; transform: none; border-color: rgba(12, 22, 38, 0.1); background: rgba(12, 22, 38, 0.02); }
  100% { opacity: 0; transform: translateY(5px); }
}
.dfeld em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dfeld b {
  display: flex;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
/* Der eingetippte Text waechst zeichenweise */
.dfeld b > span { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; }
.is-vorn .dfeld:nth-child(1) b > span { animation: dtipp 12s steps(11, end) infinite 0.85s; }
.is-vorn .dfeld:nth-child(2) b > span { animation: dtipp 12s steps(15, end) infinite 1.65s; }
.is-vorn .dfeld:nth-child(3) b > span { animation: dtipp 12s steps(12, end) infinite 2.45s; }
@keyframes dtipp {
  0% { width: 0; }
  5%, 90% { width: 100%; }
  100% { width: 0; }
}
.dcursor {
  width: 1.5px; height: 0.85em;
  margin-left: 1px;
  background: var(--teal-ink);
  opacity: 0;
}
.is-vorn .dcursor { animation: dblink 0.9s steps(2, end) infinite, dcursoran 12s linear infinite; }
@keyframes dblink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes dcursoran { 0%, 19% { visibility: hidden; } 20%, 31% { visibility: visible; } 32%, 100% { visibility: hidden; } }

.dweb__knopf {
  position: relative;
  justify-self: start;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--blue), var(--teal));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0;
}
.is-vorn .dweb__knopf { animation: dknopf 12s ease-out infinite; }
@keyframes dknopf {
  0%, 4% { opacity: 0; transform: translateY(6px); }
  8%, 30% { opacity: 1; transform: none; box-shadow: 0 8px 20px -12px rgba(47, 77, 158, 0.9); }
  33% { transform: scale(0.95); box-shadow: 0 0 0 6px rgba(63, 214, 232, 0.22); }
  36%, 92% { opacity: 1; transform: none; box-shadow: 0 8px 20px -12px rgba(47, 77, 158, 0.9); }
  100% { opacity: 0; transform: translateY(6px); }
}
/* Zeiger faehrt auf die Knopfmitte und tippt dort */
.dklick {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.35);
  opacity: 0;
}
.is-vorn .dklick { animation: dklick 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes dklick {
  0%, 24% { transform: translate(38px, 30px) scale(0.85); opacity: 0; }
  27% { opacity: 1; }
  32% { transform: translate(0, 0) scale(1); opacity: 1; }
  34% { transform: translate(0, 0) scale(0.55); opacity: 1; }
  37% { transform: translate(0, 0) scale(1); opacity: 1; }
  42%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
}
/* Druckwelle genau unter dem Zeiger */
.dklick::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  opacity: 0;
}
.is-vorn .dklick::after { animation: dwelle 12s ease-out infinite; }
@keyframes dwelle {
  0%, 33% { transform: scale(0.5); opacity: 0; }
  35% { transform: scale(1); opacity: 0.9; }
  44%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Das Paket wandert vom Knopf ins System */
.dfluss { position: relative; height: 20px; }
.dfluss::before {
  content: "";
  position: absolute;
  left: 3%; right: 16%; top: 50%;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(47, 163, 186, 0.4) 0 6px, transparent 6px 12px);
  opacity: 0;
}
.is-vorn .dfluss::before { animation: dbahnan 12s linear infinite; }
@keyframes dbahnan { 0%, 30% { opacity: 0; } 34%, 92% { opacity: 1; } 100% { opacity: 0; } }
.dfluss__ziel {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: rgba(47, 77, 158, 0.07);
  border: 1px solid rgba(47, 77, 158, 0.16);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  opacity: 0;
}
.is-vorn .dfluss__ziel { animation: dzielan 12s ease-out infinite; }
@keyframes dzielan {
  0%, 30% { opacity: 0; }
  36%, 47% { opacity: 1; border-color: rgba(47, 77, 158, 0.16); }
  50% { opacity: 1; border-color: var(--teal); background: rgba(47, 163, 186, 0.14); }
  56%, 92% { opacity: 1; border-color: rgba(47, 77, 158, 0.16); background: rgba(47, 77, 158, 0.07); }
  100% { opacity: 0; }
}
.dfluss__paket {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(47, 163, 186, 0.5);
  box-shadow: 0 6px 16px -8px rgba(12, 22, 38, 0.4);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--teal-ink);
  white-space: nowrap;
  opacity: 0;
}
.dfluss__paket i { font-style: normal; }
.is-vorn .dfluss__paket { animation: dpaket 12s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes dpaket {
  0%, 35% { left: 3%; transform: translate(0, -50%) scale(0.7); opacity: 0; }
  38% { opacity: 1; transform: translate(0, -50%) scale(1); }
  48% { left: 62%; opacity: 1; transform: translate(0, -50%) scale(1); }
  51% { left: 70%; opacity: 0.2; transform: translate(0, -50%) scale(0.75); }
  54%, 100% { left: 70%; opacity: 0; transform: translate(0, -50%) scale(0.7); }
}

.dkalender { display: grid; gap: 0.3rem; }
.dkalender__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dkalender__kopf em { font-style: normal; opacity: 0.7; }

.dkalender__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dkalender__raster i {
  height: 16px;
  border-radius: 4px;
  background: rgba(12, 22, 38, 0.05);
}
.dkalender__raster i.ist-alt { background: rgba(12, 22, 38, 0.12); }
.is-vorn .dkalender__raster i.ist-belegt { animation: dbelegt 12s ease-out infinite; }
@keyframes dbelegt {
  0%, 52% { background: rgba(12, 22, 38, 0.05); transform: scale(1); box-shadow: none; }
  57% { background: var(--teal); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.25); }
  63%, 92% { background: rgba(47, 163, 186, 0.45); transform: scale(1); box-shadow: none; }
  100% { background: rgba(12, 22, 38, 0.05); }
}
.dabschluss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dkalender__termin {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.05rem 0.5rem;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  background: rgba(46, 201, 139, 0.08);
  border: 1px solid rgba(46, 201, 139, 0.3);
  font-size: 0.74rem;
  color: var(--ink-2);
  opacity: 0;
}
.is-vorn .dkalender__termin { animation: dspaet 12s cubic-bezier(0.2, 0.9, 0.3, 1) infinite; }
.dkalender__termin i {
  grid-row: 1 / 3;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(46, 201, 139, 0.16);
  color: #1a7f4e;
  font-style: normal;
}
.dkalender__termin em { font-style: normal; color: var(--ink); font-weight: 650; font-size: 0.82rem; }

.dtoast {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(12, 22, 38, 0.1);
  box-shadow: 0 10px 24px -14px rgba(12, 22, 38, 0.5);
  font-size: 0.7rem;
  color: var(--ink-2);
  opacity: 0;
}
.dtoast i { font-style: normal; color: var(--teal-ink); }
.is-vorn .dtoast { animation: dspaet 12s cubic-bezier(0.2, 0.9, 0.3, 1) infinite 1.1s; }
@keyframes dspaet {
  0%, 55% { opacity: 0; transform: translateY(8px); }
  63%, 93% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}

/* ---------- 02: Aus Tabellen wird ein System ---------- */

.dtab, .dsys { display: grid; gap: 0.4rem; align-content: start; }
.dtab__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.1rem;
}
.dtab__kopf em { font-style: normal; }
.dtab__kopf em.ist-gut { color: #1a7f4e; }
.dtab__zeile { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.dtab__zeile i { height: 9px; border-radius: 5px; background: rgba(12, 22, 38, 0.1); }
.dtab__zeile i:last-child { width: 26px; background: rgba(12, 22, 38, 0.06); }
.is-vorn .dtab__zeile { animation: dweg 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.is-vorn .dtab__zeile:nth-of-type(2) { animation-delay: 0.5s; }
.is-vorn .dtab__zeile:nth-of-type(3) { animation-delay: 1s; }
.is-vorn .dtab__zeile:nth-of-type(4) { animation-delay: 1.5s; }
.is-vorn .dtab__zeile:nth-of-type(5) { animation-delay: 2s; }
@keyframes dweg {
  0%, 12% { opacity: 1; transform: none; filter: none; }
  26% { opacity: 0.5; transform: translateX(8px); filter: blur(1px); }
  34%, 90% { opacity: 0.12; transform: translateX(16px); filter: blur(2px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.dtab__mail {
  justify-self: start;
  margin-top: 0.15rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: rgba(217, 139, 74, 0.12);
  color: #b0702f;
  font-size: 0.64rem;
  font-weight: 600;
}
.is-vorn .dtab__mail { animation: dweg 12s cubic-bezier(0.4, 0, 0.2, 1) infinite 2.4s; }

/* Punkte wandern in mehreren Wellen von der Tabelle ins System */
.dwandern { position: relative; width: clamp(1.8rem, 4.5vw, 3rem); height: 60px; }
.dwandern i {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0;
}
.dwandern i:nth-child(1) { top: 14%; }
.dwandern i:nth-child(2) { top: 32%; }
.dwandern i:nth-child(3) { top: 50%; }
.dwandern i:nth-child(4) { top: 68%; }
.dwandern i:nth-child(5) { top: 86%; }
.is-vorn .dwandern i { animation: dwandern 12s cubic-bezier(0.45, 0, 0.3, 1) infinite; }
.is-vorn .dwandern i:nth-child(2) { animation-delay: 0.55s; }
.is-vorn .dwandern i:nth-child(3) { animation-delay: 1.1s; }
.is-vorn .dwandern i:nth-child(4) { animation-delay: 1.65s; }
.is-vorn .dwandern i:nth-child(5) { animation-delay: 2.2s; }
@keyframes dwandern {
  0%, 10% { left: 0; opacity: 0; transform: scale(0.6); }
  14% { opacity: 1; transform: scale(1); }
  28% { left: calc(100% - 6px); opacity: 1; transform: scale(1); }
  32%, 100% { left: calc(100% - 6px); opacity: 0; transform: scale(0.5); }
}

.dsys__kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-bottom: 0.15rem; }
.dsys__kacheln b {
  padding: 0.38rem 0.45rem;
  border-radius: 9px;
  background: rgba(47, 77, 158, 0.06);
  border: 1px solid rgba(47, 77, 158, 0.14);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
}
.is-vorn .dsys__kacheln b { animation: dkachel 12s ease-out infinite; }
.is-vorn .dsys__kacheln b:nth-child(2) { animation-delay: 0.2s; }
.is-vorn .dsys__kacheln b:nth-child(3) { animation-delay: 0.4s; }
@keyframes dkachel {
  0%, 14% { opacity: 0; transform: translateY(8px) scale(0.96); }
  24%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px) scale(0.96); }
}
.dsys__kacheln i {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  margin-top: 1px;
}
.dsys__lauf { display: grid; gap: 0.3rem; }
.dsys__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 7px;
  background: rgba(47, 163, 186, 0.06);
  border-left: 2px solid var(--teal);
  font-size: 0.7rem;
  color: var(--ink-2);
  opacity: 0;
}
.dsys__zeile em { font-style: normal; font-family: var(--font-mono); font-size: 0.65rem; }
.dstatus {
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 600;
  color: #1a7f4e;
  background: rgba(46, 201, 139, 0.14);
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
}
.is-vorn .dsys__zeile { animation: dlauf 12s cubic-bezier(0.2, 0.9, 0.3, 1) infinite; }
.is-vorn .dsys__zeile:nth-child(2) { animation-delay: 0.7s; }
.is-vorn .dsys__zeile:nth-child(3) { animation-delay: 1.4s; }
@keyframes dlauf {
  0%, 34% { opacity: 0; transform: translateX(-12px); }
  44%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(-12px); }
}
.dsys__takt {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0;
}
.dsys__takt i {
  width: 4px; height: 12px;
  border-radius: 2px;
  background: rgba(47, 163, 186, 0.25);
}
.is-vorn .dsys__takt { animation: dtaktan 12s ease-out infinite; }
@keyframes dtaktan {
  0%, 58% { opacity: 0; }
  66%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
.is-vorn .dsys__takt i { animation: dtakt 1.6s ease-in-out infinite; }
.is-vorn .dsys__takt i:nth-child(2) { animation-delay: 0.1s; }
.is-vorn .dsys__takt i:nth-child(3) { animation-delay: 0.2s; }
.is-vorn .dsys__takt i:nth-child(4) { animation-delay: 0.3s; }
.is-vorn .dsys__takt i:nth-child(5) { animation-delay: 0.4s; }
.is-vorn .dsys__takt i:nth-child(6) { animation-delay: 0.5s; }
.is-vorn .dsys__takt i:nth-child(7) { animation-delay: 0.6s; }
.is-vorn .dsys__takt i:nth-child(8) { animation-delay: 0.7s; }
@keyframes dtakt {
  0%, 100% { background: rgba(47, 163, 186, 0.22); transform: scaleY(0.6); }
  50% { background: var(--teal); transform: scaleY(1); }
}

/* ---------- 03: KI antwortet aus den eigenen Unterlagen ----------
   Ein echter Chat loescht nichts: jede Blase bleibt stehen, bis der
   ganze Verlauf am Ende gemeinsam ausblendet. Deshalb laufen ALLE
   Animationen synchron (gleiche Dauer, kein animation-delay) und die
   Staffelung steckt in den Prozentwerten. */

.dsz--3 { position: relative; }
.is-vorn .dsz--3 { animation: dverlauf 13s linear infinite; }
@keyframes dverlauf {
  0%, 90% { opacity: 1; }
  97%, 99.9% { opacity: 0; }
  100% { opacity: 1; }
}

.dchatlauf { display: grid; gap: 0.42rem; align-content: start; }
.dchat {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0;
}
.dchat--frage {
  justify-self: start;
  background: rgba(12, 22, 38, 0.05);
  color: var(--ink-2);
  border-bottom-left-radius: 4px;
  transform-origin: 0 100%;
}
.dchat--frage > span { display: inline-block; }
.dchat--antwort {
  justify-self: end;
  max-width: 88%;
  background: linear-gradient(125deg, var(--blue), #2f7f9e);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 10px 22px -16px rgba(47, 77, 158, 0.9);
  transform-origin: 100% 100%;
}
.dchat__text, .dchat__text2 { display: inline-block; }

/* Tippen liegt genau da, wo gleich die Antwort steht: kein Loch im Layout */
.dpaar { display: grid; }
.dpaar > * { grid-area: 1 / 1; }
.dpaar .dtippt { align-self: center; }

/* --- Ablauf, alles auf derselben Uhr (13 s) --- */
.is-vorn .dchat--f1 { animation: dblase1 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
.is-vorn .dtippt--1 { animation: dtippt1 13s linear infinite; }
.is-vorn .dchat--a1 { animation: dblase2 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
.is-vorn .dquellen { animation: dquellen 13s ease-out infinite; }
.is-vorn .dchat--f2 { animation: dblase3 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
.is-vorn .dtippt--2 { animation: dtippt2 13s linear infinite; }
.is-vorn .dchat--a2 { animation: dblase4 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }

@keyframes dblase1 {
  0%, 4% { opacity: 0; transform: translateY(8px) scale(0.82); }
  6.5% { opacity: 1; transform: translateY(0) scale(1.05); }
  9%, 99.9% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(0.82); }
}
@keyframes dtippt1 {
  0%, 9% { opacity: 0; }
  11%, 17% { opacity: 1; }
  19%, 100% { opacity: 0; }
}
@keyframes dblase2 {
  0%, 21% { opacity: 0; transform: translateY(8px) scale(0.82); }
  23.5% { opacity: 1; transform: translateY(0) scale(1.05); }
  26%, 99.9% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(0.82); }
}
@keyframes dquellen {
  0%, 28% { opacity: 0; transform: translateY(4px); }
  32%, 99.9% { opacity: 0.92; transform: none; }
  100% { opacity: 0; }
}
@keyframes dblase3 {
  0%, 46% { opacity: 0; transform: translateY(8px) scale(0.82); }
  48.5% { opacity: 1; transform: translateY(0) scale(1.05); }
  51%, 99.9% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(0.82); }
}
@keyframes dtippt2 {
  0%, 55% { opacity: 0; }
  57%, 62% { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@keyframes dblase4 {
  0%, 66% { opacity: 0; transform: translateY(8px) scale(0.82); }
  68.5% { opacity: 1; transform: translateY(0) scale(1.05); }
  71%, 99.9% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(0.82); }
}

.dquellen {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: 4px;
  font-size: 0.63rem;
  opacity: 0;
}
.dquellen i {
  display: grid; place-items: center;
  width: 14px; height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  font-style: normal;
  font-size: 0.55rem;
  font-weight: 700;
}
.dtippt {
  display: flex; gap: 4px;
  justify-self: end;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: rgba(12, 22, 38, 0.05);
  opacity: 0;
}
.dtippt i { width: 5px; height: 5px; border-radius: 50%; background: rgba(12, 22, 38, 0.3); }
.is-vorn .dtippt i { animation: dtippt 1.1s ease-in-out infinite; }
.is-vorn .dtippt i:nth-child(2) { animation-delay: 0.15s; }
.is-vorn .dtippt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dtippt {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.dsicher { display: grid; gap: 0.3rem; margin-top: 0.3rem; }
.dsicher__zeile {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  color: var(--ink-2);
  opacity: 0;
}
.is-vorn .dsicher__zeile { animation: dsicher1 13s ease-out infinite; }
.is-vorn .dsicher__zeile:nth-child(2) { animation-name: dsicher2; }
.is-vorn .dsicher__zeile:nth-child(3) { animation-name: dsicher3; }
@keyframes dsicher1 {
  0%, 78% { opacity: 0; transform: translateY(6px); }
  83%, 99.9% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes dsicher2 {
  0%, 81% { opacity: 0; transform: translateY(6px); }
  86%, 99.9% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes dsicher3 {
  0%, 84% { opacity: 0; transform: translateY(6px); }
  89%, 99.9% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
.dsicher__zeile i {
  flex: 0 0 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(46, 201, 139, 0.16);
}

/* ---------- 04: schneller nach der Modernisierung ---------- */

.dmess { grid-column: 1; display: grid; gap: 0.6rem; }
.dmess__zeile { display: grid; grid-template-columns: 3.6rem 1fr 3rem; align-items: center; gap: 0.55rem; }
.dmess__zeile em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dbahn { display: block; height: 10px; border-radius: 6px; background: rgba(12, 22, 38, 0.07); overflow: hidden; }
.dbahn i { display: block; height: 100%; border-radius: 6px; width: 0; }
.is-vorn .dalt { background: #d98b4a; animation: dbalken 12s cubic-bezier(0.3, 0, 0.4, 1) infinite; --breit: 92%; }
.is-vorn .dneu { background: linear-gradient(90deg, var(--blue), var(--teal)); animation: dbalken 12s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 2.6s; --breit: 22%; }
@keyframes dbalken {
  0%, 4% { width: 0; }
  22%, 88% { width: var(--breit); }
  100% { width: 0; }
}
.dmess__zeile b { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; text-align: right; opacity: 0; }
.is-vorn .dmess__zeile b { animation: dwertan 12s ease-out infinite 2s; }
.is-vorn .dmess__zeile:nth-child(2) b { animation-delay: 4.4s; }
@keyframes dwertan {
  0% { opacity: 0; transform: translateX(-4px); }
  4%, 76% { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; }
}
.ist-alt { color: #b0702f; }
.ist-neu { color: var(--teal-ink); }

/* Prüfliste, die nacheinander abgehakt wird */
.dpruef { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.6rem; }
.dpruef__zeile {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--ink-2);
  opacity: 0;
}
.dpruef__zeile i {
  flex: 0 0 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(12, 22, 38, 0.18);
  position: relative;
}
.dpruef__zeile i::after {
  content: "";
  position: absolute;
  left: 3px; top: 1px;
  width: 4px; height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
}
.is-vorn .dpruef__zeile { animation: dpruefan 12s ease-out infinite 3.4s; }
.is-vorn .dpruef__zeile:nth-child(2) { animation-delay: 3.9s; }
.is-vorn .dpruef__zeile:nth-child(3) { animation-delay: 4.4s; }
.is-vorn .dpruef__zeile:nth-child(4) { animation-delay: 4.9s; }
@keyframes dpruefan {
  0% { opacity: 0; transform: translateY(5px); }
  4%, 68% { opacity: 1; transform: none; }
  76%, 100% { opacity: 0; }
}
.is-vorn .dpruef__zeile i { animation: dhakenan 12s ease-out infinite 3.7s; }
.is-vorn .dpruef__zeile:nth-child(2) i { animation-delay: 4.2s; }
.is-vorn .dpruef__zeile:nth-child(3) i { animation-delay: 4.7s; }
.is-vorn .dpruef__zeile:nth-child(4) i { animation-delay: 5.2s; }
@keyframes dhakenan {
  0% { background: transparent; border-color: rgba(12, 22, 38, 0.18); }
  3%, 66% { background: var(--ok); border-color: var(--ok); }
  74%, 100% { background: transparent; border-color: rgba(12, 22, 38, 0.18); }
}
.is-vorn .dpruef__zeile i::after { animation: dhaken 12s cubic-bezier(0.2, 1.4, 0.4, 1) infinite 3.75s; }
.is-vorn .dpruef__zeile:nth-child(2) i::after { animation-delay: 4.25s; }
.is-vorn .dpruef__zeile:nth-child(3) i::after { animation-delay: 4.75s; }
.is-vorn .dpruef__zeile:nth-child(4) i::after { animation-delay: 5.25s; }
@keyframes dhaken {
  0% { transform: rotate(45deg) scale(0); }
  3%, 66% { transform: rotate(45deg) scale(1); }
  74%, 100% { transform: rotate(45deg) scale(0); }
}

/* Ring, der den Gewinn aufzieht */
.dring { grid-column: 2; grid-row: 1 / 3; position: relative; justify-self: center; align-self: center; width: clamp(6rem, 11vw, 8rem); }
.dring svg { width: 100%; display: block; transform: rotate(-90deg); }
.dring__bahn { fill: none; stroke: rgba(12, 22, 38, 0.08); stroke-width: 9; }
.dring__wert {
  fill: none;
  stroke: var(--teal);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 302;
  stroke-dashoffset: 302;
}
.is-vorn .dring__wert { animation: dring 12s cubic-bezier(0.2, 0.8, 0.3, 1) infinite 1.2s; }
@keyframes dring {
  0% { stroke-dashoffset: 302; }
  32%, 78% { stroke-dashoffset: 54; }
  90%, 100% { stroke-dashoffset: 302; }
}
.dring__zahl {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.dring__zahl b { font-size: 1.6rem; font-weight: 750; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.dring__zahl i {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}

.dhaken { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.dhaken span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  color: var(--ink-2);
  opacity: 0;
}
.is-vorn .dhaken span { animation: dpruefan 12s ease-out infinite 6.2s; }
.is-vorn .dhaken span:nth-child(2) { animation-delay: 6.6s; }
.is-vorn .dhaken span:nth-child(3) { animation-delay: 7s; }
.dhaken i {
  display: grid; place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: rgba(46, 201, 139, 0.12);
  color: #1a7f4e;
  font-style: normal;
  font-size: 0.66rem;
}

/* ---------- Fortschritt ---------- */

.demat__fort { margin-top: clamp(1.2rem, 3vh, 2.2rem); display: grid; gap: 0.7rem; }
.demat__bahn {
  position: relative;
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(47, 77, 158, 0.12);
  overflow: hidden;
}
.demat__bahn i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--fort, 0) * 100%);
  border-radius: 2px;
  background: var(--grad);
}
/* kleiner Lichtpunkt an der Spitze */
.demat__bahn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--fort, 0) * 100%);
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(63, 214, 232, 0.22), 0 0 14px rgba(63, 214, 232, 0.6);
}
.demat__marken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.demat__marken span {
  display: grid;
  gap: 2px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-2);
  opacity: 0.5;
  transition: opacity 0.4s ease, color 0.4s ease;
}
.demat__marken span em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.demat__marken span.ist-durch { opacity: 0.75; }
.demat__marken span.is-vorn { opacity: 1; color: var(--ink); font-weight: 650; }
.demat__marken span.is-vorn em { color: var(--teal-ink); }

/* Flache Fenster (Notebooks, Fenster nicht im Vollbild): der gepinnte
   Inhalt muss ganz hineinpassen, sonst haengt er unten fest. */
@media (min-width: 901px) and (max-height: 800px) {
  .demat__kopf { margin-bottom: 0.6rem; }
  .demat__h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
  .demat__unter { display: none; }
  .demat__kicker { margin-bottom: 0.6rem; font-size: 0.74rem; }
  .demat__lage { gap: clamp(1.4rem, 4vw, 3rem); margin-top: 0.4rem; }
  .demat__text { gap: 0.5rem; }
  .demat__text h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
  .demat__lead { font-size: 0.98rem; line-height: 1.5; }
  .demat__text a { margin-top: 0.15rem; padding: 0.6rem 1.25rem; }
  .demat__buehnen { min-height: clamp(15rem, 40vh, 20rem); }
  .dfenster__inhalt { min-height: clamp(12rem, 32vh, 17rem); }
  .demat__fort { margin-top: 0.9rem; }
}

@media (max-width: 900px) {
  .demat__pin { padding-top: clamp(3.8rem, 8vh, 5rem); }
  .demat__h2 { white-space: normal; text-wrap: balance; font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .demat__stage { height: 360vh; }
  .demat__lage { grid-template-columns: 1fr; gap: 1.4rem; }
  .demat__buehnen { order: -1; min-height: 15rem; }
  .demat__text h3 { font-size: 1.5rem; }
  .dfenster__inhalt { min-height: 12rem; }
}


@media (prefers-reduced-motion: reduce) {
  .demat__stage { height: auto !important; }
  .demat__pin { position: static; height: auto; padding: 3rem 0; }
  .demat__texte, .demat__buehnen { display: grid; gap: 2.5rem; }
  .demat__text, .dbild { grid-area: auto; opacity: 1; filter: none; }
  .demat__text > *, .dbild > * { transform: none; }
  .is-vorn * { animation: none !important; }
  .dalt { width: 92%; } .dneu { width: 22%; }
  .dchat--antwort, .dquellen, .dsicher__zeile, .dkalender__termin, .dhaken span { opacity: 1; }
  .dchat__text { width: 100%; }
  .dring__wert { stroke-dashoffset: 54; }
}


/* ============================================================================
   Kernbereiche: die Mockups bekommen Leben
   Dezent und langsam, solange die Karte nur dasteht. Beim Darueberfahren
   laeuft alles deutlicher, damit klar wird, dass die Karte reagiert.
   ========================================================================== */

.cores-stack .mock { --takt: 1; }
.cores-stack .core:hover .mock { --takt: 0.55; }   /* schneller = lebendiger */

/* A: Browser. Der Knopf pulst, die Spalten atmen, ein Lichtstreif zieht durch */
.cores-stack .mock--browser { position: relative; overflow: hidden; }
.cores-stack .mock--browser .mock__pill {
  animation: mockpuls calc(4.4s * var(--takt)) ease-in-out infinite;
}
@keyframes mockpuls {
  0%, 62%, 100% { box-shadow: 0 0 0 0 rgba(63, 214, 232, 0); }
  70% { box-shadow: 0 0 0 6px rgba(63, 214, 232, 0.22); }
  86% { box-shadow: 0 0 0 12px rgba(63, 214, 232, 0); }
}
.cores-stack .mock--browser .mock__cols span {
  animation: mockatem calc(5.2s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--browser .mock__cols span:nth-child(2) { animation-delay: 0.5s; }
.cores-stack .mock--browser .mock__cols span:nth-child(3) { animation-delay: 1s; }
@keyframes mockatem {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
.cores-stack .mock--browser::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(63, 214, 232, 0.16), transparent);
  animation: mockstreif calc(6.5s * var(--takt)) ease-in-out infinite;
  pointer-events: none;
}
@keyframes mockstreif {
  0%, 55% { transform: translateX(0); opacity: 0; }
  62% { opacity: 1; }
  92%, 100% { transform: translateX(350%); opacity: 0; }
}

/* B: App. Die Menuepunkte wandern, die Zeilen laufen ein */
.cores-stack .mock--app .mock__side i {
  animation: mockmenue calc(6s * var(--takt)) steps(1, end) infinite;
}
.cores-stack .mock--app .mock__side i:nth-child(2) { animation-delay: calc(1.5s * var(--takt)); }
.cores-stack .mock--app .mock__side i:nth-child(3) { animation-delay: calc(3s * var(--takt)); }
.cores-stack .mock--app .mock__side i:nth-child(4) { animation-delay: calc(4.5s * var(--takt)); }
@keyframes mockmenue {
  0%, 24% { opacity: 1; }
  25%, 100% { opacity: 0.35; }
}
.cores-stack .mock--app .mock__rows i {
  animation: mockzeile calc(5s * var(--takt)) ease-out infinite;
}
.cores-stack .mock--app .mock__rows i:nth-child(2) { animation-delay: calc(0.35s * var(--takt)); }
.cores-stack .mock--app .mock__rows i:nth-child(3) { animation-delay: calc(0.7s * var(--takt)); }
.cores-stack .mock--app .mock__rows i:nth-child(4) { animation-delay: calc(1.05s * var(--takt)); }
@keyframes mockzeile {
  0%, 8% { opacity: 0.25; transform: translateX(-8px); }
  22%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0.25; transform: translateX(-8px); }
}
.cores-stack .mock--app .mock__kpis span {
  animation: mockkpi calc(5s * var(--takt)) ease-out infinite;
}
.cores-stack .mock--app .mock__kpis span:nth-child(2) { animation-delay: calc(0.2s * var(--takt)); }
.cores-stack .mock--app .mock__kpis span:nth-child(3) { animation-delay: calc(0.4s * var(--takt)); }
@keyframes mockkpi {
  0%, 6% { opacity: 0.4; transform: translateY(6px); }
  20%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0.4; transform: translateY(6px); }
}

/* C: Chat, siehe unten (alle Blasen auf einer gemeinsamen Uhr) */

.cores-stack .mock--chat .dot--ok {
  animation: mockdot calc(2.6s * var(--takt)) ease-in-out infinite;
}
@keyframes mockdot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 201, 139, 0.5); }
  60%, 100% { box-shadow: 0 0 0 7px rgba(46, 201, 139, 0); }
}

/* ---------- Chat: gemeinsame Uhr, gemeinsamer Abgang ----------
   Die Nachrichten erscheinen nacheinander, bleiben lange stehen und
   verschwinden am Ende ZUSAMMEN. Danach faengt der Verlauf von vorne an.
   Wichtig: nur die Blasen blenden aus, das Fenster mit Kopfzeile und
   Eingabefeld bleibt die ganze Zeit stehen. */
.cores-stack .mock--chat .mock__msg--user,
.cores-stack .mock--chat .mock__msg--ai,
.cores-stack .mock--chat .mock__tippt { opacity: 0; }

html.js .core.in .mock--chat .mock__msg--user {
  transform-origin: 100% 100%;
  animation: chatuser 11s cubic-bezier(0.34, 1.4, 0.5, 1) infinite;
}
html.js .core.in .mock--chat .mock__tippt {
  animation: chattippt 11s linear infinite;
}
html.js .core.in .mock--chat .mock__msg--ai {
  transform-origin: 0 100%;
  animation: chatai 11s cubic-bezier(0.34, 1.4, 0.5, 1) infinite;
}
html.js .core.in .mock--chat .mock__input span {
  animation: chatschreib 11s steps(1, end) infinite;
}
/* Ohne Skript ist alles sofort da */
html:not(.js) .cores-stack .mock--chat .mock__msg--user,
html:not(.js) .cores-stack .mock--chat .mock__msg--ai { opacity: 1; }
/* Nachrichten ploppen fertig heraus, wie in echten Chats */
@keyframes chatuser {
  0%, 10% { opacity: 0; transform: translateY(8px) scale(0.84); }
  14% { opacity: 1; transform: translateY(0) scale(1.04); }
  18%, 86% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-6px) scale(0.97); }
}
@keyframes chattippt {
  0%, 20% { opacity: 0; }
  24%, 38% { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@keyframes chatai {
  0%, 42% { opacity: 0; transform: translateY(8px) scale(0.84); }
  46% { opacity: 1; transform: translateY(0) scale(1.03); }
  50%, 86% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-6px) scale(0.97); }
}
/* Der Schreibbalken zuckt nur, waehrend die Frage getippt wird */
@keyframes chatschreib {
  0%, 1% { opacity: 0.18; }
  3%, 5% { opacity: 1; }
  6%, 8% { opacity: 0.18; }
  9% { opacity: 1; }
  11%, 100% { opacity: 0.18; }
}

/* D: Verzeichnis. Die Eintraege heben sich nacheinander hervor */
.cores-stack .mock--index .mock__idx {
  animation: mockidx calc(6.4s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--index .mock__idx:nth-child(2) { animation-delay: calc(1.6s * var(--takt)); }
.cores-stack .mock--index .mock__idx:nth-child(3) { animation-delay: calc(3.2s * var(--takt)); }
.cores-stack .mock--index .mock__idx:nth-child(4) { animation-delay: calc(4.8s * var(--takt)); }
@keyframes mockidx {
  0%, 12%, 40%, 100% { opacity: 0.55; transform: translateX(0); }
  20%, 32% { opacity: 1; transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .cores-stack .mock *,
  .cores-stack .mock::after,
  .cores-stack .core::after { animation: none !important; }
}


/* ============================================================================
   Kernbereiche: die Mockups erzaehlen jeweils eine kleine Geschichte
   ========================================================================== */

/* --- A: Besucher fuellt aus, klickt, Anfrage geht raus --- */
.cores-stack .mock--browser .mock__pill { position: relative; }
.mock__zeiger {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.35);
  opacity: 0;
  pointer-events: none;
}
.cores-stack .mock--browser .mock__zeiger {
  animation: mockzeiger calc(6.4s * var(--takt)) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes mockzeiger {
  0%, 26% { transform: translate(34px, 26px) scale(0.85); opacity: 0; }
  30% { opacity: 1; }
  40% { transform: translate(0, 0) scale(1); opacity: 1; }
  44% { transform: translate(0, 0) scale(0.6); }
  48% { transform: translate(0, 0) scale(1); }
  56%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
}
.mock__quittung {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.26rem 0.6rem;
  border-radius: 99px;
  background: rgba(46, 201, 139, 0.12);
  border: 1px solid rgba(46, 201, 139, 0.3);
  font-size: 0.68rem;
  font-weight: 600;
  color: #1a7f4e;
  opacity: 0;
}
.mock__quittung i { font-style: normal; }
.cores-stack .mock--browser .mock__quittung {
  animation: mockquitt calc(6.4s * var(--takt)) ease-out infinite;
}
@keyframes mockquitt {
  0%, 50% { opacity: 0; transform: translateY(6px); }
  58%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-3px); }
}

/* --- B: aus Zeilen wird ein Diagramm --- */
.mock__balken {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 42px;
  margin-top: 0.7rem;
}
.mock__balken i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #3fd6e8, #2f4d9e);
  height: 20%;
}
.cores-stack .mock--app .mock__balken i {
  /* Volle Hoehe steht fest, die Animation skaliert nur (kein Layout je Bild) */
  height: var(--hoch, 60%);
  transform-origin: bottom center;
  animation: mockbalken calc(5.4s * var(--takt)) cubic-bezier(0.3, 0.9, 0.3, 1) infinite;
}
.cores-stack .mock--app .mock__balken i:nth-child(1) { --hoch: 45%; animation-delay: calc(0.05s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(2) { --hoch: 72%; animation-delay: calc(0.15s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(3) { --hoch: 38%; animation-delay: calc(0.25s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(4) { --hoch: 88%; animation-delay: calc(0.35s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(5) { --hoch: 60%; animation-delay: calc(0.45s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(6) { --hoch: 100%; animation-delay: calc(0.55s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(7) { --hoch: 52%; animation-delay: calc(0.65s * var(--takt)); }
@keyframes mockbalken {
  0%, 6% { transform: scaleY(0.2); opacity: 0.45; }
  30%, 82% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.2); opacity: 0.45; }
}

/* --- C: Frage, Denkpause, Antwort --- */
.mock__tippt {
  display: inline-flex;
  gap: 4px;
  align-self: flex-start;
  padding: 0.3rem 0.6rem;
  margin: 0.2rem 0;
  border-radius: 99px;
  background: rgba(12, 22, 38, 0.06);
  opacity: 0;
}
.mock__tippt i { width: 5px; height: 5px; border-radius: 50%; background: rgba(12, 22, 38, 0.35); }
.cores-stack .mock--chat .mock__tippt {
  animation: mocktippt calc(7s * var(--takt)) linear infinite;
}
@keyframes mocktippt {
  0%, 12% { opacity: 0; }
  16%, 26% { opacity: 1; }
  30%, 100% { opacity: 0; }
}
.cores-stack .mock--chat .mock__tippt i {
  animation: mockhuepf calc(1.1s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--chat .mock__tippt i:nth-child(2) { animation-delay: calc(0.15s * var(--takt)); }
.cores-stack .mock--chat .mock__tippt i:nth-child(3) { animation-delay: calc(0.3s * var(--takt)); }
@keyframes mockhuepf {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
/* Die Staffelung steckt jetzt in den Prozentwerten der gemeinsamen Uhr
   (siehe chatuser/chattippt/chatai), nicht mehr in einer Verzoegerung. */

/* --- D: Marker faehrt die Eintraege ab --- */
.cores-stack .mock--index { position: relative; }
.mock__marker {
  position: absolute;
  left: 0; right: 0;
  height: 26%;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(63, 214, 232, 0.16), rgba(47, 77, 158, 0.08));
  border-left: 2px solid var(--teal);
  pointer-events: none;
}
.cores-stack .mock--index .mock__marker {
  top: 0;
  animation: mockmarker calc(6.4s * var(--takt)) cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
/* Verschiebung in Eigenhoehe (26 % des Rahmens): 25 % des Rahmens sind
   96 % der Markerhoehe. Transformation statt top, damit kein Layout je Bild. */
@keyframes mockmarker {
  0%, 14% { transform: translateY(0); }
  25%, 39% { transform: translateY(96%); }
  50%, 64% { transform: translateY(192%); }
  75%, 89% { transform: translateY(285%); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mock__zeiger, .mock__quittung, .mock__tippt, .mock__marker { display: none; }
  .mock__balken i { height: var(--hoch, 60%); }
}


/* ============================================================================
   Karte D: die Eintraege sind ganze Aufzaehlungen, keine Schlagworte.
   Als Pillen untereinander wirkt das wie eine Reihe verrutschter Knoepfe,
   deshalb hier eine ruhige Liste mit Trennlinien.
   ========================================================================== */
.cores-stack .core--alle .core__copy .ticks {
  display: grid;
  gap: 0;
  margin-top: 1.2rem;
  border-top: 1px solid rgba(12, 22, 38, 0.09);
}
.cores-stack .core--alle .core__copy .ticks li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.2rem;
  border: 0;
  border-bottom: 1px solid rgba(12, 22, 38, 0.09);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 0.94rem;
  color: var(--ink-2);
  transform: none;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.cores-stack .core--alle .core__copy .ticks li::before {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--akz-a);
  opacity: 0.55;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cores-stack .core--alle .core__copy .ticks li:hover {
  color: var(--ink);
  padding-left: 0.5rem;
  background: none;
  border-color: rgba(12, 22, 38, 0.09);
  transform: none;
}
.cores-stack .core--alle .core__copy .ticks li:hover::before {
  opacity: 1;
  transform: scale(1.35);
}
/* Beim Karten-Hover nicht die Chip-Regel greifen lassen */
.cores-stack .core--alle:hover .core__copy .ticks li {
  border-color: rgba(12, 22, 38, 0.09);
  box-shadow: none;
}


/* ============================================================================
   DSGPT: die beiden Haelften fliegen von aussen herein
   Links kommt von links, rechts von rechts. Ausgeloest wird es ueber die
   Klasse .ist-da, die der Reveal-Beobachter setzt, sobald die Sektion im
   Bild ist. Innerhalb der Textspalte laufen die Zeilen leicht gestaffelt
   nach, damit es nicht wie ein Block wirkt.
   ========================================================================== */
html.js [data-fliegt] {
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.16, 0.84, 0.28, 1),
    translate 1.25s cubic-bezier(0.16, 0.84, 0.28, 1),
    scale 1.25s cubic-bezier(0.16, 0.84, 0.28, 1),
    filter 0.9s ease;
  filter: blur(6px);
  scale: 0.94;
}
/* Deutlich weiter draussen als vorher: der Weg soll auffallen */
html.js [data-fliegt="links"] { translate: -230px 0; }
html.js [data-fliegt="rechts"] { translate: 260px 0; }
html.js [data-fliegt].ist-da {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  filter: blur(0);
}

/* Der Inhalt der Textspalte staffelt sich nach */
html.js [data-fliegt="links"] > * {
  opacity: 0;
  translate: -60px 0;
  transition:
    opacity 0.7s ease var(--fd, 0s),
    translate 0.8s cubic-bezier(0.18, 0.86, 0.28, 1) var(--fd, 0s),
    /* Der Hover braucht seine eigenen Uebergaenge, sonst springt die Karte */
    transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1),
    box-shadow 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
    border-color 0.5s ease,
    background-color 0.5s ease;
}
html.js [data-fliegt="links"].ist-da > * { opacity: 1; translate: 0 0; }
html.js [data-fliegt="links"] > *:nth-child(1) { --fd: 0.14s; }
html.js [data-fliegt="links"] > *:nth-child(2) { --fd: 0.26s; }
html.js [data-fliegt="links"] > *:nth-child(3) { --fd: 0.38s; }
html.js [data-fliegt="links"] > *:nth-child(4) { --fd: 0.5s; }
html.js [data-fliegt="links"] > *:nth-child(5) { --fd: 0.62s; }

/* Die rechte Seite kippt beim Hereinkommen leicht mit */
html.js [data-fliegt="rechts"] .dmock {
  transform: perspective(1100px) rotateY(22deg) rotateX(4deg) scale(0.9);
  transform-origin: 100% 50%;
  transition: transform 1.25s cubic-bezier(0.16, 0.84, 0.28, 1);
}
html.js [data-fliegt="rechts"].ist-da .dmock {
  transform: perspective(1100px) rotateY(0deg) rotateX(0deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-fliegt],
  html.js [data-fliegt] > * {
    opacity: 1; translate: none; scale: none; filter: none; transition: none;
  }
  html.js [data-fliegt="rechts"] .dmock { transform: none; }
}


/* ============================================================================
   Portfolio-Strecke: die Arbeiten klappen auf
   Passend zur Ueberschrift "Arbeiten, die live sind": der Bildschirm kippt
   aus der Waagerechten hoch, als wuerde ein Laptop aufgeklappt. Das Handy
   schiebt sich danach von rechts dazu.
   ========================================================================== */
html.js [data-fliegt="auf"] {
  opacity: 0;
  translate: 0 0;
  scale: 1;
  filter: none;
  perspective: 1600px;
  transition: opacity 0.7s ease;
}
html.js [data-fliegt="auf"].ist-da { opacity: 1; }

html.js [data-fliegt="auf"] .pslide__visual {
  transform: rotateX(74deg) scale(0.86);
  transform-origin: 50% 100%;
  opacity: 0;
  transition:
    transform 1.15s cubic-bezier(0.16, 0.86, 0.26, 1),
    opacity 0.6s ease;
}
html.js [data-fliegt="auf"].ist-da .pslide__visual {
  transform: rotateX(0deg) scale(1);
  opacity: 1;
}
/* Das Schweben erst nach dem Aufklappen, sonst wackelt es beim Hochkippen */
html.js [data-fliegt="auf"] .pv3-stage,
html.js [data-fliegt="auf"] .pv3-phone { animation-play-state: paused; }
html.js [data-fliegt="auf"].ist-da .pv3-stage,
html.js [data-fliegt="auf"].ist-da .pv3-phone { animation-play-state: running; }

/* Das Handy kommt erst, wenn der Bildschirm schon steht */
html.js [data-fliegt="auf"] .pv3-phone {
  translate: 70px 20px;
  opacity: 0;
  transition:
    translate 0.9s cubic-bezier(0.16, 0.86, 0.26, 1) 0.45s,
    opacity 0.6s ease 0.45s;
}
html.js [data-fliegt="auf"].ist-da .pv3-phone { translate: 0 0; opacity: 1; }

/* Text zur Folie zieht von unten nach */
html.js [data-fliegt="auf"] .pslide__body > * {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity 0.6s ease var(--pd, 0s),
    translate 0.7s cubic-bezier(0.18, 0.86, 0.28, 1) var(--pd, 0s);
}
html.js [data-fliegt="auf"].ist-da .pslide__body > * { opacity: 1; translate: 0 0; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(1) { --pd: 0.5s; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(2) { --pd: 0.58s; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(3) { --pd: 0.66s; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(4) { --pd: 0.74s; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-fliegt="auf"],
  html.js [data-fliegt="auf"] .pslide__visual,
  html.js [data-fliegt="auf"] .pv3-phone,
  html.js [data-fliegt="auf"] .pslide__body > * {
    opacity: 1; transform: none; translate: none; transition: none;
  }
}


/* ============================================================================
   Prozess-Story: die Karten tragen mehr, der Abschnitt wirkt nicht mehr leer
   Jede Karte bekommt eine kleine Zeichnung, drei Stichpunkte und eine
   Fusszeile mit Dauer und Ergebnis. Unter den Karten steht ein Abschluss,
   der den leeren Raum schliesst und zum Erstgespraech fuehrt.
   ========================================================================== */

.steps--flow .step {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

/* --- Zeichnung je Schritt --- */
.step__bild {
  position: relative;
  display: block;
  height: 62px;
  margin: 0.2rem 0 0.35rem;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(47, 77, 158, 0.07), rgba(63, 214, 232, 0.06));
  border: 1px solid rgba(12, 22, 38, 0.06);
  overflow: hidden;
}
.step__bild i { position: absolute; display: block; }

/* 01 Verstehen: Notizen, die sich sortieren */
.step__bild--verstehen i {
  height: 11%;
  border-radius: 3px;
  background: rgba(47, 77, 158, 0.3);
  left: 8%;
}
.step__bild--verstehen i:nth-child(1) { top: 22%; width: 46%; }
.step__bild--verstehen i:nth-child(2) { top: 44%; width: 32%; }
.step__bild--verstehen i:nth-child(3) { top: 66%; width: 40%; }
.step__bild--verstehen i:nth-child(4) {
  top: 24%; right: 9%; left: auto;
  width: 22%; height: 52%;
  border-radius: 7px;
  background: linear-gradient(140deg, var(--blue), var(--teal));
  opacity: 0.85;
}
.step.is-on .step__bild--verstehen i:nth-child(4) { animation: stpLupe 2.8s ease-in-out infinite; }
@keyframes stpLupe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}
.step.is-on .step__bild--verstehen i:nth-child(1) { animation: stpZeile 2.6s ease-in-out infinite; }
.step.is-on .step__bild--verstehen i:nth-child(2) { animation: stpZeile 2.6s ease-in-out infinite 0.2s; }
.step.is-on .step__bild--verstehen i:nth-child(3) { animation: stpZeile 2.6s ease-in-out infinite 0.4s; }
@keyframes stpZeile {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50% { transform: translateX(5px); opacity: 1; }
}

/* 02 Konzipieren: Bausteine fuegen sich zu einem Plan */
.step__bild--konzept i {
  border-radius: 5px;
  background: rgba(47, 77, 158, 0.22);
  border: 1px solid rgba(47, 77, 158, 0.28);
}
.step__bild--konzept i:nth-child(1) { left: 9%; top: 20%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(2) { left: 9%; top: 56%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(3) { right: 9%; top: 20%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(4) { right: 9%; top: 56%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(5) {
  left: 50%; top: 50%;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--teal);
  border: 0;
}
/* Die Bausteine ruecken abwechselnd zur Mitte, als fuegten sie sich */
.step.is-on .step__bild--konzept i:nth-child(1) { animation: stpZuMitteR 3s ease-in-out infinite; }
.step.is-on .step__bild--konzept i:nth-child(2) { animation: stpZuMitteR 3s ease-in-out infinite 0.3s; }
.step.is-on .step__bild--konzept i:nth-child(3) { animation: stpZuMitteL 3s ease-in-out infinite 0.15s; }
.step.is-on .step__bild--konzept i:nth-child(4) { animation: stpZuMitteL 3s ease-in-out infinite 0.45s; }
.step.is-on .step__bild--konzept i:nth-child(5) { animation: stpPuls 2.4s ease-in-out infinite; }
@keyframes stpZuMitteR {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(14%); opacity: 1; }
}
@keyframes stpZuMitteL {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(-14%); opacity: 1; }
}
@keyframes stpPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 214, 232, 0.55); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(63, 214, 232, 0); }
}

/* 03 Entwickeln: Fortschrittsbalken, die volllaufen */
.step__bild--bauen i {
  left: 8%;
  height: 13%;
  border-radius: 4px;
  background: rgba(12, 22, 38, 0.08);
  width: 84%;
}
.step__bild--bauen i:nth-child(1) { top: 20%; }
.step__bild--bauen i:nth-child(2) { top: 44%; }
.step__bild--bauen i:nth-child(3) { top: 68%; }
.step__bild--bauen i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  width: var(--w, 40%);
}
.step__bild--bauen i:nth-child(1)::after { --w: 92%; }
.step__bild--bauen i:nth-child(2)::after { --w: 64%; }
.step__bild--bauen i:nth-child(3)::after { --w: 35%; }
.step.is-on .step__bild--bauen i::after { animation: stpFuell 3s cubic-bezier(0.3, 0.9, 0.3, 1) infinite; }
.step.is-on .step__bild--bauen i:nth-child(2)::after { animation-delay: 0.25s; }
.step.is-on .step__bild--bauen i:nth-child(3)::after { animation-delay: 0.5s; }
@keyframes stpFuell {
  0%, 6% { width: 6%; }
  45%, 88% { width: var(--w, 40%); }
  100% { width: 6%; }
}

/* 04 Betreiben: ruhiger Herzschlag */
.step__bild--betrieb i:nth-child(1) {
  left: 8%; right: 8%; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: repeating-linear-gradient(90deg,
    rgba(46, 201, 139, 0.5) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
}
.step__bild--betrieb i:nth-child(2) {
  left: 8%; top: 22%;
  width: 26%; height: 20%;
  border-radius: 5px;
  background: rgba(46, 201, 139, 0.25);
}
.step__bild--betrieb i:nth-child(3) {
  right: 8%; bottom: 22%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ok);
}
/* Die Ueberwachung laeuft durch: Takt wandert, Kachel und Punkt pulsen */
.step.is-on .step__bild--betrieb i:nth-child(1) { animation: stpTakt 2.4s linear infinite; }
.step.is-on .step__bild--betrieb i:nth-child(2) { animation: stpLupe 2.8s ease-in-out infinite; }
.step.is-on .step__bild--betrieb i:nth-child(3) { animation: stpPuls 2.2s ease-in-out infinite; }
@keyframes stpTakt {
  from { background-position: 0 0; }
  to { background-position: 16px 0; }
}

/* --- Stichpunkte --- */
.step__liste { display: grid; gap: 0.28rem; margin-top: 0.1rem; }
.step__liste em {
  position: relative;
  padding-left: 0.95rem;
  font-style: normal;
  font-size: 0.86rem;
  color: var(--ink-2);
}
.step__liste em::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.7;
}

/* --- Fusszeile der Karte --- */
.step__meta {
  display: grid;
  gap: 0.1rem;
  margin-top: 0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(12, 22, 38, 0.08);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.step__meta b {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.step__erg { font-size: 0.78rem; opacity: 0.75; }

/* --- Abschluss unter den Karten --- */
.prozess__fuss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
  padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 2rem);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(12, 22, 38, 0.07);
  backdrop-filter: blur(6px);
}
.prozess__fussText { margin: 0; color: var(--ink-2); font-size: 0.97rem; line-height: 1.6; max-width: 44rem; }
.prozess__fussText b { color: var(--ink); }
.prozess__fussCta { display: grid; justify-items: center; gap: 0.4rem; }
.prozess__fussNote { font-size: 0.74rem; color: var(--ink-2); opacity: 0.8; }

@media (max-width: 900px) {
  .prozess__fuss { grid-template-columns: 1fr; text-align: left; }
  .prozess__fussCta { justify-items: start; }
  .step__bild { height: 54px; }
}
/* Der gepinnte Bereich darf nie ueberlaufen, sonst haengt der Abschluss
   unter dem Bildschirmrand fest. */
@media (min-width: 901px) {
  /* Die Karten fuellen die Reihe gleich hoch aus und haben unten Luft,
     damit sie nicht am Abschluss-Band kleben. */
  .steps--flow { align-items: stretch; }
  .steps--flow .step {
    gap: 0.5rem;
    padding-bottom: 1.5rem;
    grid-template-rows: auto auto auto 1fr auto;
  }
  .step__bild { height: 82px; margin: 0.3rem 0 0.5rem; }
  .step__liste { align-content: start; }
  .step__liste em { font-size: 0.84rem; }
  .step__meta { margin-top: 0.5rem; padding-top: 0.6rem; font-size: 0.8rem; }

}
@media (min-width: 901px) and (max-height: 900px) {
  .step__bild { height: 68px; }
  .steps--flow .step { padding-bottom: 1.4rem; }
  .step__liste em:nth-child(3) { display: none; }

}
@media (min-width: 901px) and (max-height: 820px) {
  .step__bild { display: none; }
  .step__liste { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step__bild i, .step__bild i::after { animation: none !important; }
}


/* ============================================================================
   Zweispaltige Karten-Sektionen: mehr Ruhe, klarere Ordnung
   Bei zwei Spalten ist Platz fuer eine waagerechte Aufteilung: die Nummer
   steht als Kachel links, Titel und Text daneben. Das liest sich besser
   als vier schmale Spalten mit umbrechenden Ueberschriften.
   ========================================================================== */
@media (min-width: 861px) {
  .goals.sp-2 .goal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.35rem clamp(1rem, 2vw, 1.6rem);
    align-items: start;
    padding: clamp(1.6rem, 2.4vw, 2.1rem) clamp(1.6rem, 2.4vw, 2.2rem);
  }
  /* Nummer wird zur Kachel und verlaesst die Ecke */
  .goals.sp-2 .goal > .goal__num {
    position: static;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(140deg, rgba(47, 77, 158, 0.1), rgba(63, 214, 232, 0.12));
    border: 1px solid rgba(47, 77, 158, 0.14);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--blue);
    opacity: 1;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  .goals.sp-2 .goal:hover > .goal__num {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
  }
  .goals.sp-2 .goal__title {
    grid-column: 2;
    font-size: clamp(1.12rem, 1.5vw, 1.3rem);
    line-height: 1.25;
    align-self: center;
  }
  .goals.sp-2 .goal__text {
    grid-column: 2;
    font-size: 0.97rem;
    line-height: 1.62;
  }
  .goals.sp-2 .goal__link { grid-column: 2; }
  .goals.sp-2 .goal__bild { grid-column: 1 / -1; grid-row: auto; }
}

/* Auf dunklem Grund die Kachel anpassen */
.section--dark .goals.sp-2 .goal > .goal__num {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--dark-text);
}


/* ============================================================================
   Betrieb: sechs Punkte links, ein laufendes Betriebsboard rechts
   Sechs gleiche Kaesten sagen nichts ueber Betrieb aus. Rechts steht jetzt
   ein Board, das genau das zeigt, wovon der Text spricht: Erreichbarkeit,
   Antwortzeit, Sicherungen, Pruefungen.
   ========================================================================== */
.betriebLage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: stretch;
}
.betriebLage .lage,
.betriebLage .lage__karte { height: 100%; }
/* Der freie Platz verteilt sich auf die Bloecke, statt unten zu verfallen */
.lage__karte { align-content: space-between; }
.betriebLage .ops { grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.6vw, 1.1rem); }

/* --- Die sechs Punkte: kompakter, mit Zeichen statt nur Punkt --- */
.betriebLage .op {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0.15rem 0.85rem;
  align-items: start;
  padding: clamp(0.9rem, 1.6vw, 1.2rem);
  transition:
    transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1),
    border-color 0.5s ease,
    background-color 0.5s ease,
    box-shadow 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover) {
  .betriebLage .op:hover {
    border-color: rgba(63, 214, 232, 0.4);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
    box-shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.9);
  }
}
.betriebLage .op h3 { grid-column: 2; font-size: 1rem; line-height: 1.3; margin: 0; }
.betriebLage .op p { grid-column: 2; font-size: 0.88rem; line-height: 1.55; margin: 0; }

.op__icon {
  grid-row: 1 / 3;
  position: relative;
  display: block;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(63, 214, 232, 0.1);
  border: 1px solid rgba(63, 214, 232, 0.22);
}
.op__icon i { position: absolute; display: block; background: #7fd0e0; }
/* Standort: Stift auf einer Grundlinie */
.op__icon i:nth-child(1) { left: 11px; top: 9px; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.op__icon i:nth-child(2) { left: 9px; bottom: 9px; width: 16px; height: 2px; border-radius: 1px; opacity: 0.5; }
/* Cloud: zwei Blöcke uebereinander */
.op__icon--cloud i:nth-child(1) { left: 8px; top: 10px; width: 18px; height: 6px; border-radius: 3px; transform: none; }
.op__icon--cloud i:nth-child(2) { left: 12px; top: 20px; width: 14px; height: 6px; border-radius: 3px; opacity: 0.55; }
/* Rollen: drei Stufen */
.op__icon--rollen i { border-radius: 2px; height: 4px; transform: none; }
.op__icon--rollen i:nth-child(1) { left: 9px; top: 10px; width: 18px; }
.op__icon--rollen i:nth-child(2) { left: 9px; top: 17px; width: 12px; opacity: 0.7; }
.op__icon--rollen i:nth-child(3) { left: 9px; top: 24px; width: 7px; opacity: 0.45; }
/* Backup: Kreis mit Punkt */
.op__icon--backup i:nth-child(1) {
  left: 8px; top: 8px; width: 20px; height: 20px;
  border-radius: 50%; background: none;
  border: 2px solid #7fd0e0; transform: none;
}
.op__icon--backup i:nth-child(2) { left: 16px; top: 16px; width: 4px; height: 4px; border-radius: 50%; transform: none; }
/* Update: Pfeil nach oben (Schaft plus Spitze aus zwei Kanten) */
.op__icon--update i:nth-child(1) { left: 17px; top: 9px; width: 2px; height: 18px; border-radius: 1px; transform: none; }
.op__icon--update i:nth-child(2) {
  left: 12px; top: 12px;
  width: 12px; height: 12px;
  background: none;
  border: solid #7fd0e0;
  border-width: 2px 0 0 2px;
  border-radius: 2px 0 0 0;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
}
/* Support: Sprechblase */
.op__icon--support i:nth-child(1) { left: 8px; top: 9px; width: 20px; height: 14px; border-radius: 4px; transform: none; }
.op__icon--support i:nth-child(2) { left: 12px; top: 22px; width: 6px; height: 5px; border-radius: 0 0 3px 3px; transform: none; opacity: 0.7; }
.op__icon {
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.betriebLage .op:hover .op__icon {
  background: rgba(63, 214, 232, 0.18);
  border-color: rgba(63, 214, 232, 0.45);
  transform: rotate(-6deg) scale(1.07);
}

/* --- Das Board --- */
.lage { position: relative; }
.lage__karte {
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.8);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.3rem);
}
.lage__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.lage__titel {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 650; color: #fff; font-size: 1.02rem;
}
.lage__ort {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--dark-text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
}
.lage__puls {
  flex: 0 0 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ok);
  animation: lagePuls 2.4s ease-in-out infinite;
}
.lage__puls--klein { width: 7px; height: 7px; flex-basis: 7px; }
@keyframes lagePuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 201, 139, 0.6); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(46, 201, 139, 0); }
}

.lage__werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.lage__wert {
  display: grid;
  gap: 2px;
  padding: 0.6rem 0.65rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.lage__wert b { font-size: 1.18rem; font-weight: 720; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lage__wert em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dark-text);
}

.lage__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-text);
  opacity: 0.75;
  margin-bottom: 0.45rem;
}
.lage__balken { display: flex; gap: 3px; height: 34px; align-items: flex-end; }
.lage__balken i {
  flex: 1;
  border-radius: 2px;
  background: linear-gradient(180deg, #3fd6e8, #2ec98b);
  height: 40%;
  opacity: 0.85;
}
.lage.ist-da .lage__balken i { animation: lageBalken 2.6s cubic-bezier(0.3, 0.9, 0.3, 1) both; }
.lage__balken i:nth-child(1) { --h: 96%; animation-delay: 0.0s; }
.lage__balken i:nth-child(2) { --h: 100%; animation-delay: 0.03s; }
.lage__balken i:nth-child(3) { --h: 92%; animation-delay: 0.06s; }
.lage__balken i:nth-child(4) { --h: 100%; animation-delay: 0.09s; }
.lage__balken i:nth-child(5) { --h: 98%; animation-delay: 0.12s; }
.lage__balken i:nth-child(6) { --h: 100%; animation-delay: 0.15s; }
.lage__balken i:nth-child(7) { --h: 100%; animation-delay: 0.18s; }
.lage__balken i:nth-child(8) { --h: 88%; animation-delay: 0.21s; }
.lage__balken i:nth-child(9) { --h: 100%; animation-delay: 0.24s; }
.lage__balken i:nth-child(10) { --h: 96%; animation-delay: 0.27s; }
.lage__balken i:nth-child(11) { --h: 100%; animation-delay: 0.3s; }
.lage__balken i:nth-child(12) { --h: 100%; animation-delay: 0.33s; }
.lage__balken i:nth-child(13) { --h: 94%; animation-delay: 0.36s; }
.lage__balken i:nth-child(14) { --h: 100%; animation-delay: 0.39s; }
.lage__balken i:nth-child(15) { --h: 90%; animation-delay: 0.42s; }
.lage__balken i:nth-child(16) { --h: 100%; animation-delay: 0.45s; }
.lage__balken i:nth-child(17) { --h: 100%; animation-delay: 0.48s; }
.lage__balken i:nth-child(18) { --h: 97%; animation-delay: 0.51s; }
.lage__balken i:nth-child(19) { --h: 100%; animation-delay: 0.54s; }
.lage__balken i:nth-child(20) { --h: 100%; animation-delay: 0.57s; }
.lage__balken i:nth-child(21) { --h: 93%; animation-delay: 0.6s; }
.lage__balken i:nth-child(22) { --h: 100%; animation-delay: 0.63s; }
.lage__balken i:nth-child(23) { --h: 100%; animation-delay: 0.66s; }
.lage__balken i:nth-child(24) { --h: 99%; animation-delay: 0.69s; }
.lage__balken i:nth-child(25) { --h: 100%; animation-delay: 0.72s; }
.lage__balken i:nth-child(26) { --h: 86%; animation-delay: 0.75s; }
.lage__balken i:nth-child(27) { --h: 100%; animation-delay: 0.78s; }
.lage__balken i:nth-child(28) { --h: 100%; animation-delay: 0.81s; }
.lage__balken i:nth-child(29) { --h: 95%; animation-delay: 0.84s; }
.lage__balken i:nth-child(30) { --h: 100%; animation-delay: 0.87s; }
@keyframes lageBalken {
  from { height: 8%; opacity: 0.3; }
  to { height: var(--h, 100%); opacity: 0.85; }
}

.lage__zeilen { display: grid; gap: 0.4rem; }
.lage__zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--dark-text);
}
.lage__zeile i {
  position: relative;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(46, 201, 139, 0.18);
}
.lage__zeile i::after {
  content: "";
  position: absolute;
  left: 5px; top: 3px;
  width: 4px; height: 7px;
  border: solid var(--ok);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.lage__zeile em { font-style: normal; font-size: 0.74rem; opacity: 0.7; }

.lage__fuss {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  color: var(--dark-text);
}

@media (max-width: 1100px) {
  .betriebLage { grid-template-columns: 1fr; }
  .betriebLage .ops { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .betriebLage .ops { grid-template-columns: 1fr; }
  .lage__werte { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lage__puls, .lage__balken i { animation: none !important; }
}


/* ============================================================================
   Betriebsboard: es soll laufen, nicht nur dastehen
   ========================================================================== */

/* Ein Lichtstreif zieht ueber das Verfuegbarkeits-Diagramm, als wuerde
   gerade geprueft. */
.lage__balken { position: relative; overflow: hidden; border-radius: 3px; }
.lage__balken::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -30%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(127, 208, 224, 0.35), transparent);
  animation: lageScan 5.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  pointer-events: none;
}
@keyframes lageScan {
  0%, 8% { transform: translateX(0); opacity: 0; }
  14% { opacity: 1; }
  56% { transform: translateX(430%); opacity: 1; }
  64%, 100% { transform: translateX(430%); opacity: 0; }
}

/* Die Balken atmen leicht, jeder in eigenem Takt */
.lage.ist-da .lage__balken i { animation: lageBalken 2.6s cubic-bezier(0.3, 0.9, 0.3, 1) both, lageAtem 4.5s ease-in-out infinite; }
@keyframes lageAtem {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Die Pruefzeilen haken sich nacheinander ab, sobald das Board da ist */
.lage__zeile i::after { transform: rotate(45deg) scale(0); transform-origin: 50% 50%; }
.lage.ist-da .lage__zeile i::after {
  animation: lageHaken 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
.lage.ist-da .lage__zeile:nth-child(1) i::after { animation-delay: 0.55s; }
.lage.ist-da .lage__zeile:nth-child(2) i::after { animation-delay: 0.85s; }
.lage.ist-da .lage__zeile:nth-child(3) i::after { animation-delay: 1.15s; }
@keyframes lageHaken { to { transform: rotate(45deg) scale(1); } }

.lage.ist-da .lage__zeile { animation: lageZeile 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.lage.ist-da .lage__zeile:nth-child(1) { animation-delay: 0.45s; }
.lage.ist-da .lage__zeile:nth-child(2) { animation-delay: 0.75s; }
.lage.ist-da .lage__zeile:nth-child(3) { animation-delay: 1.05s; }
@keyframes lageZeile {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

/* Die Kennzahlen-Kacheln blitzen kurz auf, wenn ein neuer Wert kommt */
.lage__wert { position: relative; overflow: hidden; }
.lage__wert::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: lageBlitz 7s ease-in-out infinite;
  pointer-events: none;
}
.lage__wert:nth-child(2)::after { animation-delay: 0.5s; }
.lage__wert:nth-child(3)::after { animation-delay: 1s; }
@keyframes lageBlitz {
  0%, 82% { transform: translateX(0); opacity: 0; }
  86% { opacity: 1; }
  96%, 100% { transform: translateX(350%); opacity: 0; }
}

/* Der Rand der Karte glimmt sanft, damit das Board "an" wirkt */
.lage__karte { position: relative; }
.lage__karte::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(63, 214, 232, 0.3);
  opacity: 0;
  animation: lageGlimmen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lageGlimmen {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .lage__balken::after, .lage__wert::after, .lage__karte::after { display: none; }
  .lage.ist-da .lage__zeile, .lage.ist-da .lage__zeile i::after,
  .lage.ist-da .lage__balken i { animation: none !important; opacity: 1; transform: none; }
  .lage.ist-da .lage__zeile i::after { transform: rotate(45deg) scale(1); }
}


/* ============================================================================
   Warum ADence: die Zahlen tragen die Sektion, das Team wird lebendig
   ========================================================================== */

/* --- Zahlenband statt fuenf gleicher Kaesten --- */
#unternehmen .stats {
  position: relative;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(1.2rem, 2.4vw, 1.8rem) 0;
  border-block: 1px solid rgba(12, 22, 38, 0.09);
  gap: 0;
}
#unternehmen .stats::before {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.6s cubic-bezier(0.22, 0.9, 0.3, 1) 0.2s;
}
#unternehmen .stats.in::before { transform: scaleX(1); }

#unternehmen .stat {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0.2rem clamp(0.8rem, 2vw, 1.6rem);
  max-width: none;
}
/* Feine Trennlinien zwischen den Werten statt Kartenrahmen */
#unternehmen .stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(12, 22, 38, 0.14), transparent);
}
#unternehmen .stat b {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
#unternehmen .stat span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.45;
}
/* Beim Hochzaehlen glimmt der Wert kurz auf */
#unternehmen .stats.in .stat b { animation: statAn 1.6s ease-out both; }
#unternehmen .stats.in .stat:nth-child(2) b { animation-delay: 0.08s; }
#unternehmen .stats.in .stat:nth-child(3) b { animation-delay: 0.16s; }
#unternehmen .stats.in .stat:nth-child(4) b { animation-delay: 0.24s; }
#unternehmen .stats.in .stat:nth-child(5) b { animation-delay: 0.32s; }
@keyframes statAn {
  0% { opacity: 0.25; transform: translateY(10px); filter: blur(4px); }
  55% { opacity: 1; transform: none; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* --- Team: Bilder werden lebendig --- */
.member { margin: 0; }
.member__bild {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.member__bild img {
  display: block;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
/* Farbschleier in der Marke, der beim Darueberfahren weicht */
.member__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(47, 77, 158, 0.22), rgba(63, 214, 232, 0.1));
  mix-blend-mode: multiply;
  opacity: 0.3;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .member__bild:hover img { transform: scale(1.06); }
  .member__bild:hover::after { opacity: 0.12; }
}

.member figcaption { margin-top: 0.8rem; }
.member figcaption b { display: block; font-size: 1.02rem; }
.member figcaption span {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--teal-ink);
}

/* --- Argumente: gestaffelt und mit Akzent --- */
#unternehmen .ticks--big li {
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover) {
  #unternehmen .ticks--big li:hover { color: var(--ink); transform: translateX(4px); }
}

@media (max-width: 860px) {
  #unternehmen .stat + .stat::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #unternehmen .stats.in .stat b { animation: none !important; }
  #unternehmen .stats::before { transition: none; transform: scaleX(1); }
}


/* ============================================================================
   Warum ADence: Auftritt beim Hereinkommen
   Das Zahlenband zieht seine Linie auf und die Werte klappen einzeln hoch,
   die Argumente laufen von links ein, die Fotos kippen von unten heran.
   ========================================================================== */

/* --- Zahlenband --- */
html.js [data-auftritt="zahlen"] .stat {
  opacity: 0;
  transform: translateY(26px) rotateX(30deg);
  transform-origin: 50% 100%;
  transition:
    opacity 0.6s ease var(--zd, 0s),
    transform 0.85s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zd, 0s);
}
html.js [data-auftritt="zahlen"].ist-auf .stat { opacity: 1; transform: none; }
html.js [data-auftritt="zahlen"] .stat:nth-child(1) { --zd: 0.12s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(2) { --zd: 0.22s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(3) { --zd: 0.32s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(4) { --zd: 0.42s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(5) { --zd: 0.52s; }
/* Die Trennstriche wachsen erst danach heraus */
html.js [data-auftritt="zahlen"] .stat + .stat::before {
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) calc(var(--zd, 0s) + 0.25s);
}
html.js [data-auftritt="zahlen"].ist-auf .stat + .stat::before { transform: scaleY(1); }
/* Der Laufbalken haengt jetzt am Auftritt statt am alten Reveal */
#unternehmen [data-auftritt="zahlen"].ist-auf::before { transform: scaleX(1); }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat b { animation: statAn 1.6s ease-out both; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(2) b { animation-delay: 0.1s; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(3) b { animation-delay: 0.2s; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(4) b { animation-delay: 0.3s; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(5) b { animation-delay: 0.4s; }

/* --- Argumente laufen von links ein --- */
html.js [data-auftritt="args"] li {
  opacity: 0;
  translate: -44px 0;
  transition:
    opacity 0.55s ease var(--ad, 0s),
    translate 0.7s cubic-bezier(0.2, 0.9, 0.28, 1) var(--ad, 0s),
    color 0.4s ease,
    transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1);
}
html.js [data-auftritt="args"].ist-auf li { opacity: 1; translate: 0 0; }
html.js [data-auftritt="args"] li:nth-child(1) { --ad: 0.05s; }
html.js [data-auftritt="args"] li:nth-child(2) { --ad: 0.13s; }
html.js [data-auftritt="args"] li:nth-child(3) { --ad: 0.21s; }
html.js [data-auftritt="args"] li:nth-child(4) { --ad: 0.29s; }
html.js [data-auftritt="args"] li:nth-child(5) { --ad: 0.37s; }
html.js [data-auftritt="args"] li:nth-child(6) { --ad: 0.45s; }
html.js [data-auftritt="args"] li:nth-child(7) { --ad: 0.53s; }
/* Der Haken springt kurz nach der Zeile auf */
html.js [data-auftritt="args"] li::before {
  transform: scale(0.4);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--ad, 0s) + 0.16s),
    opacity 0.35s ease calc(var(--ad, 0s) + 0.16s);
}
html.js [data-auftritt="args"].ist-auf li::before { transform: none; opacity: 1; }

/* --- Team kippt von unten heran --- */
html.js [data-auftritt="team"] { perspective: 1300px; }
html.js [data-auftritt="team"] > .kicker {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.5s ease 0.1s, translate 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) 0.1s;
}
html.js [data-auftritt="team"].ist-auf > .kicker { opacity: 1; translate: 0 0; }
html.js [data-auftritt="team"] .member {
  opacity: 0;
  transform: translateY(56px) rotateX(26deg) scale(0.94);
  transform-origin: 50% 100%;
  transition:
    opacity 0.6s ease var(--td, 0s),
    transform 1s cubic-bezier(0.18, 0.88, 0.26, 1) var(--td, 0s);
}
html.js [data-auftritt="team"].ist-auf .member { opacity: 1; transform: none; }
html.js [data-auftritt="team"] .member:nth-child(1) { --td: 0.2s; }
html.js [data-auftritt="team"] .member:nth-child(2) { --td: 0.34s; }
html.js [data-auftritt="team"] .member:nth-child(3) { --td: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt] .stat,
  html.js [data-auftritt] li,
  html.js [data-auftritt] li::before,
  html.js [data-auftritt] .member,
  html.js [data-auftritt] > .kicker {
    opacity: 1; transform: none; translate: none; transition: none;
  }
}


/* ============================================================================
   Jubilaeum: modernes Siegel und Auftritt beim Hereinkommen
   ========================================================================== */

/* --- Siegel --- */
.jubi__bild { position: relative; margin: 0; }
.siegel {
  position: absolute;
  left: clamp(-1.5rem, -2vw, -1rem);
  bottom: clamp(-1.5rem, -2vw, -1rem);
  width: clamp(6.5rem, 11vw, 9rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* Aussenring mit laufendem Licht */
.siegel__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(63, 214, 232, 0) 0deg,
    rgba(63, 214, 232, 0.9) 90deg,
    rgba(111, 149, 232, 0.7) 180deg,
    rgba(63, 214, 232, 0) 300deg);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64%);
  mask: radial-gradient(circle, transparent 63%, #000 64%);
  animation: siegelRing 9s linear infinite;
}
@keyframes siegelRing { to { transform: rotate(360deg); } }

.siegel__kern {
  position: relative;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(150deg, #16294a, #0d1a30);
  border: 1px solid rgba(127, 208, 224, 0.35);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.siegel__kern b {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 780;
  font-stretch: 106%;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(140deg, #fff 20%, #7fd0e0 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.siegel__kern em {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-text);
}
.siegel__band {
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  transform: translateX(-50%);
  padding: 0.2rem 0.7rem;
  border-radius: 99px;
  background: linear-gradient(120deg, var(--blue), var(--teal));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.8);
}

/* --- Auftritt --- */
html.js [data-auftritt="jubitext"] > * {
  opacity: 0;
  translate: -48px 0;
  transition:
    opacity 0.6s ease var(--jd, 0s),
    translate 0.8s cubic-bezier(0.2, 0.9, 0.28, 1) var(--jd, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf > * { opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubitext"] > *:nth-child(1) { --jd: 0.05s; }
html.js [data-auftritt="jubitext"] > *:nth-child(2) { --jd: 0.14s; }
html.js [data-auftritt="jubitext"] > *:nth-child(3) { --jd: 0.23s; }
html.js [data-auftritt="jubitext"] > *:nth-child(4) { --jd: 0.32s; }
html.js [data-auftritt="jubitext"] > *:nth-child(5) { --jd: 0.41s; }
/* Die drei Zahlen kommen einzeln nach */
html.js [data-auftritt="jubitext"] .jubi__zahlen > div {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 0.5s ease var(--zz, 0s),
    translate 0.65s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zz, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf .jubi__zahlen > div { opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div:nth-child(1) { --zz: 0.4s; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div:nth-child(2) { --zz: 0.5s; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div:nth-child(3) { --zz: 0.6s; }

/* Das Bild kippt von rechts herein */
html.js [data-auftritt="jubibild"] { perspective: 1300px; }
html.js [data-auftritt="jubibild"] .jubi__foto {
  opacity: 0;
  transform: perspective(1300px) rotateY(-16deg) translateX(70px) scale(0.94);
  transform-origin: 0 50%;
  transition:
    opacity 0.7s ease 0.15s,
    transform 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.15s;
}
html.js [data-auftritt="jubibild"].ist-auf .jubi__foto {
  opacity: 1;
  transform: perspective(1300px) rotateY(0deg) translateX(0) scale(1);
}
/* Das Siegel dreht sich zuletzt herein */
html.js [data-auftritt="jubibild"] .siegel {
  opacity: 0;
  transform: rotate(-35deg) scale(0.5);
  transition:
    opacity 0.5s ease 0.65s,
    transform 0.9s cubic-bezier(0.24, 1.35, 0.4, 1) 0.65s;
}
html.js [data-auftritt="jubibild"].ist-auf .siegel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .siegel__ring { animation: none; }
  html.js [data-auftritt="jubitext"] > *,
  html.js [data-auftritt="jubitext"] .jubi__zahlen > div,
  html.js [data-auftritt="jubibild"] .jubi__foto,
  html.js [data-auftritt="jubibild"] .siegel {
    opacity: 1; transform: none; translate: none; transition: none;
  }
}


/* ============================================================================
   Kundenstimmen: Auftritt und lebendige Bewertung
   ========================================================================== */

/* --- Die Note --- */
.note__wert b { font: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.note__sterne i {
  font-style: normal;
  display: inline-block;
  opacity: 0;
  transform: scale(0.4) rotate(-25deg);
  transition:
    opacity 0.3s ease var(--sd, 0s),
    transform 0.55s cubic-bezier(0.24, 1.5, 0.4, 1) var(--sd, 0s);
}
html.js [data-auftritt="note"].ist-auf .note__sterne i { opacity: 1; transform: none; }
.note__sterne i:nth-child(1) { --sd: 0.35s; }
.note__sterne i:nth-child(2) { --sd: 0.45s; }
.note__sterne i:nth-child(3) { --sd: 0.55s; }
.note__sterne i:nth-child(4) { --sd: 0.65s; }
.note__sterne i:nth-child(5) { --sd: 0.75s; }

html.js [data-auftritt="note"] {
  opacity: 0;
  translate: -40px 0;
  transition: opacity 0.6s ease 0.1s, translate 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) 0.1s;
}
html.js [data-auftritt="note"].ist-auf { opacity: 1; translate: 0 0; }

/* --- Das Band faehrt herein und nimmt dann Fahrt auf --- */
html.js [data-auftritt="band"] {
  opacity: 0;
  translate: 90px 0;
  transition: opacity 0.7s ease 0.25s, translate 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.25s;
}
html.js [data-auftritt="band"].ist-auf { opacity: 1; translate: 0 0; }
/* Die Karten kippen beim Hereinkommen leicht mit */
html.js [data-auftritt="band"] .stimmen__band { perspective: 1400px; }
html.js [data-auftritt="band"] .stimme {
  transform: perspective(1400px) rotateY(-12deg) scale(0.95);
  opacity: 0.5;
  transition:
    transform 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.35s,
    opacity 0.8s ease 0.35s,
    border-color 0.35s ease,
    background 0.35s ease,
    translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js [data-auftritt="band"].ist-auf .stimme {
  transform: perspective(1400px) rotateY(0deg) scale(1);
  opacity: 1;
}

/* Ein Lichtschein wandert ueber das Band, damit es nicht nur schiebt */
.stimmen::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -25%;
  width: 25%;
  background: linear-gradient(90deg, transparent, rgba(127, 208, 224, 0.1), transparent);
  animation: stimmenSchein 11s ease-in-out infinite 1.5s;
  pointer-events: none;
  z-index: 2;
}
@keyframes stimmenSchein {
  0%, 6% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translateX(500%); opacity: 1; }
  70%, 100% { transform: translateX(500%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stimmen::after { display: none; }
  html.js [data-auftritt="note"],
  html.js [data-auftritt="band"],
  html.js [data-auftritt="band"] .stimme,
  html.js [data-auftritt="note"] .note__sterne i {
    opacity: 1; transform: none; translate: none; transition: none;
  }
}


/* ============================================================================
   Jubilaeum: Zeitstrahl, zaehlende Werte, anfassbares Foto
   ========================================================================== */

/* --- Zeitstrahl --- */
.zeitstrahl {
  position: relative;
  list-style: none;
  margin: clamp(1.4rem, 3vh, 2.2rem) 0 0;
  padding: 0 0 0 1.4rem;
  display: grid;
  gap: clamp(0.7rem, 1.6vh, 1.1rem);
}
/* Die Linie waechst beim Auftritt von oben nach unten */
.zeitstrahl::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--teal), rgba(47, 77, 158, 0.5));
  transform-origin: 50% 0;
  transform: scaleY(0);
  transition: transform 1.3s cubic-bezier(0.2, 0.9, 0.28, 1) 0.45s;
}
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl::before { transform: scaleY(1); }

.zeitstrahl li {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  font-size: 0.92rem;
}
/* Punkt auf der Linie */
.zeitstrahl li::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 0.42em;
  width: 10px; height: 10px;
  margin-left: 0px;
  border-radius: 50%;
  background: var(--dark);
  border: 2px solid var(--teal);
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.24, 1.5, 0.4, 1) var(--zt, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl li::before { transform: scale(1); }
.zeitstrahl li:nth-child(1) { --zt: 0.6s; }
.zeitstrahl li:nth-child(2) { --zt: 0.75s; }
.zeitstrahl li:nth-child(3) { --zt: 0.9s; }
.zeitstrahl li:nth-child(4) { --zt: 1.05s; }
.zeitstrahl li:nth-child(5) { --zt: 1.2s; }

.zeitstrahl__jahr {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #7fd0e0;
}
.zeitstrahl__was { color: var(--dark-text); line-height: 1.5; }

/* Der letzte Punkt pulst: hier stehen wir heute */
.zeitstrahl li.ist-jetzt::before { background: var(--teal); border-color: var(--teal); }
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl li.ist-jetzt::before {
  animation: lagePuls 2.6s ease-in-out infinite 1.6s;
}
.zeitstrahl li.ist-jetzt .zeitstrahl__jahr { color: #fff; }
.zeitstrahl li.ist-jetzt .zeitstrahl__was { color: #fff; }

/* Die Zeilen laufen mit der Linie mit */
html.js [data-auftritt="jubitext"] .zeitstrahl li > span {
  opacity: 0;
  translate: -16px 0;
  transition:
    opacity 0.45s ease var(--zt, 0s),
    translate 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zt, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl li > span { opacity: 1; translate: 0 0; }

/* --- Foto als Zugang zur Galerie --- */
.jubi__link {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.jubi__link .jubi__foto {
  display: block;
  width: 100%;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.jubi__hinweis {
  position: absolute;
  right: 0.8rem; top: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  background: rgba(10, 20, 38, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  opacity: 0;
  translate: 0 -8px;
  transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.jubi__hinweis i {
  width: 13px; height: 11px;
  border: 1.6px solid currentColor;
  border-radius: 2px;
  position: relative;
}
.jubi__hinweis i::after {
  content: "";
  position: absolute;
  left: 1px; bottom: 1px;
  width: 6px; height: 4px;
  border-radius: 1px;
  background: currentColor;
}
@media (hover: hover) {
  .jubi__link:hover .jubi__foto { transform: scale(1.05); }
  .jubi__link:hover .jubi__hinweis { opacity: 1; translate: 0 0; }
}

@media (max-width: 900px) {
  .zeitstrahl li { grid-template-columns: 3.6rem minmax(0, 1fr); font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .zeitstrahl::before { transform: scaleY(1); transition: none; }
  .zeitstrahl li::before { transform: scale(1); animation: none !important; }
  html.js [data-auftritt="jubitext"] .zeitstrahl li > span { opacity: 1; translate: none; }
}


/* Der Zaehler steckt in einem <i>: das waere sonst kursiv */
.jubi__zahlen b i { font-style: normal; font-variant-numeric: tabular-nums; }

/* Das Siegel sitzt in der Ecke, statt weit ins Bild zu ragen */
.siegel { left: clamp(-2.6rem, -3.4vw, -2rem); bottom: clamp(-2rem, -2.6vw, -1.4rem); }
@media (max-width: 900px) {
  .siegel { width: clamp(5.4rem, 20vw, 7rem); left: -1.2rem; bottom: -1.2rem; }
}


/* ============================================================================
   Jubilaeum: waagerechter Zeitstrahl unter beiden Spalten
   Senkrecht machte die linke Spalte deutlich laenger als das Foto rechts.
   Quer gelegt sind beide Spalten gleich lang und die Jahre haben Platz.
   ========================================================================== */
.zeitquer {
  position: relative;
  list-style: none;
  margin: clamp(2rem, 5vh, 3.4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.6rem);
}
/* Die Linie liegt auf Hoehe der Punkte und waechst von links */
.zeitquer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 2.05rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), rgba(47, 77, 158, 0.45));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(0.2, 0.9, 0.28, 1) 0.15s;
}
html.js [data-auftritt="zeitquer"].ist-auf::before { transform: scaleX(1); }

.zeitquer li { display: grid; gap: 0.5rem; }
.zeitquer__jahr {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #7fd0e0;
}
.zeitquer__punkt {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--dark);
  border: 2px solid var(--teal);
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.24, 1.5, 0.4, 1) var(--qd, 0s);
}
html.js [data-auftritt="zeitquer"].ist-auf .zeitquer__punkt { transform: scale(1); }
.zeitquer__was {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--dark-text);
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.5s ease var(--qd, 0s),
    translate 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) var(--qd, 0s);
}
html.js [data-auftritt="zeitquer"].ist-auf .zeitquer__was { opacity: 1; translate: 0 0; }
.zeitquer li:nth-child(1) { --qd: 0.35s; }
.zeitquer li:nth-child(2) { --qd: 0.5s; }
.zeitquer li:nth-child(3) { --qd: 0.65s; }
.zeitquer li:nth-child(4) { --qd: 0.8s; }
.zeitquer li:nth-child(5) { --qd: 0.95s; }
/* Der letzte Punkt markiert das Heute */
.zeitquer li.ist-jetzt .zeitquer__punkt { background: var(--teal); }
html.js [data-auftritt="zeitquer"].ist-auf li.ist-jetzt .zeitquer__punkt {
  animation: lagePuls 2.6s ease-in-out infinite 1.4s;
}
.zeitquer li.ist-jetzt .zeitquer__jahr,
.zeitquer li.ist-jetzt .zeitquer__was { color: #fff; }

/* Die drei Werte oben duerfen jetzt breiter stehen */
.jubi__zahlen > div > span { text-wrap: balance; }

@media (max-width: 860px) {
  .zeitquer { grid-template-columns: 1fr 1fr; gap: 1.2rem 1rem; }
  .zeitquer::before { display: none; }
  .zeitquer li { padding-left: 1.2rem; position: relative; }
  .zeitquer__punkt { position: absolute; left: 0; top: 0.4rem; }
}
@media (max-width: 520px) {
  .zeitquer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .zeitquer::before { transform: scaleX(1); transition: none; }
  .zeitquer__punkt { transform: scale(1); animation: none !important; }
  .zeitquer__was { opacity: 1; translate: none; }
}


/* Bild fuellt die Hoehe der Textspalte, damit beide Seiten gleich enden */
@media (min-width: 901px) {
  .jubi { align-items: stretch; }
  .jubi__bild { display: grid; }
  .jubi__link { display: block; height: 100%; }
  .jubi__link .jubi__foto { height: 100%; object-fit: cover; }
}
/* Die dritte Angabe soll nicht mehr umbrechen */
.jubi__zahlen > div > span { white-space: nowrap; }
@media (max-width: 900px) { .jubi__zahlen > div > span { white-space: normal; } }


/* ============================================================================
   Jubilaeum: angedeutete Ecken um das Foto
   Kein geschlossener Rahmen, sondern zwei Winkel diagonal gegenueber:
   oben links und unten rechts. Wirkt technischer und laesst das Bild frei.
   ========================================================================== */
.jubi__bild { position: relative; }
.jubi__ecke {
  position: absolute;
  width: clamp(3.4rem, 6vw, 5.2rem);
  height: clamp(3.4rem, 6vw, 5.2rem);
  pointer-events: none;
  z-index: 2;
}
/* Der Winkel selbst: zwei Kanten plus ein feiner Leuchtsaum */
.jubi__ecke::before {
  content: "";
  position: absolute;
  inset: 0;
  border-style: solid;
  border-color: var(--teal);
  border-width: 0;
  filter: drop-shadow(0 0 6px rgba(63, 214, 232, 0.55));
}
/* Kleiner Punkt am Scheitel, wie eine Markierung */
.jubi__ecke::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(63, 214, 232, 0.9);
}

.jubi__ecke--ol { left: -0.7rem; top: -0.7rem; }
.jubi__ecke--ol::before {
  border-top-width: 2px;
  border-left-width: 2px;
  border-radius: 14px 0 0 0;
}
.jubi__ecke--ol::after { left: -3px; top: -3px; }

.jubi__ecke--ur { right: -0.7rem; bottom: -0.7rem; }
.jubi__ecke--ur::before {
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-radius: 0 0 14px 0;
}
.jubi__ecke--ur::after { right: -3px; bottom: -3px; }

/* Beim Auftritt zeichnen sich die Winkel aus ihrem Scheitel heraus */
html.js [data-auftritt="jubibild"] .jubi__ecke {
  opacity: 0;
  transform: scale(0.55);
  transition:
    opacity 0.45s ease var(--ed2, 0s),
    transform 0.8s cubic-bezier(0.2, 1.2, 0.35, 1) var(--ed2, 0s);
}
.jubi__ecke--ol { transform-origin: 0 0; --ed2: 0.45s; }
.jubi__ecke--ur { transform-origin: 100% 100%; --ed2: 0.6s; }
html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke { opacity: 1; transform: none; }

/* Der Punkt am Scheitel pulst leise weiter */
html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke::after {
  animation: eckePuls 3.2s ease-in-out infinite;
}
html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke--ur::after { animation-delay: 1.6s; }
@keyframes eckePuls {
  0%, 100% { box-shadow: 0 0 10px rgba(63, 214, 232, 0.9); opacity: 0.85; }
  50% { box-shadow: 0 0 18px rgba(63, 214, 232, 1); opacity: 1; }
}

@media (max-width: 900px) {
  .jubi__ecke { width: 2.8rem; height: 2.8rem; }
  .jubi__ecke--ol { left: -0.4rem; top: -0.4rem; }
  .jubi__ecke--ur { right: -0.4rem; bottom: -0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt="jubibild"] .jubi__ecke { opacity: 1; transform: none; transition: none; }
  html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke::after { animation: none; }
}


/* ============================================================================
   Jubilaeum: mehr Luft, weniger streng
   Die Bloecke standen dicht an dicht. Jetzt bekommt jeder Abschnitt einen
   eigenen Atemraum, und die Sektion selbst mehr Rand nach oben und unten.
   ========================================================================== */
.jubi-sektion { padding-block: clamp(4.5rem, 9vw, 8rem); }

.jubi { gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.jubi__text { gap: 1.4rem; }
.jubi__text h2 { margin-bottom: 0.2rem; line-height: 1.14; }
.jubi__lead { margin: 0; }

/* Die drei Werte bekommen Abstand nach oben und unten */
.jubi__zahlen {
  margin-top: clamp(0.8rem, 2vh, 1.4rem);
  padding-top: clamp(1.2rem, 2.6vh, 1.8rem);
  gap: clamp(1.4rem, 3vw, 2.6rem) !important;
}
.jubi__zahlen span { margin-top: 0.4rem !important; line-height: 1.5; }
.jubi__knoepfe { margin-top: clamp(0.6rem, 1.6vh, 1.2rem); gap: 0.9rem; }

/* Der Zeitstrahl rueckt deutlich ab und atmet in sich */
.zeitquer {
  margin-top: clamp(3rem, 6vh, 4.6rem);
  padding-top: clamp(1.4rem, 3vh, 2.2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
}
.zeitquer::before { top: calc(2.05rem + clamp(1.4rem, 3vh, 2.2rem)); }
.zeitquer li { gap: 0.7rem; }
.zeitquer__was { line-height: 1.6; }

/* Die Ecken duerfen weiter vom Bild abstehen */
.jubi__ecke--ol { left: -1.1rem; top: -1.1rem; }
.jubi__ecke--ur { right: -1.1rem; bottom: -1.1rem; }

@media (max-width: 900px) {
  .jubi__ecke--ol { left: -0.6rem; top: -0.6rem; }
  .jubi__ecke--ur { right: -0.6rem; bottom: -0.6rem; }
  .zeitquer { margin-top: 2.4rem; }
}


/* Alle Zeitstrahl-Eintraege bündig: Jahr, Punkt und Text stehen auf einer
   Linie, auch wenn ein Text zweizeilig laeuft. */
.zeitquer li {
  grid-template-rows: auto auto auto;
  align-content: start;
}


/* ============================================================================
   Jubilaeum: das Foto nimmt den Ton der Sektion auf
   Ein sehr leichter Schleier in der Hintergrundfarbe holt das Bild in die
   dunkelblaue Umgebung, ohne die Gesichter zu verfaerben.
   ========================================================================== */
.jubi__link { position: relative; }
/* multiply dunkelt nur ab und faerbt nicht. 'color' uebernimmt den Farbton
   und laesst die Helligkeit stehen: genau das, was das Bild in den Ton der
   Sektion holt, ohne die Gesichter zu verlieren. */
.jubi__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(165deg, #1b3a6b, #16305c);
  mix-blend-mode: color;
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 1;
}
/* Zweite, sehr dezente Ebene: nimmt dem Bild die Helligkeitsspitzen */
.jubi__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(165deg, rgba(13, 26, 48, 0.1), rgba(20, 36, 64, 0.06));
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 1;
}
/* Ein Hauch Blaustich und etwas weniger Sättigung, damit das Bild nicht
   aus der Sektion herausspringt */
.jubi__link .jubi__foto { filter: saturate(0.97); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
/* Beim Darueberfahren tritt das Foto in seiner vollen Farbe hervor */
@media (hover: hover) {
  .jubi__link:hover::after { opacity: 0; }
  .jubi__link:hover::before { opacity: 0.3; }
  .jubi__link:hover .jubi__foto { filter: saturate(1) contrast(1); }
}
/* Der Hinweis liegt ueber dem Schleier */
.jubi__hinweis { z-index: 2; }


/* ============================================================================
   Jubilaeum: neu gegliedert
   Vorher trug die linke Spalte Kopf, Text, drei Werte und zwei Knoepfe.
   Jetzt: oben Text und Bild nebeneinander, darunter die Werte als eigenes
   Band, ganz unten der Zeitstrahl. Jeder Abschnitt hat seinen eigenen Raum.
   ========================================================================== */
.jubi { align-items: center; gap: clamp(2.6rem, 6vw, 5rem); }
.jubi__text { gap: 1.6rem; }

/* --- Werteband --- */
.jubi__band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3.5rem);
  margin-top: clamp(2.6rem, 6vh, 4.2rem);
  padding: clamp(1.6rem, 3.4vh, 2.4rem) 0;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}
.jubi__band > div { display: grid; gap: 0.5rem; }
.jubi__band b {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 760;
  font-stretch: 106%;
  letter-spacing: -0.025em;
  line-height: 1.05;
  background: var(--grad-hell, linear-gradient(120deg, #7fd0e0, #a8c4ff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.jubi__band b i { font-style: normal; font-variant-numeric: tabular-nums; }
.jubi__band span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-text);
  line-height: 1.5;
}

/* Auftritt: die drei Werte klappen nacheinander hoch */
html.js [data-auftritt="jubiband"] > div {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s ease var(--bd, 0s),
    transform 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--bd, 0s);
}
html.js [data-auftritt="jubiband"].ist-auf > div { opacity: 1; transform: none; }
html.js [data-auftritt="jubiband"] > div:nth-child(1) { --bd: 0.05s; }
html.js [data-auftritt="jubiband"] > div:nth-child(2) { --bd: 0.15s; }
html.js [data-auftritt="jubiband"] > div:nth-child(3) { --bd: 0.25s; }

/* Der Zeitstrahl braucht die Trennlinie nicht mehr, das Band hat schon eine */
.zeitquer { margin-top: clamp(2.4rem, 5vh, 3.6rem); padding-top: 0; border-top: 0; }
.zeitquer::before { top: 2.05rem; }

@media (max-width: 860px) {
  .jubi__band { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .jubi__band > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .jubi__band { grid-template-columns: 1fr; }
  .jubi__band > div:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt="jubiband"] > div { opacity: 1; transform: none; transition: none; }
}


/* ============================================================================
   Jubilaeum, neuer Aufbau
   Kopf zweispaltig, darunter das Foto ueber die volle Breite mit den Werten
   darauf, ganz unten der Zeitstrahl als Karten. Die Punkte sitzen jetzt
   exakt auf der Linie, weil Linie und Punkt in derselben Rasterzeile liegen.
   ========================================================================== */

/* --- Kopf --- */
.jubiKopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.jubiKopf__links { display: grid; gap: 1.1rem; }
.jubiKopf__links h2 {
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
}
.jubiKopf__rechts { display: grid; gap: 1.8rem; }
.jubiKopf__rechts .jubi__lead { margin: 0; max-width: none; }

/* --- Buehne: das Foto traegt die Sektion --- */
.jubiBuehne {
  position: relative;
  margin: clamp(2.6rem, 6vh, 4.4rem) 0 0;
}
.jubiBuehne .jubi__link {
  display: block;
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  isolation: isolate;
}
.jubiBuehne .jubi__foto {
  display: block;
  width: 100%;
  height: clamp(18rem, 34vw, 30rem);
  object-fit: cover;
  object-position: 50% 42%;
}
/* Nach unten ausblenden, damit die Werte darauf lesbar sind */
.jubiBuehne .jubi__link::before {
  background: linear-gradient(180deg, rgba(13, 26, 48, 0.1) 40%, rgba(10, 20, 38, 0.88) 100%);
  z-index: 2;
}
.jubiBuehne .jubi__link::after { z-index: 1; }

/* Die Werte liegen unten im Bild */
.jubiBuehne__werte {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1.4rem, 3vw, 2.6rem);
  pointer-events: none;
}
.jubiBuehne__werte span {
  display: grid;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.jubiBuehne__werte b {
  font-family: var(--font-sans, inherit);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 760;
  font-stretch: 106%;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-transform: none;
  color: #fff;
}
.jubiBuehne__werte b i { font-style: normal; font-variant-numeric: tabular-nums; }

/* Das Siegel sitzt jetzt oben rechts auf der Buehne */
.jubiBuehne .siegel {
  left: auto;
  right: clamp(1.2rem, 3vw, 2.4rem);
  top: clamp(1.2rem, 3vw, 2.2rem);
  bottom: auto;
  z-index: 4;
  width: clamp(5.6rem, 9vw, 7.6rem);
}

/* --- Zeitstrahl als Karten --- */
.zeitkarten {
  list-style: none;
  margin: clamp(2.6rem, 6vh, 4.2rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
.zeitkarten li {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1rem, 2vw, 1.3rem);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.5s ease, background-color 0.5s ease, transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1);
}
/* Die Linie verbindet die Karten oben, der Punkt sitzt genau darauf */
.zeitkarten li::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, rgba(63, 214, 232, 0.5), rgba(47, 77, 158, 0.3));
}
.zeitkarten li:first-child::before { border-radius: 2px 0 0 0; }
.zeitkarten li:last-child::before { border-radius: 0 2px 0 0; }
.zeitkarten li::after {
  content: "";
  position: absolute;
  left: clamp(1rem, 2vw, 1.3rem);
  top: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dark);
  border: 2px solid var(--teal);
}
.zeitkarten li.ist-jetzt::after { background: var(--teal); }
.zeitkarten li.ist-jetzt {
  background: rgba(63, 214, 232, 0.07);
  border-color: rgba(63, 214, 232, 0.3);
}

.zeitkarte__jahr {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: #7fd0e0;
}
.zeitkarte__text { font-size: 0.92rem; line-height: 1.55; color: var(--dark-text); }
.zeitkarten li.ist-jetzt .zeitkarte__jahr,
.zeitkarten li.ist-jetzt .zeitkarte__text { color: #fff; }

@media (hover: hover) {
  .zeitkarten li:hover {
    transform: translateY(-4px);
    border-color: rgba(63, 214, 232, 0.4);
    background: rgba(255, 255, 255, 0.07);
  }
}

/* --- Auftritte --- */
html.js [data-auftritt="jubikopf"] > * {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.65s ease var(--kd, 0s), translate 0.8s cubic-bezier(0.2, 0.9, 0.28, 1) var(--kd, 0s);
}
html.js [data-auftritt="jubikopf"].ist-auf > * { opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubikopf"] > *:nth-child(1) { --kd: 0.05s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(2) { --kd: 0.18s; }

html.js [data-auftritt="jubibuehne"] .jubi__link {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.9s ease 0.1s, transform 1.3s cubic-bezier(0.18, 0.88, 0.26, 1) 0.1s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__link { opacity: 1; transform: none; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.6s ease var(--wd, 0s), translate 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--wd, 0s);
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubiBuehne__werte span { opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span:nth-child(1) { --wd: 0.45s; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span:nth-child(2) { --wd: 0.57s; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span:nth-child(3) { --wd: 0.69s; }
html.js [data-auftritt="jubibuehne"] .siegel {
  opacity: 0;
  transform: rotate(-30deg) scale(0.5);
  transition: opacity 0.5s ease 0.7s, transform 0.9s cubic-bezier(0.24, 1.35, 0.4, 1) 0.7s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .siegel { opacity: 1; transform: none; }
html.js [data-auftritt="jubibuehne"] .jubi__ecke {
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.45s ease var(--ed2, 0s), transform 0.8s cubic-bezier(0.2, 1.2, 0.35, 1) var(--ed2, 0s);
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__ecke { opacity: 1; transform: none; }
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__ecke::after { animation: eckePuls 3.2s ease-in-out infinite; }

html.js [data-auftritt="zeitkarten"] li {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease var(--zk, 0s), transform 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zk, 0s);
}
html.js [data-auftritt="zeitkarten"].ist-auf li { opacity: 1; transform: none; }
.zeitkarten li:nth-child(1) { --zk: 0.05s; }
.zeitkarten li:nth-child(2) { --zk: 0.14s; }
.zeitkarten li:nth-child(3) { --zk: 0.23s; }
.zeitkarten li:nth-child(4) { --zk: 0.32s; }
.zeitkarten li:nth-child(5) { --zk: 0.41s; }
html.js [data-auftritt="zeitkarten"].ist-auf li.ist-jetzt::after {
  animation: lagePuls 2.6s ease-in-out infinite 1s;
}

@media (max-width: 900px) {
  .jubiKopf { grid-template-columns: 1fr; gap: 1.8rem; }
  .jubiKopf__rechts { gap: 1.4rem; }
  .zeitkarten { grid-template-columns: 1fr 1fr; }
  .jubiBuehne__werte { grid-template-columns: 1fr; gap: 0.6rem; }
  .jubiBuehne .jubi__foto { height: clamp(16rem, 60vw, 22rem); }
  .jubiBuehne .siegel { width: 5rem; right: 1rem; top: 1rem; }
}
@media (max-width: 560px) {
  .zeitkarten { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt="jubikopf"] > *,
  html.js [data-auftritt="jubibuehne"] .jubi__link,
  html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span,
  html.js [data-auftritt="jubibuehne"] .siegel,
  html.js [data-auftritt="jubibuehne"] .jubi__ecke,
  html.js [data-auftritt="zeitkarten"] li {
    opacity: 1; transform: none; translate: none; transition: none;
  }
}

/* ============================================================================
   Jubilaeum: Fassung mit kleinem Bild
   Oben Text und Foto nebeneinander (Foto in der urspruenglichen Groesse),
   darunter die Werte als ruhige Zeile, ganz unten die Zeitkarten.
   ========================================================================== */
.jubiOben {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.2rem, 5.5vw, 4.5rem);
  align-items: center;
}
.jubiOben__text { display: grid; gap: 1.5rem; justify-items: start; }
.jubiOben__text h2 {
  margin: 0;
  font-size: clamp(2rem, 3.7vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
}
.jubiOben__text .jubi__lead { margin: 0; max-width: 44ch; }
.jubiOben__text .jubi__knoepfe { margin-top: 0.4rem; gap: 0.9rem; }

/* Das Bild bleibt klein und behaelt Siegel und Ecken */
.jubiBild { position: relative; margin: 0; }
.jubiBild .jubi__link {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.jubiBild .jubi__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.jubiBild .siegel {
  left: clamp(-2.4rem, -3vw, -1.6rem);
  bottom: clamp(-1.8rem, -2.4vw, -1.2rem);
  right: auto; top: auto;
  width: clamp(6rem, 10vw, 8rem);
  z-index: 4;
}

/* --- Werte als Zeile --- */
.jubiWerte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 4vw, 3.5rem);
  margin-top: clamp(2.8rem, 6vh, 4.4rem);
  padding: clamp(1.4rem, 3vh, 2.2rem) 0;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}
.jubiWerte span {
  display: grid;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-text);
  line-height: 1.5;
}
.jubiWerte b {
  font-family: var(--font-sans, inherit);
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 760;
  font-stretch: 106%;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-transform: none;
  background: linear-gradient(120deg, #ffffff, #7fd0e0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.jubiWerte b i { font-style: normal; font-variant-numeric: tabular-nums; }

.zeitkarten { margin-top: clamp(2.4rem, 5vh, 3.6rem); }

/* --- Auftritte --- */
html.js [data-auftritt="jubiwerte"] > span {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease var(--wd2, 0s),
    transform 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--wd2, 0s);
}
html.js [data-auftritt="jubiwerte"].ist-auf > span { opacity: 1; transform: none; }
html.js [data-auftritt="jubiwerte"] > span:nth-child(1) { --wd2: 0.05s; }
html.js [data-auftritt="jubiwerte"] > span:nth-child(2) { --wd2: 0.15s; }
html.js [data-auftritt="jubiwerte"] > span:nth-child(3) { --wd2: 0.25s; }

/* Das Bild kippt von rechts herein */
html.js [data-auftritt="jubibuehne"] .jubi__link {
  opacity: 0;
  transform: perspective(1300px) rotateY(-14deg) translateX(60px) scale(0.95);
  transform-origin: 0 50%;
  transition: opacity 0.7s ease 0.15s, transform 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.15s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__link {
  opacity: 1;
  transform: perspective(1300px) rotateY(0deg) translateX(0) scale(1);
}

@media (max-width: 900px) {
  .jubiOben { grid-template-columns: 1fr; gap: 2.2rem; }
  .jubiWerte { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .jubiWerte > span:last-child { grid-column: 1 / -1; }
  .jubiBild .siegel { left: -1rem; bottom: -1rem; width: 5.4rem; }
}
@media (max-width: 520px) {
  .jubiWerte { grid-template-columns: 1fr; }
  .jubiWerte > span:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt="jubiwerte"] > span,
  html.js [data-auftritt="jubibuehne"] .jubi__link {
    opacity: 1; transform: none; transition: none;
  }
}

/* Einspaltig darf das Foto nicht die halbe Seite fuellen */
@media (max-width: 900px) {
  .jubiBild { max-width: 32rem; }
  .jubiBild .jubi__foto { aspect-ratio: 16 / 10; }
}

/* Ohne die Werte-Zeile bekommen die Zeitkarten eine eigene Trennlinie und
   rueckt weiter vom Bild ab. */
.zeitkarten {
  margin-top: clamp(3rem, 6.5vh, 4.8rem);
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   Jubilaeum: kraeftigerer Auftritt
   Die Teile kommen von weiter aussen, aus der Unschaerfe und mit Tiefe,
   statt nur ein paar Pixel zu wandern.
   ========================================================================== */

/* --- Text: Zeilen einzeln von links, gestaffelt --- */
html.js [data-auftritt="jubikopf"] > * {
  opacity: 0;
  translate: -70px 0;
  filter: blur(5px);
  transition:
    opacity 0.7s ease var(--kd, 0s),
    translate 0.95s cubic-bezier(0.16, 0.86, 0.26, 1) var(--kd, 0s),
    filter 0.7s ease var(--kd, 0s);
}
html.js [data-auftritt="jubikopf"].ist-auf > * {
  opacity: 1; translate: 0 0; filter: blur(0);
}
html.js [data-auftritt="jubikopf"] > *:nth-child(1) { --kd: 0.05s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(2) { --kd: 0.16s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(3) { --kd: 0.27s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(4) { --kd: 0.38s; }

/* --- Bild: kommt weiter von rechts, gedreht und unscharf --- */
html.js [data-auftritt="jubibuehne"] { perspective: 1400px; }
html.js [data-auftritt="jubibuehne"] .jubi__link {
  opacity: 0;
  transform: perspective(1400px) rotateY(-26deg) rotateX(6deg) translateX(150px) scale(0.88);
  transform-origin: 100% 50%;
  filter: blur(8px);
  transition:
    opacity 0.85s ease 0.2s,
    transform 1.35s cubic-bezier(0.16, 0.88, 0.24, 1) 0.2s,
    filter 0.8s ease 0.2s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__link {
  opacity: 1;
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateX(0) scale(1);
  filter: blur(0);
}
/* Das Siegel dreht sich kraeftiger herein */
html.js [data-auftritt="jubibuehne"] .siegel {
  opacity: 0;
  transform: rotate(-140deg) scale(0.3);
  transition:
    opacity 0.5s ease 0.75s,
    transform 1.1s cubic-bezier(0.22, 1.4, 0.38, 1) 0.75s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .siegel { opacity: 1; transform: none; }

/* --- Zeitkarten: kippen aus der Tiefe hoch, Linie zieht mit --- */
html.js [data-auftritt="zeitkarten"] { perspective: 1500px; }
html.js [data-auftritt="zeitkarten"] li {
  opacity: 0;
  transform: perspective(1500px) translateY(60px) rotateX(32deg) scale(0.92);
  transform-origin: 50% 0;
  filter: blur(4px);
  transition:
    opacity 0.6s ease var(--zk, 0s),
    transform 1s cubic-bezier(0.16, 0.9, 0.26, 1) var(--zk, 0s),
    filter 0.6s ease var(--zk, 0s),
    border-color 0.5s ease,
    background-color 0.5s ease;
}
html.js [data-auftritt="zeitkarten"].ist-auf li {
  opacity: 1;
  transform: perspective(1500px) translateY(0) rotateX(0deg) scale(1);
  filter: blur(0);
}
.zeitkarten li:nth-child(1) { --zk: 0.1s; }
.zeitkarten li:nth-child(2) { --zk: 0.22s; }
.zeitkarten li:nth-child(3) { --zk: 0.34s; }
.zeitkarten li:nth-child(4) { --zk: 0.46s; }
.zeitkarten li:nth-child(5) { --zk: 0.58s; }
/* Die Verbindungslinie oben waechst von links nach rechts mit */
html.js [data-auftritt="zeitkarten"] li::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.28, 1) calc(var(--zk, 0s) + 0.1s);
}
html.js [data-auftritt="zeitkarten"].ist-auf li::before { transform: scaleX(1); }
/* Der Punkt springt auf, sobald seine Karte steht */
html.js [data-auftritt="zeitkarten"] li::after {
  transform: scale(0);
  transition: transform 0.55s cubic-bezier(0.24, 1.6, 0.4, 1) calc(var(--zk, 0s) + 0.3s);
}
html.js [data-auftritt="zeitkarten"].ist-auf li::after { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt="jubikopf"] > *,
  html.js [data-auftritt="jubibuehne"] .jubi__link,
  html.js [data-auftritt="jubibuehne"] .siegel,
  html.js [data-auftritt="zeitkarten"] li,
  html.js [data-auftritt="zeitkarten"] li::before,
  html.js [data-auftritt="zeitkarten"] li::after {
    opacity: 1; transform: none; translate: none; filter: none; transition: none;
  }
}

/* ============================================================================
   Wissen: Aufmacher plus zwei Begleiter, jeder mit eigenem Zeichen
   Drei gleich grosse Kaesten geben keine Ordnung. Jetzt traegt der neueste
   Beitrag die Flaeche, die beiden anderen stehen daneben.
   ========================================================================== */
#wissen .beitraege {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
#wissen .beitrag--gross { grid-row: 1 / 3; }

#wissen .beitrag {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
  border: 1px solid var(--line);
  transition:
    transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1),
    box-shadow 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
    border-color 0.5s ease;
}
@media (hover: hover) {
  #wissen .beitrag:hover {
    transform: translateY(-3px);
    border-color: rgba(63, 214, 232, 0.4);
    box-shadow: 0 30px 60px -38px rgba(12, 22, 38, 0.55);
  }
}
#wissen .beitrag__inhalt {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
}
#wissen .beitrag--gross .beitrag__inhalt { gap: 0.9rem; padding: clamp(1.5rem, 2.6vw, 2.1rem); }
#wissen .beitrag__kopf { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
#wissen .beitrag__meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.8;
}
#wissen .beitrag--gross .beitrag__titel { font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.22; }
#wissen .beitrag--gross .beitrag__text { font-size: 1rem; line-height: 1.65; }
#wissen .beitrag__mehr { margin-top: 0.3rem; }

/* --- Kopfgrafik je Beitrag --- */
#wissen .beitrag__visual {
  position: relative;
  display: block;
  height: clamp(6rem, 11vw, 8.5rem);
  background: linear-gradient(150deg, rgba(47, 77, 158, 0.1), rgba(63, 214, 232, 0.08));
  border-bottom: 1px solid rgba(12, 22, 38, 0.07);
  overflow: hidden;
}
#wissen .beitrag--gross .beitrag__visual { height: clamp(9rem, 17vw, 14rem); }
.bvis { position: absolute; inset: 0; }
.bvis i { position: absolute; display: block; }

/* Recht: Paragraphenzeilen und ein Siegel */
.bvis--recht .bvis__balken {
  left: 12%;
  height: 7px;
  border-radius: 4px;
  background: rgba(47, 77, 158, 0.26);
}
.bvis--recht .bvis__balken:nth-child(1) { top: 30%; width: 44%; }
.bvis--recht .bvis__balken:nth-child(2) { top: 48%; width: 32%; }
.bvis--recht .bvis__balken:nth-child(3) { top: 66%; width: 38%; }
.bvis--recht .bvis__siegel {
  right: 13%; top: 50%;
  width: clamp(2.6rem, 5vw, 4rem);
  aspect-ratio: 1;
  margin-top: calc(clamp(2.6rem, 5vw, 4rem) / -2);
  border-radius: 50%;
  border: 2px dashed rgba(47, 163, 186, 0.5);
  background: radial-gradient(circle, rgba(63, 214, 232, 0.18), transparent 70%);
  animation: bvisDreh 22s linear infinite;
}
@keyframes bvisDreh { to { transform: rotate(360deg); } }

/* Chat: zwei Blasen und ein Schloss */
.bvis--chat .bvis__blase { border-radius: 10px; background: rgba(47, 77, 158, 0.2); }
.bvis--chat .bvis__blase:nth-child(1) { left: 12%; top: 26%; width: 42%; height: 22%; border-bottom-left-radius: 3px; }
.bvis--chat .bvis__blase:nth-child(2) { right: 12%; top: 56%; width: 34%; height: 20%; border-bottom-right-radius: 3px; background: linear-gradient(120deg, var(--blue), var(--teal)); opacity: 0.55; }
.bvis--chat .bvis__schloss {
  left: 50%; top: 50%;
  width: 16px; height: 13px;
  margin: -6px 0 0 -8px;
  border-radius: 3px;
  background: var(--teal-ink);
  opacity: 0.75;
}
.bvis--chat .bvis__schloss::before {
  content: "";
  position: absolute;
  left: 50%; top: -7px;
  width: 10px; height: 9px;
  margin-left: -5px;
  border: 2px solid var(--teal-ink);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

/* Suche: Trefferliste mit Lupe */
.bvis--suche .bvis__treffer {
  left: 12%;
  height: 8px;
  border-radius: 4px;
  background: rgba(47, 77, 158, 0.22);
}
.bvis--suche .bvis__treffer:nth-child(1) { top: 28%; width: 52%; background: linear-gradient(90deg, var(--blue), var(--teal)); opacity: 0.6; }
.bvis--suche .bvis__treffer:nth-child(2) { top: 50%; width: 38%; }
.bvis--suche .bvis__treffer:nth-child(3) { top: 72%; width: 44%; }
.bvis--suche .bvis__lupe {
  right: 15%; top: 50%;
  width: 26px; height: 26px;
  margin-top: -13px;
  border: 2.5px solid var(--teal-ink);
  border-radius: 50%;
  opacity: 0.7;
}
.bvis--suche .bvis__lupe::after {
  content: "";
  position: absolute;
  right: -7px; bottom: -4px;
  width: 11px; height: 2.5px;
  border-radius: 2px;
  background: var(--teal-ink);
  transform: rotate(45deg);
}

/* Die Grafik lebt beim Darueberfahren */
#wissen .bvis i { transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1), opacity 0.5s ease; }
@media (hover: hover) {
  #wissen .beitrag:hover .bvis--recht .bvis__balken:nth-child(1) { transform: translateX(8px); }
  #wissen .beitrag:hover .bvis--recht .bvis__balken:nth-child(2) { transform: translateX(14px); }
  #wissen .beitrag:hover .bvis--recht .bvis__balken:nth-child(3) { transform: translateX(6px); }
  #wissen .beitrag:hover .bvis--chat .bvis__blase:nth-child(1) { transform: translateY(-4px); }
  #wissen .beitrag:hover .bvis--chat .bvis__blase:nth-child(2) { transform: translateY(4px); }
  #wissen .beitrag:hover .bvis--suche .bvis__lupe { transform: scale(1.12) rotate(-8deg); }
  #wissen .beitrag:hover .beitrag__visual { background: linear-gradient(150deg, rgba(47, 77, 158, 0.16), rgba(63, 214, 232, 0.13)); }
}

/* --- Auftritt --- */
html.js [data-auftritt="beitraege"] .beitrag {
  opacity: 0;
  transform: perspective(1400px) translateY(46px) rotateX(20deg) scale(0.95);
  transform-origin: 50% 0;
  filter: blur(4px);
  transition:
    opacity 0.6s ease var(--bg2, 0s),
    transform 0.95s cubic-bezier(0.16, 0.9, 0.26, 1) var(--bg2, 0s),
    filter 0.6s ease var(--bg2, 0s),
    border-color 0.5s ease,
    box-shadow 0.6s ease;
}
html.js [data-auftritt="beitraege"].ist-auf .beitrag {
  opacity: 1;
  transform: perspective(1400px) translateY(0) rotateX(0) scale(1);
  filter: blur(0);
}
html.js [data-auftritt="beitraege"] .beitrag:nth-child(1) { --bg2: 0.05s; }
html.js [data-auftritt="beitraege"] .beitrag:nth-child(2) { --bg2: 0.2s; }
html.js [data-auftritt="beitraege"] .beitrag:nth-child(3) { --bg2: 0.35s; }

@media (max-width: 900px) {
  #wissen .beitraege { grid-template-columns: 1fr; grid-template-rows: none; }
  #wissen .beitrag--gross { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bvis--recht .bvis__siegel { animation: none; }
  html.js [data-auftritt="beitraege"] .beitrag {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}

/* Die grosse Karte fuellt ihre Hoehe: das Bild nimmt den Rest ein, der Text
   sitzt unten. Sonst klafft unter dem Aufmacher eine leere Flaeche. */
@media (min-width: 901px) {
  #wissen .beitrag--gross { grid-template-rows: minmax(0, 1fr) auto; }
  #wissen .beitrag--gross .beitrag__visual { height: auto; min-height: clamp(9rem, 17vw, 14rem); }
  #wissen .beitrag--gross .beitrag__inhalt { align-content: end; }
}

/* Die Zeichnung der grossen Karte soll als Gruppe in der Mitte stehen, statt
   sich ueber die ganze Hoehe zu verteilen. */
@media (min-width: 901px) {
  #wissen .beitrag--gross .bvis--recht .bvis__balken { left: 14%; }
  #wissen .beitrag--gross .bvis--recht .bvis__balken:nth-child(1) { top: calc(50% - 26px); width: 38%; }
  #wissen .beitrag--gross .bvis--recht .bvis__balken:nth-child(2) { top: calc(50% - 4px); width: 27%; }
  #wissen .beitrag--gross .bvis--recht .bvis__balken:nth-child(3) { top: calc(50% + 18px); width: 33%; }
  #wissen .beitrag--gross .bvis--recht .bvis__siegel { right: 20%; }
}

/* ============================================================================
   Wissen: Beitraege als Zeilen statt Kacheln
   Breite Zeilen mit Trennlinien lesen sich schneller als drei Kaesten und
   nehmen viel weniger Hoehe. Zeichen links, Inhalt mittig, Lesezeit rechts.
   ========================================================================== */
.posts {
  list-style: none;
  margin: clamp(1.6rem, 3.5vw, 2.6rem) 0 0;
  padding: 0;
  border-top: 1px solid rgba(12, 22, 38, 0.1);
}
.posts li { border-bottom: 1px solid rgba(12, 22, 38, 0.1); }

.post {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(0.6rem, 1.4vw, 1.1rem);
  text-decoration: none;
  transition: padding-left 0.5s cubic-bezier(0.4, 0.05, 0.25, 1), background-color 0.45s ease;
}
/* Farbiger Anriss, der beim Darueberfahren einlaeuft */
.post::before {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  border-radius: 3px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.4, 1);
}

/* --- Zeichen links --- */
.post__zeichen {
  position: relative;
  display: block;
  width: clamp(5.5rem, 11vw, 8.5rem);
  height: clamp(3.6rem, 7vw, 5.4rem);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(47, 77, 158, 0.09), rgba(63, 214, 232, 0.07));
  border: 1px solid rgba(12, 22, 38, 0.07);
  overflow: hidden;
  flex: none;
  transition: background 0.5s ease, border-color 0.5s ease, transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}

/* --- Mitte --- */
.post__mitte { display: grid; gap: 0.4rem; }
.post__kopf { display: flex; align-items: center; gap: 0.6rem; }
.post__neu {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad);
  padding: 0.16rem 0.5rem;
  border-radius: 99px;
}
.post__titel {
  display: block;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  transition: color 0.4s ease;
}
.post__text {
  display: block;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

/* --- Rechts --- */
.post__rechts { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.post__zeit {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  color: var(--ink-2);
  white-space: nowrap;
}
.post__pfeil {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--blue);
  flex: none;
  transition: background 0.5s ease, border-color 0.5s ease, color 0.4s ease, transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.post__pfeil svg { width: 18px; height: 18px; }

@media (hover: hover) {
  .post:hover { background: rgba(47, 77, 158, 0.035); padding-left: clamp(1.2rem, 2.4vw, 2rem); }
  .post:hover::before { transform: scaleY(1); }
  .post:hover .post__titel { color: var(--blue); }
  .post:hover .post__zeichen {
    background: linear-gradient(150deg, rgba(47, 77, 158, 0.15), rgba(63, 214, 232, 0.13));
    border-color: rgba(63, 214, 232, 0.35);
    transform: scale(1.03);
  }
  .post:hover .post__pfeil {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    transform: translateX(4px);
  }
  /* die Zeichnungen reagieren wie zuvor */
  .post:hover .bvis--recht .bvis__balken:nth-child(1) { transform: translateX(6px); }
  .post:hover .bvis--recht .bvis__balken:nth-child(2) { transform: translateX(10px); }
  .post:hover .bvis--recht .bvis__balken:nth-child(3) { transform: translateX(4px); }
  .post:hover .bvis--chat .bvis__blase:nth-child(1) { transform: translateY(-3px); }
  .post:hover .bvis--chat .bvis__blase:nth-child(2) { transform: translateY(3px); }
  .post:hover .bvis--suche .bvis__lupe { transform: scale(1.12) rotate(-8deg); }
}
.post .bvis i { transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1); }

/* Zeichnungen an die kleinere Flaeche anpassen */
.post__zeichen .bvis--recht .bvis__balken { height: 5px; }
.post__zeichen .bvis--recht .bvis__siegel { right: 12%; width: 34%; }
.post__zeichen .bvis--suche .bvis__treffer { height: 5px; }
.post__zeichen .bvis--suche .bvis__lupe { width: 20px; height: 20px; margin-top: -10px; border-width: 2px; }
.post__zeichen .bvis--suche .bvis__lupe::after { right: -6px; bottom: -3px; width: 9px; }
.post__zeichen .bvis--chat .bvis__schloss { width: 13px; height: 11px; margin: -5px 0 0 -6.5px; }
.post__zeichen .bvis--chat .bvis__schloss::before { top: -6px; width: 9px; height: 8px; margin-left: -4.5px; }

/* --- Auftritt: die Zeilen kippen kraeftig aus der Tiefe herein --- */
html.js [data-auftritt="posts"] li {
  opacity: 0;
  transform: perspective(1400px) translateX(-70px) translateY(30px) rotateY(14deg) rotateX(12deg);
  transform-origin: 0 50%;
  filter: blur(5px);
  transition:
    opacity 0.6s ease var(--pz, 0s),
    transform 1s cubic-bezier(0.16, 0.9, 0.26, 1) var(--pz, 0s),
    filter 0.6s ease var(--pz, 0s);
}
html.js [data-auftritt="posts"].ist-auf li {
  opacity: 1;
  transform: perspective(1400px) translateX(0) translateY(0) rotateY(0) rotateX(0);
  filter: blur(0);
}
html.js [data-auftritt="posts"] li:nth-child(1) { --pz: 0.08s; }
html.js [data-auftritt="posts"] li:nth-child(2) { --pz: 0.22s; }
html.js [data-auftritt="posts"] li:nth-child(3) { --pz: 0.36s; }
/* Das Zeichen springt einen Tick spaeter auf */
html.js [data-auftritt="posts"] .post__zeichen {
  opacity: 0;
  transform: scale(0.6) rotate(-8deg);
  transition:
    opacity 0.45s ease calc(var(--pz, 0s) + 0.2s),
    transform 0.7s cubic-bezier(0.24, 1.5, 0.4, 1) calc(var(--pz, 0s) + 0.2s);
}
html.js [data-auftritt="posts"].ist-auf .post__zeichen { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .post { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
  .post__zeichen { width: 4.4rem; height: 3.2rem; }
  .post__rechts {
    grid-column: 2;
    justify-content: space-between;
    margin-top: 0.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt="posts"] li,
  html.js [data-auftritt="posts"] .post__zeichen {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}

/* Die Liste erbt sonst ein Drei-Spalten-Raster aus einer allgemeineren
   Regel der Sektion: hier explizit als Block setzen. */
#wissen .posts {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
#wissen .posts li { display: block; }

/* ============================================================================
   Wissen: Hover ruhiger
   Vorher liefen mehrere Uebergaenge unterschiedlich schnell nebeneinander,
   das wirkte hektisch. Jetzt alle auf derselben Gangart, laenger und mit
   gleichmaessigem Anlauf statt kopflastiger Kurve.
   ========================================================================== */
#wissen .post {
  transition:
    padding-left 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
    background-color 0.55s ease;
}
#wissen .post::before {
  transition: transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
#wissen .post__zeichen {
  transition:
    background 0.6s ease,
    border-color 0.6s ease,
    transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
#wissen .post__titel { transition: color 0.5s ease; }
#wissen .post__pfeil {
  transition:
    background 0.6s ease,
    border-color 0.6s ease,
    color 0.5s ease,
    transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
#wissen .post .bvis i {
  transition: transform 0.7s cubic-bezier(0.4, 0.05, 0.25, 1);
}
/* Die Bewegungen selbst etwas kleiner: es soll sich anheben, nicht springen */
@media (hover: hover) {
  #wissen .post:hover { padding-left: clamp(0.9rem, 1.8vw, 1.5rem); }
  #wissen .post:hover .post__zeichen { transform: scale(1.02); }
  #wissen .post:hover .post__pfeil { transform: translateX(3px); }
  #wissen .post:hover .bvis--recht .bvis__balken:nth-child(1) { transform: translateX(4px); }
  #wissen .post:hover .bvis--recht .bvis__balken:nth-child(2) { transform: translateX(7px); }
  #wissen .post:hover .bvis--recht .bvis__balken:nth-child(3) { transform: translateX(3px); }
  #wissen .post:hover .bvis--chat .bvis__blase:nth-child(1) { transform: translateY(-2px); }
  #wissen .post:hover .bvis--chat .bvis__blase:nth-child(2) { transform: translateY(2px); }
  #wissen .post:hover .bvis--suche .bvis__lupe { transform: scale(1.08) rotate(-5deg); }
}

/* Der Flaechenwechsel der Zeile war der Ausreisser: 'ease' startet sofort
   kraeftig. Jetzt laeuft er auf derselben Kurve wie alles andere an und
   zieht dabei von links herein, statt flaechig umzuschalten. */
#wissen .post {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(47, 77, 158, 0.05), rgba(47, 77, 158, 0.02));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:
    padding-left 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
    background-size 0.75s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover) {
  #wissen .post:hover { background-color: transparent; background-size: 100% 100%; }
}

/* background-size laesst sich hier nicht zuverlaessig animieren. Die Flaeche
   kommt deshalb als eigene Ebene, die von links einlaeuft: gleiche Kurve wie
   der Rest, dadurch faellt der Wechsel nicht mehr auf. */
#wissen .post {
  background-image: none;
  background-color: transparent;
  isolation: isolate;
}
#wissen .post::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(47, 77, 158, 0.055), rgba(47, 77, 158, 0.015));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.75s cubic-bezier(0.4, 0.05, 0.25, 1);
  pointer-events: none;
}
@media (hover: hover) {
  #wissen .post:hover::after { transform: scaleX(1); }
}

/* Der wachsende Innenabstand hat den Textbereich verschmaelert: der Text
   brach dadurch anders um und die Zeile sprang in der Hoehe. Jetzt wandert
   der Inhalt per transform, das beruehrt das Layout nicht. */
#wissen .post {
  padding-left: clamp(0.6rem, 1.4vw, 1.1rem);
  transition: none;
}
@media (hover: hover) {
  #wissen .post:hover { padding-left: clamp(0.6rem, 1.4vw, 1.1rem); }
}
#wissen .post__zeichen,
#wissen .post__mitte {
  transition:
    transform 0.7s cubic-bezier(0.4, 0.05, 0.25, 1),
    background 0.6s ease,
    border-color 0.6s ease;
}
@media (hover: hover) {
  #wissen .post:hover .post__zeichen { transform: translateX(8px) scale(1.02); }
  #wissen .post:hover .post__mitte { transform: translateX(8px); }
}

/* Solange der Chat offen ist, ist die Schnellkontakt-Leiste weg: sie lag
   unter dem einblendenden Fenster und schien dabei kurz durch. */
/* Beim Oeffnen muss die Leiste SOFORT weg sein: ein weiches Ausblenden
   wuerde genau in das Einblenden des Fensters fallen und wieder
   durchscheinen. Beim Schliessen darf sie in Ruhe zurueckkommen. */
html.chat-offen .rail {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(14px);
  transition: none;
}
.rail {
  transition:
    opacity 0.35s ease 0.15s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* ============================================================================
   Kontakt: zweispaltig statt mittig gestapelt
   Links die Frage samt Zusagen, rechts die drei Wege als eigene Karten.
   Das ist konkreter als zwei Knoepfe unter einer Ueberschrift.
   ========================================================================== */
.ctaLage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.2rem, 6vw, 5rem);
  align-items: center;
  text-align: left;
}
.ctaLage__text { display: grid; gap: 1.3rem; }
.ctaLage__text h2 {
  margin: 0;
  font-size: clamp(2rem, 3.7vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.ctaLage__lead { margin: 0; color: var(--dark-text); font-size: 1.05rem; line-height: 1.65; max-width: 42ch; }

.ctaLage__punkte { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ctaLage__punkte li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--dark-text);
}
.ctaLage__punkte i {
  position: relative;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(46, 201, 139, 0.18);
}
.ctaLage__punkte i::after {
  content: "";
  position: absolute;
  left: 6px; top: 4px;
  width: 4px; height: 8px;
  border: solid var(--ok);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

/* --- Die Wege --- */
.ctaLage__wege { display: grid; gap: 0.8rem; }
.ctaWeg {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.3rem);
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.5rem);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  text-decoration: none;
  isolation: isolate;
  transition:
    border-color 0.6s ease,
    transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1),
    box-shadow 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
/* Die Flaeche laeuft von links ein statt umzuschalten */
.ctaWeg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.75s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaWeg--haupt {
  background: linear-gradient(120deg, rgba(47, 77, 158, 0.55), rgba(47, 163, 186, 0.4));
  border-color: rgba(127, 208, 224, 0.35);
}
.ctaWeg__zeichen {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #7fd0e0;
  flex: none;
  transition: background 0.6s ease, border-color 0.6s ease, transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaWeg--haupt .ctaWeg__zeichen { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ctaWeg__zeichen svg { width: 21px; height: 21px; }
.ctaWeg__inhalt { display: grid; gap: 0.15rem; }
.ctaWeg__titel { font-size: 1.05rem; font-weight: 650; color: #fff; line-height: 1.3; }
.ctaWeg__text { font-size: 0.86rem; color: var(--dark-text); line-height: 1.45; }
.ctaWeg__pfeil {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  flex: none;
  transition: background 0.6s ease, border-color 0.6s ease, transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaWeg__pfeil svg { width: 16px; height: 16px; }

@media (hover: hover) {
  .ctaWeg:hover {
    border-color: rgba(127, 208, 224, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 26px 52px -34px rgba(0, 0, 0, 0.9);
  }
  .ctaWeg:hover::after { transform: scaleX(1); }
  .ctaWeg:hover .ctaWeg__zeichen {
    background: rgba(127, 208, 224, 0.2);
    border-color: rgba(127, 208, 224, 0.4);
    transform: scale(1.05);
  }
  .ctaWeg:hover .ctaWeg__pfeil {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateX(3px);
  }
}

.ctaLage__ort {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--dark-text);
  opacity: 0.8;
}
.ctaLage__ort span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

/* --- Auftritt --- */
html.js [data-auftritt="cta"] .ctaLage__text > * {
  opacity: 0;
  translate: -50px 0;
  transition:
    opacity 0.65s ease var(--cd, 0s),
    translate 0.85s cubic-bezier(0.18, 0.88, 0.26, 1) var(--cd, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__text > * { opacity: 1; translate: 0 0; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(1) { --cd: 0.05s; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(2) { --cd: 0.15s; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(3) { --cd: 0.25s; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(4) { --cd: 0.35s; }

html.js [data-auftritt="cta"] .ctaLage__wege > * {
  opacity: 0;
  transform: translateX(55px);
  transition:
    opacity 0.6s ease var(--wg, 0s),
    transform 0.85s cubic-bezier(0.18, 0.88, 0.26, 1) var(--wg, 0s),
    border-color 0.6s ease,
    box-shadow 0.65s ease;
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__wege > * { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(1) { --wg: 0.2s; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(2) { --wg: 0.32s; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(3) { --wg: 0.44s; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(4) { --wg: 0.56s; }

@media (max-width: 900px) {
  .ctaLage { grid-template-columns: 1fr; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt="cta"] .ctaLage__text > *,
  html.js [data-auftritt="cta"] .ctaLage__wege > * {
    opacity: 1; transform: none; translate: none; transition: none;
  }
}

/* Die Kontakt-Sektion war fuer den mittigen Aufbau auf 46rem begrenzt.
   Zweispaltig braucht sie die volle Breite, sonst brechen Titel und Karten
   in Silben um. */
/* Die Sektion haelt exakt die Seitenbreite wie alle anderen Sektionen.
   .cta__inner ist sonst auf 46rem begrenzt (mittiger Aufbau), das gilt hier nicht. */
#kontakt .cta__inner { max-width: var(--wrap); }
#kontakt .cta p { margin-top: 0; font-size: inherit; }
#kontakt .ctaLage__lead { font-size: 1.05rem; }

/* Rechts sitzt die schwebende Schnellkontakt-Leiste: die Karten duerfen
   nicht darunter laufen. */
@media (min-width: 1100px) {
  #kontakt .ctaLage { padding-right: clamp(3.5rem, 5vw, 5.5rem); }
}

/* ============================================================================
   Footer: gleichmaessiger und ruhiger
   Die Markenspalte war deutlich breiter als die anderen und ihr Text lief
   ungleich um. Jetzt vier ausgewogene Spalten mit klarer Typografie.
   ========================================================================== */
.footer__grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 3.5vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__brand { max-width: 22rem; }
.footer__brand p:last-child {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--dark-text);
  opacity: 0.85;
}
.footer__claim { margin-bottom: 0.9rem; }

/* Die Kontaktangaben stehen gleichmaessig statt mit Luecke */
.footer__adresse {
  display: grid;
  gap: 0.5rem;
  font-style: normal;
  line-height: 1.6;
}
.footer__adresse a {
  display: inline-block;
  width: fit-content;
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1);
}

/* Ueberschriften und Links ruhiger gesetzt */
.footer__col h3 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7fd0e0;
  margin-bottom: 1rem;
}
.footer__col a {
  display: block;
  padding: 0.24rem 0;
  font-size: 0.94rem;
  color: var(--dark-text);
  width: fit-content;
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover) {
  .footer__col a:hover,
  .footer__adresse a:hover { color: #fff; transform: translateX(4px); }
}

@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: 34rem; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: auto; }
}

/* ============================================================
   Fussbereich kompakter (Nutzer: "zu breit und nicht gut")
   Der Riesen-Schriftzug nahm die halbe Flaeche ein und liess
   links ein Loch. Jetzt: Marke gefuellt, Schriftzug als ruhiger
   Abschluss statt als Blickfang.
   ============================================================ */
.footer__grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  padding-bottom: clamp(1.8rem, 3vw, 2.4rem);
  align-items: start;
}
.footer__brand { max-width: 20rem; }
.footer__brand p:last-of-type { font-size: 0.9rem; line-height: 1.6; max-width: 24em; }

/* Sozialprofile: ruhige Umrandung, beim Zeigen faerbt sich nur die Linie */
.footer__social { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.footer__social a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.28s ease, border-color 0.28s ease, background-color 0.28s ease;
}
.footer__social a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.footer__social a:hover {
  color: var(--teal); border-color: rgba(63, 214, 232, 0.4);
  background: rgba(63, 214, 232, 0.07);
}
/* Terminknopf: der eine klare Weg aus dem Fuss heraus */
.footer__cta {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.1rem;
  padding: 0.6rem 1.05rem; border-radius: 999px;
  border: 1px solid rgba(63, 214, 232, 0.32);
  background: rgba(63, 214, 232, 0.08);
  color: #cdeef5; font-size: 0.85rem; font-weight: 600;
  transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}
.footer__cta svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  transition: transform 0.28s ease;
}
.footer__cta:hover {
  background: rgba(63, 214, 232, 0.16); border-color: rgba(63, 214, 232, 0.55); color: #fff;
}
.footer__cta:hover svg { transform: translateX(3px); }

/* Schriftzug in der urspruenglichen Groesse, nur etwas dichter am Rest */
.footer__word { margin-top: clamp(1rem, 2vw, 1.8rem); }

/* Marke oben ueber die Breite, darunter die drei Linkspalten nebeneinander:
   sonst stand "Verzeichnis" allein in einer Zeile und liess rechts ein Loch. */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; max-width: 34rem; }
}
@media (max-width: 680px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .footer__grid { grid-template-columns: 1fr; }
}
/* Der Schriftzug sass exakt auf der Trennlinie: etwas Luft darunter */
.footer__word { margin-bottom: clamp(0.9rem, 2vw, 1.6rem); }

/* ============================================================
   Kontakt-Sektion: Breite deckeln
   "max-width: none" liess die Sektion auf breiten Schirmen ueber
   die ganze Fensterbreite laufen. Die Kontakt-Karten wurden dadurch
   auseinandergezogen: Text links, Pfeil ganz rechts, dazwischen Leere.
   ============================================================ */
/* keine Sonderbreite mehr: .wrap gilt */
/* Die Karten wachsen nicht ueber ein lesbares Mass hinaus */
.ctaLage__wege { max-width: 34rem; width: 100%; justify-self: end; }
.ctaLage__ort { max-width: 34rem; justify-self: end; width: 100%; }
@media (max-width: 900px) {
  .ctaLage__wege, .ctaLage__ort { justify-self: start; max-width: 40rem; }
}
/* Adresse passt in der schmaleren Spalte in eine Zeile */
.ctaLage__ort { font-size: 0.86rem; align-items: start; }
.ctaLage__ort::before, .ctaLage__ort > span:first-child { margin-top: 0.15rem; }

/* ============================================================
   Kontakt-Sektion, rechte Seite neu
   Vorher drei einzelne Zeilen, die sich ueber die Spaltenbreite
   zogen. Jetzt ein zusammenhaengendes Feld: ein klarer Hauptweg,
   darunter die zwei direkten Wege nebeneinander, unten der Ort.
   ============================================================ */
.ctaFeld {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  max-width: 34rem;
  width: 100%;
  justify-self: end;
}

/* Hauptweg: der eine Klick, den wir uns wuenschen */
.ctaFeld__haupt {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.05rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.4rem);
  border-radius: var(--radius);
  text-decoration: none;
  isolation: isolate;
  background: linear-gradient(122deg, rgba(47, 77, 158, 0.62), rgba(47, 163, 186, 0.42));
  border: 1px solid rgba(127, 208, 224, 0.34);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
  transition:
    border-color 0.55s ease,
    transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
    box-shadow 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
/* Lichtschimmer laeuft beim Zeigen von links durch */
.ctaFeld__haupt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 60%);
  opacity: 0;
  transition: opacity 0.55s ease;
}
.ctaFeld__zeichen {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1), background 0.55s ease;
}
.ctaFeld__zeichen svg { width: 22px; height: 22px; }
.ctaFeld__inhalt { display: grid; gap: 0.16rem; }
.ctaFeld__titel { font-size: 1.08rem; font-weight: 660; color: #fff; line-height: 1.3; }
.ctaFeld__text { font-size: 0.86rem; color: rgba(233, 243, 250, 0.78); line-height: 1.45; }
.ctaFeld__pfeil {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1), background 0.55s ease;
}
.ctaFeld__pfeil svg { width: 16px; height: 16px; }

/* Die zwei direkten Wege stehen nebeneinander: keine gestreckten Zeilen mehr */
.ctaFeld__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.ctaDirekt {
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: clamp(0.95rem, 1.8vw, 1.2rem);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color 0.55s ease,
    background-color 0.55s ease,
    transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaDirekt__zeichen {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 0.55rem;
  border-radius: 10px;
  background: rgba(127, 208, 224, 0.12);
  border: 1px solid rgba(127, 208, 224, 0.2);
  color: #7fd0e0;
  transition: background 0.55s ease, border-color 0.55s ease, transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaDirekt__zeichen svg { width: 17px; height: 17px; }
.ctaDirekt__art {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(127, 208, 224, 0.82);
}
.ctaDirekt__wert {
  font-size: 0.98rem;
  font-weight: 620;
  color: #fff;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ctaDirekt__zusatz { font-size: 0.78rem; color: var(--dark-text); line-height: 1.4; margin-top: 0.12rem; }

/* Ort als ruhige Fusszeile des Feldes */
.ctaFeld__ort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(233, 243, 250, 0.66);
}
.ctaFeld__ort svg { width: 15px; height: 15px; flex: none; color: #7fd0e0; }

@media (hover: hover) {
  .ctaFeld__haupt:hover {
    transform: translateY(-3px);
    border-color: rgba(127, 208, 224, 0.55);
    box-shadow: 0 30px 56px -34px rgba(0, 0, 0, 0.95);
  }
  .ctaFeld__haupt:hover::after { opacity: 1; }
  .ctaFeld__haupt:hover .ctaFeld__zeichen { transform: scale(1.05); background: rgba(255, 255, 255, 0.24); }
  .ctaFeld__haupt:hover .ctaFeld__pfeil { transform: translateX(3px); background: rgba(255, 255, 255, 0.18); }
  .ctaDirekt:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(127, 208, 224, 0.36);
  }
  .ctaDirekt:hover .ctaDirekt__zeichen {
    transform: scale(1.06);
    background: rgba(127, 208, 224, 0.2);
    border-color: rgba(127, 208, 224, 0.4);
  }
}

/* Auftritt: das Feld baut sich von oben nach unten auf */
html.js [data-auftritt="cta"] .ctaFeld > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease var(--wg, 0s), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--wg, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld > * { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(1) { --wg: 0.18s; }
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(2) { --wg: 0.3s; }
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(3) { --wg: 0.42s; }

@media (max-width: 900px) {
  .ctaFeld { justify-self: start; max-width: 40rem; }
}
@media (max-width: 460px) {
  .ctaFeld__paar { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt="cta"] .ctaFeld > * { opacity: 1; transform: none; transition: none; }
  .ctaFeld__haupt, .ctaDirekt, .ctaFeld__zeichen, .ctaDirekt__zeichen, .ctaFeld__pfeil { transition: none; }
}
/* Beide Zeilen sollen einzeilig bleiben: der Umbruch machte das Feld unruhig.
   Mit #kontakt davor, sonst gewinnt die aeltere Regel "#kontakt .cta p
   { font-size: inherit }" und die Adresse steht wieder auf 18px. */
.ctaFeld__text { font-size: 0.83rem; }
#kontakt .ctaFeld__ort { font-size: 0.73rem; gap: 0.55rem; padding: 0.7rem 0.85rem; }

/* ============================================================
   Kontakt-Sektion, linke Seite an die rechte angleichen
   Rechts stehen gebaute Karten mit Icon-Kacheln, links war reiner
   Text mit winzigen Punkten. Die Zusagen bekommen dieselbe Sprache:
   gleiche Kachelgroesse, gleiche Farben, feine Trennlinien.
   ============================================================ */
/* Die Zusagen als eigenes Feld: frei laufende Trennlinien wirkten
   abgeschnitten, weil sie irgendwo vor der rechten Spalte endeten. */
#kontakt .ctaLage__punkte {
  gap: 0;
  margin-top: 0.75rem;
  max-width: 30rem;
  padding: 0.15rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}
#kontakt .ctaLage__punkte li:last-child { border-bottom: 0; }
#kontakt .ctaLage__punkte li {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.72rem 0;
  font-size: 0.92rem;
  color: rgba(233, 243, 250, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
/* Kachel wie .ctaDirekt__zeichen rechts, nur etwas kleiner */
#kontakt .ctaLage__punkte i {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(127, 208, 224, 0.12);
  border: 1px solid rgba(127, 208, 224, 0.2);
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
#kontakt .ctaLage__punkte i::after {
  left: 11px; top: 8px;
  width: 5px; height: 9px;
  border-color: #7fd0e0;
  border-width: 0 1.9px 1.9px 0;
}
/* Beim Zeigen ueber die Sektion heben sich die Kacheln leicht */
@media (hover: hover) {
  #kontakt .ctaLage__punkte li:hover i {
    background: rgba(127, 208, 224, 0.2);
    border-color: rgba(127, 208, 224, 0.38);
  }
}

/* Kicker und Titel bekommen etwas mehr Rhythmus, damit die Spalte
   nicht als ein Textblock wirkt */
#kontakt .ctaLage__text { gap: 1.1rem; }
#kontakt .ctaLage__lead { max-width: 34ch; color: rgba(233, 243, 250, 0.78); }

@media (prefers-reduced-motion: reduce) {
  #kontakt .ctaLage__punkte i { transition: none; }
}

/* Beide Spalten gleich hoch: die linke war deutlich laenger, die rechte
   schwebte zentriert daneben. Jetzt wird das Feld auf die Hoehe gezogen
   und verteilt seine drei Bloecke gleichmaessig. */
@media (min-width: 901px) {
  #kontakt .ctaLage { align-items: stretch; }
  #kontakt .ctaFeld { height: 100%; align-content: space-between; gap: 0.9rem; }
  /* Die Textspalte bleibt oben buendig statt mittig zu schweben */
  #kontakt .ctaLage__text { align-content: start; }
}

/* Zweiter Weg: gleicher Aufbau wie der Hauptweg, nur ruhiger gefaerbt.
   Fuellt die Spalte, statt die Abstaende auseinanderzuziehen. */
.ctaFeld__termin {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(0.95rem, 1.8vw, 1.2rem) clamp(1.1rem, 2.2vw, 1.4rem);
  border-radius: var(--radius);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    border-color 0.55s ease,
    background-color 0.55s ease,
    transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaFeld__termin .ctaFeld__zeichen {
  width: 40px; height: 40px;
  background: rgba(127, 208, 224, 0.12);
  border-color: rgba(127, 208, 224, 0.2);
  color: #7fd0e0;
}
.ctaFeld__termin .ctaFeld__zeichen svg { width: 19px; height: 19px; }
.ctaFeld__termin .ctaFeld__titel { font-size: 1rem; }
.ctaFeld__termin .ctaFeld__pfeil {
  width: 32px; height: 32px;
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
}
@media (hover: hover) {
  .ctaFeld__termin:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(127, 208, 224, 0.36);
  }
  .ctaFeld__termin:hover .ctaFeld__zeichen {
    transform: scale(1.05);
    background: rgba(127, 208, 224, 0.2);
    border-color: rgba(127, 208, 224, 0.4);
  }
  .ctaFeld__termin:hover .ctaFeld__pfeil { transform: translateX(3px); background: rgba(255, 255, 255, 0.12); }
}
/* Auftritt: vierter Block reiht sich ein */
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(4) { --wg: 0.54s; }
@media (prefers-reduced-motion: reduce) { .ctaFeld__termin { transition: none; } }

/* Die Zusagen stehen jetzt rechts unter der Adresse, nicht mehr links.
   Damit sie zur Feldbreite passen: keine eigene Maximalbreite mehr. */
#kontakt .ctaFeld .ctaLage__punkte { max-width: none; margin-top: 0; }
/* Die Textspalte ist dadurch kuerzer und steht mittig zum Feld */
@media (min-width: 901px) {
  #kontakt .ctaLage { align-items: center; }
  #kontakt .ctaFeld { height: auto; align-content: start; gap: 0.7rem; }
}
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(5) { --wg: 0.66s; }

/* Adresszeile: oben und unten exakt derselbe Abstand.
   Der eigene margin-top machte den oberen Abstand groesser als den unteren. */
#kontakt .ctaFeld__ort { margin: 0; }
/* Der dritte Absatz sitzt naeher am zweiten: er gehoert inhaltlich dazu */
#kontakt .ctaLage__lead + .ctaLage__lead { margin-top: -0.25rem; }
#kontakt .ctaLage__lead:last-of-type { color: rgba(233, 243, 250, 0.62); font-size: 0.95rem; }

/* ============================================================
   Linke Spalte: die Absaetze sitzen in Karten, damit beide Seiten
   dieselbe Bauweise haben. Gleiche Rundung, gleicher Rahmen,
   gleiche Flaeche wie die Karten rechts.
   ============================================================ */
.ctaText {
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.1rem, 2.2vw, 1.35rem);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.038);
  max-width: 30rem;
}
/* Der zweite Absatz ist die Erlaeuterung: gleiche Form, weniger Gewicht */
.ctaText--ruhig { background: rgba(255, 255, 255, 0.022); border-color: rgba(255, 255, 255, 0.08); }
#kontakt .ctaText .ctaLage__lead { margin: 0; max-width: none; }
#kontakt .ctaText--ruhig .ctaLage__lead { color: rgba(233, 243, 250, 0.66); font-size: 0.95rem; }
/* Die Absaetze stehen jetzt in Karten: der alte Sonderabstand faellt weg */
#kontakt .ctaLage__lead + .ctaLage__lead { margin-top: 0; }
#kontakt .ctaLage__text { gap: 0.85rem; }
#kontakt .ctaLage__text .kicker { margin-bottom: 0.15rem; }
#kontakt .ctaLage__text h2 { margin-bottom: 0.35rem; }

/* ============================================================
   Kontakt-Sektion mittig statt zweispaltig
   Der zweispaltige Aufbau bekam links nie genug Substanz. Jetzt
   steht der Kopf zentriert und alle Wege stapeln sich darunter.
   ============================================================ */
@media (min-width: 901px) {
  #kontakt .ctaLage {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 2.8rem);
    justify-items: center;
    text-align: center;
    padding-right: 0;
  }
  #kontakt .ctaLage__text { justify-items: center; max-width: 44rem; gap: 1rem; }
  #kontakt .ctaFeld { justify-self: center; max-width: 40rem; height: auto; }
}
#kontakt .ctaLage__lead { max-width: 52ch; margin-inline: auto; }

/* Die Karten bleiben innen linksbuendig: zentrierte Icon-Zeilen wirken unruhig */
#kontakt .ctaFeld, #kontakt .ctaFeld * { text-align: left; }
#kontakt .ctaFeld__ort { justify-content: flex-start; }

/* Die Schnellkontakt-Leiste rechts braucht keinen Platz mehr freihalten,
   weil das Feld mittig sitzt. */
@media (min-width: 1100px) {
  #kontakt .ctaLage { padding-right: 0; }
}

/* ============================================================
   Kontakt-Sektion: kraeftiger Auftritt
   Vorher nur 16px Versatz, das sah man kaum. Jetzt kommt der Kopf
   von unten heran, die Hauptkarte waechst auf, die beiden Wege
   fliegen von aussen ein und die Zusagen bauen sich Zeile fuer
   Zeile auf.
   ============================================================ */
html.js [data-auftritt="cta"] .ctaLage__text > * {
  opacity: 0;
  translate: 0 42px;
  scale: 0.96;
  filter: blur(6px);
  transition:
    opacity 0.85s ease var(--cd, 0s),
    translate 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--cd, 0s),
    scale 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--cd, 0s),
    filter 0.8s ease var(--cd, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__text > * {
  opacity: 1; translate: 0 0; scale: 1; filter: blur(0);
}

/* Die Hauptkarte waechst aus der Tiefe heran */
html.js [data-auftritt="cta"] .ctaFeld__haupt {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  transition:
    opacity 0.8s ease 0.34s,
    transform 1s cubic-bezier(0.18, 1.02, 0.3, 1) 0.34s;
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld__haupt { opacity: 1; transform: none; }

/* Die zwei Wege kommen von links und rechts hereingeflogen */
html.js [data-auftritt="cta"] .ctaFeld__paar { opacity: 1; transform: none; transition: none; }
html.js [data-auftritt="cta"] .ctaDirekt {
  opacity: 0;
  transition:
    opacity 0.75s ease var(--dz, 0s),
    transform 0.95s cubic-bezier(0.18, 1.02, 0.3, 1) var(--dz, 0s);
}
html.js [data-auftritt="cta"] .ctaDirekt:nth-child(1) { transform: translateX(-70px) scale(0.94); --dz: 0.48s; }
html.js [data-auftritt="cta"] .ctaDirekt:nth-child(2) { transform: translateX(70px) scale(0.94); --dz: 0.58s; }
html.js [data-auftritt="cta"].ist-auf .ctaDirekt { opacity: 1; transform: none; }

/* Die Zusagen bauen sich Zeile fuer Zeile auf */
html.js [data-auftritt="cta"] .ctaFeld .ctaLage__punkte {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 0.8s ease 0.68s, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.68s;
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld .ctaLage__punkte { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaLage__punkte li {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease var(--pz, 0s), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--pz, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__punkte li { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaLage__punkte li:nth-child(1) { --pz: 0.86s; }
html.js [data-auftritt="cta"] .ctaLage__punkte li:nth-child(2) { --pz: 0.96s; }
html.js [data-auftritt="cta"] .ctaLage__punkte li:nth-child(3) { --pz: 1.06s; }
/* Die Kacheln setzen sich mit einem kleinen Nachdruck */
html.js [data-auftritt="cta"] .ctaLage__punkte i {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.45s ease var(--pz, 0s), transform 0.6s cubic-bezier(0.34, 1.5, 0.5, 1) var(--pz, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__punkte i { opacity: 1; transform: none; }

/* Die Adresse zum Schluss */
html.js [data-auftritt="cta"] .ctaFeld__ort {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease 1.16s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.16s;
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld__ort { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt="cta"] .ctaLage__text > *,
  html.js [data-auftritt="cta"] .ctaFeld__haupt,
  html.js [data-auftritt="cta"] .ctaDirekt,
  html.js [data-auftritt="cta"] .ctaFeld .ctaLage__punkte,
  html.js [data-auftritt="cta"] .ctaLage__punkte li,
  html.js [data-auftritt="cta"] .ctaLage__punkte i,
  html.js [data-auftritt="cta"] .ctaFeld__ort {
    opacity: 1; transform: none; translate: none; scale: none; filter: none; transition: none;
  }
}

/* ============================================================
   Fuss-Spalten: ruhiger Feinschliff
   Die Ueberschriften bekommen einen kurzen Akzentstrich, die Links
   einen Pfeil, der beim Zeigen aufgeht. Alles sanft, kein Springen.
   ============================================================ */
.footer__col h3 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.05rem;
}
/* Kurzer Strich vor der Ueberschrift, gleiche Farbe wie die Schrift */
.footer__col h3::before {
  content: "";
  width: 14px; height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* Links: Pfeil faehrt beim Zeigen heraus, der Text ruecht ihm nach */
.footer__col a {
  position: relative;
  display: grid;
  grid-template-columns: 0fr minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 0.3rem 0;
  width: fit-content;
  transition: color 0.4s ease, grid-template-columns 0.45s cubic-bezier(0.4, 0.05, 0.25, 1), gap 0.45s ease;
}
.footer__col a::before {
  content: "";
  width: 0;
  height: 1px;
  overflow: hidden;
  background: #7fd0e0;
  transition: width 0.45s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.footer__col a > span,
.footer__col a { white-space: nowrap; }

/* Kontaktangaben: Symbol vorn, Text daneben */
.footer__adresse { gap: 0.75rem; }
.footer__adresse span,
.footer__adresse a {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
  width: fit-content;
}
.footer__adresse svg {
  width: 15px; height: 15px;
  margin-top: 0.28rem;
  color: rgba(127, 208, 224, 0.75);
  flex: none;
  transition: color 0.4s ease;
}

@media (hover: hover) {
  .footer__col a:hover {
    color: #fff;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 0.55rem;
    transform: none;                 /* kein Ruck mehr, der Pfeil macht die Bewegung */
  }
  .footer__col a:hover::before { width: 10px; }
  .footer__adresse a:hover { color: #fff; transform: none; }
  .footer__adresse a:hover svg { color: var(--teal); }
}
@media (prefers-reduced-motion: reduce) {
  .footer__col a, .footer__col a::before, .footer__adresse a, .footer__adresse svg { transition: none; }
}
/* In der Kontaktspalte macht das Symbol die Fuehrung: der Pfeil der
   Linkspalten wuerde dort als drittes Rasterfeld eine Zeile erzwingen. */
.footer__adresse a::before { content: none; display: none; }
.footer__adresse a { grid-template-columns: 16px minmax(0, 1fr); gap: 0.6rem; white-space: normal; }
@media (hover: hover) {
  .footer__adresse a:hover { grid-template-columns: 16px minmax(0, 1fr); gap: 0.6rem; }
}

/* ============================================================
   Mobiler Vorspann: die Kugel laeuft einmal, dann die Wortmarke
   Auf schmalen Schirmen ist .hero__system ausgeblendet. Waehrend
   "ballzuerst" gilt, wird sie als Vollbild-Vorspann eingeblendet
   und die Boot-Wortmarke wartet so lange.
   ============================================================ */
@media (max-width: 700px) {
  html.ballzuerst .hero__system {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 420;                  /* ueber dem Boot-Schleier (400) */
    pointer-events: none;
    background: #0a1322;           /* deckt den Hero dahinter ab */
  }
  /* Die kreisenden Bahnen gehoeren zum Hero-Aufbau, im Vorspann stoeren sie */
  html.ballzuerst .hero__orbit { display: none; }
  html.ballzuerst .orbwrap {
    width: min(76vw, 340px);
    margin: 0;
    /* Der Einflug aus der Hero-Choreografie darf hier nicht greifen. Der
       Weichzeichner gehoert dazu: ohne diese Zeile bleibt die Kugel im
       verschwommenen Anfangszustand der Choreografie stehen, weil deren
       Animation waehrend des Vorspanns angehalten ist. */
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* Wortmarke und Ausblendung stehen still, bis die Kugel durch ist */
  html.ballzuerst .bootfx,
  html.ballzuerst .bootfx__marke,
  html.ballzuerst .bootfx__marke * { animation-play-state: paused !important; }
  html.ballzuerst .bootfx__marke { opacity: 0; }
  /* Weicher Abgang des Vorspanns, sobald die Klasse faellt */
  .hero__system { transition: opacity 0.45s ease; }
  html.ballaus .hero__system { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.ballzuerst .hero__system { display: none; }
}
/* Der Hero steht waehrend des Vorspanns still. Sonst laeuft seine
   Choreografie hinter der Kugel ab und die Wortmarke erschiene spaeter
   ueber einem fertigen Hero. Nach dem Vorspann laeuft sie mit ihrer
   normalen Verzoegerung weiter, also genau waehrend der Bildstoerung. */
@media (max-width: 700px) {
  html.ballzuerst .hero [data-explode],
  html.ballzuerst .hero__marquee,
  html.ballzuerst .hero__marquee-track,
  html.ballzuerst .hero__orbit,
  html.ballzuerst .hero__caret { animation-play-state: paused !important; }
}
/* Schleier und Bildzeilen des Boot-Effekts gehoeren zur Stoerungsphase.
   Waehrend des Vorspanns lagen sie ueber der Kugel und liessen sie
   verwaschen aussehen (der Hero bildet einen eigenen Stapelkontext,
   deshalb kommt die Kugel nicht per z-index darueber). */
@media (max-width: 700px) {
  html.ballzuerst .bootfx { background: transparent; }
  html.ballzuerst .bootfx::after { display: none; }
  html.ballzuerst #bootfx { opacity: 0; }
  /* Etwas groesser, damit die Kugel wirkt wie am Desktop */
  html.ballzuerst .orbwrap { width: min(88vw, 400px); }
}

/* ============================================================
   Projekt-Karussell auf Tablets
   Die Buehne stand auf 100vh. Auf einem Tablet im Hochformat ist das
   rund 1180 px, der Inhalt braucht aber nur gut 400: es blieben mehrere
   hundert Pixel Leere ueber und unter der Folie.
   ============================================================ */
@media (min-width: 761px) and (max-width: 1100px) {
  .pscroll__sticky { height: auto; padding-bottom: var(--s-4); }
  .pscroll__viewport { flex: 0 1 auto; }
  .pscroll__track { height: auto; }
  .pslide {
    height: auto;
    align-content: center;
    padding-block: clamp(1.5rem, 3vh, 2.5rem);
  }
}

/* Die schwebende Schnellkontakt-Leiste sitzt unten mittig und lag genau
   auf der Pfeilreihe des Karussells. Unter der Pfeilreihe bleibt jetzt
   so viel Platz, dass beide nebeneinander bestehen. */
@media (max-width: 1100px) {
  .pscroll__nav { margin-bottom: clamp(3.5rem, 8vh, 5rem); }
}

/* Der Projekt-Link im Karussell war nur 24 px hoch und damit auf dem
   Handy schwer zu treffen. Der Tippbereich waechst nach unten, ohne
   das Aussehen zu aendern. */
@media (max-width: 1100px) {
  .pslide__link { padding-block: 0.55rem; }
}

/* ============================================================
   Handy-Korrekturen an der Startseite
   ============================================================ */

/* 1. Der Knopf "Loesung ansehen" ragte unten aus dem angehefteten Bereich
      heraus und war nie ganz sichtbar: der Inhalt brauchte 986 px, das
      Fenster eines iPhone 14 bietet 844. Alle Ebenen werden gestrafft,
      bis der Knopf sicher hineinpasst. Ein zusaetzliches Polster unten
      haette es nur verschlimmert. */
@media (max-width: 760px) {
  .demat__pin { padding-top: 1.1rem; }
  .demat .section__head { padding-block: 0.6rem 0.9rem; }
  /* Der Einleitungssatz kostet zwei Zeilen und wiederholt die Ueberschrift */
  .demat .section__head .section__intro { display: none; }
  .demat__lage { padding-bottom: 0; gap: 0.9rem; }
  .demat__text { gap: 0.55rem; }
  .demat__text h3 { font-size: clamp(1.25rem, 5.6vw, 1.5rem); }
  .demat__lead { font-size: 0.92rem; line-height: 1.5; }
  .demat__text ul { gap: 0.3rem; }
  .demat__text ul li { font-size: 0.88rem; line-height: 1.4; }
  .demat__text a { margin-top: 0.35rem; }
  /* Das Vorschaufenster nimmt den groessten Einzelposten ein */
  .dfenster { max-height: 30vh; }
  .dfenster__inhalt { max-height: calc(30vh - 34px); overflow: hidden; }
}

/* 2. Kernbereich-Karten: oben stand ein leerer Streifen ueber der
      Kennung, weil das Innenpolster fuer den Desktop bemessen war. */
@media (max-width: 620px) {
  .core { padding: 1.4rem 1.25rem 1.5rem; }
  .core__copy { gap: 0.7rem; }
  /* Kennung und Kicker in eine Zeile, direkt unter den Rand */
  .core__index { margin-bottom: 0; }
}

/* 3. Die Zahlen standen als 2 + 2 + 1 ohne Abstand und wirkten dadurch
      wie ein zufaellig gebrochener Block. Jetzt mit Luft, Trennlinien
      und der letzten Zahl mittig ueber beide Spalten. */
@media (max-width: 620px) {
  /* .stats ist ein Flex-Container. Fuer ein sauberes Zweier-Raster mit
     Trennlinien wird es hier auf Grid umgestellt, sonst greifen weder
     grid-column noch gleichmaessige Spaltenbreiten. */
  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0.2rem 0;
    border-top: 1px solid rgba(47, 77, 158, 0.13);
    border-bottom: 1px solid rgba(47, 77, 158, 0.13);
  }
  .stats > * { max-width: none; }
  /* Mit #unternehmen davor: die bestehende Regel "#unternehmen .stat"
     hat als ID-Selektor sonst Vorrang und setzt Polster und Rand zurueck. */
  #unternehmen .stat {
    padding: 1.15rem 0.6rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(47, 77, 158, 0.1);
  }
  #unternehmen .stat:nth-child(odd) { border-right: 1px solid rgba(47, 77, 158, 0.1); }
  #unternehmen .stat:nth-child(4) { border-bottom: 0; }
  /* Die fuenfte Zahl steht mittig ueber beide Spalten */
  #unternehmen .stat:nth-child(5) { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}

/* Flache Handy-Fenster (bis rund 880 px Innenhoehe): dort reicht die
   Straffung oben noch nicht, der Knopf ragte weiter unten heraus.
   Das Vorschaufenster und die Kopfzeile geben zusaetzlich Platz ab. */
@media (max-width: 760px) and (max-height: 880px) {
  .demat__pin { padding-top: 0.7rem; }
  .demat .section__head { padding-block: 0.4rem 0.7rem; }
  .demat .section__head h2 { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.15; }
  .demat .section__head .kicker { margin-bottom: 0.35rem; }
  .demat__lage { gap: 0.7rem; }
  .dfenster { max-height: 21vh; }
  .dfenster__inhalt { max-height: calc(21vh - 30px); }
  /* Auch die Fortschrittsleiste ruecht enger an den Inhalt */
  .demat__fort { margin-top: 0.5rem; }
  .demat__marken { gap: 0.3rem; }
  .demat__text { gap: 0.45rem; }
  .demat__text h3 { font-size: clamp(1.2rem, 5.2vw, 1.4rem); }
  .demat__lead { font-size: 0.88rem; line-height: 1.45; }
  .demat__text ul li { font-size: 0.85rem; }
  .demat__nr { font-size: 0.78rem; }
}

/* Die Fortschrittsleiste am Fuss der Sektion ragte unten heraus: vier
   zweizeilige Titel kosten 62 px. Auf schmalen Schirmen bleiben nur die
   Nummern stehen, der Titel des aktiven Schritts steht ohnehin gross
   darueber. Die Beschriftung wird per Schriftgroesse ausgeblendet,
   damit das Raster und die aktive Hervorhebung erhalten bleiben. */
@media (max-width: 760px) {
  .demat__marken { gap: 0.4rem; }
  .demat__marken span { font-size: 0; gap: 0; }
  .demat__marken span em { font-size: 0.72rem; letter-spacing: 0.1em; }
}

/* Sehr flache Handy-Fenster (unter 820 px Innenhoehe, z. B. kleine
   Android-Geraete): dort passt die Nummernleiste nicht mehr mit hinein.
   Der Fortschrittsbalken darueber zeigt den Stand weiterhin an. */
@media (max-width: 760px) and (max-height: 820px) {
  .demat__marken { display: none; }
  .dfenster { max-height: 19vh; }
  .dfenster__inhalt { max-height: calc(19vh - 28px); }
  .demat .section__head { padding-block: 0.3rem 0.5rem; }
}

/* Aeltere, sehr flache Geraete (bis 760 px Innenhoehe): letzte Stufe. */
@media (max-width: 760px) and (max-height: 770px) {
  .demat .section__head .kicker { display: none; }
  .demat .section__head h2 { font-size: clamp(1.35rem, 6vw, 1.6rem); }
  .dfenster { max-height: 16vh; }
  .dfenster__inhalt { max-height: calc(16vh - 26px); }
  .demat__text ul li { font-size: 0.82rem; }
}

/* ============================================================
   Kernbereich-Karten auf Touch-Geraeten
   Der farbige Anriss am oberen Rand ist als Startpunkt gedacht: beim
   Darueberfahren waechst daraus ein Rahmen um die ganze Karte. Ohne
   Zeigegeraet passiert das nie, also blieb dauerhaft ein halber Rahmen
   stehen, der wie ein Darstellungsfehler aussah. Auf schmalen Schirmen
   ist der Rahmen deshalb von vornherein geschlossen.
   ============================================================ */
/* Gilt fuer alle Geraete ohne Zeigegeraet und fuer Tablet-Breiten: dort
   waechst der Rahmen nie, der Anriss bliebe als halber Rahmen stehen. */
@media (max-width: 1100px), (hover: none) {
  .cores-stack .core::before {
    inset: -1px;
    height: auto;
    border-radius: inherit;
    padding: 2px;
  }
  /* Der wachsende Rahmen entfaellt: er haette nichts mehr hinzuzufuegen */
  .cores-stack .core::after { display: none; }
}

/* Prozess-Karten auf Tablets: der unsichtbare Laeufer zaehlt im Flex-Fluss
   als eigenes Element mit. Dadurch brach das Zweier-Raster ungleichmaessig
   um: die dritte Karte stand allein und mittig versetzt, die vierte lief
   ueber die volle Breite. Auf Tablet steht jetzt eine Karte je Zeile. */
@media (min-width: 761px) and (max-width: 1100px) {
  .steps.steps.steps { --spalten: 1; }
}

/* ============================================================
   DSGPT auf iPad-Pro-Breite
   Ab rund 1000 px steht die Sektion zweispaltig, die Textspalte ist
   dort aber noch schmal. Die zweispaltige Merkmalsliste lief deshalb
   unter das Chat-Mockup und war rechts abgeschnitten. Bis 1120 px
   steht die Liste daher einspaltig.
   ============================================================ */
@media (min-width: 940px) and (max-width: 1119px) {
  .dsgpt .ticks--cols { grid-template-columns: minmax(0, 1fr); }
}



/* ============================================================
   Unterseiten-Hero: nur so hoch wie noetig
   Die volle Bildschirmhoehe traegt auf der Startseite, auf einer
   Unterseite kostet sie nur Scrollweg. Inhalt bleibt unveraendert,
   allein die Hoehe faellt weg (Absprache 22.08.2026).
   ============================================================ */
.page-hero {
  min-height: 0;
  /* Oben liegt die Kopfleiste darueber, deshalb dort mehr. Unten genug Luft,
     damit der Hero nicht wie ein schmaler Streifen wirkt. */
  padding-block: clamp(10.5rem, 17vh, 12.5rem) clamp(6.5rem, 11vh, 8.5rem);
}



/* ============================================================
   Portfolio-Referenzen
   Jedes Projekt als eigener Block, Bild und Text im Wechsel
   links und rechts, jede zweite Zeile als randlose dunkle Bahn.
   Die Zeilen selbst laufen ueber die volle Fensterbreite: kein
   ueberbreites Pseudo-Element noetig, deshalb vertraegt sich das
   mit content-visibility (nur Sichtbares wird gezeichnet).
   ============================================================ */
.section--referenzen { overflow-x: clip; }
.referenzen {
  margin-inline: calc(50% - 50vw);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.referenz {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  /* Inhalt zurueck auf die Seitenbreite (wrap: 1180px) */
  padding-inline: max(clamp(1.25rem, 4vw, 2.5rem), calc(50vw - 590px));
  /* Nur zeichnen, was im Bild ist: bei 65 Zeilen der Unterschied
     zwischen 12 und 60 Bildern je Sekunde auf breiten Schirmen */
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}
.referenz--gedreht .referenz__bild { order: 2; }
.referenz--dunkel {
  background: #0b1526;
  border-block: 1px solid rgba(127, 208, 224, 0.08);
}


/* ---------- Bild ---------- */
.referenz__bild > img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.referenz__bild .pv3-stage { width: 100%; max-width: none; margin: 0; }
.referenz__bild .pv3-stage img { border-radius: 0; }
/* Geometrie wie im Slider der Startseite: feste 16:9-Buehne, der
   Rechner nimmt 85 % der Breite ein und hat damit echte Macbook-
   Proportionen. Der Screenshot fuellt den Bildschirm formatfuellend,
   verankert an der Oberkante, damit Kopfzeile und Hero der gezeigten
   Website immer zu sehen sind. */
.referenz .pv3-stage { aspect-ratio: 16 / 9; }
/* Exakt wie im Slider der Startseite: der Screenshot fuellt den
   Bildschirm formatfuellend (cover). Wichtig ist nur, dass die
   allgemeine Bildregel oben (height: auto) den Geraeteschirm nicht
   trifft, sonst bleibt unter dem Bild ein leerer Streifen. */
.referenz .pv3-laptop__bezel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Geraeterahmen auf hellen Zeilen: dunkler Fuss, sonst unsichtbar */
.referenz:not(.referenz--dunkel) .pv3-laptop__base {
  background: linear-gradient(to bottom, rgba(12, 22, 38, 0.28), rgba(12, 22, 38, 0.12));
}
.referenz:not(.referenz--dunkel) .pv3-laptop__base::before { background: rgba(12, 22, 38, 0.32); }
.referenz:not(.referenz--dunkel) .pv3-laptop__bezel {
  border-color: rgba(12, 22, 38, 0.18);
  box-shadow: 0 22px 44px -18px rgba(12, 22, 38, 0.45);
}

/* Schweben: fertige Mockups wippen ruhig, Geraete-Buehnen ebenso.
   Alles pausiert, sobald die Zeile aus dem Bild ist (Beobachter im JS). */
@keyframes referenz-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.referenz__bild > img {
  animation: referenz-schweben 6s ease-in-out infinite;
  animation-play-state: paused;
}
.referenz .pv3-stage,
.referenz .pv3-phone { animation-play-state: paused; }
.referenz.ist-sichtbar .referenz__bild > img,
.referenz.ist-sichtbar .pv3-stage,
.referenz.ist-sichtbar .pv3-phone { animation-play-state: running; }
.referenz:nth-child(3n)   .referenz__bild > img { animation-delay: -2s; }
.referenz:nth-child(3n+1) .referenz__bild > img { animation-delay: -4s; }

/* ---------- Textkarte ---------- */
.referenz__text {
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 18px 44px -34px rgba(12, 22, 38, 0.5);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease, box-shadow 0.45s ease, background-color 0.45s ease;
}
/* Farbstrich an der Oberkante: durchgezogen, beidseitig derselbe
   Abstand, aussen schwach und zur Mitte hin kraeftig */
.referenz__text::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(1.2rem, 2.4vw, 2rem);
  right: clamp(1.2rem, 2.4vw, 2rem);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--teal) 50%, transparent);
  opacity: 0.85;
}
.referenz--dunkel .referenz__text {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}
.referenz__art {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 0.5rem;
}
.referenz--dunkel .referenz__art { color: #7fd0e0; }
.referenz__text h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.2; margin-bottom: 0.7rem; }
.referenz--dunkel .referenz__text h3 { color: #fff; }
.referenz__text p { color: var(--ink-2); line-height: 1.65; }
.referenz--dunkel .referenz__text p { color: var(--dark-text); }
.referenz__link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1.1rem; font-weight: 600; color: var(--blue); text-decoration: none;
}
.referenz--dunkel .referenz__link { color: #7fd0e0; }
.referenz__link svg { width: 16px; height: 16px; transition: transform 0.4s cubic-bezier(0.4, 0.05, 0.25, 1); }

/* Beruehrung wirkt NUR auf der Karte, nicht auf der ganzen Zeile */
@media (hover: hover) {
  .referenz__text:hover {
    transform: translateY(-4px);
    border-color: rgba(47, 163, 186, 0.4);
    box-shadow: 0 26px 54px -32px rgba(12, 22, 38, 0.6);
  }
  .referenz--dunkel .referenz__text:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(127, 208, 224, 0.38);
    box-shadow: none;
  }
  .referenz__text:hover .referenz__link svg { transform: translateX(4px); }
}

@media (max-width: 780px) {
  .referenz { grid-template-columns: 1fr; gap: 1.4rem; padding-block: clamp(2.5rem, 9vw, 3.5rem); }
  .referenz--gedreht .referenz__bild { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .referenz__bild > img, .referenz .pv3-stage, .referenz .pv3-phone { animation: none; }
  .referenz__text, .referenz__link svg { transition: none; }
  .referenz__text:hover { transform: none; }
}

/* ---------- Portfolio-Filter ---------- */
.reffilter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
.reffilter__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(47, 77, 158, 0.18);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: 0 6px 18px -12px rgba(12, 22, 38, 0.35);
  transition:
    border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.reffilter__chip i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: rgba(47, 77, 158, 0.09);
  color: var(--ink-2);
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
  .reffilter__chip:hover {
    border-color: rgba(47, 163, 186, 0.5);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -14px rgba(12, 22, 38, 0.45);
  }
}
/* Aktiver Bereich: gefuellt wie die Hauptknoepfe der Seite */
.reffilter__chip.is-aktiv {
  border-color: transparent;
  background: linear-gradient(120deg, var(--blue), var(--teal));
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(47, 163, 186, 0.55);
}
.reffilter__chip.is-aktiv i { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ---------- Portfolio-Zaehlstand ----------
   Kleine Pille unten links: "12 / 65" mit Fortschrittsstrich. Nur
   sichtbar, solange man sich in der Projektliste befindet. */
.refzaehler {
  position: fixed;
  left: clamp(0.9rem, 2vw, 1.6rem);
  bottom: 1.2rem;
  z-index: 60;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.55rem 0.95rem 0.65rem;
  border-radius: 999px;
  background: rgba(11, 21, 38, 0.92);
  border: 1px solid rgba(127, 208, 224, 0.25);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(233, 243, 250, 0.85);
  overflow: hidden;
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition: opacity 0.35s ease, translate 0.35s ease;
}
.refzaehler.ist-da { opacity: 1; translate: 0 0; }
.refzaehler b { font-weight: 600; color: #7fd0e0; font-size: 0.82rem; }
.refzaehler::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transition: width 0.3s ease;
}
@media (max-width: 700px) {
  .refzaehler { display: none; }   /* auf dem Handy ist unten genug los */
}
@media (prefers-reduced-motion: reduce) {
  .refzaehler, .refzaehler::after { transition: none; }
}

/* Portfolio: Fakten-Band und Projektliste ruecken enger zusammen.
   Zwischen beiden lagen 115 px Sektions-Polster plus Weissraum. */
#projekte.section--referenzen { padding-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Kontakt-Sektion: die vier direkten Wege ----------
   Mail, QR-Code, Videotermin und Telefon als gleichwertige Felder in
   einer Reihe. Alle gleich hoch, Beschriftung auf einer Linie, der
   QR-Code sitzt im selben Rahmen wie die Symbole. */
.ctawege {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  max-width: 58rem;
  margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
}
.ctaweg {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-content: start;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0.8rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  color: rgba(233, 243, 250, 0.9);
  transition:
    background-color 0.6s ease, border-color 0.6s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Symbol und QR-Code teilen sich denselben Rahmen.
   Der QR ist bewusst deutlich groesser: bei 49 Modulen braucht eine
   Handykamera rund 150 px, sonst erkennt sie ihn nicht. */
.ctaweg__zeichen,
.ctaweg__qr {
  display: grid;
  place-items: center;
  border-radius: 14px;
}
/* Alle vier Felder tragen denselben Rahmen in derselben Groesse:
   der QR braucht rund 150 px, damit ihn eine Kamera erkennt, also
   richten sich die Symbole danach. */
.ctaweg__zeichen,
.ctaweg__qr { width: 148px; height: 148px; }
.ctaweg__zeichen {
  border: 1px solid rgba(127, 208, 224, 0.22);
  background: rgba(127, 208, 224, 0.09);
  color: #7fd0e0;
  transition: background-color 0.6s ease, border-color 0.6s ease, color 0.6s ease;
}
.ctaweg__zeichen svg { width: 46px; height: 46px; }
/* Gleicher Rahmen und dieselbe Flaeche wie die Symbolfelder, die
   Ruhezone steckt im SVG: der Code fuellt das Feld randlos.
   Helle Module auf dunklem Grund: aktuelle Handykameras lesen solche
   umgekehrten Codes zuverlaessig (am Geraet geprueft). Reine Software-
   Dekoder tun sich damit teils schwer, das ist hier kein Massstab. */
.ctaweg__qr {
  padding: clamp(0.9rem, 1.8vw, 1.3rem);
  border: 1px solid rgba(127, 208, 224, 0.22);
  background: rgba(127, 208, 224, 0.09);
  color: #7fd0e0;               /* faerbt die Module ueber currentColor */
  overflow: hidden;
  transition: background-color 0.6s ease, border-color 0.6s ease,
              box-shadow 0.6s ease, color 0.6s ease;
}
.qrsvg { width: 100%; height: 100%; display: block; }
.qrsvg__module {
  stroke: currentColor;
  shape-rendering: crispEdges;  /* Kaestchen bleiben scharf */
  transition: stroke 0.6s ease;
}
.ctaweg__wort {
  align-self: start;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
  color: rgba(233, 243, 250, 0.72);
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  a.ctaweg:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(127, 208, 224, 0.35);
  }
  a.ctaweg:hover .ctaweg__zeichen {
    background: rgba(127, 208, 224, 0.18);
    border-color: rgba(127, 208, 224, 0.42);
    color: #fff;
  }
  /* Beim Zeigen leuchten die Module auf, der Kontrast steigt */
  a.ctaweg--qr:hover .ctaweg__qr {
    background: rgba(127, 208, 224, 0.18);
    border-color: rgba(127, 208, 224, 0.42);
    color: #fff;
  }
  a.ctaweg:hover .ctaweg__wort { color: #fff; }
}
@media (max-width: 860px) {
  .ctawege { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
}
@media (max-width: 460px) {
  .ctaweg__zeichen, .ctaweg__qr { width: 132px; height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .ctaweg, .ctaweg__zeichen, .ctaweg__qr, .qrsvg__module { transition: none; }
  a.ctaweg:hover { transform: none; }
}

/* ---------- Die drei direkten Wege vor der Kontakt-Sektion ----------
   Nachbau der frueheren Seite: Teams, Videotermin, Telefon als drei
   farbige Karten. Farben wie im Original, nur ruhiger abgestimmt. */
.kanaele__reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.kanal {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.4vw, 1.8rem);
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
}
/* Die Karten tragen data-reveal fuer den Auftritt. Dessen Regel
   "html.js [data-reveal]" ist spezifischer als .kanal und hat die
   Hover-Transition verschluckt: deshalb sprang die Bewegung. Hier
   beide Listen zusammen, mit passender Spezifitaet. */
html.js .kanal[data-reveal],
.kanal {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.kanal--teams { background: linear-gradient(150deg, #4b53bc, #3f46a6); }
.kanal--video { background: linear-gradient(150deg, #1fb26a, #17945a); }
.kanal--tel   { background: linear-gradient(150deg, #e8894b, #d9743a); }

.kanal__zeichen { display: grid; place-items: center; width: 54px; height: 54px; }
.kanal__zeichen svg { width: 34px; height: 34px; }
.kanal__titel { font-size: 1.15rem; font-weight: 680; }
.kanal__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 30ch;
}
.kanal__wort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.65s ease, border-color 0.65s ease;
}
@media (hover: hover) {
  .kanal:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -30px rgba(12, 22, 38, 0.5); }
  .kanal:hover .kanal__wort { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.36); }
}
@media (max-width: 860px) {
  .kanaele__reihe { grid-template-columns: 1fr; }
  .kanal__text { max-width: 42ch; }
}
@media (prefers-reduced-motion: reduce) {
  .kanal, .kanal__wort { transition: none; }
  .kanal:hover { transform: none; }
}

/* Kennzahlen: Betrag und Waehrungszeichen gehoeren zusammen.
   "bis 3.500 €" brach sonst vor dem Eurozeichen um. */
.stat b { text-wrap: balance; }
.stat b, .zahl__wert { white-space: nowrap; }

/* ---------- BAFA: Verweise auf die Stadtseiten ----------
   Im Original ein zweispaltiges Raster flaechiger Schaltflaechen (dort
   #4b91a6 mit weisser Schrift, 50px hoch, beim Zeigen invertiert auf weiss
   mit farbigem Rand). Hier uebernimmt der Markenverlauf diese Rolle. */
.staedte {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  max-width: 640px;
  margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0;
}
.stadt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0.75rem 1.1rem;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--grad);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 26px -22px rgba(12, 22, 38, 0.5);
}
/* Die Schaltflaechen tragen kein eigenes data-reveal (das sitzt am
   Container), die Transition kann deshalb direkt hier stehen. */
.stadt {
  transition:
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  /* Kein Farbwechsel: dieselbe sanfte Bewegung wie bei den uebrigen Kacheln */
  .stadt:hover {
    transform: translateY(-3px);
    filter: saturate(1.12) brightness(1.06);
    box-shadow: 0 22px 40px -24px rgba(12, 22, 38, 0.5);
  }
}
.stadt:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

@media (max-width: 600px) {
  .staedte { grid-template-columns: 1fr; gap: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stadt { transition: none; }
  .stadt:hover { transform: none; filter: none; }
}

/* Kennzahlen: kleiner Vorsatz ("bis", "ab") ueber dem Betrag, damit die
   Zeile nicht zu breit wird und das Waehrungszeichen im Feld bleibt. */
.stat__vor {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.75;
  margin-bottom: 0.15rem;
}
.section--dark .stat__vor { color: var(--dark-text); }
/* Lange Betraege duerfen etwas kleiner werden, statt aus der Karte zu laufen */
.stat b { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }

/* Kicker sitzt jetzt in der Lesespalte, direkt ueber der Ueberschrift */
.prosa__kicker { margin-bottom: 0.2rem; }
.prosa--lang > .prosa__kicker + h2 { margin-top: 0.4rem; }

/* ---------- BAFA: "Warum wir uns dafuer eignen." mit ADence-Siegel ----------
   Das Original zeigt an dieser Stelle das ADence-Logo. Hier sitzt es als
   Siegel in einer eigenen Karte neben dem Text, mit der Berater-ID und
   den drei Belegen darunter. */
.eignung__raster {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}
.eignung__text > .kicker { margin-bottom: 0.6rem; }
.eignung__text > h2 { margin-bottom: 1rem; }
.eignung__text > p { color: var(--ink-2); max-width: 62ch; }
.eignung__text > p + p { margin-top: 0.9rem; }
.eignung__text .ticks { margin-top: 1.4rem; }

/* Siegel-Karte: klebt beim Scrollen kurz mit, damit sie neben dem
   laengeren Text nicht allein oben stehen bleibt */
.eignung__siegel {
  position: sticky;
  top: calc(var(--navhoehe, 76px) + 1.5rem);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 22px 50px -34px rgba(12, 22, 38, 0.55);
  text-align: center;
}
/* Die Karte traegt data-reveal fuer den Auftritt. Dessen Regel
   "html.js [data-reveal]" ist spezifischer als .eignung__siegel und hat die
   Hover-Transition verschluckt: deshalb sprang der Effekt hart um. Hier
   beide Listen zusammen, mit passender Spezifitaet. */
html.js .eignung__siegel[data-reveal],
.eignung__siegel {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .eignung__siegel:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 163, 186, 0.32);
    box-shadow: 0 28px 56px -34px rgba(12, 22, 38, 0.42);
  }
}

/* Logo im ruhig kreisenden Verlaufsring.
   ACHTUNG: die Klasse .siegel gibt es auf dieser Seite zweimal - das
   Jubilaeums-Siegel weiter oben sitzt absolut in einer Bildecke und setzt
   left/bottom. Diese Werte wirkten hier weiter (Kreis 41,6px nach links und
   32px nach unten versetzt), deshalb der spezifischere Selektor plus
   inset: auto. */
.eignung__siegel .siegel {
  position: relative;
  inset: auto;
  width: clamp(112px, 26vw, 138px);
  aspect-ratio: 1;
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.siegel__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--blue), var(--teal), var(--blue));
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
          mask: radial-gradient(circle, transparent 58%, #000 59%);
  opacity: 0.85;
  animation: siegel-dreht 22s linear infinite;
  /* eigener Compositing-Layer, damit die Drehung nichts anderes neu malt */
  transform: translateZ(0);
  will-change: transform;
}
@keyframes siegel-dreht { to { transform: rotate(360deg) translateZ(0); } }
.siegel__logo {
  position: relative;
  width: 48%;
  height: auto;
  /* Die Bilddatei ist geometrisch zentriert, die Formen aber nicht: das
     massige D rechts und der breite Auslauf unten ziehen den optischen
     Schwerpunkt nach rechts unten. Gegen ein Fadenkreuz im Ring ausgemessen:
     erst bei diesem Versatz sitzt das AD sichtbar mittig. */
  translate: -9% -6%;
}
.siegel__name {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.siegel__slogan {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}
/* Die beiden Prozentwerte der Originalseite */
/* Zwei Spalten fuer BEIDE Zeilen gemeinsam: die Zahlenspalte ist so breit
   wie der laengste Wert, dadurch starten "Foerderung" und "Beratung ..."
   exakt untereinander. Die Zeilen selbst sind display:contents, damit ihre
   Kinder direkt im Raster liegen. */
.siegel__werte {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7rem;
  row-gap: 0.85rem;
  align-items: baseline;
  margin: 1.2rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.siegelwert { display: contents; }
.siegelwert b {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.siegelwert span {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.siegel__id {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-ink);
}

@media (max-width: 900px) {
  .eignung__raster { grid-template-columns: 1fr; }
  /* Text zuerst, das Siegel danach: sonst steht die Karte vor der Ueberschrift */
  .eignung__text { order: 1; }
  .eignung__siegel {
    order: 2;
    position: static;
    max-width: 380px;
    margin-inline: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .siegel__ring { animation: none; }
  .eignung__siegel { transition: none; }
  .eignung__siegel:hover { transform: none; }
}

/* Verweis am Ende einer Listenkarte (z. B. Hamburg Digital Check) */
.lkarte__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal-ink);
  text-decoration: none;
  transition: color 0.4s ease, gap 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.lkarte__link svg {
  width: 15px; height: 15px;
  transition: transform 0.45s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover) {
  .lkarte__link:hover { color: var(--blue); gap: 0.65rem; }
  .lkarte__link:hover svg { transform: translateX(2px); }
}
.section--dark .lkarte__link { color: var(--teal); }
@media (prefers-reduced-motion: reduce) {
  .lkarte__link, .lkarte__link svg { transition: none; }
  .lkarte__link:hover svg { transform: none; }
}

/* ---------- Icon-Reihe: Symbol plus Stichwort, ohne Erklaersatz ----------
   So standen Voraussetzungen und Foerderthemen auf der Originalseite. Die
   Kacheln fliessen nebeneinander und brechen bei Bedarf um, die letzte
   Reihe bleibt mittig. */
.iconreihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.3rem);
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.ikachel {
  flex: 1 1 190px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(1.3rem, 2.6vw, 1.8rem) 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
  /* Grund-Schatten schon im Ruhezustand, damit der Hover weich hineinblendet
     statt aus dem Nichts aufzuploppen. */
  box-shadow: 0 8px 20px -18px rgba(12, 22, 38, 0.28);
}
/* Die Kacheln tragen data-reveal fuer den Auftritt. Dessen Regel
   "html.js [data-reveal]" ist spezifischer als .ikachel und hat die
   Hover-Transition verschluckt: deshalb sprang der Effekt hart um.
   Hier beide Listen zusammen, mit passender Spezifitaet. */
html.js .ikachel[data-reveal],
.ikachel {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.ikachel p {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}
.ikachel__symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(140deg, rgba(47, 77, 158, 0.1), rgba(47, 163, 186, 0.14));
  color: var(--blue);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.ikachel__symbol svg { width: 25px; height: 25px; }

@media (hover: hover) {
  .ikachel:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 163, 186, 0.32);
    box-shadow: 0 18px 34px -26px rgba(12, 22, 38, 0.32);
  }
  .ikachel:hover .ikachel__symbol { transform: scale(1.04); color: var(--teal-ink); }
}

/* Auf dunklem Grund */
.section--dark .ikachel {
  border-color: var(--dark-line);
  background: rgba(255, 255, 255, 0.04);
}
.section--dark .ikachel p { color: #fff; }
.section--dark .ikachel__symbol { color: var(--teal); }

@media (max-width: 620px) {
  .iconreihe { gap: 0.7rem; }
  .ikachel { flex: 1 1 calc(50% - 0.7rem); max-width: none; padding: 1.2rem 0.7rem; }
  .ikachel p { font-size: 0.86rem; }
  .ikachel__symbol { width: 46px; height: 46px; }
  .ikachel__symbol svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .ikachel[data-reveal],
  .ikachel, .ikachel__symbol { transition: none; }
  .ikachel:hover { transform: none; }
  .ikachel:hover .ikachel__symbol { transform: none; }
}

/* Feste Kachelzahl je Reihe (Foerderthemen: sieben Stueck). Als Raster statt
   Flex, damit keine Luecke entsteht: die untere Reihe ist schmal-breit-schmal
   und damit spiegelsymmetrisch zur Mittelachse. Die breite Kachel legt Symbol
   und Text nebeneinander. */
.iconreihe--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
.iconreihe--4 .ikachel { flex: none; max-width: none; }

/* die mittlere der unteren drei fuellt zwei Spalten */
.iconreihe--4 .ikachel--breit {
  grid-column: span 2;
  flex-direction: row;
  justify-content: center;
  gap: 1.05rem;
}
.iconreihe--4 .ikachel--breit p { text-align: left; text-wrap: nowrap; }

@media (max-width: 1000px) {
  /* drei Spalten: 3 + 3 + eine breite als Abschluss */
  .iconreihe--4 { grid-template-columns: repeat(3, 1fr); }
  .iconreihe--4 .ikachel--breit {
    grid-column: auto;
    flex-direction: column;
    gap: 0.85rem;
  }
  .iconreihe--4 .ikachel--breit p { text-align: center; text-wrap: balance; }
  .iconreihe--4 .ikachel:last-child {
    grid-column: span 3;
    flex-direction: row;
    justify-content: center;
    gap: 1.05rem;
  }
  .iconreihe--4 .ikachel:last-child p { text-align: left; text-wrap: nowrap; }
}
@media (max-width: 620px) {
  /* zwei Spalten: 3 x 2 + eine breite als Abschluss */
  .iconreihe--4 { grid-template-columns: repeat(2, 1fr); }
  .iconreihe--4 .ikachel:last-child { grid-column: span 2; }
}

/* ============================================================================
   Foerder-Check (Funnel)
   Ersetzt das WordPress-Plugin der alten Seite. Alle Schritte stehen im HTML,
   sichtbar ist immer nur einer. Ohne JavaScript bleibt die Sektion als lange
   Liste bedienbar: die Schrittsteuerung schaltet erst die Klasse "ist-aktiv"
   frei, wenn das Skript laeuft.
   ========================================================================== */
.funnel {
  /* ueber die Deko-Punkte der Sektion legen, sonst liegen sie auf den Karten */
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  padding: clamp(1.4rem, 3.4vw, 2.4rem);
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 24px 54px -36px rgba(12, 22, 38, 0.5);
}
.funnel__honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Das UA-Stylesheet setzt [hidden]{display:none}, eigene display-Regeln (z. B.
   .btn{display:inline-flex}) haben dieselbe Spezifitaet und gewinnen per
   Reihenfolge. Deshalb hier ausdruecklich nachziehen, sonst stehen Zurueck-
   und Senden-Knopf schon im ersten Schritt da. */
.funnel [hidden],
.funnel__danke[hidden] { display: none !important; }

/* --- Fortschritt --- */
.funnel__fortschritt { margin-bottom: clamp(1.3rem, 3vw, 1.9rem); }
.funnel__balken {
  height: 6px;
  border-radius: 999px;
  background: rgba(47, 77, 158, 0.12);
  overflow: hidden;
}
.funnel__balken span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--grad);
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.funnel__zaehler {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.funnel__zaehler b { color: var(--blue); }

/* --- Schritte --- */
.funnel__schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Erst wenn das Skript laeuft, wird auf "einer nach dem anderen" umgestellt */
.funnel.ist-gefuehrt .funnel__schritt { display: none; }
.funnel.ist-gefuehrt .funnel__schritt.ist-aktiv { display: block; }
.funnel.ist-gefuehrt .funnel__schritt + .funnel__schritt { margin-top: 0; }
.funnel__schritt + .funnel__schritt { margin-top: 2.4rem; }

.funnel__frage {
  padding: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.funnel__hinweis {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* --- Antwortkarten --- */
.funnel__karten {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 3), 1fr);
  gap: clamp(0.7rem, 1.8vw, 1rem);
  margin-top: clamp(1.2rem, 3vw, 1.7rem);
}
.funnel__karten--1 { --spalten: 1; }
.funnel__karten--2 { --spalten: 2; }
.funnel__karten--3 { --spalten: 3; }
.fkarte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) 0.9rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -18px rgba(12, 22, 38, 0.28);
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Die Auswahl liegt auf dem Radio, sichtbar ist die Karte */
.fkarte input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.fkarte__symbol {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(47, 77, 158, 0.1), rgba(47, 163, 186, 0.14));
  color: var(--blue);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease;
}
.fkarte__symbol svg { width: 24px; height: 24px; }
.fkarte__text {
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}
@media (hover: hover) {
  .fkarte:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 163, 186, 0.32);
    box-shadow: 0 18px 34px -26px rgba(12, 22, 38, 0.32);
  }
  .fkarte:hover .fkarte__symbol { transform: scale(1.04); color: var(--teal-ink); }
}
/* Tastaturbedienung sichtbar machen: der Fokus liegt auf dem Radio */
.fkarte:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }
.fkarte:has(input:checked) {
  border-color: var(--teal);
  background: linear-gradient(140deg, rgba(47, 77, 158, 0.06), rgba(47, 163, 186, 0.09));
  box-shadow: 0 18px 34px -26px rgba(12, 22, 38, 0.34);
}
.fkarte:has(input:checked) .fkarte__symbol { color: var(--teal-ink); }

/* --- Schieberegler --- */
.funnel__slider { margin-top: clamp(1.4rem, 3vw, 2rem); text-align: center; }
.funnel__wert {
  display: block;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-2);
}
.funnel__wert b {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.funnel__regler {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  height: 6px;
  margin: 1.4rem 0 0.7rem;
  border-radius: 999px;
  background: rgba(47, 77, 158, 0.14);
  cursor: pointer;
}
.funnel__regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--grad);
  box-shadow: 0 4px 12px -3px rgba(12, 22, 38, 0.45);
  cursor: grab;
}
.funnel__regler::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--blue);
  box-shadow: 0 4px 12px -3px rgba(12, 22, 38, 0.45);
  cursor: grab;
}
.funnel__regler:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.funnel__reglerenden {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

/* --- Eingabefelder --- */
.funnel__gitter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.8rem, 2vw, 1.1rem);
  margin-top: 1.2rem;
}
.funnel__feld--breit { grid-column: 1 / -1; }
.funnel__feld { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.funnel__gitter .funnel__feld { margin-top: 0; }
.funnel__label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.funnel__eingabe {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.funnel__eingabe:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(47, 163, 186, 0.16);
}
textarea.funnel__eingabe { resize: vertical; min-height: 96px; }
.funnel__fehler {
  min-height: 1em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #c02b2b;
}
.funnel__feld.is-fehler .funnel__eingabe { border-color: #c02b2b; }

/* --- Anrede-Pillen --- */
.funnel__anrede { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.fpille { position: relative; cursor: pointer; }
.fpille input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fpille span {
  display: block;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}
.fpille:has(input:checked) span {
  border-color: var(--teal);
  color: var(--teal-ink);
  background: rgba(47, 163, 186, 0.08);
}
.fpille:has(input:focus-visible) span { outline: 2px solid var(--teal); outline-offset: 2px; }
.funnel__anrede .funnel__fehler { flex: 1 0 100%; }

/* --- Ergebnis-Vorspann im letzten Schritt --- */
.funnel__ergebnis {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(47, 163, 186, 0.3);
  background: linear-gradient(140deg, rgba(47, 77, 158, 0.06), rgba(47, 163, 186, 0.09));
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.funnel__ergebnis b { color: var(--teal-ink); }

/* --- Datenschutzhaken --- */
.funnel__haken {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.2rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.funnel__haken input { margin-top: 0.2rem; width: 17px; height: 17px; accent-color: var(--teal); }

/* --- Fussleiste --- */
.funnel__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding-top: clamp(1.1rem, 2.4vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.funnel__zurueck { margin-right: auto; }
.funnel__meldung {
  margin: 1.2rem 0 0;
  padding: 0.85rem 1.05rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.funnel__meldung.is-schlecht { background: rgba(192, 43, 43, 0.08); color: #8c1f1f; }
.funnel__meldung.is-gut { background: rgba(47, 163, 186, 0.1); color: var(--teal-ink); }

/* --- Dankeschirm --- */
.funnel__danke {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: 24px;
  border: 1px solid rgba(47, 163, 186, 0.3);
  background: var(--surface);
  text-align: center;
  box-shadow: 0 24px 54px -36px rgba(12, 22, 38, 0.5);
}
.funnel__dankesymbol {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(47, 77, 158, 0.1), rgba(47, 163, 186, 0.16));
  color: var(--teal-ink);
}
.funnel__dankesymbol svg { width: 30px; height: 30px; }
.funnel__danke h3 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); margin: 0 0 0.6rem; }
.funnel__danke p { margin: 0; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 720px) {
  .funnel__karten { --spalten: 1 !important; }
  .funnel__gitter { grid-template-columns: 1fr; }
  .funnel__leiste .btn { flex: 1 1 100%; }
  .funnel__zurueck { order: 2; margin-right: 0; }
  /* Karten auf dem Handy als Liste: Symbol links, Text rechts */
  .fkarte { flex-direction: row; text-align: left; gap: 0.9rem; padding: 0.95rem 1rem; }
  .fkarte__symbol { width: 42px; height: 42px; flex: 0 0 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .fkarte, .fkarte__symbol, .funnel__balken span { transition: none; }
  .fkarte:hover { transform: none; }
  .fkarte:hover .fkarte__symbol { transform: none; }
}

/* ============================================================================
   Beratungsfelder: Fliesstext, darunter farbige Karten
   Bildet die ".box"-Reihen der Originalseite nach. Dort waren sie flaechig
   tuerkis (#50a3bd) mit weisser Schrift; hier uebernimmt der Markenverlauf
   diese Rolle.
   ========================================================================== */
.felder__text {
  max-width: 74ch;
  margin: 0 auto;
  font-size: clamp(1rem, 1.9vw, 1.08rem);
  line-height: 1.7;
  color: var(--ink-2);
  text-align: center;
  text-wrap: pretty;
}
.felder__text + .felder__text { margin-top: 0.9rem; }

/* Abschlusssatz unter den Kacheln, im Original ein eigener Textblock */
.felder__schluss {
  max-width: 74ch;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  font-size: clamp(1rem, 1.9vw, 1.08rem);
  line-height: 1.7;
  color: var(--ink-2);
  text-align: center;
  text-wrap: pretty;
}
.felder__schluss strong { color: var(--ink); }
.felder__schluss a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.felder__schluss a:hover { color: var(--teal-ink); }

.felder__karten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.25rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
/* Feste Muster je Kachelzahl als Raster, damit keine Luecke bleibt und die
   Reihen spiegelsymmetrisch stehen.
   Fuenf Kacheln: drei oben, darunter zwei breite, die die Reihe fuellen.
   Sechs Kacheln: drei und drei. */
.felder__karten--n5,
.felder__karten--n6 { display: grid; }
.felder__karten--n5 { grid-template-columns: repeat(6, 1fr); }
.felder__karten--n5 .fbox { grid-column: span 2; }
.felder__karten--n5 .fbox:nth-last-child(-n+2) { grid-column: span 3; }
.felder__karten--n6 { grid-template-columns: repeat(3, 1fr); }
.felder__karten--n3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.felder__karten--n4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.fbox {
  flex: 0 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 148px;
  padding: clamp(1.3rem, 2.6vw, 1.7rem) 1.1rem;
  border-radius: 18px;
  background: var(--grad);
  color: #fff;
  text-align: center;
  box-shadow: 0 16px 34px -24px rgba(12, 22, 38, 0.55);
}
.fbox p {
  margin: 0;
  /* Lange Komposita ("Digitalisierungsberatung") duerfen die Kachel sonst
     nicht schrumpfen lassen: min-width am Flex-Item steht per Vorgabe auf
     auto und richtet sich nach dem laengsten Wort. */
  hyphens: auto;
  overflow-wrap: break-word;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  text-wrap: balance;
}
/* Erklaersatz unter dem Stichwort, wenn die Kachel einen traegt */
.fbox__text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
}
.fbox:has(.fbox__text) { justify-content: flex-start; gap: 0.65rem; }
.fbox__symbol {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #fff;
}
.fbox__symbol svg { width: 34px; height: 34px; }

/* Zahlenkarte: im Original heller Grund mit tuerkisem Rahmen und grosser
   Summe darueber (dort ".funding-item" mit ".number"). */
.fbox--zahl {
  background: var(--surface);
  border: 2px solid rgba(47, 163, 186, 0.5);
  box-shadow: 0 12px 28px -24px rgba(12, 22, 38, 0.4);
  gap: 0.5rem;
}
.fbox--zahl p { color: var(--ink-2); font-weight: 500; }
.fbox__wert {
  font-size: clamp(2rem, 4.6vw, 2.85rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
@media (hover: hover) {
  /* Die helle Karte darf nicht aufhellen, sonst verschwindet der Text */
  .fbox--zahl:hover { filter: none; border-color: var(--teal); }
}

/* Die Karten tragen data-reveal fuer den Auftritt. Dessen Regel
   "html.js [data-reveal]" ist spezifischer als .fbox und wuerde die
   Hover-Transition sonst verschlucken. */
html.js .fbox[data-reveal],
.fbox {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  /* Im Original hob sich die Kachel per scale(1.05) und wurde heller */
  .fbox:hover {
    transform: translateY(-3px) scale(1.02);
    filter: saturate(1.12) brightness(1.06);
    box-shadow: 0 24px 44px -26px rgba(12, 22, 38, 0.5);
  }
}
@media (max-width: 900px) and (min-width: 621px) {
  /* Weniger Platz: sechs Kacheln als zwei Spalten, fuenf bleiben 3 + 2 breit */
  .felder__karten--n4,
  .felder__karten--n6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  /* Auf dem Handy alles untereinander, Symbol links neben dem Text */
  .felder__karten--n3,
  .felder__karten--n4,
  .felder__karten--n5,
  .felder__karten--n6 { grid-template-columns: 1fr; }
  .felder__karten--n5 .fbox,
  .felder__karten--n5 .fbox:nth-last-child(-n+2) { grid-column: auto; }
  .fbox { flex: 1 1 100%; min-height: 0; flex-direction: row; justify-content: flex-start; gap: 1rem; text-align: left; padding: 1.05rem 1.15rem; }
  .fbox--zahl { flex-direction: column; justify-content: center; text-align: center; gap: 0.4rem; padding: 1.3rem 1.15rem; }
  .fbox__symbol { flex: 0 0 40px; width: 40px; height: 40px; }
  .fbox__symbol svg { width: 28px; height: 28px; }
  .fbox p { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .fbox[data-reveal],
  .fbox { transition: none; }
  .fbox:hover { transform: none; filter: none; }
}

/* ============================================================================
   Shop-Galerie: Kacheln mit selbst gezeichnetem Mockup
   Ersetzt die Bildschirmfotos der Originalseite. Fuenf Eintraege stehen als
   drei plus zwei breite Kacheln, damit keine allein unten steht.
   ========================================================================== */
.shopbilder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.shopbilder--n5 { grid-template-columns: repeat(6, 1fr); }
.shopbilder--n5 .shopbild { grid-column: span 2; }
.shopbilder--n5 .shopbild:nth-last-child(-n+2) { grid-column: span 3; }

.shopbild {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(0.9rem, 1.8vw, 1.1rem);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  box-shadow: 0 10px 24px -20px rgba(12, 22, 38, 0.3);
}
.shopbild__rahmen {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(47, 77, 158, 0.07), rgba(47, 163, 186, 0.1));
  padding: clamp(0.7rem, 1.6vw, 1rem);
}
.shopbild__svg { display: block; width: 100%; height: auto; }
.shopbild__fuss { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0.3rem 0.2rem; }
.shopbild__fuss b { font-size: 1rem; font-weight: 700; color: var(--ink); }
.shopbild__fuss span { font-size: 0.84rem; color: var(--ink-2); }

/* Die Kacheln tragen data-reveal; dessen Regel ist spezifischer als .shopbild
   und wuerde die Hover-Transition sonst verschlucken. */
html.js .shopbild[data-reveal],
.shopbild {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  a.shopbild:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 163, 186, 0.35);
    box-shadow: 0 24px 44px -26px rgba(12, 22, 38, 0.4);
  }
}
a.shopbild:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Knopf unter einer Sektion, mittig */
.section__knopf { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; text-align: center; }

@media (max-width: 900px) {
  .shopbilder { grid-template-columns: repeat(2, 1fr); }
  .shopbilder--n5 { grid-template-columns: repeat(2, 1fr); }
  .shopbilder--n5 .shopbild,
  .shopbilder--n5 .shopbild:nth-last-child(-n+2) { grid-column: auto; }
  .shopbilder--n5 .shopbild:last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .shopbilder, .shopbilder--n5 { grid-template-columns: 1fr; }
  .shopbilder--n5 .shopbild:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .shopbild[data-reveal], .shopbild { transition: none; }
  a.shopbild:hover { transform: none; }
}

/* ============================================================================
   Laufende Kundenlogo-Baender
   Statt eines starren Rasters wandern die Logos in mehreren Reihen
   gegenlaeufig durchs Bild. Beim Zeigen haelt das Band an, damit man ein
   Logo in Ruhe ansehen kann.
   ========================================================================== */
.logoband {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  /* Aussen ausblenden, damit die Logos nicht hart am Rand abgeschnitten wirken */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logoband__reihe {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* Ohne Zeiger (Touch) laesst sich das Band von Hand schieben */
  -webkit-overflow-scrolling: touch;
}
.logoband__reihe::-webkit-scrollbar { display: none; }

.logoband__spur {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.8vw, 1.2rem);
  width: max-content;
  animation: logoband-lauf var(--dauer, 46s) linear infinite;
  /* eigener Compositing-Layer, damit der Lauf nichts anderes neu malt */
  will-change: transform;
}
.logoband__reihe--zurueck .logoband__spur { animation-direction: reverse; }
@keyframes logoband-lauf {
  from { transform: translate3d(0, 0, 0); }
  /* die Haelfte, weil jede Reihe doppelt im Markup steht */
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) {
  .logoband:hover .logoband__spur { animation-play-state: paused; }
}
.logoband__reihe:focus-within .logoband__spur { animation-play-state: paused; }

/* Die Kacheln im Band: feste Groesse, damit die Reihen ruhig laufen */
.logoband .logos__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: clamp(130px, 15vw, 168px);
  height: clamp(74px, 8.5vw, 92px);
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 8px 20px -18px rgba(12, 22, 38, 0.28);
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.logoband .logos__item img {
  /* Die allgemeine Regel .logos__item img setzt Graustufen und halbe
     Deckkraft. Im Band sollen die Marken in Farbe stehen. */
  filter: none;
  opacity: 1;
  max-width: 100%;
  /* konkrete Grenze statt Prozent: sonst behalten hohe Logos ihre
     Eigenhoehe und stehen unten ueber die Kachel hinaus */
  max-height: clamp(44px, 5vw, 56px);
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (hover: hover) {
  .logoband .logos__item:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 163, 186, 0.35);
    box-shadow: 0 20px 38px -24px rgba(12, 22, 38, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung: Baender stehen still und bleiben von Hand scrollbar */
  .logoband__spur { animation: none; }
  .logoband .logos__item { transition: none; }
}

/* ============================================================================
   Kundenstimmen als laufendes Band
   Gleiche Mechanik wie die Logo-Baender: die Reihe wandert langsam, haelt
   beim Zeigen an und laesst sich von Hand schieben. Alle Karten sind gleich
   hoch, weil die Reihe sie auf die Hoehe der laengsten streckt.
   ========================================================================== */
.kstimmen {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  /* Das Band steht in der Seitenbreite. Die Raender laufen weich aus, damit
     die Karten dort nicht hart abgeschnitten wirken. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.kstimmen__reihe {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kstimmen__reihe::-webkit-scrollbar { display: none; }

.kstimmen__spur {
  display: flex;
  /* stretch statt center: dadurch sind alle Karten gleich hoch */
  align-items: stretch;
  gap: clamp(0.9rem, 2vw, 1.3rem);
  padding: 0.4rem clamp(0.9rem, 2vw, 1.3rem);
  width: max-content;
  animation: logoband-lauf var(--dauer, 90s) linear infinite;
  will-change: transform;
}
@media (hover: hover) {
  .kstimmen:hover .kstimmen__spur { animation-play-state: paused; }
}
.kstimmen__reihe:focus-within .kstimmen__spur { animation-play-state: paused; }

.kstimme {
  flex: 0 0 auto;
  width: clamp(290px, 27vw, 380px);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 12px 28px -22px rgba(12, 22, 38, 0.32);
  transition:
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.kstimme__zeichen {
  display: block;
  font-size: 3rem;
  line-height: 0.7;
  height: 0.45em;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.kstimme__zitat {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.kstimme__wer {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  /* schiebt die Zuordnung immer an den unteren Rand der Karte */
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.kstimme__wer b { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.kstimme__wer span { font-size: 0.84rem; color: var(--ink-2); }
@media (hover: hover) {
  .kstimme:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 163, 186, 0.32);
    box-shadow: 0 22px 40px -26px rgba(12, 22, 38, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kstimmen__spur { animation: none; }
  .kstimme { transition: none; }
  .kstimme:hover { transform: none; }
}

/* ============================================================================
   Team: runde Portraits
   Die Fotos sind unterschiedlich hoch und teils freigestellt. Als Kreis mit
   fester Groesse stehen alle Karten gleich hoch nebeneinander, unabhaengig
   vom Seitenverhaeltnis der Vorlage.
   ========================================================================== */
/* Gleiche Hoehe fuer alle Karten, auch wenn eine Rolle zweizeilig umbricht
   (z. B. "Digital Performance Manager (International Markets)"). Der
   Container ist Flex mit Umbruch: stretch gilt je Zeile, deshalb zusaetzlich
   eine Mindesthoehe, damit auch die Zeilen untereinander gleich hoch sind. */
.team--rund { align-items: stretch; }
/* Inhalt mittig statt oben: der Ausgleichsplatz, den die Mindesthoehe
   erzeugt, verteilt sich dadurch gleichmaessig auf oben und unten. */
/* 360px reicht auch fuer die laengste Rolle ("Digital Performance Manager
   (International Markets)"), damit wirklich alle Karten gleich hoch sind. */
.team--rund .teamer { min-height: 360px; justify-content: center; }

/* Die hervorgehobenen Ansprechpartner: gleiche runde Optik, nur groessere
   Portraits und Platz fuer den Zusatzsatz. Das urspruengliche Nebeneinander
   (Bild links, Text rechts) bricht bei drei Spalten die Namen mitten im Wort. */
.team--gross.team--rund .teamer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* oben buendig statt zentriert: sonst verschiebt ein laengerer Schlusssatz
     Bild, Name und Rolle gegenueber den Nachbarkarten nach oben */
  justify-content: flex-start;
  min-height: 0;
  padding: clamp(1.9rem, 3.2vw, 2.6rem) clamp(1.3rem, 2.4vw, 1.8rem) clamp(1.9rem, 3.2vw, 2.4rem);
}
.team--gross.team--rund .teamer__bild {
  width: clamp(150px, 17vw, 210px);
  height: clamp(150px, 17vw, 210px);
}
.team--gross.team--rund .teamer__name { font-size: clamp(1.1rem, 1.9vw, 1.3rem); }
/* Feste Hoehe fuer Name und Rolle, damit der Satz darunter bei allen drei
   Karten auf derselben Hoehe beginnt, egal wie lang die Rolle ist. */
.team--gross.team--rund .teamer__name { min-height: 1.5em; display: flex; align-items: center; }
.team--gross.team--rund .teamer__rolle { min-height: 2.6em; align-items: flex-start; }
.team--gross.team--rund .teamer__motto {
  text-align: center;
  text-wrap: pretty;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  width: 100%;
}
/* Ohne Zusatzsatz stehen die drei Karten wie die uebrigen: Bild, Name,
   Rolle. Der Innenabstand faellt dann etwas knapper aus. */
.team--gross.team--rund .teamer:not(:has(.teamer__motto)) {
  padding-bottom: clamp(1.5rem, 2.6vw, 2rem);
}
@media (max-width: 900px) { .team--rund .teamer { min-height: 330px; } }
@media (max-width: 560px) { .team--rund .teamer { min-height: 0; } }
.team--rund .teamer { text-align: center; }
.team--rund .teamer__bild {
  width: clamp(128px, 15vw, 176px);
  height: clamp(128px, 15vw, 176px);
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--line);
}
.team--rund .teamer__bild img {
  width: 100%;
  height: 100%;
  /* oben ausgerichtet: bei Portraits sitzt der Kopf im oberen Drittel */
  object-fit: cover;
  /* 8 % statt 18 %: dadurch bleibt ueber dem Kopf bei allen Portraits
     sichtbar Luft, statt dass er am oberen Kreisrand klebt. */
  object-position: center 8%;
  display: block;
}
/* Auf dieser Aufnahme sitzt der Kopf weiter weg als bei den anderen,
   deshalb hier etwas naeher heran, damit die Reihe einheitlich wirkt. */
/* Auf dieser Aufnahme sitzt der Kopf hoeher und groesser im Bild als bei
   den uebrigen. Ohne Zoom und mit tieferem Ausschnitt ist wie bei den
   anderen auch ein Stueck Oberkoerper zu sehen. */
.team--rund .teamer__bild img[src*="team-seo"] { object-position: center 26%; }

/* Alle Teamfotos liegen im gleichen Hochformat vor, deshalb braucht keines
   davon noch eine Sonderausrichtung. */

/* Dezent umlaufender Lichtbogen um das Portrait.
   Der Bogen ist ein rotierender conic-gradient, den eine ringfoermige Maske
   auf den Rand beschraenkt. Er liegt auf einem eigenen Compositing-Layer,
   damit seine Drehung nichts anderes neu zeichnet. */
.team--rund .teamer__bild { position: relative; }
.team--rund .teamer__bild::after {
  content: "";
  position: absolute;
  /* inset: 0, nicht negativ: der Bildrahmen clippt mit overflow: hidden,
     ein Ring ausserhalb waere unsichtbar */
  inset: 0;
  border-radius: 50%;
  /* durchgehender Ring: der Farbverlauf schliesst sich ueber volle 360 Grad,
     beim Drehen wandert die helle Stelle einmal komplett herum */
  background: conic-gradient(from 0deg,
    rgba(63, 214, 232, 1) 0deg,
    rgba(47, 163, 186, 0.9) 55deg,
    rgba(76, 111, 208, 0.75) 130deg,
    rgba(47, 77, 158, 0.5) 200deg,
    rgba(47, 163, 186, 0.6) 275deg,
    rgba(63, 214, 232, 1) 360deg);
  /* closest-side ist entscheidend: ohne das misst radial-gradient bis zur
     ECKE des Quadrats (etwa 141 % des Kreisradius), der Ring laege dann
     komplett ausserhalb des sichtbaren Kreises und bliebe unsichtbar. */
  -webkit-mask: radial-gradient(closest-side circle, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
          mask: radial-gradient(closest-side circle, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  animation: teamlaser 7s linear infinite;
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
  opacity: 1;
}
@keyframes teamlaser { to { transform: rotate(360deg) translateZ(0); } }
/* Versetzter Start, damit nicht alle Kreise im Gleichtakt leuchten */
.team--rund .teamer:nth-child(3n+2) .teamer__bild::after { animation-delay: -2.3s; }
.team--rund .teamer:nth-child(3n)   .teamer__bild::after { animation-delay: -4.6s; }
.team--rund .teamer:nth-child(4n)   .teamer__bild::after { animation-duration: 8.5s; }
@media (prefers-reduced-motion: reduce) {
  .team--rund .teamer__bild::after { animation: none; opacity: 0.4; }
}

.team--rund .teamer__bild--platzhalter {
  display: grid;
  place-items: center;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--blue);
}
.team--rund .teamer__name { margin-top: 0.9rem; }
/* Gleich hohe Karten, auch wenn eine Rolle zweizeilig umbricht.
   Die Grundregel setzt oben kein Padding, dadurch klebte das runde Bild
   an der Kartenkante. */
.team--rund .teamer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.4rem, 2.4vw, 1.8rem) clamp(1rem, 2vw, 1.4rem);
  border-radius: 20px;
  border: 1px solid var(--line);
  /* leichter Verlauf von oben nach unten, damit die Karte nicht flach wirkt */
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 62%, #f6f8fc 100%);
  box-shadow: 0 12px 28px -24px rgba(12, 22, 38, 0.34);
  transition:
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .team--rund .teamer:hover {
    transform: translateY(-4px);
    border-color: rgba(47, 163, 186, 0.3);
    box-shadow: 0 26px 46px -28px rgba(12, 22, 38, 0.42);
  }
}
@media (prefers-reduced-motion: reduce) {
  .team--rund .teamer { transition: none; }
  .team--rund .teamer:hover { transform: none; }
}
/* Die Rolle bekommt festen Platz fuer zwei Zeilen. Sehr lange Bezeichnungen
   ("Digital Performance Manager (International Markets)") werden dafuer
   etwas kleiner gesetzt, statt die Karte in die Hoehe zu ziehen. */
.team--rund .teamer__rolle {
  text-wrap: balance;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9em;
  margin-top: 0.35rem;
}
.team--rund .teamer__rolle:has(> :only-child),
.team--rund .teamer__rolle { font-size: 0.76rem; }
@media (hover: hover) {
  .team--rund .teamer:hover .teamer__bild {
    border-color: rgba(47, 163, 186, 0.4);
  }
}
.team--rund .teamer__bild {
  transition: border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .team--rund .teamer:hover .teamer__bild { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .team--rund .teamer__bild { transition: none; }
  .team--rund .teamer:hover .teamer__bild { transform: none; }
}


/* ============================================================
   Logo im Bildrahmen (sektion_split mit 'logo' => true)
   Ein Marken-Logo darf nicht formatfuellend sitzen: es braucht
   Luft ringsum und darf nicht beschnitten werden.
   ============================================================ */
.bildrahmen--logo {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: #fff;
}
.bildrahmen--logo img {
  width: 100%;
  max-width: 22rem;
  height: auto;
  object-fit: contain;
}

/* Laengere Akkordeon-Antworten: mehrere Absaetze und Aufzaehlungen.
   Ohne das kleben Absatz und Liste aneinander. */
.faq__item p + p,
.faq__item p + ul,
.faq__item ul + p { margin-top: 0.7rem; }
.faq__item ul.ticks { padding-bottom: 1.2rem; max-width: 44em; }
.faq__item p + p,
.faq__item p:not(:last-child) { padding-bottom: 0; }


/* ============================================================
   Senkrechte Zeitleiste (sektion_zeitleiste)
   Mittellinie, Jahres-Punkt, Karten links und rechts im Wechsel.
   Unter 900px klappt alles auf eine Spalte, Linie wandert nach links.
   ============================================================ */
.zeitleiste {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 68rem;
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
/* Die Mittellinie */
.zeitleiste::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.zstation {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
}
/* Jahres-Punkt auf der Linie */
.zstation__jahr {
  grid-column: 2;
  /* Sticky: die Jahreszahl laeuft beim Scrollen an der Karte entlang nach
     unten mit und bleibt sichtbar, solange die Station im Bild ist. */
  position: sticky;
  top: 7rem;
  margin-top: 0.4rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}
.zstation__karte {
  grid-column: 1;
  grid-row: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
}
/* Jede zweite Station nach rechts */
.zstation:nth-child(even) .zstation__karte { grid-column: 3; }
.zstation__karte:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.zstation__bild { margin: 0; background: var(--bg-2, #f4f6f8); }
.zstation__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.zstation__text { padding: clamp(1.1rem, 2vw, 1.5rem); }
.zstation__text h3 { font-size: 1.08rem; line-height: 1.35; margin: 0 0 0.5rem; }
.zstation__text h3 a { color: inherit; text-decoration: none; }
.zstation__text h3 a:hover { color: var(--blue); }
.zstation__text p { color: var(--ink-2); font-size: 0.95rem; margin: 0; }
.zstation__mehr { margin-top: 0.7rem !important; }
.zstation__mehr a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.zstation__mehr a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .zeitleiste::before { left: 1.6rem; }
  .zstation { grid-template-columns: 3.2rem 1fr; column-gap: 1rem; }
  .zstation__jahr {
    grid-column: 1;
    grid-row: 1;
    top: 5.5rem;
    width: 3.2rem;
    height: 3.2rem;
    font-size: 0.72rem;
  }
  .zstation__karte,
  .zstation:nth-child(even) .zstation__karte { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .zstation__karte { transition: none; }
  .zstation__karte:hover { transform: none; }
}

/* Logo und Knopf im Split-Abschnitt (sektion_split mit 'cta'/'cta_bild') */
.case__logo { display: block; width: auto; max-width: 12rem; height: auto; margin: 1.4rem 0 0; }
.case__cta { margin-top: 1.4rem; }
/* Logos und Zertifikate in der Zeitleiste nicht beschneiden */
.zstation__bild--passend { background: #fff; padding: 1.2rem; }
.zstation__bild--passend img { object-fit: contain; aspect-ratio: 16 / 10; }

/* Kundenlogos: farbig statt grau und als zentrierte Reihe */
.logos__grid--farbig .logos__item img { filter: none; opacity: 1; }
.logos__grid--mittig {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.logos__grid--mittig .logos__item { flex: 0 1 clamp(9rem, 16vw, 12rem); }


/* ============================================================
   Textkarten (sektion_textkarten)
   Absaetze ohne eigene Ueberschrift, die sonst als graue Textwand
   stehen wuerden. Kein erfundener Titel, nur eine laufende Nummer.
   ============================================================ */
.tkarten {
  --spalten: 2;
  --luecke: clamp(1rem, 1.8vw, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luecke);
}
.tkarten.sp-2 { --spalten: 2; }
.tkarten.sp-3 { --spalten: 3; }
.tkarten > * {
  flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
  min-width: 0;
}
.tkarte {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  padding-top: clamp(2.6rem, 3.6vw, 3.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.tkarte:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* Feiner Farbstrich oben, damit die Karten nicht als leere Kaesten wirken */
.tkarte::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 3.4rem;
  height: 3px;
  margin: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal, #2fa3ba));
}
.tkarte__nr {
  position: absolute;
  top: clamp(1.1rem, 2vw, 1.6rem);
  right: clamp(1.2rem, 2.2vw, 1.8rem);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  opacity: 0.55;
}
.tkarte p { color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .tkarten { --spalten: 1 !important; } }
@media (prefers-reduced-motion: reduce) {
  .tkarte { transition: none; }
  .tkarte:hover { transform: none; }
}


/* Textkarten-Muster "1+2": ein langer Absatz breit links, zwei kuerzere
   rechts uebereinander. Nur so bleiben stark unterschiedlich lange
   Absaetze in einer Reihe ohne halbleere Kaesten. */
.tkarten--1plus2 {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-auto-rows: min-content;
  /* start statt stretch: die breite Karte links soll nur so hoch sein wie
     ihr Text, nicht auf die Hoehe beider Karten rechts gezogen werden. */
  align-items: start;
}
.tkarten--1plus2 > * { flex: none; }
.tkarten--1plus2 > :first-child { grid-column: 1; grid-row: 1 / span 2; }
.tkarten--1plus2 > :nth-child(2) { grid-column: 2; grid-row: 1; }
.tkarten--1plus2 > :nth-child(3) { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) {
  .tkarten--1plus2 { grid-template-columns: 1fr; }
  .tkarten--1plus2 > :first-child,
  .tkarten--1plus2 > :nth-child(2),
  .tkarten--1plus2 > :nth-child(3) { grid-column: 1; grid-row: auto; }
}


/* ============================================================
   Lesestrecke mit abgesetzten Absaetzen (sektion_prosa 'getrennt')
   Fuer lange Textstrecken, die im Original keine Zwischenueberschriften
   haben: erster Absatz als Vorspann, danach jeder Absatz durch eine
   feine Linie getrennt. Kein Wort wird dafuer erfunden.
   ============================================================ */
.prosa--getrennt p {
  font-size: 1.02rem;
  line-height: 1.78;
}
/* Vorspann: der erste echte Absatz traegt die Strecke. Der Kicker ist
   ebenfalls ein <p>, deshalb wird er hier ueberall ausgenommen. */
.prosa--getrennt > .prosa__kicker + p,
.prosa--getrennt > p:not(.prosa__kicker):first-child {
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink);
}
/* Trennung zwischen den Absaetzen: Linie mit Luft, kein Kasten.
   Nicht zwischen Kicker und erstem Absatz. */
.prosa--getrennt > p:not(.prosa__kicker) + p {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
}
/* Eine Zwischenueberschrift braucht mehr Luft als der Abstand zwischen zwei
   Absaetzen derselben Strecke (dort sind es Rand plus Innenabstand, zusammen
   rund 4,8rem). Sonst wirkt die Ueberschrift wie der Schluss des Abschnitts
   darueber statt wie der Anfang des naechsten. */
.prosa--getrennt h2 { margin-top: clamp(4rem, 7vw, 5.6rem); }
.prosa--getrennt h3 { margin-top: clamp(2.6rem, 4vw, 3.4rem); }
.prosa--getrennt > :is(h2, h3):first-child { margin-top: 0; }
/* Kurzer Farbstrich vor dem Kicker, damit die Strecke einen Anfang hat */
.prosa--getrennt > .prosa__kicker { position: relative; padding-left: 3rem; }
.prosa--getrennt > .prosa__kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.2rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal, #2fa3ba));
}
@media (max-width: 620px) {
  .prosa--getrennt > .prosa__kicker { padding-left: 2.4rem; }
  .prosa--getrennt > .prosa__kicker::before { width: 1.6rem; }
}


/* ============================================================
   Zwischenzeile im Seitenkopf (seiten_hero 'unter')
   Steht auf der Originalseite zwischen Ueberschrift und Vorspann.
   ============================================================ */
.page-hero__unter {
  margin: 0.9rem 0 0;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
}
.page-hero__unter + .page-hero__text { margin-top: 0.7rem; }

/* Zwei Bilder nebeneinander in der Lesestrecke (sektion_prosa 'bilder').
   Fuer Logos: weisser Grund, nichts wird beschnitten. */
.prosa__bilder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  margin-top: 1.8rem;
}
.prosa__bilder figure {
  flex: 1 1 12rem;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.prosa__bilder img { display: block; width: 100%; height: auto; }
.prosa__bilder--logo figure {
  display: grid;
  place-items: center;
  background: #fff;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.prosa__bilder--logo img { max-width: 14rem; object-fit: contain; }

/* Split-Abschnitt ohne Bild: eine mittige Textspalte statt zwei Spalten */
.case--nurtext {
  display: block;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.case--nurtext .case__logo { margin-inline: auto; }
/* Frage als Ueberschrift im Akkordeon: erbt die Optik des summary */
.faq__item summary h6 { font: inherit; margin: 0; display: inline; }

/* Zeitleiste: Sprungziele nicht unter der Kopfleiste, lange Titel umbrechen */
.zeitleiste [id] { scroll-margin-top: var(--header-h, 6rem); }
.zstation__titel { text-wrap: balance; overflow-wrap: anywhere; }
.zstation__text p { overflow-wrap: anywhere; }

/* Schritte im 2- oder 3-Spalten-Raster: der gestrichelte Verbinder gehoert
   nur zwischen zwei Karten derselben Zeile, nicht an das Zeilenende. */
.steps.sp-2 > .step:nth-child(2n)::before,
.steps.sp-3 > .step:nth-child(3n)::before { display: none; }

/* Akzent-Zeile in der Lesestrecke (sektion_prosa, 'typ' => 'akzent')
   Halbfett und in der Markenfarbe, wie die hervorgehobenen Zeilen der
   Originalseiten. */
.prosa .prosa__akzent {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--teal, #2fa3ba);
}
.prosa--getrennt > .prosa__akzent + p { border-top: 0; padding-top: 0; }
/* Zitat in der Lesestrecke (sektion_prosa, 'typ' => 'zitat'): Karte mit
   Markenbalken links, Anfuehrungszeichen als Deko. */
.prosa .prosa__zitat {
  position: relative;
  margin: 1.4rem 0 1.6rem;
  padding: 1.15rem 3.6rem 1.15rem 1.6rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.prosa .prosa__zitat::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #2f5fd8, #2fa3ba);
}
.prosa .prosa__zitat::after {
  content: "\201E";
  position: absolute; right: 1rem; top: -0.6rem;
  font-size: 4.5rem; line-height: 1; font-weight: 800;
  color: var(--teal, #2fa3ba); opacity: 0.16; pointer-events: none;
}
.prosa .prosa__zitat p { margin: 0; font-size: 1.04rem; line-height: 1.65; color: var(--ink); }
.prosa .prosa__zitat-wer {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-ink);
}
.prosa--getrennt > .prosa__zitat + p { border-top: 0; padding-top: 0; }
/* Banner ueber dem Text: volle Breite der Lesespalte, ohne Beschnitt */
.prosa__bild--oben { margin-top: 0; margin-bottom: 1.8rem; box-shadow: var(--shadow); }
.prosa__bild--oben img { width: 100%; height: auto; }


/* ============================================================
   Stellenanzeige (sektion_stellenanzeige)
   Karten untereinander wie auf den Original-Stellenseiten: erste Karte
   mit farbigem Streifen links, darunter je ein Abschnitt pro Karte.
   ============================================================ */
.stellen {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  max-width: 52rem;
  margin-inline: auto;
}
.jobkarte {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.6rem, 3.2vw, 2.5rem);
}
/* Titelkarte: farbige Linie links, wie im Original */
.jobkarte--kopf { border-left: 4px solid var(--teal, #2fa3ba); }
.jobkarte__titel {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 0.7rem;
  text-wrap: balance;
}
.jobkarte__meta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  margin: 0 0 1.1rem;
}
.jobkarte__text { color: var(--ink-2); margin: 0; }
.jobkarte__text + .jobkarte__text { margin-top: 0.8rem; }
/* Abschnittsueberschrift mit Unterstrich, wie im Original */
.jobkarte__abschnitt {
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.2rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--line);
}
.jobliste { list-style: none; margin: 0; padding: 0; }
.jobliste li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.6rem;
  color: var(--ink-2);
  line-height: 1.65;
}
.jobliste li::before {
  content: "•";
  position: absolute;
  left: 0.3rem;
  top: 0.35rem;
  color: var(--teal-ink);
  font-size: 1.25rem;
  line-height: 1.35;
}
/* Karte mit nur einer Angabe (z. B. "Beginn: nach Absprache"): schmaler,
   ohne Unterstrich unter der Zeile. */
.jobkarte--knapp { padding-block: clamp(1.1rem, 2.2vw, 1.5rem); }
.jobkarte__abschnitt--allein { margin: 0; padding-bottom: 0; border-bottom: 0; }
/* Fliesstext, der auf eine Aufzaehlung folgt, braucht Abstand */
.jobliste + .jobkarte__text { margin-top: 1.1rem; }


/* ============================================================
   Team-Band (sektion_teamband)
   Laufende Reihe runder Portraits ohne Namen, wie der Team-Slider der
   Original-Kontaktseite.
   ============================================================ */
.teamband {
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.teamband__reihe {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.teamband__reihe::-webkit-scrollbar { display: none; }
.teamband__spur {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.6rem);
  width: max-content;
  animation: teamband-lauf var(--dauer, 64s) linear infinite;
  will-change: transform;
}
@keyframes teamband-lauf {
  from { transform: translate3d(0, 0, 0); }
  /* die Haelfte, weil die Reihe doppelt im Markup steht */
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) {
  .teamband:hover .teamband__spur { animation-play-state: paused; }
}
.teamband__reihe:focus-within .teamband__spur { animation-play-state: paused; }
.teamband__kopf {
  flex: 0 0 auto;
  margin: 0;
  /* Ring aussen, Portrait innen: so klebt kein Kopf am Rand */
  width: clamp(104px, 12vw, 152px);
  height: clamp(104px, 12vw, 152px);
  padding: 6px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid rgba(47, 163, 186, 0.35);
  box-shadow: var(--shadow);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.teamband__kopf img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* Die Portraits sind hochkant, der Kopf sitzt oben. Vom oberen Rand aus
     zuschneiden laesst Luft ueber dem Kopf, statt ihn abzuschneiden. */
  object-position: center top;
  background: var(--surface);
}
@media (hover: hover) {
  .teamband__kopf:hover { border-color: rgba(47, 163, 186, 0.75); transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .teamband__kopf { transition: none; }
  .teamband__kopf:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung: die Reihe steht still und laesst sich von Hand schieben */
  .teamband__spur { animation: none; width: auto; }
}


/* ============================================================
   Kontaktblock (sektion_kontaktdaten)
   Adresse, Telefon und E-Mail links, QR-Code rechts.
   ============================================================ */
.kontaktblock {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: stretch;
}
/* Beide Spalten als Karte, damit der Block als Einheit wirkt */
.kontaktblock__daten,
.kontaktblock__qr {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.kontaktblock__daten { border-left: 4px solid var(--teal, #2fa3ba); }
.kontaktzeile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-bottom: 1px solid var(--line);
}
.kontaktzeile:first-child { padding-top: 0; }
.kontaktzeile:last-of-type { border-bottom: 0; }
.kontaktzeile__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
}
.kontaktzeile__icon svg { width: 1.3rem; height: 1.3rem; }
.kontaktzeile h2 {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.kontaktzeile h2 a { color: inherit; text-decoration: none; }
.kontaktzeile h2 a:hover { color: var(--blue); }
.kontaktzeile p { color: var(--ink-2); margin: 0; }
.kontaktblock__zeiten { color: var(--ink-2); margin: 1.2rem 0 0; }
.kontaktblock__cta { margin-top: 1.4rem; }
.kontaktblock__qr {
  margin: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
/* Der QR-Code steht auf einer weissen Flaeche, damit er scanbar bleibt */
.kontaktblock__qr img {
  padding: clamp(0.7rem, 1.6vw, 1.1rem);
  border-radius: calc(var(--radius) - 4px);
  background: #fff;
  border: 1px solid var(--line);
}
.kontaktblock__qr img { display: block; width: 100%; max-width: 13rem; height: auto; }
.kontaktblock__qr figcaption {
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .kontaktblock { grid-template-columns: 1fr; }
}

/* ============================================================
   Anrufkarte fuer den KI-Telefonassistenten (sektion_anrufkarte)
   ============================================================ */
.anrufreihe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
}
.anrufmarke {
  position: relative;
  flex: 0 0 auto;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(197, 237, 241, 0.3);
  background: rgba(52, 165, 191, 0.12);
  color: #7fd0e0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Verbindungslinie zur Karte, wie im Original */
.anrufmarke::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(1rem, 4vw, 3rem);
  height: 2px;
}
.anrufmarke--links::after  { left: 100%; background: linear-gradient(90deg, #2fa3ba, transparent); }
.anrufmarke--rechts::after { right: 100%; background: linear-gradient(270deg, #2fa3ba, transparent); }
.anrufkarte {
  flex: 0 1 26rem;
  text-align: center;
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  border-radius: var(--radius);
  border: 1px solid rgba(127, 208, 224, 0.28);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}
.anrufkarte__icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
}
.anrufkarte__icon svg { width: 1.6rem; height: 1.6rem; }
.anrufkarte h3 { color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 0 0 0.5rem; }
.anrufkarte p { color: var(--dark-text, rgba(255,255,255,0.75)); margin: 0 0 1.4rem; }
@media (max-width: 860px) {
  .anrufreihe { flex-direction: column; }
  .anrufmarke::after { display: none; }
  .anrufkarte { flex: 1 1 auto; width: 100%; }
}
/* Absatz vor einer Aufzaehlung in der Stellenanzeige */
.jobkarte__text + .jobliste { margin-top: 1.1rem; }


/* ============================================================
   Fortschrittsbalken (sektion_balken)
   ============================================================ */
.balkenblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
.balken { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.balken__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.balken__kopf > :first-child {
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  font-weight: 700;
  margin: 0;
}
.balken__kopf b {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue);
}
.balken__kopf b::after { content: "%"; }
.balken__spur {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.balken__spur span {
  position: relative;
  display: block;
  height: 100%;
  width: var(--anteil, 0%);
  border-radius: 999px;
  background: var(--grad);
  transform-origin: left center;
  overflow: hidden;
}
/* Ohne JS steht der Balken sofort. Mit JS faehrt er erst aus, wenn der Block
   ins Bild kommt (der gemeinsame Beobachter setzt .ist-auf). */
html.js .balken .balken__spur span { transform: scaleX(0); }
html.js .balken.ist-auf .balken__spur span {
  animation: balken-fuellen 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--verzug, 0s) both;
}
@keyframes balken-fuellen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* Lichtreflex, der einmal ueber den gefuellten Balken laeuft */
.balken.ist-auf .balken__spur span::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: balken-glanz 1.6s ease-out calc(var(--verzug, 0s) + 0.8s) 1 both;
}
@keyframes balken-glanz {
  from { transform: translateX(0); }
  to   { transform: translateX(350%); }
}
.balkenblock__bild {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.balkenblock__bild img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .balkenblock { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .balken__spur span { animation: none; } }

/* Kurze Stichpunkt-Listen in zwei oder drei Spalten (ticks--sp2 / --sp3) */
.ticks--sp2, .ticks--sp3 {
  display: grid;
  gap: 0.35rem clamp(1rem, 2.5vw, 2rem);
}
.ticks--sp2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticks--sp3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) {
  .ticks--sp2, .ticks--sp3 { grid-template-columns: 1fr; }
}

/* Sicherung: das Nebeneinander der grossen Ansprechpartner-Karten (Bild
   links, Text rechts) passt nur bei ein oder zwei Spalten. Ab drei Spalten
   bliebe fuer den Text zu wenig Platz und Namen brechen mitten im Wort. */
@media (min-width: 1100px) {
  .team--gross:not(.team--rund).sp-3 .teamer,
  .team--gross:not(.team--rund).sp-4 .teamer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1.6rem, 3vw, 2.2rem);
    min-height: 0;
  }
  .team--gross:not(.team--rund).sp-3 .teamer__bild,
  .team--gross:not(.team--rund).sp-4 .teamer__bild { position: static; width: 100%; }
}


/* ============================================================
   Kennzahlen-Band, grosse Fassung (sektion_zahlen mit 'gross')
   Fuer zwei oder drei Werte: breitere Kacheln, groessere Zahlen und ein
   leuchtender Rand, damit die Reihe nicht verloren wirkt.
   ============================================================ */
.stats--gross { gap: clamp(1rem, 2.5vw, 2rem); }
.stats--gross > * { flex: 1 1 18rem; max-width: 26rem; }
.stats--gross .stat {
  position: relative;
  overflow: hidden;
  padding: clamp(2.2rem, 4.5vw, 3.2rem) clamp(1.5rem, 3vw, 2.4rem);
}
.stats--gross .stat b { font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1; }
.stats--gross .stat span,
.stats--gross .stat .stat__label { margin-top: 0.8rem; font-size: 0.78rem; }
/* Leuchtender Bogen hinter der Zahl */
.stats--gross .stat::before {
  content: "";
  position: absolute;
  inset: auto 50% -60% auto;
  translate: 50% 0;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 163, 186, 0.28), transparent 65%);
  pointer-events: none;
}
/* Auf dunklem Grund: Glaskachel statt weisser Karte */
.section--dark .stats--gross .stat {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(127, 208, 224, 0.25);
}
.section--dark .stats--gross .stat span,
.section--dark .stats--gross .stat .stat__label { color: var(--dark-text, rgba(255, 255, 255, 0.72)); }
@media (max-width: 640px) {
  .stats--gross > * { flex: 1 1 100%; }
}

/* Auf dunklem Grund braucht die Zahl einen hellen Verlauf, sonst steht
   dunkles Blau auf dunklem Blau und ist kaum zu lesen. Die Klasse .stats
   muss mit rein, sonst gewinnt die allgemeine Regel weiter oben, die jedes
   <b> in dunklen Karten auf die Textfarbe setzt. */
.section--dark .stats .stat b {
  background: linear-gradient(115deg, #7fd0e0 10%, #ffffff 90%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.section--dark .stats--gross .stat::before {
  background: radial-gradient(circle, rgba(127, 208, 224, 0.35), transparent 65%);
}

/* Steht das Kennzahlen-Band allein in der Sektion (ohne Ueberschrift), ist
   der Abstand darunter ueberfluessig: die Kacheln saessen sonst zu hoch. */
.wrap > .stats:only-child { margin-bottom: 0; }

/* Balken: Hover hebt die Zeile hervor, der Wert tritt nach vorn */
.balken__zeile {
  padding: 0.35rem 0.6rem;
  margin-inline: -0.6rem;
  border-radius: 12px;
  transition: background-color 0.3s ease;
}
@media (hover: hover) {
  .balken__zeile:hover { background: rgba(47, 163, 186, 0.07); }
  .balken__zeile:hover .balken__spur { height: 11px; }
  .balken__zeile:hover .balken__kopf b { transform: translateY(-1px) scale(1.08); }
}
.balken__spur { transition: height 0.25s ease; }
.balken__kopf b { display: inline-block; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
/* Das Bild daneben: sehr zurueckhaltendes Heben und Zoomen.
   WICHTIG: nicht ueber 'transform' animieren. Die Reveal-Regel
   html.js [data-reveal] setzt transition auf opacity/translate/scale und
   ueberschreibt jede eigene transform-Angabe, der Hover wuerde springen.
   Deshalb die eigenstaendigen Eigenschaften translate und scale nutzen,
   die dort schon weich uebergehen. */
@media (hover: hover) {
  .balkenblock__bild:hover { translate: 0 -4px; box-shadow: 0 24px 50px rgba(12, 22, 38, 0.2); }
  .balkenblock__bild:hover img { scale: 1.02; }
}
.balkenblock__bild img { transition: scale 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
  html.js .balken .balken__spur span,
  html.js .balken.ist-auf .balken__spur span { transform: none; animation: none; }
  .balken.ist-auf .balken__spur span::after { animation: none; display: none; }
  .balken__zeile, .balken__spur, .balken__kopf b,
  .balkenblock__bild, .balkenblock__bild img { transition: none; }
  .balkenblock__bild:hover { transform: none; }
  .balkenblock__bild:hover img { transform: none; }
}


/* ============================================================
   Balken-Sektion, moderne Fassung
   Die Balken sitzen in einer eigenen hellen Karte, das Bild bekommt einen
   Verlaufsrahmen und einen weichen Schein dahinter. Am Ende jedes Balkens
   sitzt ein Punkt, der Prozentwert steht in einer Pille.
   ============================================================ */
.balkenblock { position: relative; }
/* Weicher Schein hinter dem Bild */
.balkenblock::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -4%;
  top: 50%;
  translate: 0 -50%;
  width: min(38rem, 46%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 163, 186, 0.22), transparent 62%);
  pointer-events: none;
}
.balkenblock__text, .balkenblock__bild { position: relative; z-index: 1; }

/* Die Balken in einer eigenen Karte */
.balken {
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.6));
  box-shadow: var(--shadow);
}
.balken__zeile + .balken__zeile { margin-top: 0.2rem; }
/* Prozentwert als Pille */
.balken__kopf b {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(47, 163, 186, 0.12);
  color: var(--teal-ink, #23788a);
  font-size: 0.82rem;
}
/* Duennere Spur, Punkt am Ende der Fuellung */
.balken__spur { height: 6px; background: rgba(47, 77, 158, 0.1); }
.balken__zeile:hover .balken__spur { height: 8px; }
.balken__spur span { box-shadow: 0 0 12px rgba(47, 163, 186, 0.45); }
.balken__spur span::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  translate: 50% -50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--teal, #2fa3ba);
  box-shadow: 0 0 10px rgba(47, 163, 186, 0.6);
}

/* Bild: Verlaufsrahmen statt einfacher Linie, sehr langsames Schweben */
.balkenblock__bild {
  padding: 8px;
  border: 0;
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(140deg, rgba(47, 163, 186, 0.65), rgba(47, 77, 158, 0.3) 55%, rgba(47, 77, 158, 0.06));
}
.balkenblock__bild img { border-radius: var(--radius); }
/* Kein Dauer-Schweben mehr: es verschob das Bild gegenueber der Balkenkarte,
   die beiden sollen exakt auf einer Linie stehen. */
@media (max-width: 860px) {
  .balkenblock::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .balkenblock__bild:hover { translate: none; }
  .balkenblock__bild:hover img { scale: none; }
}


/* ============================================================
   Balken-Sektion, Feinschliff
   Verlaufsrahmen an der Karte, Trennlinien zwischen den Zeilen, Pille
   fuellt sich beim Darauffahren, Bild bekommt eine zweite Ebene dahinter.
   ============================================================ */
/* Textspalte etwas breiter, damit die Ueberschrift ruhiger umbricht.
   hyphens: manual verhindert dabei die Trennung mitten im Wort ("Be-griffen"),
   die die automatische Silbentrennung sonst erzeugt. */
.balkenblock { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.balkenblock__text h2 { text-wrap: balance; hyphens: manual; }

/* Karte mit Verlaufs-Haarlinie statt flachem Rand */
.balken {
  position: relative;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.7)) padding-box,
    linear-gradient(150deg, rgba(47, 163, 186, 0.55), rgba(47, 77, 158, 0.28) 45%, rgba(47, 77, 158, 0.08)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 18px 44px rgba(12, 22, 38, 0.1);
}
/* Trennlinien zwischen den Zeilen */
.balken__zeile + .balken__zeile {
  margin-top: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.balken__zeile + .balken__zeile { border-radius: 0 0 12px 12px; }

/* Der Prozentwert fuellt sich beim Darauffahren mit dem Markenverlauf */
.balken__kopf b {
  font-variant-numeric: tabular-nums;
  transition: background-color 0.35s ease, color 0.35s ease, scale 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .balken__zeile:hover .balken__kopf b {
    background: var(--grad);
    color: #fff;
    scale: 1.06;
  }
}

/* Tiefe hinter dem Bild kommt vom Schein der Sektion, eine zusaetzliche
   Ebene am Rahmen selbst waere hinter dessen Verlauf unsichtbar. */
.balkenblock__bild { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .balken__kopf b { transition: none; }
  .balken__zeile:hover .balken__kopf b { scale: none; }
}


/* ============================================================
   Balken-Sektion, neue Aufteilung
   Ueberschrift oben ueber die ganze Breite, darunter Balken links und Bild
   rechts nebeneinander. Die Ueberschrift faellt eine Stufe kleiner aus.
   ============================================================ */
.balkenblock__kopf {
  max-width: 46rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.balkenblock__kopf h2 {
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  line-height: 1.2;
  text-wrap: balance;
  hyphens: manual;
  margin: 0.3rem 0 0;
}
/* Beide Spalten gleich breit, oben buendig */
.balkenblock {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
/* Der Schein sass an der Ueberschrift ausgerichtet, jetzt an der Bildspalte */
.balkenblock::after { top: 50%; }

/* Ueberschrift ueber die volle Breite, Balkenkarte und Bild gleich hoch */
.balkenblock__kopf { max-width: none; }
@media (min-width: 861px) {
  .balkenblock { align-items: stretch; }
  /* Die Karte fuellt ihre Spalte, die Balken sitzen darin mittig */
  .balkenblock__text { display: flex; }
  .balkenblock__text .balken {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Das Bild fuellt seine Spalte auf dieselbe Hoehe. Der Ausschnitt trifft
     nur den umlaufenden Verlauf, das Logo bleibt vollstaendig. */
  .balkenblock__bild { display: flex; }
  .balkenblock__bild img { height: 100%; object-fit: cover; }
}

/* Gleiche Hoehe wirklich durchsetzen: die Karte und der Bildrahmen fuellen
   ihre Spalte, ohne dass eine Zwischenebene die Hoehe abschneidet. */
@media (min-width: 861px) {
  .balkenblock__text { align-items: stretch; }
  .balkenblock__text .balken { height: 100%; }
  .balkenblock__bild { height: 100%; align-items: stretch; }
  .balkenblock__bild img { flex: 1; min-height: 0; }
}

/* Karte und Bild exakt auf einer Linie: beide Spalten als Raster mit einer
   Zeile, damit die Karte die volle Spaltenhoehe bekommt (height:100% auf
   einem Flex-Kind greift hier nicht zuverlaessig). */
@media (min-width: 861px) {
  .balkenblock__text {
    display: grid;
    grid-template-rows: 1fr;
    align-items: stretch;
  }
  .balkenblock__text .balken { height: auto; }
  .balkenblock__bild { display: grid; grid-template-rows: 1fr; }
}

/* Alle Balkenzeilen gleich hoch gepolstert: sonst ist die Hover-Flaeche der
   ersten Zeile niedriger als die der beiden darunter. Die Trennlinie
   bleibt an den Folgezeilen. */
.balken__zeile { padding-block: 0.9rem; }
.balken__zeile + .balken__zeile { padding-top: 0.9rem; }
/* Die Karte fuellt ihre Spalte vollstaendig (definite Zeilenhoehe im Raster) */
@media (min-width: 861px) {
  .balkenblock__text .balken { height: 100%; align-self: stretch; }
}

/* Der obere Abstand der Balkenkarte stammte noch aus der Zeit, als die
   Ueberschrift direkt darueber stand. Jetzt schiebt er die Karte nur nach
   unten und aus der Linie mit dem Bild. */
.balkenblock__text .balken { margin-top: 0; }

/* Hervorgehobene Wortgruppe in einer Zeile halten (Namen wie
   "We love Hamburg" duerfen nicht umbrochen werden). */
.grad--zusammen { white-space: nowrap; }

/* Schlagwort-Chips im Seitenkopf (seiten_hero 'chips') */
.hero__chips {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.hero__chips li {
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(127, 208, 224, 0.32);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
@media (hover: hover) {
  .hero__chips li:hover { border-color: rgba(127, 208, 224, 0.7); background: rgba(127, 208, 224, 0.14); }
}
@media (prefers-reduced-motion: reduce) { .hero__chips li { transition: none; } }

/* Ueberschriften nicht mitten im Wort trennen ("sicht-bar macht").
   Die automatische Silbentrennung ist bei grossen Headlines fast immer
   stoerend, der Umbruch soll an den Wortgrenzen passieren. */
.page-hero h1,
.section__head h2,
.section__head h3 { hyphens: manual; }


/* ============================================================
   Karten-Raster: angebrochene letzte Zeile ausgleichen
   Bleiben in der letzten Zeile weniger Karten uebrig als Spalten da sind,
   wirken sie eingerueckt und verloren. Die Restkarten teilen sich dann die
   volle Breite. Gilt fuer alle Raster-Bausteine.
   Der Kniff: ist die zweitletzte Karte die erste ihrer Zeile, stehen genau
   zwei in der letzten Zeile ("~ *" trifft die letzte).
   ============================================================ */
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-3 > :nth-last-child(2):nth-child(3n + 1),
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-3 > :nth-last-child(2):nth-child(3n + 1) ~ *,
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(2):nth-child(4n + 1),
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(2):nth-child(4n + 1) ~ * {
  flex-basis: calc((100% - var(--luecke)) / 2);
}
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(3):nth-child(4n + 1),
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(3):nth-child(4n + 1) ~ * {
  flex-basis: calc((100% - 2 * var(--luecke)) / 3);
}
@media (max-width: 900px) {
  /* Auf schmalen Schirmen greift die normale Spaltenzahl wieder.
     Nicht "auto": das machte jede Karte nur so breit wie ihr Inhalt
     (auf dem Handy standen dann schmale und breite Karten gemischt). */
  :is(.lkarten, .goals, .tkarten, .preise, .team) > * {
    flex-basis: calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
  }
}


/* ============================================================
   Senkrechte Schrittfolge (sektion_schritte mit 'senkrecht')
   Nummerierter Kreis links, Text rechts, durchgehende Linie dazwischen.
   ============================================================ */
.steps--senkrecht {
  display: grid;
  gap: 0;
  max-width: 54rem;
  margin-inline: auto;
  position: relative;
}
.steps--senkrecht > * { flex: none; }
.steps--senkrecht .step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: start;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  position: relative;
}
.steps--senkrecht .step:last-child { padding-bottom: 0; }
/* Verbindungslinie zwischen den Kreisen */
.steps--senkrecht .step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(clamp(2.6rem, 4vw, 3.2rem) / 2 - 1px);
  top: clamp(2.6rem, 4vw, 3.2rem);
  bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(47, 163, 186, 0.5), rgba(47, 163, 186, 0.12));
}
.steps--senkrecht .step::before { display: none; }
.steps--senkrecht .step__num {
  width: clamp(2.6rem, 4vw, 3.2rem);
  height: clamp(2.6rem, 4vw, 3.2rem);
  border-radius: 50%;
  margin: 0;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}
.steps--senkrecht .step h3 { margin: 0.35rem 0 0.4rem; }
.steps--senkrecht .step p { margin: 0; }

/* Aufzaehlungen in mittig gesetzten Textbloecken bleiben linksbuendig:
   zentrierte Listenpunkte lassen sich kaum lesen. */
.case--nurtext .ticks,
.case--nurtext .ticks li { text-align: left; }
.case--nurtext .ticks { display: inline-grid; justify-self: center; }
.case--nurtext .ticks--sp2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .case--nurtext .ticks--sp2 { grid-template-columns: 1fr; } }

/* Die senkrechte Schrittfolge muss das Flex-/Raster-Verhalten der normalen
   .steps vollstaendig ueberschreiben, sonst stehen die Schritte weiter
   nebeneinander (steps--n5 setzt eigene Spalten). */
.steps.steps--senkrecht {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0;
}
.steps.steps--senkrecht > .step {
  flex: none !important;
  width: 100%;
  grid-column: 1 !important;
  max-width: none;
}

/* Ueberschriften nirgends mitten im Wort trennen */
main :is(h1, h2, h3, h4) { hyphens: manual; }

/* Nummer links ueber beide Zeilen, Titel und Text rechts darunter.
   Ohne feste Bereiche rutscht der Text in die Nummernspalte. */
.steps.steps--senkrecht > .step {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num titel"
    "num text";
  column-gap: clamp(1rem, 2.2vw, 1.6rem);
  row-gap: 0.35rem;
}
.steps.steps--senkrecht > .step > .step__num { grid-area: num; align-self: start; }
.steps.steps--senkrecht > .step > h3 { grid-area: titel; margin: 0.5rem 0 0; }
.steps.steps--senkrecht > .step > p  { grid-area: text; }
/* Steht der Schritt-Titel als Absatz (Originalseiten mit Listenpunkten statt
   Ueberschriften), gehoert er in den Titel-Bereich. Sonst liegt er im selben
   Feld wie der Text und beide ueberlagern sich. */
.steps.steps--senkrecht > .step > p.step__satz { grid-area: titel; margin: 0.5rem 0 0; }


/* ============================================================
   Dunkle Einzelkarte im hellen Raster (sektion_listenkarten 'dunkel')
   Die Originalseiten setzen einzelne Karten dunkel ab, z. B. die
   Loesungs-Karte neben der Problem-Karte.
   ============================================================ */
.lkarte--dunkel {
  background: var(--dark);
  border-color: rgba(127, 208, 224, 0.22);
  color: var(--dark-text, rgba(255, 255, 255, 0.78));
}
.lkarte--dunkel :is(h2, h3, h4, .lkarte__titel, b, strong) { color: #fff; }
.lkarte--dunkel .lkarte__label {
  color: #7fd0e0;
  border-color: rgba(127, 208, 224, 0.35);
  background: rgba(127, 208, 224, 0.12);
}
.lkarte--dunkel p { color: rgba(255, 255, 255, 0.78); }
.lkarte--dunkel .ticks li { color: rgba(255, 255, 255, 0.8); }
.lkarte--dunkel .ticks li::before { color: #7fd0e0; }

/* Dunkle Preiskarte (Originalseiten setzen einzelne Pakete dunkel ab) */
.preis--dunkel {
  background: var(--dark);
  border-color: rgba(127, 208, 224, 0.28);
}
.preis--dunkel :is(.preis__name, .preis__betrag b) { color: #fff; }
.preis--dunkel :is(.preis__text, .preis__einheit, .preis__ersparnis) { color: rgba(255, 255, 255, 0.76); }
.preis--hervor .preis__label { color: #7fd0e0; }
.preis--dunkel .ticks li { color: rgba(255, 255, 255, 0.8); }
.preis--dunkel .preis__cta {
  border-color: rgba(127, 208, 224, 0.5);
  color: #fff;
}
@media (hover: hover) {
  .preis--dunkel .preis__cta:hover { background: rgba(127, 208, 224, 0.16); }
}

/* Knopf auf dunkler Preiskarte: heller Rand, weisse Schrift.
   Vorher erbte er die helle Flaeche und war unlesbar. */
.preis--dunkel .preis__cta {
  background: transparent;
  border: 1px solid rgba(127, 208, 224, 0.55);
  color: #fff;
}
/* Breiter Eintrag ueber die volle Zeile (z. B. "Event- oder Location-Reel") */
.preise .preis--band {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  background: var(--surface);
  border-color: rgba(47, 163, 186, 0.35);
  text-align: left;
}
.preise .preis--band .preis__betrag { margin: 0; text-align: right; white-space: nowrap; }
.preise .preis--band :is(.preis__name, .preis__text) { grid-column: 1; }
@media (max-width: 700px) {
  .preise .preis--band { grid-template-columns: 1fr; }
  .preise .preis--band .preis__betrag { text-align: left; }
}
/* Knopfreihe unter den Preisen */
.preise__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}


/* ============================================================
   Zweispaltiger Seitenkopf mit Handy-Mockup (seiten_hero 'mockup')
   Links Text, rechts ein echtes Kurzvideo im Geraeterahmen, dazu zwei
   schwebende Kaertchen.
   ============================================================ */
@media (min-width: 981px) {
  .page-hero--split .page-hero__inner {
    max-width: 74rem;
    display: grid;
    /* Etwas mehr Platz links, damit die beiden Knoepfe nebeneinander passen */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(1.6rem, 4vw, 3.2rem);
    align-items: center;
    text-align: left;
  }
  .page-hero--split .krumen ol,
  .page-hero--split .hero__cta,
  .page-hero--split .hero__chips { justify-content: flex-start; }
  .page-hero--split .page-hero__spalte { grid-column: 1; }
  .page-hero--split .hero__mockup { grid-column: 2; }
}
.hero__mockup {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: clamp(2rem, 5vw, 0rem);
}
.hero__phone {
  position: relative;
  width: clamp(210px, 24vw, 290px);
  aspect-ratio: 9 / 17.5;
  border-radius: 30px;
  padding: 9px;
  background: #0f1724;
  border: 1px solid rgba(127, 208, 224, 0.28);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.hero__phone-ohr {
  position: absolute;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  width: 32%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 2;
}
.hero__phone-video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: cover;
  background: #16202f;
}
/* Die beiden schwebenden Kaertchen */
.hero__mockup-chip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
}
.hero__mockup-chip b { font-size: 0.86rem; }
.hero__mockup-chip span { color: var(--ink-2); font-size: 0.72rem; }
.hero__mockup-chip--1 { top: 12%; left: -4%; }
.hero__mockup-chip--2 { bottom: 16%; right: -6%; }
@media (max-width: 560px) {
  .hero__mockup-chip--1 { left: 0; }
  .hero__mockup-chip--2 { right: 0; }
}

/* ============================================================
   Reel-Karten als Bildseite eines Split-Abschnitts
   ============================================================ */
.reelkarten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 1rem);
  align-items: center;
}
.reelkarte {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: linear-gradient(160deg, #2fa3ba, #1f5e6e);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
/* Die mittlere Karte steht etwas hoeher, wie im Original */
.reelkarte:nth-child(2) { translate: 0 -12%; }
.reelkarte video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reelkarte figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 0.7rem 0.6rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.65));
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
}
.reelkarte .reel__ton { top: 0.5rem; right: 0.5rem; }
@media (max-width: 560px) {
  .reelkarte:nth-child(2) { translate: none; }
}

/* In einer dunklen Sektion soll der Split-Block nicht als helle Karte
   darauf liegen, sondern Teil der dunklen Flaeche sein (so wie die
   Originalseiten den Kontrastblock setzen). */
.section--dark .case {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0;
}
.section--dark .case :is(h2, h3, h4, b, strong) { color: #fff; }
.section--dark .case p { color: var(--dark-text, rgba(255, 255, 255, 0.78)); }
.section--dark .case .ticks li { color: rgba(255, 255, 255, 0.82); }
.section--dark .case .ticks li::before { color: #7fd0e0; }


/* ============================================================
   Aufruf-Karte (sektion_aufruf)
   Farbige Flaeche als Abschluss, wie die Schluss-Karten der Originalseiten.
   ============================================================ */
.aufruf {
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 3rem);
  border-radius: calc(var(--radius) + 8px);
  background: var(--grad);
  color: #fff;
  text-align: center;
  box-shadow: 0 26px 60px rgba(12, 22, 38, 0.22);
}
.aufruf :is(h2, h3) { color: #fff; text-wrap: balance; margin: 0 0 0.8rem; }
.aufruf :is(h2, h3) .grad {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: rgba(255, 255, 255, 0.82);
}
.aufruf p { color: rgba(255, 255, 255, 0.9); margin: 0 auto; max-width: 44em; }
.aufruf p + p { margin-top: 0.7rem; }
.aufruf__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.6rem; }
.btn--weiss { background: #fff; color: var(--ink); border: 1px solid #fff; }
@media (hover: hover) { .btn--weiss:hover { background: rgba(255, 255, 255, 0.9); } }

/* Haken-Reihen: Spalten so breit wie ihr Inhalt, damit Betraege nicht in
   eine zweite Zeile rutschen ("Mindestprojektvolumen: 2.500 €"). */
.ticks--sp2, .ticks--sp3 { justify-content: center; }
.ticks--sp3 { grid-template-columns: repeat(3, max-content); }
.ticks--sp2 { grid-template-columns: repeat(2, max-content); }
@media (max-width: 860px) {
  .ticks--sp3 { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 620px) {
  .ticks--sp2, .ticks--sp3 { grid-template-columns: max-content; }
}


/* ============================================================
   Einsparungsrechner (sektion_rechner)
   ============================================================ */
.rechner {
  border-radius: calc(var(--radius) + 8px);
  overflow: hidden;
  background: var(--karte, #fff);
  border: 1px solid var(--linie);
  box-shadow: 0 22px 50px rgba(12, 22, 38, 0.1);
}
.rechner__kopf {
  background: var(--grad);
  color: #fff;
  text-align: center;
  padding: clamp(1.6rem, 4vw, 2.4rem) 1.4rem;
}
.rechner__kopf :is(h2, h3) { color: #fff; margin: 0; }
.rechner__kopf :is(h2, h3) .grad { background: none; -webkit-text-fill-color: currentColor; color: rgba(255, 255, 255, 0.82); }
.rechner__kopf p { color: rgba(255, 255, 255, 0.88); margin: 0.5rem 0 0; }
.rechner__raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.rechner__felder { display: grid; gap: 0.9rem; align-content: start; }
.rfeld { margin: 0; display: grid; gap: 0.35rem; }
.rfeld label { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.rfeld input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--flaeche, #f7f9fc);
  border: 1px solid var(--linie);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rfeld input:focus-visible {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px rgba(52, 165, 191, 0.18);
}
.rechner__werte { display: grid; gap: 0.7rem; align-content: start; }
.rwert {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche, #f7f9fc);
}
.rwert__label { color: var(--muted); font-size: 0.92rem; }
.rwert b { font-size: clamp(1.05rem, 2.2vw, 1.35rem); white-space: nowrap; }
.rwert--hervor { background: var(--grad); border-color: transparent; }
.rwert--hervor .rwert__label { color: rgba(255, 255, 255, 0.85); }
.rwert--hervor b { color: #fff; }
@media (max-width: 820px) {
  .rechner__raster { grid-template-columns: 1fr; }
}

/* Zitat mit Namensnennung im Split-Baustein */
.case__zitat { margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--marke); }
.case__zitat p { font-size: clamp(1.02rem, 1.8vw, 1.18rem); font-style: italic; margin: 0; }
.case__zitat cite { display: block; margin-top: 0.7rem; font-style: normal; font-weight: 600; color: var(--muted); }
.rechner__wertetitel { margin: 0 0 0.2rem; font-size: clamp(1.05rem, 2vw, 1.2rem); }

/* Portrait im Split-Baustein: schmaler halten, damit die Textseite nicht
   von einem uebergrossen Bild erschlagen wird. */
.bildrahmen--klein { max-width: 21rem; margin-inline: auto; }
.aufruf__link { color: inherit; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, 0.5); padding-bottom: 0.1em; transition: border-color 0.25s ease; }
@media (hover: hover) { .aufruf__link:hover { border-color: #fff; } }

/* Zentrierte Lesestrecke, fuer Abschnitte, die im Original "text-center" sind.
   Der Block sitzt mittig, der Fliesstext bleibt linksbuendig: mittig gesetzte
   Absaetze dieser Laenge lesen sich schlecht. */
.prosa--mittig { margin-inline: auto; }

/* Mehrere Ueberschrift-Text-Paare auf der Textseite eines Split-Abschnitts */
.case__block + .case__block { margin-top: 1.2rem; }
.case__copy .case__block :is(h3, h4) { margin: 0 0 0.25rem; font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.case__block p { margin: 0; }

/* Kundenstimmen als feste Karten mit Portrait (statt Laufband) */
.kraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--luecke, 1.4rem); }
.kkarte {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.6rem;
  background: var(--karte, #fff);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(12, 22, 38, 0.06);
}
.kkarte__zitat { margin: 0; font-size: 1.02rem; color: var(--ink-2); }
.kkarte__wer { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.kkarte__wer img { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; flex: 0 0 3.2rem; }
.kkarte__name { display: grid; }
.kkarte__name b { font-weight: 660; }
.kkarte__rolle { color: var(--muted); font-size: 0.9rem; }

/* Kleine Zeile unter dem Knopf im Seitenkopf ("Powered by ...") */
.page-hero__nachsatz { margin: 1rem 0 0; color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }
/* Satz unter der Hoerprobe */
.hoer__unter { margin: 1.1rem auto 0; max-width: 46rem; text-align: center; color: var(--muted); }

/* In dunklen Sektionen ist .case eine transparente Flaeche, keine helle Karte
   (siehe Regel weiter oben). Die Sammelregel fuer helle Karten auf dunklem
   Grund faerbt die Ueberschriften sonst dunkel und damit unlesbar. */
.section--dark .case.case :is(h2, h3, h4, b, strong) { color: #fff; }
.section--dark .case.case p { color: var(--dark-text, rgba(255, 255, 255, 0.78)); }

/* Vorzeile ueber der Ueberschrift auf der Textseite eines Split-Abschnitts */
.case__label {
  margin: 0 0 0.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--marke);
}
.section--dark .case.case .case__label { color: #7fd0e0; }

/* ============================================================
   Bilderraster und angebrochene letzte Reihen
   ============================================================ */
/* Die Flex-Variante der Galerie hat bei drei Spalten vier Bilder in eine
   Reihe gepackt (der Prozent-Wert der flex-basis loeste sich nicht gegen die
   erwartete Breite auf). Mit einem echten Raster ist die Spaltenzahl exakt.
   Sechs Spuren, jedes Bild belegt zwei: so laesst sich eine angebrochene
   letzte Reihe sauber ausgleichen. */
/* Eine einzelne Abbildung (Titel- oder Abschlussbanner) fuellt die Lesebreite
   und steht mittig. Ohne diese Regel griff das auto-fill-Raster und das Bild
   bekam nur eine von vier Spalten. */
.galerie.sp-1 { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.galerie.sp-1 .galerie__bild { width: 100%; }
.galerie.sp-1 .galerie__bild img { width: 100%; height: auto; }
.galerie.sp-3 { display: grid; grid-template-columns: repeat(6, 1fr); align-items: start; }
.galerie.sp-3 > * { grid-column: span 2; }
/* zwei Bilder in der letzten Reihe: auf je drei Spuren verbreitern */
.galerie.sp-3 > :nth-last-child(2):nth-child(3n + 1),
.galerie.sp-3 > :nth-last-child(2):nth-child(3n + 1) ~ * { grid-column: span 3; }
/* ein einzelnes Bild in der letzten Reihe: mittig statt volle Breite */
.galerie.sp-3 > :last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
@media (max-width: 1080px) {
  .galerie.sp-3 { grid-template-columns: repeat(2, 1fr); }
  .galerie.sp-3 > *,
  .galerie.sp-3 > :nth-last-child(2):nth-child(3n + 1),
  .galerie.sp-3 > :nth-last-child(2):nth-child(3n + 1) ~ *,
  .galerie.sp-3 > :last-child:nth-child(3n + 1) { grid-column: auto; }
}
@media (max-width: 700px) {
  .galerie.sp-3 { grid-template-columns: 1fr; }
}

/* Eine einzelne Karte in der letzten Reihe soll nicht ueber die volle Breite
   laufen (siehe Regel weiter oben): halbe Breite, mittig. */
:is(.lkarten, .goals, .tkarten, .preise).sp-3 > :last-child:nth-child(3n + 1) {
  flex-basis: calc((100% - var(--luecke)) / 2);
  margin-inline: auto;
}
@media (max-width: 780px) {
  :is(.lkarten, .goals, .tkarten, .preise).sp-3 > :last-child:nth-child(3n + 1) { flex-basis: 100%; }
}
/* Galerie ohne Beschnitt: Bilder behalten ihr eigenes Seitenverhaeltnis */
.galerie--passend .galerie__bild img { aspect-ratio: auto; height: auto; object-fit: contain; }

/* Kartentitel sehen gleich aus, egal welche Ueberschriftenstufe die
   Originalseite dort verwendet (h2, h3 oder h4). */
.lkarte :is(h2, h4) { font-size: 1.2rem; margin-bottom: 0.6rem; line-height: 1.3; }
.lkarte :is(h2, h4) { overflow-wrap: break-word; }

/* ============================================================
   Hinweisband, Emoji-Kacheln und Leistungspakete
   ============================================================ */
.section--schmal { padding-block: clamp(1.2rem, 3vw, 2rem); }
.hinweisband {
  margin: 0;
  padding: 1rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(115deg, rgba(47, 163, 186, 0.12), rgba(38, 78, 160, 0.12));
  border: 1px solid rgba(47, 163, 186, 0.3);
  color: var(--ink);
  text-align: center;
  font-size: 0.98rem;
}
@media (max-width: 760px) { .hinweisband { border-radius: var(--radius); } }

.kacheln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem;
}
.kachel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte, #fff);
  font-size: 0.96rem;
  transition: border-color 0.25s ease, translate 0.25s ease;
}
@media (hover: hover) { .kachel:hover { border-color: var(--marke); transform: translateY(-2px); } }
.kachel { transition-duration: 0.6s; }
.kachel__zeichen { font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }

.pakete { display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); }
.paket {
  display: grid;
  grid-template-columns: minmax(14rem, 22%) 1fr;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: calc(var(--radius) + 4px);
  background: var(--karte, #fff);
  box-shadow: 0 16px 40px rgba(12, 22, 38, 0.07);
}
.paket--beliebt { border-color: rgba(47, 163, 186, 0.55); }
.paket__flaeche {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--grad);
  color: #fff;
}
.paket__badge {
  align-self: start;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  font-weight: 600;
}
.paket__name { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; }
.paket__unter { color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }
.paket__inhalt { padding: clamp(1.4rem, 3vw, 2rem); }
.paket__marke {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(47, 163, 186, 0.14);
  color: var(--marke);
  font-size: 0.78rem;
  font-weight: 700;
}
.paket__kicker {
  margin: 0 0 0.3rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.paket__inhalt :is(h2, h3) { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 0 0 0.6rem; }
.paket__text { color: var(--ink-2); margin: 0 0 1rem; }
.paket__chips { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.paket__chips li {
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: var(--flaeche, #f7f9fc);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.paket__cta { margin: 1.2rem 0 0; }
@media (max-width: 860px) {
  .paket { grid-template-columns: 1fr; }
  .paket__flaeche { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem; }
}

/* Sehr lange Woerter ("Suchmaschinenoptimierung") sprengen auf schmalen
   Bildschirmen das Layout, weil Ueberschriften bewusst nicht automatisch
   getrennt werden. Sie duerfen deshalb notfalls ohne Trennstrich umbrechen. */
main :is(h1, h2, h3, h4, h5, h6, p, li, span, b, strong, cite) { overflow-wrap: anywhere; }
.kacheln.sp-3 { grid-template-columns: repeat(3, 1fr); }
.kacheln.sp-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .kacheln.sp-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .kacheln.sp-2, .kacheln.sp-3 { grid-template-columns: 1fr; } }
/* Fuenf kurze Punkte in einer Reihe: Zeichen oben, Text zentriert darunter
   (z. B. die KI-Vorteile). */
.kacheln.sp-5 { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.kacheln.sp-5 .kachel {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;
  padding: 1.5rem 1.1rem 1.4rem;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 1000px) { .kacheln.sp-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .kacheln.sp-5 { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } }
@media (max-width: 400px) { .kacheln.sp-5 { grid-template-columns: 1fr; } }
/* Absatz unter einem Kartenraster */
.lkarten__schluss { max-width: 52rem; margin: 1.6rem auto 0; text-align: center; color: var(--ink-2); }
.lkarten__schluss--hell { color: var(--dark-text, rgba(255, 255, 255, 0.78)); }
.prosa h4 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; margin-top: 1.8rem; }
/* Ruecksprung am Ende einer Lesestrecke */
.prosa__zurueck { margin-top: 2rem; }
.prosa__zurueck a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none; color: var(--marke); }
.prosa__zurueck svg { width: 1.05em; height: 1.05em; transition: translate 0.2s ease; }
@media (hover: hover) { .prosa__zurueck a:hover svg { translate: -3px 0; } }
/* Ruecksprung am Ende einer Lesestrecke */
.prosa__zurueck { margin-top: 2rem; }
.prosa__zurueck a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none; color: var(--marke); }
.prosa__zurueck svg { width: 1.05em; height: 1.05em; transition: translate 0.2s ease; }
@media (hover: hover) { .prosa__zurueck a:hover svg { translate: -3px 0; } }
.paket__hinweis { margin: 1rem 0 0; padding: 0.7rem 0.9rem; border-left: 3px solid var(--marke); background: var(--flaeche, #f7f9fc); border-radius: 0 10px 10px 0; font-size: 0.92rem; color: var(--ink-2); }
.tabelle__hinweis { margin: 0.9rem 0 0; text-align: center; color: var(--muted); font-size: 0.9rem; }
.preise__schluss { max-width: 52rem; margin: 1.4rem auto 0; text-align: center; color: var(--muted); font-size: 0.92rem; }
.paket__vorher { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }

/* Schmale Tabellen (wenige, kurze Spalten) brauchen keine Mindestbreite,
   sonst muss man auf dem Handy waagerecht wischen, obwohl alles passt. */
.tabelle--schmal { min-width: 0; }

/* ============================================================
   Symbole in Karten, Schritten und im Rechner (Originalseiten mit
   Icon-Boxen, z. B. /large-language-models). Ein Symbol steht als
   Kreis mit feiner Verlaufskante ueber dem Titel, auf dunklem Grund
   als heller Kreis. Gleiche Groesse ueberall: 56 px, Strich 26 px.
   ============================================================ */
.lkarte--symbol { text-align: center; }
.lkarte--symbol .ticks { text-align: left; }
.lkarte__symbol {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  color: var(--teal-ink);
  background: var(--surface);
  isolation: isolate;
}
/* Verlaufsrand ohne extra Element: ein Ring dahinter, um 1.5 px groesser */
.lkarte__symbol::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: var(--grad);
  z-index: -1;
}
.lkarte__symbol::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface);
  z-index: -1;
}
.lkarte__symbol svg { width: 26px; height: 26px; }
.lkarte--dunkel .lkarte__symbol { color: #fff; background: transparent; }
.lkarte--dunkel .lkarte__symbol::after { background: rgba(255, 255, 255, 0.08); }
.lkarte--dunkel .lkarte__symbol::before { background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(127,208,224,0.35)); }
@media (hover: hover) {
  .lkarte:hover .lkarte__symbol { transform: translateY(-2px); }
  .lkarte__symbol { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
}

/* Schritt mit Symbol statt Ziffer: gleiche Kachel wie .step__num */
.step__symbol {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  margin-bottom: 1rem;
}
.step__symbol svg { width: 22px; height: 22px; }

/* Rechner: Symbol im Kopf, kleine Symbole vor den Feldnamen und vor
   dem Ergebnistitel, wie die Font-Awesome-Icons des Originals. */
.rechner__kopfsymbol {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
}
.rechner__kopfsymbol svg { width: 30px; height: 30px; }
.rfeld label { display: inline-flex; align-items: center; gap: 0.45rem; }
.rfeld__symbol { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--teal-ink); flex: none; }
.rfeld__symbol svg { width: 18px; height: 18px; }
.rechner__wertetitel { display: flex; align-items: center; gap: 0.5rem; }
.rechner__wertetitel .rfeld__symbol { width: 22px; height: 22px; }
.rechner__wertetitel .rfeld__symbol svg { width: 22px; height: 22px; }

/* Schlichter Aufruf: die Originalseite hat nur eine verlinkte
   Ueberschrift. Statt einer Verlaufsflaeche eine helle Karte mit
   Verlaufskante, Symbol und einem grossen Knopf, der die Ueberschrift
   selbst ist. */
.aufruf--schlicht {
  position: relative;
  max-width: 46rem;
  padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 3rem);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -40px rgba(12, 22, 38, 0.35);
  overflow: hidden;
  isolation: isolate;
}
/* leiser Lichtschein im Hintergrund, ohne Text zu stoeren */
.aufruf--schlicht::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120%;
  background: radial-gradient(60% 60% at 50% 100%, rgba(63, 214, 232, 0.16), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
/* Verlaufskante oben wie bei den Karten */
.aufruf--schlicht::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad);
}
.aufruf__symbol {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 1.1rem;
  border-radius: 18px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(47, 77, 158, 0.6);
}
.aufruf__symbol svg { width: 28px; height: 28px; }
.aufruf--schlicht :is(h2, h3) { color: var(--ink); margin: 0 0 0.9rem; }
.aufruf--schlicht :is(h2, h3):last-child { margin-bottom: 0; }
.aufruf--schlicht p { color: var(--ink-2); }
.aufruf--schlicht .aufruf__cta { margin-top: 1.8rem; }
/* Lange Knopftexte duerfen auf dem Handy umbrechen, statt an den
   Kartenrand zu stossen. */
.aufruf--schlicht .aufruf__cta .btn { white-space: normal; text-align: center; max-width: 100%; line-height: 1.3; }
.aufruf--schlicht :is(h2, h3) .grad {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Die verlinkte Ueberschrift als grosser Knopf: eine Textstelle, kein
   doppeltes "Jetzt anfragen". */
.aufruf--schlicht .aufruf__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.7rem 0.95rem 2rem;
  border-radius: 999px;
  border: 0;
  background: var(--grad);
  color: #fff;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 18px 40px -18px rgba(47, 77, 158, 0.7);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.aufruf--schlicht .aufruf__knopf svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .aufruf--schlicht .aufruf__knopf:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -18px rgba(47, 77, 158, 0.8); }
  .aufruf--schlicht .aufruf__knopf:hover svg { transform: translateX(4px); }
}
.aufruf--schlicht .aufruf__knopf:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .lkarte__symbol, .aufruf--schlicht .aufruf__knopf, .aufruf--schlicht .aufruf__knopf svg { transition: none; }
  .aufruf--schlicht .aufruf__knopf:hover { transform: none; }
}

/* ============================================================================
   Hoerprobe mit Wellenform (ki-voice-agent): dunkle Karte, echte Wellenform
   aus der Aufnahme, grosser Abspielknopf, laufende Anzeige oben rechts.
   ========================================================================== */
.hoer--welle {
  --p: 0;
  position: relative;
  display: block;
  max-width: 860px;
  padding: clamp(1.2rem, 2.6vw, 1.9rem) clamp(1.2rem, 2.8vw, 2.1rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(41, 178, 205, 0.22), transparent 60%),
    radial-gradient(50% 80% at 0% 100%, rgba(59, 91, 219, 0.28), transparent 60%),
    linear-gradient(160deg, #101a30, #0b1224 60%, #0a1020);
  color: #fff;
  box-shadow: 0 30px 70px -30px rgba(10, 20, 45, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  overflow: hidden;
  isolation: isolate;
}
.hoer--welle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(80% 90% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 90% at 50% 50%, #000 30%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.hoer--welle::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad);
  opacity: 0.9;
}
.hoer__kopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
}
.hoer__zeichen {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7);
}
.hoer__zeichen svg { width: 22px; height: 22px; }
.hoer--welle .hoer__titel { color: #fff; font-weight: 700; font-size: 1.05rem; }
.hoer--welle .hoer__text { color: rgba(226, 234, 246, 0.72); }

/* Vier kleine Balken oben rechts, die nur waehrend des Abspielens tanzen */
.hoer__puls {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  margin-left: auto;
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
.hoer__puls i {
  width: 4px;
  height: 30%;
  border-radius: 2px;
  background: linear-gradient(180deg, #7fe1f0, #3b5bdb);
  transform-origin: bottom;
}
.hoer[data-laeuft="ja"] .hoer__puls { opacity: 1; }
.hoer[data-laeuft="ja"] .hoer__puls i { animation: hoerPuls 0.9s ease-in-out infinite; }
.hoer[data-laeuft="ja"] .hoer__puls i:nth-child(2) { animation-delay: 0.15s; animation-duration: 1.1s; }
.hoer[data-laeuft="ja"] .hoer__puls i:nth-child(3) { animation-delay: 0.3s; animation-duration: 0.8s; }
.hoer[data-laeuft="ja"] .hoer__puls i:nth-child(4) { animation-delay: 0.45s; animation-duration: 1s; }
@keyframes hoerPuls {
  0%, 100% { height: 30%; }
  50% { height: 100%; }
}

.hoer__zeile {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
.hoer--welle .hoer__knopf {
  position: relative;
  width: 66px;
  height: 66px;
  box-shadow: 0 16px 34px -14px rgba(41, 178, 205, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.hoer--welle .hoer__knopf svg { width: 26px; height: 26px; }
.hoer--welle .hoer__knopf::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(127, 225, 240, 0.55);
  opacity: 0;
}
.hoer--welle[data-laeuft="ja"] .hoer__knopf::before { animation: hoerRing 1.8s ease-out infinite; }
@keyframes hoerRing {
  0% { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}
.hoer--welle .hoer__knopf:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 4px; }

/* Wellenform: ein Balken je Wert, Hoehe aus --h, gespielter Teil farbig */
.hoer__form {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 64px;
  padding: 0 2px;
  cursor: pointer;
  border-radius: 10px;
}
.hoer__form:focus-visible { outline: 2px solid #7fe1f0; outline-offset: 6px; }
.hoer__form i {
  flex: 1 1 0;
  min-width: 2px;
  height: calc(var(--h) * 100%);
  min-height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.25s ease, transform 0.25s ease;
}
.hoer__form:hover i { background: rgba(255, 255, 255, 0.3); }
/* Der gespielte Anteil wird ueber eine Maske eingefaerbt: eine zweite,
   farbige Balkenreihe liegt darueber und ist auf --p Breite beschnitten. */
.hoer__kopfzeile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 2px;
  pointer-events: none;
  clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
  transition: clip-path 0.2s linear;
}
.hoer__kopfzeile i {
  background: linear-gradient(180deg, #8ff0ff, #29b2cd 55%, #3b5bdb);
  box-shadow: 0 0 12px rgba(41, 178, 205, 0.55);
}
.hoer--welle .hoer__zeit {
  flex: 0 0 auto;
  display: flex;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: rgba(226, 234, 246, 0.85);
  font-variant-numeric: tabular-nums;
}
.hoer--welle .hoer__zeit [data-hoer-zeit] { color: #fff; font-weight: 600; }
.hoer__trenner { opacity: 0.5; }

@media (max-width: 560px) {
  .hoer--welle .hoer__zeile { flex-wrap: wrap; }
  .hoer__form { order: 3; width: 100%; flex: 1 1 100%; height: 52px; }
  .hoer--welle .hoer__zeit { margin-left: auto; width: auto; }
  .hoer--welle .hoer__knopf { width: 58px; height: 58px; }
}

/* Branchen-Bloecke mit Zeichen (sektion_split 'bloecke' mit 'symbol') */
.case__block--symbol {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.case__block--symbol + .case__block--symbol { margin-top: 1.35rem; }
.case__blocksymbol {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 0.1rem;
  border-radius: 13px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 12px 24px -12px rgba(47, 77, 158, 0.75);
}
.case__blocksymbol svg { width: 21px; height: 21px; }
.case__blocktext { min-width: 0; }
.section--dark .case__blocksymbol { box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.8); }

@media (prefers-reduced-motion: reduce) {
  .hoer[data-laeuft="ja"] .hoer__puls i, .hoer--welle[data-laeuft="ja"] .hoer__knopf::before { animation: none; }
  .hoer__kopfzeile, .hoer__form i, .hoer__puls { transition: none; }
}


/* ============================================================================
   'gross': Kopfzeile in h2-Groesse, auch wenn das Tag eine h3/h4 ist (die
   Originalseiten fuehren manche Abschnitte als h3, zeigen sie aber gross).
   ========================================================================== */
.section__head--gross > :is(h3, h4) {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 720;
    font-stretch: 106%;
}

/* ============================================================================
   Galerie als Laufband (sektion_galerie 'lauf'): Bilder ziehen von rechts
   nach links, beide Haelften sind identisch, darum kein Sprung am Ende.
   ========================================================================== */
.galerie--lauf { display: block; }
.galerie__reihe {
  overflow: hidden;
  padding: 0.6rem 0 1rem;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.galerie__spur {
  display: flex;
  align-items: center;
  width: max-content;
  animation: galerieLauf var(--dauer, 45s) linear infinite;
}
.galerie--lauf .galerie__bild {
  flex: 0 0 auto;
  width: clamp(300px, 36vw, 560px);
  margin-right: clamp(1rem, 2vw, 1.6rem);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.galerie--lauf .galerie__bild:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(12, 22, 38, 0.45); }
.galerie--lauf .galerie__bild img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
@media (hover: hover) {
  .galerie--lauf:hover .galerie__spur { animation-play-state: paused; }
}
@keyframes galerieLauf {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .galerie__spur { animation: none; }
  .galerie__reihe { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .galerie--lauf .galerie__bild { transition: none; }
  .galerie--lauf .galerie__bild:hover { transform: none; }
}

/* Karten mit Zeichen sind zentriert: Titel dort nicht automatisch trennen
   (sonst "Optima-le"), lieber ganze Woerter umbrechen. */
.lkarte--symbol :is(h3, h4) { hyphens: manual; overflow-wrap: normal; }

/* Funnel mit vier Antworten nebeneinander (Unternehmensgroesse) */
.funnel__karten--4 { --spalten: 4; }
@media (max-width: 900px) { .funnel__karten--4 { --spalten: 2; } }

/* Letzte Karte allein in der Reihe: volle Breite, Text aber lesbar schmal */
.lkarten--letzte-breit > :last-child,
.lkarten.lkarten--letzte-breit > :last-child:nth-child(n) { flex: 1 1 100%; max-width: none; grid-column: 1 / -1; }
.lkarten--letzte-breit > :last-child > :is(h3, h4, .lkarte__text, .ticks) { max-width: 62ch; margin-inline: auto; }

/* Schmale Schirme: die Paar-Regel (zwei Restkarten teilen sich eine Reihe)
   darf hier nicht mehr greifen, sonst stehen zwei 160-px-Karten nebeneinander. */
@media (max-width: 720px) {
  .lkarten.sp-3 > :nth-last-child(2):nth-child(3n + 1),
  .lkarten.sp-3 > :nth-last-child(2):nth-child(3n + 1) ~ *,
  .lkarten.sp-4 > :nth-last-child(2):nth-child(4n + 1),
  .lkarten.sp-4 > :nth-last-child(2):nth-child(4n + 1) ~ * { flex-basis: 100%; max-width: none; }
}

/* Dunkle Karten in dunklen Sektionen: auch h2-Titel weiss (die Merkmale der
   Taxi-Seite sind im Original h2). Die allgemeine Regel
   ".section--dark :is(...) :is(h2 ...)" setzt sonst Tinte. */
.section--dark .lkarte.lkarte--dunkel :is(h2, h3, h4) { color: #fff; }

/* ============================================================================
   Blog-Uebersicht mit Deckblaettern: jede Karte traegt oben eine Flaeche im
   Themenverlauf mit einem Zeichen, die neueste Karte ist doppelt breit.
   ========================================================================== */
.beitraege--deck { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.beitrag--deck {
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.beitrag--deck .beitrag__inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.5rem);
}
.beitrag__deck {
  --deck-a: #2f4d9e;
  --deck-b: #2fa3ba;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 8;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, var(--deck-a), var(--deck-b));
  overflow: hidden;
  isolation: isolate;
}
.beitrag__deck::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
}
.beitrag__deck::after {
  content: "";
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  right: -18%;
  bottom: -55%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.05), 0 0 0 54px rgba(255, 255, 255, 0.04);
}
.beitrag__zeichen {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.beitrag__zeichen svg { width: 30px; height: 30px; }
@media (hover: hover) {
  .beitrag--deck:hover .beitrag__zeichen { transform: translateY(-4px) scale(1.06); }
}
/* Themenfarben */
.beitrag__deck--ki         { --deck-a: #3b2fa3; --deck-b: #2f7fd8; }
.beitrag__deck--web        { --deck-a: #2f4d9e; --deck-b: #2fa3ba; }
.beitrag__deck--seo        { --deck-a: #1f7a8c; --deck-b: #3fc1a0; }
.beitrag__deck--shop       { --deck-a: #b8452a; --deck-b: #e08a3c; }
.beitrag__deck--marketing  { --deck-a: #a02f7a; --deck-b: #e0537f; }
.beitrag__deck--recht      { --deck-a: #16233d; --deck-b: #2f5fd8; }
.beitrag__deck--foerderung { --deck-a: #1f6b4a; --deck-b: #4fbf7a; }
.beitrag__deck--news       { --deck-a: #24324f; --deck-b: #5b7fe0; }
.beitrag__datum {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
/* Die neueste Karte: doppelt breit, Deckblatt links, Text rechts */
@media (min-width: 900px) {
  .beitrag--gross {
    grid-column: span 2;
    flex-direction: row;
  }
  .beitrag--gross .beitrag__deck { flex: 0 0 48%; aspect-ratio: auto; min-height: 100%; }
  .beitrag--gross .beitrag__zeichen { width: 84px; height: 84px; border-radius: 26px; }
  .beitrag--gross .beitrag__zeichen svg { width: 40px; height: 40px; }
  .beitrag--gross .beitrag__inhalt { justify-content: center; padding: clamp(1.4rem, 2.8vw, 2.2rem); }
  .beitrag--gross .beitrag__titel { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; }
  .beitrag--gross .beitrag__text { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .beitrag__zeichen { transition: none; }
  .beitrag--deck:hover .beitrag__zeichen { transform: none; }
}

/* ============================================================================
   Pakete: Zeichen auf der Verlaufsflaeche, dunkle Sektion; Kacheln mit
   Zeichen statt Emoji; h2 in Split-Bloecken in Lesegroesse.
   ========================================================================== */
.paket__symbol {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 0.4rem;
  border-radius: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.paket__symbol svg { width: 28px; height: 28px; }
@media (max-width: 860px) {
  .paket__symbol { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 0; }
  .paket__symbol svg { width: 22px; height: 22px; }
}
/* Karten auf dunklem Grund bleiben hell und lesbar */
.section--dark .paket { color: var(--ink-2); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.section--dark .paket .paket__inhalt :is(h2, h3) { color: var(--ink); }
.section--dark .paket .ticks li { color: var(--ink-2); }
.section--dark .paket--beliebt { border-color: rgba(127, 208, 224, 0.6); }
.kachel__symbol {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #fff;
  background: var(--grad);
}
.kachel__symbol svg { width: 18px; height: 18px; }
.case__copy .case__block h2 { margin: 0 0 0.35rem; font-size: clamp(1.15rem, 1.9vw, 1.4rem); }

/* Zweispaltige Stichpunkte in der Textspalte eines Splits: gleich breite
   Spalten statt max-content, sonst laeuft die Liste unter das Bild. */
.case__copy .ticks--sp2 { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: start; }
@media (max-width: 620px) { .case__copy .ticks--sp2 { grid-template-columns: 1fr; } }
/* Zwischenueberschrift nach einem Absatz braucht Luft */
.case__copy p + .case__block { margin-top: 1.3rem; }

/* ============================================================================
   Knopfreihen unter Texten, Titel im Split, breite Paketkarten
   ========================================================================== */
.section__knopf--reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.case__ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.4rem 0 0; }
.case--split .case__copy h2.case__titel { font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1rem; hyphens: manual; overflow-wrap: break-word; }

.pakete--breit .paket { grid-template-columns: 1fr 1fr; }
.pakete--breit .paket__flaeche {
  order: 2;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: clamp(2.2rem, 4vw, 3.6rem) clamp(1.6rem, 3vw, 2.4rem);
  overflow: hidden;
  isolation: isolate;
}
.pakete--breit .paket:nth-child(even) .paket__flaeche { order: 0; }
.pakete--breit .paket__flaeche::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
  z-index: -1;
}
.pakete--breit .paket__flaeche::after {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  right: -25%;
  bottom: -45%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.05), 0 0 0 62px rgba(255, 255, 255, 0.04);
  z-index: -1;
}
.pakete--breit .paket__badge { position: absolute; top: 1.1rem; right: 1.1rem; align-self: auto; backdrop-filter: blur(4px); }
.pakete--breit .paket__symbol { width: 78px; height: 78px; border-radius: 24px; margin-bottom: 0.8rem; }
.pakete--breit .paket__symbol svg { width: 36px; height: 36px; }
.pakete--breit .paket__name { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.05; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.pakete--breit .paket__unter { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.pakete--breit .paket__inhalt { padding: clamp(1.6rem, 3vw, 2.6rem); }
.pakete--breit .ticks--klein li b { color: var(--ink); font-weight: 650; }
@media (max-width: 860px) {
  .pakete--breit .paket { grid-template-columns: 1fr; }
  .pakete--breit .paket__flaeche, .pakete--breit .paket:nth-child(even) .paket__flaeche { order: 0; flex-direction: column; min-height: 220px; }
  .pakete--breit .paket__badge { top: 0.9rem; right: 0.9rem; }
  .pakete--breit .paket__symbol { width: 60px; height: 60px; border-radius: 18px; }
  .pakete--breit .paket__symbol svg { width: 28px; height: 28px; }
}

/* Sehr lange Seitentitel: eine Stufe kleiner, mit Silbentrennung als
   Notnagel auf schmalen Schirmen */
.page-hero h1.hero__h1--klein { font-size: clamp(1.75rem, 3.5vw, 2.7rem); hyphens: manual; overflow-wrap: normal; }
@media (max-width: 640px) { .page-hero h1.hero__h1--klein { hyphens: auto; overflow-wrap: anywhere; } }

/* Hinweisband unter einer Split-Karte: Abstand nach oben, gleiche Breite */
.hinweisband--unter { margin-top: clamp(1.6rem, 3.2vw, 2.4rem); }
/* Im kleinen Titel bleibt der Verlaufsteil im Textfluss (inline), sonst
   entsteht vor dem Span eine Umbruchstelle trotz geschuetzter Leerzeichen. */
.page-hero h1.hero__h1--klein .grad { display: inline; }

/* Karten mit Zeichen, aber linksbuendig (lange Texte) */
.lkarten--links .lkarte--symbol { text-align: left; }
.lkarten--links .lkarte__symbol { margin-left: 0; }
.lkarten--links .lkarte--symbol :is(h2, h3, h4) { hyphens: manual; }
.lkarten--letzte-breit.lkarten--links > :last-child > :is(h3, h4, .lkarte__text, .ticks) { margin-inline: 0; max-width: none; }

/* ============================================================================
   Merkmale untereinander (sektion_merkmale): Zeichen links, Text rechts,
   feine Trennlinien. Gleich lange oder ungleich lange Texte wirken so ruhig.
   ========================================================================== */
.merkmale { max-width: 58rem; margin: 0 auto; }
.merkmal {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--line);
}
.merkmal:first-child { border-top: 0; padding-top: 0.4rem; }
.merkmal:last-child { padding-bottom: 0.4rem; }
.merkmal__symbol {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 14px 28px -14px rgba(47, 77, 158, 0.7);
}
.merkmal__symbol svg { width: 26px; height: 26px; }
.merkmal__text :is(h2, h3, h4) { margin: 0.35rem 0 0.7rem; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; }
.merkmal__text p { margin: 0; color: var(--ink-2); line-height: 1.65; }
.merkmal__text p + p, .merkmal__text .ticks + p { margin-top: 0.85rem; }
.merkmal__text .ticks { margin: 0.7rem 0 0; }
.section--dark .merkmal { border-top-color: rgba(255, 255, 255, 0.12); }
.section--dark .merkmal__text :is(h2, h3, h4) { color: #fff; }
.section--dark .merkmal__text p { color: var(--dark-text); }
@media (max-width: 560px) {
  .merkmal { grid-template-columns: 46px minmax(0, 1fr); gap: 0.9rem; }
  .merkmal__symbol { width: 46px; height: 46px; border-radius: 14px; }
  .merkmal__symbol svg { width: 22px; height: 22px; }
}

/* Split mit senkrecht mittigem Bild (sektion_split 'mitte') */
.case--split.case--mitte { align-items: center; }
@media (min-width: 861px) { .case--split.case--mitte .case__visual { position: static; } }

/* ============================================================================
   Anleitungen: senkrechte Schritte mit Bildschirmfotos (step__inhalt) und
   Sprungmarken zu den Kapiteln
   ========================================================================== */
.steps.steps--senkrecht > .step > .step__symbol { grid-area: num; align-self: start; margin: 0; width: clamp(2.6rem, 4vw, 3.2rem); height: clamp(2.6rem, 4vw, 3.2rem); border-radius: 50%; position: relative; z-index: 1; }
.steps.steps--senkrecht > .step > .step__inhalt { grid-area: text; min-width: 0; }
.step__inhalt > p { margin: 0; color: var(--ink-2); line-height: 1.65; }
.step__inhalt > p + p { margin-top: 0.85rem; }
.step__inhalt > .step__foto + p { margin-top: 1.1rem; }
.step__foto {
  margin: 1rem 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(12, 22, 38, 0.35);
}
.step__foto img { display: block; width: 100%; height: auto; }
.steps--senkrecht .step:not(:last-child)::after { bottom: 0.2rem; }

.sprung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin: 0 auto clamp(2.6rem, 5vw, 4rem);
  max-width: 60rem;
}
.sprung__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-ink); }
.sprung__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.sprung__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1.05rem 0.4rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 10px 24px -18px rgba(12, 22, 38, 0.35);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.sprung__nr {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}
.sprung__chip:hover { border-color: rgba(47, 163, 186, 0.5); color: var(--teal-ink); transform: translateY(-2px); box-shadow: 0 18px 30px -18px rgba(34, 58, 124, 0.4); }
.sprung__chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sprung__chip { transition: none; } .sprung__chip:hover { transform: none; } }

/* Laufband mit anklickbaren Bildern (Lightbox) */
.galerie--lauf .galerie__feld {
  flex: 0 0 auto;
  width: clamp(300px, 36vw, 560px);
  margin-right: clamp(1rem, 2vw, 1.6rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow);
  cursor: zoom-in;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.galerie--lauf .galerie__feld { aspect-ratio: auto; height: auto; display: block; }
.galerie--lauf .galerie__feld img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: cover; }
.galerie--lauf .galerie__feld::after { display: none; }
@media (hover: hover) {
  .galerie--lauf .galerie__feld:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(12, 22, 38, 0.45); }
}
@media (prefers-reduced-motion: reduce) { .galerie--lauf .galerie__feld { transition: none; } .galerie--lauf .galerie__feld:hover { transform: none; } }

/* Split mit breiterem Bild (sektion_split 'bild_breit') */
@media (min-width: 861px) {
  .case--split.case--bildbreit { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .case--split.case--bildbreit.case--flip { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
}

/* Zweispaltige Listen in der Lesestrecke (sektion_text 'spalten'): gleich
   breite Spalten statt max-content, sonst laufen lange Punkte aus der
   Spalte; auf schmalen Schirmen einspaltig. */
.prosa .ticks--sp2 { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; text-align: left; }
@media (max-width: 620px) { .prosa .ticks--sp2 { grid-template-columns: 1fr; } }

.merkmale__zurueck { max-width: 58rem; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; }

.case__chips { margin: 1.1rem 0 0; }

/* Interview (main.interview) und Seiten mit fetten Absatzzeilen
   (main.fettzeilen): fette Zeilen wie Titel, der Name vor der Antwort
   gedaempft statt kursiv */
:is(.interview, .fettzeilen) :is(.merkmal__text, .case__copy) > p > strong:only-child { display: block; color: var(--ink); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.35; font-weight: 700; }
.interview :is(.merkmal__text, .case__copy) > p > em { color: var(--teal-ink); font-style: normal; font-weight: 600; }
.interview .merkmal__text > p:first-child { margin-top: 0; }

/* Danksagungen: die Stimmen der Jubilaeumsfeier als ruhiges Raster statt
   Laufband, alle zwoelf auf einmal lesbar */
.stimmen--raster { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.stimmen--raster::after { display: none; }
.stimmen--raster .stimmen__band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; animation: none; will-change: auto; }
.stimmen--raster .stimme { flex-basis: auto; }
@media (max-width: 960px) { .stimmen--raster .stimmen__band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .stimmen--raster .stimmen__band { grid-template-columns: minmax(0, 1fr); } }

/* Plattform-Karten (Vergleichsartikel): Text und Bildschirmfoto nebeneinander,
   darunter Vorteile (gruen) und Nachteile (rot), dann "Ideal fuer"-Chips */
.plattformen { display: grid; gap: clamp(1.3rem, 2.6vw, 2rem); }
.plattform {
  padding: clamp(1.3rem, 2.8vw, 2.2rem);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte, #fff);
  box-shadow: var(--shadow);
}
.plattform__kopf { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.plattform__kopf > * { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; }
.plattform__kopf::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(115deg, var(--blue), var(--teal)); flex: 0 0 auto; }
.plattform__leib { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center; }
.plattform__leib--ohnebild { grid-template-columns: minmax(0, 1fr); }
.plattform__text p { color: var(--ink-2); }
.plattform__text p + p { margin-top: 0.85rem; }
.plattform__text h4, .bilanz h4 { margin: 0 0 0.55rem; font-size: 0.98rem; }
.plattform__text h4 { margin-top: 1.1rem; }
.plattform__text .ticks { display: grid; gap: 0.45rem; margin: 0.4rem 0 0.6rem; }
.plattform__bild { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--linie); box-shadow: var(--shadow); background: #fff; }
.plattform__bild img { display: block; width: 100%; height: auto; }
.plattform__bilanz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.bilanz { padding: 1.05rem 1.2rem 1.1rem; border-radius: 16px; border: 1px solid var(--linie); }
.bilanz .ticks { display: grid; gap: 0.45rem; }
.bilanz--plus { background: rgba(92, 203, 122, 0.08); border-color: rgba(92, 203, 122, 0.38); }
.bilanz--minus { background: rgba(224, 83, 127, 0.06); border-color: rgba(224, 83, 127, 0.32); }
.bilanz--plus h4 { color: #1f7a3e; }
.bilanz--minus h4 { color: #b4325c; }
.bilanz--plus .ticks li::before { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 8.4l2.7 2.7L12 5.6" fill="none" stroke="white" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 100% no-repeat, linear-gradient(115deg, #2f9e5a, #5ccb7a); }
.ticks--minus li::before { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5 5l6 6M11 5l-6 6" fill="none" stroke="white" stroke-width="2.1" stroke-linecap="round"/></svg>') center / 100% no-repeat, linear-gradient(115deg, #c93b6a, #e0537f); }
.plattform__ideal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-top: 1.2rem; }
.plattform__ideal p { margin: 0; font-weight: 650; color: var(--ink); }
.plattform__ideal .paket__chips { margin: 0; }
.plattformen__schluss, .tabelle__danach { margin-top: 1.5rem; max-width: 70ch; }
/* Absatz unter Kacheln: mittig wie der Kopf der Sektion */
.kacheln__danach { margin: 1.6rem auto 0; max-width: 70ch; text-align: center; }
@media (max-width: 880px) {
  .plattform__leib { grid-template-columns: minmax(0, 1fr); }
  .plattform__bild { order: -1; }
  .plattform__bilanz { grid-template-columns: minmax(0, 1fr); }
}

/* Fuenf Sprungkarten in einer Reihe; Verweis immer am Kartenfuss */
.sp-5.sp-5 { --spalten: 5; }
.lkarten.sp-5 .lkarte { padding: 1.4rem 1rem 1.3rem; }
@media (max-width: 1280px) { .lkarten.sp-5 { --spalten: 3; } }
.lkarten--linkunten .lkarte { display: flex; flex-direction: column; }
.lkarten--linkunten .lkarte__link { margin-top: auto; padding-top: 1rem; align-self: center; }

/* Merkmale als Inhaltsverzeichnis: Zeilen in einer Karte, Stichwort-Pillen
   und Verweis am Zeilenende */
.merkmale--karte { max-width: none; padding: 0 clamp(1.2rem, 2.6vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.merkmale--karte .merkmal { padding: clamp(1.1rem, 2vw, 1.5rem) 0; }
.merkmale--karte .merkmal:first-child { padding-top: clamp(1.1rem, 2vw, 1.5rem); }
.merkmale--karte .merkmal:last-child { padding-bottom: clamp(1.1rem, 2vw, 1.5rem); }
.merkmal--link { grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; }
.merkmal__chips { margin: 0.6rem 0 0; }
.merkmal__chips li { font-size: 0.9rem; padding: 0.35rem 0.8rem; }
.merkmal__link { white-space: nowrap; }
.merkmale--karte .merkmal__text > h3 { margin-bottom: 0; }
@media (max-width: 720px) {
  .merkmal--link { grid-template-columns: 48px minmax(0, 1fr); }
  .merkmal__link { grid-column: 2; justify-self: start; margin-top: 0.2rem; }
}

/* Hover: Ueberblick-Zeilen (ganze Zeile klickbar), Plattform-Karten, Pillen */
.merkmal--link { position: relative; }
.merkmal__link::after { content: ""; position: absolute; inset: 0; }   /* ganze Zeile als Klickflaeche */
.merkmal__symbol, .merkmal__link svg, .merkmal__text > h3 { transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s ease, color 0.5s ease; }
/* sanft: lange Uebergaenge, kleine Bewegung */
.plattform { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.9s ease, border-color 0.7s ease; }
.plattform__bild img { transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.merkmal__chips li, .plattform__ideal .paket__chips li { transition: border-color 0.5s ease, background 0.5s ease, color 0.5s ease; }
@media (hover: hover) {
  .merkmal--link:hover .merkmal__symbol { translate: 0 -3px; box-shadow: 0 12px 24px -10px rgba(47, 95, 216, 0.5); }
  .merkmal--link:hover .merkmal__text > h3 { color: var(--marke, #2f5fd8); }
  .merkmal--link:hover .merkmal__link svg { translate: 4px 0; }
  .plattform:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.3); }
  .plattform:hover .plattform__bild img { transform: scale(1.015); }
  .merkmal__chips li:hover, .plattform__ideal .paket__chips li:hover { border-color: var(--marke, #2f5fd8); color: var(--marke, #2f5fd8); background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .merkmal__symbol, .merkmal__link svg, .merkmal__text > h3, .plattform, .plattform__bild img { transition: none; }
  .merkmal--link:hover .merkmal__symbol, .merkmal--link:hover .merkmal__link svg { translate: 0 0; }
  .plattform:hover { transform: none; }
  .plattform:hover .plattform__bild img { transform: none; }
}

/* "html.js [data-reveal]" ist spezifischer als .plattform und ueberschreibt
   deren transition: der Hover-Lift sprang deshalb ohne Uebergang. Hier
   beides zusammen: Einblenden UND sanfter Hover. */
html.js .plattform[data-reveal],
html.js .plattform[data-reveal].in {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.9s ease,
    border-color 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.js .plattform[data-reveal], html.js .plattform[data-reveal].in { transition: none; }
}

/* Schritte: Zeitangabe am Schrittende */
.step__zeit { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-ink, #1e7b90); }

/* Nachgebaute Oberflaechen (Mockups) als Bildseite eines Splits */
.mock { position: relative; padding: clamp(1.2rem, 2.4vw, 1.7rem); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-lg); font-size: 0.86rem; }
.mock--dunkel { background: linear-gradient(160deg, #16233d, #0d1526); border-color: rgba(255,255,255,0.1); color: #fff; }
.mock__tag { display: block; margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3, #6b7a99); text-align: right; }
.mock--dunkel .mock__tag { color: rgba(255,255,255,0.55); }
.mock__lab { display: block; margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3, #6b7a99); }
.mock__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mock__chips li { padding: 0.32rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500; }
.mock__chips--weg li { border: 1px solid var(--line); color: #8a93a8; text-decoration: line-through; background: #fff; }
.mock__chips--da li { background: linear-gradient(115deg, var(--blue), var(--teal)); color: #fff; }
.mock__vs { display: grid; justify-items: center; gap: 0.5rem; margin: 1.3rem 0; text-align: center; }
.mock__note { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: #8a93a8; line-height: 1.7; }
.mock__pfeil { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(115deg, var(--blue), var(--teal)); color: #fff; }
.mock__pfeil svg { width: 18px; height: 18px; }
.mock__vslabel { font-weight: 700; color: var(--ink); }
.mock__dash { display: grid; gap: 0.5rem; }
.mock__dashhead { display: flex; justify-content: space-between; padding: 0 0.4rem 0.4rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.mock__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
.mock__name { font-weight: 650; }
.mock__meta { font-size: 0.74rem; color: rgba(255,255,255,0.55); margin-top: 0.15rem; }
.mock__pill { flex: 0 0 auto; padding: 0.28rem 0.7rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mock__pill--g { background: rgba(92,203,122,0.18); color: #7fe0a0; }
.mock__pill--a { background: rgba(245,196,81,0.2); color: #f5c451; }
.mock__pill--b { background: rgba(127,225,240,0.18); color: #7fe1f0; }
.mock__portalhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.mock__greet { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.mock__greet em { font-style: normal; color: var(--teal-ink, #1e7b90); }
.mock__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(115deg, var(--blue), var(--teal)); color: #fff; font-weight: 700; }
.mock__pcard { padding: 0.85rem 0.95rem; border: 1px solid var(--line); border-radius: 12px; background: #f9fbfe; }
.mock__pcard + .mock__pcard { margin-top: 0.6rem; }
.mock__pcardhead { display: flex; justify-content: space-between; gap: 1rem; font-weight: 650; color: var(--ink); }
.mock__prozent { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3, #6b7a99); }
.mock__prog { height: 6px; margin: 0.55rem 0; border-radius: 999px; background: #e6ecf5; overflow: hidden; }
.mock__prog > span { display: block; height: 100%; width: var(--p, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--teal)); }
.mock__pmeta { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3, #6b7a99); }

/* Merkmal-Zeilen mit Vorzeile und groesserem Titel (Textabschnitte) */
.merkmal__label { margin: 0 0 0.45rem; }
.merkmale--breit { max-width: none; }
.merkmale--breit .merkmal { grid-template-columns: 72px minmax(0, 1fr); }
.merkmale--breit .merkmal__text > h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 0.7rem; }
.merkmale--breit .merkmal__text p { max-width: 72ch; }
.merkmale--breit .merkmal__text p + p { margin-top: 0.85rem; }
.merkmale--karte.merkmale--breit { padding-inline: clamp(1.4rem, 3vw, 2.6rem); }
.merkmale--karte.merkmale--breit .merkmal { padding-block: clamp(1.6rem, 3vw, 2.4rem); }

/* Leistungsbereich (Uebersichtsseite): Kopf links, Zeichen-Karten rechts */
.bereich { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.bereich__kopf { position: sticky; top: 6rem; }
.bereich__kopf > h2, .bereich__kopf > h3 { margin: 0 0 0.8rem; text-wrap: balance; }
.bereich__kopf .section__intro { margin: 0; }
.bereich__symbol { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.2rem; border-radius: 18px; background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff; box-shadow: 0 14px 28px -14px rgba(47, 95, 216, 0.6); }
.bereich__symbol svg { width: 26px; height: 26px; }
.bereich__zahl { margin: 1.2rem 0 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3, #6b7a99); }
.bereich__karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.bereich__karten > .angebot:last-child:nth-child(odd) { grid-column: 1 / -1; }
.angebot {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: start;
  gap: 0.9rem;
  padding: 1.15rem 1.15rem 1.15rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.6s ease;
}
.angebot__symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(47, 95, 216, 0.12), rgba(47, 163, 186, 0.14)); color: var(--marke, #2f5fd8); transition: background 0.6s ease, color 0.6s ease, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.angebot__symbol svg { width: 22px; height: 22px; }
.angebot__text { display: grid; gap: 0.2rem; min-width: 0; }
.angebot__text > h3, .angebot__text > h4 { margin: 0; font-size: 1.02rem; line-height: 1.3; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; transition: color 0.5s ease; }
.angebot__text > span { font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.angebot__pfeil { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 0.35rem; color: var(--ink-3, #6b7a99); transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease; }
.angebot__pfeil svg { width: 18px; height: 18px; }
html.js .angebot[data-reveal], html.js .angebot[data-reveal].in {
  transition: opacity 0.7s ease var(--d, 0s), translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s), scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.6s ease;
}
@media (hover: hover) {
  .angebot:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); }
  .angebot:hover .angebot__symbol { background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff; translate: 0 -2px; }
  .angebot:hover .angebot__text > h3 { color: var(--marke, #2f5fd8); }
  .angebot:hover .angebot__pfeil { translate: 4px 0; color: var(--marke, #2f5fd8); }
}
@media (max-width: 960px) {
  .bereich { grid-template-columns: minmax(0, 1fr); }
  .bereich__kopf { position: static; }
}
@media (max-width: 620px) {
  .bereich__karten { grid-template-columns: minmax(0, 1fr); }
  .bereich__karten > .angebot:last-child:nth-child(odd) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .angebot, .angebot__symbol, .angebot__pfeil, html.js .angebot[data-reveal] { transition: none; }
  .angebot:hover { transform: none; }
}

.merkmale__schluss { max-width: 58rem; margin: 1.4rem auto 0; }
/* Vier schmale Karten: lange Woerter im Titel duerfen trennen */
.lkarten.sp-4 .lkarte > h3, .lkarten.sp-4 .lkarte > h4 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }

/* Paketkarten: Preisblock im Inhalt (Original-Landingpage Social Media Preise) */
.paket__preisblock { margin: 1.1rem 0 0.3rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--flaeche, #f7f9fc); border: 1px solid var(--linie); }
.paket__preisalt { display: block; font-size: 0.82rem; color: var(--ink-3, #6b7a99); }
.paket__preis { margin: 0.15rem 0 0; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--marke, #2f5fd8); line-height: 1.15; }
.paket__preis small { font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3, #6b7a99); }
.paket__ersparnis { display: inline-block; margin-left: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(47, 163, 186, 0.14); color: var(--teal-ink, #1e7b90); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; }
.paket__kinote { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0; font-size: 0.88rem; font-weight: 600; color: var(--teal-ink, #1e7b90); }
.paket__kisymbol { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff; flex: 0 0 auto; }
.paket__kisymbol svg { width: 14px; height: 14px; }
.pakete--breit .ticks--klein li strong { color: var(--ink); font-weight: 650; }
.pakete--breit .paket__hinweis { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 12px; background: var(--flaeche, #f7f9fc); border: 1px solid var(--linie); }

/* Split: weitere Absaetze unter der Karte in Lesebreite */
.case__danach { max-width: 72ch; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; color: var(--ink-2); }
.case__danach p + p { margin-top: 0.9rem; }

/* Textkarten: eine Karte in voller Breite */
.tkarten.sp-1 { --spalten: 1; }

/* Beitragskarten mit Einflug: der Hover-Lift bleibt sanft (die Fold-Regel
   setzt sonst 0.5 s fuer transform/box-shadow) */
html.js .beitrag[data-fold], html.js .beitrag[data-fold].is-fertig {
  transition:
    translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.9s ease,
    border-color 0.7s ease;
}


/* ---- KI-Anwendung: Branchenkarten mit Dekozeichen, grosse Kacheln, knappe Sektion ---- */
/* oben und unten gleich viel Luft, damit die Karte mittig in der Sektion sitzt */
.section--knapp { padding-block: clamp(1.4rem, 2.6vw, 2.2rem); }
.lkarte__deko {
  position: absolute;
  top: -1.4rem;
  right: 0.6rem;
  width: 150px;
  height: 150px;
  color: var(--marke, #2f5fd8);
  opacity: 0.06;
  rotate: -10deg;
  pointer-events: none;
  transition: translate 1s cubic-bezier(0.16, 1, 0.3, 1), rotate 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}
.lkarte__deko svg { width: 100%; height: 100%; }
.lkarte--dunkel .lkarte__deko { color: #fff; opacity: 0.08; }
@media (hover: hover) {
  .lkarte:hover .lkarte__deko { translate: -4px 4px; rotate: -4deg; opacity: 0.1; }
}
@media (max-width: 560px) { .lkarte__deko { width: 110px; height: 110px; } }

.kacheln--gross { gap: 1rem; }
.kacheln--gross .kachel {
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.4rem;
  border-radius: 18px;
  box-shadow: 0 10px 30px -22px rgba(12, 22, 38, 0.35);
  line-height: 1.6;
  color: var(--ink-2);
  transition: border-color 0.7s ease, translate 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
}
.kacheln--gross .kachel__symbol { width: 46px; height: 46px; border-radius: 14px; }
.kacheln--gross .kachel__symbol svg { width: 22px; height: 22px; }
.kacheln--gross .kachel__titel { display: block; margin-bottom: 0.2rem; color: var(--ink); font-weight: 700; }
.kacheln.sp-2 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 620px) { .kacheln.sp-2 > li:last-child:nth-child(odd) { grid-column: auto; } }
@media (hover: hover) {
  .kacheln--gross .kachel:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(12, 22, 38, 0.45); }
  .kachel__symbol { transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s ease; }
  .kachel:hover .kachel__symbol { translate: 0 -2px; box-shadow: 0 12px 24px -10px rgba(47, 95, 216, 0.5); }
  /* Zeilen mit Zeichen: sanftes Anheben des Zeichens, auch ohne Link */
  .merkmale--karte .merkmal:hover .merkmal__symbol { translate: 0 -3px; box-shadow: 0 12px 24px -10px rgba(47, 95, 216, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .lkarte__deko, .kacheln--gross .kachel, .kachel__symbol { transition: none; }
}
/* Listenkarten: der Einklapp-Motor (data-fold) setzt eigene Uebergaenge und
   wuerde den sanften Hover (0,8 s) auf 0,5 s verkuerzen. Deshalb beides in
   einer Regel, wie bei den News-Karten. */
html.js .lkarte[data-fold], html.js .lkarte[data-fold].is-fertig {
  transition:
    translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.8s ease,
    border-color 0.8s ease;
}
/* Kacheln: der Reveal (data-reveal) setzt eigene Uebergaenge und liesse
   Rahmen und Schatten beim Hover hart springen. Deshalb alles in einer Regel. */
html.js .kachel[data-reveal], html.js .kachel[data-reveal].in {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.8s ease,
    border-color 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.js .kachel[data-reveal], html.js .kachel[data-reveal].in { transition: none; }
}


/* ---- Preis-Landingpages (Performance Marketing): Kopfblock mit Dashboard,
   Kennzahlen, Betreuung nebeneinander, Kombi-Box, Prozessliste, Staffeln ---- */
.case__zahlen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem clamp(1.6rem, 3vw, 2.6rem);
  margin: 1.4rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
}
.case__zahlen li { display: flex; flex-direction: column; gap: 0.15rem; }
.case__zahlen b { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; color: var(--marke); line-height: 1.1; }
.case__zahlen span { font-size: 0.82rem; color: var(--muted); }
.case__wichtig {
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--marke);
  border-radius: 0 12px 12px 0;
  background: rgba(47, 163, 186, 0.08);
}
.case__wichtig b { color: var(--ink); }

/* Preiskarte: Zeichenkasten statt Textlabel */
.preis__symbol {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.9rem;
  border-radius: 13px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 10px 22px -12px rgba(47, 77, 158, 0.7);
  transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.preis__symbol svg { width: 20px; height: 20px; }
@media (hover: hover) { .preis:hover .preis__symbol { translate: 0 -2px; } }

/* Aufruf: kleine Zeile unter dem Knopf */
.aufruf__punkte {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}
.aufruf__punkte li { display: inline-flex; align-items: center; gap: 0.45rem; }
.aufruf__punkte svg { width: 16px; height: 16px; }

/* Kacheln als Pillen (Orte) */
.kacheln--chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.kacheln--chips .kachel { padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); }

/* Hinweiskasten (Formel-Box) */
.hinweiskasten {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #1a2a49, #0f1a30);
  color: #fff;
  box-shadow: 0 20px 44px -24px rgba(12, 22, 38, 0.6);
}
.hinweiskasten__symbol { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; background: var(--grad); }
.hinweiskasten__symbol svg { width: 22px; height: 22px; }
.hinweiskasten p { margin: 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); line-height: 1.5; }
.hinweiskasten p b { display: block; margin-bottom: 0.2rem; font-size: 1.05rem; color: #fff; }

/* Betreuung: zwei Karten nebeneinander, Flaeche als Kopfband */
.pakete--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.pakete--zwei .paket { grid-template-columns: 1fr; }
.pakete--zwei .paket__flaeche {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.1rem;
  align-items: center;
  padding: 1.5rem 1.6rem;
}
.pakete--zwei .paket__symbol { grid-row: 1 / span 3; width: 54px; height: 54px; border-radius: 16px; margin: 0; }
.pakete--zwei .paket__symbol svg { width: 26px; height: 26px; }
.pakete--zwei .paket__badge { position: absolute; top: 1.1rem; right: 1.1rem; align-self: auto; }
.pakete--zwei .paket__vorher { font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }
.pakete--zwei .paket__name { font-size: clamp(1.8rem, 2.8vw, 2.3rem); line-height: 1.05; }
.pakete--zwei .paket__inhalt { display: flex; flex-direction: column; }
.pakete--zwei .paket__cta { margin-top: auto; padding-top: 1.2rem; }
@media (max-width: 900px) { .pakete--zwei { grid-template-columns: 1fr; } }

/* Staffel-Karten */
.staffeln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.staffel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.7s ease; }
.staffel__kopf { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.3rem; background: var(--flaeche, #f7f9fc); border-bottom: 1px solid var(--line); }
.staffel__kopf h3 { margin: 0; font-size: 1.05rem; }
.staffel__kopf p { margin: 0.1rem 0 0; font-size: 0.82rem; color: var(--muted); }
.staffel__symbol { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: var(--grad); }
.staffel__symbol svg { width: 20px; height: 20px; }
.staffel__zeilen { list-style: none; margin: 0; padding: 0.4rem 1.3rem 0.6rem; }
.staffel__zeilen li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.staffel__zeilen li:first-child { border-top: 0; }
.staffel__zeilen b { display: block; font-size: 0.95rem; color: var(--ink); }
.staffel__zeilen small { display: block; font-size: 0.78rem; color: var(--muted); }
.staffel__zeilen span { font-weight: 800; color: var(--marke); white-space: nowrap; }
@media (hover: hover) { .staffel:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); } }
@media (max-width: 960px) { .staffeln { grid-template-columns: 1fr; } }

/* Dashboard-Mockup im Kopfblock */
.dash {
  padding: 1.3rem 1.4rem 1.1rem;
  border-radius: 20px;
  background: linear-gradient(160deg, #182744, #0e1830);
  color: #fff;
  box-shadow: 0 30px 60px -30px rgba(12, 22, 38, 0.7);
  font-size: 0.8rem;
}
.dash__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.dash__live { padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(47, 163, 186, 0.25); color: #7fe1f0; letter-spacing: 0.12em; }
.dash__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.dash__kpi { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.dash__kpi span { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.dash__kpi b { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.dash__kpi i { font-style: normal; font-size: 0.72rem; font-weight: 600; }
.dash__auf { color: #5ccb7a; }
.dash__ab { color: #f26d6d; }
.dash__chart { display: block; width: 100%; height: auto; border-radius: 10px; }
.dash__achse { display: flex; justify-content: space-between; margin-top: 0.4rem; padding: 0 0.3rem; font-size: 0.66rem; color: rgba(255, 255, 255, 0.5); }

/* Kombi-Paket: Preis-Box neben dem Text (dunkle Sektion) */
.kombi {
  padding: 1.5rem 1.6rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}
.kombi__label { margin: 0 0 0.9rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.kombi__zeile { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.kombi__zeile--alt { color: rgba(255, 255, 255, 0.5); }
.kombi__summe { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0 0.2rem; font-weight: 700; }
.kombi__summe b { font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: #7fe1f0; }
.kombi__unter { margin: 0; text-align: right; font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }

/* Nummerierte Schrittliste (Zahl links, Text rechts).
   Hiess frueher .prozess und kollidierte damit mit der gleichnamigen
   Sektion der Startseite: dort bekam JEDES li dieses Karten-Raster. */
.schrittliste { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; counter-reset: schritt; }
.schrittliste li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.7s ease;
}
.schrittliste li::before { counter-increment: schritt; content: counter(schritt); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; font-weight: 800; font-size: 0.95rem; background: var(--grad); }
.schrittliste b { display: block; font-size: 0.98rem; color: var(--ink); }
.schrittliste small { display: block; font-size: 0.85rem; color: var(--muted); }
@media (hover: hover) { .schrittliste li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); } }
@media (prefers-reduced-motion: reduce) { .staffel, .schrittliste li, .preis__symbol { transition: none; } }
/* Preis-, Paket- und Staffelkarten: Reveal/Fold setzen eigene Uebergaenge,
   deshalb Hover-Uebergaenge mit in die Regel (sonst springt der Schatten). */
html.js .preis[data-fold], html.js .preis[data-fold].is-fertig {
  transition:
    translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.8s ease,
    border-color 0.7s ease;
}
.paket { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.7s ease; }
html.js .staffel[data-reveal], html.js .staffel[data-reveal].in,
html.js .paket[data-reveal], html.js .paket[data-reveal].in {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.8s ease,
    border-color 0.7s ease;
}
@media (hover: hover) {
  .paket:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(12, 22, 38, 0.35); border-color: rgba(47, 163, 186, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .preis[data-fold], html.js .preis[data-fold].is-fertig, .paket,
  html.js .staffel[data-reveal], html.js .staffel[data-reveal].in,
  html.js .paket[data-reveal], html.js .paket[data-reveal].in { transition: none; }
}
/* Vier Preiskarten in einer Reihe: Namen nicht mitten im Wort trennen */
.preise.sp-4 .preis__name { hyphens: manual; }
/* Dashboard auf schmalen Schirmen: Kennzahl-Beschriftung nicht buchstabenweise umbrechen */
.dash__kpi { min-width: 0; }
.dash__kpi span { overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 480px) {
  .dash__kpi span { font-size: 0.58rem; letter-spacing: 0.05em; }
  .dash__kpi { padding: 0.65rem 0.7rem; }
}
/* Dunkle Split-Karte in heller Sektion (Kombi-Paket) */
.case--dunkel {
  background: linear-gradient(135deg, #1a2a49, #0f1a30);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px -30px rgba(12, 22, 38, 0.6);
}
.case--dunkel :is(h2, h3, h4, b, strong) { color: #fff; }
.case--dunkel p { color: rgba(255, 255, 255, 0.78); }
.case--dunkel .ticks li { color: rgba(255, 255, 255, 0.82); }
.case--dunkel .ticks li::before { color: #7fd0e0; }
.case.case--dunkel .case__label { color: #7fd0e0; }

/* Orte-Raster neben dem Standort-Text (statt Pillen) */
.orte { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin: 0; padding: 0; }
.orte li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
}
.orte li span { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; color: var(--marke); background: rgba(47, 163, 186, 0.12); }
.orte li svg { width: 15px; height: 15px; }
.orte li:last-child { grid-column: 1 / -1; }
@media (hover: hover) { .orte li:hover { transform: translateY(-2px); border-color: rgba(47, 163, 186, 0.45); box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .orte li { transition: none; } }
@media (max-width: 420px) { .orte { grid-template-columns: 1fr; } }

/* Videobox: Vorschaubild mit Abspielknopf, das Video laeuft an Ort und Stelle */
.videobox { position: relative; overflow: hidden; border-radius: 18px; background: #0f1a30; box-shadow: 0 26px 50px -28px rgba(12, 22, 38, 0.6); }
.videobox video { display: block; width: 100%; height: auto; aspect-ratio: 1268 / 910; object-fit: cover; }
.videobox__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 18px 40px -16px rgba(12, 22, 38, 0.7);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, box-shadow 0.8s ease;
}
.videobox__play svg { width: 30px; height: 30px; margin-left: 4px; }
.videobox__play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); opacity: 0.7; }
.videobox.laeuft .videobox__play { opacity: 0; pointer-events: none; }
@media (hover: hover) { .videobox__play:hover { transform: scale(1.04); box-shadow: 0 22px 44px -16px rgba(12, 22, 38, 0.8); } }
@media (prefers-reduced-motion: reduce) { .videobox__play { transition: none; } }

/* Split-Karten: sanfter Hover fuer die ganze Karte (3 px, 0,8 s), das Bild
   zoomt minimal, die Zeichen der Bloecke heben sich. Der Scroll-Einflug
   (data-turn) setzt eigene Uebergaenge, deshalb alles in einer Regel. */
.case { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.7s ease; }
html.js .case[data-turn], html.js .case[data-turn].is-fertig {
  transition:
    scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.8s ease,
    border-color 0.7s ease;
}
.bildrahmen img, .videobox video { transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.case__blocksymbol { transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s ease; }
@media (hover: hover) {
  .case:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .section--dark .case:hover { transform: none; box-shadow: none; }
  .case:hover .bildrahmen img { transform: scale(1.015); }
  .case__block--symbol:hover .case__blocksymbol { translate: 0 -3px; box-shadow: 0 14px 26px -10px rgba(47, 95, 216, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .case, html.js .case[data-turn], html.js .case[data-turn].is-fertig, .bildrahmen img, .videobox video, .case__blocksymbol { transition: none; }
}

/* ---- Tour-Karten: grosse Bildflaechen mit Gradring, verlinkt auf die
   Rundum-Ansicht (Google Maps Business View) ---- */
.touren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
.tour {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--dark);
  box-shadow: var(--shadow);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.7s ease;
}
.tour img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 370; object-fit: cover; transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
/* Dunkler Saum: haelt den Ring lesbar, egal wie hell das Foto ist */
.tour::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(8, 16, 30, 0.5) 0%, rgba(8, 16, 30, 0.12) 46%, rgba(8, 16, 30, 0.35) 100%);
  transition: opacity 0.8s ease;
}
.tour__zeichen {
  position: absolute;
  right: clamp(0.9rem, 2vw, 1.4rem);
  bottom: clamp(0.9rem, 2vw, 1.4rem);
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour__zeichen > svg:last-child { position: relative; width: 22px; height: 22px; }
.tour__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tour__bahn { fill: rgba(10, 19, 34, 0.55); stroke: rgba(255, 255, 255, 0.35); stroke-width: 3; }
.tour__bogen {
  fill: none;
  stroke: var(--teal);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 90 237;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour::after { background: linear-gradient(200deg, rgba(8, 16, 30, 0) 45%, rgba(8, 16, 30, 0.5) 100%); }
@media (hover: hover) {
  .tour:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.45); }
  .tour:hover img { transform: scale(1.015); }
  .tour:hover::after { opacity: 0.85; }
  .tour:hover .tour__zeichen { transform: scale(1.06); }
  .tour:hover .tour__bogen { stroke-dashoffset: -327; }
}
.tour:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 760px) { .touren { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .tour, .tour img, .tour__zeichen, .tour__bogen, .tour::after { transition: none; }
}
/* Schritte, die im Original Absaetze sind: kraeftiger als Fliesstext, damit
   die Zeitleiste nicht mager wirkt. */
.step__satz { font-size: clamp(1rem, 1.5vw, 1.1rem); font-weight: 600; color: var(--ink); line-height: 1.5; }
.steps--senkrecht .step__satz { margin: 0.35rem 0 0; }

/* Anteilsbalken neben einem Text (z. B. Umfragewerte eines Beitrags).
   Reine Grafik: die Zahlen stehen im Text daneben. */
.anteile { display: grid; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.anteil { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 0.9rem; align-items: baseline; }
.anteil__name { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.anteil__wert { font-size: 1.05rem; font-weight: 800; color: var(--marke); white-space: nowrap; }
.anteil__bahn { grid-column: 1 / -1; position: relative; height: 14px; border-radius: 99px; background: #dfe7f4; overflow: hidden; }
.anteil__bahn i {
  display: block;
  height: 100%;
  /* Kleine Werte bleiben sichtbar: mindestens ein Punkt Breite */
  width: max(var(--w), 16px);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  box-shadow: 0 0 0 1px rgba(34, 58, 124, 0.12) inset;
  transform-origin: left center;
}
/* Feine Marke bei der Haelfte: macht sichtbar, wie klein die Anteile sind */
.anteil__bahn::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(12, 22, 38, 0.14); }
/* Bewusst ohne Wachstums-Animation: der Balken haengt sonst am Scroll-Motor
   und bliebe leer, wenn dessen Klasse ausbleibt. */

/* Grosse Kennzahlen brauchen mobil die volle Breite: in den zwei Spalten der
   normalen Kennzahlen (167 px) ragt die Zahl sonst aus der Karte. */
@media (max-width: 620px) {
  .stats.stats--gross { grid-template-columns: 1fr; }
  .stats--gross .stat b { font-size: clamp(2.4rem, 11vw, 3.2rem); }
}

/* Schlagworte im Seitenkopf (Preisseiten): kurze Stichworte als Pillen. */
.page-hero__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
}
.page-hero__chips li {
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.7s ease, background 0.7s ease;
}
@media (hover: hover) { .page-hero__chips li:hover { border-color: rgba(127, 208, 224, 0.6); background: rgba(255, 255, 255, 0.12); } }
@media (prefers-reduced-motion: reduce) { .page-hero__chips li { transition: none; } }
/* Leere Vorsatz-Zeile (bei Kennzahlen ohne "ab"): haelt die Zahlen aller
   Karten auf einer Linie. */
.stat__vor:empty::before { content: "\00a0"; }

/* Preiskarte nach dem Vorbild der Original-Preisseiten: Abrechnungszeile
   unter dem Titel, Begruendung als abgesetzter Kasten NACH dem Preis. So
   stehen die Preise aller Karten einer Reihe auf gleicher Hoehe. */
.preis__abrechnung { margin: -0.25rem 0 0.7rem; font-size: 0.85rem; color: var(--muted); }
.preis__grund {
  margin: 0.9rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border-left: 3px solid rgba(47, 163, 186, 0.5);
  background: rgba(47, 163, 186, 0.08);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.preis__grund b { color: var(--ink); }
.preis--dunkel .preis__grund { background: rgba(255, 255, 255, 0.06); border-left-color: rgba(127, 208, 224, 0.5); color: var(--dark-text); }
.preis--dunkel .preis__grund b { color: #fff; }
/* Der Preisblock sitzt in allen Karten einer Reihe auf gleicher Hoehe, weil
   davor nur Label, Titel und Abrechnungszeile stehen. Die Aufzaehlung schiebt
   den Knopf ans Kartenende. */
.preis .ticks { margin-top: 1.1rem; }
/* In mehrspaltigen Reihen bekommt der Kartentitel Platz fuer zwei Zeilen.
   Sonst rutscht der Preis einer Karte mit langem Titel nach unten und die
   Preise stehen nicht mehr auf einer Linie. */
/* Zwei Zeilen bei drei Spalten, drei bei vier Spalten (dort sind die Karten
   schmaler und lange Namen brauchen eine Zeile mehr). */
.preise.sp-3 .preis__name { min-height: 2lh; }
.preise.sp-4 .preis__name { min-height: 3lh; }
/* Bei vier Spalten sind die Karten schmal: kleinerer Titel, damit lange
   Woerter wie "Wettbewerbsanalyse" nicht mitten im Wort brechen. */
.preise.sp-4 .preis__name { font-size: 1.05rem; line-height: 1.35; hyphens: auto; }
@supports not (height: 1lh) {
  .preise.sp-3 .preis__name { min-height: 3.2em; }
  .preise.sp-4 .preis__name { min-height: 4.8em; }
}
@media (max-width: 720px) { .preise.sp-3 .preis__name, .preise.sp-4 .preis__name { min-height: 0; } }

/* Ranking-Mockup im Kopf der SEO-Preisseite (wie im Original). */
.rankmock {
  padding: 1.2rem 1.3rem 1.4rem;
  border-radius: 20px;
  background: linear-gradient(160deg, #182744, #0e1830);
  color: #fff;
  box-shadow: 0 30px 60px -30px rgba(12, 22, 38, 0.7);
}
.rankmock__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.rankmock__live { padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(47, 163, 186, 0.25); color: #7fe1f0; letter-spacing: 0.12em; }
.rankmock__zeilen { display: grid; gap: 0.55rem; }
.rankmock__zeile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
}
.rankmock__pos { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--grad); font-weight: 800; font-size: 0.85rem; }
.rankmock__kw { color: rgba(255, 255, 255, 0.85); overflow-wrap: anywhere; }
.rankmock__trend { color: #5ccb7a; font-weight: 700; white-space: nowrap; }
/* Ein mittig gesetzter Kopf begrenzt die Breite auf 52rem und ueberschreibt
   damit die Vollbreiten-Variante. Zusammen sollen sie die volle Breite nutzen,
   sonst rutscht das letzte Wort der Ueberschrift allein in die zweite Zeile. */
.section__head--voll.section__head--mittig { max-width: none; }
.section__head--voll.section__head--mittig > :is(p, .section__intro) { max-width: 52rem; margin-inline: auto; }
/* .section__head--breit begrenzt die Ueberschrift selbst auf 46rem. In der
   Vollbreiten-Variante darf sie breiter werden. */
.section__head--voll.section__head--breit > h2 { max-width: none; }
/* Ein Abschnittstitel der Stufe h3 stand bisher in Fliesstextgroesse (rund
   20 px) und war als Titel nicht zu erkennen. Er bekommt eine mittlere Groesse:
   deutlich groesser als der Text, aber kleiner als eine h2. */
.section__head > h3, .section__head > h4 { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.2; }
.section__head--gross > :is(h3, h4) { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }

/* Satz, der im Original ueber der Ueberschrift einer Split-Spalte steht.
   Kein Kicker in Versalien, sondern eine ruhige Vorzeile in Markenfarbe. */
.case__vorsatz {
  margin: 0 0 0.55rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--marke);
}
.section--dark .case .case__vorsatz { color: #7fd0e0; }

/* Lexikonkarte mit Zeichen und Erklaerung: der Begriff steht links als
   eigene Spalte, der Text daneben. Die schmale Variante ohne 'danach'
   bleibt unveraendert. */
.lexdef--gross {
  max-width: 60rem;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
.lexdef--gross .lexdef__kopf {
  display: block;
  margin-bottom: 0;
}
.lexdef__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.8rem;
  border-radius: 14px;
  background: var(--grad);
  color: #fff;
}
.lexdef__symbol svg { width: 22px; height: 22px; }
.lexdef--gross .lexdef__marke { display: block; margin-bottom: 0.35rem; }
.lexdef--gross .lexdef__begriff {
  display: block;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lexdef__danach {
  margin: 0.9rem 0 0;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink-2);
}
.lexdef__zurueck { max-width: 60rem; margin-inline: auto; }
@media (max-width: 780px) {
  .lexdef--gross { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* ---------- Bilder-Schau (ein grosses Bild, Pfeile, Punkte) ----------
   Ersetzt den Fade-Slider der Originalseiten. Die Buehne hat ein festes
   Seitenverhaeltnis, damit beim Wechseln nichts springt. */
.schau {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
}
.schau__buehne {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-2, #eef3fb);
  box-shadow: 0 26px 60px -34px rgba(12, 22, 38, 0.55);
}
.schau__folie {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  opacity: 0;
  visibility: hidden;
  /* Sanft wie alle Uebergaenge der Seite. */
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.schau__folie.ist-an {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s linear 0s;
}
.schau__folie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.schau__pfeil {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(12, 22, 38, 0.6);
  transition: background 0.7s ease, box-shadow 0.7s ease, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.schau__pfeil svg { width: 22px; height: 22px; }
.schau__pfeil--zurueck { left: 0.85rem; }
.schau__pfeil--vor { right: 0.85rem; }
@media (hover: hover) {
  .schau__pfeil:hover { background: #fff; box-shadow: 0 16px 32px -14px rgba(12, 22, 38, 0.7); }
}
.schau__pfeil:focus-visible { outline: 3px solid var(--marke); outline-offset: 3px; }
.schau__zahl {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  margin: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(11, 20, 34, 0.62);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}
.schau__punkte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.schau__punkt {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 47, 85, 0.24);
  cursor: pointer;
  transition: background 0.7s ease, width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.schau__punkt.ist-an { width: 26px; border-radius: 999px; background: var(--grad); }
.schau__punkt:focus-visible { outline: 3px solid var(--marke); outline-offset: 3px; }
.section--dark .schau__punkt { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 620px) {
  .schau__pfeil { width: 40px; height: 40px; }
  .schau__pfeil--zurueck { left: 0.5rem; }
  .schau__pfeil--vor { right: 0.5rem; }
  /* Rechts unten sitzen auf dem Handy die schwebenden Kontaktknoepfe,
     deshalb steht der Zaehler dort links. */
  .schau__zahl { right: auto; left: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .schau__folie, .schau__pfeil, .schau__punkt { transition: none; }
}

/* Verwandte Beitraege: bleibt die letzte Reihe unvollstaendig (z. B. fuenf
   Karten in drei Spalten), stehen die uebrigen Karten mittig statt links zu
   haengen. Gleiche Breite wie das Raster, nur als Flex. */
.cases.cases--mittig {
  --spalten: 3;
  --luecke: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luecke);
}
.cases.cases--mittig > .case-sm {
  flex: 1 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
  max-width: calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
}
@media (max-width: 900px) {
  .cases.cases--mittig { --spalten: 2; }
}
@media (max-width: 620px) {
  .cases.cases--mittig { --spalten: 1; }
}
/* Hover der kleinen Karten weich wie ueberall sonst (vorher 0,22 s und 5 px).
   Der Reveal setzt eigene Uebergaenge, deshalb beides in einer Regel. */
.case-sm { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.8s ease; }
.case-sm:hover { transform: translateY(-3px); }
html.js .case-sm[data-reveal], html.js .case-sm[data-reveal].in {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.8s ease;
}
@media (prefers-reduced-motion: reduce) {
  .case-sm, html.js .case-sm[data-reveal], html.js .case-sm[data-reveal].in { transition: none; }
}

/* Quellenzeile am Ende eines Beitrags: lange URLs muessen umbrechen duerfen,
   sonst ragen sie aus der Karte. */
.case__quelle {
  margin-top: 1.1rem;
  font-size: 0.94rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* Sichtbares Aktualisierungsdatum am Seitenende (Vorgabe fuer KI-Systeme,
   die Aktualitaet stark gewichten). */
.seiten-stand {
  margin: 0 0 2.6rem;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* Textlink im dunklen Hinweiskasten: eigene Zeile und heller, sonst geht er
   im Fliesstext unter. */
.hinweiskasten a { color: #7fd0e0; }
.hinweiskasten__link {
  display: inline-block;
  margin-top: 0.55rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.7s ease;
}
@media (hover: hover) { .hinweiskasten__link:hover { color: #b8ecf5; } }

/* ---------- Kette: Chips mit Verbindungslinie ----------
   Die Vorgabe zeigt diese Reihen als Kette. Loose Pillen wirken beliebig,
   die Verbindung macht die Abfolge lesbar. */
.kacheln--kette { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 0.2rem; }
.kacheln--kette .kachel {
  position: relative;
  margin-block: 0.35rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -16px rgba(12, 22, 38, 0.5);
}
.kacheln--kette .kachel + .kachel::before {
  content: "";
  display: block;
  position: absolute;
  left: -0.85rem;
  top: 50%;
  width: 0.7rem;
  height: 2px;
  translate: 0 -50%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(47, 95, 216, 0.25), rgba(47, 163, 186, 0.6));
}
@media (max-width: 620px) {
  .kacheln--kette .kachel + .kachel::before { display: none; }
  .kacheln--kette { gap: 0.5rem; }
}

/* Chips und Ketten auf dunklem Grund */
.section--dark .kacheln--chips .kachel,
.section--dark .kacheln--kette .kachel {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(127, 225, 240, 0.22);
  color: var(--dark-text, #e8eefc);
  box-shadow: none;
}
.section--dark .case .case__chips li,
.section--dark .paket__chips li {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(127, 225, 240, 0.24);
  color: #e8eefc;
}

/* Vier verwandte Karten in drei Spalten ergeben 3 + 1. Bei genau vier
   Karten deshalb zwei Spalten, das ergibt ein sauberes 2 x 2. */
.cases.cases--mittig:has(> :nth-child(4):last-child) { --spalten: 2; }

/* Stelle ist gerade nicht ausgeschrieben: die Karte tritt zurueck, oben steht
   eine ruhige Pille. Kein Durchstreichen, das liest sich schlecht. */
.lkarte__ruht {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(27, 47, 85, 0.07);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lkarte--ruht { background: rgba(27, 47, 85, 0.035); box-shadow: none; }
.lkarte--ruht > :is(h3, h4) { color: var(--ink-2); }
.lkarte--ruht .lkarte__text,
.lkarte--ruht .ticks { color: var(--muted); }
.lkarte--ruht .ticks li::before { opacity: 0.45; }
.section--dark .lkarte__ruht { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }

/* ============================================================================
   Preis-Konfigurator (partials/konfigurator.php)
   Eigene, helle Optik, unabhaengig von den Funnel-Regeln: Panel mit
   Verlaufskante, Schrittleiter, Auswahlkacheln mit Haken, Paketkacheln fuer
   die Website-Modelle, Angebotsleiste als Fuss des Panels (volle Breite,
   deshalb liegen die Summen unten statt in einer Spalte rechts).
   ========================================================================== */
.konfig-sektion { position: relative; overflow: clip; background: var(--bg); }
.konfig-sektion__raster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(34, 58, 124, 0.14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 80%);
}
.konfig-sektion__schein { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: 0.55; }
.konfig-sektion__schein--a { top: 4%; left: -6%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(47, 163, 186, 0.35), transparent 65%); }
.konfig-sektion__schein--b { bottom: -8%; right: -8%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(47, 77, 158, 0.3), transparent 65%); }
.konfig-sektion > .wrap { position: relative; z-index: 1; }

.konfig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
/* Das UA-Stylesheet setzt [hidden]{display:none}; eigene display-Regeln
   (.btn{display:inline-flex}) wuerden per Reihenfolge gewinnen. */
.konfig [hidden] { display: none !important; }

/* Panel */
.konfig__form { position: relative; padding: clamp(1.4rem, 3vw, 2.4rem); }
.konfig__form::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad); }
.konfig__honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Schrittleiter */
.konfig__kopf { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.konfig__leiter {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
  padding: 0.25rem 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.konfig__leiter::-webkit-scrollbar { display: none; }
.konfig__stufe {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color 0.7s ease, border-color 0.7s ease, color 0.7s ease;
}
.konfig__stufe i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e9eef6;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  transition: background-color 0.7s ease, color 0.7s ease;
}
.konfig__stufe.ist-erledigt { color: var(--ink); cursor: pointer; }
/* Erledigte Stufen zeigen einen Haken statt der Zahl */
.konfig__stufe.ist-erledigt i { font-size: 0; background: #d9f1f5; color: var(--teal-ink); }
.konfig__stufe.ist-erledigt i::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
}
.konfig__stufe.ist-aktiv { color: var(--ink); background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.konfig__stufe.ist-aktiv i { background: var(--grad); color: #fff; }
@media (hover: hover) { .konfig__stufe.ist-erledigt:hover { background: #f1f4f9; } }
.konfig__stufe:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }

.konfig__stand { display: flex; align-items: center; gap: 1rem; }
.konfig__zaehler {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.konfig__zaehler b { color: var(--teal-ink); }
.konfig__balken { flex: 1 1 auto; height: 6px; border-radius: 999px; background: #e9eef6; overflow: hidden; }
.konfig__balken span { display: block; height: 100%; width: 6%; border-radius: inherit; background: var(--grad); transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

/* Schritte */
.konfig__schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
.konfig__form.ist-gefuehrt .konfig__schritt { display: none; }
.konfig__form.ist-gefuehrt .konfig__schritt.ist-aktiv { display: block; }
.konfig__form:not(.ist-gefuehrt) .konfig__schritt + .konfig__schritt { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.konfig__frage {
  display: block;
  padding: 0;
  margin: 0 0 0.45rem;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.konfig__hinweis { margin: 0; max-width: 40rem; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.konfig__schritt.ist-neu .konfig__frage,
.konfig__schritt.ist-neu .konfig__hinweis { animation: konfig-auf 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.konfig__schritt.ist-neu .konfig__karte { animation: konfig-auf 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(60ms + var(--n, 0) * 55ms); }
@keyframes konfig-auf { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }

/* Kacheln */
.konfig__karten { display: grid; gap: 0.85rem; margin-top: clamp(1.1rem, 2.4vw, 1.5rem); }
.konfig__karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.konfig__karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.konfig__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.05rem 1.05rem 1.1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #f7f9fc;
  cursor: pointer;
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.8s ease,
    background-color 0.8s ease,
    box-shadow 0.8s ease;
}
.konfig__karte input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.konfig__kopfzeile { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.3rem; padding-right: 2rem; }
.konfig__symbol {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(47, 77, 158, 0.12), rgba(47, 163, 186, 0.16));
  color: var(--blue);
  transition: background 0.8s ease, color 0.8s ease;
}
.konfig__symbol svg { width: 22px; height: 22px; }
.konfig__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-ink); }
.konfig__titel { padding-right: 1.6rem; font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.konfig__unter { font-size: 0.84rem; line-height: 1.45; color: var(--ink-2); }
.konfig__preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.konfig__preis b {
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  transition: background-color 0.8s ease, border-color 0.8s ease, color 0.8s ease;
}
.konfig__preis s { font-size: 0.78rem; color: #7a869c; }
.konfig__preis em { font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--teal-ink); }
.konfig__haken {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  opacity: 0;
  scale: 0.5;
  transition: opacity 0.6s ease, scale 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.konfig__haken svg { width: 14px; height: 14px; }
.konfig__badge {
  position: absolute;
  top: -0.6rem;
  right: 1rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.konfig__badge--passt { background: #d9f1f5; color: var(--teal-ink); }
.konfig__karte.ist-empfohlen { border-color: rgba(47, 163, 186, 0.45); }
.konfig__karte[hidden] { display: none; }
@media (hover: hover) {
  .konfig__karte:hover { transform: translateY(-2px); border-color: rgba(47, 163, 186, 0.55); background: #fff; box-shadow: var(--shadow); }
}
.konfig__karte:has(input:checked) {
  border-color: var(--teal-ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 163, 186, 0.16), 0 18px 34px -22px rgba(34, 58, 124, 0.35);
}
.konfig__karte:has(input:checked) .konfig__symbol { background: var(--grad); color: #fff; }
.konfig__karte:has(input:checked) .konfig__haken { opacity: 1; scale: 1; }
.konfig__karte:has(input:checked) .konfig__preis b { border-color: transparent; background: #e6f6f9; color: var(--teal-ink); }
.konfig__karte:has(input:focus-visible) { outline: 2px solid var(--teal-ink); outline-offset: 3px; }

/* Paketkacheln: die Website-Modelle der Preisseite */
.konfig__karte--paket { gap: 0.3rem; padding: 1.2rem 1.2rem 1.25rem; }
.konfig__karte--paket .konfig__titel { font-size: 1.25rem; letter-spacing: -0.01em; }
.konfig__punkte { display: grid; gap: 0.3rem; margin: 0.55rem 0 0.2rem; padding: 0; list-style: none; }
.konfig__punkte li { position: relative; padding-left: 1.15rem; font-size: 0.82rem; line-height: 1.45; color: var(--ink-2); }
.konfig__punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--teal-ink);
  border-bottom: 2px solid var(--teal-ink);
  transform: rotate(-45deg);
}
.konfig__karte--paket .konfig__preis b { padding: 0; border: 0; background: none; font-size: 1.1rem; }
@media (min-width: 961px) {
  .konfig__karte--paket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "kopf punkte" "titel punkte" "unter punkte" "preis punkte";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 1.4rem;
    row-gap: 0.2rem;
  }
  .konfig__karte--paket .konfig__kopfzeile { grid-area: kopf; }
  .konfig__karte--paket .konfig__titel { grid-area: titel; padding-right: 0; }
  .konfig__karte--paket .konfig__unter { grid-area: unter; }
  .konfig__karte--paket .konfig__preis { grid-area: preis; align-self: end; }
  .konfig__karte--paket .konfig__punkte { grid-area: punkte; align-self: center; margin: 0; padding-left: 1.2rem; border-left: 1px solid var(--line); }
}
.konfig__karte--paket:has(input:checked) .konfig__preis b { background: none; color: var(--teal-ink); }

/* Kontakt */
.konfig__ergebnis {
  margin: 1.2rem 0 1.4rem;
  padding: 1.1rem 1.2rem;
  border-radius: 18px;
  border-left: 4px solid var(--teal-ink);
  background: linear-gradient(140deg, #eef3fb, #e8f6f9);
}
.konfig__ergebnis p { margin: 0; color: var(--ink-2); }
.konfig__ergebnis-zahlen { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; margin-bottom: 0.7rem; }
.konfig__ergebnis-zahlen span { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.konfig__ergebnis-zahlen b {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.konfig__ergebnis-liste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.konfig__ergebnis-liste li { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 0.8rem; color: var(--ink); }
.konfig__anrede { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.konfig__pille { position: relative; }
.konfig__pille input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.konfig__pille span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f7f9fc;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease;
}
.konfig__pille:has(input:checked) span { background: var(--grad); border-color: transparent; color: #fff; }
.konfig__pille:has(input:focus-visible) span { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.konfig__gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
.konfig__feld--breit { grid-column: 1 / -1; }
.konfig__feldname { display: block; margin-bottom: 0.35rem; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.konfig__eingabe {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f7f9fc;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
}
.konfig__eingabe:focus { outline: none; border-color: var(--teal-ink); background: #fff; box-shadow: 0 0 0 3px rgba(47, 163, 186, 0.18); }
textarea.konfig__eingabe { resize: vertical; min-height: 5.5rem; }
.konfig__feld.is-fehler .konfig__eingabe { border-color: #d64545; }
.konfig__fehler { display: block; font-size: 0.78rem; color: #c23b3b; }
.konfig__fehler:not(:empty) { margin-top: 0.3rem; }
.konfig__einwilligung { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1rem; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.konfig__einwilligung input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0.15rem 0 0; accent-color: var(--teal-ink); }
.konfig__einwilligung a { color: var(--teal-ink); }

/* Meldung und Leiste */
.konfig__meldung { margin: 1rem 0 0; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.9rem; }
.konfig__meldung.is-schlecht { background: #fdecec; color: #a52f2f; }
.konfig__meldung.is-gut { background: #e6f6f9; color: var(--teal-ink); }
.konfig__leiste { display: flex; align-items: center; gap: 1rem; margin-top: clamp(1.4rem, 3vw, 2rem); padding-top: 1.2rem; border-top: 1px solid var(--line); }
.konfig__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.4rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.6s ease;
}
.konfig__zurueck svg { width: 18px; height: 18px; }
@media (hover: hover) { .konfig__zurueck:hover { color: var(--ink); } }
.konfig__tipp { margin: 0 auto 0 0; font-size: 0.8rem; color: #7a869c; }
.konfig__weiter svg,
.konfig__senden svg { width: 18px; height: 18px; margin-left: 0.3rem; }

/* Angebotsleiste: Fuss des Panels */
.konfig__summe {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kopf total" "posten total" "hinweis total";
  column-gap: 2rem;
  row-gap: 0.45rem;
  align-items: center;
  padding: 1.1rem clamp(1.4rem, 3vw, 2.4rem) 1.2rem;
  border-top: 1px solid var(--line);
  background: #f6f9fc;
}
.konfig__summe::after {
  content: "";
  position: absolute;
  top: -110px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 163, 186, 0.2), transparent 65%);
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.9s ease;
}
.konfig__summe.ist-gefuellt::after { opacity: 1; }
.konfig__summe > * { position: relative; z-index: 1; }
.konfig__summe-kopf { grid-area: kopf; display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.konfig__summe-label { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.konfig__summe-anzahl {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}
.konfig__posten { grid-area: posten; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.konfig__posten li {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f7f9fc;
  font-size: 0.8rem;
  line-height: 1.3;
}
.konfig__posten li span { font-weight: 600; color: var(--ink); }
.konfig__posten li small { font-size: 0.74rem; font-weight: 400; color: var(--ink-2); }
.konfig__posten li small::before { content: " · "; }
.konfig__posten li b { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; color: var(--teal-ink); white-space: nowrap; }
.konfig__leer { border: 0 !important; padding: 0 !important; background: none !important; font-size: 0.86rem; color: var(--ink-2); }
.konfig__total { grid-area: total; display: flex; gap: 2rem; align-self: center; padding-left: 2rem; border-left: 1px solid var(--line); }
.konfig__total-zeile { text-align: right; }
.konfig__total-zeile span { display: block; margin-bottom: 0.15rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.konfig__total-zeile b { display: inline-block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.konfig__summe.ist-gefuellt .konfig__total-zeile b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.konfig__summe.ist-puls .konfig__total-zeile b { animation: konfig-puls 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes konfig-puls { 0% { scale: 1; } 35% { scale: 1.05; } 100% { scale: 1; } }
.konfig__summe-hinweis { grid-area: hinweis; margin: 0; font-size: 0.72rem; line-height: 1.5; color: #7a869c; }

/* Danke und Link zu den Einzelleistungen */
.konfig__danke { grid-column: 1 / -1; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.konfig__dankesymbol { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--grad); color: #fff; }
.konfig__dankesymbol svg { width: 28px; height: 28px; }
.konfig__danke h3 { margin: 0 0 0.5rem; }
.konfig__danke p { margin: 0; color: var(--ink-2); }
.konfig__mehr { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; text-align: center; }
.konfig__mehr .btn svg { width: 18px; height: 18px; margin-left: 0.35rem; }

@media (max-width: 960px) {
  .konfig__karten--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .konfig-sektion__schein { display: none; }
}
@media (max-width: 720px) {
  .konfig__summe {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "posten" "total" "hinweis";
    row-gap: 0.7rem;
    padding: 1.1rem 1.1rem 1rem;
  }
  .konfig__total { justify-content: space-between; padding: 0.7rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .konfig__total-zeile:first-child { text-align: left; }
  .konfig__total-zeile b { font-size: 1.4rem; }
}
@media (max-width: 620px) {
  .konfig { border-radius: 20px; }
  .konfig__form { padding: 1.2rem 1rem 1.3rem; }
  .konfig__karten--2,
  .konfig__karten--3 { grid-template-columns: minmax(0, 1fr); }
  /* Einfache Kacheln liegend: Symbol links, Text rechts. Pakete bleiben stehend. */
  .konfig__karte:not(.konfig__karte--paket) {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "sym titel" "sym unter" "sym preis";
    column-gap: 0.9rem;
    row-gap: 0.2rem;
    padding: 0.9rem 2.6rem 0.9rem 0.9rem;
  }
  .konfig__karte:not(.konfig__karte--paket) .konfig__kopfzeile { grid-area: sym; align-self: start; margin: 0; padding: 0; }
  .konfig__karte:not(.konfig__karte--paket) .konfig__titel { grid-area: titel; padding-right: 0; }
  .konfig__karte:not(.konfig__karte--paket) .konfig__unter { grid-area: unter; }
  .konfig__karte:not(.konfig__karte--paket) .konfig__preis { grid-area: preis; padding-top: 0.3rem; }
  .konfig__karte:not(.konfig__karte--paket) .konfig__label { display: none; }
  .konfig__gitter { grid-template-columns: minmax(0, 1fr); }
  .konfig__leiste { flex-wrap: wrap; }
  .konfig__tipp { display: none; }
  .konfig__weiter,
  .konfig__senden { margin-left: auto; }
  .konfig__stand { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .konfig__summe { padding: 1.1rem 1rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .konfig__schritt.ist-neu .konfig__frage,
  .konfig__schritt.ist-neu .konfig__hinweis,
  .konfig__schritt.ist-neu .konfig__karte,
  .konfig__summe.ist-puls .konfig__total-zeile b { animation: none; }
  .konfig__karte,
  .konfig__symbol,
  .konfig__preis b,
  .konfig__haken,
  .konfig__stufe,
  .konfig__stufe i,
  .konfig__balken span,
  .konfig__pille span,
  .konfig__eingabe,
  .konfig__zurueck,
  .konfig__summe::after { transition: none; }
  .konfig__karte:hover { transform: none; }
}

/* ============================================================================
   Social-Feed (feed-social/, partials/bausteine.php: sektion_feed)
   Alle Karten sind gleich hoch: Bild im Quadrat, Textfeld mit fester
   Zeilenzahl (laengere Beitraege enden mit Auslassungspunkten), Knopf immer
   buendig unten. Sichtbar sind zunaechst zwoelf Karten, den Rest holt der
   Knopf "Mehr laden" nach (assets/js/main.js).
   ========================================================================== */
.feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  /* stretch: alle Karten einer Reihe sind gleich hoch, auch wenn eine davon
     keinen "Mehr lesen"-Knopf braucht. */
  align-items: stretch;
}
.feed__karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 12px 30px -26px rgba(12, 22, 38, 0.5);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.8s ease;
}
.feed__karte[hidden] { display: none; }
@media (hover: hover) {
  .feed__karte:hover { transform: translateY(-2px); border-color: rgba(47, 163, 186, 0.4); box-shadow: var(--shadow); }
}
.feed__bild { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #eef3fb; }
.feed__text {
  --zeilen: 6;
  padding: 1.05rem 1.15rem 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
  /* Feste Hoehe im geschlossenen Zustand, damit alle Karten gleich gross sind */
  min-height: calc(var(--zeilen) * 0.92rem * 1.6);
}
.feed__text p { margin: 0; }
.feed__text p + p { margin-top: 0.6rem; }
/* Geschlossen: nur der erste Absatz, auf feste Zeilenzahl gekuerzt */
.feed__text > p:first-child {
  display: -webkit-box;
  -webkit-line-clamp: var(--zeilen);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed__mehr { display: none; }
.feed__karte.ist-offen .feed__text { min-height: 0; }
.feed__karte.ist-offen .feed__text > p:first-child { display: block; overflow: visible; }
.feed__karte.ist-offen .feed__mehr { display: block; }
/* Knopf sitzt immer buendig unten */
.feed__knopf {
  align-self: flex-start;
  margin: 0.9rem 1.15rem 1.15rem;
  margin-top: auto;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f7f9fc;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-ink);
  cursor: pointer;
  transition: background-color 0.6s ease, border-color 0.6s ease;
}
@media (hover: hover) { .feed__knopf:hover { background: #e6f6f9; border-color: rgba(47, 163, 186, 0.45); } }
.feed__knopf:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
/* Karten ohne Knopf brauchen unten denselben Abstand */
.feed__karte:not(:has(.feed__knopf)) .feed__text { padding-bottom: 1.15rem; }
.feed__nachladen { margin-top: clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
.feed__rest { display: block; margin-top: 0.6rem; font-size: 0.82rem; color: #7a869c; }
@media (prefers-reduced-motion: reduce) {
  .feed__karte, .feed__knopf { transition: none; }
  .feed__karte:hover { transform: none; }
}

/* ============================================================
   Seitenuebersicht (/seitenuebersicht/)
   Reines Verzeichnis: mehrspaltig, ruhig, ohne Kartenoptik.
   ============================================================ */
.uebersicht { columns: 3 18rem; column-gap: clamp(1.6rem, 3vw, 3rem); }
.uebersicht__block { break-inside: avoid; margin: 0 0 clamp(1.8rem, 3vw, 2.6rem); }
.uebersicht__block h2 {
  font-size: 1.05rem; letter-spacing: 0.02em; margin: 0 0 0.7rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
}
.uebersicht__zahl {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem; color: var(--ink-3, var(--ink-2)); font-variant-numeric: tabular-nums;
}
.uebersicht__liste { list-style: none; margin: 0; padding: 0; }
.uebersicht__liste li { margin: 0 0 0.35rem; }
.uebersicht__liste a {
  color: var(--ink-2); text-decoration: none; font-size: 0.94rem; line-height: 1.45;
  display: inline-block; transition: color 0.8s ease;
}
.uebersicht__liste a:hover { color: var(--brand, var(--teal-ink)); }
@media (max-width: 640px) { .uebersicht { columns: 1; } }

/* ============================================================
   Mobil-Feedback vom 11.09.2026 (Marvin, iPhone)
   ============================================================ */

/* 1. Cookie-Dialog: die Knoepfe waren auf dem Handy riesig. Grund: im
   gestapelten Layout (flex-direction: column) wird das flex-basis 12rem
   der Knoepfe zur HOEHE. Hier deshalb auf natuerliche Hoehe zuruecksetzen. */
@media (max-width: 560px) {
  .cookie__knopf { flex: 0 0 auto; padding-block: 0.85rem; }
  .cookie__karte { padding: 1.3rem 1.2rem 1.1rem; }
  .cookie__titel { font-size: 1.15rem; }
  .cookie__text { font-size: 0.9rem; line-height: 1.5; }
  .cookie__fuss { font-size: 0.78rem; }
}

/* 2. Lara auf dem Handy: das Chatfenster fuellt den Bildschirm, die
   schwebenden Knoepfe (Chat, nach oben, Schnellkontakt) verschwinden
   solange. Geschlossen wird ueber das X im Chat selbst oder Escape. */
@media (max-width: 620px) {
  /* Das Fenster darf oben nicht unter die fixierte Kopfleiste rutschen
     (sie liegt mit z-index 100 darueber): Hoehe so begrenzen, dass oben
     mindestens 96 px frei bleiben. */
  .chatfenster { height: min(560px, calc(100dvh - 178px - 96px)); }
  html.chat-offen .totop { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* 3. Tabellen: Spalten, die auf dem Handy nichts Wesentliches beitragen,
   werden dort ausgeblendet (Baustein-Option 'mobil_weg'). */
@media (max-width: 700px) {
  .tabelle .tabelle__nebensache { display: none; }
}

/* 4. Textausrichtung auf dem Handy, eine Regel fuer die ganze Seite:
   Abschnittskoepfe, Hero und Aufrufe mittig, alles in Karten, Listen und
   Fliesstext linksbuendig. Vorher war das je nach Baustein verschieden. */
@media (max-width: 700px) {
  .section__head,
  .cta__inner,
  .aufruf,
  .page-hero__inner,
  .hero__copy,
  .termin__platz,
  .tabelle__hinweis { text-align: center; }
  .section__head > :is(h2, h3, h4, p, .kicker, .section__intro) { margin-inline: auto; }
  .section__head--breit > h2,
  .section__head--breit > .kicker { max-width: none; }

  .lkarte, .lkarte--symbol,
  .lkarte--symbol :is(h3, h4, p),
  .case__copy, .case__copy :is(p, li, h3, h4),
  .prosa, .prosa :is(p, li),
  .preis, .preis :is(p, li),
  .feld, .karte, .karte :is(p, li, h3, h4),
  .schritt, .schritt :is(p, li),
  .faq, .faq :is(p, li),
  .kform, .kform :is(p, label) { text-align: left; }
  .lkarte--symbol .lkarte__symbol,
  .lkarte--symbol .symbol { margin-inline: 0; }
}

/* 5. Mobilmenue als Klappliste: Hauptpunkte mit Unterpunkten sind Knoepfe,
   die Unterpunkte erscheinen erst auf Tipp. Vorher stand alles flach
   untereinander und der Hauptpunkt lud von Unterseiten die Startseite. */
.nav__mobile-gruppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.65rem 0.25rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  font: inherit;
  font-weight: 550;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.nav__mobile-gruppe svg { width: 18px; height: 18px; flex: 0 0 18px; transition: transform 0.3s ease; }
.nav__mobile-gruppe[aria-expanded="true"] { color: var(--ink); }
.nav__mobile-gruppe[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__mobile-liste { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.4rem; }
.nav__mobile-liste[hidden] { display: none; }
.nav--dark .nav__mobile-gruppe { color: #b9c4d8; border-color: rgba(255, 255, 255, 0.08); }
.nav--dark .nav__mobile-gruppe[aria-expanded="true"] { color: #fff; }
@media (prefers-reduced-motion: reduce) { .nav__mobile-gruppe svg { transition: none; } }

/* 6. Startseite: die eigenen Abschnittskoepfe (kein .section__head)
   folgen auf dem Handy derselben Regel: Kicker, Ueberschrift und Einleitung
   mittig, Listen und Kacheln darunter bleiben linksbuendig. */
@media (max-width: 700px) {
  .demat__kopf,
  .sysgrid__copy > :is(.kicker, h2, .section__intro),
  .dsgpt__copy > :is(.kicker, h2, p),
  .jubiOben__text > :is(.kicker, h2, p),
  .ctaLage__text > :is(.kicker, h2, .ctaLage__lead) { text-align: center; }
  .kontaktzeile h2 { text-align: center; }
}

/* 7. Verwandte Seiten: "Weiterlesen" steht in jeder Karte ganz unten,
   egal wie lang der Text darueber ist (Karte als Spalte, Link nach unten
   geschoben). Vorher hing der Link direkt am Text und wanderte je Karte. */
a.case-sm { display: flex; flex-direction: column; }
a.case-sm::after { margin-top: auto; padding-top: 0.9rem; }

/* Zusammengesetzte Woerter in Ueberschriften bleiben in einer Zeile (grad()) */
.nobr { white-space: nowrap; }

/* Feed-Karten: die Eintritts-Regel (html.js [data-reveal]) ist spezifischer
   als .feed__karte und nahm dem Hover seine Uebergaenge, der Lift kam
   deshalb ohne Weichzeichnung. Beides in einer Regel. */
html.js .feed__karte[data-reveal] {
  transition:
    opacity 0.7s ease var(--d, 0s),
    translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.8s ease,
    border-color 0.8s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.js .feed__karte[data-reveal] { transition: none; }
}

/* Aufruf in der hellen Variante: die Zeile unter den Knoepfen war weiss
   auf weiss (ki-anwendung, 15.09.2026). */
.aufruf--schlicht .aufruf__punkte { color: var(--ink-2); }
.aufruf--schlicht .aufruf__punkte svg { color: var(--teal-ink); }

/* Produktkarten (sektion_produktkarten): sanfter Hover auch fuer Karten
   ohne Link (article), bisher gab es ihn nur fuer a.ukarte. Langsam und
   klein, wie ueberall: 0,8 s, 3 px, Bild 1,015. */
@media (hover: hover) {
  .ukarte:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 163, 186, 0.4);
    box-shadow: 0 8px 18px rgba(12, 22, 38, 0.06), 0 26px 48px -26px rgba(34, 58, 124, 0.3);
  }
  .ukarte:hover .ukarte__bild img { transform: scale(1.015); }
}
.ukarte__bild img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
html.js .ukarte[data-fold], html.js .ukarte[data-fold].is-fertig {
  transition:
    translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.8s ease,
    border-color 0.8s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ukarte:hover { transform: none; }
  .ukarte__bild img, html.js .ukarte[data-fold], html.js .ukarte[data-fold].is-fertig { transition: none; }
}

/* Kacheln: lange Woerter ("Kommunikationskonzept") an der Silbe trennen,
   nicht irgendwo im Wort (Corporate-Identity-Seite, 15.09.2026). */
.kachel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; word-break: normal; }

/* ============================================================
   Eingebettete Videos (sektion_einbettungen): Platzhalter bis zur
   Einwilligung, danach das iframe im 16:9-Rahmen.
   ============================================================ */
.einbett {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.einbett.sp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.einbett.sp-1 { grid-template-columns: minmax(0, 1fr); max-width: 52rem; margin-inline: auto; }
@media (max-width: 900px) { .einbett, .einbett.sp-3 { grid-template-columns: minmax(0, 1fr); } }
.einbett__karte {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.einbett__platz {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.45rem;
  aspect-ratio: 16 / 9;
  padding: clamp(1.2rem, 3vw, 2rem);
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(47, 163, 186, 0.14), transparent 70%),
    linear-gradient(180deg, #f5f7fb, #eef3fb);
}
.einbett__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 0.3rem;
  border-radius: 16px; color: #fff; background: var(--grad);
}
.einbett__icon svg { width: 24px; height: 24px; }
.einbett__titel { font-weight: 650; letter-spacing: -0.01em; }
.einbett__text { max-width: 36ch; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); }
.einbett__platz .btn { margin-top: 0.5rem; }
.einbett__rahmen { position: relative; aspect-ratio: 16 / 9; background: #0d1526; overflow: hidden; }
.einbett { align-items: stretch; }
.einbett__rahmen iframe { position: absolute; top: 0; left: 50%; height: 100%; width: calc(var(--faktor, 1) * 100%); transform: translateX(-50%); border: 0; }
.einbett__caption { padding: 0.8rem 1.1rem; font-size: 0.9rem; color: var(--ink-2); border-top: 1px solid var(--line); }
.einbett__hinweis { margin: 1.2rem auto 0; max-width: 52rem; text-align: center; font-size: 0.88rem; color: var(--muted); }
.section--dark .einbett__karte { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
.section--dark .einbett__caption { color: #b9c4d8; border-color: rgba(255,255,255,0.1); }

/* Kennzahlen: Schlusssatz unter der Reihe (sektion_zahlen 'schluss') */
.stats__schluss { max-width: 52rem; margin: 1.6rem auto 0; text-align: center; color: var(--ink-2); }
.stats__schluss--light { color: var(--dark-text); }

/* Videoseite (xmas-2024): ein Video mittig, im 16:9-Format statt des
   Produktvideo-Formats. */
.videobox--mittig { max-width: 960px; margin: 0 auto; }
.videobox--breit video { aspect-ratio: 16 / 9; }

/* Laufband der Kundenstimmen: die Kopie fuer den nahtlosen Durchlauf legt erst
   das Skript an (SEO, sonst stuenden alle Texte doppelt im Quelltext). Solange
   sie fehlt, laeuft nichts, sonst spraenge das Band nach dem ersten Satz. */
html.js .stimmen__band:not(.ist-geklont) { animation: none; }

/* ---------- Bremse (main.js): Animationen ausserhalb des Fensters ---------- */
/* Abschnitte weit ausserhalb des Fensters bekommen .ist-fern, ihre
   Animationen stehen so lange still. Spart je Bild Stil- und Layoutarbeit. */
.ist-fern, .ist-fern *, .ist-fern *::before, .ist-fern *::after { animation-play-state: paused; }

/* ---------- Landingpages: eigene Kopf- und Fusszeile ----------
   Reine Landingpages (Kampagnenziel) tragen dieselbe Kopfleiste wie die
   uebrigen Seiten, nur mit Sprungmarken statt Hauptnavigation. Deshalb
   braucht .nav--lp kaum eigenes CSS. Muster: partials/lp_kopf.php und
   partials/lp_fuss.php. */
.nav--lp .nav__links { gap: clamp(1rem, 2.4vw, 2rem); }

.lpfuss {
  background: #071020;
  color: #9fb2cf;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(127, 208, 224, 0.14);
}
.lpfuss__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
}
.lpfuss__marke { margin: 0; font-size: 0.88rem; }
.lpfuss__links { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; margin-left: auto; }
.lpfuss__links a {
  color: #c6d6ef;
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.8s ease;
}
.lpfuss__links a:hover { color: #fff; }

@media (max-width: 860px) {
  .lpkopf__nav { display: none; }
  .lpkopf__marke span { display: none; }
  /* Ohne sichtbare Punkte rueckt der Knopf wieder nach rechts */
  .lpkopf__nav + .lpkopf__knopf { margin-left: auto; }
  .lpfuss__links { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lpkopf__nav a, .lpfuss__links a { transition: none; }
}

/* Kleine Vorzeile in einem Split-Abschnitt (z. B. "Illustrative Darstellung") */
.case__label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blau, #2f5fd8);
  margin-bottom: 0.2rem;
}

/* ===========================================================================
   KI E-Mail-Assistent (25.09.2026)
   =========================================================================== */

/* Live-Demo: Schrittliste links (Stil wie .sysflow der Startseite), rechts
   ein Mailfenster, das pro Schritt umblendet. Ohne Skript stehen alle
   Schritte untereinander, der Text ist immer im HTML. */
.mdemo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.mdemo__fenster {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), 0 0 60px -30px rgba(63, 214, 232, 0.35);
  overflow: hidden;
}
.mdemo__leiste {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8b98af;
}
.mdemo__punkte { display: flex; gap: 0.35rem; }
.mdemo__punkte i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.mdemo__titel { flex: 1; }
.mdemo__status { display: inline-flex; align-items: center; gap: 0.45rem; color: #b9c4d8; }
.mdemo__pane { padding: clamp(1.2rem, 3vw, 1.8rem); color: var(--dark-text); }
.mdemo__schritt {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7fd0e0;
  margin-bottom: 1rem;
}
.mdemo__mail {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
}
.mdemo__mail--antwort { border-color: rgba(63, 214, 232, 0.45); background: rgba(63, 214, 232, 0.07); }
.mdemo__kopf { font-size: 0.9rem; color: #8b98af; margin-bottom: 0.25rem; }
.mdemo__kopf b { color: #b9c4d8; font-weight: 600; }
.mdemo__text { color: #fff; font-size: 1.02rem; line-height: 1.55; margin-top: 0.6rem; }
.mdemo__mail--antwort .mdemo__text { margin-top: 0; }
.mdemo__notiz { margin-top: 0.9rem; font-size: 0.9rem; color: #8b98af; }
.mdemo__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mdemo__chips li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(63, 214, 232, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(63, 214, 232, 0.07);
  color: #fff;
  font-weight: 600;
}
.mdemo__chips span,
.mdemo__daten dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b98af;
}
.mdemo__daten { display: grid; gap: 0.5rem; }
.mdemo__daten div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mdemo__daten dd { color: #fff; font-weight: 600; text-align: right; }
.mdemo__erledigt { list-style: none; display: grid; gap: 0.8rem; }
.mdemo__erledigt li { display: flex; align-items: center; gap: 0.7rem; color: #fff; }
.mdemo__erledigt .dot { flex: none; }

/* Mit Skript: nur der aktive Schritt ist sichtbar, alle Panes liegen
   uebereinander. Die Hoehe richtet sich nach dem groessten Pane (grid),
   dadurch springt beim Umblenden nichts. */
html.js .mdemo__fenster { display: grid; grid-template-rows: auto 1fr; }
html.js .mdemo__pane {
  grid-area: 2 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.6s;
}
html.js .mdemo__pane.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
html:not(.js) .mdemo__pane + .mdemo__pane { border-top: 1px solid rgba(255, 255, 255, 0.08); }

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

/* Vergleichstabelle: Zeilenkoepfe als normale, kraeftige Schrift statt
   Kopfzeilen-Stil, die ADence-Spalte leicht betont. */
.tabelle tbody th[scope="row"] {
  font-family: var(--font-sans);
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
  background: transparent;
}
.tabelle tr:last-child th[scope="row"] { border-bottom: 0; }
.tabelle--vergleich { min-width: 720px; }
.tabelle--vergleich thead th { text-transform: none; letter-spacing: 0.02em; }
.tabelle--vergleich td:last-child { color: var(--ink); font-weight: 600; background: rgba(47, 163, 186, 0.06); }
.tabelle--vergleich thead th:last-child { color: #fff; background: var(--grad); }

/* Ansprechpartner-Box mit sichtbarem Stand */
.ansprech__box {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ansprech__bild {
  flex: none;
  width: 120px;
  height: 120px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
}
.ansprech__name { display: flex; flex-direction: column; margin: 0.3rem 0 0.5rem; }
.ansprech__name b { font-size: 1.15rem; color: var(--ink); }
.ansprech__name span { color: var(--ink-2); font-size: 0.92rem; }
.ansprech__text > p:not(.kicker):not(.ansprech__name) { color: var(--ink-2); }
.ansprech__stand {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--teal-ink) !important;
}
@media (max-width: 560px) {
  .ansprech__box { flex-direction: column; align-items: flex-start; }
  .ansprech__bild { width: 96px; height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .mdemo__pane, html.js .mdemo__pane.is-on { transition: none; transform: none; }
}

/* ---------- KI E-Mail-Assistent: optische Ueberarbeitung (25.09.2026) ---------- */

/* Fortschrittsbalken im Kopf des Demo-Fensters */
.mdemo__leiste { position: relative; }
.mdemo__fortschritt {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.mdemo__fortschritt i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3fc0d8, #5b83e0);
  transform-origin: left center;
  transform: scaleX(var(--mschritt, 0.2));
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(63, 214, 232, 0.6);
}

/* S2: Postfach-Illustration neben dem Text */
.eproblem__grid,
.edef__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.eproblem__copy .section__intro { margin-top: 1.2rem; }
.postfach {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}
.postfach::after {
  /* Stapel dahinter: das Postfach laeuft ueber */
  content: "";
  position: absolute;
  inset: 14px -12px -12px 14px;
  z-index: -1;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.postfach__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.4rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.6rem;
}
.postfach__titel { font-weight: 700; color: #fff; }
.postfach__marke {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffb4a8;
  border: 1px solid rgba(255, 140, 120, 0.4);
  background: rgba(255, 110, 90, 0.1);
  border-radius: 99px;
  padding: 0.2rem 0.6rem;
}
.postfach__liste { list-style: none; display: grid; gap: 0.45rem; }
.postfach__liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.postfach__av {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 0.7rem; font-weight: 700;
  color: #cfe9f1;
  background: rgba(63, 192, 216, 0.18);
}
.postfach__av--b { background: rgba(91, 131, 224, 0.22); color: #d7e0f7; }
.postfach__betreff {
  color: #e6ecf6;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.postfach__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  border-radius: 99px;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
}
.postfach__tag--a { color: #8ee4f2; background: rgba(63, 214, 232, 0.12); }
.postfach__tag--b { color: #b7c7f5; background: rgba(91, 131, 224, 0.16); }
.postfach__tag--c { color: #a7ecc9; background: rgba(46, 201, 139, 0.14); }
.postfach__fuss {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.8rem; padding: 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8b98af;
}
.postfach__uhr {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid #8b98af;
  position: relative;
}
.postfach__uhr::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 1.5px; height: 4px; background: #8b98af;
}
/* Mails laufen nacheinander ein, sobald der Block sichtbar wird */
html.js .postfach .postfach__liste li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(0.25s + var(--i, 0) * 0.12s);
}
html.js .postfach.in .postfach__liste li { opacity: 1; transform: none; }

/* S3: Definition mit Vergleichsbild */
.edef__copy .prosa { margin-top: 1.2rem; max-width: none; }
.edef__visual { display: grid; gap: 0.9rem; }
.edef__frage {
  /* Alle drei Karten buendig auf einer Kante, sonst wirkt eine verschoben */
  justify-self: stretch;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-weight: 600;
}
.edef__marke {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.edef__karte {
  justify-self: stretch;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.edef__karte p { color: var(--ink-2); line-height: 1.5; }
.edef__karte--alt { opacity: 0.72; background: #f0f3f8; box-shadow: none; }
.edef__karte--alt p { text-decoration: line-through; text-decoration-color: rgba(70, 83, 107, 0.35); }
.edef__karte--ki {
  border-color: rgba(47, 163, 186, 0.45);
  box-shadow: var(--shadow-lg);
}
.edef__karte--ki .edef__marke { color: var(--teal-ink); }
.edef__karte--ki p { color: var(--ink); font-weight: 600; }
.edef__urteil {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-2);
}
.edef__karte--ki .edef__urteil { color: var(--teal-ink); }

/* S7: Integrationen als Knoten */
.ehub__netz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.ehub__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 0.7rem;
}
.ehub__chips { list-style: none; display: grid; gap: 0.55rem; }
.ehub__chips--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ehub__breit { grid-column: 1 / -1; }
.ehub__chips li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.94rem;
}
.ehub__chips li svg { flex: none; width: 20px; height: 20px; color: var(--teal-ink); }
@media (hover: hover) {
  .ehub__chips li { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s ease, box-shadow 0.8s ease; }
  .ehub__chips li:hover { transform: translateY(-2px); border-color: rgba(47, 163, 186, 0.4); box-shadow: var(--shadow-lg); }
}
.ehub__kern { display: flex; align-items: center; }
.ehub__kreis {
  width: 150px; height: 150px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  text-align: center;
  color: #fff;
  background: radial-gradient(circle at 30% 25%, #3a63c4, #1c3470 70%);
  box-shadow: 0 0 0 10px rgba(47, 163, 186, 0.1), 0 0 0 22px rgba(47, 163, 186, 0.05), var(--shadow-lg);
}
.ehub__kreis svg { width: 30px; height: 30px; color: #8ee4f2; }
.ehub__kreis b { font-size: 0.86rem; line-height: 1.2; }
.ehub__leitung {
  position: relative;
  width: clamp(28px, 4vw, 56px);
  height: 2px;
  background: linear-gradient(90deg, rgba(47, 163, 186, 0.15), rgba(47, 163, 186, 0.6));
  overflow: hidden;
}
.ehub__leitung--r { background: linear-gradient(90deg, rgba(47, 163, 186, 0.6), rgba(47, 163, 186, 0.15)); }
.ehub__leitung i {
  position: absolute; top: -2px; left: 0;
  width: 10px; height: 6px; border-radius: 3px;
  background: #3fd6e8;
  box-shadow: 0 0 8px rgba(63, 214, 232, 0.9);
  animation: ehubPuls 2.4s linear infinite;
}
.ehub__leitung--r i { animation-delay: 1.2s; }
@keyframes ehubPuls {
  from { transform: translateX(-12px); }
  to   { transform: translateX(60px); }
}

/* S12: Preisbox */
.epreis__box {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: calc(var(--radius) + 6px);
  color: var(--dark-text);
  background:
    radial-gradient(32rem 20rem at 100% 0%, rgba(63, 214, 232, 0.18), transparent 60%),
    radial-gradient(28rem 20rem at 0% 100%, rgba(70, 110, 210, 0.25), transparent 60%),
    #142440;
  box-shadow: var(--shadow-lg);
}
.epreis__box h2 { color: #fff; margin-top: 0.5rem; }
.grad--hell { background: linear-gradient(115deg, #7fa2f0 10%, #5fd0e3 90%); -webkit-background-clip: text; background-clip: text; }
.epreis__copy > p:not(.kicker):not(.section__knopf) { margin-top: 1rem; color: var(--dark-text); line-height: 1.6; }
.epreis__klein { font-size: 0.92rem; color: #8b98af !important; }
.epreis__klein a { color: #8ee4f2; }
.epreis__vorsatz { color: #fff; font-weight: 600; margin-bottom: 1rem; }
.epreis__faktoren ol { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.epreis__faktoren li {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  font-weight: 600;
  line-height: 1.35;
}
.epreis__faktoren li b {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #7fd0e0;
}
.epreis__faktoren li svg { width: 26px; height: 26px; color: #8ee4f2; }
.epreis .section__knopf { margin-top: 1.5rem; justify-content: flex-start; }

/* Mobil: alles untereinander, Knoten senkrecht */
@media (max-width: 900px) {
  .eproblem__grid, .edef__grid, .epreis__box { grid-template-columns: 1fr; }
  .ehub__netz { grid-template-columns: 1fr; justify-items: stretch; }
  .ehub__kern { flex-direction: column; justify-self: center; }
  .ehub__leitung { width: 2px; height: 32px; background: linear-gradient(180deg, rgba(47, 163, 186, 0.15), rgba(47, 163, 186, 0.6)); }
  .ehub__leitung--r { background: linear-gradient(180deg, rgba(47, 163, 186, 0.6), rgba(47, 163, 186, 0.15)); }
  .ehub__leitung i { display: none; }
  .ehub__kreis { width: 124px; height: 124px; }
}
@media (max-width: 480px) {
  .ehub__chips--zwei { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .epreis__faktoren ol { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mdemo__fortschritt i, .ehub__chips li { transition: none; }
  .ehub__leitung i { animation: none; display: none; }
  html.js .postfach .postfach__liste li { opacity: 1; transform: none; transition: none; }
}

/* Mobil nach Marvins Regel: Abschnittskoepfe mittig, Fliesstext, Listen
   und Karten links. Gilt fuer die eigenen Abschnitte der E-Mail-Seite. */
@media (max-width: 700px) {
  .eproblem__copy > .kicker, .eproblem__copy > h2,
  .edef__copy > .kicker, .edef__copy > h2,
  .mdemo__copy > .kicker, .mdemo__copy > h2, .mdemo__copy > .section__intro,
  .epreis__copy > .kicker, .epreis__copy > h2 { text-align: center; }
  .mdemo__copy > .sysflow__hint { text-align: center; }
  /* Im schmalen Postfach zaehlt der Betreff, die Themen-Pille faellt weg */
  .postfach__tag { display: none; }
  .postfach__liste li { grid-template-columns: auto minmax(0, 1fr); }
  .epreis .section__knopf { justify-content: center; }
}

/* Demo: Fenster so hoch wie die linke Spalte, Titel passt in zwei Zeilen */
@media (min-width: 901px) {
  .mdemo__grid { align-items: stretch; }
  .mdemo__copy h2 { font-size: clamp(1.7rem, 2.4vw, 2.25rem); }
  html.js .mdemo__fenster { height: 100%; }
  html.js .mdemo__pane { align-self: center; }
  .mdemo__text { font-size: 1.1rem; }
}

/* Preisbox: die vier Faktoren als ruhige Kacheln mit Symbolfeld und
   grosser, blasser Ziffer im Hintergrund */
.epreis__box { align-items: center; }
.epreis__faktoren ol { gap: 0.8rem; }
.epreis__faktoren li {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-height: 96px;
  padding: 1.05rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.98rem;
}
.epreis__faktoren li b {
  position: absolute;
  right: 0.7rem;
  top: 0.35rem;
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(127, 208, 224, 0.13);
  pointer-events: none;
}
.epreis__faktoren li svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #2f4d9e, #1e7b90);
  box-shadow: 0 8px 20px -8px rgba(63, 214, 232, 0.5);
}
.epreis__faktoren li span { position: relative; }
@media (hover: hover) {
  .epreis__faktoren li { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s ease, background-color 0.8s ease; }
  .epreis__faktoren li:hover { transform: translateY(-2px); border-color: rgba(63, 214, 232, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .epreis__faktoren li { transition: none; }
}
/* Ziffer nicht unter den Text laufen lassen, rechte Spalte etwas breiter */
@media (min-width: 901px) { .epreis__box { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.epreis__faktoren li { padding-right: 2.9rem; }
.epreis__faktoren li b { top: auto; bottom: 0.4rem; right: 0.75rem; font-size: 2rem; }
/* Ziffer als kleine Vorzeile ueber dem Text statt im Hintergrund */
.epreis__faktoren li { grid-template-rows: auto auto; row-gap: 0.2rem; padding-right: 1.1rem; }
.epreis__faktoren li svg { grid-row: 1 / 3; grid-column: 1; }
.epreis__faktoren li b {
  position: static;
  grid-column: 2; grid-row: 1;
  font-size: 0.7rem; letter-spacing: 0.1em;
  color: #7fd0e0;
  align-self: end;
}
.epreis__faktoren li span { grid-column: 2; grid-row: 2; align-self: start; }

@media (max-width: 560px) { .epreis__faktoren li { min-height: 0; } }

/* ===========================================================================
   Navigation nach dem Umbau (25.09.2026): vier kompakte Megamenues statt
   einem grossen Leistungskatalog. Wenige Einstiege mit Kurzinfo, rechts
   eine Teaser-Kachel. Gleiche Optik wie das bisherige Megamenue.
   =========================================================================== */
.mega--kompakt.mega--eins { width: min(720px, calc(100vw - 2rem)); }
.mega--kompakt.mega--zwei { width: min(920px, calc(100vw - 2rem)); }
.mega--kompakt .mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 14.5rem); }
.mega--kompakt .mega__spalten {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
}
.mega--kompakt .mega__titel { min-height: 0; }
.mega__liste { display: grid; gap: 0.2rem; }
.mega__spalte--zwei .mega__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.mega--kompakt .mega__spalte a.mega__eintrag {
  display: grid;
  gap: 0.12rem;
  white-space: normal;
  padding: 0.55rem 0.7rem;
  margin-left: -0.7rem;
  border-radius: 10px;
  transition: background-color 0.5s ease, box-shadow 0.5s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mega__name { font-size: 0.95rem; font-weight: 620; color: #fff; line-height: 1.3; }
.mega__info { font-size: 0.8rem; color: #8b98af; line-height: 1.4; }
.mega--kompakt .mega__spalte a.mega__eintrag:hover .mega__info,
.mega--kompakt .mega__spalte a.mega__eintrag:focus-visible .mega__info { color: #b9c4d8; }
.mega--kompakt .mega__spalte a.mega__eintrag[aria-current="page"] {
  box-shadow: inset 2px 0 0 rgba(127, 208, 224, 0.75);
  background: rgba(127, 208, 224, 0.08);
}
.mega--kompakt .mega__alle { justify-content: flex-end; min-height: 100%; }
.mega--kompakt .mega__alle-titel { font-size: 1.05rem; }

/* Aktiver Hauptpunkt: feine Linie unter dem Wort */
.nav__links .nav__gruppe.ist-aktiv > .nav__gruppenlink,
.nav__links > a.ist-aktiv { color: var(--ink); position: relative; }
.nav--dark .nav__links .nav__gruppe.ist-aktiv > .nav__gruppenlink,
.nav--dark .nav__links > a.ist-aktiv { color: #fff; }
.nav__links .nav__gruppe.ist-aktiv > .nav__gruppenlink::after,
.nav__links > a.ist-aktiv::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

/* Lange Bezeichnungen: zwischen Tablet und Laptop enger setzen */
@media (min-width: 941px) {
  .nav__brand { flex: none; }
}

/* Mobil: kleine Zwischentitel innerhalb eines Feldes */
.nav__mobile-zwischen {
  margin: 0.7rem 0 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7fd0e0;
}
/* Aktive Seite im Mobilmenue: dunkel auf hellem Menue, weiss auf dunklem */
.nav__mobile a[aria-current="page"] { color: var(--teal-ink); font-weight: 650; }
.nav--dark .nav__mobile a[aria-current="page"] { color: #fff; }

@media (max-width: 1180px) {
  .mega--kompakt .mega__inner { grid-template-columns: minmax(0, 1fr); }
  .mega--kompakt .mega__alle { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mega--kompakt .mega__spalte a.mega__eintrag { transition: none; }
}
/* Hauptpunkte immer einzeilig (nur die Punkte selbst, nicht die Menueinhalte) */
.nav__links > a, .nav__links > .nav__gruppe > .nav__gruppenlink { white-space: nowrap; }
/* Unter 1180 px passen die vier Felder nicht mehr neben Logo und Button:
   dort uebernimmt das Klappmenue, der Button bleibt bis 940 px sichtbar. */

.nav__mobile-zwischen { color: var(--teal-ink); }
.nav--dark .nav__mobile-zwischen { color: #7fd0e0; }
/* Footer mit fuenf Spalten (Marke, Kontakt, Kompetenzfelder, Wissen, Unternehmen) */
@media (min-width: 1181px) {
  .footer__grid { grid-template-columns: 1.1fr 1.2fr 1.25fr 0.75fr 0.9fr; gap: clamp(1.6rem, 3vw, 2.8rem); }
}
@media (min-width: 941px) and (max-width: 1180px) {
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
.nav__mobile-zwischen { padding-left: 0.25rem; }
/* Zwischen 941 und 1040 px passt die Leiste knapp nicht: dort Klappmenue */
@media (max-width: 1040px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .mega { display: none !important; }
}
/* Referenzen-Klappmenue: feste Breite, Text bricht um statt ueberzulaufen */
#untermenue-referenzen { width: 21rem; }
#untermenue-referenzen .nav__unter-info,
#untermenue-referenzen .nav__unter-name { white-space: normal; }