/* ==========================================================================
   Bewegung, Atmosphäre und Zierelemente
   --------------------------------------------------------------------------
   Leitgedanke: Die Seite verkauft Klarheit und Struktur. Bewegung muss das
   stützen, nicht davon ablenken. Alles läuft ruhig, in eine Richtung und
   genau einmal. Keine Dauerschleifen im Blickfeld, keine Effekte, die
   das Lesen unterbrechen.
   ========================================================================== */

/* --- Grundmuster für Einblendungen -------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--verzug, 0) * 90ms);
}

[data-reveal='links'] {
  transform: translateX(-28px);
}

[data-reveal='rechts'] {
  transform: translateX(28px);
}

[data-reveal='zoom'] {
  transform: scale(0.96);
}

[data-reveal].is-sichtbar {
  opacity: 1;
  transform: none;
}

/* Ohne JavaScript bleibt sonst alles unsichtbar — das wäre schlimmer als
   gar keine Animation. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Hero: gestaffelter Aufbau beim Laden ------------------------------- */

/* Der Hero ist der einzige Ort mit einer Ladeanimation. Ein einzelner,
   gut getakteter Auftritt trägt weiter als viele verstreute Effekte. */
.ayb-hero__eyebrow,
.ayb-hero__title,
.ayb-hero__lead,
.ayb-hero__actions {
  animation: ayb-auftritt 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ayb-hero__eyebrow { animation-delay: 120ms; }
.ayb-hero__title   { animation-delay: 220ms; }
.ayb-hero__lead    { animation-delay: 380ms; }
.ayb-hero__actions { animation-delay: 500ms; }

@keyframes ayb-auftritt {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Das Hintergrundbild fährt beim Laden minimal zurück. Die Bewegung ist so
   klein, dass sie nicht bewusst auffällt — sie nimmt dem Standbild nur die
   Starre. */
.ayb-hero__bg {
  animation: ayb-hero-ruhe 2600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ayb-hero-ruhe {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ayb-hero__eyebrow,
  .ayb-hero__title,
  .ayb-hero__lead,
  .ayb-hero__actions,
  .ayb-hero__bg {
    animation: none;
  }
}

/* --- Atmosphäre: Verlaufsflächen und Korn ------------------------------- */

/* Statt flächiger Farbe zwei weiche Lichtquellen. Erzeugt Tiefe, ohne dass
   ein zusätzliches Bild geladen werden muss. */
.ayb-section--surface {
  position: relative;
  background:
    radial-gradient(52rem 34rem at 12% 0%, rgba(42, 62, 102, 0.06), transparent 62%),
    radial-gradient(44rem 30rem at 92% 100%, rgba(42, 62, 102, 0.05), transparent 58%),
    var(--ayb-surface);
}

/* Feines Korn über dunklen Flächen. Ohne das wirken große Navy-Flächen
   digital-flach; mit Korn bekommen sie eine Materialanmutung. Das Muster ist
   als SVG eingebettet, kostet also keinen zusätzlichen Request. */
.ayb-section--navy,
.ayb-testimonial,
.ayb-hero {
  position: relative;
}

.ayb-section--navy::after,
.ayb-testimonial::after,
.ayb-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --- Zierlinie als Abschnittsmarke -------------------------------------- */

.ayb-section__head--center::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: var(--ayb-sp-md) auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ayb-navy), var(--ayb-navy-light));
}

/* --- Karten mit Tiefe --------------------------------------------------- */

[data-tilt] {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ein Lichtschein, der dem Zeiger folgt. Nur sichtbar beim Überfahren. */
[data-tilt]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 260ms ease;
  background: radial-gradient(
    22rem circle at var(--glanz-x, 50%) var(--glanz-y, 50%),
    rgba(42, 62, 102, 0.09),
    transparent 62%
  );
}

[data-tilt]:hover::before {
  opacity: 1;
}

.ayb-card {
  position: relative;
}

/* --- Kennzahlen --------------------------------------------------------- */

