/* Schriften: IBM Plex Sans/Mono self-hosted (siehe brand-guidelines-Skill),
   kein Google-Fonts-CDN. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("/assets/fonts/ibm-plex-serif-latin-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #000000;
  --indigo: #1B1A67;
  --blue: #3533CD;
  --off-white: #F7F7FB;
  --muted: #5B5A72;
  --mid-gray: #9A99A8;
  --light-gray: #E6E5F0;
  --violet: #8B5CF6;
  --violet-dark: #4B2E96;
  --cyan: #22D3EE;

  --font-sans: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --font-serif: "IBM Plex Serif", Georgia, serif;

  --space-tight: 2.5rem;
  --space-normal: 5rem;
  --space-loose: 7rem;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
}

/* Sticky Footer: main wächst, damit der Footer auf kurzen Seiten
   (z. B. Impressum, Datenschutz) am Seitenende bleibt statt mittig zu stehen. */
main { flex: 1 0 auto; }

/* Dezentes Hintergrund-Gitter als eigene Ebene (nicht auf body selbst),
   damit die Rand-Ausblendung nur das Muster betrifft, nie den Text. */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(27, 26, 103, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 26, 103, 0.03) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 72%);
}

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

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h2 {
  position: relative;
  padding-bottom: 0.75rem;
}
h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 3px;
  background: var(--blue);
  transition: width 0.3s ease;
}
section:hover > h2::after,
.approach__inner:hover h2::after {
  width: 5rem;
}
.approach h2::after { background: var(--cyan); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

section { padding: var(--space-normal) 1.5rem; max-width: 72rem; margin: 0 auto; }

/* Abstands-Rhythmus statt gleichförmigem Padding: eng gekoppelte Abschnitte
   rücken zusammen, vor/nach der dunklen Ansatz-Fläche entsteht bewusst Luft. */
.services { padding-bottom: var(--space-tight); }
.comparison { padding-top: var(--space-tight); padding-bottom: var(--space-loose); }
.about { padding-top: var(--space-loose); padding-bottom: var(--space-tight); max-width: 46rem; }

/* Kontakt: volle Breite + dunkle Fläche, gleicher eased Verlauf (Farbstufen/Höhe)
   wie beim Ansatz-Zeitstrahl für den nahtlosen Übergang von Weiß zu Indigo. */
.contact {
  position: relative;
  --contact-fade: 14rem;
  background-color: var(--indigo);
  background-image: linear-gradient(
    to bottom,
    #F7F7FB 0,
    #F0F0F6 calc(var(--contact-fade) * 0.125),
    #DCDBE9 calc(var(--contact-fade) * 0.25),
    #B9B9D1 calc(var(--contact-fade) * 0.375),
    #8989B1 calc(var(--contact-fade) * 0.5),
    #595891 calc(var(--contact-fade) * 0.625),
    #37367A calc(var(--contact-fade) * 0.75),
    #22216C calc(var(--contact-fade) * 0.875),
    var(--indigo) var(--contact-fade)
  );
  color: var(--off-white);
  max-width: 100%;
  margin: 0;
  padding-top: calc(var(--contact-fade) + 1rem);
  padding-bottom: var(--space-normal);
}
@media (max-width: 42rem) {
  .contact { --contact-fade: 8rem; }
}
.contact__inner { position: relative; max-width: 46rem; margin: 0 auto; text-align: center; }
.contact__kicker { color: var(--cyan); }
.contact h2 { color: #fff; }
.contact h2::after { left: 50%; transform: translateX(-50%); }
.contact__lead { max-width: 34rem; margin: 0.75rem auto 0; color: rgba(247, 247, 251, 0.82); }

.contact__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 2.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(247, 247, 251, 0.75);
}
.contact__hint-arrow {
  width: 20px;
  height: 20px;
  color: var(--cyan);
  animation: contact-hint-bounce 1.6s ease-in-out 3;
}
@keyframes contact-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.contact__trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: rgba(247, 247, 251, 0.85);
}
.contact__trust li { display: flex; align-items: center; gap: 0.5rem; }
.contact__trust svg { width: 16px; height: 16px; color: var(--cyan); flex-shrink: 0; }
@media (max-width: 30rem) {
  .contact__trust { flex-direction: column; align-items: center; gap: 0.75rem; }
}

/* Scroll-Reveal: dezentes Einblenden, kein Parallax, kein Bounce */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Card-Grid-Sections: die Karten faden gestaffelt selbst ein, die Section-Hülle nicht zusätzlich */
.services.reveal {
  opacity: 1;
  transform: none;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--off-white);
  border-bottom: 1px solid var(--light-gray);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 4px 16px rgba(27, 26, 103, 0.08);
}
.site-header__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo:hover { text-decoration: none; }
.site-header__logo .korel-logo { display: block; height: 40px; width: auto; }
@media (max-width: 42rem) {
  .site-header__logo .korel-logo { height: 32px; }
}
.site-header__nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-header__nav a {
  position: relative;
  color: var(--ink);
  padding-bottom: 3px;
}
.site-header__nav a:hover { text-decoration: none; }
.site-header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--blue);
  transition: width 0.2s ease;
}
.site-header__nav a:hover::after { width: 100%; }

