@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
  --farbe-schwarz: #0D0D0D;
  --farbe-schwarz-soft: #1A1A1A;
  --farbe-gelb: #EFE52C;
  --farbe-gelb-blass: color-mix(in srgb, var(--farbe-gelb) 55%, white);
  --farbe-gelb-blasser: color-mix(in srgb, var(--farbe-gelb) 28%, white);
  --farbe-indigo: #4F46E5;
  --farbe-lila: #9370DB;
  --farbe-weiss: #FFFFFF;
  --farbe-off-white: #FAFAF8;
  --farbe-grau: #48473F;
  --farbe-rahmen: #E7E7E3;

  --radius: 6px;
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  --raum-s: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --raum-m: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  --raum-l: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  /* Einheitlicher Innenabstand oben/unten je Inhaltsabschnitt (08.10.2026):
     zwei Abschnitte ergeben zusammen ca. 128 px Luft am Desktop. */
  --raum-abschnitt: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif;
  color: var(--farbe-schwarz);
  background: var(--farbe-weiss);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Browserflächen, die kein Baukasten mitbringt */

::selection {
  background: var(--farbe-schwarz);
  color: var(--farbe-gelb);
}

:focus-visible {
  outline: 2px solid var(--farbe-gelb);
  outline-offset: 3px;
  border-radius: 2px;
  /* Zusätzlicher Lila-Schein für besseren Kontrast/Lesbarkeit auf hellem
     Grund, wo Gelb allein wenig auffällt (auf dunklem Grund bleibt Gelb
     dominant, der Schein dort kaum sichtbar). */
  box-shadow: 0 0 0 5px rgba(147, 112, 219, 0.28);
}

html {
  scrollbar-color: var(--farbe-schwarz) var(--farbe-off-white);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--farbe-off-white);
}

::-webkit-scrollbar-thumb {
  background: var(--farbe-schwarz);
  border-radius: 999px;
  border: 2px solid var(--farbe-off-white);
}

h1, h2, h3 {
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  color: var(--farbe-grau);
  /* 60ch ≈ 75–80 Zeichen in Poppins (Designprüfung 09.10.2026, vorher 68ch ≈ 90) */
  max-width: 60ch;
}

a {
  color: inherit;
}

/* Kopfbereich */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-s);
  padding: 0.85rem var(--raum-m);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  /* Höhe bleibt beim Scrollen konstant (Designprüfung 09.10.2026: keine
     Layout-Animation); es erscheinen nur Linie und Schatten. */
  transition: box-shadow 400ms ease, border-color 400ms ease;
}

.kopf.ist-gescrollt {
  border-bottom-color: rgba(13, 13, 13, 0.06);
  box-shadow: 0 10px 30px -18px rgba(13, 13, 13, 0.28);
}

/* Wortmarke: das Original-Logo, aber mit echter Präsenz statt einer reglosen
   Miniatur — größer, mit spürbarem Gewicht im Schatten und derselben
   magnetischen Mikrobewegung wie die Buttons (main.js), damit es sich wie
   Teil des Systems anfühlt statt wie ein eingeklebtes Bildchen. */

.marke {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  will-change: transform;
}

.logo-bild {
  display: block;
  height: clamp(64px, 3.2vw + 46px, 96px);
  width: auto;
  filter: drop-shadow(0 4px 10px rgba(13, 13, 13, 0.12));
  transition: filter var(--transition);
}



.marke:hover .logo-bild {
  filter: drop-shadow(0 10px 20px rgba(13, 13, 13, 0.24));
}

/* Fortschrittsbalken oben (Scrollposition) */

.fortschritt {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--farbe-gelb);
  z-index: 200;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 80ms linear;
}

/* X-Akzent aus dem Logo, als wiederkehrendes Motiv bei Überschriften */

.x-marke {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.2em;
  /* an der Grundlinie ausgerichtet statt an der Zeilenoberkante: Oberkante
     knapp über Versalhöhe, ragt so nicht in die Zeile darüber (20.10.2026) */
  vertical-align: 0.26em;
  position: relative;
  animation: x-pulsieren 4s ease-in-out infinite;
}

.x-marke::before,
.x-marke::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 22%;
  background: var(--farbe-gelb);
  transform: translate(-50%, -50%) rotate(45deg);
}

.x-marke::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.seitenkopf .x-marke::before,
.seitenkopf .x-marke::after,
.hero .x-marke::before,
.hero .x-marke::after {
  background: var(--farbe-gelb);
}

@keyframes x-pulsieren {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(10deg) scale(1.12);
  }
}

/* Navigation (03.10.2026, modernisiert): schlanke Pill-Leiste, in der ein
   weißes Feld weich zum überfahrenen Punkt gleitet und sonst auf der
   aktiven Seite ruht (main.js). Kontakt als schwarzer Button am Ende.
   Mobil: dunkle Vollfläche mit großen Menüpunkten, die nacheinander aus
   der Unschärfe auftauchen. */

/* Glasoptik (08.10.2026): milchiges Glas mit eigener Unschärfe, Lichtkante
   oben, feiner dunkler Haarlinie außen und weichem, gestaffeltem Schatten,
   damit die Leiste über dem Kopfbereich schwebt statt als graue Fläche
   aufzuliegen. Der gleitende Indikator ist eine zweite, hellere Glasschicht. */
nav.hauptnav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.35rem;
  background:
    linear-gradient(180deg, rgba(244, 243, 238, 0.6) 0%, rgba(226, 225, 218, 0.7) 100%),
    rgba(228, 227, 221, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -6px 10px -6px rgba(13, 13, 13, 0.06),
    0 0 0 1px rgba(13, 13, 13, 0.07),
    0 1px 2px rgba(13, 13, 13, 0.05),
    0 12px 32px -14px rgba(13, 13, 13, 0.22);
}

/* Glanz: Spiegelung in der oberen Hälfte (gewölbtes Glas) und ein
   Lichtstreif, der in ruhigem Abstand über die Leiste wandert. */
nav.hauptnav::before,
nav.hauptnav::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

nav.hauptnav::before {
  inset: 2px 14px 52% 14px;
  border-radius: 999px 999px 60% 60% / 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.12) 100%);
}

nav.hauptnav::after {
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.85) 47%, rgba(255, 255, 255, 0.35) 53%, rgba(255, 255, 255, 0) 70%) no-repeat;
  background-size: 30% 100%;
  background-position: -60% 0;
  animation: nav-glanz 9s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite;
}

@keyframes nav-glanz {
  0% { background-position: -60% 0; }
  22%, 100% { background-position: 160% 0; }
}

@media (prefers-reduced-motion: reduce) {
  nav.hauptnav::after { animation: none; display: none; }
}

.nav-indikator {
  position: absolute;
  top: 0.3rem;
  left: 0;
  height: calc(100% - 0.6rem);
  width: 0;
  border-radius: 999px;
  background:
    radial-gradient(120% 100% at 50% -40%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 245, 241, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(13, 13, 13, 0.05),
    0 1px 2px rgba(13, 13, 13, 0.06),
    0 6px 14px -8px rgba(13, 13, 13, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1), width 450ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms ease;
}

nav.hauptnav a {
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: rgba(13, 13, 13, 0.62);
  font-weight: 500;
  font-size: 0.97rem;
  letter-spacing: 0.002em;
  white-space: nowrap;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  transition: color 250ms ease;
}

nav.hauptnav a:hover,
nav.hauptnav a[aria-current="page"] {
  color: var(--farbe-schwarz);
}

nav.hauptnav a[aria-current="page"] {
  font-weight: 600;
}

/* Aktive Seite: das gelbe Logo-X (zwei gekreuzte Balken, wie .x-marke)
   direkt hinter dem Wort, dreht sich fortwährend im Uhrzeigersinn wie in
   der ursprünglichen Navigation. Je Balken nur 180°, weil ein Balken nach
   einer Halbdrehung wieder gleich aussieht: nahtlose Schleife. */
nav.hauptnav a {
  --nav-pr: 1.25rem;
}

nav.hauptnav a[aria-current="page"]:not(.nav-cta) {
  padding-right: calc(var(--nav-pr) + 1.85em); /* Luft zwischen Wort und X (20.10.2026) */
}

nav.hauptnav a[aria-current="page"]:not(.nav-cta)::before,
nav.hauptnav a[aria-current="page"]:not(.nav-cta)::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.15em); /* Balkenmitte = Wortmitte (20.10.2026, vorher 0,3 em zu hoch) */
  left: calc(100% - var(--nav-pr) - 1.35em);
  width: 1.1em;
  height: 0.3em;
  background: var(--farbe-gelb);
}

nav.hauptnav a[aria-current="page"]:not(.nav-cta)::before {
  transform: rotate(45deg);
  animation: nav-x-balken-a 2.4s linear infinite;
}

nav.hauptnav a[aria-current="page"]:not(.nav-cta)::after {
  transform: rotate(-45deg);
  animation: nav-x-balken-b 2.4s linear infinite;
}

@keyframes nav-x-balken-a {
  0% { transform: rotate(45deg); }
  100% { transform: rotate(225deg); }
}

@keyframes nav-x-balken-b {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(135deg); }
}

@media (prefers-reduced-motion: reduce) {
  nav.hauptnav a[aria-current="page"]:not(.nav-cta)::before,
  nav.hauptnav a[aria-current="page"]:not(.nav-cta)::after {
    animation: none !important;
  }
}