.ayb-kennzahlen {
  position: relative;
  padding-block: var(--ayb-sp-2xl);
  color: var(--ayb-white);
  background: var(--ayb-navy);
  overflow: hidden;
}

.ayb-kennzahlen__liste {
  display: grid;
  gap: var(--ayb-sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.ayb-kennzahl__wert {
  display: block;
  font-size: clamp(2.75rem, 1.6rem + 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ayb-white);
  /* Ziffern mit gleicher Laufweite, sonst zappelt die Zahl beim Hochzählen. */
  font-variant-numeric: tabular-nums;
}

.ayb-kennzahl__einheit {
  font-size: 0.5em;
  vertical-align: super;
  opacity: 0.7;
}

.ayb-kennzahl__label {
  display: block;
  margin-top: var(--ayb-sp-xs);
  font-size: var(--ayb-fs-small);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

.ayb-kennzahlen__trenner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Das Raster verläuft zu den Rändern hin ins Nichts, statt hart
     abgeschnitten zu werden. */
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 25%, transparent 78%);
}

/* --- Zielgruppen -------------------------------------------------------- */

/* Diese Section liegt zwischen zwei hellen Bereichen. Dunkel gesetzt gibt
   sie der Startseite Rhythmus und hebt die vier Zielgruppen deutlich
   heraus, statt sie in einer weiteren weißen Kartenreihe verschwinden zu
   lassen. */
.ayb-zielgruppen {
  position: relative;
  padding-block: var(--ayb-sp-2xl);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(56rem 40rem at 88% 8%, rgba(77, 108, 176, 0.4), transparent 62%),
    radial-gradient(46rem 34rem at 4% 96%, rgba(24, 38, 68, 0.85), transparent 58%),
    linear-gradient(155deg, #23355a 0%, var(--ayb-navy) 46%, #1b2a49 100%);
}

.ayb-zielgruppen__raster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(75% 65% at 50% 40%, #000 20%, transparent 80%);
}

.ayb-zielgruppen .ayb-container {
  position: relative;
  z-index: 1;
}

.ayb-zielgruppen__kopf {
  max-width: 44rem;
  margin-bottom: var(--ayb-sp-2xl);
}

.ayb-zielgruppen__kopf h2 {
  color: var(--ayb-white);
  font-size: var(--ayb-fs-h1);
}

.ayb-zielgruppen__kopf .ayb-lead {
  color: rgba(255, 255, 255, 0.72);
}

.ayb-eyebrow--hell {
  color: rgba(255, 255, 255, 0.55);
}

/* Zwei Spalten statt drei — vier Karten gehen so ohne Rest auf. */
.ayb-zielgruppen__liste {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  /* Der Spalt zwischen den Kacheln zeigt den Hintergrund und wirkt wie
     eine gezogene Fuge — sauberer als vier einzeln schwebende Karten. */
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--ayb-radius-lg);
  overflow: hidden;
}

.ayb-zielgruppe {
  position: relative;
  padding: var(--ayb-sp-xl) var(--ayb-sp-lg) var(--ayb-sp-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  transition: background-color var(--ayb-transition);
}

.ayb-zielgruppe:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ayb-zielgruppe__nr {
  display: block;
  margin-bottom: var(--ayb-sp-sm);
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  /* Konturschrift statt Füllung: Die Nummer ordnet, ohne mit der
     Überschrift um Aufmerksamkeit zu konkurrieren. */
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.32);
  transition: -webkit-text-stroke-color var(--ayb-transition), color var(--ayb-transition);
}

.ayb-zielgruppe:hover .ayb-zielgruppe__nr {
  color: rgba(255, 255, 255, 0.1);
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.6);
}

.ayb-zielgruppe__titel {
  margin-bottom: var(--ayb-sp-sm);
  font-size: var(--ayb-fs-h3);
  color: var(--ayb-white);
}

.ayb-zielgruppe__text {
  margin: 0;
  font-size: var(--ayb-fs-small);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
}

