/* ==========================================================================
   auditect Block-Theme, Frontend-Stylesheet
   Aufbau: Mobile First. Basis ohne Media Query, Erweiterung per min-width.
   Breakpoints: 480, 768, 1100, 1400. Keine weiteren.
   Farb- und Schrift-Tokens kommen aus theme.json als --wp--preset--*.
   ========================================================================== */

:root {
  --creme:      var(--wp--preset--color--creme, #F5F2EE);
  --sand:       var(--wp--preset--color--sand, #EBE5DA);
  --ink:        var(--wp--preset--color--ink, #211D16);
  --ink-tief:   var(--wp--preset--color--ink-tief, #17140F);
  --ink-soft:   var(--wp--preset--color--ink-soft, #5C574A);
  --linie:      var(--wp--preset--color--linie, #DCD6C9);
  --cyan:       var(--wp--preset--color--cyan, #00AACA);
  --cyan-hover: var(--wp--preset--color--cyan-hover, #0090AC);
  --gold:       var(--wp--preset--color--gold, #998867);
  --gold-text:  var(--wp--preset--color--gold-text, #6E6047);
  --blau-text:  var(--wp--preset--color--blau-text, #00768C);
  --blau-dunkel:var(--wp--preset--color--blau-dunkel, #005E70);

  --font-display: var(--wp--preset--font-family--display);
  --font-body:    var(--wp--preset--font-family--body);

  --rand: 1.25rem;                 /* seitlicher Aussenabstand, mobil */
  --breite: 76rem;                 /* maximale Inhaltsbreite */
  --breite-text: 44rem;            /* maximale Lesebreite */
  --radius-panel: 1.25rem;
  --radius-karte: 0.75rem;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-hoehe: 4.25rem;
  --sticky-cta-hoehe: 4.75rem;
}

@media (min-width: 768px)  { :root { --rand: 2rem;   --radius-panel: 1.75rem; } }
@media (min-width: 1100px) { :root { --rand: 3rem;   --nav-hoehe: 5rem; } }
@media (min-width: 1400px) { :root { --rand: 4rem; } }

/* -------------------------------------------------------------- Grundlagen */

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

body {
  background: var(--creme);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

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

/* Sprungmarke zum Hauptinhalt, erstes fokussierbares Element der Seite.
   Unsichtbar bis zum Tastaturfokus, dann oben links eingeblendet. */
.audi-skip-link {
  margin: 0;
  position: relative;
  z-index: 100;
}

.audi-skip-link a {
  position: absolute;
  top: -3.5rem;
  left: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--cyan);
  color: var(--ink);
  border-radius: var(--radius-karte);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s var(--ease);
}

.audi-skip-link a:focus-visible {
  top: 1rem;
  outline: 2px solid var(--blau-dunkel);
  outline-offset: 3px;
}

/* Sticky Handlungsaufruf, nur mobil. Reserviert Platz am Seitenende, damit
   der Balken keinen Inhalt verdeckt, unabhaengig vom Scrollstand sichtbar. */
body { padding-bottom: var(--sticky-cta-hoehe); }

.audi-sticky-cta-mobil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  background: var(--creme);
  border-top: 1px solid var(--linie);
  padding: 0.75rem var(--rand) calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.audi-sticky-cta-mobil .audi-btn {
  flex: 1 1 auto;
  text-align: center;
}

/* Auf der Startseite steuert sticky-cta.js die Sichtbarkeit: verborgen,
   solange die Schaltflaeche unter dem Hero im Bild ist. */
.has-sticky-steuerung .audi-sticky-cta-mobil {
  transition: transform 0.25s ease, visibility 0.25s;
}
.has-sticky-steuerung .audi-sticky-cta-mobil:not(.is-sichtbar) {
  transform: translateY(100%);
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .has-sticky-steuerung .audi-sticky-cta-mobil { transition: none; }
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .audi-sticky-cta-mobil { display: none; }
}

/* Innenbreite, ueberall gleich */
.audi-wrap {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.audi-lese { max-width: var(--breite-text); }

/* -------------------------------------------------------------- Bausteine */

/* Versalien-Label ueber jedem Abschnitt */
.audi-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.audi-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--gold-text);
  flex: none;
}

.audi-abschnitt {
  padding-block: clamp(3.5rem, 11vw, 6.5rem);
}
.audi-abschnitt--sand { background: var(--sand); }
.audi-abschnitt--eng  { padding-block: clamp(2.75rem, 7vw, 4.5rem); }

.audi-titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--display-mittel);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 20ch;
}

.audi-lead {
  font-size: var(--wp--preset--font-size--gross);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
}

.audi-text { margin: 0 0 1.1rem; max-width: 62ch; }
.audi-text:last-child { margin-bottom: 0; }

.audi-text--soft { color: var(--ink-soft); }

/* Aufzaehlung ohne Haken-Klischee, mit ruhigem Trennstrich */
.audi-liste { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.audi-liste li {
  padding: 0.9rem 0 0.9rem 0;
  border-top: 1px solid var(--linie);
  max-width: 60ch;
}
.audi-liste li:last-child { border-bottom: 1px solid var(--linie); }
.audi-liste b { font-weight: 600; }

/* -------------------------------------------------------------- Platzhalter
   Muessen sichtbar sein, nicht getarnt. Der Kunde soll sie sofort finden. */

.audi-ph {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gold-text);
  background: rgba(153, 136, 103, 0.09);
  border: 1px dashed var(--gold);
  border-radius: 0.35rem;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.1rem;
  max-width: 62ch;
}
.audi-ph:last-child { margin-bottom: 0; }
.audi-ph--warnung {
  color: #8A3A12;
  background: rgba(138, 58, 18, 0.07);
  border-color: #8A3A12;
  border-style: solid;
  font-weight: 600;
}

/* Bildplatzhalter, Format wie im Bauplan: FOTO, Motiv in Versalien */
.audi-fotoph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(153, 136, 103, 0.07) 0 12px,
      transparent 12px 24px
    ),
    var(--sand);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-karte);
  padding: 1.5rem;
  color: var(--gold-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.6;
}
.audi-abschnitt--sand .audi-fotoph { background-color: #E2DBCE; }
.audi-fotoph--hoch  { aspect-ratio: 3 / 4; }
.audi-fotoph--breit { aspect-ratio: 16 / 9; }

/* -------------------------------------------------------------- Schaltflaechen */

.audi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;                /* Tap-Ziel, mindestens 44 px */
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.12s var(--ease);
}
.audi-btn:active { transform: scale(0.985); }

.audi-btn--primaer { background: var(--cyan); color: var(--ink); }
.audi-btn--primaer:hover,
.audi-btn--primaer:focus-visible { background: var(--cyan-hover); color: var(--ink); }

.audi-btn--nav {
  background: var(--cyan);
  color: var(--ink);
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  font-size: 0.875rem;
}
.audi-btn--nav:hover { background: var(--cyan-hover); }

.audi-btn--hell {
  background: var(--creme);
  color: var(--ink);
}
.audi-btn--hell:hover { background: #FFFFFF; }

.audi-btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--linie);
}
.audi-btn--outline:hover,
.audi-btn--outline:focus-visible { border-color: var(--ink); background: var(--sand); }

/* .audi-btn wird sonst nur auf a-Elemente angewendet (Buttons-Block), hier
   auf echte button-Elemente. Browser-Grundformat zuruecksetzen. */
button.audi-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}

/* Textlink. Wird als Absatz um den Link gelegt, damit er im Editor
   bearbeitbar bleibt. Gestaltet wird das a-Element darin. */
p.audi-btn--text {
  display: block;
  background: none;
  min-height: 0;
  padding: 0;
  margin: 0;
  text-align: left;
}
.audi-btn--text a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--blau-text);
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  font-weight: 600;
  font-size: 0.9375rem;
}
.audi-btn--text a:hover { color: var(--blau-dunkel); }
.audi-btn--auf-dunkel a { color: #00AACA; }
.audi-btn--auf-dunkel a:hover { color: #FFFFFF; }

.audi-aktionen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 2rem;
}
@media (min-width: 480px) {
  .audi-aktionen { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem; }
}

/* -------------------------------------------------------------- Kopfbereich
   Navigation ist der Navigations-Block des Kerns. Kein eigenes JavaScript,
   das Overlay auf schmalen Bildschirmen bringt der Kern selbst mit. */

.audi-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--creme);
  border-bottom: 1px solid var(--linie);
}

.audi-nav__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--nav-hoehe);
}

.audi-nav__logo { margin-right: auto; display: flex; align-items: center; }
.audi-nav__logo img { height: 30px; width: auto; }

.audi-nav .wp-block-navigation {
  font-family: var(--font-body);
  font-size: 0.9375rem;
}
.audi-nav .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.5rem;
  transition: color 0.18s var(--ease);
}
.audi-nav .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--ink); }

/* Burger-Schaltflaeche des Kerns auf Tap-Ziel-Groesse bringen */
.audi-nav .wp-block-navigation__responsive-container-open,
.audi-nav .wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.audi-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--creme);
  color: var(--ink);
  padding: 1.5rem var(--rand) 3rem;
}
.audi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 3rem;
}
.audi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* Der CTA im Kopfbereich bleibt auf allen Breiten sichtbar */
.audi-nav__cta .wp-block-button__link { font-size: 0.875rem; padding: 0.6rem 1.15rem; }

@media (max-width: 419px) {
  /* Sehr schmale Geraete: Beschriftung kuerzen ist nicht erlaubt, deshalb
     bekommt der Knopf mehr Zeilenraum statt einer zweiten Fassung. */
  .audi-nav__cta .wp-block-button__link { padding-inline: 0.9rem; }
}

/* ==========================================================================
   Hero

   Aufbau:
     section.audi-hero-sektion   Rahmen, traegt den Abstand nach unten
       div.audi-hero             das gerundete Panel, volle Viewportbreite
         figure.audi-hero__bg    das Foto, absolut, hinter allem
         div.audi-hero__slot     reservierte Flaeche fuer 3D-Modell oder Video
         div.audi-hero__text     Headline und Einleitung, links unten
       div.audi-hero__act        Handlungsaufrufe, mittig unter dem Panel
       ul.audi-hero__marker      Vertrauensmarker

   Der Verlauf ist ein Pseudo-Element auf .audi-hero, kein eigener Block.
   Damit bleibt das Originalbild unveraendert darunter liegen.

   Mobile First: Basis gilt fuer schmale Bildschirme, Erweiterung per min-width.
   ========================================================================== */

.audi-hero-sektion {
  /* Aussenabstand zum Browserrand, damit die gerundeten Ecken sichtbar sind.
     Der Hero nutzt danach die volle Restbreite, ohne eigenes max-width. */
  width: 100%;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: clamp(12px, 2vw, 24px);
  padding-bottom: clamp(2.5rem, 7vw, 4rem);
}

@media (min-width: 480px) {
  .audi-hero-sektion {
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
  }
}

.audi-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 55dvh;
  min-height: 400px;
  border-radius: 12px;
  background: var(--creme);
  isolation: isolate;

  /* Grundlage fuer den Kipp-Effekt, siehe assets/js/hero-tilt.js */
  transform-style: preserve-3d;
  transition: transform 0.08s linear;
  will-change: transform;
}

/* Zurueckfedern beim Verlassen, langsamer und weich */
.audi-hero.is-leaving {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ------------------------------------------------------------ Hintergrundbild */

.audi-hero__bg.wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.audi-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  /* Dauerhafte Ueberdeckung, damit beim Parallax kein Rand frei wird */
  transform: translate(0, 0) scale(1.04);
  transition: transform 0.08s linear;
}

.audi-hero.is-leaving .audi-hero__bg img {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ------------------------------------------------------------ Verlauf

   Links unten deckend im warmen Fast-Schwarz, nach rechts oben vollstaendig
   transparent. Der letzte Stopp traegt die Cremefarbe der Seite mit Alpha 0,
   damit die Aufhellung farblich in den Seitengrund laeuft und nicht ins Graue
   kippt. */

.audi-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /*
   * Eine einzige Ebene, waagerecht von links nach rechts.
   * Links liegt ein leichter Schleier, damit die weisse Schrift auf dem Foto
   * lesbar bleibt. Ab etwa 65 Prozent schimmert die Cremefarbe der Seite
   * durch, ab 82 Prozent deckt sie vollstaendig. Das Foto laeuft dadurch
   * nahtlos in den Seitengrund aus.
   */
  /*
   * Schmale Bildschirme: kein Auslauf nach Creme.
   * Der Text belegt hier fast die volle Breite des Panels, ein heller
   * Bereich rechts wuerde ihn unlesbar machen. Der Verlauf hellt nur
   * leicht nach rechts auf. Den Auslauf gibt es ab 768 Pixel, dort ist
   * genug Breite dafuer.
   */
  /*
   * Zweite Ebene von unten nach oben: der Text steht unten im Panel, dort
   * kann das Foto hell sein (das Geraet auf dem Nachttisch). Der Verlauf
   * dunkelt diesen Bereich zusaetzlich ab, oben bleibt das Foto offen.
   */
  background:
    linear-gradient(
      to top,
      rgba(20, 17, 13, 0.62) 0%,
      rgba(20, 17, 13, 0.38) 45%,
      rgba(20, 17, 13, 0) 75%
    ),
    linear-gradient(
      to right,
      rgba(24, 21, 17, 0.80) 0%,
      rgba(26, 23, 18, 0.66) 60%,
      rgba(30, 27, 22, 0.58) 100%
    );
}