nav.hauptnav a.nav-cta {
  margin-left: 0.25rem;
  background:
    radial-gradient(130% 110% at 50% -45%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, var(--farbe-gelb), color-mix(in srgb, var(--farbe-gelb) 90%, #8a7f00));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(90, 80, 0, 0.18),
    0 0 0 1px rgba(90, 80, 0, 0.12),
    0 6px 14px -8px rgba(90, 80, 0, 0.55);
  color: var(--farbe-schwarz);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: background 250ms ease, transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

nav.hauptnav a.nav-cta::after {
  content: "→";
  color: var(--farbe-schwarz);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

nav.hauptnav a.nav-cta:hover {
  background:
    radial-gradient(130% 110% at 50% -45%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0) 62%),
    color-mix(in srgb, var(--farbe-gelb) 88%, black);
  color: var(--farbe-schwarz);
}

nav.hauptnav a.nav-cta:hover::after {
  transform: translateX(3px);
}

/* Untermenüs (08.10.2026, nach Vorbild apple.com): Am Desktop gleitet unter
   der Kopfleiste ein schlichtes Feld über die volle Breite auf, gleiche Farbe
   wie der Kopfbereich, große fette Textlinks ohne Symbole; der Seiteninhalt
   darunter wird weichgezeichnet. Das Feld (.nav-flyout) baut main.js aus dem
   Untermenü der Gruppe und hängt es an .kopf an. Das ursprüngliche Untermenü
   (.nav-panel) dient nur dem Handy-Akkordeon und ist am Desktop aus. */
.nav-gruppe {
  display: flex;
  align-items: center;
}

.nav-panel,
.nav-aufklapper {
  display: none;
}

.nav-flyout {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 99;
  background: var(--farbe-weiss);
  border-bottom: 1px solid rgba(13, 13, 13, 0.06);
  box-shadow: 0 30px 60px -40px rgba(13, 13, 13, 0.25);
  padding: 2.4rem 0 3rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 240ms ease,
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 380ms;
}

.nav-flyout.ist-offen {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nav-flyout-innen {
  display: flex;
  gap: clamp(2.5rem, 1.5rem + 2vw, 4rem);
  padding-left: var(--flyout-x, var(--raum-m));
  padding-right: var(--raum-m);
}

.nav-flyout-innen > div {
  flex: 0 0 auto;
}

.nav-flyout-innen > .nav-flyout-mehr {
  flex: 0 0 auto;
}

.nav-flyout-klein a {
  white-space: nowrap;
}

.nav-flyout-gross a {
  white-space: nowrap;
}

.nav-flyout-label {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #6E6E73;
}

.nav-flyout ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.nav-flyout a {
  color: var(--farbe-schwarz);
  text-decoration: none;
  transition: color 200ms ease;
}

.nav-flyout-gross a {
  font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.nav-flyout-klein a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #424245;
}

.nav-flyout a:hover,
.nav-flyout a:focus-visible {
  color: #6E6E73;
}

/* Links tauchen leicht gestaffelt auf */
.nav-flyout li {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-flyout.ist-offen li {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + var(--i, 0) * 35ms);
}

/* Weichzeichner über dem Seiteninhalt, solange ein Feld offen ist. Hängt
   direkt am body (nicht in .kopf, dessen eigener backdrop-filter sonst die
   Unschärfe schluckt); die Oberkante setzt main.js auf die Kopfhöhe. */
.kopf-schleier {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--schleier-top, 0);
  bottom: 0;
  z-index: 98;
  background: rgba(240, 240, 243, 0.3);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}

.kopf-schleier.ist-sichtbar {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (max-width: 1100px) {
  .nav-flyout,
  .kopf-schleier {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-flyout,
  .nav-flyout li {
    transition: none;
    transform: none;
  }
}

/* Untermenüs mobil: im dunklen Vollbild-Menü als Akkordeon unter dem
   Hauptpunkt, aufgeklappt über das Plus daneben. */
@media (max-width: 1100px) {
  .nav-gruppe {
    flex-wrap: wrap;
    width: 100%;
    gap: 0 0.75rem;
  }

  .nav-aufklapper {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: var(--farbe-weiss);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease;
  }

  .nav-gruppe.ist-offen .nav-aufklapper {
    transform: rotate(45deg);
    background: var(--farbe-gelb);
    color: var(--farbe-schwarz);
    border-color: var(--farbe-gelb);
  }

  .nav-panel,
  .nav-panel-gross {
    position: static;
    flex-basis: 100%;
    width: auto;
    min-width: 0;
    display: none;
    padding: 0.4rem 0 0.8rem;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav-panel::before,
  .nav-panel::after {
    display: none;
  }

  .nav-gruppe:hover > .nav-panel,
  .nav-gruppe:focus-within > .nav-panel {
    display: none;
  }

  .nav-gruppe.ist-offen > .nav-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  nav.hauptnav .nav-unterpunkt,
  nav.hauptnav .nav-panel-fuss {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.75);
    padding: 0.45rem 0 0.45rem 2rem;
    border: none;
    border-radius: 0;
    background: none;
  }

  nav.hauptnav .nav-unterpunkt {
    position: relative;
    display: block;
  }

  nav.hauptnav .nav-unterpunkt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62rem;
    width: 16px;
    height: 16px;
    background:
      linear-gradient(45deg, transparent 43%, var(--farbe-gelb) 43%, var(--farbe-gelb) 57%, transparent 57%) center / 11px 11px no-repeat,
      linear-gradient(-45deg, transparent 43%, var(--farbe-gelb) 43%, var(--farbe-gelb) 57%, transparent 57%) center / 11px 11px no-repeat;
  }

  /* Glanzkappe und Lichtstreif gehören nur zur Desktop-Leiste */
  nav.hauptnav::before,
  nav.hauptnav::after {
    display: none;
  }

  .nav-unterpunkt-titel {
    font-size: 1.05rem;
    font-weight: 500;
  }

  .nav-unterpunkt-text {
    display: none;
  }

  nav.hauptnav .nav-panel-fuss {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    color: var(--farbe-gelb);
  }
}

.nav-umschalter {
  display: none;
  position: relative;
  z-index: 102;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--farbe-schwarz);
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-umschalter span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--farbe-weiss);
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease, background 250ms ease;
}

.nav-umschalter span:nth-child(1) { top: 17px; }
.nav-umschalter span:nth-child(2) { top: 21px; opacity: 0; }
.nav-umschalter span:nth-child(3) { top: 25px; }

.nav-umschalter[aria-expanded="true"] {
  background: var(--farbe-gelb);
}

.nav-umschalter[aria-expanded="true"] span {
  background: var(--farbe-schwarz);
}

.nav-umschalter[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.nav-umschalter[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}

@media (min-width: 1101px) and (max-width: 1300px) {
  nav.hauptnav a {
    --nav-pr: 0.95rem;
    font-size: 0.95rem;
    padding: 0.65rem 0.95rem;
  }
}

@media (max-width: 1100px) {
  .nav-umschalter {
    display: block;
  }

  nav.hauptnav {
    position: fixed;
    inset: 0;
    z-index: 101;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    padding: 6rem var(--raum-m) var(--raum-m);
    background: var(--farbe-schwarz);
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 400ms ease, visibility 0s linear 400ms;
  }

  nav.hauptnav.ist-offen {
    visibility: visible;
    opacity: 1;
    transition: opacity 400ms ease;
  }

  .nav-indikator {
    display: none;
  }

  nav.hauptnav a {
    font-size: clamp(1.5rem, 0.9rem + 2.6vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.2rem 0;
    opacity: 0;
    transform: translateY(14px);
    filter: blur(10px);
    transition: opacity 600ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease, color 250ms ease;
  }

  nav.hauptnav a:hover,
  nav.hauptnav a[aria-current="page"] {
    color: var(--farbe-weiss);
  }

  nav.hauptnav a {
    --nav-pr: 0px;
  }

  nav.hauptnav a[aria-current="page"]:not(.nav-cta)::before,
  nav.hauptnav a[aria-current="page"]:not(.nav-cta)::after {
    width: 0.6em;
    height: 0.16em;
    top: calc(50% - 0.2em);
    left: calc(100% - 0.75em);
  }

  nav.hauptnav a[aria-current="page"]:not(.nav-cta) {
    padding-right: 1em;
  }

  nav.hauptnav.ist-offen a {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  nav.hauptnav.ist-offen a:nth-child(2) { transition-delay: 60ms; }
  nav.hauptnav.ist-offen a:nth-child(3) { transition-delay: 120ms; }
  nav.hauptnav.ist-offen a:nth-child(4) { transition-delay: 180ms; }
  nav.hauptnav.ist-offen a:nth-child(5) { transition-delay: 240ms; }
  nav.hauptnav.ist-offen a:nth-child(6) { transition-delay: 300ms; }
  nav.hauptnav.ist-offen a:nth-child(7) { transition-delay: 360ms; }

  nav.hauptnav a.nav-cta {
    margin: 1.5rem 0 0;
    padding: 0.85rem 1.6rem;
    font-size: 1.05rem;
    background: var(--farbe-gelb);
    color: var(--farbe-schwarz);
  }

  nav.hauptnav a.nav-cta::after {
    color: var(--farbe-schwarz);
  }

  nav.hauptnav a.nav-cta:hover {
    background: var(--farbe-gelb);
    color: var(--farbe-schwarz);
  }

  body.menue-offen {
    overflow: hidden;
  }

  /* backdrop-filter würde die fixierte Vollfläche auf die Kopfzeile
     beschränken; geöffnet wird die Kopfzeile Teil der dunklen Fläche. */
  body.menue-offen .kopf {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--farbe-schwarz);
    box-shadow: none;
    border-bottom-color: transparent;
  }

  body.menue-offen .marke {
    position: relative;
    z-index: 102;
  }

  body.menue-offen .logo-bild {
    filter: brightness(0) invert(1);
  }
}

/* Dunkle Flächen: Hero & Seitenkopf, mit Textur und einem ruhigen, verankerten Glanzpunkt */

.hero,
.seitenkopf {
  position: relative;
  overflow: hidden;
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
  isolation: isolate;
}

.hero::before,
.seitenkopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ruhiger Glanzpunkt statt wandernder Farbwolke: fix verankert, sehr dezent, mit
   einer dünnen diagonalen Gelb-Linie als eigenständiges Wiedererkennungsmotiv
   (Fortführung des X-Akzents), statt einer generischen Blur-Blase. */

.hero::after,
.seitenkopf::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 46vmax;
  height: 46vmax;
  top: -18vmax;
  right: -12vmax;
  background: radial-gradient(circle at 35% 35%, rgba(239, 229, 44, 0.16), transparent 62%);
  filter: blur(50px);
  animation: atmen 9s ease-in-out infinite;
}

@keyframes atmen {
  0%, 100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

.diagonal-akzent {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 12%;
  width: 1px;
  height: 140%;
  background: linear-gradient(to bottom, transparent, rgba(239, 229, 44, 0.35), transparent);
  transform: rotate(12deg);
  transform-origin: top;
  pointer-events: none;
}

.hero > *,
.seitenkopf > * {
  position: relative;
  z-index: 1;
}

.hero p,
.seitenkopf p {
  color: rgba(255, 255, 255, 0.7);
}

@keyframes eintreten {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero h1,
.seitenkopf h1 {
  animation: eintreten 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero .lead,
.seitenkopf p {
  animation: eintreten 700ms 140ms ease both;
}

.hero > div {
  animation: eintreten 700ms 260ms ease both;
}

.hero {
  padding: var(--raum-l) var(--raum-m) var(--raum-l);
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(48%, 640px);
  z-index: 0;
  animation: eintreten 900ms 150ms ease both;
}

.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--farbe-schwarz) 0%, transparent 22%);
}

.hero-inhalt {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

@media (max-width: 860px) {
  .hero-foto {
    position: static;
    width: 100%;
    height: 320px;
    margin-bottom: var(--raum-s);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .hero-foto::after {
    background: none;
  }

  .hero-inhalt {
    max-width: none;
  }
}

.portraet-schmal {
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius);
  margin-bottom: var(--raum-s);
}

.hero h1 {
  font-size: clamp(2.75rem, 1.9rem + 4vw, 5.5rem);
  max-width: 16ch;
}

.hero .lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  max-width: 45ch;
  color: rgba(255, 255, 255, 0.75);
}

/* Seitenkopf (Unterseiten) */

.seitenkopf {
  padding: var(--raum-l) var(--raum-m) var(--raum-m);
  /* Inhalt auf dieselbe Spalte wie die Abschnitte darunter (1080px) */
  padding-inline: max(var(--raum-m), calc((100% - 1080px) / 2 + var(--raum-m)));
}

.seitenkopf h1 {
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  color: var(--farbe-weiss);
}

/* Buttons */

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.knopf:hover::before {
  opacity: 1;
}

.knopf-primaer {
  background: var(--farbe-gelb);
  color: var(--farbe-schwarz);
}

.knopf-primaer:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(239, 229, 44, 0.6);
}

.knopf-primaer::after {
  content: "→";
  display: inline-block;
  transition: transform var(--transition);
}

.knopf-primaer:hover::after {
  transform: translateX(5px);
}

.knopf-sekundaer {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--farbe-weiss);
}

.knopf-sekundaer:hover {
  border-color: var(--farbe-weiss);
}

/* Inhalt */

main {
  overflow-x: hidden;
}

.abschnitt {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--raum-abschnitt) var(--raum-m);
}