.site-header__burger { display: none; }

/* Mobiles Burger-Menü: ab hier bricht die Nav sonst in mehrere Zeilen um
   (geprüft: mit allen aktuellen Nav-Punkten passiert das ab ~697px). */
@media (max-width: 56.25rem) {
  .site-header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 12;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .site-header__burger-bar {
    position: absolute;
    left: 11px;
    right: 11px;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
  }
  .site-header__burger-bar:nth-child(1) { top: 15px; }
  .site-header__burger-bar:nth-child(2) { top: 21px; }
  .site-header__burger-bar:nth-child(3) { top: 27px; }
  .site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
  }
  .site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(2) { opacity: 0; }
  .site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
  }

  .site-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 11;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--off-white);
    border-bottom: 1px solid var(--light-gray);
    box-shadow: 0 16px 32px rgba(27, 26, 103, 0.14);
    padding: 0.25rem 1.5rem 1.5rem;
    max-height: min(80vh, 32rem);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .site-header__nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
  }
  .site-header__nav a {
    padding: 1rem 0.25rem;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--light-gray);
  }
  .site-header__nav a::after { display: none; }
  .site-header__nav a[aria-current] { color: var(--violet); font-weight: 700; }

  .site-header__scrim {
    position: fixed;
    inset: 0;
    z-index: 9;
    background: rgba(27, 26, 103, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .site-header__scrim.is-visible { opacity: 1; pointer-events: auto; }
}

body.nav-open { overflow: hidden; }

/* Hero: dunkle, volle Fläche wie die Ansatz-Sektion weiter unten */
.hero {
  position: relative;
  background-color: var(--indigo);
  color: var(--off-white);
  max-width: 100%;
  margin: 0;
  padding-top: 6rem;
  padding-bottom: 4rem;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(247, 247, 251, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 247, 251, 0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
}
.hero__inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; }
.hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 2rem;
  align-items: start;
}
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  color: var(--off-white);
}
.hero .kicker { color: rgba(247, 247, 251, 0.6); }
.hero__lead { font-size: 1.125rem; color: rgba(247, 247, 251, 0.75); }

.hero__accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--cyan);
}

.hero__rotator {
  margin: 1rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.rotator {
  display: inline-block;
  color: var(--cyan);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.rotator.is-swapping { opacity: 0; transform: translateY(6px); }

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0.9rem 1.75rem;
  background: var(--cyan);
  color: var(--indigo);
  font-family: var(--font-sans);
  font-weight: 700;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hero__cta:hover {
  background: var(--off-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.3);
  text-decoration: none;
}
.hero__cta:active { transform: translateY(0); }

/* Abstraktes Knoten-Netz als Hero-Visual: zeigt "Technikverständnis", ohne
   auf Stock-Illustrationen oder generische KI-Icons zurückzugreifen. */
.hero__visual {
  position: absolute;
  top: -3rem;
  right: -5rem;
  width: 34rem;
  max-width: 65vw;
  z-index: 0;
  pointer-events: none;
}
.hero__visual::before {
  content: '';
  position: absolute;
  inset: 15% 15%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.28), transparent 70%);
  filter: blur(12px);
}
.hero__visual::after {
  content: '';
  position: absolute;
  inset: -8%;
  border: 1px dashed rgba(247, 247, 251, 0.2);
  border-radius: 50%;
  animation: orbit-spin 60s linear infinite;
}
@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}
.hero__visual svg { position: relative; width: 100%; height: auto; display: block; }
.hero__visual-lines { stroke: rgba(247, 247, 251, 0.3); }
.hero__visual .node {
  transform-origin: center;
  transform-box: fill-box;
  animation: node-pulse 3.6s ease-in-out infinite;
  pointer-events: auto;
  cursor: pointer;
  /* unsichtbarer, aber "gemalter" Stroke vergrößert die Trefferfläche fürs Hover,
     ohne den sichtbaren Kreis zu verändern (reine Deko, pointer-events greift
     auf den gestrichelten Bereich mit) */
  stroke: rgba(0, 0, 0, 0.01);
  stroke-width: 14px;
  transition: r 0.25s ease, filter 0.25s ease;
}
.hero__visual .node:hover {
  r: 13;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.65)) brightness(1.25);
}
.hero__visual .node:nth-of-type(2) { animation-delay: 0.3s; }
.hero__visual .node:nth-of-type(3) { animation-delay: 0.6s; }
.hero__visual .node:nth-of-type(4) { animation-delay: 0.9s; }
.hero__visual .node:nth-of-type(5) { animation-delay: 1.2s; }
.hero__visual .node:nth-of-type(6) { animation-delay: 1.5s; }
.hero__visual .node:nth-of-type(7) { animation-delay: 1.8s; }