/* ------------------------------------------------------------ Text im Hero
   Liegt mit z-index 2 ueber dem Verlauf, der auf z-index 1 sitzt. */

.audi-hero__text {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 24px;
  max-width: 90%;
}

.audi-hero__marke {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 0.6rem;
}

.audi-hero__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 7vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}

.audi-hero__text p:not(.audi-hero__marke) {
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0.9rem 0 0;
  max-width: 46ch;
}

/* ------------------------------------------------------------ Reservierte Flaeche

   Fuer das 3D-Modell oder ein selbst gehostetes Video. Feste Seitenverhaeltnisse,
   damit beim Nachruesten kein Layout-Shift entsteht. Liegt im hellen Bereich
   rechts oben, wo der Verlauf durchscheint. Mobil ausgeblendet, dort ist kein
   Platz und der Inhalt wuerde die Headline stoeren. */

.audi-hero__slot {
  display: none;
  position: absolute;
  z-index: 2;
  top: 6%;
  right: 4%;
  width: 26%;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  /* Eigener Grund. Der Platzhalter liegt ueber dem Foto, dessen Helligkeit
     je nach Motiv wechselt. Ohne Flaeche traegt keine Schriftfarbe zuverlaessig. */
  background: rgba(23, 20, 15, 0.58);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 12px;
}
.audi-hero__slot p {
  margin: 0;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.7;
}

/* ------------------------------------------------------------ Handlungsaufrufe

   Stehen ausserhalb des gerundeten Panels, mittig unter dem Hero. */

.audi-hero__act {
  display: flex;
  /* !important noetig, sonst gewinnt die vom Kern erzeugte Regel fuer
     Flex-Gruppen (.wp-block-group.is-layout-flex) mit hoeherer Spezifitaet
     und der sekundaere Link steht neben statt unter dem Knopf, dadurch
     rechts abgeschnitten. */
  flex-direction: column !important;
  align-items: center;
  gap: 0.75rem;
  /* Mobil enger, damit die Vertrauensmarker noch im ersten Bild stehen. */
  margin-top: 28px;
  padding-inline: var(--rand);
}
@media (min-width: 768px) {
  .audi-hero__act { margin-top: 48px; }
}
.audi-hero__act .audi-cta-buttons { margin: 0; }
.audi-hero__act p.audi-btn--text { text-align: center; }

/* ------------------------------------------------------------ Vertrauensmarker */

.audi-hero__marker.wp-block-list {
  list-style: none;
  margin: clamp(1.25rem, 5vw, 2.5rem) auto 0;
  padding-inline: var(--rand);
  /* Auf schmalen Displays bewusst kein Flexbox: mehrere Anlaeufe mit
     flex-basis, min-width:0 und !important haben den Umbruch von
     "Entwickelt und gehostet in Deutschland" nicht zuverlaessig erzwungen,
     vermutlich ein Zusammenspiel aus Flex-Sizing und den echten
     Schriftmetriken. Normales Blockverhalten ist hier unzweideutig: jedes
     li ist ein eigener Block und der Text bricht innerhalb davon nach den
     ueblichen Regeln um. Ab 480px zurueck auf Flex in einer Zeile. */
  display: block !important;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.audi-hero__marker li {
  display: block;
  margin: 0.3rem 0;
}
.audi-hero__marker li::before { margin-right: 0.4rem; }

@media (min-width: 480px) {
  .audi-hero__marker.wp-block-list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.75rem;
  }
  .audi-hero__marker li { display: flex; align-items: center; margin: 0; }
  .audi-hero__marker li::before { margin-right: 0; }
}

.audi-hero__marker li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}

/* ------------------------------------------------------------ Erweiterung */

@media (min-width: 480px) {
  .audi-hero { border-radius: 20px; }
  .audi-hero__act { flex-direction: row; justify-content: center; gap: 1.25rem; }
}

@media (min-width: 768px) {
  /* Ab hier ist genug Breite da, damit das Foto sichtbar nach rechts in den
     Seitengrund auslaeuft, ohne den Text zu treffen. */
  .audi-hero::after {
    background: linear-gradient(
      to right,
      rgba(30, 27, 22, 0.84) 0%,
      rgba(30, 27, 22, 0.78) 30%,
      rgba(30, 27, 22, 0.62) 46%,
      rgba(30, 27, 22, 0.14) 64%,
      rgba(245, 242, 238, 0.20) 75%,
      rgba(245, 242, 238, 0.65) 88%,
      rgba(245, 242, 238, 1.00) 100%
    );
  }
  .audi-hero { height: 66dvh; }
  .audi-hero__text { left: 48px; bottom: 48px; max-width: 72%; }
  .audi-hero__headline { font-size: clamp(2.8rem, 5vw, 4.5rem); }
  .audi-hero__text p:not(.audi-hero__marke) { font-size: 1.125rem; }
  .audi-hero__slot { display: flex; }
}

@media (min-width: 1100px) {
  .audi-hero { height: 72dvh; }
  .audi-hero__text { max-width: 65%; }
  .audi-hero__slot { width: 22%; }
}

/* Liegt noch kein Foto vor, traegt der Platzhalter die Panelhoehe */
.audi-hero .audi-fotoph {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
}
.audi-hero:has(.audi-fotoph)::after { background: none; }
.audi-hero:has(.audi-fotoph) .audi-hero__headline,
.audi-hero:has(.audi-fotoph) .audi-hero__marke,
.audi-hero:has(.audi-fotoph) .audi-hero__text p { color: var(--ink); }

/* -------------------------------------------------------------- Vertrauensleiste */

.audi-vertrauen { background: var(--sand); border-block: 1px solid var(--linie); }
.audi-vertrauen__inner { padding-block: clamp(2rem, 5vw, 3rem); }

.audi-vertrauen__label {
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--display-klein);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  max-width: 18ch;
}

.audi-logos {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 1.25rem 1.5rem;
}
.audi-logos img {
  width: 100%;
  max-width: 8.5rem;
  height: auto;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.2s var(--ease), opacity 0.2s var(--ease);
  mix-blend-mode: multiply;
}
.audi-logos a:hover img,
.audi-logos a:focus-visible img { filter: grayscale(0); opacity: 1; }

.audi-vertrauen__presse {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

@media (min-width: 768px) {
  .audi-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .audi-vertrauen__inner {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
  }
  .audi-vertrauen__label { margin-bottom: 0; }
  .audi-vertrauen__presse { grid-column: 2; }
}

/* -------------------------------------------------------------- Funktionsweise, drei Stufen */

.audi-stufen { list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; }

.audi-stufe {
  position: relative;
  padding: 2rem 0 2rem 0;
  border-top: 1px solid var(--linie);
}
.audi-stufe:last-child { border-bottom: 1px solid var(--linie); }

.audi-stufe__ziffer {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--wp--preset--font-size--ziffer);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--gold);
  opacity: 0.16;
  display: block;
  margin-bottom: -0.35em;
  user-select: none;
}

.audi-stufe__wort {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--display-klein);
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
.audi-stufe__wort span { color: var(--blau-text); }

@media (min-width: 768px) {
  .audi-stufe {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    padding-block: 2.5rem;
  }
  .audi-stufe__ziffer { margin-bottom: 0; }
}
@media (min-width: 1100px) {
  .audi-stufe { grid-template-columns: 9rem 16rem minmax(0, 1fr); gap: 3rem; }
}

/* -------------------------------------------------------------- Bausteine

   Verlauf von Creme oben ueber sattes Cyan in der Mitte zurueck nach Creme.
   Die Uebergaenge laufen ueber je vier Stufen aus, dadurch gibt es oben und
   unten keine sichtbare Kante zum Seitengrund. */

.bausteine-section {
  position: relative;
  background: linear-gradient(
    to bottom,
    #F5F2EE 0%,
    #F5F2EE 5%,
    rgba(0, 170, 202, 0.18) 15%,
    rgba(0, 170, 202, 0.28) 30%,
    rgba(0, 170, 202, 0.28) 70%,
    rgba(0, 170, 202, 0.18) 85%,
    #F5F2EE 95%,
    #F5F2EE 100%
  );
}

/* Die Gold-Textstufe ist auf den Creme-Grund gerechnet. Auf der cyanfarbenen
   Flaeche dieser Sektion sinkt sie auf 4,2 zu 1 und faellt damit durch.
   Hier deshalb eine dunklere Stufe derselben Familie. */
.bausteine-section .audi-baustein__index,
.bausteine-section .audi-ph {
  color: #5A4E38;
}
.bausteine-section .audi-ph:not(.audi-ph--warnung) {
  border-color: #5A4E38;
  background: rgba(90, 78, 56, 0.08);
}

/* -------------------------------------------------------------- Bausteine, wechselseitig */

.audi-baustein { padding-block: clamp(3rem, 9vw, 5.5rem); }
.audi-baustein + .audi-baustein { border-top: 1px solid var(--linie); }

.audi-baustein__index {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 0.75rem;
}

.audi-baustein__titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--display-mittel);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
  max-width: 16ch;
}

.audi-baustein__bild { margin-top: 2rem; }

@media (min-width: 1100px) {
  .audi-baustein__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4.5rem;
    align-items: center;
  }
  .audi-baustein__bild { margin-top: 0; }
  /* Wechselseitiger Rhythmus, damit keine Reihe wie die vorige aussieht */
  .audi-baustein--gespiegelt .audi-baustein__text { order: 2; }
  .audi-baustein--gespiegelt .audi-baustein__bild { order: 1; }
  .audi-baustein--versetzt .audi-baustein__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* -------------------------------------------------------------- Installation, drei Schritte */

.audi-schritte {
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linie);
  border-block: 1px solid var(--linie);
}
.audi-schritt {
  background: var(--creme);
  padding: 1.75rem 0;
  position: relative;
}
.audi-abschnitt--sand .audi-schritt { background: var(--sand); }
.audi-schritt__nr {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--blau-text);
  display: block;
  margin-bottom: 0.6rem;
}
.audi-schritt h3 {
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--display-klein);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
@media (min-width: 768px) {
  .audi-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audi-schritt { padding: 2rem 1.75rem; }
  .audi-schritt:first-child { padding-left: 0; }
  .audi-schritt:last-child  { padding-right: 0; }
}

/* Der Satz, der verkauft. Steht allein. */
.audi-merksatz {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--display-mittel);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  max-width: 22ch;
  color: var(--ink);
}
.audi-merksatz em { font-style: normal; color: var(--blau-text); }

/* -------------------------------------------------------------- Datenschutz */

.audi-datenschutz__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1100px) {
  .audi-datenschutz__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; align-items: start; }
}

.audi-fakten { list-style: none; margin: 0; padding: 0; }
.audi-fakten li {
  padding: 1.15rem 0;
  border-top: 1px solid var(--linie);
  display: grid;
  gap: 0.35rem;
}
.audi-fakten li:last-child { border-bottom: 1px solid var(--linie); }
.audi-fakten dt, .audi-fakten b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.audi-fakten span { color: var(--ink-soft); font-size: 0.9375rem; }

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

.audi-zielgruppen { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 5vw, 3rem); }

.audi-zielgruppe {
  background: var(--creme);
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.audi-abschnitt--sand .audi-zielgruppe { background: var(--creme); }
.audi-zielgruppe h3 {
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--display-klein);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.audi-zielgruppe__rolle {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0;
}
.audi-zielgruppe__fuss { margin-top: auto; padding-top: 0.5rem; }

/* Die dritte Karte hat eine andere Rolle und sieht deshalb anders aus,
   nicht drei identische Karten nebeneinander. */
.audi-zielgruppe--nebenmarkt {
  background: transparent;
  border-style: dashed;
  border-color: var(--gold);
}

@media (min-width: 768px) {
  .audi-zielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audi-zielgruppe--nebenmarkt { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
  .audi-zielgruppe--nebenmarkt > * { margin: 0; }
  .audi-zielgruppe--nebenmarkt .audi-zielgruppe__text { flex: 1 1 24rem; }
}

/* -------------------------------------------------------------- App und Dashboard */

.audi-app__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1100px) {
  .audi-app__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
  .audi-app__bild { order: 2; }
}
.audi-app__bild img { border-radius: var(--radius-panel); width: 100%; }

/* Nur mobil (unter 768px): Bild vor den Text ziehen, damit nicht erst drei
   Absaetze am Stueck kommen, bevor ueberhaupt ein Bild auftaucht. Zwischen
   768px und 1100px (Tablet, noch einspaltig) bleibt es wie bisher, ab
   1100px greift ohnehin schon die eigene order-Regel oben. */
@media (max-width: 767px) {
  .audi-app__bild { order: -1; }
}

/* -------------------------------------------------------------- FAQ
   Basis ist der Details-Block des Kerns, also natives <details>/<summary>.
   Ohne JavaScript bedienbar, per Tastatur bedienbar, ohne ARIA-Bastelei. */

.audi-faq { margin-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--linie); }