.abschnitt-schmal {
  max-width: 720px;
}

.abschnitt > h2 {
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  max-width: 22ch;
}

/* Karten-Raster für Leistungen & Methode: an die ursprüngliche Aufteilung
   angelehnt (Sebastian: "Aufteilung war sinnvoll"), aber modernisiert und
   ohne die generischen Signale von vorher — kein Eyebrow, keine Ghost-Zahl,
   keine Nummerierung. Statt einer Zahl trägt jede Karte das Firmen-X in
   Bewegung (dieselbe x-pulsieren-Animation wie im Logo/den Überschriften),
   das die Zählung ersetzt und die Marke durchgängig sichtbar hält. */

.raster {
  display: grid;
  gap: var(--raum-s);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--raum-m);
}

.karte {
  position: relative;
  background: var(--farbe-weiss);
  border-radius: 10px;
  padding: var(--raum-s);
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.04), 0 14px 30px -20px rgba(13, 13, 13, 0.22);
  transition: transform var(--transition), box-shadow var(--transition);
}

.karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(13, 13, 13, 0.06), 0 26px 44px -22px rgba(13, 13, 13, 0.3);
}

.karte-x {
  position: relative;
  display: inline-block;
  vertical-align: 0.04em;
  margin-left: 0.3em;
  width: 0.7em;
  height: 0.7em;
  animation: x-pulsieren 4s ease-in-out infinite;
}

.karte-x::before,
.karte-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 20%;
  background: var(--farbe-gelb);
}

.karte-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.karte-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.karte h3 {
  font-size: 1.2rem;
  hyphens: manual;
  overflow-wrap: break-word;
}

.karte p {
  margin-bottom: 0;
}

/* Gut sichtbarer Sammel-Link unter den drei Leistungs-Karten, statt
   einzelner Links in den Kartentexten. */
.leistungen-link {
  margin: var(--raum-s) 0 0;
  font-size: 1.05rem;
}