@keyframes node-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

.hero .kicker,
.hero h1,
.hero__lead,
.hero__rotator,
.hero__cta {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-in 0.7s ease forwards;
}
.hero .kicker { animation-delay: 0.05s; }
.hero h1 { animation-delay: 0.15s; }
.hero__rotator { animation-delay: 0.3s; }
.hero__lead { animation-delay: 0.3s; }
.hero__cta { animation-delay: 0.45s; }

@keyframes hero-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 42rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
}


/* Card-Grid: wiederverwendet für "Was wir bieten" und "Kennen Sie das?" */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 42rem) {
  .card-grid { grid-template-columns: 1fr; }
}

.info-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  padding: 1.75rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.reveal.is-visible .info-card { opacity: 1; transform: translateY(0); }
.reveal.is-visible .info-card:nth-child(1) { transition-delay: 0s; }
.reveal.is-visible .info-card:nth-child(2) { transition-delay: 0.12s; }
.reveal.is-visible .info-card:nth-child(3) { transition-delay: 0.24s; }
.reveal.is-visible .info-card:nth-child(4) { transition-delay: 0.36s; }
.reveal.is-visible .info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(27, 26, 103, 0.14);
  border-color: var(--blue);
}

.info-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.info-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--light-gray);
  color: var(--blue);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.info-card__icon svg { width: 22px; height: 22px; }
.info-card:hover .info-card__icon {
  background: var(--blue);
  color: #fff;
  transform: scale(1.08);
}
.info-card__num {
  font-family: var(--font-mono);
  color: var(--mid-gray);
  font-size: 0.85rem;
}
.info-card h3 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.info-card p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.info-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue);
}
.info-card__link:hover { text-decoration: none; }
.info-card__arrow { display: inline-block; transition: transform 0.25s ease; }
.info-card__link:hover .info-card__arrow { transform: translateX(4px); }

/* Warum Korel Solutions */
.why__statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--blue);
  margin: 1rem 0 1.5rem;
  max-width: 36rem;
}
.why__lead {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 42rem;
  margin: 0 0 2.5rem;
}
.why__reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2.5rem;
}
.why__reasons li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.95rem;
}
.why__reasons li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet);
}
@media (max-width: 42rem) {
  .why__reasons { grid-template-columns: 1fr; }
}

/* Kennen Sie das? (kompakter Fokus-Block, weißer Hintergrund) */
.problems { padding-top: 3rem; padding-bottom: 3rem; }
.problems__inner {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}
.problems h2 { text-align: center; color: var(--indigo); }
.problems h2::after { left: 50%; transform: translateX(-50%); }
.problems__intro { margin: 0.5rem 0 0; color: var(--muted); }

.problems__quotes {
  display: inline-block;
  margin-top: 3.5rem;
  text-align: center;
  border-left: 2px solid var(--violet-dark);
  padding-left: 1.5rem;
}
.problems__quote {
  margin: 0 0 1rem;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--indigo);
  opacity: 0.6;
  transition: opacity 0.4s ease;
}
.problems__quote:last-child { margin-bottom: 0; }
.problems__quote.is-active { opacity: 1; }
.problems__highlight { color: var(--violet-dark); font-style: normal; font-weight: 700; }

.problems__closing-wrap {
  position: relative;
  margin: 5rem auto 0;
  padding: 3rem 2.5rem;
}
.problems__closing {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--indigo);
}

@media (prefers-reduced-motion: reduce) {
  .problems__quote { opacity: 1 !important; }
}

/* Stellen Sie sich vor … (Heute/Morgen-Flow-Grafik) */
.vision__inner { text-align: center; }
.vision h2 { text-align: center; }
.vision h2::after { left: 50%; transform: translateX(-50%); }
.vision__closing {
  margin: 4.5rem 0 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  color: var(--indigo);
}
.vision__closing-highlight {
  position: relative;
  color: var(--violet);
}
.vision__closing-highlight::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 2px;
  background: var(--cyan);
  border-radius: 1px;
}

/* Workflow-Animation: geschwungener S-Pfeil von "dorthin" zur Ansatz-Überschrift
   "Umsetzung". Start-/Endpunkt werden per JS live aus den tatsächlichen
   Wortpositionen berechnet (getBoundingClientRect), daher ein fixiertes,
   viewport-großes Overlay statt einer in eine Section eingebetteten Grafik. */
.workflow-arrow-spacer { height: 18rem; }
@media (max-width: 42rem) {
  .workflow-arrow-spacer { height: 11rem; }
}