.audi-faq .wp-block-details {
  border-bottom: 1px solid var(--linie);
  padding: 0;
}

.audi-faq .wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.audi-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.audi-faq .wp-block-details > summary::marker { content: ""; }

.audi-faq .wp-block-details > summary::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--blau-text);
  border-bottom: 1.5px solid var(--blau-text);
  transform: rotate(-45deg);
  transition: transform 0.22s var(--ease);
}
.audi-faq .wp-block-details[open] > summary::before { transform: rotate(45deg); }

.audi-faq .wp-block-details > :not(summary) { max-width: 62ch; }
.audi-faq .wp-block-details > :last-child { margin-bottom: 1.5rem; }

@media (min-width: 768px) {
  .audi-faq .wp-block-details > summary { font-size: 1.1875rem; }
}

/* -------------------------------------------------------------- Abbinder */

.audi-abbinder { padding-block: clamp(2rem, 5vw, 3.5rem); }

/* Gleiche Rundung und Grundform wie .audi-cta__karte direkt darunter, damit
   beide als zusammengehoeriges Paar wirken statt als eckiger Vollflaechen-
   Balken gefolgt von einer abgerundeten Karte. Feedback 21.09.2026: Flaeche
   in Firmenblau statt Ink, damit sich die Karte bewusst vom neutral-dunklen
   CTA-Panel darunter absetzt. --blau-dunkel statt dem helleren --cyan, weil
   Creme-Text auf Cyan nur 2,47 zu 1 erreicht, auf --blau-dunkel dagegen
   6,64 zu 1. */
.audi-abbinder__karte {
  background: var(--blau-dunkel);
  color: var(--creme);
  border-radius: var(--radius-panel);
  padding: clamp(3rem, 9vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
}
.audi-abbinder__satz {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 5.2vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.audi-abbinder__satz strong { font-weight: 800; }
.audi-abbinder__satz .audi-akzent { color: var(--cyan); }

/* -------------------------------------------------------------- Abschluss-CTA */

.audi-cta { padding-block: clamp(3rem, 8vw, 5rem); }

.audi-cta__karte {
  position: relative;
  overflow: hidden;
  background: var(--ink-tief);
  color: var(--creme);
  border-radius: var(--radius-panel);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
}

/* Ruhige Wellenform im Hintergrund der Abschlusskarte.
   Lokales Daten-SVG, kein externer Request, keine Animation. */
.audi-cta__karte::before {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: 78%;
  min-width: 22rem;
  aspect-ratio: 400 / 140;
  opacity: 0.22;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140' fill='none' stroke='%2300AACA' stroke-width='1.1'%3E%3Cpath d='M0 40 Q25 12 50 40 T100 40 T150 40 T200 40 T250 40 T300 40 T350 40 T400 40'/%3E%3Cpath d='M0 70 Q25 26 50 70 T100 70 T150 70 T200 70 T250 70 T300 70 T350 70 T400 70' opacity='.75'/%3E%3Cpath d='M0 100 Q25 78 50 100 T100 100 T150 100 T200 100 T250 100 T300 100 T350 100 T400 100' opacity='.5'/%3E%3C/svg%3E");
}

.audi-cta__inhalt { position: relative; z-index: 1; }

.audi-cta__titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--display-mittel);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  max-width: 16ch;
}
.audi-cta__text { color: rgba(245, 242, 238, 0.78); max-width: 46ch; margin: 0; }

.audi-cta__belege {
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.audi-cta__belege li { border-top: 1px solid rgba(245, 242, 238, 0.2); padding-top: 1rem; }
.audi-cta__belege dt, .audi-cta__belege b {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.4rem;
}
.audi-cta__belege span { color: rgba(245, 242, 238, 0.82); font-size: 0.9375rem; }

.audi-cta__karte .audi-ph {
  color: #D8C79E;
  border-color: #D8C79E;
  background: rgba(216, 199, 158, 0.1);
}

@media (min-width: 768px) {
  .audi-cta__belege { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

/* -------------------------------------------------------------- Fussbereich */

.audi-footer {
  background: var(--ink);
  color: rgba(245, 242, 238, 0.78);
  padding-block: clamp(3rem, 8vw, 5rem) 2rem;
  font-size: 0.9375rem;
}
.audi-footer a { color: rgba(245, 242, 238, 0.78); text-decoration: none; }
.audi-footer a:hover { color: #FFFFFF; text-decoration: underline; }

.audi-footer__oben { display: grid; gap: 2.5rem; }
.audi-footer__logo img { height: 34px; width: auto; }
.audi-footer__claim { margin: 1rem 0 0; max-width: 32ch; }

.audi-footer__spalte h2 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1rem;
}
.audi-footer__spalte ul { list-style: none; margin: 0; padding: 0; }
.audi-footer__spalte li { margin-bottom: 0.6rem; }
.audi-footer__spalte a { display: inline-flex; align-items: center; min-height: 2.25rem; }

.audi-footer__unten {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 242, 238, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: 0.875rem;
  color: rgba(245, 242, 238, 0.6);
}
.audi-footer__unten p { margin: 0; }

/*
 * Tap-Ziele mindestens 44 Pixel hoch, ohne das Schriftbild zu veraendern.
 * Die Flaeche waechst unsichtbar ueber ein Pseudo-Element.
 */
.audi-footer__spalte a,
.audi-footer__unten a { position: relative; }
.audi-footer__spalte a::after,
.audi-footer__unten a::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}
.audi-footer__unten a::after { inset: -14px 0; }

.audi-footer__hinweis {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: 0.8125rem;
  color: rgba(245, 242, 238, 0.6);
  max-width: var(--breite-text);
}
.audi-footer__hinweis + .audi-footer__unten { margin-top: 1.5rem; }

.audi-footer .audi-ph {
  color: #D8C79E;
  border-color: #D8C79E;
  background: rgba(216, 199, 158, 0.1);
}

@media (min-width: 768px) {
  .audi-footer__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
}
@media (min-width: 1100px) {
  .audi-footer__oben { grid-template-columns: 22rem repeat(3, minmax(0, 1fr)); gap: 3.5rem; }
}

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

.audi-rechtstext { padding-block: clamp(3rem, 8vw, 5rem); }
.audi-rechtstext h1 {
  margin-bottom: 2rem;
  /* "Datenschutzerklaerung" ist auf schmalen Handys breiter als der
     Bildschirm und die Seite scrollt seitlich. Unter rund 500 Pixel
     Breite wird die Schrift deshalb etwas kleiner, darueber unveraendert. */
  font-size: min(var(--wp--preset--font-size--display-gross), 9vw);
}
.audi-rechtstext h2 { margin: 2.5rem 0 0.75rem; font-size: var(--wp--preset--font-size--display-klein); }
.audi-rechtstext p, .audi-rechtstext li { max-width: var(--breite-text); }

/* -------------------------------------------------------------- Bewegung */

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

@media print {
  .audi-nav, .audi-cta, .audi-footer { display: none; }
}

/* -------------------------------------------------------------- Navigation, Umschaltpunkt
   Der Kern schaltet den Navigations-Block bei 600 px von Overlay auf Zeile um.
   Fuer diese Seite ist das zu frueh, das Menue soll bis 1100 px im Overlay
   bleiben. Die Basisregeln unten sind spezifischer als die Kernregeln und
   gelten deshalb ohne Media Query, die Erweiterung folgt per min-width. */

.audi-nav .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: flex;
}
.audi-nav .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
  display: none;
}

@media (min-width: 1100px) {
  .audi-nav .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }
  .audi-nav .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: flex;
    position: static;
    width: auto;
    background: transparent;
    padding: 0;
  }
}

.audi-nav__logo.wp-block-image { margin: 0 auto 0 0; }
.audi-nav__logo.wp-block-image a { display: block; }

/* -------------------------------------------------------------- Feinschliff
   Der Kern legt zwischen Bloecken einen Standardabstand. In eigenen Rastern
   wuerde der die Spalten verschieben, deshalb hier zuruecksetzen. */

.audi-vertrauen__inner > *,
.audi-stufen > *,
.audi-stufe > *,
.audi-schritte > *,
.audi-datenschutz__grid > *,
.audi-app__grid > *,
.audi-baustein__inner > *,
.audi-zielgruppen > *,
.audi-zielgruppe > *,
.audi-footer__oben > *,
.audi-aktionen > * {
  margin-block-start: 0;
}

.audi-fotoph p { margin: 0; max-width: 32ch; }

.audi-logos li { display: flex; align-items: center; margin: 0; }
.audi-logos a { display: block; width: 100%; }
.audi-logos .audi-ph { margin: 0; font-size: 0.8125rem; text-transform: none; letter-spacing: 0; }

.audi-fakten .audi-ph { text-transform: none; letter-spacing: 0; }

.audi-cta__belege .audi-ph {
  display: block;
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.audi-vertrauen__label + .wp-block-list { margin-top: 0; }

/* Der Kern erzeugt fuer Bilder eine figure mit eigenem Aussenabstand. */
.audi-app__bild .wp-block-image,
.audi-footer__logo.wp-block-image { margin: 0; }

/* Ueberschriften in eigenen Karten sollen den Abstand aus der Karte erben. */
.audi-zielgruppe > * + * { margin-top: 0; }
.audi-zielgruppe .audi-ph { margin-bottom: 0; }

/* Suchfeld auf den Rechtstext- und Suchseiten */
.wp-block-search__input {
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--creme);
  color: var(--ink);
}

/* -------------------------------------------------------------- Zwischen-CTA */

.audi-cta-zwischen { padding-block: clamp(2rem, 5vw, 3rem); }
.audi-cta-zwischen .audi-wrap { justify-content: center; }

/* -------------------------------------------------------------- Problemkarten
   Versetzt statt drei gleiche Karten nebeneinander. */

.audi-karten {
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.audi-karte {
  border-top: 1px solid var(--linie);
  padding: 1.75rem 0;
}
.audi-karte__zahl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--wp--preset--font-size--display-mittel);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--blau-text);
  margin: 0 0 0.75rem;
}
.audi-karte__zahl.audi-ph {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--gold-text);
}
.audi-karte h3 {
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--display-klein);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
.audi-karte > * { margin-block-start: 0; }

@media (min-width: 768px) {
  .audi-karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.5rem;
    align-items: start;
    margin-bottom: 2rem;
  }
  .audi-karte { padding: 1.75rem 0 0; }
  /* Leichter Versatz, damit die Reihe nicht wie ein Kartenraster wirkt.
     Ueber margin statt transform, sonst bleibt eine leere Flaeche stehen. */
  .audi-karte:nth-child(2) { margin-top: 2.25rem; }
  .audi-karte:nth-child(3) { margin-top: 4.5rem; }
}

/* ---------------------------------------------------------- Stimmen-Karten
   Drei gleichwertige Aussagen, zentriert nebeneinander, bewusst ohne den
   Versatz von .audi-karten (Feedback 21.09.2026: "das mittlere ist irgendwie
   zu tief"). */

.stimmen-karten {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
/* Der Block-Editor-Kern setzt bei layout:flow einen margin-block-start auf
   jedes Kind ausser dem ersten (Standard-Blockabstand). In einem Grid mit
   eigenem "gap" summiert sich das zusaetzlich auf und schiebt Karte 2 und 3
   nach unten, die obere Trennlinie faellt dann nicht mehr auf eine Hoehe
   (siehe Feedback 21.09.2026: "das mittlere ist irgendwie zu tief" - lag
   nicht an .audi-karten, sondern an dieser Kern-Regel). */
.stimmen-karten > * { margin-block-start: 0 !important; }
.stimmen-karte {
  border-top: 1px solid var(--linie);
  padding: 1.75rem 0 0;
  max-width: 48ch;
  margin-inline: auto;
}
.stimmen-karte > * { margin-block-start: 0; }

@media (min-width: 768px) {
  .stimmen-karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.5rem;
    align-items: start;
    margin-bottom: 2rem;
  }
  .stimmen-karte { max-width: none; }
}