.leistungen-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--farbe-schwarz);
  text-decoration: underline;
  text-decoration-color: var(--farbe-gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.leistungen-link .pfeil-inline {
  display: inline-block;
  transition: transform var(--transition);
}

.leistungen-link a:hover .pfeil-inline {
  transform: translateX(5px);
}

/* Systemische Schleife: die vier Schritte behalten echte Ziffern (die
   Reihenfolge trägt hier tatsächlich Bedeutung), werden aber zusätzlich
   durch eine animierte, geschlossene Schleifen-Linie miteinander verknüpft
   statt lose nebeneinanderzustehen — ein Geflecht, kein Raster. Auf
   schmalen Bildschirmen (Karten stapeln sich) blendet die Verbindung aus,
   weil sie ohne die feste 4-Spalten-Reihe ihre Bedeutung verliert. */

.methode-schritte {
  position: relative;
  display: grid;
  gap: var(--raum-s) var(--raum-m);
  margin-top: var(--raum-m);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (min-width: 960px) {
  .methode-schritte {
    grid-template-columns: repeat(4, 1fr);
  }
}

.schleife-verbindung {
  display: none;
  position: absolute;
  top: -0.3rem;
  left: 0;
  width: 100%;
  height: 4.6rem;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.schleife-verbindung path {
  fill: none;
  stroke: var(--farbe-gelb);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  animation: schleife-fliessen 14s linear infinite;
}

.schleife-verbindung circle {
  fill: var(--farbe-gelb);
}

@keyframes schleife-fliessen {
  to {
    stroke-dashoffset: -240;
  }
}

.schritt {
  position: relative;
  z-index: 1;
}

.schritt-nummer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: none;
  border-radius: 50%;
  background: var(--farbe-schwarz);
  color: var(--farbe-gelb);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0 auto 1rem;
  cursor: default;
}

.schritt h3 {
  font-size: 1.1rem;
  text-align: center;
}

.schritt p {
  margin-bottom: 0;
}

/* Schleifen-Modus (ab 960px, ohne reduzierte Bewegung — main.js entscheidet
   und setzt die Klasse): exakte Umsetzung der Vorlage (von Sebastian
   hochgeladen, 19.09.2026) — drei miteinander verbundene Schleifen
   abnehmender Größe als EINE durchgehende Linie (nicht drei überlappende
   Kreise), die zuletzt als Pfeil nach oben rechts ausläuft. Bewusst
   statisch/ruhig statt schwebend, um
   die klare, geometrische Vorlage nicht zu verwässern; Bewegung passiert
   nur bei Interaktion. Der große, erste Kreis trägt die vier echten
   Schritte (oben/rechts/unten/links) und den Titel "Systemische Schleife",
   getrennt durch eine gestrichelte Linie wie im Vorbild. Die beiden
   kleineren Kreise sind rein dekorativ, mit denselben vier
   Quadrat-Markierungen, aber ohne eigenen Inhalt. Im Ruhezustand ist die
   Ziffer unsichtbar (Farbe transparent, bleibt aber für Screenreader im
   DOM), Überschrift + Text der Schritt-Karten ebenso nur per Opacity
   ausgeblendet. Ohne JS oder unterhalb 960px bleibt die ursprüngliche,
   immer sichtbare Karten-Darstellung unverändert bestehen. */

.methode-schritte.ist-schleifenmodus {
  display: block;
  position: relative;
  min-height: 24rem;
  margin-top: var(--raum-m);
}

.methode-schritte.ist-schleifenmodus .schritt {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  z-index: 1;
}

.methode-schritte.ist-schleifenmodus .schritt.ist-aktiv {
  z-index: 3;
}

.methode-schritte.ist-schleifenmodus .schritt-nummer {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  border-radius: 4px;
  background: var(--farbe-gelb);
  color: transparent;
  box-shadow: 0 0 0 3px var(--farbe-weiss), 0 8px 16px rgba(13, 13, 13, 0.22);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.methode-schritte.ist-schleifenmodus .schritt-nummer:hover,
.methode-schritte.ist-schleifenmodus .schritt-nummer:focus-visible,
.methode-schritte.ist-schleifenmodus .schritt.ist-aktiv .schritt-nummer {
  transform: scale(1.3);
  box-shadow: 0 0 0 3px var(--farbe-weiss), 0 12px 24px rgba(13, 13, 13, 0.32);
}

.methode-schritte.ist-schleifenmodus .schritt-inhalt {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 15.5rem;
  margin-top: 0.85rem;
  transform: translate(-50%, 0.5rem);
  background: var(--farbe-weiss);
  border-radius: 10px;
  padding: var(--raum-s);
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.04), 0 14px 30px -14px rgba(13, 13, 13, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}

.methode-schritte.ist-schleifenmodus .schritt-inhalt.karte-oben {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.85rem;
  transform: translate(-50%, -0.5rem);
}

.methode-schritte.ist-schleifenmodus .schritt.ist-aktiv .schritt-inhalt {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.methode-schritte.ist-schleifenmodus .schritt-inhalt h3 {
  font-size: 1rem;
}

.methode-schritte.ist-schleifenmodus .schleife-verbindung {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Höhere Spezifität nötig (zwei Klassen statt einer): die allgemeine Regel
   ".schleife-verbindung path" weiter oben zählt sonst mehr (Klasse+Element)
   als eine einzelne Klasse und würde Farbe/Stärke hier sonst überschreiben. */

.methode-schritte.ist-schleifenmodus .schleife-linie {
  fill: none;
  stroke: var(--farbe-schwarz);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: none;
  animation: none;
}

.methode-schritte.ist-schleifenmodus .schleife-pfeilspitze {
  fill: var(--farbe-schwarz);
}

.methode-schritte.ist-schleifenmodus .schleife-marker-dekor {
  stroke: var(--farbe-weiss);
  stroke-width: 3;
}

/* Kreis 2: dieselbe Gelbfamilie wie die echten Schritte auf dem großen
   Kreis, nur blasser — Kreis 3 dazu nochmal eine Stufe blasser, passend
   zur abnehmenden Größe der Kreise. */
.methode-schritte.ist-schleifenmodus .schleife-marker-kreis2 {
  fill: var(--farbe-gelb-blass);
}

.methode-schritte.ist-schleifenmodus .schleife-marker-kreis3 {
  fill: var(--farbe-gelb-blasser);
}

/* Wandernder Punkt: Kern mit weißem Ring (dieselbe Ring-Optik wie die
   Quadrat-Marker) plus weicher Indigo-Aura dahinter, statt einer schlichten
   flachen Fläche. */
.methode-schritte.ist-schleifenmodus .schleife-wanderpunkt-aura {
  fill: var(--farbe-indigo);
  opacity: 0.22;
}

.methode-schritte.ist-schleifenmodus .schleife-wanderpunkt {
  fill: var(--farbe-indigo);
  stroke: var(--farbe-weiss);
  stroke-width: 2.5;
  filter: drop-shadow(0 3px 8px rgba(79, 70, 229, 0.55));
}

/* Titel im großen Kreis, durch eine gestrichelte Linie geteilt — genau wie
   im Vorbild, bewusst zurückhaltend (kein Eyebrow-Tracking). */

.schleife-titel-linie {
  position: absolute;
  height: 0;
  border-top: 2px dashed var(--farbe-schwarz);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.schleife-titel {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--farbe-schwarz);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* Artikel-Liste (Perspektiven): redaktionelle Zeilen statt Karten. */

.artikel-liste {
  margin-top: var(--raum-m);
  border-top: 1px solid var(--farbe-rahmen);
}

.artikel-eintrag {
  padding: var(--raum-s) 0;
  border-bottom: 1px solid var(--farbe-rahmen);
}

.artikel-eintrag h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
}

.artikel-eintrag p {
  margin-bottom: 0.75rem;
}

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--farbe-grau);
  border: 1px solid var(--farbe-rahmen);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

/* Formular (Kontakt) */

.feld {
  display: block;
  margin-bottom: var(--raum-s);
}

.feld label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.feld input,
.feld textarea {
  width: 100%;
  padding: 0.75rem 0.1rem;
  border: none;
  border-bottom: 1.5px solid var(--farbe-rahmen);
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: var(--farbe-schwarz);
  transition: border-color var(--transition);
}

.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-bottom-color: var(--farbe-schwarz);
}

/* Datenschutzhinweis über dem Absendeknopf (20.10.2026) */
.formular-hinweis {
  font-size: 0.85rem;
  color: var(--farbe-grau);
  max-width: 46ch;
  margin: 0 0 var(--raum-s);
}

.formular-hinweis a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.feld-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Scroll-Reveal: eine Bewegung je Abschnitt (Text), eine zweite,
   eigenständige für Listenzeilen/Schritte, statt derselben Kaskade überall. */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition-property: opacity, transform;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.ist-sichtbar {
  opacity: 1;
  transform: translateY(0);
}

/* Fuß */

.fuss {
  background: var(--farbe-schwarz);
  color: rgba(255, 255, 255, 0.6);
  padding: var(--raum-m);
}

.fuss {
  padding-top: var(--raum-l);
}

.fuss-inhalt {
  max-width: calc(1080px - 2 * var(--raum-m));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: var(--raum-m);
  font-size: 0.92rem;
  padding-bottom: var(--raum-m);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fuss p {
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 0.9em;
}

.fuss-claim {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--farbe-weiss) !important;
}

.fuss .fuss-cta {
  display: inline-flex;
  gap: 0.5rem;
  color: var(--farbe-gelb);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.fuss .fuss-cta:hover {
  color: var(--farbe-weiss);
}

.fuss-spalte {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.fuss-titel {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 0.6rem !important;
}

.fuss-unten {
  max-width: calc(1080px - 2 * var(--raum-m));
  margin: 0 auto;
  padding-top: var(--raum-s);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-s);
  justify-content: space-between;
  font-size: 0.8rem;
}

@media (max-width: 760px) {
  .fuss-inhalt {
    grid-template-columns: 1fr;
  }
}

.fuss a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--farbe-weiss);
}

.fuss-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Handy: Hero-Überschrift so groß, dass "Organisationen" in die Zeile passt. */
@media (max-width: 600px) {
  .hero h1 {
    font-size: clamp(2.1rem, 1.2rem + 4.6vw, 2.75rem);
  }
}

/* Systemische Schleife: Nummer vor dem Schritt-Titel (1 = Auftragsklärung).
   Im DOM stehen die Schritte in der Reihenfolge ihrer festen Kreis-Positionen
   (oben, rechts, unten, links); in der Listenansicht ordnet CSS sie fachlich. */
.schritt-zahl {
  color: var(--farbe-schwarz);
  background: var(--farbe-gelb);
  border-radius: 4px;
  padding: 0 0.3em;
  margin-right: 0.15em;
  font-variant-numeric: tabular-nums;
}

.methode-schritte:not(.ist-schleifenmodus) .schritt:nth-child(4) { order: 1; }
.methode-schritte:not(.ist-schleifenmodus) .schritt:nth-child(3) { order: 2; }
.methode-schritte:not(.ist-schleifenmodus) .schritt:nth-child(2) { order: 3; }
.methode-schritte:not(.ist-schleifenmodus) .schritt:nth-child(5) { order: 4; }

/* In der Listenansicht trägt der schwarze Kreis die Nummer schon. */
.methode-schritte:not(.ist-schleifenmodus) .schritt-zahl {
  display: none;
}

/* Hover-Karten der Schleife fangen keine Maus ab: Die nach oben öffnende
   Karte (Schritt 1, unten am Kreis) lag sonst über ihrem eigenen Quadrat
   und schloss sich sofort wieder. Die Karten enthalten keine Links. */
.methode-schritte.ist-schleifenmodus .schritt.ist-aktiv .schritt-inhalt {
  pointer-events: none;
}

/* Startseite: weiche Einblendung aus der Unschärfe ins Klare (am 18.10.2026
   von gut 3 s auf ca. 1 s verkürzt, damit der Kopf am Handy nicht leer wirkt),
   nacheinander Überschrift, Text, Buttons, Foto (Vorbild: ruhige
   Consulting-Landingpage). Unterseiten behalten das kürzere Timing. */
@keyframes eintreten-lang {
  0% {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(22px);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero > .hero-inhalt {
  animation: none;
}

.hero h1 {
  animation: eintreten-lang 1000ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero .lead {
  animation: eintreten-lang 900ms 150ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero .hero-inhalt > div {
  animation: eintreten-lang 800ms 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero > .hero-foto {
  overflow: hidden;
  animation: eintreten-lang 1200ms 100ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Foto in ruhiger Bewegung: langsame Kamerafahrt (leichtes Heranzoomen
   und Gleiten), wie eine Videoeinstellung. Bewusst langsam, damit es
   hochwertig wirkt und nicht unruhig. */
/* Hero-Video (Kamerafahrt mit Tiefenwirkung, aus dem Foto gerendert,
   Remotion-Komposition "HeroFoto" in job/luda-consulting/social-media).
   Erstes Bild = Foto, daher blendet es nach der Unschärfe-Einblendung
   unmerklich über (main.js) und läuft dann als nahtlose Schleife. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 1200ms ease;
  pointer-events: none;
}

.hero-video.ist-sichtbar {
  opacity: 1;
}


@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

/* Platz unter der Schleife, damit die nach unten öffnende Karte von
   Schritt 1 nicht an den Fußbereich stößt. */
.methode-schritte.ist-schleifenmodus {
  margin-bottom: 6rem;
}

/* KI-Orb in der Karte „KI-Beratung" (Startseite): helle Bildfläche bündig
   oben in der Karte, darin drei Canvas aus js/ki-orb.js: hinten eine
   weichgezeichnete Kopie des Orbs als farbiger Hof, dann der Orb selbst
   (WebGL), dann das Netzwerk; ganz vorn die Begriffe als echter HTML-Text,
   damit die Schrift so scharf rendert wie der übrige Seitentext. */
.karte-mit-orb {
  overflow: hidden;
}

.ki-orb {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: calc(-1 * var(--raum-s)) calc(-1 * var(--raum-s)) var(--raum-s);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--farbe-gelb) 9%, white) 0%, #FBFBFD 45%, #F5F5F7 75%);
  overflow: hidden;
}

.ki-orb canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ki-orb-glut {
  filter: blur(14px) saturate(1.4);
  opacity: 0.55;
  transform: scale(1.05);
}

.ki-orb-netz {
  pointer-events: none;
}

.ki-orb-begriffe {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ki-orb-begriffe span {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  white-space: nowrap;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #1D1D1F;
  /* Begriffe als kleine Glas-Etiketten: halbtransparentes Weiß, Haarlinie,
     weicher Schatten wie bei den Kacheln der Dozent-Karte. */
  padding: 4px 8px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 0.5px rgba(29, 27, 75, 0.08),
    0 3px 10px -4px rgba(29, 27, 75, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Erweiterte Prozesskette (eEPK) in der Karte „Organisationsentwicklung,
   Prozessoptimierung & Beratung" (Startseite): industrielle
   Auftragsabwicklung, die beim Scrollen Schritt für Schritt entsteht und
   anschließend durch Automation verbessert wird (js/epk.js). Gestaltung
   nach Apple-Vorbild: ruhige hellgraue Fläche, weiche Kacheln mit
   mehrstufigem Schatten statt harter Konturen, Haarlinien, gedämpfte
   Grautöne in der Schrift. EPK-Notation bleibt: Ereignis = Sechseck,
   Funktion = abgerundetes Rechteck, Konnektor = Kreis, Organisations-
   einheit = Ellipse. Bei Mouseover fährt die Ansicht zufällig von
   Bestandteil zu Bestandteil. */
.karte-mit-epk {
  overflow: hidden;
}

.epk {
  --epk-tinte: #1D1D1F;
  --epk-grau: #6E6E73;
  --epk-linie: #C4C4CC;
  --epk-akzent: rgba(222, 205, 20, 0.85);
  position: relative;
  aspect-ratio: 4 / 3;
  margin: calc(-1 * var(--raum-s)) calc(-1 * var(--raum-s)) var(--raum-s);
  padding: 3.5% 3%;
  background:
    radial-gradient(ellipse at 50% 45%, #FBFBFD 0%, #F5F5F7 70%);
  overflow: hidden;
}

.epk-grafik {
  display: block;
  width: 100%;
  height: 100%;
  text-rendering: geometricPrecision;
}

.epk-text {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 500;
  font-size: 8px;
  letter-spacing: -0.01em;
  fill: var(--epk-tinte);
}

.epk-text-klein {
  font-size: 6.4px;
  letter-spacing: 0.02em;
  fill: var(--epk-grau);
}

.epk-text-konnektor {
  font-size: 5.6px;
  font-weight: 600;
  letter-spacing: 0.1em;
  fill: var(--farbe-indigo);
}

.epk-kante {
  fill: none;
  stroke: var(--epk-linie);
  stroke-width: 0.75;
  stroke-linecap: round;
}

#epk-pfeil path,
.epk-spitze {
  fill: none;
  stroke: var(--epk-linie);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.epk-ereignis .epk-form {
  fill: var(--farbe-weiss);
  stroke: var(--epk-akzent);
  stroke-width: 0.65;
  stroke-linejoin: round;
}

.epk-funktion .epk-form {
  fill: var(--farbe-weiss);
  stroke: rgba(29, 27, 75, 0.06);
  stroke-width: 0.5;
}

.epk-org .epk-form {
  fill: #ECECF1;
  stroke: none;
}

.epk-konnektor .epk-form {
  fill: var(--farbe-weiss);
  stroke: rgba(0, 0, 0, 0.06);
  stroke-width: 0.5;
}

.epk-marker text {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 5.6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.epk-manuell rect {
  fill: #E8E8ED;
}

.epk-manuell text {
  fill: var(--epk-grau);
}

.epk-automatisiert text {
  fill: var(--farbe-weiss);
}

.epk-token-bahn {
  fill: none;
  stroke: none;
}

.epk-token {
  fill: var(--farbe-indigo);
  opacity: 0;
}

/* Fokus bei Mouseover: der angefahrene Bestandteil bleibt, alles andere
   tritt zurück (filter statt opacity, damit es nicht mit der
   Scroll-Animation kollidiert). */
.epk-grafik [data-schritt],
.epk-grafik .epk-spitze {
  transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.epk-grafik.ist-fokussiert [data-schritt]:not(.ist-im-fokus),
.epk-grafik.ist-fokussiert .epk-spitze {
  filter: opacity(0.28) saturate(0.6);
}

/* Endzustand ohne Animation (Bewegung reduzieren / ohne GSAP):
   die Kette steht vollständig und bereits automatisiert da. */
.epk-endzustand .epk-manuell {
  opacity: 0;
}

.epk-endzustand .epk-auto-faehig .epk-form {
  fill: var(--farbe-weiss);
  stroke: rgba(79, 70, 229, 0.4);
  stroke-width: 0.6;
}

/* Spracherkennung in der Karte „Dozent & Speaker" (Startseite): eigene
   Illustration im Stil der Prozesskette (weiche Kacheln, feine Schatten):
   links ein Vortrag als Sprechblase mit Wellenform, rechts das Transkript,
   dazwischen fließt die Sprache als Datenpunkte hinüber. Animation in
   js/sprache.js. */
.karte-mit-sprache {
  overflow: hidden;
}

.sprache {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: calc(-1 * var(--raum-s)) calc(-1 * var(--raum-s)) var(--raum-s);
  background:
    radial-gradient(ellipse at 50% 45%, #FBFBFD 0%, #F5F5F7 70%);
  overflow: hidden;
}

.sp-grafik {
  display: block;
  width: 100%;
  height: 100%;
  text-rendering: geometricPrecision;
}

.sp-balken {
  fill: #D9DAE6;
}

.sp-zeile {
  fill: none;
  stroke: #D9DAE6;
  stroke-width: 5;
  stroke-linecap: round;
}

.sp-fluss {
  fill: none;
  stroke: #C9C6F5;
  stroke-width: 1;
  stroke-dasharray: 1.5 4;
  stroke-linecap: round;
}

.sp-etikett {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  fill: #6E6E73;
}

.sp-etikett-chip {
  font-size: 7.4px;
  fill: #1D1D1F;
}

/* ---------------------------------------------------------------------
   Startseite, Ausbau 07.10.2026: Bilanz, Bindeglied-Kette, Abschluss.
   --------------------------------------------------------------------- */

/* Bilanz: drei Zeilen Werdegang in großer Schrift, Haarlinien statt
   Kennzahlen-Kacheln. Der Wert steht links, der Satz rechts daneben. */
.bilanz-liste {
  list-style: none;
  margin: var(--raum-m) 0 0;
  padding: 0;
  border-top: 1px solid var(--farbe-rahmen);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--raum-m);
}

.bilanz-liste li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: var(--raum-s);
  align-items: baseline;
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem) 0;
  border-bottom: 1px solid var(--farbe-rahmen);
}

.bilanz-wert {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--farbe-schwarz);
  font-variant-numeric: tabular-nums lining-nums;
  /* Gelber Textmarker unter dem Wert, wie im Logo-Akzent */
  background: linear-gradient(transparent 62%, var(--farbe-gelb) 62%, var(--farbe-gelb) 88%, transparent 88%) no-repeat;
  background-size: 100% 100%;
  justify-self: start;
  padding: 0 0.08em;
  white-space: nowrap;
}

.bilanz-text {
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--farbe-schwarz);
  max-width: 40ch;
}

@media (max-width: 600px) {
  .bilanz-liste {
    grid-template-columns: 1fr;
  }
  .bilanz-liste li {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* Bindeglied: vier Glieder einer Kette (Theorie, Konzeption, Praxis,
   Umsetzung), verbunden durch eine durchgehende Linie mit dem CI-X an
   jedem Gelenk. Kein Kartenraster: die Linie trägt die Aussage. */
.bindeglied > h2 {
  max-width: 24ch;
}

.kette {
  list-style: none;
  margin: var(--raum-m) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--raum-s);
  position: relative;
}

/* durchgehende Verbindungslinie auf Höhe der Gelenke */
.kette::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--farbe-schwarz);
}

.kette-glied {
  position: relative;
  padding-top: 2.75rem;
}

/* Gelenk: das gelbe CI-X auf schwarzem Quadrat */
.kette-glied::before,
.kette-glied::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
}

.kette-glied::before {
  background: var(--farbe-schwarz);
  border-radius: 4px;
}

.kette-glied::after {
  background:
    linear-gradient(45deg, transparent 43%, var(--farbe-gelb) 43%, var(--farbe-gelb) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--farbe-gelb) 43%, var(--farbe-gelb) 57%, transparent 57%);
  transform: scale(0.62);
  transition: transform var(--transition);
}

.kette-glied:hover::after {
  transform: scale(0.62) rotate(90deg);
}

.kette-glied h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.4em;
}

.kette-glied p {
  font-size: 0.98rem;
  margin: 0;
}

@media (max-width: 900px) {
  .kette {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--raum-m);
  }
  .kette::before {
    display: none;
  }
  .kette-glied {
    border-top: 2px solid var(--farbe-schwarz);
    padding-top: 2.25rem;
  }
  .kette-glied::before,
  .kette-glied::after {
    top: -11px;
  }
}

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

/* Abschluss: dunkle Bühne wie der Hero, schließt die Seite vor dem Fuß. */
.abschluss {
  position: relative;
  overflow: hidden;
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
  padding: var(--raum-l) var(--raum-m);
  margin-top: var(--raum-abschnitt);
}

.abschluss::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -40%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(239, 229, 44, 0.14), transparent 62%);
  pointer-events: none;
}

.abschluss-inhalt {
  position: relative;
  max-width: calc(1080px - 2 * var(--raum-m));
  margin: 0 auto;
}

.abschluss h2 {
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3.75rem);
  max-width: 18ch;
  color: var(--farbe-weiss);
}

.abschluss p {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  max-width: 60ch;
}

.zielgruppen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: var(--raum-s) 0 var(--raum-m);
  padding: 0;
}