.workflow-arrow__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 5; /* unter dem Sticky-Header (z-index:10), über dem Seiteninhalt */
  overflow: visible;
  visibility: hidden;
}
.workflow-arrow__overlay.is-ready { visibility: visible; }

.workflow-arrow__path {
  fill: none;
  stroke: var(--violet);
  stroke-width: 3;
  stroke-linecap: round;
}
.workflow-arrow__arrowhead { fill: var(--cyan); }

.workflow-arrow__node-bg {
  fill: #fff;
  stroke: var(--light-gray);
  stroke-width: 1.5;
  transition: stroke 0.3s ease, filter 0.3s ease;
}
.workflow-arrow__node-icon {
  color: var(--mid-gray);
  transition: color 0.3s ease;
}
.workflow-arrow__node.is-lit .workflow-arrow__node-bg {
  stroke: var(--cyan);
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55));
}
.workflow-arrow__node.is-lit .workflow-arrow__node-icon { color: var(--cyan); }

.workflow-arrow__dot {
  fill: var(--cyan);
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.7));
  opacity: 0;
}

/* Mobil (gleicher Breakpoint wie das Burger-Menü): kein Pfeil, Spacer nur noch
   ein schmaler Abstand zwischen "dorthin" und der Ansatz-Sektion. */
@media (max-width: 56.25rem) {
  .workflow-arrow__overlay { display: none; }
  .workflow-arrow-spacer { height: 2.5rem; padding-top: 0; padding-bottom: 0; }
}

.flow { margin-top: 3rem; }

.flow__toggle {
  position: relative;
  display: inline-flex;
  width: 220px;
  background: var(--light-gray);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 2rem;
}
.flow__toggle::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--indigo);
  border-radius: 999px;
  transition: transform 0.3s ease;
}
.flow.is-tomorrow .flow__toggle::before { transform: translateX(100%); }
.flow__toggle-btn {
  flex: 1;
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  cursor: pointer;
  transition: color 0.25s ease;
}
.flow:not(.is-tomorrow) .flow__toggle-btn[data-flow-state="tomorrow"],
.flow.is-tomorrow .flow__toggle-btn[data-flow-state="today"] {
  color: var(--muted);
}

/* Dezenter Klick-Hinweis am "Morgen"-Button, bis zum ersten Klick */
.flow__toggle-btn.has-hint {
  animation: flow-hint-pulse 2.2s ease-in-out infinite;
}
@keyframes flow-hint-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .flow__toggle-btn.has-hint {
    animation: none;
    box-shadow: 0 0 0 2px var(--cyan);
  }
}
.flow__hint-text {
  display: block;
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.flow__hint-text.is-visible { opacity: 1; }

.flow__graphic {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  margin: 0 auto;
}
.flow-node {
  transform: translate(var(--fx), var(--fy)) rotate(var(--fr));
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.flow.is-tomorrow .flow-node {
  transform: translate(var(--tx), var(--ty)) rotate(var(--tr));
}
.flow-node__bg {
  fill: #fff;
  stroke: var(--light-gray);
  stroke-width: 1.5;
  transition: stroke 0.6s ease;
}
.flow.is-tomorrow .flow-node__bg { stroke: var(--cyan); }

.flow-chaos-lines path {
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.2;
  stroke-opacity: 0.35;
  stroke-linecap: round;
}
.flow-chaos-lines { transition: opacity 0.6s ease; }
.flow.is-tomorrow .flow-chaos-lines { opacity: 0; }

.flow-clean-line {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.1s ease;
}
.flow.is-tomorrow .flow-clean-line { stroke-dashoffset: 0; }

.flow-endpoint {
  fill: var(--cyan);
  opacity: 0;
  transition: opacity 0.5s ease 0.6s;
  animation: flow-glow 3s ease-in-out infinite;
}
.flow.is-tomorrow .flow-endpoint { opacity: 1; }
@keyframes flow-glow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--cyan)); }
  50% { filter: drop-shadow(0 0 8px var(--cyan)); }
}

.flow__static { display: none; }