/* ---------------------------------------------------------- Stimmen-Karussell
   Seit 31.10.2026 auf Wunsch von Dr. Most ein Karussell. Die Klasse
   is-karussell setzt stimmen-karussell.js, ohne Skript bleibt das Raster oben.
   Mobil eine Karte mit Anschnitt der naechsten, damit das Wischen erkennbar
   ist, ab 768 Pixel drei nebeneinander. Jedes direkte Kind ist eine Folie und
   bekommt die Kartenoptik, auch ein im Editor lose eingefuegter Absatz. */

.stimmen-karten.is-karussell {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Raum fuer den Fokusrahmen beim Tastaturbedienen */
  padding-block: 4px;
}
.stimmen-karten.is-karussell::-webkit-scrollbar { display: none; }
.stimmen-karten.is-karussell:focus-visible {
  outline: 2px solid var(--blau-dunkel);
  outline-offset: 4px;
}

.stimmen-karten.is-karussell > .stimmen-folie {
  flex: 0 0 82%;
  max-width: none;
  margin-inline: 0;
  scroll-snap-align: start;
  border-top: 1px solid var(--linie);
  padding: 1.75rem 0 0;
}
.stimmen-folie .audi-lead { margin-inline: auto; }

.stimmen-nav {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.stimmen-nav[hidden] { display: none; }

.stimmen-nav__btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.stimmen-nav__btn svg { display: block; }
.stimmen-nav__btn--zurueck svg { transform: rotate(180deg); }
.stimmen-nav__btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--creme);
}
.stimmen-nav__btn:focus-visible {
  outline: 2px solid var(--blau-dunkel);
  outline-offset: 3px;
}
.stimmen-nav__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (min-width: 768px) {
  .stimmen-karten.is-karussell { gap: 2.5rem; margin-bottom: 0; }
  .stimmen-karten.is-karussell > .stimmen-folie {
    flex-basis: calc((100% - 2 * 2.5rem) / 3);
  }
}

/* -------------------------------------------------------------- Zwischentitel */

.audi-zwischentitel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--display-mittel);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: clamp(3.5rem, 9vw, 6rem) 0 1rem;
  max-width: 18ch;
}

/* -------------------------------------------------------------- Vergleichstabelle
   Mobil seitlich verschiebbar mit sichtbarem Hinweis, nicht geschrumpft. */

.audi-tabelle__hinweis {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 2rem 0 0.75rem;
}

.audi-tabelle {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
}
.audi-tabelle .wp-block-table { margin: 0; }
.audi-tabelle table {
  border-collapse: collapse;
  width: 100%;
  min-width: 44rem;
  font-size: 0.9375rem;
}
.audi-tabelle th,
.audi-tabelle td {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.audi-tabelle thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  background: var(--sand);
}
.audi-tabelle tbody td:first-child { font-weight: 600; }
/* Die eigene Spalte wird ruhig hervorgehoben, nicht mit Farbe geschrien */
.audi-tabelle th:nth-child(2),
.audi-tabelle td:nth-child(2) {
  background: rgba(0, 170, 202, 0.07);
  box-shadow: inset 2px 0 0 var(--cyan), inset -2px 0 0 var(--cyan);
}
.audi-tabelle tr:last-child td { border-bottom: 0; }

.audi-disclaimer {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  max-width: 60ch;
}

@media (min-width: 768px) {
  .audi-tabelle__hinweis { display: none; }
}

/* -------------------------------------------------------------- Begleitung */

.audi-begleitung__grid { display: grid; gap: 2rem; }
.audi-begleitung__grid > * { margin-block-start: 0; }
.audi-begleitung__bild .wp-block-image { margin: 0; }
.audi-begleitung__bild img { border-radius: var(--radius-karte); width: 100%; }
@media (min-width: 1100px) {
  .audi-begleitung__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; align-items: center; }
}

/* -------------------------------------------------------------- Zielgruppenbild */

.audi-zielgruppe__bild { margin: -1.5rem -1.5rem 1.25rem; }
.audi-zielgruppe__bild .wp-block-image { margin: 0; }
.audi-zielgruppe__bild img {
  width: 100%;
  border-radius: var(--radius-karte) var(--radius-karte) 0 0;
}
.audi-zielgruppe__bild .audi-fotoph {
  border: 0;
  border-bottom: 1px dashed var(--gold);
  border-radius: var(--radius-karte) var(--radius-karte) 0 0;
}

/* -------------------------------------------------------------- Personen */

.audi-personen { display: grid; gap: 2.5rem; margin: clamp(2.5rem, 6vw, 4rem) 0; }
.audi-person { margin: 0; }
.audi-person > * { margin-block-start: 0; }
.audi-person__bild { margin-bottom: 1.25rem; }
.audi-person__bild .wp-block-image { margin: 0; }
.audi-person__bild img { border-radius: var(--radius-karte); width: 100%; }
.audi-person h2 {
  font-size: var(--wp--preset--font-size--display-klein);
  margin: 0 0 0.25rem;
}
.audi-person__rolle {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 0.9rem;
}
@media (min-width: 768px) {
  .audi-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
}

/* Nur auf der Ueber-uns-Seite, nur mobil: das Portraetfoto samt Namenskarte
   vor den langen Einleitungstext ziehen, damit dort nicht so viel Text ohne
   Bild hintereinander steht. Ab 768px bleibt die urspruengliche Reihenfolge
   (Text, dann Personenkarte) unveraendert, hier wird nur die visuelle
   Reihenfolge per Flex-order getauscht, die Blockstruktur bleibt gleich. */
@media (max-width: 767px) {
  .audi-wrap--ueber-uns-intro { display: flex; flex-direction: column; }
  .audi-wrap--ueber-uns-intro > *:nth-child(1) { order: 1; } /* Eyebrow */
  .audi-wrap--ueber-uns-intro > *:nth-child(2) { order: 2; } /* Ueberschrift */
  .audi-wrap--ueber-uns-intro > *:nth-child(4) { order: 3; } /* Personenkarte mit Foto */
  .audi-wrap--ueber-uns-intro > *:nth-child(3) { order: 4; } /* Einleitungstext */
  .audi-wrap--ueber-uns-intro > *:nth-child(5) { order: 5; } /* Das Unternehmen */
}

/* -------------------------------------------------------------- Abschnittsfugen
   Der Kern setzt zwischen Bloecken einen Standardabstand. Zwischen zwei
   vollflaechigen Abschnitten erzeugt das einen Streifen in der Seitenfarbe
   und reisst die Farbflaechen auseinander. Die Abschnitte tragen ihren
   Abstand selbst als Innenabstand, deshalb hier auf null. */

.wp-site-blocks > *,
.entry-content.wp-block-post-content > * {
  margin-block-start: 0;
}

/* -------------------------------------------------------------- Ausrichtung
   Sicherheitsnetz. Wo ein Abschnitt doch in einem eingeschraenkten Layout
   des Kerns liegt, zieht dessen Regel jedes Kind mit auto-Rand in die Mitte.
   Diese Seite ist durchgehend linksbuendig gesetzt. */

/* Nur dort noetig, wo tatsaechlich ein eingeschraenktes Layout des Kerns
   greift. Ein pauschaler auto-Rand wuerde Kinder in Rastern auf
   Inhaltsbreite schrumpfen lassen. */