.zielgruppen li {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
}

.abschluss + .fuss {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------------
   Leistungsseite, Ausbau 07.10.2026: Sprungmarken, Schwerpunkte mit
   Angebotsliste (Haarlinien-Zeilen statt Karten).
   --------------------------------------------------------------------- */

html {
  scroll-padding-top: 120px;
}

.sprungmarken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--raum-s);
}

.sprungmarken a {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.88);
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.sprungmarken a:hover {
  background: var(--farbe-gelb);
  border-color: var(--farbe-gelb);
  color: var(--farbe-schwarz);
}

/* Use Cases auf der Startseite (08.10.2026): typische Ausgangslagen als
   Kartenreihe zum Durchwischen, gleiche Bildsprache wie die Produktkarten
   auf Leistungen. Die Reihe läuft rechts über den Inhaltsrand hinaus, damit
   sichtbar ist, dass es weitergeht; Einrasten per scroll-snap. */
.usecases-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--raum-s);
}

.usecases-kopf h2 {
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  max-width: 22ch;
  margin-bottom: 0;
}

.usecases > p {
  max-width: 60ch;
  margin-top: 0.9rem;
}

.usecases-steuerung {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.usecases-pfeil {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(29, 27, 75, 0.1);
  background: var(--farbe-weiss);
  color: var(--farbe-schwarz);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.05), 0 6px 16px -10px rgba(29, 27, 75, 0.3);
  transition: background var(--transition), opacity var(--transition), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.usecases-pfeil:hover {
  background: var(--farbe-gelb);
  transform: translateY(-1px);
}

.usecases-pfeil:disabled {
  opacity: 0.35;
  cursor: default;
  background: var(--farbe-weiss);
  transform: none;
}

/* Umschalter nach Angebot (09.10.2026), Optik wie die Glas-Menüleiste */
.usecase-umschalter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: var(--raum-s);
  padding: 0.3rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(244, 243, 238, 0.7), rgba(230, 229, 223, 0.75));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(13, 13, 13, 0.06),
    0 8px 22px -14px rgba(13, 13, 13, 0.25);
}

.usecase-tab {
  border: none;
  background: none;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(13, 13, 13, 0.62);
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease, box-shadow 250ms ease;
}

.usecase-tab:hover {
  color: var(--farbe-schwarz);
}

.usecase-tab[aria-selected="true"] {
  background: var(--farbe-weiss);
  color: var(--farbe-schwarz);
  font-weight: 600;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(13, 13, 13, 0.05), 0 4px 10px -6px rgba(13, 13, 13, 0.3);
}

.usecase-tab:focus-visible {
  outline: 2px solid var(--farbe-gelb);
  outline-offset: 2px;
}

.usecase[hidden] {
  display: none;
}

/* Platzhalterkarte: gestrichelt, bis echte Use Cases vorliegen */
.usecase.usecase-platzhalter {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed rgba(13, 13, 13, 0.18);
}

.usecase-platzhalter .usecase-lage {
  color: rgba(13, 13, 13, 0.45);
}

.usecase-reihe {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, calc((100% - 2 * 1.25rem) / 2.6));
  gap: 1.25rem;
  margin: var(--raum-m) calc(-1 * var(--raum-m)) 0 0;
  padding: 0.5rem var(--raum-m) 1.75rem 0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.25rem;
  scrollbar-width: none;
  /* weich auslaufender rechter Rand statt harter Kante: zeigt, dass es weitergeht */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 7rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 7rem), transparent 100%);
}

.usecase-reihe.ist-am-ende {
  -webkit-mask-image: none;
  mask-image: none;
}

.usecase-reihe::-webkit-scrollbar {
  display: none;
}

.usecase-reihe:focus-visible {
  outline: 2px solid var(--farbe-gelb);
  outline-offset: 4px;
  border-radius: 16px;
}

.usecase {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 1rem + 0.8vw, 1.75rem);
  background: var(--farbe-weiss);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(13, 13, 13, 0.04),
    0 10px 28px -16px rgba(29, 27, 75, 0.22);
}

.usecase-zielgruppe {
  align-self: flex-start;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #4A4943;
  background: #F2F2F5;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.usecase-lage {
  margin: 1rem 0 1.1rem;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--farbe-schwarz);
}

.usecase-schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.usecase-schritte li {
  counter-increment: schritt;
  position: relative;
  padding-left: 2rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.usecase-schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  background: var(--farbe-schwarz);
  color: var(--farbe-gelb);
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.usecase-ergebnis {
  margin: 0 0 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--farbe-rahmen);
  font-size: 0.95rem;
  line-height: 1.5;
}

.usecase-ergebnis strong {
  display: block;
  color: var(--farbe-schwarz);
  margin-bottom: 0.2rem;
}

.usecase-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--farbe-schwarz);
  text-decoration: underline;
  text-decoration-color: var(--farbe-gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width: 700px) {
  .usecases-steuerung {
    display: none;
  }
  .usecase-reihe {
    grid-auto-columns: 84%;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Geschichte (10.10.2026): fünf Stränge des eigenen Wegs (Praxis, Führung,
   Theorie, Beratung, KI) laufen als Linien in einem Punkt zusammen. Linien
   zeichnet main.js als SVG und lässt sie beim Hineinscrollen wachsen. */
.geschichte > h2 {
  max-width: 22ch;
}

.geschichte-buehne {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 40rem) 1fr auto;
  align-items: center;
  margin-top: var(--raum-m);
}

.geschichte-linien {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.geschichte-linien path {
  fill: none;
  stroke: rgba(13, 13, 13, 0.22);
  stroke-width: 1.75;
  stroke-linecap: round;
  transition: stroke-dashoffset 1100ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: var(--d, 0ms);
}

.geschichte-linien path.linie-ki {
  stroke: var(--farbe-indigo);
  stroke-opacity: 0.6;
}

.geschichte-straenge {
  grid-column: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  position: relative;
  z-index: 1;
}

.strang {
  display: grid;
  grid-template-columns: 6.25rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-radius: 16px;
  background: var(--farbe-weiss);
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.04), 0 10px 28px -18px rgba(29, 27, 75, 0.25);
}

.strang-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-schwarz);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.strang-label::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--farbe-gelb);
  flex-shrink: 0;
}

.strang-ki .strang-label::before {
  background: var(--farbe-indigo);
}

.strang p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

.geschichte-kern {
  grid-column: 3;
  position: relative;
  z-index: 1;
  width: clamp(220px, 14vw + 90px, 270px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  box-shadow: 0 0 0 10px rgba(239, 229, 44, 0.18), 0 24px 50px -24px rgba(13, 13, 13, 0.6);
}

.geschichte-x {
  width: 26px;
  height: 26px;
  margin-bottom: 0.75rem;
  background:
    linear-gradient(45deg, transparent 40%, var(--farbe-gelb) 40%, var(--farbe-gelb) 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--farbe-gelb) 40%, var(--farbe-gelb) 60%, transparent 60%);
}

.kern-titel {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--farbe-weiss);
}

.kern-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

/* Einblenden der Stränge nacheinander, dann der Kern */
.geschichte:not(.ist-gestartet) .strang,
.geschichte:not(.ist-gestartet) .geschichte-kern {
  opacity: 0;
}