.flow__statements {
  list-style: none;
  margin: 2.5rem auto 0;
  padding: 0;
  max-width: 34rem;
  text-align: left;
}
.flow__statements li {
  position: relative;
  display: grid;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--light-gray);
}
.flow__today-text,
.flow__tomorrow-text {
  grid-area: 1 / 1;
  transition: opacity 0.5s ease;
}
.flow__today-text { opacity: 1; color: var(--muted); }
.flow__tomorrow-text { opacity: 0; color: var(--indigo); font-weight: 600; }
.flow.is-tomorrow .flow__today-text { opacity: 0; }
.flow.is-tomorrow .flow__tomorrow-text { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .flow__toggle,
  .flow__graphic { display: none; }
  .flow__static {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 36rem;
    margin: 0 auto;
  }
  .flow__static-panel { text-align: center; }
  .flow__static-label { font-weight: 700; color: var(--indigo); margin-bottom: 0.5rem; }
  .flow__static svg { max-width: 14rem; margin: 0 auto; display: block; }
  .flow-endpoint--static { opacity: 1; animation: none; }
  .flow-clean-line--static { stroke-dashoffset: 0; }
  .flow__statements li { display: block; }
  .flow__today-text,
  .flow__tomorrow-text { display: block; opacity: 1 !important; margin-bottom: 0.25rem; }
  .flow__today-text::before { content: "Heute: "; font-weight: 700; }
  .flow__tomorrow-text::before { content: "Morgen: "; font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 30rem) {
  .flow__static { grid-template-columns: 1fr; }
}

/* Anwendungsideen: interaktive Wendekarten (Problem -> Lösung) */
.flip-cards__hint-text {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.flip-cards__hint-text.is-visible { opacity: 1; }

.flip-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 42rem) {
  .flip-cards { grid-template-columns: 1fr; }
}

.flip-card {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 19rem;
  perspective: 1200px;
  cursor: pointer;
}
.flip-card:focus-visible .flip-card__face {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.flip-card__inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.flip-card[aria-pressed="true"] .flip-card__inner { transform: rotateY(180deg); }

/* Hover: Karte hebt sich leicht an und kippt an, als würde sie sich gleich drehen.
   Rechte Spalte kippt zur rechten Kante hin, linke Spalte gespiegelt zur linken
   Kante hin - gesteuert über nth-child, nicht hart pro Karte. */
.flip-cards li:nth-child(even) .flip-card:not([aria-pressed="true"]):hover .flip-card__inner {
  transform: rotateY(-7deg) translateY(-4px);
}
.flip-cards li:nth-child(even) .flip-card[aria-pressed="true"]:hover .flip-card__inner {
  transform: rotateY(173deg) translateY(-4px);
}
.flip-cards li:nth-child(odd) .flip-card:not([aria-pressed="true"]):hover .flip-card__inner {
  transform: rotateY(7deg) translateY(-4px);
}
.flip-cards li:nth-child(odd) .flip-card[aria-pressed="true"]:hover .flip-card__inner {
  transform: rotateY(187deg) translateY(-4px);
}
@media (max-width: 42rem) {
  /* Mobil: einspaltig - nur Lift, kein Kippen, wirkt ruhiger */
  .flip-cards li:nth-child(even) .flip-card:not([aria-pressed="true"]):hover .flip-card__inner,
  .flip-cards li:nth-child(odd) .flip-card:not([aria-pressed="true"]):hover .flip-card__inner {
    transform: translateY(-4px);
  }
  .flip-cards li:nth-child(even) .flip-card[aria-pressed="true"]:hover .flip-card__inner,
  .flip-cards li:nth-child(odd) .flip-card[aria-pressed="true"]:hover .flip-card__inner {
    transform: rotateY(180deg) translateY(-4px);
  }
}

.flip-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem;
  border-radius: 8px;
  border: 1px solid var(--light-gray);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Zusätzlich zu backface-visibility: in manchen WebKit/Safari-Versionen reicht
     backface-visibility allein nicht, um das Durchscheinen der verdeckten Seite
     zuverlässig zu verhindern. visibility mit Verzögerung greift exakt beim
     90°-Durchgang des Flips (halbe Flip-Dauer) und blendet die abgewandte
     Seite robust aus, unabhängig vom 3D-Compositing. */
  visibility: visible;
  transition: box-shadow 0.25s ease, visibility 0s linear 0.3s;
}
.flip-card:hover .flip-card__face--front { box-shadow: 0 12px 26px rgba(27, 26, 103, 0.12); }
.flip-card__face--front { background: var(--off-white); }
.flip-card[aria-pressed="true"] .flip-card__face--front { visibility: hidden; }
.flip-card__face--back {
  visibility: hidden;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(139, 92, 246, 0.1));
  border-color: var(--violet);
  transform: rotateY(180deg);
}
.flip-card[aria-pressed="true"] .flip-card__face--back { visibility: visible; }

.flip-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card__icon svg { width: 100%; height: 100%; }

.flip-card__text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.flip-card__title { font-size: 1.05rem; margin: 0; color: var(--indigo); }
.flip-card__desc { font-size: 0.9rem; color: var(--muted); margin: 0; }

.flip-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.flip-card__face--back .flip-card__action { color: var(--violet); }
.flip-card__action-icon { width: 14px; height: 14px; }

/* Dezenter Klick-Hinweis, bis zur ersten Interaktion */
.flip-card.has-hint .flip-card__face--front {
  animation: flip-hint-pulse 2.2s ease-in-out infinite;
}
@keyframes flip-hint-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