/* Linie, die beim Überfahren von links einläuft. */
.ayb-zielgruppe__linie {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ayb-white), rgba(255, 255, 255, 0.2));
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ayb-zielgruppe:hover .ayb-zielgruppe__linie {
  width: 100%;
}

.ayb-zielgruppen__fuss {
  margin-top: var(--ayb-sp-xl);
  margin-bottom: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
}

.ayb-zielgruppen__fuss a {
  color: var(--ayb-white);
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

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

/* --- Schaltflächen mit Lichtstreifen ------------------------------------ */

.ayb-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ayb-btn--primary::after,
.ayb-btn--light::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  z-index: -1;
  width: 60%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: left 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ayb-btn--primary:hover::after,
.ayb-btn--light:hover::after {
  left: 130%;
}

.ayb-btn--light::after {
  background: linear-gradient(90deg, transparent, rgba(42, 62, 102, 0.12), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .ayb-btn::after {
    display: none;
  }
}

/* --- Rechtstexte -------------------------------------------------------- */

.ayb-recht__kopf {
  padding-block: var(--ayb-sp-2xl) var(--ayb-sp-xl);
  background:
    radial-gradient(46rem 30rem at 18% 0%, rgba(42, 62, 102, 0.08), transparent 62%),
    var(--ayb-surface);
  border-bottom: 1px solid var(--ayb-border);
}

.ayb-recht__kopf h1 {
  max-width: 20ch;
}

.ayb-recht__stand {
  margin: 0;
  font-size: var(--ayb-fs-small);
  color: var(--ayb-text-light);
}

/* Verzeichnis links, Text rechts. Unterhalb von 1000 px klappt das
   Verzeichnis über den Text — dort wäre eine schmale Spalte unlesbar. */
.ayb-recht__raster {
  display: grid;
  gap: var(--ayb-sp-xl);
  grid-template-columns: 260px minmax(0, 1fr);
  padding-block: var(--ayb-sp-2xl);
}

@media (max-width: 1000px) {
  .ayb-recht__raster {
    grid-template-columns: 1fr;
    gap: var(--ayb-sp-lg);
  }
}

.ayb-recht__inhalt {
  align-self: start;
  /* Läuft beim Scrollen mit — bei 40 Abschnitten ist das der Unterschied
     zwischen Suchen und Finden. */
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: var(--ayb-sp-sm);
  font-size: var(--ayb-fs-small);
}

@media (max-width: 1000px) {
  .ayb-recht__inhalt {
    position: static;
    max-height: none;
    padding: var(--ayb-sp-md);
    background: var(--ayb-surface);
    border-radius: var(--ayb-radius);
  }
}

.ayb-recht__inhalt-titel {
  margin-bottom: var(--ayb-sp-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ayb-text-light);
}

.ayb-recht__inhalt ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ayb-toc;
}

.ayb-recht__inhalt li {
  counter-increment: ayb-toc;
}

.ayb-recht__inhalt a {
  display: flex;
  gap: 0.6rem;
  padding: 0.375rem 0;
  color: var(--ayb-text);
  text-decoration: none;
  line-height: 1.45;
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
  transition: color var(--ayb-transition), border-color var(--ayb-transition);
}

.ayb-recht__inhalt a::before {
  content: counter(ayb-toc);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ayb-text-light);
}

.ayb-recht__inhalt a:hover {
  color: var(--ayb-navy);
  border-left-color: var(--ayb-navy);
}

.ayb-recht__text {
  max-width: 68ch;
}

/* Abschnitte deutlich absetzen, damit der Text nicht als Wand wirkt. */
.ayb-recht__text h2 {
  margin-top: var(--ayb-sp-2xl);
  padding-top: var(--ayb-sp-md);
  border-top: 2px solid var(--ayb-border);
  font-size: var(--ayb-fs-h3);
  /* Beim Sprung aus dem Verzeichnis nicht unter die Kopfleiste rutschen. */
  scroll-margin-top: 110px;
}

.ayb-recht__text h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ayb-recht__text h3 {
  margin-top: var(--ayb-sp-lg);
  font-size: var(--ayb-fs-lead);
}