.geschichte.ist-gestartet .strang {
  animation: geschichte-rein 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

.geschichte.ist-gestartet .geschichte-kern {
  animation: mm-plopp 700ms cubic-bezier(0.34, 1.45, 0.64, 1) both;
  animation-delay: 1100ms;
}

@keyframes geschichte-rein {
  from { opacity: 0; transform: translateX(-14px); filter: blur(5px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 860px) {
  .geschichte-buehne {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: var(--raum-m);
  }
  .geschichte-linien {
    display: none;
  }
  .geschichte-straenge {
    width: 100%;
  }
  .strang {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .geschichte-kern {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .geschichte.ist-gestartet .strang,
  .geschichte.ist-gestartet .geschichte-kern {
    animation: none;
  }
  .geschichte:not(.ist-gestartet) .strang,
  .geschichte:not(.ist-gestartet) .geschichte-kern {
    opacity: 1;
  }
  .geschichte-linien path {
    transition: none;
  }
}

/* Typische Themen als Mindmap (10.10.2026). Bereich in der Mitte, Oberbegriffe
   als Äste links und rechts; ein Klick auf einen Oberbegriff klappt dessen
   Einzelthemen nach außen auf. Die Verbindungslinien zeichnet main.js als SVG
   und lässt sie beim Öffnen nach außen wachsen. Mobil: senkrechter Baum. */
.themen > h2 {
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  max-width: 22ch;
  margin-bottom: 0;
}

.mm-buehne {
  position: relative;
  left: 50%;
  width: min(1280px, calc(100vw - 3rem));
  translate: -50% 0;
  margin-top: var(--raum-m);
}

.mm {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.25rem);
  min-height: 340px;
  padding: 1rem 0;
}

.mm[hidden] {
  display: none;
}

.mm-linien {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.mm-linien path {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms ease;
  transition-delay: var(--d, 0ms);
}

.mm-linie-haupt {
  stroke: rgba(13, 13, 13, 0.32);
  stroke-width: 2;
}

.mm-linie-haupt.mm-linie-kern {
  stroke: #D8CE1A;
  stroke-width: 3;
}

.mm-linie-blatt {
  stroke: rgba(13, 13, 13, 0.16);
  stroke-width: 1.5;
}

.mm-linie-blatt.mm-linie-kern {
  stroke: rgba(216, 206, 26, 0.85);
}

.mm-linien.ist-gedimmt path:not(.ist-aktiv) {
  opacity: 0.35;
}

.mm-seite {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.mm-links {
  align-items: flex-end;
}

.mm-rechts {
  align-items: flex-start;
}

.mm-ast {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.mm-links .mm-ast {
  flex-direction: row-reverse;
}

.mm-zentrum {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(170px, 12vw + 70px, 210px);
  aspect-ratio: 1;
  padding: 1.6rem;
  hyphens: manual;
  overflow-wrap: break-word;
  border-radius: 999px;
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.88rem, 0.84rem + 0.2vw, 1rem);
  line-height: 1.3;
  box-shadow: 0 0 0 8px rgba(239, 229, 44, 0.22), 0 18px 40px -18px rgba(13, 13, 13, 0.55);
}

.mm-ober {
  font: inherit;
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.12rem);
  font-weight: 700;
  color: var(--farbe-schwarz);
  white-space: nowrap;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 999px;
  background: var(--farbe-weiss);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.08), 0 10px 24px -14px rgba(29, 27, 75, 0.35);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease, background 250ms ease;
}

.mm-ober::after {
  content: "+";
  display: inline-block;
  margin-left: 0.55rem;
  font-weight: 500;
  color: rgba(13, 13, 13, 0.45);
  transition: transform 300ms ease;
}

.mm-ober[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.mm-ober:hover {
  transform: translateY(-2px);
}

.mm-kern .mm-ober {
  background: var(--farbe-gelb);
}

.mm-kern .mm-ober::after {
  color: rgba(13, 13, 13, 0.6);
}

.mm-ober:focus-visible,
.mm-blatt:focus-visible {
  outline: 2px solid var(--farbe-schwarz);
  outline-offset: 3px;
}

.mm-blaetter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
}

.mm-ast.ist-offen .mm-blaetter {
  display: flex;
}

.mm-links .mm-blaetter {
  align-items: flex-end;
}

.mm-blatt {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: inherit;
  color: rgba(13, 13, 13, 0.82);
  max-width: 13rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #F2F2F5;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mm-links .mm-blatt {
  text-align: right;
}

.mm-blatt:hover {
  border-color: var(--farbe-gelb);
  transform: translateY(-1px);
}

.mm-blatt.ist-gewaehlt {
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
}

.mm-ast.ist-gedimmt .mm-ober,
.mm-ast.ist-gedimmt .mm-blatt {
  opacity: 0.45;
}

/* Aufploppen: Mitte, dann Oberbegriffe, beim Aufklappen die Themen */
.mm.ploppt .mm-zentrum,
.mm.ploppt .mm-ober,
.mm-ast.ploppt .mm-blatt {
  animation: mm-plopp 520ms cubic-bezier(0.34, 1.45, 0.64, 1) both;
  animation-delay: var(--d, 0ms);
}

.themen:not(.ist-gestartet) .mm-zentrum,
.themen:not(.ist-gestartet) .mm-ober {
  opacity: 0;
}

@keyframes mm-plopp {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(5px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.mm-detail {
  max-width: 42rem;
  margin: var(--raum-s) auto 0;
  padding: 1.1rem 1.4rem;
  border-radius: 16px;
  background: var(--farbe-weiss);
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.04), 0 10px 28px -16px rgba(29, 27, 75, 0.22);
}

.mm-detail-ober {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #4A4943;
  background: #F2F2F5;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

.mm-detail.ist-kern .mm-detail-ober {
  color: var(--farbe-schwarz);
  background: var(--farbe-gelb);
}

.mm-detail-titel {
  margin: 0.6rem 0 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--farbe-schwarz);
}

.mm-detail-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(13, 13, 13, 0.72);
}

@media (max-width: 860px) {
  .mm-buehne {
    left: auto;
    width: auto;
    translate: none;
  }
  .mm {
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: 1.5rem;
    padding-left: 0.25rem;
  }
  .mm-zentrum {
    order: -1;
    width: auto;
    aspect-ratio: auto;
    padding: 0.8rem 1.3rem;
  }
  .mm-seite,
  .mm-links,
  .mm-rechts {
    align-items: flex-start;
    gap: 1.25rem;
    padding-left: 2rem;
  }
  .mm-ast,
  .mm-links .mm-ast {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .mm-blaetter,
  .mm-links .mm-blaetter {
    align-items: flex-start;
    padding-left: 1.75rem;
  }
  .mm-links .mm-blatt {
    text-align: left;
  }
  .mm-ober {
    white-space: normal;
  }
  .mm-linie-blatt {
    stroke: rgba(13, 13, 13, 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm.ploppt .mm-zentrum,
  .mm.ploppt .mm-ober,
  .mm-ast.ploppt .mm-blatt {
    animation: none;
  }
  .themen:not(.ist-gestartet) .mm-zentrum,
  .themen:not(.ist-gestartet) .mm-ober {
    opacity: 1;
  }
  .mm-linien path {
    transition: none;
  }
}

/* Leistungen (08.10.2026, umgebaut): Jeder Schwerpunkt ist ein eigener
   Block mit Kopf oben und Angeboten als Produktkarten darunter, damit die
   einzelnen Angebote als eigenständige Produkte lesbar sind. Weiße Kacheln
   mit weichem, leicht indigo getöntem Schatten wie auf der Startseite;
   der mittlere Schwerpunkt liegt auf einer hellgrauen Fläche über die volle
   Breite, so trennen sich die drei Bereiche ohne Linien. */
.schwerpunkt {
  display: block;
  position: relative;
}

/* der mittlere Schwerpunkt (seit 09.10.2026 KI-Beratung) liegt auf Grau */
#ki-beratung {
  background: #F5F5F7;
  box-shadow: 0 0 0 100vmax #F5F5F7;
  clip-path: inset(0 -100vmax);
}

.schwerpunkt-kopf {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: var(--raum-m);
  align-items: start;
  margin-bottom: var(--raum-m);
}

.schwerpunkt-kopf h2 {
  grid-column: 1;
  grid-row: 1 / span 3;
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.15rem);
  hyphens: manual;
  overflow-wrap: break-word;
  margin: 0;
}

.schwerpunkt-kopf > p {
  grid-column: 2;
  margin-top: 0;
}

.schwerpunkt-grenze {
  font-size: 0.95rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--farbe-gelb);
}

.schwerpunkt-grenze strong {
  color: var(--farbe-schwarz);
}

.angebot-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem);
}

/* ungerade Anzahl: die letzte Karte nimmt die volle Breite */
.angebot:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.angebot {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 1rem + 0.8vw, 1.75rem);
  background: var(--farbe-weiss);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(13, 13, 13, 0.04),
    0 10px 28px -16px rgba(29, 27, 75, 0.22);
  overflow: hidden;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 450ms ease;
}

.angebot h3 {
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.55em;
  padding-right: 2rem;
}

.angebot p {
  margin: 0 0 1.25rem;
  font-size: 0.98rem;
  max-width: 62ch;
}

.angebot-format {
  margin-top: auto;
  align-self: flex-start;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--farbe-schwarz);
  background: #F2F2F5;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  transition: background var(--transition);
}

/* kleines CI-X oben rechts als Markenzeichen jeder Produktkarte */
.angebot::before,
.angebot h3::after {
  content: "";
  position: absolute;
  /* Mitte auf Höhe der ersten Titelzeile (20.10.2026, vorher ca. 7 px zu hoch) */
  top: calc(clamp(1.3rem, 1rem + 0.8vw, 1.75rem) + 0.6rem);
  right: clamp(1.3rem, 1rem + 0.8vw, 1.75rem);
  width: 1.15rem;
  height: 0.27rem;
  background: var(--farbe-gelb);
  transform: rotate(45deg);
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.angebot h3::after {
  transform: rotate(-45deg);
}

.angebot:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(13, 13, 13, 0.05),
    0 18px 40px -18px rgba(29, 27, 75, 0.32);
}

.angebot:hover::before {
  transform: rotate(135deg);
}

.angebot:hover h3::after {
  transform: rotate(45deg);
}

.angebot:hover .angebot-format {
  background: var(--farbe-gelb);
}

/* Settings (Leistungen, 09.10.2026): Kurzintervention hell, Beratungsprozess
   dunkel als bewusster Kontrast, gleiche Kartenform wie die Produktkarten. */
.settings > p {
  max-width: 62ch;
  margin-bottom: var(--raum-m);
}

.settings-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem);
}

.setting {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  background: var(--farbe-weiss);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(13, 13, 13, 0.04),
    0 10px 28px -16px rgba(29, 27, 75, 0.22);
}

.setting-label {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4A4943;
  background: #F2F2F5;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}

.setting h3 {
  margin: 1.1rem 0 0.6rem;
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem);
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.setting > p {
  margin: 0 0 1.2rem;
  max-width: 62ch;
}

.setting-formate {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.setting-formate li {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--farbe-gelb);
  color: var(--farbe-schwarz);
}

.setting-passt {
  margin-top: auto !important;
  padding-top: 1rem;
  border-top: 1px solid var(--farbe-rahmen);
  font-size: 0.95rem;
}

.setting-passt strong {
  color: var(--farbe-schwarz);
}

.setting-link {
  margin-top: 1.1rem;
  align-self: flex-start;
  display: inline-flex;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--farbe-gelb);
  text-decoration: none;
}

.setting-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.setting-dunkel {
  background: var(--farbe-schwarz);
  color: rgba(255, 255, 255, 0.78);
}