.audi-wrap.is-layout-constrained > *,
.audi-lese.is-layout-constrained > * {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.audi-wrap,
.audi-lese {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Zwischen-CTA als ruhige Fuge lesbar machen, nicht als schwebender Knopf */
.audi-cta-zwischen { border-top: 1px solid var(--linie); }
.audi-abschnitt--sand + .audi-cta-zwischen { border-top-color: transparent; }

/* -------------------------------------------------------------- Korrekturen aus dem Sichttest */

/* Der Titel der Abschlusskarte steht auf dunklem Grund und muss hell sein.
   Ohne diese Regel erbt er die Ink-Farbe aus theme.json und verschwindet. */
.audi-cta__karte .audi-cta__titel,
.audi-cta__karte h2,
.audi-cta__karte h3 { color: var(--creme); }

/* Runt-Zeilen vermeiden, einzelne Woerter am Zeilenende */
.audi-titel,
.audi-cta__titel,
.audi-zwischentitel,
.audi-vertrauen__label { text-wrap: balance; }

/* Vertrauensleiste: Logos auf eine gemeinsame optische Hoehe bringen */
.audi-logos li { min-height: 3.25rem; justify-content: flex-start; }
.audi-logos img {
  max-height: 2.75rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
}

/* Kopfbereich schmal: Logo und Knopf muessen nebeneinander in eine Zeile */
.audi-nav__logo img { height: 24px; }
.audi-nav__cta .wp-block-button__link {
  white-space: nowrap;
  font-size: 0.8125rem;
  padding: 0.6rem 1rem;
}
@media (min-width: 768px) {
  .audi-nav__logo img { height: 30px; }
  .audi-nav__cta .wp-block-button__link { font-size: 0.875rem; padding: 0.6rem 1.15rem; }
}

.audi-footer__logo img { height: 40px; }

/* Kopfbereich muss ab 375 px in eine Zeile passen. Ab 480 px wieder groesser. */
.audi-nav__logo img { height: 22px; }
.audi-nav__inner { gap: 0.5rem; }
.audi-nav__cta .wp-block-button__link { font-size: 0.75rem; padding: 0.6rem 0.85rem; }
@media (min-width: 480px) {
  .audi-nav__logo img { height: 26px; }
  .audi-nav__inner { gap: 1rem; }
  .audi-nav__cta .wp-block-button__link { font-size: 0.8125rem; padding: 0.6rem 1rem; }
}
@media (min-width: 768px) {
  .audi-nav__logo img { height: 30px; }
  .audi-nav__cta .wp-block-button__link { font-size: 0.875rem; padding: 0.6rem 1.15rem; }
}

/* Kopfbereich, Logo je nach Platz.
   Unter 480 px steht nur die Bildmarke, sonst passt der Handlungsaufruf
   nicht mehr in dieselbe Zeile und der Knopf bricht um. */

.audi-nav__logo { margin: 0 auto 0 0; display: flex; align-items: center; }
.audi-nav__logo .wp-block-image { margin: 0; }
.audi-nav__logo a { display: block; }
.audi-nav__logo--voll { display: none; }
.audi-nav__logo--icon img { height: 26px; width: auto; }

@media (min-width: 480px) {
  .audi-nav__logo--icon { display: none; }
  .audi-nav__logo--voll { display: block; }
  .audi-nav__logo--voll img { height: 26px; width: auto; }
}
@media (min-width: 768px) {
  .audi-nav__logo--voll img { height: 30px; }
}

/* Auf Mobil uebernimmt der Sticky-Balken am unteren Rand den Handlungsaufruf,
   der Kopfbereich zeigt dort nur noch Logo und Menue. Ab 768 px, wo der
   Sticky-Balken ausgeblendet ist, steht der Knopf wieder im Kopfbereich.
   !important noetig, weil der Kern fuer Flex-Gruppen eine Regel mit hoeherer
   Spezifitaet erzeugt (.wp-block-group.is-layout-flex), die sonst gewinnt und
   den Knopf trotz display:none sichtbar und am Rand abgeschnitten zeigt. */
.audi-nav__cta { display: none !important; }
@media (min-width: 768px) {
  .audi-nav__cta { display: block !important; }
}

/* Vertrauensleiste, Feinabstimmung.
   Es sind drei Logos, also drei Spalten. Die Dateien haben viel Eigenrand,
   deshalb greift eine gemeinsame Hoehe besser als eine gemeinsame Breite. */

.audi-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.audi-logos li { min-height: 4rem; }
.audi-logos img { max-height: 3.75rem; max-width: 100%; width: auto; }

@media (min-width: 768px) {
  .audi-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; }
}

/* Presse-Hinweis ueber die volle Breite der rechten Spalte */
@media (min-width: 1100px) {
  .audi-vertrauen__presse { grid-column: 2; max-width: none; }
}

/* Bewegung abschalten, wenn der Nutzer das eingestellt hat.
   Das Skript startet dann gar nicht erst, diese Regel ist die Absicherung. */
@media (prefers-reduced-motion: reduce) {
  .audi-hero,
  .audi-hero__bg img { transform: none !important; transition: none !important; }
}

/* ==========================================================================
   Partner-Leiste mit Logolauf

   Links die feststehende Headline, rechts ein endlos laufendes Band mit den
   Logos der Referenzeinrichtungen. Das Band besteht aus zwei identischen
   Saetzen, die Animation schiebt es um genau die Haelfte, dadurch entsteht
   der nahtlose Uebergang.

   Mobile First: Basis ist einspaltig, die zweite Spalte kommt ab 768 Pixel.
   ========================================================================== */

.partner-section {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 32px;
  padding: clamp(48px, 6vw, 96px) clamp(16px, 3vw, 40px);
  background: var(--creme);
  overflow: hidden;
}
.partner-section > * { margin-block-start: 0; }

.partner-section__headline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ------------------------------------------------------------ Laufband */

.partner-marquee {
  overflow: hidden;
  width: 100%;
  /* Weiches Ausblenden an beiden Seiten, damit die Logos nicht hart
     abgeschnitten wirken, sondern in den Seitengrund laufen. */
  -webkit-mask-image: linear-gradient(
    to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(
    to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.partner-marquee__track {
  display: flex;
  width: max-content;
  /*
   * Dauer haengt an der Bandbreite. Ein Satz ist durch die Wiederholungen
   * rund dreimal so breit wie die reine Logoliste (fuenf Logos), deshalb
   * braucht der Lauf entsprechend laenger, sonst wirkt er hektisch. Ergibt
   * rund 30 Pixel pro Sekunde.
   */
  animation: marquee-scroll 100s linear infinite;
}

.partner-marquee:hover .partner-marquee__track,
.partner-marquee:focus-within .partner-marquee__track {
  animation-play-state: paused;
}

.partner-marquee__set {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  padding-right: clamp(32px, 4vw, 64px);
}
.partner-marquee__set > * { margin-block-start: 0; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mit Skript: Band wird zum Scrollbereich, der Lauf kommt aus
   partner-marquee.js. So laesst es sich auf dem Handy von Hand wischen. */
.partner-marquee.is-wischbar {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.partner-marquee.is-wischbar::-webkit-scrollbar { display: none; }
.partner-marquee.is-wischbar .partner-marquee__track { animation: none; }

/* ------------------------------------------------------------ Einzelnes Logo */

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  flex-shrink: 0;
}
.partner-logo .wp-block-image { margin: 0; height: 100%; }

.partner-logo img {
  height: 100%;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  /* Graustufen, damit die Logos untereinander ruhig wirken, unabhaengig
     davon welche Farben das Original mitbringt. Hover zeigt die echten. */
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 0.3s ease, opacity 0.3s ease;
  mix-blend-mode: multiply;
}

.partner-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ------------------------------------------------------------ Erweiterung */

@media (min-width: 768px) {
  .partner-section {
    grid-template-columns: 1fr 2fr;
    gap: clamp(32px, 5vw, 80px);
  }
  .partner-section__headline { max-width: 320px; }
}

/* Ohne Bewegung: kein Lauf, das Band wird von Hand verschiebbar. */
@media (prefers-reduced-motion: reduce) {
  .partner-marquee__track { animation: none; }
  .partner-marquee {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: auto;
  }
}

/* ==========================================================================
   Problem-Sektion mit ueberlappenden Kreisen

   Links Headline und Text, rechts drei Kreise in der Staffelung der Skizze:
   oben rechts, darunter nach links versetzt, darunter wieder nach rechts.

   Die Kreisgroesse steht in --kreis und wird fuer Breite und Hoehe zugleich
   verwendet. Beide Werte sind damit immer identisch, es entsteht nie ein Oval.
   Die Versaetze rechnen mit derselben Variablen, dadurch bleibt die
   Ueberlappung auf jeder Breite gleich.

   Ueberlappung: rund 17 Prozent des Durchmessers, damit kein Text vom
   Nachbarkreis verdeckt wird. Versatz je Schritt 0,8 nach unten und 0,231
   nach links, bezogen auf den Durchmesser.

   Mobile First: Basis einspaltig, zweite Spalte ab 768 Pixel.
   ========================================================================== */

.problem-section {
  background: var(--creme);
  padding-block: clamp(64px, 8vw, 120px);
}

.problem-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.problem-section__inner > *,
.problem-section__spalte > * { margin-block-start: 0; }

/* ------------------------------------------------------------ Linke Spalte */

.problem-section__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blau-text);
  margin: 0 0 16px;
}

.problem-section__headline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(20px, 3vw, 32px);
}

.problem-section__text {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: var(--ink);
  line-height: 1.65;
  max-width: 42ch;
  margin: 0;
}

.problem-section__bild { margin-top: clamp(24px, 3vw, 40px); }
.problem-section__bild .wp-block-image { margin: 0; }
.problem-section__bild img { width: 100%; border-radius: var(--radius-karte); }

/* ------------------------------------------------------------ Kreise */

.circles-container {
  /*
   * --kreis ist der Durchmesser des kleinsten Kreises. Die beiden anderen
   * wachsen um je 20 Prozent: 1,0 zu 1,2 zu 1,44.
   *
   * Alle Versaetze rechnen mit derselben Variablen und haengen an der
   * rechten Kante. Dadurch bleibt die Anordnung auf jeder Breite gleich,
   * und Kreis 3 endet immer exakt am globalen Seitenrand, den .audi-wrap
   * ueber --rand vorgibt.
   *
   * Herleitung der Versaetze, bezogen auf --kreis = 260:
   *   Kreis 1  rechts 80,  oben   0     Mittelpunkt  -210 / 130
   *   Kreis 2  rechts 190, oben 164     Mittelpunkt  -346 / 320
   *   Kreis 3  rechts 0,   oben 365     Mittelpunkt  -187 / 552
   * Daraus Mittelpunktabstaende 234 und 281, also 52 und 62 Pixel
   * Ueberlappung, das sind rund 20 Prozent des jeweils kleineren Kreises.
   */
  --kreis: 170px;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: calc(var(--kreis) * 2.842);
}

/* Auf sehr schmalen Displays (unter rund 380px) ragt Kreis 3 sonst ueber
   den rechten Bildschirmrand hinaus. Kleinerer Basiswert schafft Luft.
   overflow:hidden bleibt auf diese Breite beschraenkt: auf breiteren
   Displays schneidet es sonst den weichen Schlagschatten der Kreise hart
   an der Containerkante ab, das sah wie ein Rendering-Fehler aus. */
@media (max-width: 374px) {
  .circles-container { --kreis: 148px; overflow: hidden; }
}

/* Der Kern setzt auf jedes Kind eines Fluss-Layouts einen oberen Abstand.
   Bei absolut positionierten Elementen addiert sich der auf top. */
.circles-container > * { margin-block-start: 0; }

.circle {
  position: absolute;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.45);

  /* Glaseffekt. Weichzeichnung wirkt nur dort, wo etwas dahinter liegt,
     also in den Ueberlappungen. Auf der einfarbigen Creme-Flaeche nicht. */
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);

  /* Vier Ebenen: sehr nah, nah, mittel, weit. */
  box-shadow:
    0 8px 24px rgba(33, 29, 22, 0.12),
    0 20px 48px rgba(33, 29, 22, 0.16),
    0 40px 80px rgba(33, 29, 22, 0.14),
    0 2px 6px rgba(33, 29, 22, 0.08);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.circle:hover {
  box-shadow:
    0 12px 32px rgba(33, 29, 22, 0.16),
    0 28px 60px rgba(33, 29, 22, 0.20),
    0 52px 96px rgba(33, 29, 22, 0.16),
    0 4px 10px rgba(33, 29, 22, 0.10);
  transform: translateY(-4px);
}
.circle > * { margin-block-start: 0; }

/* Kreis 1, oben, leicht nach links vom rechten Rand abgesetzt */
.circle--1 {
  width: var(--kreis);
  height: var(--kreis);
  top: 0;
  right: calc(var(--kreis) * 0.3077);
  background: linear-gradient(
    to right,
    rgba(0, 170, 202, 0.55) 0%,
    rgba(0, 170, 202, 0.35) 100%
  );
  color: var(--ink);
}

/* Kreis 2, 20 Prozent groesser, ragt nach links, liegt ueber beiden anderen */
.circle--2 {
  width: calc(var(--kreis) * 1.2);
  height: calc(var(--kreis) * 1.2);
  top: calc(var(--kreis) * 0.6308);
  right: calc(var(--kreis) * 0.7308);
  background: linear-gradient(
    to right,
    rgba(245, 242, 238, 0.55) 0%,
    rgba(255, 255, 255, 0.35) 100%
  );
  border: 1px solid rgba(33, 29, 22, 0.15);
  color: #211D16;
  z-index: 2;
}

/* Kreis 3, nochmals 20 Prozent groesser, endet am globalen Seitenrand */
.circle--3 {
  width: calc(var(--kreis) * 1.44);
  height: calc(var(--kreis) * 1.44);
  top: calc(var(--kreis) * 1.4038);
  right: 0;
  /* Abgedunkelte Goldstufen. Das Marken-Gold #998867 traegt weisse Schrift
     nur mit Kontrast 2,6 zu 1 und faellt damit durch WCAG AA. Diese Stufen
     bleiben in derselben Farbfamilie und tragen die Schrift. */
  background: linear-gradient(
    to right,
    rgba(130, 115, 85, 0.55) 0%,
    rgba(153, 136, 103, 0.35) 100%
  );
  /* Weiss traegt auf der durchscheinenden Goldflaeche nur 1,8 zu 1 und ist
     damit unlesbar. Ink wie bei den beiden anderen Kreisen. */
  color: var(--ink);
}

.circle__text {
  font-family: var(--font-display);
  /* Feedback 21.09.2026: sollte den Kreis gross ausfuellen statt klein zu
     wirken. */
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 11ch;
}

/* ------------------------------------------------------------ Erweiterung */

@media (min-width: 768px) {
  .problem-section__inner { grid-template-columns: 1fr 1fr; }
  .circles-container { --kreis: 190px; }
}

@media (min-width: 1100px) {
  .circles-container { --kreis: 260px; }
}

/* Ruecksprung fuer Browser ohne backdrop-filter. Dort tragen die Kreise eine
   deckendere Flaeche, sonst schimmert der Untergrund zu stark durch. */
@supports not (backdrop-filter: blur(1px)) {
  .circle--1 { background: rgba(0, 170, 202, 0.85); }
  .circle--2 { background: rgba(245, 242, 238, 0.90); }
  .circle--3 { background: rgba(153, 136, 103, 0.85); }
}

/* -------------------------------------------------------------- Shimmer am CTA

   Ein einzelner Lichtstrahl zieht beim Hover einmal durch den Knopf.
   Kein Dauerlauf. Der Knopf ist der Button-Block des Kerns, ausgegeben vom
   Pattern auditect/cta-schaltflaeche, deshalb der Kern-Selektor. */

.audi-cta-button .wp-block-button__link {
  position: relative;
  overflow: hidden;
}

.audi-cta-button .wp-block-button__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  /* Laeuft von selbst, rund eine halbe Sekunde sichtbar, dann Pause.
     Gesamtzyklus 4 Sekunden. Groesserer Wert bedeutet laengere Pause. */
  animation: shimmer-auto 4s ease-in-out infinite;
}

@keyframes shimmer-auto {
  0%   { left: -100%; opacity: 0; }
  8%   { opacity: 1; }
  42%  { left: 160%; opacity: 1; }
  50%  { left: 160%; opacity: 0; }
  100% { left: -100%; opacity: 0; }
}

@keyframes shimmer-sweep {
  0%   { left: -100%; }
  100% { left: 160%;  }
}

@media (prefers-reduced-motion: reduce) {
  .circle { transition: none; }
  .circle:hover { transform: none; }
  .audi-cta-button .wp-block-button__link::after { display: none; }
}


/* ==========================================================================
   Funktionsweise, Karussell mit drei Karten

   Ohne JavaScript stehen die drei Karten untereinander und sind vollstaendig
   lesbar. Erst das Skript setzt .is-carousel auf den Rahmen, stapelt die
   Karten uebereinander und blendet die Schaltflaeche ein.

   Die Karten liegen in einer einzigen Rasterzelle. Dadurch bestimmt die
   hoechste Karte die Hoehe, und alle drei sind gleich hoch, ohne absolute
   Positionierung.
   ========================================================================== */

.carousel {
  --karte: min(720px, 85vw);
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  /* Seitlicher Raum, damit die Kanten der hinteren Karten Platz haben. */
  padding: 0 clamp(40px, 8vw, 120px);
  /* Die zurueckliegenden Karten sind seitlich versetzt und wuerden auf
     schmalen Bildschirmen ueber den Seitenrand ragen. clip beschneidet nur
     waagerecht, anders als hidden bleibt die Achse darunter sichtbar und
     die Schatten werden oben und unten nicht abgeschnitten. */
  overflow-x: clip;
  overflow-y: visible;
}

.carousel__track {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  justify-items: center;
}

.carousel__card {
  position: relative;
  overflow: hidden;
  width: var(--karte);
  max-width: 100%;
  min-height: 420px;
  border-radius: 20px;
  /* Grundfarbe getrennt vom Verlauf. Wuerde die Kurzschreibweise background
     in den Varianten unten den Verlauf setzen, fiele die weisse Grundfarbe
     weg und die rgba-Stopps liessen die Karten dahinter durchscheinen. */
  background-color: #FFFFFF;

  box-shadow:
    0 4px 12px rgba(33, 29, 22, 0.06),
    0 12px 32px rgba(33, 29, 22, 0.10),
    0 24px 56px rgba(33, 29, 22, 0.08);
}
.carousel__card > * { margin-block-start: 0; }