.ayb-recht__text p,
.ayb-recht__text li {
  font-size: 0.9375rem;
  line-height: 1.75;
}

.ayb-recht__text a {
  overflow-wrap: anywhere;
}

.ayb-recht__urheber {
  margin-top: var(--ayb-sp-2xl);
  padding: var(--ayb-sp-lg);
  background: var(--ayb-surface);
  border-radius: var(--ayb-radius-lg);
}

.ayb-recht__urheber h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: var(--ayb-fs-lead);
}

.ayb-recht__urheber p {
  margin: 0;
}

.ayb-footer__urheber {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  opacity: 0.8;
}

/* --- Danke-Seite -------------------------------------------------------- */

.ayb-danke {
  position: relative;
  padding-block: var(--ayb-sp-2xl);
  overflow: hidden;
  text-align: center;
}

.ayb-danke__glow {
  position: absolute;
  top: -14rem;
  left: 50%;
  width: min(70rem, 130vw);
  height: 40rem;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(42, 62, 102, 0.14), transparent 70%);
}

.ayb-danke__zeichen {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--ayb-sp-lg);
  color: var(--ayb-navy);
}

.ayb-danke__zeichen svg {
  width: 100%;
  height: 100%;
}

/* Kreis und Haken werden gezeichnet: Der Strich läuft von seiner vollen
   Länge auf null Versatz. */
.ayb-danke__kreis {
  stroke-dasharray: 227;
  stroke-dashoffset: 227;
  animation: ayb-strich 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

.ayb-danke__haken {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: ayb-strich 520ms cubic-bezier(0.22, 1, 0.36, 1) 820ms both;
}

@keyframes ayb-strich {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ayb-danke__kreis,
  .ayb-danke__haken {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.ayb-danke__titel {
  animation: ayb-auftritt 700ms cubic-bezier(0.22, 1, 0.36, 1) 1000ms both;
}

.ayb-danke__lead {
  max-width: 34rem;
  margin-inline: auto;
  animation: ayb-auftritt 700ms cubic-bezier(0.22, 1, 0.36, 1) 1120ms both;
}

.ayb-danke__ablauf {
  display: grid;
  gap: var(--ayb-sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin: var(--ayb-sp-2xl) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ayb-danke;
  text-align: left;
}

.ayb-danke__schritt {
  position: relative;
  counter-increment: ayb-danke;
  padding: var(--ayb-sp-lg);
  background: var(--ayb-white);
  border: 1px solid var(--ayb-border);
  border-radius: var(--ayb-radius-lg);
  animation: ayb-auftritt 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(1240ms + var(--i) * 130ms);
}

.ayb-danke__schritt::before {
  content: counter(ayb-danke);
  position: absolute;
  top: var(--ayb-sp-lg);
  right: var(--ayb-sp-lg);
  font-size: var(--ayb-fs-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--ayb-navy);
  opacity: 0.16;
}

.ayb-danke__schritt-zeit {
  display: inline-block;
  margin-bottom: var(--ayb-sp-sm);
  padding: 0.2rem 0.7rem;
  background: rgba(42, 62, 102, 0.08);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ayb-navy);
}

.ayb-danke__schritt h2 {
  margin-bottom: var(--ayb-sp-xs);
  font-size: var(--ayb-fs-h3);
}

.ayb-danke__schritt p {
  margin: 0;
  font-size: var(--ayb-fs-small);
}

.ayb-danke__weiter {
  margin-top: var(--ayb-sp-2xl);
  padding-top: var(--ayb-sp-xl);
  border-top: 1px solid var(--ayb-border);
}

.ayb-danke__weiter-titel {
  margin-bottom: var(--ayb-sp-md);
  font-weight: 600;
  color: var(--ayb-heading);
}

.ayb-danke__weiter-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ayb-sp-sm);
  justify-content: center;
}

.ayb-danke__direkt {
  margin-top: var(--ayb-sp-lg);
  margin-bottom: 0;
  font-size: var(--ayb-fs-small);
  color: var(--ayb-text-light);
}