.setting-dunkel p {
  color: rgba(255, 255, 255, 0.74);
}

.setting-dunkel h3,
.setting-dunkel .setting-passt strong {
  color: var(--farbe-weiss);
}

.setting-dunkel .setting-label {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

.setting-dunkel .setting-formate li {
  color: var(--farbe-weiss);
}

.setting-dunkel .setting-passt {
  border-top-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 760px) {
  .settings-raster {
    grid-template-columns: 1fr;
  }
}

/* Systemische Fragetechniken (Leistungen): gleiche Produktkarten, das
   Etikett unten trägt hier eine Beispielfrage und darf umbrechen. */
.fragetechniken > p {
  max-width: 62ch;
  margin-bottom: var(--raum-m);
}

.fragetechniken .angebot-format {
  white-space: normal;
  font-size: 0.9rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .angebot,
  .angebot::before,
  .angebot h3::after {
    transition: none;
  }
  .angebot:hover {
    transform: none;
  }
}

@media (max-width: 900px) {
  .schwerpunkt-kopf {
    grid-template-columns: 1fr;
  }
  .schwerpunkt-kopf h2,
  .schwerpunkt-kopf > p {
    grid-column: 1;
    grid-row: auto;
  }
  .schwerpunkt-kopf h2 {
    margin-bottom: 0.6em;
  }
}

@media (max-width: 700px) {
  .angebot-liste {
    grid-template-columns: 1fr;
  }
}

/* Über mich, Bio-Kopf (09.10.2026) nach Vorlage „Biography Website Design":
   schwarze Bühne, S/W-Porträt rechts (die Fotos haben selbst schwarzen
   Grund), Name in Display-Größe über dem Foto, feines Raster mit
   Pluszeichen und runde Pfeiltasten (Nummer und Einschubfoto auf Wunsch
   Sebastians entfernt). */
.bio-kopf {
  position: relative;
  overflow: hidden;
  background: #0B0B0B;
  color: var(--farbe-weiss);
  min-height: clamp(560px, calc(100vh - 120px), 860px);
  isolation: isolate;
}

.bio-raster {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bio-linie {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
}

.bio-linie-v1 { left: 12%; top: 0; bottom: 0; width: 1px; }
.bio-linie-v2 { left: 72%; top: 0; bottom: 0; width: 1px; }
.bio-linie-h { top: 30%; left: 0; right: 0; height: 1px; }

.bio-plus {
  position: absolute;
  top: 30%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
}

.bio-plus::before,
.bio-plus::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
}

.bio-plus::before { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.bio-plus::after { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.bio-plus-1 { left: 12%; }
.bio-plus-2 { left: 72%; }

.bio-foto {
  position: absolute;
  z-index: 0;
  right: 4%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 70%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%), linear-gradient(to right, transparent 0, #000 22%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%), linear-gradient(to right, transparent 0, #000 22%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

.bio-inhalt {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: grid;
  grid-template-columns: 12% 1fr 28%;
  grid-template-rows: 1fr auto auto auto;
  padding: 0 0 clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.bio-kapitel-liste {
  grid-column: 2;
  grid-row: 2;
  padding-left: 1.4rem;
  align-self: end;
  margin-bottom: clamp(0.5rem, 1vw, 1.25rem);
}

.bio-kapitel[hidden] {
  display: none;
}

.bio-kapitel {
  animation: bio-rein 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bio-rein {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

.bio-kapitel-titel {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-gelb);
}

.bio-spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 15rem));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.bio-spalten p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.bio-name {
  grid-column: 2 / 4;
  grid-row: 3;
  margin: 0;
  padding-left: 1rem;
  /* 10.10.2026: dezenter (vorher bis 10.5rem, 600) */
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.75rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.9);
  max-width: none;
}

.bio-steuerung {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  gap: 0.5rem;
  padding-left: 1.4rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.bio-pfeil {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.82);
  color: var(--farbe-schwarz);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease;
}

.bio-weiter {
  background: var(--farbe-gelb);
}

.bio-pfeil:hover {
  transform: scale(1.06);
}

.bio-pfeil:focus-visible {
  outline: 2px solid var(--farbe-gelb);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .bio-foto {
    right: -10%;
    max-width: 100%;
    opacity: 0.75;
  }
  .bio-inhalt {
    grid-template-columns: 1.25rem 1fr 1.25rem;
    grid-template-rows: 1fr auto auto auto auto;
  }
  .bio-kapitel-liste,
  .bio-steuerung {
    padding-left: 0;
  }
  .bio-kapitel-liste {
    grid-row: 3;
  }
  .bio-spalten {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .bio-name {
    grid-column: 2;
    grid-row: 4;
    padding-left: 0;
    margin-top: 1rem;
  }
  .bio-steuerung {
    grid-row: 5;
  }
  .bio-raster {
    display: none;
  }
  /* Handy: Text liegt über dem Foto, daher dunkler Verlauf für Lesbarkeit */
  .bio-kopf::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(11, 11, 11, 0.92) 0%, rgba(11, 11, 11, 0.75) 55%, rgba(11, 11, 11, 0.15) 100%);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bio-kapitel {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   Über mich, Ausbau 07.10.2026: Porträt mit Stationen links (mitlaufend),
   gegliederter Text rechts, Zitat als Zwischenruf.
   --------------------------------------------------------------------- */

.profil {
  display: block;
}

.profil-text {
  max-width: 62ch;
}

/* Werdegang (09.10.2026): Zeitleiste im Schwarz-Weiß-Stil des Bio-Kopfs,
   am Desktop waagerecht, mobil senkrecht; beim Überfahren wird die
   Überschrift einer Station gelb. */
.werdegang {
  background: #0B0B0B;
  color: var(--farbe-weiss);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.werdegang-innen {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--raum-l) var(--raum-m);
}

.werdegang h2 {
  color: var(--farbe-weiss);
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  margin-bottom: var(--raum-m);
}

.werdegang-leiste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1.25rem;
  position: relative;
}

/* durchgehende Linie auf Höhe der Punkte */
.werdegang-leiste::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.werdegang-schritt {
  position: relative;
  padding-top: 2.1rem;
}

.werdegang-schritt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #0B0B0B;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}

.werdegang-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.werdegang-schritt p {
  margin: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

/* Überfahren: Label wird gelb, Punkt füllt sich gelb */
.werdegang-label,
.werdegang-schritt::before {
  transition: color 250ms ease, background 250ms ease, border-color 250ms ease;
}

.werdegang-schritt:hover .werdegang-label {
  color: var(--farbe-gelb);
}

.werdegang-schritt:hover::before {
  border-color: var(--farbe-gelb);
  background: var(--farbe-gelb);
}

/* letzter Schritt (heute) als gefüllter Punkt */
.werdegang-schritt:last-child::before {
  background: var(--farbe-weiss);
}

@media (max-width: 1000px) {
  .werdegang-leiste {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-left: 2rem;
  }
  .werdegang-leiste::before {
    left: 5px;
    right: auto;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 1px;
    height: auto;
  }
  .werdegang-schritt {
    padding-top: 0;
  }
  .werdegang-schritt::before {
    left: -2rem;
    top: 0.2rem;
  }
}

.profil-text h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  margin-top: var(--raum-m);
}

.profil-text h2:first-child {
  margin-top: 0;
}

.profil-zitat {
  margin: var(--raum-m) 0;
  padding: 0;
}

.profil-zitat p {
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--farbe-schwarz);
  max-width: 24ch;
  margin: 0;
  text-wrap: balance;
}

.profil-zitat p::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  background: var(--farbe-gelb);
  margin-bottom: 1rem;
}

@media (max-width: 860px) {
  .profil {
    grid-template-columns: 1fr;
  }
  .profil-seite {
    position: static;
  }
}

/* Referenzen, Ausbau 07.10.2026 */
.felder {
  list-style: none;
  margin: var(--raum-s) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.felder li {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--farbe-schwarz);
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--farbe-rahmen);
  border-radius: 999px;
  background: var(--farbe-weiss);
  transition: background var(--transition), border-color var(--transition);
}

.felder li:hover {
  background: var(--farbe-gelb);
  border-color: var(--farbe-gelb);
}

.abschluss-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* lange Werte (Namen statt Zahlen) in der Bilanz-Liste etwas kleiner */
.bilanz-liste .bilanz-wert {
  max-width: 100%;
}

@media (max-width: 900px) {
  .bilanz-liste .bilanz-wert {
    white-space: normal;
  }
}

.bilanz-liste.bilanz-namen {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.bilanz-namen .bilanz-wert {
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem);
  white-space: normal;
}

@media (max-width: 600px) {
  .bilanz-liste.bilanz-namen {
    grid-template-columns: 1fr;
  }
}

/* Kontakt, Ausbau 07.10.2026: Ablauf links, Formular rechts */
.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--raum-m);
  align-items: start;
}

.kontakt-info h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
}

.ablauf {
  list-style: none;
  counter-reset: ablauf;
  margin: var(--raum-s) 0;
  padding: 0;
}

.ablauf li {
  counter-increment: ablauf;
  position: relative;
  padding: 0 0 1.1rem 2.75rem;
  color: var(--farbe-grau);
  max-width: 48ch;
}

.ablauf li::before {
  content: counter(ablauf);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--farbe-gelb);
  color: var(--farbe-schwarz);
  border-radius: 4px;
}

.ablauf strong {
  color: var(--farbe-schwarz);
}

.kontakt-direkt {
  padding-top: var(--raum-s);
  border-top: 1px solid var(--farbe-rahmen);
  line-height: 1.9;
}

.kontakt-formular {
  background: var(--farbe-weiss);
  border-radius: 10px;
  padding: var(--raum-m) var(--raum-s);
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.04), 0 24px 44px -28px rgba(13, 13, 13, 0.3);
}

@media (max-width: 860px) {
  .kontakt-raster {
    grid-template-columns: 1fr;
  }
}

/* Perspektiven, Ausbau 08.10.2026: Positionen als große Aussagen mit Haarlinien */
.positionen {
  list-style: none;
  margin: var(--raum-m) 0 0;
  padding: 0;
  border-top: 1px solid var(--farbe-schwarz);
}

.position {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--raum-m);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--farbe-rahmen);
  align-items: start;
}

.position h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
  max-width: 22ch;
}

.position p {
  margin: 0.25rem 0 0;
}

.position:hover h3 {
  background: linear-gradient(transparent 70%, var(--farbe-gelb) 70%, var(--farbe-gelb) 92%, transparent 92%) no-repeat;
  background-size: 100% 100%;
}