/* Anstups-Flip: die erste Karte dreht sich einmalig kurz an und zurück */
@keyframes flip-nudge {
  0% { transform: rotateY(0deg); }
  40% { transform: rotateY(32deg); }
  70% { transform: rotateY(-6deg); }
  100% { transform: rotateY(0deg); }
}
.flip-card__inner.is-nudging { animation: flip-nudge 1.1s ease; }

/* Dezente Icon-Mikroanimation NACH dem Umdrehen (nicht währenddessen):
   eine eigene Transform-Ebene auf dem Icon während der 3D-Rotation hebelt
   backface-visibility in Safari/Chrome teils aus, daher erst mit Verzögerung
   nach Abschluss des 0.6s-Flips starten. */
@keyframes flip-icon-pulse {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(0.72) rotate(12deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.flip-card.is-flipping .flip-card__icon { animation: flip-icon-pulse 0.55s ease 0.6s; }

@media (prefers-reduced-motion: reduce) {
  /* Kein 3D-Flip, kein Kippen, kein Anstups-Flip - stattdessen einfaches Überblenden */
  .flip-card__inner,
  .flip-card:hover .flip-card__inner,
  .flip-card[aria-pressed="true"]:hover .flip-card__inner {
    transition: none;
    transform: none !important;
    animation: none !important;
  }
  .flip-card__face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
    opacity: 0;
  }
  .flip-card__face--front { opacity: 1; transform: none; }
  .flip-card__face--back { opacity: 0; transform: none; }
  .flip-card[aria-pressed="true"] .flip-card__face--front { opacity: 0; }
  .flip-card[aria-pressed="true"] .flip-card__face--back { opacity: 1; }
  .flip-card.has-hint .flip-card__face--front {
    animation: none;
    box-shadow: 0 0 0 2px var(--cyan);
  }
}

/* Approach: dunkle Fläche für Kontrast/Asymmetrie */
.approach {
  position: relative;
  --approach-fade: 14rem;
  /* Eased Verlauf (ease-in-out, 9 Farbstufen) statt linearem Band, damit
     Weiß nahtlos und ohne sichtbare Kante/Banding ins Indigo übergeht. */
  background-color: var(--indigo);
  background-image: linear-gradient(
    to bottom,
    #F7F7FB 0,
    #F0F0F6 calc(var(--approach-fade) * 0.125),
    #DCDBE9 calc(var(--approach-fade) * 0.25),
    #B9B9D1 calc(var(--approach-fade) * 0.375),
    #8989B1 calc(var(--approach-fade) * 0.5),
    #595891 calc(var(--approach-fade) * 0.625),
    #37367A calc(var(--approach-fade) * 0.75),
    #22216C calc(var(--approach-fade) * 0.875),
    var(--indigo) var(--approach-fade),
    var(--indigo) calc(100% - var(--approach-fade)),
    #22216C calc(100% - var(--approach-fade) * 0.875),
    #37367A calc(100% - var(--approach-fade) * 0.75),
    #595891 calc(100% - var(--approach-fade) * 0.625),
    #8989B1 calc(100% - var(--approach-fade) * 0.5),
    #B9B9D1 calc(100% - var(--approach-fade) * 0.375),
    #DCDBE9 calc(100% - var(--approach-fade) * 0.25),
    #F0F0F6 calc(100% - var(--approach-fade) * 0.125),
    #F7F7FB 100%
  );
  color: var(--off-white);
  max-width: 100%;
  margin: 0;
  padding-top: calc(var(--approach-fade) + 1rem);
  padding-bottom: calc(var(--approach-fade) + 1rem);
}
@media (max-width: 42rem) {
  .approach { --approach-fade: 8rem; }
}
.approach::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(247, 247, 251, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 247, 251, 0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
}
.approach__inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; }
.approach h2 { color: var(--off-white); }
.approach__subtitle { margin: 0.5rem 0 0; color: rgba(247, 247, 251, 0.65); }

/* Horizontaler Prozess-Zeitstrahl mit Icons */
.approach__timeline-wrap { position: relative; margin-top: 3.5rem; }
.approach__line {
  position: absolute;
  top: 20px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: rgba(247, 247, 251, 0.25);
}
.approach__timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.approach__timeline li {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 10rem;
  text-align: center;
  transition: transform 0.2s ease;
}
.approach__timeline li:hover { transform: translateY(-4px); }
.approach__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--indigo);
  border: 1.5px solid var(--cyan);
  color: var(--cyan);
  margin-bottom: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.approach__icon svg { width: 18px; height: 18px; }