/* Lichtstrahl beim Hover, dieselbe Bewegung wie am Handlungsaufruf. */
.carousel__card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  z-index: 4;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
}
.carousel__card:hover::after { animation: shimmer-sweep 0.55s ease forwards; }

/* ------------------------------------------------------------ Flaechen */

.carousel__card--1 {
  background-image: linear-gradient(
    to bottom,
    #00AACA 0%,
    rgba(0, 170, 202, 0.35) 25%,
    #FFFFFF 45%
  );
}

.carousel__card--2,
.carousel__card--3,
.carousel__card--4 {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 170, 202, 0.25) 0%,
    rgba(0, 170, 202, 0.08) 25%,
    #FFFFFF 45%
  );
}

/* ------------------------------------------------------------ Bild */

.card__image.wp-block-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Feedback 21.09.2026: bei 25% war das Foto kaum zu erkennen und darunter
     blieb viel Leerraum, weil der Text nicht annaehernd so hoch wird. */
  height: 45%;
  margin: 0;
  z-index: 0;
}
.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  opacity: 0.88;
  /* Der Auslauf beginnt spaeter, dadurch bleibt mehr vom Foto sichtbar. */
  -webkit-mask-image: linear-gradient(
    to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(
    to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0) 100%);
}

/* Bildausschnitt je Motiv, damit die Gesichter im sichtbaren Bereich liegen. */
.carousel__card--1 .card__image img { object-position: center 62%; }
.carousel__card--2 .card__image img { object-position: center 35%; }
.carousel__card--3 .card__image img { object-position: center 25%; }
.carousel__card--4 .card__image img { object-position: center 50%; }

/* ------------------------------------------------------------ Inhalt */

.card__inhalt {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  /* War clamp(6rem, 14vw, 8.5rem), passte zur alten 25%-Bildhoehe. Feste
     rem-Werte statt Prozent: padding-top rechnet Prozent immer gegen die
     Breite, nicht gegen die 45% Bildhoehe, ein Prozentwert haette hier also
     nicht zuverlaessig zur Bildkante gepasst. Naeherung fuer 45% von
     min-height 420px, mit etwas Luft. */
  padding-top: clamp(11rem, 22vw, 13.5rem);
}
.card__inhalt > * { margin-block-start: 0; }

.card__nummer {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgba(33, 29, 22, 0.18);
  margin: 0 0 0.35rem;
}

.card__titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--display-klein);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #211D16;
  margin: 0 0 0.9rem;
}

.card__text {
  font-size: 1rem;
  line-height: 1.6;
  color: #211D16;
  margin: 0 0 0.9rem;
}
/* #00768C erreicht auf dem nahezu weissen Kartengrund nur 4,17 zu 1.
   Eine Stufe dunkler, die im Theme bereits als Hover-Farbe definiert ist.
   Feedback 21.09.2026: Karte 1 war bei dieser Korrektur uebersehen worden
   und blieb beim dunklen Standard-Ink stehen, dadurch wirkte sie farblich
   inkonsistent zu den anderen beiden Karten. */
.carousel__card--1 .card__text,
.carousel__card--2 .card__text,
.carousel__card--3 .card__text,
.carousel__card--4 .card__text { color: #005E70; }
.card__text--soft { font-size: 0.9375rem; }

/* ------------------------------------------------------------ Schaltflaeche */

.carousel__nav { display: none; }

/* Die Schaltflaeche gehoert nicht zur Karte. Sie sitzt absolut am rechten
   Rand der aktiven Karte und liegt ueber allen Karten. Die genaue Position
   setzt carousel.js aus den Layoutmassen der aktiven Karte, damit sie auf
   jeder Breite an der Kante bleibt. */
@media (min-width: 768px) {
  .carousel.is-carousel .carousel__nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    margin: 0;
    /* left/top kommen aus carousel.js und markieren die Kante der aktiven
       Karte. -50% auf beiden Achsen zentriert den Knopf auf diesem Punkt,
       damit er genau auf der Kante liegt statt daneben zu schweben. */
    transform: translate(-50%, -50%);
  }
}

.carousel__btn .wp-block-button__link {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--cyan);
  /* Weiss auf dem Marken-Cyan ergibt 2,75 zu 1. Ink wie bei allen anderen
     Schaltflaechen des Themes, dort 5,99 zu 1. */
  color: var(--ink);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 170, 202, 0.40);
  transition: background 0.3s ease, transform 0.3s ease;
}
/* Feedback 21.09.2026: der Pfeil-Glyph (&#8594;) sass im Font nicht mittig
   in seinem eigenen Zeichenkasten, ein padding-left-Korrekturversatz blieb
   trotzdem sichtbar schief. Jetzt ein SVG-Pfeil: geometrisch symmetrisch um
   die eigene viewBox-Mitte, dadurch von display:flex exakt zentriert. */
.carousel__btn-icon { display: block; }
.carousel__btn .wp-block-button__link:hover {
  background: var(--blau-text);
  color: #FFFFFF;
  transform: scale(1.08);
}

/* ------------------------------------------------------------ Aktiver Zustand

   Erst wenn das Skript laeuft, wird gestapelt. */

.carousel.is-carousel .carousel__track {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.carousel.is-carousel .carousel__card {
  grid-area: 1 / 1;
  /* Nur Bewegung und Deckkraft ueberblenden. all wuerde auch die Breite
     animieren, dadurch waeren Messungen und Layout waehrend des Wechsels
     unbrauchbar. */
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.carousel.is-carousel .carousel__nav {
  display: flex;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.carousel__card.is-active {
  background-color: #FFFFFF;
  opacity: 1;
  transform: scale(1) translateX(0);
  z-index: 3;
  filter: none;
}
/* Vollstaendig deckend, es ragt nur die Kante hervor. */
.carousel__card.is-prev,
.carousel__card.is-next {
  opacity: 1;
  filter: none;
  z-index: 1;
}

/* Ab vier Karten: alles hinter der naechsten Karte ist ausgeblendet. */
.carousel__card.is-hidden {
  opacity: 0;
  z-index: 0;
  transform: scale(0.88) translateX(var(--versatz, 40%));
}
/* Der Versatz kommt aus carousel.js. Eine feste Prozentzahl kann nicht
   funktionieren: der Platz bis zur Beschnittkante haengt von der Fensterbreite
   ab, die Kartenbreite dagegen kaum. Das Skript rechnet den groessten Wert
   aus, bei dem die abgerundete Ecke gerade noch innerhalb der Kante liegt.
   Ohne Skript greift der Rueckfallwert. */
.carousel__card.is-prev { transform: scale(0.88) translateX(calc(-1 * var(--versatz, 40%))); }
.carousel__card.is-next { transform: scale(0.88) translateX(var(--versatz, 40%)); }

/* Die zurueckliegenden Karten sind Dekoration, sie duerfen weder Fokus
   noch Vorlesereihenfolge stoeren. */
.carousel.is-carousel .carousel__card.is-prev,
.carousel.is-carousel .carousel__card.is-next { pointer-events: none; }

/* Waagerechtes Wischen uebernimmt carousel.js, senkrecht scrollt die Seite. */
.carousel.is-carousel .carousel__track { touch-action: pan-y; }

@media (prefers-reduced-motion: reduce) {
  .carousel.is-carousel .carousel__card { transition: none; }
  .carousel__card::after { display: none; }
}

/* ==========================================================================
   Einrichtung in drei Schritten

   Vollflaechiger Verlauf von Cyan oben nach Creme unten. Links die drei
   Boxen untereinander, rechts das App-Mockup, das von unten in die Flaeche
   ragt und buendig mit der Unterkante abschliesst.

   Mobile First: Basis einspaltig, zweite Spalte ab 768 Pixel.
   ========================================================================== */

.setup-section {
  /*
   * Oben die abgedunkelte Blaustufe statt des Marken-Cyan. Weisse Schrift
   * auf #00AACA erreicht nur 2,3 zu 1 und faellt durch WCAG AA. #00768C ist
   * im Theme genau fuer diesen Fall definiert.
   */
  background: linear-gradient(
    to bottom,
    #00768C 0%,
    #00768C 24%,
    rgba(0, 170, 202, 0.50) 42%,
    rgba(245, 242, 238, 0.80) 65%,
    #F5F2EE 100%
  );
  padding-top: clamp(3rem, 8vw, 5rem);
  padding-bottom: 0;
  /* Das Mockup darf rechts und unten hinauslaufen. Der waagerechte Ueberlauf
     wird am body abgefangen, nicht hier, sonst waere das Bild beschnitten. */
  overflow: visible;
}

.setup-section__kopf { margin-bottom: clamp(2rem, 4vw, 3rem); }
.setup-section__kopf > * { margin-block-start: 0; }

.setup-section__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--display-mittel);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 0.75rem;
  max-width: 18ch;
}

.setup-section__sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #FFFFFF;
  margin: 0;
  max-width: 48ch;
}

.setup-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: clamp(24px, 4vw, 48px);
}
.setup-section__inner > * { margin-block-start: 0; min-width: 0; }

.setup-section__links > * { margin-block-start: 0; }
.setup-section__links .audi-merksatz { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ------------------------------------------------------------ Boxen */

.setup-boxes {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 20px);
  width: 100%;
  flex: 1 1 auto;
  max-width: 580px;
}
.setup-boxes > * { margin-block-start: 0; }

.setup-box {
  width: 100%;
  background: #FFFFFF;
  border-radius: 16px;
  padding-block: clamp(20px, 2.5vw, 32px);
  padding-inline: clamp(24px, 3vw, 40px);
  color: #211D16;
  box-shadow:
    0 4px 12px rgba(33, 29, 22, 0.06),
    0 12px 32px rgba(33, 29, 22, 0.08);
}
.setup-box > * { margin-block-start: 0; }

.setup-box__nr {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--blau-text);
  margin: 0 0 0.5rem;
}

.setup-box__titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--display-klein);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #211D16;
  margin: 0 0 0.4rem;
}

.setup-box__text {
  font-size: 1rem;
  line-height: 1.6;
  color: #211D16;
  margin: 0;
}

/* ------------------------------------------------------------ Mockup */

.setup-mockup-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  overflow: visible;
  margin-bottom: -1px;
}

@media (min-width: 768px) {
  /*
   * Das Mockup sitzt buendig in der unteren rechten Ecke und hebt den
   * globalen Seitenrand auf. calc((100% - 100vw) / 2) ist der Abstand vom
   * rechten Rand des zentrierten Inhalts bis zum Fensterrand, negativ
   * gerechnet. Damit endet das Bild genau an der Fensterkante.
   */
  .setup-section__inner { position: relative; }

  .setup-mockup-wrapper {
    position: absolute;
    bottom: 0;
    /* +40px gegenueber der buendigen Kante: Feedback 21.09.2026, Hand sollte
       ein Stueckchen nach links, nicht direkt an der Fensterkante kleben. */
    right: calc((100% - 100vw) / 2 + 40px);
    width: 50vw;
    max-height: 100%;
    align-items: flex-end;
    justify-content: flex-end;
  }
}

.setup-mockup.wp-block-image { margin: 0 0 0 auto; max-width: 680px; width: 100%; padding: 0; }
.setup-mockup img {
  /* Spiegelung entfernt: sie machte den kompletten Bildschirminhalt des
     fotografierten Telefons spiegelverkehrt und unlesbar ("Seniorenresidenz
     am See" las sich rueckwaerts). Lesbarer App-Inhalt ist wichtiger als
     die Armrichtung. */
  display: block;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  object-fit: contain;
  object-position: bottom right;
}

/* Loest das Bild nach unten rechts in den Seitengrund auf.
   Das PNG ist bereits freigestellt, der Verlauf kaschiert also keine weisse
   Flaeche, sondern nimmt der Kante die Haerte. */
.setup-mockup-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 55%,
    rgba(245, 242, 238, 0.70) 75%,
    rgba(245, 242, 238, 1.00) 100%
  );
}

@media (min-width: 768px) {
  /* Boxen bekommen ihre volle Breite, der Rest gehoert dem Mockup.
     Die Spalte trennt nur ein halber Zentimeter, rund 19 Pixel. */
  .setup-section__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * Das Mockup steht absolut und beginnt bei 50vw. Die Boxen duerfen nur so
   * breit werden, dass davor noch Luft bleibt, sonst laufen sie darunter.
   */
  .setup-boxes,
  .setup-section__links .audi-merksatz,
  .setup-section__links .audi-ph {
    max-width: min(580px, calc(50vw - var(--rand) - 24px));
  }
}