@media (max-width: 760px) {
  .position {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Doppelten Aufruf vermeiden: hat die Seite schon einen Abschluss-Block,
   entfällt der Erstgespräch-Link im Fuß. */
body:has(.abschluss) .fuss-cta {
  display: none;
}

@media (max-width: 600px) {
  .zielgruppen li,
  .felder li {
    border-radius: 12px;
  }
}

/* ---------------------------------------------------------------------
   Kontaktseite, 08.10.2026: Visitenkarten im Seitenkopf (nach Bildvorlage
   vorlagen/*.webp). Drei Karten in Gelb, Schwarz, Weiß, Blindprägung und
   Papierstruktur rein in CSS; die weiße Karte trägt die echten Kontaktdaten.
   Ruhezustand ohne JS: gestapelt (weiße Karte oben, lesbar). main.js fächert
   die Karten einmal beim Laden auf.
   --------------------------------------------------------------------- */

.seitenkopf-karten {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--raum-m);
  align-items: center;
  padding-bottom: var(--raum-l);
}

.vk-stapel {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 600 / 470;
  container-type: inline-size;
  justify-self: center;
}

.vk {
  position: absolute;
  width: 62%;
  aspect-ratio: 85 / 55;
  left: 19%;
  top: 22%;
  border-radius: 3px;
  overflow: hidden;
  container-type: inline-size;
  transform: translate(var(--vk-x, 0), var(--vk-y, 0)) rotate(var(--vk-r, 0deg));
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 600ms ease;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 18px 40px -14px rgba(0, 0, 0, 0.85);
}

.vk::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.vk-gelb { background: #E9E25A; z-index: 1; --vk-r: -2deg; }
.vk-schwarz { background: #1B1B1A; z-index: 2; --vk-r: 1.5deg; transition-delay: 90ms; }
.vk-schwarz::before { mix-blend-mode: screen; opacity: 0.09; }
.vk-weiss { background: #F7F6F2; z-index: 3; transition-delay: 180ms; }

.vk-stapel.ist-gefaechert .vk-gelb { --vk-x: 4%; --vk-y: -42%; --vk-r: 0deg; }
.vk-stapel.ist-gefaechert .vk-schwarz { --vk-x: 33%; --vk-y: 18%; --vk-r: 0deg; }
.vk-stapel.ist-gefaechert .vk-weiss { --vk-x: -28%; --vk-y: 50%; --vk-r: 0deg; }

.vk-stapel.ist-gefaechert .vk:hover {
  transform: translate(var(--vk-x), calc(var(--vk-y) - 3%)) rotate(var(--vk-r));
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4), 0 30px 60px -16px rgba(0, 0, 0, 0.95);
  transition-delay: 0ms;
}

/* Blindprägung */
.vk-praegung {
  position: absolute;
  left: 6%;
  bottom: 4%;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.8;
  font-size: 40cqw;
}

.vk-gelb .vk-praegung {
  color: #E9E25A;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.55), 1px 1px 1px rgba(80, 72, 0, 0.28), 2px 3px 5px rgba(80, 72, 0, 0.14);
}

.vk-schwarz .vk-praegung {
  color: #1B1B1A;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.08), 1px 1px 2px rgba(0, 0, 0, 0.9), 2px 3px 6px rgba(0, 0, 0, 0.6);
}

/* CI-X: auf beiden Karten blind geprägt, zwei überlappende Balken wie Pflaster.
   Licht kommt global von oben links; da die Balken gedreht sind, liegen die
   Schatten-Offsets je Balken auf der lokalen Achse (45° -> x, -45° -> y). */
.vk-x {
  position: absolute;
  width: 11cqw;
  height: 11cqw;
  right: 8%;
  top: 12%;
}

.vk-x::before,
.vk-x::after,
.vk-mini-x::before,
.vk-mini-x::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 22%;
  margin-top: -11%;
  transform: rotate(45deg);
}

.vk-x::before,
.vk-x::after {
  border-radius: 1px;
}

.vk-x::after,
.vk-mini-x::after {
  transform: rotate(-45deg);
}

.vk-gelb .vk-x::before,
.vk-gelb .vk-x::after {
  background: linear-gradient(135deg, #EEE86C, #E9E25A 55%, #E2DA4E);
}

.vk-gelb .vk-x::before {
  box-shadow:
    inset 0.8px 0 0 rgba(255, 255, 255, 0.55),
    inset -0.8px 0 0 rgba(110, 100, 0, 0.22),
    -1.4px 0 1px rgba(255, 255, 255, 0.55),
    1.4px 0 1.5px rgba(80, 72, 0, 0.32),
    3px 0 5px rgba(80, 72, 0, 0.14);
}

.vk-gelb .vk-x::after {
  box-shadow:
    inset 0 0.8px 0 rgba(255, 255, 255, 0.55),
    inset 0 -0.8px 0 rgba(110, 100, 0, 0.22),
    0 -1.4px 1px rgba(255, 255, 255, 0.55),
    0 1.4px 1.5px rgba(80, 72, 0, 0.32),
    0 3px 5px rgba(80, 72, 0, 0.14);
}

.vk-schwarz .vk-x::before,
.vk-schwarz .vk-x::after {
  background: linear-gradient(135deg, #232322, #1B1B1A 55%, #161615);
}

.vk-schwarz .vk-x::before {
  box-shadow:
    inset 0.8px 0 0 rgba(255, 255, 255, 0.07),
    inset -0.8px 0 0 rgba(0, 0, 0, 0.5),
    -1.4px 0 1px rgba(255, 255, 255, 0.08),
    1.4px 0 2px rgba(0, 0, 0, 0.9),
    3px 0 6px rgba(0, 0, 0, 0.6);
}

.vk-schwarz .vk-x::after {
  box-shadow:
    inset 0 0.8px 0 rgba(255, 255, 255, 0.07),
    inset 0 -0.8px 0 rgba(0, 0, 0, 0.5),
    0 -1.4px 1px rgba(255, 255, 255, 0.08),
    0 1.4px 2px rgba(0, 0, 0, 0.9),
    0 3px 6px rgba(0, 0, 0, 0.6);
}

/* weiße Karte mit Kontaktdaten */
.vk-weiss {
  display: flex;
  flex-direction: column;
  padding: 7% 7.5%;
  color: #141414;
  text-align: left;
}

.vk-weiss > span,
.vk-fuss > span {
  display: block;
}

.vk-name {
  font-size: 10cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.vk-rolle {
  font-size: 4.1cqw;
  line-height: 1.35;
  color: #4A4943;
  margin-top: 0.4em;
  margin-bottom: 1em;
  white-space: nowrap;
}

.vk-adresse {
  font-size: 4.5cqw;
  line-height: 1.45;
  color: #2A2A28;
  margin-top: auto;
}

.vk-weiss .vk-fuss {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4%;
  font-size: 4.5cqw;
  line-height: 1.45;
  color: #2A2A28;
  margin-top: 6%;
}

.vk-fuss a {
  color: inherit;
  text-decoration: none;
}

.vk-fuss a:hover {
  text-decoration: underline;
  text-decoration-color: var(--farbe-gelb);
  text-decoration-thickness: 2px;
}

.vk-web {
  font-weight: 600;
}

/* Weiße Karte: X als gelbe Heißfolie, größer und mit feiner Kante + Schatten,
   damit Gelb auf Hellgrau trägt. Gleiche Pflaster-Überlappung wie die
   Prägungen, Schatten-Offsets wieder auf der lokalen Achse je Balken. */
.vk-mini-x {
  position: absolute !important;
  right: 7%;
  top: 8%;
  width: 9.5cqw;
  height: 9.5cqw;
}

.vk-mini-x::before,
.vk-mini-x::after {
  border-radius: 1px;
  background: linear-gradient(135deg, #F4EC52, #E9DF2A 50%, #DCD21C);
}

.vk-mini-x::before {
  box-shadow:
    inset 0.8px 0 0 rgba(255, 255, 255, 0.6),
    inset -0.8px 0 0 rgba(120, 108, 0, 0.35),
    1.2px 0 1.5px rgba(90, 80, 0, 0.35),
    2.5px 0 4px rgba(90, 80, 0, 0.15);
}

.vk-mini-x::after {
  box-shadow:
    inset 0 0.8px 0 rgba(255, 255, 255, 0.6),
    inset 0 -0.8px 0 rgba(120, 108, 0, 0.35),
    0 1.2px 1.5px rgba(90, 80, 0, 0.35),
    0 2.5px 4px rgba(90, 80, 0, 0.15);
}

/* Diagonale bleibt Hintergrund, kein Rasterelement */
.seitenkopf-karten > .diagonal-akzent {
  position: absolute;
}

.seitenkopf-karten > .kopf-text {
  grid-column: 1;
  grid-row: 1;
}

.seitenkopf-karten > .vk-stapel {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 860px) {
  .seitenkopf-karten {
    grid-template-columns: 1fr;
  }
  .seitenkopf-karten > .vk-stapel {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Handy: Karten größer, Fächer enger, damit die Kontaktkarte lesbar bleibt */
@media (max-width: 600px) {
  .vk-stapel {
    aspect-ratio: 1 / 1;
  }
  .vk {
    width: 80%;
    left: 10%;
    top: 30%;
  }
  .vk-stapel.ist-gefaechert .vk-gelb { --vk-x: 3%; --vk-y: -48%; }
  .vk-stapel.ist-gefaechert .vk-schwarz { --vk-x: 12%; --vk-y: 4%; }
  .vk-stapel.ist-gefaechert .vk-weiss { --vk-x: -9%; --vk-y: 50%; }
}

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

/* Dozent & Speaker als Themenkatalog (Leistungen, 20.10.2026): Umschalter wie
   bei den Typischen Themen, darunter die Karten des gewählten Themenfelds. */
.katalog-umschalter {
  margin: 0 0 var(--raum-m);
}

.katalog-panel[hidden] {
  display: none;
}

.katalog .angebot p {
  margin-bottom: 1rem;
}

.katalog-punkte {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 0.95rem;
}

.katalog-punkte li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}

/* kleines CI-X als Aufzählungszeichen, um seinen Mittelpunkt gedreht;
   schwarz wie in der Broschüre, Gelb auf Weiß wäre für Icons zu schwach */
.katalog-punkte li::before,
.katalog-punkte li::after {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: calc(0.725em - 0.09rem);
  width: 0.7rem;
  height: 0.16rem;
  background: var(--farbe-schwarz);
  transform: rotate(45deg);
}

.katalog-punkte li::after {
  transform: rotate(-45deg);
}

.katalog .angebot-format {
  white-space: normal;
}

.katalog-formate {
  margin-top: var(--raum-m);
  padding-top: 1.1rem;
  border-top: 1px solid rgba(13, 13, 13, 0.14);
  max-width: 62ch;
}

.katalog-formate-titel {
  margin: 0 0 0.6rem;
  font-weight: 600;
  color: var(--farbe-schwarz);
}

.katalog-formate ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.katalog-formate li {
  font-size: 0.85rem;
  font-weight: 500;
  background: #F2F2F5;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}

.katalog-formate > p:last-child {
  font-size: 0.95rem;
  margin: 0;
}

/* Umschalter am Handy (20.10.2026): bricht er in mehrere Zeilen um, wird
   aus der Pille eine abgerundete Fläche über die volle Breite. */
@media (max-width: 560px) {
  .usecase-umschalter {
    display: flex;
    border-radius: 22px;
  }
  .usecase-tab {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Rückmeldung des Kontaktformulars (22.10.2026) */
.formular-meldung {
  margin: var(--raum-s) 0 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px solid var(--farbe-rahmen);
  background: var(--farbe-weiss);
  color: var(--farbe-schwarz);
}

.formular-meldung-laeuft {
  color: var(--farbe-grau);
}

.formular-meldung-ok {
  border-color: var(--farbe-gelb);
  background: var(--farbe-gelb);
  font-weight: 600;
}

.formular-meldung-fehler {
  border: 2px solid var(--farbe-schwarz);
  font-weight: 600;
}

.kontakt-formular button[disabled] {
  opacity: 0.6;
  cursor: wait;
}