.approach__timeline li:hover .approach__icon {
  background: var(--cyan);
  color: var(--indigo);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.5);
}
.approach__timeline h3 {
  font-size: 0.95rem;
  margin: 0 0 0.3rem;
  color: var(--off-white);
  transition: color 0.2s ease;
}
.approach__timeline li:hover h3 { color: var(--cyan); }
.approach__timeline p {
  font-size: 0.8rem;
  color: rgba(247, 247, 251, 0.6);
  margin: 0;
}
@media (max-width: 48rem) {
  .approach__line { display: none; }
  .approach__timeline { flex-direction: column; gap: 1.75rem; }
  .approach__timeline li {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    max-width: none;
    gap: 1rem;
  }
  .approach__icon { margin-bottom: 0; flex-shrink: 0; }
  .approach__text { display: flex; flex-direction: column; gap: 0.2rem; }
}

/* Anwendungsideen: Untertitel */
.use-cases__subtitle { margin: 0.5rem 0 0; color: var(--muted); max-width: 42rem; }

/* "So arbeiten wir": helle Variante des Icon-Zeitstrahls (Vergleich zur dunklen Ansatz-Sektion) */
.work__subtitle { margin: 0.5rem 0 0; color: var(--muted); }
.work__timeline-wrap { position: relative; margin-top: 3.5rem; }
.work__line {
  position: absolute;
  top: 20px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: var(--light-gray);
}
.work__timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.work__timeline li {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 11rem;
  text-align: center;
  transition: transform 0.2s ease;
}
.work__timeline li:hover { transform: translateY(-4px); }
.work__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--off-white);
  border: 1.5px solid var(--indigo);
  color: var(--indigo);
  margin-bottom: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.work__icon svg { width: 18px; height: 18px; }
.work__timeline li:hover .work__icon {
  background: var(--indigo);
  color: var(--off-white);
  box-shadow: 0 0 18px rgba(27, 26, 103, 0.25);
}
.work__timeline h3 {
  font-size: 0.95rem;
  margin: 0 0 0.3rem;
  color: var(--ink);
  transition: color 0.2s ease;
}
.work__timeline li:hover h3 { color: var(--blue); }
.work__timeline p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 48rem) {
  .work__line { display: none; }
  .work__timeline { flex-direction: column; gap: 1.75rem; }
  .work__timeline li {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    max-width: none;
    gap: 1rem;
  }
  .work__icon { margin-bottom: 0; flex-shrink: 0; }
  .work__text { display: flex; flex-direction: column; gap: 0.2rem; }
}

/* About */
.about__manifest {
  font-size: 1.25rem;
  max-width: 44rem;
}
.about__manifest p { margin: 0 0 1em; }
.about__manifest p:last-child { margin-bottom: 0; }
.about__manifest strong { color: var(--indigo); }

.about__contrast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
}
.about__contrast-card {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-top: 3px solid var(--mid-gray);
  border-radius: 10px;
  padding: 1.5rem;
  font-size: 1.05rem;
  min-width: 0; /* Grid-Item darf unter die Inhaltsbreite schrumpfen, sonst Überlauf */
  overflow-wrap: break-word;
  hyphens: auto;
}
.about__contrast-card p { margin: 0; }
.about__contrast-card--left { border-top-color: var(--violet); }
.about__contrast-card--right { border-top-color: var(--cyan); }
.about__contrast-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.6rem !important;
}
.about__contrast-card--left .about__contrast-label { color: var(--violet); }
.about__contrast-card--right .about__contrast-label { color: var(--blue); }

/* Bleiben auch auf schmalen Mobilgeräten zweispaltig (statt untereinander);
   nur Abstand, Innenabstand und Schrift werden etwas kompakter. */
@media (max-width: 42rem) {
  .about__contrast { gap: 0.6rem; }
  .about__contrast-card { padding: 0.9rem; font-size: 0.88rem; }
  .about__contrast-label { font-size: 0.68rem; margin-bottom: 0.45rem !important; }
}

.about__fusion {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: auto;
  margin: 0.75rem auto 0;
}
@media (max-width: 42rem) {
  .about__fusion { max-width: 9rem; }
}
.about__fusion-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s ease;
}
.about__fusion-line--left { stroke: var(--violet); }
.about__fusion-line--right { stroke: var(--cyan); }
.about__fusion-dot {
  fill: var(--violet);
  opacity: 0;
  transition: opacity 0.4s ease 0.7s;
}
.about__fusion.is-drawn .about__fusion-dot { opacity: 1; }

.about__unify {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--indigo);
  margin: 0.75rem 0 2rem;
}

.about__highlight { color: var(--violet); font-weight: 600; }

.about__conclusion { margin-top: 2rem; }
.about__conclusion > p { font-size: 1.1rem; }

/* Contact */
.contact__honeypot { display: none !important; }
.contact__message {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  background: var(--light-gray);
  border-left: 3px solid var(--blue);
  margin: 0 0 1.5rem;
}

/* Kontakt-Karte im App-/Apple-UI-Stil: abgerundet, weicher Schatten, dezente Farbe.
   Bleibt weiß und text-align:left, auch wenn .contact__inner den Text drumherum zentriert. */