/* ==========================================================================
   Technologievergleich

   Kriterien links, drei Boxen rechts. Damit die Kriterien exakt auf Hoehe
   der zugehoerigen Zeilen stehen, liegen alle Zellen in EINEM Raster.
   Die Boxen selbst tragen display: contents, ihre Kinder werden dadurch
   direkte Rasterzellen. Rahmen und Flaeche zeichnet je ein eigenes Element,
   das ueber alle Zeilen der Spalte laeuft.

   Der Vorteil: Zeilenhoehen gelten spaltenuebergreifend. Bricht ein Text in
   einer Box um, wachsen alle drei Boxen und das Kriterium links mit.

   Mobile First: Basis gestapelt, Raster ab 768 Pixel.
   ========================================================================== */

.comparison-section {
  /*
   * Hier lag frueher ein unlizenziertes Demo-Foto unter dem Verlauf, am
   * 01.11.2026 entfernt. Fuer ein lizenziertes Motiv als Variable aus
   * inc/media.php einbinden (wie --bild-nachttisch), nie fest im Stylesheet.
   */
  position: relative;
  padding-block: clamp(3rem, 8vw, 5rem);
}

/* Der Verlauf liegt als eigene Ebene ueber dem Foto, sonst wuerde er es
   ersetzen statt es zu ueberlagern. */
.comparison-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(245, 242, 238, 0.60) 0%,
    rgba(245, 242, 238, 0.50) 55%,
    rgba(245, 242, 238, 0.45) 85%,
    rgba(0, 118, 140, 0.45) 93%,
    rgba(0, 118, 140, 0.88) 100%
  );
}

/* Alle Inhalte liegen ueber der Verlaufsebene. */
.comparison-section > * {
  position: relative;
  z-index: 1;
}

.comparison-inner { margin-top: clamp(2rem, 4vw, 3rem); }
.comparison-inner > * { margin-block-start: 0; }

/* ------------------------------------------------------------ Basis, gestapelt */

.comparison-criteria { display: none; }

.comparison-box {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: clamp(12px, 2vw, 24px);
}
.comparison-box > * { margin-block-start: 0; }
.comparison-box__rahmen { display: none; }

.comparison-box__header {
  /* Der Rahmen ist positioniert und deckt seit dem weissen Hintergrund alles
     darunter zu. Die Kopfzeile braucht deshalb dieselbe Ebene wie die Zeilen. */
  position: relative;
  z-index: 1;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 700;
  color: #211D16;
  padding: 20px 20px 12px;
  margin: 0;
  border-bottom: 1px solid rgba(33, 29, 22, 0.08);
}

.comparison-row {
  position: relative;
  z-index: 1;
  padding: 16px 20px;
  min-height: 56px;
  display: flex;
  align-items: center;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.4;
  color: #211D16;
  margin: 0;
  border-bottom: 1px solid rgba(33, 29, 22, 0.06);
  transition: background 0.25s ease;
}
.comparison-row:last-child { border-bottom: none; }
.comparison-row.is-highlighted { background: rgba(0, 170, 202, 0.10); }

/* Gestapelt traegt jede Zeile ihr Kriterium selbst, sonst waere sie
   ohne die linke Spalte nicht zuzuordnen. */
.comparison-row::before {
  content: attr(data-kriterium);
  flex: 0 0 45%;
  font-weight: 600;
  color: var(--ink-soft);
  padding-right: 1rem;
}

.comparison-box--1 {
  border: 2px solid #00AACA;
  background: #FFFFFF;
}
.comparison-box--2,
.comparison-box--3 {
  background: var(--creme);
  border: 1.5px solid rgba(33, 29, 22, 0.10);
}

/* Box 2 und 3 haben keinen Lichtstrahl, sie heben sich beim Hover leicht an. */
.comparison-box--2,
.comparison-box--3 {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.comparison-box--2:hover,
.comparison-box--3:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 24px rgba(33, 29, 22, 0.08),
    0 20px 48px rgba(33, 29, 22, 0.10);
}

/* Einmaliger Lichtstrahl kurz nach dem Laden, kein Hover, keine Schleife. */
.comparison-box--1::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: shimmer-once 0.7s ease 0.8s forwards;
}

@keyframes shimmer-once {
  0%   { left: -100%; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: 160%; opacity: 0; }
}

.comparison-section .audi-disclaimer {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  /* Der blaue Fuss beginnt erst unter dem Hinweissatz, hier traegt Ink. */
  color: var(--ink);
}

/* ------------------------------------------------------------ Raster ab 768 */

@media (min-width: 768px) {
  .comparison-inner {
    display: grid;
    grid-template-columns: 200px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    /* Zeilen muessen explizit stehen, sonst kennt das Raster keine letzte
       Linie und grid-row: 1 / -1 am Rahmen greift nur ueber die Kopfzeile. */
    grid-template-rows: auto repeat(6, auto);
    column-gap: clamp(12px, 2vw, 24px);
    align-items: stretch;
  }

  .comparison-criteria,
  .comparison-box { display: contents; }

  .comparison-criteria__kopf,
  .comparison-criterion { grid-column: 1; }
  .comparison-box--1 > * { grid-column: 2; }
  .comparison-box--2 > * { grid-column: 3; }
  .comparison-box--3 > * { grid-column: 4; }

  /* Kopfzeile und sechs Wertezeilen, feste Zuordnung statt Automatik. */
  .comparison-box__header { grid-row: 1; }
  .comparison-criterion:nth-child(1), .comparison-row:nth-child(3) { grid-row: 2; }
  .comparison-criterion:nth-child(2), .comparison-row:nth-child(4) { grid-row: 3; }
  .comparison-criterion:nth-child(3), .comparison-row:nth-child(5) { grid-row: 4; }
  .comparison-criterion:nth-child(4), .comparison-row:nth-child(6) { grid-row: 5; }
  .comparison-criterion:nth-child(5), .comparison-row:nth-child(7) { grid-row: 6; }
  .comparison-criterion:nth-child(6), .comparison-row:nth-child(8) { grid-row: 7; }

  /* Rahmen und Flaeche liegen hinter allen Zeilen der Spalte. */
  .comparison-box__rahmen {
    display: block;
    grid-row: 1 / -1;
    z-index: 0;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
  }
  /* Ab hier ist .comparison-box selbst display: contents, die Flaeche traegt
     der Rahmen. Diese Regel war es, die das Weiss der Box ueberschrieben hat. */
  .comparison-box--1 .comparison-box__rahmen {
    border: 2px solid #00AACA;
    background: #FFFFFF;
  }
  .comparison-box--2 .comparison-box__rahmen,
  .comparison-box--3 .comparison-box__rahmen {
    background: var(--creme);
    border: 1.5px solid rgba(33, 29, 22, 0.10);
  }

  /* Die Box selbst ist display: contents und kann sich nicht bewegen.
     Rahmen und Zeilen steigen deshalb einzeln, aber gemeinsam. */
  .comparison-box--2,
  .comparison-box--3 { transform: none; box-shadow: none; }

  .comparison-box--2 > *,
  .comparison-box--3 > * {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .comparison-box--2 .comparison-box__rahmen,
  .comparison-box--3 .comparison-box__rahmen {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .comparison-box--2:hover > *,
  .comparison-box--3:hover > * { transform: translateY(-4px); }
  .comparison-box--2:hover .comparison-box__rahmen,
  .comparison-box--3:hover .comparison-box__rahmen {
    box-shadow:
      0 8px 24px rgba(33, 29, 22, 0.08),
      0 20px 48px rgba(33, 29, 22, 0.10);
  }

  /* Der Lichtstrahl wandert auf den Rahmen, die Box selbst hat keine Flaeche mehr. */
  .comparison-box { border: 0; background: none; margin-bottom: 0; overflow: visible; }
  .comparison-box--1::after { content: none; }
  .comparison-box--1 .comparison-box__rahmen::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.35) 50%,
      transparent 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    animation: shimmer-once 0.7s ease 0.8s forwards;
  }

  .comparison-criteria { display: contents; }
  .comparison-criteria__kopf {
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    font-weight: 700;
    color: #211D16;
    padding: 20px 0 12px;
    margin: 0;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid transparent;
  }
  .comparison-criterion {
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    font-weight: 600;
    color: #211D16;
    padding: 16px 0;
    margin: 0;
    line-height: 1.4;
    min-height: 56px;
    display: flex;
    align-items: center;
    transition: color 0.25s ease;
  }
  .comparison-criterion.is-highlighted { color: #00768C; font-weight: 700; }

  .comparison-row::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-box--1::after,
  .comparison-box--1 .comparison-box__rahmen::after { animation: none; opacity: 0; }
  .comparison-box--2,
  .comparison-box--3,
  .comparison-box--2 > *,
  .comparison-box--3 > * { transition: none; transform: none; }
  .comparison-row { transition: none; }
  .comparison-criterion { transition: none; }
}

/* ==========================================================================
   Datenschutz

   Links das Foto als CSS-Hintergrund, das nach links ueber den Seitenrand
   bis zur Fensterkante laeuft und nach rechts in den Seitengrund auslaeuft.
   Rechts die Faktenliste auf schlichtem Creme.

   Die Bild-URL kommt als Variable aus inc/media.php, nicht fest aus dieser
   Datei, damit sie beim Umzug auf den Server nicht bricht.
   ========================================================================== */

.datenschutz-section {
  overflow: visible;
  min-height: 80vh;
  /* Ueberschreibt den Standardabstand von .audi-abschnitt. */
  padding-top: clamp(16px, 2vw, 24px);
  padding-bottom: clamp(16px, 2vw, 24px);
}

.datenschutz-section__left {
  position: relative;
  /*
   * Abstand von der Innenkante des zentrierten Inhalts bis zur Fensterkante.
   * Das Foto laeuft um diesen Betrag nach links hinaus, der Text bleibt
   * ueber das gleich grosse Innenpolster am globalen Seitenrand stehen.
   */
  --ausbruch: calc(
    (100vw - min(100vw, var(--breite) + 2 * var(--rand))) / 2 + var(--rand)
  );
  margin-left: calc(-1 * var(--ausbruch));
  padding-left: var(--ausbruch);
  padding-block: clamp(2rem, 5vw, 3.5rem);

  min-height: 80vh;
  height: 100%;

  background-image: var(--bild-nachttisch);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-blend-mode: normal;
}

/* Auslauf nach oben und unten, sanfter in das Creme hinein */
.datenschutz-section__left::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(245, 242, 238, 0.95) 0%,
    rgba(245, 242, 238, 0.40) 8%,
    rgba(245, 242, 238, 0.00) 18%,
    rgba(245, 242, 238, 0.00) 82%,
    rgba(245, 242, 238, 0.40) 92%,
    rgba(245, 242, 238, 0.95) 100%
  );
}

/* Auslauf nach rechts, spaeter einsetzend, das Foto reicht weiter herein */
.datenschutz-section__left::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Die Vorgabe war 0,00 bis 55 Prozent. Gemessen stand die Headline damit
     bei 1,2 zu 1 auf den dunklen Partien des Fotos. Der Schleier haelt jetzt
     0,60 bis zum Textende und laeuft danach wie vorgesehen aus. */
  background: linear-gradient(
    to right,
    rgba(245, 242, 238, 0.60) 0%,
    rgba(245, 242, 238, 0.58) 55%,
    rgba(245, 242, 238, 0.75) 75%,
    rgba(245, 242, 238, 0.92) 88%,
    rgba(245, 242, 238, 1.00) 100%
  );
}

/* Der Text liegt ueber beiden Verlaeufen */
.datenschutz-section__text {
  position: relative;
  z-index: 3;
}

/* Die Sekundaerfarbe des Fliesstextes traegt auf dem Foto nur 2,4 zu 1.
   In dieser Sektion deshalb die volle Ink-Stufe. */
.datenschutz-section__text .audi-lead { color: var(--ink); }
.datenschutz-section__text > * { margin-block-start: 0; }

/* Rechte Spalte bleibt schlicht, Inhalt vertikal mittig */
.datenschutz-section__right {
  position: relative;
  z-index: 2;
  background: var(--creme);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(32px, 4vw, 64px);
}
.datenschutz-section__right > * { margin-block-start: 0; }

/* Die Bildspalte soll ueber die volle Rasterhoehe laufen */
@media (min-width: 1100px) {
  .audi-datenschutz__grid { align-items: stretch; }
}

/*
 * Groessere Sektion. Erst ab 1100 Pixel, denn erst dort stehen Bild und Text
 * nebeneinander. Darunter stehen sie untereinander, und zweimal 70vh ergaeben
 * zusammen mehr als anderthalb Bildschirmhoehen Scrollweg.
 */
@media (min-width: 1100px) {
  .datenschutz-section { min-height: 80vh; }
  .datenschutz-section__left {
    min-height: 70vh;
    height: 100%;
  }
}