.contact-card {
  position: relative;
  max-width: 34rem;
  margin: 2.5rem auto 0;
  padding: 2.25rem 2rem;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(139, 92, 246, 0.07), rgba(34, 211, 238, 0.07)), #fff;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 60px rgba(139, 92, 246, 0.35), 0 0 32px rgba(34, 211, 238, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.12);
  text-align: left;
  color: var(--ink);
}
@media (max-width: 30rem) {
  .contact-card { padding: 1.75rem 1.25rem; border-radius: 20px; }
}

.contact-card__progress {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.contact-wizard--js .contact-card__progress { display: flex; }
.contact-card__progress li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--light-gray);
  transition: background 0.3s ease, transform 0.3s ease;
}
.contact-card__progress li.is-active { background: var(--violet); transform: scale(1.3); }
.contact-card__progress li.is-done { background: var(--blue); }

/* Ohne JS bleiben alle Schritte als klassisches Langformular sichtbar. */
.contact-wizard__step { border: 0; margin: 0; padding: 0; }
.contact-wizard__step + .contact-wizard__step { margin-top: 2rem; }
.contact-wizard--js .contact-wizard__step { display: none; margin-top: 0; }
.contact-wizard--js .contact-wizard__step.is-active {
  display: block;
  animation: contact-step-in 0.35s ease;
}
@keyframes contact-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.contact-wizard__step legend {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--indigo);
  padding: 0;
  margin: 0 0 1.25rem;
}

.contact-wizard__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.chip span {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--light-gray);
  background: #fff;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.chip:hover span { border-color: var(--violet); }
.chip input:checked + span { border-color: var(--violet); background: var(--violet); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.field { display: grid; gap: 0.4rem; }
.field__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--mid-gray);
  border-radius: 12px;
  background: #fff;
  resize: vertical;
  min-height: 7rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(53, 51, 205, 0.15); }

.field--floating { position: relative; margin-bottom: 1.25rem; }
.field--floating:last-of-type { margin-bottom: 0; }
.field--floating input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  padding: 1.35rem 1rem 0.55rem;
  border: 1px solid var(--mid-gray);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field--floating input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(53, 51, 205, 0.15); }
.field--floating label {
  position: absolute;
  left: 1rem;
  top: 0.95rem;
  font-size: 1.05rem;
  color: var(--muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.18s ease, top 0.18s ease, color 0.18s ease;
}
.field--floating input:focus + label,
.field--floating input:not(:placeholder-shown) + label {
  top: 0.45rem;
  transform: scale(0.72);
  color: var(--blue);
}

.contact-wizard__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 1.5rem 0 0;
  cursor: pointer;
}
.contact-wizard__consent input { margin-top: 0.2rem; flex-shrink: 0; }
.contact-wizard__consent a { color: var(--blue); }

.contact-wizard__error { color: #b3261e; font-size: 0.88rem; margin: 0.85rem 0 0; }

.contact-wizard__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.contact-wizard__actions--first { justify-content: flex-end; }

.contact-wizard__back {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.6rem 0.25rem;
}
.contact-wizard__back:hover { color: var(--ink); }

.contact-wizard__next,
.contact-wizard__submit {
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-wizard__next:hover,
.contact-wizard__submit:hover {
  background: var(--indigo);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(27, 26, 103, 0.25);
}
.contact-wizard__next:active,
.contact-wizard__submit:active { transform: translateY(0); }
.contact-wizard__submit:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

.contact-wizard__success { text-align: center; padding: 1.5rem 0 0.5rem; }
.contact-wizard__check { width: 64px; height: 64px; margin: 0 auto 1rem; }
.contact-wizard__check-circle {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: contact-check-circle 0.5s ease forwards;
}
.contact-wizard__check-mark {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: contact-check-mark 0.3s ease 0.45s forwards;
}
@keyframes contact-check-circle { to { stroke-dashoffset: 0; } }
@keyframes contact-check-mark { to { stroke-dashoffset: 0; } }
.contact-wizard__success p { font-weight: 600; color: var(--indigo); margin: 0; }

/* Legal pages */
.legal { max-width: 42rem; }

/* Footer */
.site-footer { background: var(--indigo); color: var(--off-white); margin-top: 4rem; }
/* Kontakt und Footer sind beide Indigo: direkt aneinander statt mit weißem Abstand,
   nur eine feine helle Linie trennt sie. Betrifft nur Seiten, die mit #kontakt enden. */
main:has(> .contact:last-child) + .site-footer {
  margin-top: 0;
  border-top: 1px solid rgba(247, 247, 251, 0.14);
}
.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
}
.site-footer__legal { display: flex; gap: 1.5rem; }
.site-footer a {
  color: var(--off-white);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.site-footer a:hover { opacity: 1; text-decoration: underline; }