/* -------------------------------------------------------------- Bausteine, Bildboxen

   Alle drei Boxen exakt gleich gross. Referenz ist Baustein 01, gemessen
   572 mal 429 Pixel bei 1440 Pixel Fensterbreite. Baustein 03 lag mit
   624 mal 832 deutlich darueber, weil er ein anderes Spaltenverhaeltnis und
   das hochformatige Seitenverhaeltnis nutzte.

   Die Hoehe ist als clamp gesetzt, nicht als feste Zahl: 429 Pixel wuerden
   auf einem 375 Pixel breiten Bildschirm eine ueberhohe Box ergeben. Der
   obere Wert entspricht exakt der gemessenen Referenz, und alle drei Boxen
   tragen denselben Wert auf jeder Breite. */

.audi-baustein__bild .audi-fotoph,
.audi-baustein__bild .wp-block-image {
  width: 100%;
  height: clamp(220px, 30vw, 429px);
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 16px;
  flex-shrink: 0;
  margin: 0;
}

.audi-baustein__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gleiches Spaltenverhaeltnis wie bei den anderen beiden, sonst waere die
   Box bei Einschaetzen breiter. */
@media (min-width: 1100px) {
  .audi-baustein--versetzt .audi-baustein__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Bildausschnitt je Motiv */
.audi-baustein:nth-of-type(1) .audi-baustein__bild img { object-position: center 40%; }
.audi-baustein:nth-of-type(2) .audi-baustein__bild img { object-position: center 30%; }
.audi-baustein:nth-of-type(3) .audi-baustein__bild img { object-position: center 25%; }

/* ==========================================================================
   Fuer wen IRENE gebaut ist, zwei grosse Karten

   Jede Karte traegt das Foto flaechenfuellend, darueber unten ein Cyan-Feld,
   das nach oben weich ins Foto laeuft. Der Uebergang ist ein Verlauf ueber
   vier Stufen, damit keine sichtbare Kante entsteht.

   Solange kein Foto vorliegt, fuellt der Motiv-Platzhalter die Karte.

   Mobile First: Basis einspaltig, zwei Spalten ab 768 Pixel.
   ========================================================================== */

.fuerwen-section__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.fuerwen-section__cards > * { margin-block-start: 0; }

.fuerwen-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 520px;
  cursor: pointer;
  background: #E8E4DE;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.fuerwen-card > * { margin-block-start: 0; }

.fuerwen-card:hover,
.fuerwen-card:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 8px 24px rgba(33, 29, 22, 0.10),
    0 24px 48px rgba(33, 29, 22, 0.12);
}

/* ------------------------------------------------------------ Foto */

.fuerwen-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fuerwen-card__image .wp-block-image {
  margin: 0;
  width: 100%;
  height: 100%;
}
.fuerwen-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Ohne Foto fuellt der Motiv-Platzhalter die Karte. Der Hinweis steht oben,
   damit ihn das Cyan-Feld unten nicht verdeckt. */
.fuerwen-card__image .audi-fotoph {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  align-items: flex-start;
  padding-top: clamp(2rem, 5vw, 3rem);
}

/* ------------------------------------------------------------ Cyan-Feld */

.fuerwen-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: clamp(24px, 3vw, 40px);
  padding-top: clamp(60px, 10vw, 100px);
  background: linear-gradient(
    to bottom,
    rgba(0, 170, 202, 0.00) 0%,
    rgba(0, 170, 202, 0.55) 25%,
    rgba(0, 170, 202, 0.85) 50%,
    rgba(0, 170, 202, 1.00) 100%
  );
}
.fuerwen-card__content > * { margin-block-start: 0; }

.fuerwen-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* Weiss erreicht auf dem Cyan-Feld nur 2,4 zu 1. Ink traegt dort 5,7. */
  color: var(--ink);
  margin: 0 0 12px;
}

.fuerwen-card__text {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.6;
  /* Gleicher Grund wie beim Titel darueber. */
  color: var(--ink);
  margin: 0;
}

/* Der Platzhaltertext im Cyan-Feld darf nicht die Gold-Optik tragen,
   dort waere er unlesbar. */
.fuerwen-card__content .audi-ph {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

.fuerwen-card__cta {
  margin-top: 12px;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
}
/* Gleicher Grund wie beim Titel, Standard-Linkblau faellt auf Cyan durch. */
.fuerwen-card__cta a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .fuerwen-section__cards { grid-template-columns: 1fr 1fr; }
}

/* Seit 17.10.2026 vier Karten: ab Tablet-Breite 2 x 2. Vier nebeneinander
   waeren auf Desktop zu schmal fuer Foto und Text. */

/* ------------------------------------------------------------ Coming soon

   Kundenfeedback 17.10.2026: Ambulante Pflege bleibt sichtbar, ist aber
   als noch nicht verfuegbar gekennzeichnet. Foto leicht entsaettigt, Hinweis
   oben links, ausserhalb des Cyan-Felds. */
.fuerwen-card__badge {
  position: absolute;
  top: clamp(16px, 2vw, 24px);
  left: clamp(16px, 2vw, 24px);
  z-index: 3;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fuerwen-card--bald .fuerwen-card__image img { filter: grayscale(0.45); }

/* Bildausschnitt je Motiv, damit auf schmalen Karten die Person sichtbar bleibt. */
.fuerwen-card--2 .fuerwen-card__image img { object-position: 85% top; }
.fuerwen-card--3 .fuerwen-card__image img { object-position: 70% top; }
.fuerwen-card--4 .fuerwen-card__image img { object-position: 30% center; }

@media (prefers-reduced-motion: reduce) {
  .fuerwen-card,
  .fuerwen-card:hover,
  .fuerwen-card:focus-within {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   Stimmen aus der Praxis

   Zwei Bildhaelften ueber die volle Fensterbreite, getrennt durch eine
   zwei Pixel schmale weisse Linie. Beim Hover gleitet das Bild zur Seite
   und gibt den Motivhinweis darunter frei.

   Mobile First: Basis untereinander ohne Bewegung, weil auf Touch kein
   Hover existiert. Der Wechsel kommt ab 768 Pixel dazu.
   ========================================================================== */

.testimonials-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--creme);
}

.testimonials-header {
  padding: clamp(32px, 5vw, 64px) var(--rand) clamp(24px, 3vw, 32px);
}
.testimonials-header > * { margin-block-start: 0; }

.testimonials-cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 2px auto;
}
.testimonials-cards > * { margin-block-start: 0; }

.testimonials-divider {
  background: #FFFFFF;
  z-index: 5;
}

.testimonials-card {
  position: relative;
  overflow: hidden;
}

.testimonials-card__placeholder {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: clamp(32px, 5vw, 80px);
  background: var(--creme);
  text-align: center;
}
.testimonials-card__placeholder > * { margin-block-start: 0; }

.testimonials-card__placeholder-text {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  /* Vorgesehen war #998867. Das ist die Markenfarbe als Flaeche, als Schrift
     auf Creme traegt sie nur 2,76 zu 1. --gold-text ist dieselbe Farbe eine
     Stufe dunkler und erreicht 4,89. */
  color: var(--gold-text);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 480px;
  margin: 0;
}

.testimonials-card__image {
  position: relative;
  z-index: 2;
}
.testimonials-card__image .wp-block-image { margin: 0; height: 100%; }
.testimonials-card__image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Solange kein Portraet vorliegt, traegt die Bildebene eine neutrale
   Schraffur. Der Motivhinweis steht auf der Ebene dahinter und wird beim
   Hover freigegeben, deshalb bleibt er hier ausgeblendet. */
.testimonials-card__image .audi-fotoph p { display: none; }

.testimonials-card__image .audi-fotoph {
  height: 280px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

/* ------------------------------------------------------------ Ab Tablet */

@media (min-width: 768px) {
  .testimonials-header {
    position: absolute;
    top: clamp(32px, 5vw, 64px);
    left: var(--rand);
    z-index: 10;
    padding: 0;
  }

  .testimonials-cards {
    grid-template-columns: 1fr 2px 1fr;
    grid-template-rows: auto;
    min-height: 85vh;
  }

  .testimonials-card { min-height: 85vh; }

  /* Das Foto liegt vorne, der Motivhinweis dahinter. Beim Hover gleitet
     das Foto zur Seite und gibt den Hinweis frei. */
  .testimonials-card__placeholder {
    position: absolute;
    inset: 0;
    min-height: 0;
    z-index: 1;
  }

  .testimonials-card__image {
    position: absolute;
    inset: 0;
    z-index: 2;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .testimonials-card__image img,
  .testimonials-card__image .audi-fotoph {
    width: 100%;
    height: 100%;
  }

  .testimonials-card--left:hover .testimonials-card__image,
  .testimonials-card--left.is-hovered .testimonials-card__image {
    transform: translateX(-100%);
  }

  .testimonials-card--right:hover .testimonials-card__image,
  .testimonials-card--right.is-hovered .testimonials-card__image {
    transform: translateX(100%);
  }
}

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

/* --------------------------------------------- Kipp-Effekt auf den Bildern

   Die Bewegung selbst setzt assets/js/baustein-tilt.js als Inline-Stil.
   Hier stehen nur der Ruhezustand und die weichere Ruecklaufkurve.
   Der Rahmen schneidet ab, damit die leicht vergroesserte Aufnahme beim
   Kippen nicht ueber die Ecken hinauslaeuft.
   ========================================================================== */

.audi-baustein__bild { perspective-origin: center center; }

.audi-baustein__bild img,
.audi-baustein__bild .audi-fotoph {
  transform: scale(1.04);
}

.audi-baustein__bild.is-leaving {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.audi-baustein__bild.is-leaving img,
.audi-baustein__bild.is-leaving .audi-fotoph {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-reduced-motion: reduce) {
  .audi-baustein__bild,
  .audi-baustein__bild img,
  .audi-baustein__bild .audi-fotoph {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Cookie-Banner

   Helle, freistehende Karte am unteren Rand, dieselbe Kartenoptik wie
   .carousel__card (Radius, Schatten), damit es wie System-UI ueber dem
   Inhalt wirkt statt wie ein weiterer Seitenabschnitt. Erscheint erst, wenn
   noch keine Einwilligung gespeichert ist, siehe cookie-consent.js.
   ========================================================================== */

.audi-cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 1rem var(--rand) calc(1rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.audi-cookie-banner[hidden] { display: none; }

.audi-cookie-banner__karte {
  width: 100%;
  max-width: 34rem;
  background: #FFFFFF;
  color: var(--ink);
  border-radius: var(--radius-panel);
  box-shadow:
    0 4px 12px rgba(33, 29, 22, 0.08),
    0 12px 32px rgba(33, 29, 22, 0.12),
    0 24px 56px rgba(33, 29, 22, 0.10);
  padding: clamp(1.5rem, 4vw, 2rem);
  pointer-events: auto;
}

.audi-cookie-banner__titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  margin: 0 0 0.5rem;
}

.audi-cookie-banner__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.audi-cookie-banner__text a { color: var(--blau-text); text-decoration: underline; text-underline-offset: 0.2em; }
.audi-cookie-banner__text a:hover { color: var(--blau-dunkel); }

.audi-cookie-banner__optionen {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.6rem;
  margin: 0 0 1.25rem;
}
.audi-cookie-banner__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.audi-cookie-banner__option input { width: 1.05rem; height: 1.05rem; accent-color: var(--cyan); }
.audi-cookie-banner__option input:disabled { opacity: 0.55; cursor: default; }

.audi-cookie-banner__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.audi-cookie-banner__aktionen .audi-btn { flex: 1 1 auto; }

@media (min-width: 560px) {
  .audi-cookie-banner__aktionen { flex-wrap: nowrap; justify-content: flex-end; }
  .audi-cookie-banner__aktionen .audi-btn { flex: 0 0 auto; }
}

@media (max-width: 479px) {
  .audi-cookie-banner { padding-inline: 1rem; }
}


/* ==========================================================================
   Was Sie im Beratungsgespraech erwartet

   Kundenfeedback 17.10.2026: vor dem Kalenderlink soll klar sein, was im
   Gespraech passiert. Vier Schritte, mobil untereinander, ab Tablet 2 x 2,
   ab Desktop in einer Reihe. Der CTA darunter kommt aus inc/cta.php.
   ========================================================================== */
.beratung-schritte {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.beratung-schritte > * { margin-block-start: 0; }
.beratung-schritt {
  padding: clamp(24px, 2.5vw, 32px);
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid var(--linie);
}
.beratung-schritt > * { margin-block-start: 0; }
.beratung-schritt__nr {
  margin: 0 0 0.75rem;
  color: #005E70;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.beratung-schritt__titel {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
}
.beratung-schritt__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.beratung-section__aktion { margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 768px) {
  .beratung-schritte { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .beratung-schritte { grid-template-columns: repeat(4, 1fr); }
}