/* ============================================================
   A&M Service – Sections CSS für die Startseite
   ------------------------------------------------------------
   Alle Selektoren laufen unter .ams-startseite, damit sie nicht
   mit Avada-globalen Klassen (.section, .container, .btn, .hero)
   kollidieren. body_class('ams-startseite') setzt den Wrapper.

   Foundation (Tokens, Body-Defaults) lebt in brand.css. Hier nur
   das Layout für die Startseiten-Sektionen.
   ============================================================ */

.ams-startseite { background: #fff; }
.ams-startseite a { color: inherit; text-decoration: none; }
.ams-startseite img { display: block; max-width: 100%; }
.ams-startseite ul { list-style: none; padding: 0; margin: 0; }
.ams-startseite *,
.ams-startseite *::before,
.ams-startseite *::after { box-sizing: border-box; }


/* ── Nav ──────────────────────────────────────────────── */
.ams-startseite .nav {
  position: sticky; top: 0; z-index: 100;
  height: 72px; padding: 0 48px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.ams-startseite .nav__logo img { height: 32px; }
.ams-startseite .nav__links { display: flex; align-items: center; gap: 32px; margin: 0; }
.ams-startseite .nav__links a {
  font-size: 0.92rem; font-weight: 500; color: var(--ink-2);
  transition: color 200ms var(--ease-out);
}
.ams-startseite .nav__links a:hover { color: var(--brand-primary); }
.ams-startseite .nav__burger {
  display: none; width: 28px; height: 28px;
  flex-direction: column; justify-content: center; gap: 5px; cursor: pointer;
}
.ams-startseite .nav__burger span { display: block; height: 2px; background: var(--ink); }


/* ── Buttons ──────────────────────────────────────────── */
.ams-startseite .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--r-button);
  font-weight: 600; font-size: 0.92rem; font-family: inherit;
  border: 0; cursor: pointer;
  transition: all var(--t-base) var(--ease-out);
}
.ams-startseite .btn--primary {
  background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-cta);
}
.ams-startseite .btn--primary:hover {
  background: var(--brand-primary-dark);
  transform: translateY(-2px); box-shadow: var(--shadow-cta-hover);
}
.ams-startseite .btn--outline {
  background: transparent; border: 2px solid var(--ink); color: var(--ink);
  padding: 11px 22px;
}
.ams-startseite .btn--outline:hover { background: var(--ink); color: #fff; }
.ams-startseite .btn--ghost {
  position: relative; overflow: visible;
  color: var(--ink); padding: 13px 4px;
  transition: gap var(--t-base) var(--ease-out);
}
.ams-startseite .btn--ghost:hover { gap: 12px; }
/* Animierte Brand-Underline + Arrow-Nudge auf jedem .btn--ghost
   (Hero-Sekundär-CTA, Leistungen-Head-CTA etc.). Underline wächst von
   links, lässt rechts Platz für die Pfeil-Spitze. */
.ams-startseite .btn--ghost::before {
  content: '';
  position: absolute; left: 4px; right: 30px; bottom: 8px;
  height: 2px;
  background: var(--brand-primary); border-radius: 100px;
  transform-origin: left center; transform: scaleX(0);
  transition: transform 320ms var(--ease-out);
  pointer-events: none;
}
.ams-startseite .btn--ghost:hover::before { transform: scaleX(1); }
.ams-startseite .btn--ghost .arr {
  display: inline-block;
  transition: transform 320ms var(--ease-out);
}
.ams-startseite .btn--ghost:hover .arr { transform: translateX(5px); }
.ams-startseite .btn .arr { color: var(--brand-primary); }
.ams-startseite .btn--primary .arr,
.ams-startseite .btn--outline:hover .arr { color: inherit; }


/* ── Sections ─────────────────────────────────────────── */
.ams-startseite .section { padding: 120px 80px; }
.ams-startseite .section--surface { background: var(--surface); }
.ams-startseite .section--dark { background: var(--ink); color: #fff; }
.ams-startseite .container { max-width: var(--container-max); margin: 0 auto; }


/* ── Eyebrow ──────────────────────────────────────────── */
.ams-startseite .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-primary); margin-bottom: 8px;
}
.ams-startseite .eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--brand-primary); }
.ams-startseite .section--dark .eyebrow { color: var(--brand-primary); }

/* Rote Pille direkt im Eyebrow — z. B. „Exklusiv"-Marker neben dem Eyebrow-Text. */
.ams-startseite .eyebrow__badge {
  display: inline-flex; align-items: center;
  margin-left: 4px;
  padding: 3px 10px;
  background: var(--brand-primary); color: #fff;
  border-radius: 100px;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; line-height: 1;
}


/* ── Headlines ────────────────────────────────────────── */
.ams-startseite .h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.8rem, 5.2vw, 4.4rem);
  line-height: 1.06; letter-spacing: -0.02em; color: var(--ink);
  margin: 0;
  /* Browser bricht Zeilen visuell balanciert um, statt am ersten Word-Wrap-Punkt;
     16ch hält die Headline mehrzeilig wie im Prototyp. */
  text-wrap: balance;
  max-width: 16ch;
}
.ams-startseite .h1 em { font-style: italic; font-weight: 500; color: var(--brand-primary); }
.ams-startseite .h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 56px; max-width: 640px;
}
.ams-startseite .h2 em { font-style: italic; font-weight: 500; color: var(--brand-primary); }
.ams-startseite .section--dark .h2 { color: #fff; }


/* ────────────────────────────────────────────────
   Inter-Section-Spacing-Reset — automatisch.
   Jeder Avada-Container/Column/Spalten-Wrapper, der ein
   AMS-Full-Width-Element (Hero, Lösungen, …) enthält, bekommt
   alle vertikalen Margins und Paddings auf 0 gezogen. Damit
   entsteht KEINE Lücke zwischen aufeinanderfolgenden Sections,
   ohne dass im Builder pro Container eine Helper-Klasse
   nötig ist.

   WICHTIG: Avadas Column-Klasse heißt `.fusion_builder_column`
   mit UNTERSTRICHEN — nicht mit Bindestrichen. Plus die
   Spacing-Werte werden über Inline-CSS-Variablen wie
   `--awb-margin-bottom-large:20px` gesetzt, die selbst wenn
   `margin-bottom:0` greift weiterhin der CSS-Variable-Wert
   bleiben kann (Avada nutzt sie in eigenen Regeln). Deshalb
   sowohl die direkte Eigenschaft als auch die Variable nullen.

   Voraussetzung: :has()-Selektor — Chrome 105+, Firefox 121+,
   Safari 15.4+. Im B2B-Zielmarkt unkritisch.
   ──────────────────────────────────────────────── */
.fusion-fullwidth:has(.ams-element-hero),
.fusion-fullwidth:has(.ams-element-loesungen),
.fusion-fullwidth:has(.ams-element-konfigurator),
.fusion-fullwidth:has(.ams-element-leistungen),
.fusion-fullwidth:has(.ams-element-kontakt-hero),
.fusion-fullwidth:has(.ams-element-kontakt-main),
.fusion-fullwidth:has(.ams-element-kontakt-anfahrt),
.fusion-builder-row:has(.ams-element-hero),
.fusion-builder-row:has(.ams-element-loesungen),
.fusion-builder-row:has(.ams-element-konfigurator),
.fusion-builder-row:has(.ams-element-leistungen),
.fusion-builder-row:has(.ams-element-kontakt-hero),
.fusion-builder-row:has(.ams-element-kontakt-main),
.fusion-builder-row:has(.ams-element-kontakt-anfahrt),
.fusion_builder_column:has(.ams-element-hero),
.fusion_builder_column:has(.ams-element-loesungen),
.fusion_builder_column:has(.ams-element-konfigurator),
.fusion_builder_column:has(.ams-element-leistungen),
.fusion_builder_column:has(.ams-element-kontakt-hero),
.fusion_builder_column:has(.ams-element-kontakt-main),
.fusion_builder_column:has(.ams-element-kontakt-anfahrt),
.fusion-layout-column:has(.ams-element-hero),
.fusion-layout-column:has(.ams-element-loesungen),
.fusion-layout-column:has(.ams-element-konfigurator),
.fusion-layout-column:has(.ams-element-leistungen),
.fusion-layout-column:has(.ams-element-kontakt-hero),
.fusion-layout-column:has(.ams-element-kontakt-main),
.fusion-layout-column:has(.ams-element-kontakt-anfahrt),
.fusion-flex-column:has(.ams-element-hero),
.fusion-flex-column:has(.ams-element-loesungen),
.fusion-flex-column:has(.ams-element-konfigurator),
.fusion-flex-column:has(.ams-element-leistungen),
.fusion-flex-column:has(.ams-element-kontakt-hero),
.fusion-flex-column:has(.ams-element-kontakt-main),
.fusion-flex-column:has(.ams-element-kontakt-anfahrt),
.fusion-column-wrapper:has(.ams-element-hero),
.fusion-column-wrapper:has(.ams-element-loesungen),
.fusion-column-wrapper:has(.ams-element-konfigurator),
.fusion-column-wrapper:has(.ams-element-leistungen),
.fusion-column-wrapper:has(.ams-element-kontakt-hero),
.fusion-column-wrapper:has(.ams-element-kontakt-main),
.fusion-column-wrapper:has(.ams-element-kontakt-anfahrt) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  --awb-margin-top-large: 0px !important;
  --awb-margin-bottom-large: 0px !important;
  --awb-margin-top-medium: 0px !important;
  --awb-margin-bottom-medium: 0px !important;
  --awb-margin-top-small: 0px !important;
  --awb-margin-bottom-small: 0px !important;
  --awb-spacing-top-large: 0% !important;
  --awb-spacing-bottom-large: 0% !important;
  --awb-spacing-top-medium: 0% !important;
  --awb-spacing-bottom-medium: 0% !important;
  --awb-spacing-top-small: 0% !important;
  --awb-spacing-bottom-small: 0% !important;
}

/* ────────────────────────────────────────────────
   Avada-Wrapper bündig zum Viewport zwingen.

   Avada setzt an `.fusion-builder-row` per Inline-Style
   `width:104% !important; max-width:104% !important;
    margin-left: calc(-4% / 2); margin-right: calc(-4% / 2);`
   für Spalten-Gutter-Compensation. Plus `.fusion-row` hat
   Default-Side-Padding. Damit ist die Avada-Wrapper-Kette
   NICHT bündig mit dem Viewport — der `fusion-column-wrapper`
   landet z.B. 40 px schmaler als der Viewport.

   Self-Breakout im Element (calc(50% - 50vw)) rechnet aber
   relativ zum Parent-Center. Wenn das Parent-Center nicht
   gleich Viewport-Center ist, sitzt das Element schief und
   es entsteht ein weißer Streifen an einer Seite.

   Fix: Wrapper-Breite auf 100 % zwingen, Side-Padding/Margin
   nullen. Damit ist Parent-Center == Viewport-Center und das
   Self-Breakout sitzt sauber.

   Scope: nur Pages, die ein AMS-Full-Width-Element enthalten
   — keine Auswirkungen auf andere Site-Seiten.
   ──────────────────────────────────────────────── */
.fusion-fullwidth:has(.ams-element-hero),
.fusion-fullwidth:has(.ams-element-loesungen),
.fusion-fullwidth:has(.ams-element-konfigurator),
.fusion-fullwidth:has(.ams-element-leistungen),
.fusion-fullwidth:has(.ams-element-kontakt-hero),
.fusion-fullwidth:has(.ams-element-kontakt-main),
.fusion-fullwidth:has(.ams-element-kontakt-anfahrt),
.fusion-builder-row:has(.ams-element-hero),
.fusion-builder-row:has(.ams-element-loesungen),
.fusion-builder-row:has(.ams-element-konfigurator),
.fusion-builder-row:has(.ams-element-leistungen),
.fusion-builder-row:has(.ams-element-kontakt-hero),
.fusion-builder-row:has(.ams-element-kontakt-main),
.fusion-builder-row:has(.ams-element-kontakt-anfahrt),
.fusion_builder_column:has(.ams-element-hero),
.fusion_builder_column:has(.ams-element-loesungen),
.fusion_builder_column:has(.ams-element-konfigurator),
.fusion_builder_column:has(.ams-element-leistungen),
.fusion_builder_column:has(.ams-element-kontakt-hero),
.fusion_builder_column:has(.ams-element-kontakt-main),
.fusion_builder_column:has(.ams-element-kontakt-anfahrt),
.fusion-layout-column:has(.ams-element-hero),
.fusion-layout-column:has(.ams-element-loesungen),
.fusion-layout-column:has(.ams-element-konfigurator),
.fusion-layout-column:has(.ams-element-leistungen),
.fusion-layout-column:has(.ams-element-kontakt-hero),
.fusion-layout-column:has(.ams-element-kontakt-main),
.fusion-layout-column:has(.ams-element-kontakt-anfahrt),
.fusion-flex-column:has(.ams-element-hero),
.fusion-flex-column:has(.ams-element-loesungen),
.fusion-flex-column:has(.ams-element-konfigurator),
.fusion-flex-column:has(.ams-element-leistungen),
.fusion-flex-column:has(.ams-element-kontakt-hero),
.fusion-flex-column:has(.ams-element-kontakt-main),
.fusion-flex-column:has(.ams-element-kontakt-anfahrt),
.fusion-column-wrapper:has(.ams-element-hero),
.fusion-column-wrapper:has(.ams-element-loesungen),
.fusion-column-wrapper:has(.ams-element-konfigurator),
.fusion-column-wrapper:has(.ams-element-leistungen),
.fusion-column-wrapper:has(.ams-element-kontakt-hero),
.fusion-column-wrapper:has(.ams-element-kontakt-main),
.fusion-column-wrapper:has(.ams-element-kontakt-anfahrt) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Avadas Default ist `overflow: hidden` auf `.fusion-fullwidth` — das
     clippt die Card-Shadows und den Hover-Lift der Lösungs-Cards an der
     Wrapper-Kante. Wir erlauben hier explizit overflow:visible, damit
     Shadows und Transforms frei rausragen können. */
  overflow: visible !important;
}

/* Stacking-Override für die Konfigurator-Section: das bleeding `::after`-
   Signet soll in die nachfolgende Leistungs-Section reinragen. Element-
   interne z-index-Regeln allein reichen nicht, weil Avadas Wrapper-Kette
   eigene Stacking-Kontexte bilden kann. Wir setzen den z-index daher
   direkt auf den äußeren `.fusion-fullwidth`-Wrapper der Konfigurator-
   Section (oberhalb) bzw. der Leistungs-Section (unterhalb). */
.fusion-fullwidth:has(.ams-element-konfigurator) {
  position: relative;
  z-index: 2 !important;
}
.fusion-fullwidth:has(.ams-element-leistungen) {
  position: relative;
  z-index: 0 !important;
}

/* Die äußere `.fusion-row` (direkt unter `main#main`) hat
   Avadas Default-Container-Padding 0 30px. Auch wegräumen,
   wenn auf der Page ein AMS-Element liegt — sonst ist die
   .fusion-row 60 px schmaler als der Viewport. */
body:has(.ams-element-hero) main#main > .fusion-row,
body:has(.ams-element-loesungen) main#main > .fusion-row,
body:has(.ams-element-konfigurator) main#main > .fusion-row,
body:has(.ams-element-leistungen) main#main > .fusion-row,
body:has(.ams-element-kontakt-hero) main#main > .fusion-row,
body:has(.ams-element-kontakt-main) main#main > .fusion-row,
body:has(.ams-element-kontakt-anfahrt) main#main > .fusion-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* ────────────────────────────────────────────────
   AMS Hero — komplette Section 1 als monolithisches
   Element. Self-Breakout per width:100vw + neg.
   Margin (analog AMS Lösungen) — kein Avada-2-
   Spalten-Container nötig, kein ams-fullwidth-
   section. Grid 50/50 direkt im Element. Höhe
   100vh minus Sticky-Header-Höhe (72 px), so dass
   der Fold genau am unteren Hero-Rand sitzt.
mit Scene-Showcase (Auto-Cycle
   8 s + Tab-Bar + Glass-Strips) rechts und dezentem
   Signet-Ornament hinter dem Text links.

   ──────────────────────────────────────────────── */
.ams-startseite.ams-element-hero,
.ams-startseite .ams-element-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - 72px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
body.admin-bar .ams-startseite.ams-element-hero,
body.admin-bar .ams-startseite .ams-element-hero {
  min-height: calc(100vh - 72px - 32px);
}

/* ── Hero Left ─────────────────────────────────── */
.ams-startseite.ams-element-hero .hero__left,
.ams-startseite .ams-element-hero .hero__left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Linkes Padding skaliert mit dem Viewport — auf großen Bildschirmen rückt der
     Inhalt deutlich nach innen, auf 1280 px liegt er bei ~128 px Brand-Standard,
     auf Mobile bleibt 80 px Mindest-Abstand. Tablet/Mobile haben eigene Werte
     in der Media-Query darunter. */
  padding: 96px 64px 64px clamp(80px, 8vw, 160px);
  overflow: hidden;
}
/* Signet-Ornament hinter dem Text — sehr dezent, echoes the brand mark.
   Fadet beim Page-Load sanft ein (1.6 s nach 0.5 s Delay) und skaliert
   minimal von 92 % auf 100 %, damit es nicht hart eingeblendet wirkt. */
.ams-startseite.ams-element-hero .hero__left::before,
.ams-startseite .ams-element-hero .hero__left::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -120px;
  width: 520px;
  height: 520px;
  background: url('../logos/AuM_Signet.png') no-repeat center/contain;
  opacity: 0;
  transform: translateY(-55%) scale(0.92);
  pointer-events: none;
  z-index: 0;
  animation: heroMarkIn 1.6s var(--ease-out) 0.5s both;
}
@keyframes heroMarkIn {
  from { opacity: 0;     transform: translateY(-55%) scale(0.92); }
  to   { opacity: 0.045; transform: translateY(-55%) scale(1); }
}
.ams-startseite.ams-element-hero .hero__left > *,
.ams-startseite .ams-element-hero .hero__left > * {
  position: relative;
  z-index: 1;
}

/* Sub-Text + Buttons + Stats — neue Sizing-Werte überschreiben die
   site-weiten `.ams-startseite .hero__sub` etc. Specifity 30 vs. 20. */
.ams-startseite.ams-element-hero .hero__sub,
.ams-startseite .ams-element-hero .hero__sub {
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 480px;
  margin: 24px 0 36px;
}
.ams-startseite.ams-element-hero .hero__actions,
.ams-startseite .ams-element-hero .hero__actions {
  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
}

/* Sekundärer Hero-CTA: Label wechselt synchron zur aktiven Szene
   und animiert dabei vertikal raus/rein. Die JS-Logik setzt die
   Klassen .is-leaving (fade-up out) und .is-entering (Startposition
   unten, ohne Transition — danach Snap-back zur Ruhelage). */
.ams-startseite.ams-element-hero .hero__actions .btn--ghost .btn__label,
.ams-startseite .ams-element-hero .hero__actions .btn--ghost .btn__label {
  display: inline-block; text-align: left;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  will-change: transform, opacity;
}
.ams-startseite.ams-element-hero .hero__actions .btn--ghost .btn__label.is-leaving,
.ams-startseite .ams-element-hero .hero__actions .btn--ghost .btn__label.is-leaving {
  opacity: 0; transform: translateY(-8px);
}
.ams-startseite.ams-element-hero .hero__actions .btn--ghost .btn__label.is-entering,
.ams-startseite .ams-element-hero .hero__actions .btn--ghost .btn__label.is-entering {
  opacity: 0; transform: translateY(8px);
  transition: none;
}
@media (prefers-reduced-motion: no-such-value) {
  .ams-startseite.ams-element-hero .hero__actions .btn--ghost .btn__label,
  .ams-startseite .ams-element-hero .hero__actions .btn--ghost .btn__label,
  .ams-startseite.ams-element-hero .hero__actions .btn--ghost .btn__label.is-leaving,
  .ams-startseite .ams-element-hero .hero__actions .btn--ghost .btn__label.is-leaving,
  .ams-startseite.ams-element-hero .hero__actions .btn--ghost .btn__label.is-entering,
  .ams-startseite .ams-element-hero .hero__actions .btn--ghost .btn__label.is-entering {
    transition: none; transform: none;
  }
}
/* Trust-Wrapper bündelt Stats + Facts-Panel; schiebt sich via auto-Margins
   in den freien vertikalen Raum unter Buttons. */
.ams-startseite.ams-element-hero .hero__trust,
.ams-startseite .ams-element-hero .hero__trust {
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ams-startseite.ams-element-hero .hero__stats,
.ams-startseite .ams-element-hero .hero__stats {
  display: flex;
  justify-content: flex-start;
  gap: 56px;
  flex-wrap: wrap;
}
.ams-startseite.ams-element-hero .stat,
.ams-startseite .ams-element-hero .stat {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  cursor: help;
  transition: transform 250ms var(--ease-out);
}
.ams-startseite.ams-element-hero .stat:hover,
.ams-startseite .ams-element-hero .stat:hover { transform: translateY(-2px); }
.ams-startseite.ams-element-hero .stat:hover .stat__num,
.ams-startseite .ams-element-hero .stat:hover .stat__num { color: var(--brand-primary); }
.ams-startseite.ams-element-hero .stat__num,
.ams-startseite .ams-element-hero .stat__num { transition: color 250ms var(--ease-out); }
.ams-startseite.ams-element-hero .stat:hover .stat__icon,
.ams-startseite .ams-element-hero .stat:hover .stat__icon { transform: scale(1.08); }

/* „Wussten Sie schon?" – Fakten-Panel unter den Stats; ein Set pro Stat,
   crossfaded auf Hover. Items innerhalb eines Sets rotieren bei jedem
   erneuten Hovern auf denselben Stat. */
.ams-startseite.ams-element-hero .hero__facts,
.ams-startseite .ams-element-hero .hero__facts {
  position: relative; min-height: 64px;
}
.ams-startseite.ams-element-hero .hero__facts-set,
.ams-startseite .ams-element-hero .hero__facts-set {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 280ms var(--ease-out);
}
.ams-startseite.ams-element-hero .hero__facts-set.is-active,
.ams-startseite .ams-element-hero .hero__facts-set.is-active { opacity: 1; }
.ams-startseite.ams-element-hero .hero__facts-eyebrow,
.ams-startseite .ams-element-hero .hero__facts-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 6px;
}
.ams-startseite.ams-element-hero .hero__facts-eyebrow::before,
.ams-startseite .ams-element-hero .hero__facts-eyebrow::before {
  content: ''; width: 16px; height: 1.5px;
  background: var(--brand-primary); border-radius: 100px;
}
.ams-startseite.ams-element-hero .hero__facts-item,
.ams-startseite .ams-element-hero .hero__facts-item {
  display: none;
  font-size: 0.88rem; color: var(--ink-2); line-height: 1.5;
  max-width: 560px;
}
.ams-startseite.ams-element-hero .hero__facts-item.is-active,
.ams-startseite .ams-element-hero .hero__facts-item.is-active { display: block; }

@media (prefers-reduced-motion: no-such-value) {
  .ams-startseite.ams-element-hero .stat,
  .ams-startseite .ams-element-hero .stat,
  .ams-startseite.ams-element-hero .stat__icon,
  .ams-startseite .ams-element-hero .stat__icon,
  .ams-startseite.ams-element-hero .stat__num,
  .ams-startseite .ams-element-hero .stat__num,
  .ams-startseite.ams-element-hero .hero__facts-set,
  .ams-startseite .ams-element-hero .hero__facts-set { transition: none; }
}
.ams-startseite.ams-element-hero .stat__icon,
.ams-startseite .ams-element-hero .stat__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-primary);
}
.ams-startseite.ams-element-hero .stat__icon svg,
.ams-startseite .ams-element-hero .stat__icon svg { width: 42px; height: 42px; }
.ams-startseite.ams-element-hero .stat__text,
.ams-startseite .ams-element-hero .stat__text { display: flex; flex-direction: column; }
.ams-startseite.ams-element-hero .stat__num,
.ams-startseite .ams-element-hero .stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.2rem; line-height: 1;
  color: var(--ink); letter-spacing: -0.02em;
}
.ams-startseite.ams-element-hero .stat__lbl,
.ams-startseite .ams-element-hero .stat__lbl {
  font-size: 0.78rem; color: var(--ink-2);
  margin-top: 6px; letter-spacing: 0.04em; font-weight: 500;
}

/* ── Hero Entry-Animation ──────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Reines Fade-In für die Scene-Showcase — kein Vertikal-Slide, damit
   die Szene nicht „hochspringt" und der Crossfade zwischen den Szenen
   sich nicht mit einem Layout-Shift überlagert. */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ams-startseite.ams-element-hero .hero__left > *,
.ams-startseite .ams-element-hero .hero__left > * {
  opacity: 0;
  animation: heroFadeUp 0.6s var(--ease-out) both;
}
.ams-startseite.ams-element-hero .hero__left > .eyebrow,
.ams-startseite .ams-element-hero .hero__left > .eyebrow       { animation-delay: 0s; }
.ams-startseite.ams-element-hero .hero__left > .h1,
.ams-startseite .ams-element-hero .hero__left > .h1            { animation-delay: 0.1s; }
.ams-startseite.ams-element-hero .hero__left > .hero__sub,
.ams-startseite .ams-element-hero .hero__left > .hero__sub     { animation-delay: 0.2s; }
.ams-startseite.ams-element-hero .hero__left > .hero__actions,
.ams-startseite .ams-element-hero .hero__left > .hero__actions { animation-delay: 0.3s; }
.ams-startseite.ams-element-hero .hero__left > .hero__stats,
.ams-startseite .ams-element-hero .hero__left > .hero__stats   { animation-delay: 0.4s; }
.ams-startseite.ams-element-hero .hero__left > .hero__trust,
.ams-startseite .ams-element-hero .hero__left > .hero__trust   { animation-delay: 0.4s; }
.ams-startseite.ams-element-hero .hero__right,
.ams-startseite .ams-element-hero .hero__right {
  animation: heroFadeIn 0.8s var(--ease-out) 0.2s both;
}
@media (prefers-reduced-motion: no-such-value) {
  .ams-startseite.ams-element-hero .hero__left > *,
  .ams-startseite .ams-element-hero .hero__left > *,
  .ams-startseite.ams-element-hero .hero__right,
  .ams-startseite .ams-element-hero .hero__right { animation: none; opacity: 1; transform: none; }
  .ams-startseite.ams-element-hero .hero__left::before,
  .ams-startseite .ams-element-hero .hero__left::before {
    animation: none;
    opacity: 0.045;
    transform: translateY(-55%) scale(1);
  }
}

/* ── Hero Right (Scene-Showcase) ────────────────── */
.ams-startseite.ams-element-hero .hero__right,
.ams-startseite .ams-element-hero .hero__right {
  background: var(--surface);
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 560px;
  /* Weiche Rundung an der inneren Ecke (zur Lösungs-Section hin). */
  border-bottom-left-radius: 24px;
}
.ams-startseite.ams-element-hero .hero__showcase,
.ams-startseite .ams-element-hero .hero__showcase {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.ams-startseite.ams-element-hero .scene,
.ams-startseite .ams-element-hero .scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  overflow: hidden;
}
.ams-startseite.ams-element-hero .scene.is-active,
.ams-startseite .ams-element-hero .scene.is-active { opacity: 1; transition-delay: 80ms; }
.ams-startseite.ams-element-hero .scene__bg,
.ams-startseite .ams-element-hero .scene__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
.ams-startseite.ams-element-hero .scene__bg::after,
.ams-startseite .ams-element-hero .scene__bg::after {
  content: ''; position: absolute; inset: 0; background: transparent;
}
.ams-startseite.ams-element-hero .scene--photo .scene__bg::after,
.ams-startseite .ams-element-hero .scene--photo .scene__bg::after {
  background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,0.15) 55%, rgba(26,26,26,0.45) 100%);
}

/* ── Glass-Strips (Info oben + Tabs unten) ─────────
   Zwei gestackte Strips über der Szene: oben Info (Eyebrow + Titel + Desc),
   unten Tab-Bar. Jeder Strip ist selbsttragend — eigener Vertikal-Gradient
   im Background (solid-dunkel → transparent) plus ein mask-image, das die
   Strip-Kante nach innen weich auslaufen lässt. Kein hartes Border zur
   Szene, kein box-shadow. */
.ams-startseite.ams-element-hero .hero__strip,
.ams-startseite .ams-element-hero .hero__strip {
  position: absolute; left: 0; right: 0;
  z-index: 4;
  padding: 16px 48px 14px;
}
.ams-startseite.ams-element-hero .hero__strip--info,
.ams-startseite .ams-element-hero .hero__strip--info {
  top: 0; bottom: auto;
  padding: 24px 48px 80px;
  background: linear-gradient(180deg,
    rgba(10,10,10,0.92) 0%,
    rgba(10,10,10,0.88) 20%,
    rgba(10,10,10,0.72) 45%,
    rgba(10,10,10,0.48) 65%,
    rgba(10,10,10,0.24) 82%,
    rgba(10,10,10,0.08) 93%,
    rgba(10,10,10,0)    100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.4) 90%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.4) 90%, transparent 100%);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}
.ams-startseite.ams-element-hero .hero__strip--info > *,
.ams-startseite .ams-element-hero .hero__strip--info > * { max-width: 540px; }
.ams-startseite.ams-element-hero .hero__strip--tabs,
.ams-startseite .ams-element-hero .hero__strip--tabs {
  bottom: 0;
  padding: 80px 48px 26px;
  background: linear-gradient(0deg,
    rgba(10,10,10,0.92) 0%,
    rgba(10,10,10,0.88) 20%,
    rgba(10,10,10,0.72) 45%,
    rgba(10,10,10,0.48) 65%,
    rgba(10,10,10,0.24) 82%,
    rgba(10,10,10,0.08) 93%,
    rgba(10,10,10,0)    100%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 55%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.4) 90%, transparent 100%);
          mask-image: linear-gradient(0deg, #000 0%, #000 55%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.4) 90%, transparent 100%);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}

.ams-startseite.ams-element-hero .hero__card-eyebrow,
.ams-startseite .ams-element-hero .hero__card-eyebrow {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.ams-startseite.ams-element-hero .hero__card-eyebrow::before,
.ams-startseite .ams-element-hero .hero__card-eyebrow::before {
  content: ''; width: 24px; height: 2px;
  background: var(--brand-primary); border-radius: 100px;
}
.ams-startseite.ams-element-hero .hero__card-title,
.ams-startseite .ams-element-hero .hero__card-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.6rem; line-height: 1.12; letter-spacing: -0.015em;
  color: #fff;
  transition: opacity 250ms var(--ease-out);
  margin: 0 0 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.55);
}
.ams-startseite.ams-element-hero .hero__card-title.is-fading,
.ams-startseite .ams-element-hero .hero__card-title.is-fading { opacity: 0; }
.ams-startseite.ams-element-hero .hero__card-desc,
.ams-startseite .ams-element-hero .hero__card-desc {
  font-size: 0.95rem; color: #fff;
  line-height: 1.55; min-height: 44px;
  transition: opacity 250ms var(--ease-out);
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 6px rgba(0,0,0,0.5);
}
.ams-startseite.ams-element-hero .hero__card-desc.is-fading,
.ams-startseite .ams-element-hero .hero__card-desc.is-fading { opacity: 0; }

/* ── Scene-Bar (Tab-Row) ───────────────────────── */
.ams-startseite.ams-element-hero .scenebar,
.ams-startseite .ams-element-hero .scenebar {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px; align-items: stretch;
}
.ams-startseite.ams-element-hero .seg,
.ams-startseite .ams-element-hero .seg {
  position: relative;
  background: transparent; border: 0;
  padding: 10px 8px 12px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: color var(--t-base) var(--ease-out);
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
}
.ams-startseite.ams-element-hero .seg__label,
.ams-startseite .ams-element-hero .seg__label {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.4rem; line-height: 1.1;
  color: rgba(255,255,255,0.6); letter-spacing: -0.01em;
  transition: color 250ms var(--ease-out), transform 250ms var(--ease-out);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.ams-startseite.ams-element-hero .seg:hover .seg__label,
.ams-startseite .ams-element-hero .seg:hover .seg__label { color: rgba(255,255,255,0.92); }
.ams-startseite.ams-element-hero .seg.is-active .seg__label,
.ams-startseite .ams-element-hero .seg.is-active .seg__label { color: #fff; font-weight: 600; }

.ams-startseite.ams-element-hero .seg__progress,
.ams-startseite .ams-element-hero .seg__progress {
  position: relative;
  height: 3px; border-radius: 100px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  transition: background 250ms var(--ease-out);
}
.ams-startseite.ams-element-hero .seg.is-active .seg__progress,
.ams-startseite .ams-element-hero .seg.is-active .seg__progress { background: rgba(255,255,255,0.22); }
.ams-startseite.ams-element-hero .seg__progress::after,
.ams-startseite .ams-element-hero .seg__progress::after {
  content: ''; position: absolute; inset: 0;
  background: var(--brand-primary); border-radius: 100px;
  transform-origin: left; transform: scaleX(0);
}
.ams-startseite.ams-element-hero .seg.is-active .seg__progress::after,
.ams-startseite .ams-element-hero .seg.is-active .seg__progress::after {
  animation: segFill var(--seg-duration, 6s) linear forwards;
  animation-play-state: var(--seg-play, running);
}
@keyframes segFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-such-value) {
  .ams-startseite.ams-element-hero .seg.is-active .seg__progress::after,
  .ams-startseite .ams-element-hero .seg.is-active .seg__progress::after {
    animation: none; transform: scaleX(1);
  }
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 1100px) {
  .ams-startseite.ams-element-hero,
  .ams-startseite .ams-element-hero { grid-template-columns: 1fr; }
  .ams-startseite.ams-element-hero .hero__left,
  .ams-startseite .ams-element-hero .hero__left { padding: 64px 32px; }
  .ams-startseite.ams-element-hero .hero__right,
  .ams-startseite .ams-element-hero .hero__right { padding: 0; min-height: 420px; }
}
@media (max-width: 800px) {
  .ams-startseite.ams-element-hero,
  .ams-startseite .ams-element-hero { grid-template-columns: 1fr; min-height: auto; }
  .ams-startseite.ams-element-hero .hero__left,
  .ams-startseite .ams-element-hero .hero__left { padding: 48px 24px; }
  .ams-startseite.ams-element-hero .hero__right,
  .ams-startseite .ams-element-hero .hero__right { min-height: 480px; }
  .ams-startseite.ams-element-hero .hero__strip,
  .ams-startseite .ams-element-hero .hero__strip { padding-left: 24px; padding-right: 24px; }
}


/* ────────────────────────────────────────────────
   AMS Site Nav — Custom Fusion-Element für die
   site-weite Navigation.
   ──────────────────────────────────────────────── */
.ams-element-site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.ams-element-site-nav .ams-nav__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.ams-element-site-nav .ams-nav__logo img {
  height: 32px;
  width: auto;
  display: block;
}

.ams-element-site-nav .ams-nav__menu {
  flex: 1;
  display: flex;
  justify-content: center;
}
.ams-element-site-nav .ams-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ams-element-site-nav .ams-nav__list li { margin: 0; }
.ams-element-site-nav .ams-nav__list a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}
.ams-element-site-nav .ams-nav__list a:hover,
.ams-element-site-nav .ams-nav__list .current-menu-item > a {
  color: var(--brand-primary);
}

.ams-element-site-nav .ams-nav__actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ams-element-site-nav .ams-nav__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--r-button);
  background: var(--brand-primary);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.ams-element-site-nav .ams-nav__cta:hover {
  background: var(--brand-primary-dark);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-2px);
  color: #fff;
}

/* Hotline-Pille: outline-runder Chip mit Telefon-Icon, rechts vom Kontakt-Button.
   Wechselt bei Hover komplett auf Brand-Rot. */
.ams-element-site-nav .ams-nav__hotline {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}
.ams-element-site-nav .ams-nav__hotline svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}
.ams-element-site-nav .ams-nav__hotline:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Admin-Bar-Offset, damit Sticky-Nav unter der WP-Adminbar liegt. */
body.admin-bar .ams-element-site-nav { top: 32px; }

@media (max-width: 800px) {
  .ams-element-site-nav { padding: 0 24px; }
  /* Menü auf Mobile vorerst verstecken — Burger folgt in einem Folge-Commit. */
  .ams-element-site-nav .ams-nav__menu { display: none; }
  /* Hotline-Pille auf Mobile verstecken — bleibt erreichbar über Burger-Menü, sobald das gebaut ist. */
  .ams-element-site-nav .ams-nav__hotline { display: none; }
}


/* ────────────────────────────────────────────────
   AMS Lösungen — komplette Section 2 (Eyebrow +
   Headline + 3-Card-Grid) als ein Element.

   Full-Viewport: Self-Breakout über 100vw + negativem
   Margin, damit das Element die volle Fensterbreite
   einnimmt — unabhängig von der Avada-Container-
   Begrenzung (Site-Width 1280 px). Damit fällt der
   Bedarf einer extra Helper-Klasse im Builder weg.

   Höhe min-height: 100vh, Inhalt vertikal zentriert
   per flex column. Header bei 80 px Side-Padding,
   Cards in 1280er Container zentriert.

   ──────────────────────────────────────────────── */
.ams-startseite.ams-element-loesungen,
.ams-startseite .ams-element-loesungen {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - 72px);
  /* Side-Padding identisch zum Hero-Left, damit die Section-Headline
     auf gleicher vertikaler Linie wie die Hero-Headline startet. */
  padding: 120px clamp(80px, 8vw, 160px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.admin-bar .ams-startseite.ams-element-loesungen,
body.admin-bar .ams-startseite .ams-element-loesungen {
  min-height: calc(100vh - 72px - 32px);
}
/* Container regelt Head + Grid gemeinsam — beide bündig zentriert
   im 1280er Raster, statt Head am Section-Rand. overflow: visible
   sicherheitshalber, damit Card-Hover-Shadows nicht von einem
   möglichen Avada-Wrapper-Default abgeschnitten werden. */
.ams-startseite.ams-element-loesungen,
.ams-startseite .ams-element-loesungen,
.ams-startseite.ams-element-loesungen > .container,
.ams-startseite .ams-element-loesungen > .container,
.ams-startseite .loesungen__grid {
  overflow: visible;
}
.ams-startseite.ams-element-loesungen > .container,
.ams-startseite .ams-element-loesungen > .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.ams-startseite.ams-element-loesungen .loesungen__head,
.ams-startseite .ams-element-loesungen .loesungen__head {
  margin-bottom: 56px;
  max-width: 720px;
}
.ams-startseite.ams-element-loesungen .loesungen__head .h2,
.ams-startseite .ams-element-loesungen .loesungen__head .h2 {
  margin-bottom: 16px;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
}
.ams-startseite.ams-element-loesungen .loesungen__head-sub,
.ams-startseite .ams-element-loesungen .loesungen__head-sub {
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 800px) {
  .ams-startseite.ams-element-loesungen,
  .ams-startseite .ams-element-loesungen { padding: 64px 24px; min-height: auto; }
  .ams-startseite.ams-element-loesungen .loesungen__head,
  .ams-startseite .ams-element-loesungen .loesungen__head { margin-bottom: 40px; }
}

/* ── Lösungen Scroll-In Reveal ────────────────────────────
   `.is-revealed` wird vom JS gesetzt, sobald die Section in
   den Viewport scrollt (IntersectionObserver, threshold 0.18).
   Reihenfolge: Eyebrow-Balken → Eyebrow-Text → Headline → Sub
   → Cards gestaffelt → Card-Icons → Metric-Zahlen (parallel
   zum Count-Up via loesungen-reveal.js).
 */

/* Eyebrow-Balken (das rote Strichelement vor dem Eyebrow-Text)
   wächst von links in. Das ::before ist im Eyebrow-Pattern in
   brand.css definiert — wir animieren nur seinen transform. */
.ams-startseite.ams-element-loesungen .eyebrow::before,
.ams-startseite .ams-element-loesungen .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms var(--ease-out) 80ms;
}
.ams-startseite.ams-element-loesungen.is-revealed .eyebrow::before,
.ams-startseite .ams-element-loesungen.is-revealed .eyebrow::before {
  transform: scaleX(1);
}

/* Eyebrow-Text, Headline & Sub faden gestaffelt von unten ein. */
.ams-startseite.ams-element-loesungen .loesungen__head .eyebrow,
.ams-startseite.ams-element-loesungen .loesungen__head .h2,
.ams-startseite.ams-element-loesungen .loesungen__head-sub,
.ams-startseite .ams-element-loesungen .loesungen__head .eyebrow,
.ams-startseite .ams-element-loesungen .loesungen__head .h2,
.ams-startseite .ams-element-loesungen .loesungen__head-sub {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.ams-startseite.ams-element-loesungen .loesungen__head .eyebrow,
.ams-startseite .ams-element-loesungen .loesungen__head .eyebrow { transition-delay: 60ms; }
.ams-startseite.ams-element-loesungen .loesungen__head .h2,
.ams-startseite .ams-element-loesungen .loesungen__head .h2 { transition-delay: 180ms; }
.ams-startseite.ams-element-loesungen .loesungen__head-sub,
.ams-startseite .ams-element-loesungen .loesungen__head-sub { transition-delay: 320ms; }
.ams-startseite.ams-element-loesungen.is-revealed .loesungen__head .eyebrow,
.ams-startseite.ams-element-loesungen.is-revealed .loesungen__head .h2,
.ams-startseite.ams-element-loesungen.is-revealed .loesungen__head-sub,
.ams-startseite .ams-element-loesungen.is-revealed .loesungen__head .eyebrow,
.ams-startseite .ams-element-loesungen.is-revealed .loesungen__head .h2,
.ams-startseite .ams-element-loesungen.is-revealed .loesungen__head-sub {
  opacity: 1;
  transform: translateY(0);
}

/* Cards kommen gestaffelt von unten — die Hover-Lift bleibt intakt,
   weil sie auf `.is-revealed transform: translateY(0)` aufsetzt. */
.ams-startseite.ams-element-loesungen .loesung-card,
.ams-startseite .ams-element-loesungen .loesung-card {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 750ms var(--ease-out),
              transform 750ms var(--ease-out),
              box-shadow 350ms var(--ease-out);
}
.ams-startseite.ams-element-loesungen.is-revealed .loesung-card,
.ams-startseite .ams-element-loesungen.is-revealed .loesung-card { opacity: 1; transform: translateY(0); }
/* Stagger-Delays gelten NUR während der Reveal-Phase. Sobald
   `is-fully-revealed` greift, fallen sie weg und der Hover-Lift
   reagiert ohne Verzögerung. */
.ams-startseite.ams-element-loesungen.is-revealed:not(.is-fully-revealed) .loesung-card:nth-child(1),
.ams-startseite .ams-element-loesungen.is-revealed:not(.is-fully-revealed) .loesung-card:nth-child(1) { transition-delay: 460ms, 460ms, 0ms; }
.ams-startseite.ams-element-loesungen.is-revealed:not(.is-fully-revealed) .loesung-card:nth-child(2),
.ams-startseite .ams-element-loesungen.is-revealed:not(.is-fully-revealed) .loesung-card:nth-child(2) { transition-delay: 580ms, 580ms, 0ms; }
.ams-startseite.ams-element-loesungen.is-revealed:not(.is-fully-revealed) .loesung-card:nth-child(3),
.ams-startseite .ams-element-loesungen.is-revealed:not(.is-fully-revealed) .loesung-card:nth-child(3) { transition-delay: 700ms, 700ms, 0ms; }

/* Sobald der Reveal-Slide-up durch ist, wechseln die Cards zurück auf die
   kurze Brand-Hover-Transition (200 ms). Sonst würde die lange 750-ms-Reveal-
   Transition auch den Hover-Lift träge wirken lassen. Die Stagger-Delays
   weiter oben gelten durch `:not(.is-fully-revealed)` ab hier nicht mehr. */
.ams-startseite.ams-element-loesungen.is-fully-revealed .loesung-card,
.ams-startseite .ams-element-loesungen.is-fully-revealed .loesung-card {
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

/* Großes Icon fadet sanft hinein, nachdem die Card-Hülle sitzt. Transform
   ist im Set drin, damit der Hover-Lift (siehe unten) smooth animiert —
   transition-delay setzt aber nur die opacity-Stufe, transform reagiert
   beim Hover sofort. */
.ams-startseite.ams-element-loesungen .loesung-card__icon-large,
.ams-startseite .ams-element-loesungen .loesung-card__icon-large {
  opacity: 0;
  transition: opacity 600ms var(--ease-out), transform 280ms var(--ease-out);
}
.ams-startseite.ams-element-loesungen.is-revealed .loesung-card__icon-large,
.ams-startseite .ams-element-loesungen.is-revealed .loesung-card__icon-large { opacity: 1; }
.ams-startseite.ams-element-loesungen.is-revealed .loesung-card:nth-child(1) .loesung-card__icon-large,
.ams-startseite .ams-element-loesungen.is-revealed .loesung-card:nth-child(1) .loesung-card__icon-large { transition-delay: 760ms, 0ms; }
.ams-startseite.ams-element-loesungen.is-revealed .loesung-card:nth-child(2) .loesung-card__icon-large,
.ams-startseite .ams-element-loesungen.is-revealed .loesung-card:nth-child(2) .loesung-card__icon-large { transition-delay: 880ms, 0ms; }
.ams-startseite.ams-element-loesungen.is-revealed .loesung-card:nth-child(3) .loesung-card__icon-large,
.ams-startseite .ams-element-loesungen.is-revealed .loesung-card:nth-child(3) .loesung-card__icon-large { transition-delay: 1000ms, 0ms; }

/* Metric-Block (Kennzahl + Label) schiebt sich zuletzt ein — parallel
   startet via JS der Count-Up der Zahl mit denselben Delays. */
.ams-startseite.ams-element-loesungen .loesung-card__metric,
.ams-startseite .ams-element-loesungen .loesung-card__metric {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}
.ams-startseite.ams-element-loesungen.is-revealed .loesung-card__metric,
.ams-startseite .ams-element-loesungen.is-revealed .loesung-card__metric { opacity: 1; transform: translateY(0); }
.ams-startseite.ams-element-loesungen.is-revealed .loesung-card:nth-child(1) .loesung-card__metric,
.ams-startseite .ams-element-loesungen.is-revealed .loesung-card:nth-child(1) .loesung-card__metric { transition-delay: 980ms; }
.ams-startseite.ams-element-loesungen.is-revealed .loesung-card:nth-child(2) .loesung-card__metric,
.ams-startseite .ams-element-loesungen.is-revealed .loesung-card:nth-child(2) .loesung-card__metric { transition-delay: 1100ms; }
.ams-startseite.ams-element-loesungen.is-revealed .loesung-card:nth-child(3) .loesung-card__metric,
.ams-startseite .ams-element-loesungen.is-revealed .loesung-card:nth-child(3) .loesung-card__metric { transition-delay: 1220ms; }

@media (prefers-reduced-motion: no-such-value) {
  .ams-startseite.ams-element-loesungen .eyebrow::before,
  .ams-startseite.ams-element-loesungen .loesungen__head .eyebrow,
  .ams-startseite.ams-element-loesungen .loesungen__head .h2,
  .ams-startseite.ams-element-loesungen .loesungen__head-sub,
  .ams-startseite.ams-element-loesungen .loesung-card,
  .ams-startseite.ams-element-loesungen .loesung-card__icon-large,
  .ams-startseite.ams-element-loesungen .loesung-card__metric,
  .ams-startseite .ams-element-loesungen .eyebrow::before,
  .ams-startseite .ams-element-loesungen .loesungen__head .eyebrow,
  .ams-startseite .ams-element-loesungen .loesungen__head .h2,
  .ams-startseite .ams-element-loesungen .loesungen__head-sub,
  .ams-startseite .ams-element-loesungen .loesung-card,
  .ams-startseite .ams-element-loesungen .loesung-card__icon-large,
  .ams-startseite .ams-element-loesungen .loesung-card__metric {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ── Lösungen-Cards (Grid + Card-Styles) ──────────────────
   Section-Padding und Head-Styles werden vom AMS Lösungen-
   Element selbst über `.ams-element-loesungen` geliefert
   (siehe weiter oben). Hier nur noch Card-Markup-Styles,
   die das Element inline rendert. */
.ams-startseite .loesungen__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ams-startseite .loesung-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px; overflow: hidden;
  min-height: 520px; cursor: pointer; color: inherit;
  border: 1px solid var(--line);
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
}
/* Hover-Lift braucht den `is-fully-revealed`-Scope, damit die Specificity
   (5 Klassen + :hover) die Reveal-Translate-Regel
   `.ams-element-loesungen.is-revealed .loesung-card { transform: translateY(0); }`
   schlägt — sonst feuern Shadow + Glow, aber der Lift bleibt unten.
   z-index hebt die gehoverte Card über die Nachbar-Cards UND über die
   nachfolgende Section, damit der Shadow nicht von darüberliegenden
   Stacking-Contexts abgeschnitten wird. */
.ams-startseite.ams-element-loesungen.is-fully-revealed .loesung-card:hover,
.ams-startseite .ams-element-loesungen.is-fully-revealed .loesung-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 22px 56px -22px rgba(0,0,0,0.22);
  z-index: 2;
}
.ams-startseite .loesung-card__visual {
  position: relative; height: 280px; overflow: hidden; flex-shrink: 0;
  background: #fff; display: flex; align-items: center; justify-content: center;
  /* Icon rückt links bündig ein — Label oben links und das Metrik-Modul
     unten links liegen im selben optischen Raster. */
  padding-left: 48px;
}
.ams-startseite .loesung-card__visual-bg {
  position: absolute; inset: 0;
  background: linear-gradient(var(--ink) 1px, transparent 1px),
              linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 22px 22px; opacity: 0.05;
  transition: opacity 350ms var(--ease-out);
}
.ams-startseite .loesung-card:hover .loesung-card__visual-bg { opacity: 0.09; }

/* Label oben links im Visual — kleiner roter Strich + Caps-Text. Statisch,
   keine Hover-Animation. */
.ams-startseite .loesung-card__label {
  position: absolute; top: 22px; left: 26px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-primary);
  z-index: 2;
}
.ams-startseite .loesung-card__label::before {
  content: ''; width: 18px; height: 2px;
  background: var(--brand-primary); border-radius: 100px;
}

.ams-startseite .loesung-card__icon-large {
  width: 88px; height: 88px; color: var(--brand-primary);
  position: relative; z-index: 1;
}
/* Hover-Skalierung des großen Icons (sanft, lift -4 px) */
.ams-startseite .loesung-card:hover .loesung-card__icon-large {
  transform: scale(1.12) translateY(-4px);
}
/* Glow-Kreis hinter dem Icon — startet versteckt + verkleinert, fadet beim
   Card-Hover ein und wächst auf die volle Größe. */
.ams-startseite .loesung-card__icon-large::before {
  content: ''; position: absolute; inset: -32px;
  border-radius: 50%; background: var(--brand-primary);
  opacity: 0; transform: scale(0.55);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
  z-index: -1; pointer-events: none;
}
.ams-startseite .loesung-card:hover .loesung-card__icon-large::before {
  opacity: 0.09; transform: scale(1);
}
.ams-startseite .loesung-card__icon-large svg { width: 100%; height: 100%; }

.ams-startseite .loesung-card__metric {
  position: absolute; bottom: 20px; left: 24px; right: 24px;
  display: flex; align-items: baseline; gap: 12px; z-index: 2;
}
.ams-startseite .loesung-card__metric-num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 2.8rem; line-height: 1; letter-spacing: -0.02em;
  color: var(--brand-primary);
}
.ams-startseite .loesung-card__metric-lbl { font-size: 0.86rem; color: var(--ink-2); line-height: 1.4; }

.ams-startseite .loesung-card__body {
  padding: 24px 26px 24px; display: flex; flex-direction: column; flex: 1; gap: 12px;
}

/* Heading-Wrapper bündelt H3 + italic Untertitel. */
.ams-startseite .loesung-card__heading {
  display: flex; flex-direction: column; gap: 4px;
}
.ams-startseite .loesung-card__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink);
  margin: 0; padding: 0;
}
.ams-startseite .loesung-card__subtitle {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 1.02rem; line-height: 1.35; letter-spacing: -0.005em;
  color: var(--ink-2); margin: 0;
}

.ams-startseite .loesung-card__desc { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; flex: 1; }
/* Schlüsselbegriffe in Body-Texten: dunklerer Ink + sichtbares Bold.
   Greift in allen Sub-Text-Bereichen, in denen wir <strong> nutzen
   (Hero-Sub, Lösungen-Sub + Cards, Konfigurator-Texte, Leistungen,
   Trust, CTA). Specificity + !important schlägt Avadas Default-Reset,
   das sonst font-weight auf das Eltern-Element zwingt. */
.ams-startseite .loesung-card__desc strong,
.ams-startseite .hero__sub strong,
.ams-startseite .loesungen__head-sub strong,
.ams-startseite .config-head__sub strong,
.ams-startseite .config-step__desc strong,
.ams-startseite .leistung__desc strong,
.ams-startseite .trust__body strong,
.ams-startseite .cta__sub strong {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

.ams-startseite .loesung-card__cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.9rem; font-weight: 600; color: var(--ink);
  margin-top: 4px;
  transition: color 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.ams-startseite .loesung-card:hover .loesung-card__cta {
  color: var(--brand-primary); transform: translateX(6px);
}
.ams-startseite .loesung-card__cta-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}


/* ────────────────────────────────────────────────
   AMS Konfigurator — komplette Section 3 als monolithisches
   Element. Self-Breakout per width:100vw + neg. Margin (analog
   AMS Hero / Lösungen). Inhalt liegt im inneren .container
   (max-width 1280). Browser-Mockup synct via JS mit dem Stepper
   (is-current-State + Crossfade der Screenshots).
   Self-Breakout-Pattern siehe docs/guidelines.md.
   ──────────────────────────────────────────────── */
.ams-startseite.ams-element-konfigurator,
.ams-startseite.ams-element-konfigurator {
  position: relative;
  /* z-index: 2 hebt die Section über die nachfolgende Leistungs-Section
     (z-index: 0), damit das unten-links bleeding-Signet (::after) in den
     Folge-Whitespace ragen darf, statt am Section-Rand abgeschnitten zu
     werden. */
  z-index: 2;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - 72px);
  padding: 120px clamp(80px, 8vw, 160px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #fff 0%, var(--surface) 22%, var(--surface) 78%, #fff 100%);
}
body.admin-bar .ams-startseite.ams-element-konfigurator,
body.admin-bar .ams-startseite.ams-element-konfigurator {
  min-height: calc(100vh - 72px - 32px);
}

/* Zwei animiert driftende Signets als dezente Ornamentik —
   oben rechts und unten links, in fast schwarzem Filter mit
   ~10% Opazität. Animation läuft endlos, prefers-reduced-motion
   stoppt sie. */
/* Signet-Position-Formel: `max(40px, calc(50vw - 720px))` ankert das
   Signet auf normalen Breiten am Viewport-Rand (40 px Abstand) und
   verschiebt es auf Ultrawide-Monitoren mit dem Viewport-Center mit, statt
   ins Nichts in die Ecke zu driften. 720 = (Container-Max 1280 + 2×80 px
   Section-Side-Padding) / 2 — also die äußere Kante des
   Content-plus-Padding-Bereichs. */
.ams-startseite.ams-element-konfigurator::before,
.ams-startseite.ams-element-konfigurator::before {
  content: '';
  position: absolute;
  top: 40px;
  right: max(40px, calc(50vw - 720px));
  width: 360px; height: 360px;
  /* Native Signet-Farbe (Brand-Rot) — kein brightness(0)-Filter, damit der
     obere Signet-Akzent rötlich statt grau wirkt. Opazität bleibt niedrig. */
  background: url('../logos/AuM_Signet.png') no-repeat center/contain;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  transform-origin: center center;
  animation: signetDriftA 22s ease-in-out infinite;
  will-change: transform;
}
.ams-startseite.ams-element-konfigurator::after,
.ams-startseite.ams-element-konfigurator::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: max(-80px, calc(50vw - 720px));
  width: 400px; height: 400px;
  background: url('../logos/AuM_Signet.png') no-repeat center/contain;
  filter: brightness(0);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  transform-origin: center center;
  animation: signetDriftB 28s ease-in-out infinite -6s;
  will-change: transform;
}
@keyframes signetDriftA {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(-14px, 16px) rotate(7deg) scale(1.06); }
  50%  { transform: translate(10px, 22px) rotate(12deg) scale(1.09); }
  75%  { transform: translate(-6px, 8px) rotate(5deg) scale(1.04); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes signetDriftB {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate(14px, -18px) rotate(-9deg) scale(1.07); }
  66%  { transform: translate(-12px, -8px) rotate(-14deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: no-such-value) {
  .ams-startseite.ams-element-konfigurator::before,
  .ams-startseite.ams-element-konfigurator::before,
  .ams-startseite.ams-element-konfigurator::after,
  .ams-startseite.ams-element-konfigurator::after { animation: none; }
}

/* .container regelt Head + Mockup + Stepper + Launch — zentriert im
   1280er Raster. */
.ams-startseite.ams-element-konfigurator > .container,
.ams-startseite.ams-element-konfigurator > .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Head */
.ams-startseite .config-head {
  text-align: center; max-width: 720px; margin: 0 auto 36px;
}
.ams-startseite .config-head .eyebrow { justify-content: center; }
.ams-startseite .config-head .h2 { margin: 0 auto 20px; text-align: center; }
.ams-startseite .config-head__sub {
  font-size: 1.1rem; color: var(--ink-2); line-height: 1.7;
}

/* Browser-Mockup — Frame mit Mac-style-Chrome (drei Dots + URL-Pill),
   darunter die Screenshot-Viewport. Vier Shots übereinander, der
   aktive Step fadet/scrollt sich rein. */
.ams-startseite .config-mockup {
  max-width: 540px; margin: 0 auto 56px;
  position: relative;
}
.ams-startseite .config-mockup__frame {
  border-radius: 12px; overflow: hidden;
  background: #F3F4F6;
  border: 1px solid rgba(20,20,20,0.08);
  box-shadow: 0 12px 28px -16px rgba(20,20,20,0.18),
              0 4px 12px -8px rgba(20,20,20,0.08);
}
.ams-startseite .config-mockup__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #ece9e2;
  border-bottom: 1px solid rgba(20,20,20,0.08);
}
.ams-startseite .config-mockup__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #d8d4cc; flex-shrink: 0;
}
.ams-startseite .config-mockup__dot:nth-child(1) { background: #f3b0a4; }
.ams-startseite .config-mockup__dot:nth-child(2) { background: #f0d5a0; }
.ams-startseite .config-mockup__dot:nth-child(3) { background: #b8d4a6; }
.ams-startseite .config-mockup__viewport {
  position: relative;
  width: 100%; aspect-ratio: 1.55 / 1;
  background: #F3F4F6; overflow: hidden;
}
.ams-startseite .config-mockup__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center center;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity 460ms var(--ease-out), transform 540ms var(--ease-out);
  pointer-events: none;
}
.ams-startseite .config-mockup__shot.is-active {
  opacity: 1; transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: no-such-value) {
  .ams-startseite .config-mockup__shot {
    transition: opacity 220ms linear; transform: none;
  }
  .ams-startseite .config-mockup__shot.is-active { transform: none; }
}

/* Stepper — vier nummerierte Kreise mit fortschrittsgesteuerter
   Verbindungslinie. --progress wird durch :has() vom aktiven oder
   gehoverten Step gesetzt. */
.ams-startseite .config-flow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  max-width: 1100px; margin: 0 auto 28px;
  position: relative;
  --progress: 0;
}
/* Aktiver Step (sticky) setzt die Progress-Position */
.ams-startseite .config-flow:has([data-step="1"].is-current) { --progress: 0; }
.ams-startseite .config-flow:has([data-step="2"].is-current) { --progress: 0.3333; }
.ams-startseite .config-flow:has([data-step="3"].is-current) { --progress: 0.6667; }
.ams-startseite .config-flow:has([data-step="4"].is-current) { --progress: 1; }
/* Hover überschreibt den aktiven Step temporär */
.ams-startseite .config-flow:has([data-step="1"]:hover) { --progress: 0; }
.ams-startseite .config-flow:has([data-step="2"]:hover) { --progress: 0.3333; }
.ams-startseite .config-flow:has([data-step="3"]:hover) { --progress: 0.6667; }
.ams-startseite .config-flow:has([data-step="4"]:hover) { --progress: 1; }

.ams-startseite .config-flow__line {
  position: absolute; top: 36px; left: 11%; right: 11%;
  height: 2px; background: var(--line); z-index: 0;
  overflow: hidden;
}
.ams-startseite .config-flow__line::after {
  content: ''; position: absolute; inset: 0;
  background: var(--brand-primary);
  transform-origin: left;
  transform: scaleX(var(--progress));
  transition: transform 550ms var(--ease-out);
}

.ams-startseite .config-step {
  position: relative; z-index: 1;
  text-align: center; padding: 0 12px;
}
.ams-startseite .config-step__circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: background-color 500ms var(--ease-out),
              border-color 500ms var(--ease-out),
              color 500ms var(--ease-out),
              transform 500ms var(--ease-out),
              box-shadow 500ms var(--ease-out);
}
.ams-startseite .config-step__circle svg {
  width: 28px; height: 28px;
  transition: transform 500ms var(--ease-out);
}

/* Aktiver oder gehoverter Step — voll rot gefüllt, gelifted. */
.ams-startseite .config-step:hover .config-step__circle,
.ams-startseite .config-step.is-current .config-step__circle {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(204,0,0,0.28);
}
.ams-startseite .config-step:hover .config-step__circle svg,
.ams-startseite .config-step.is-current .config-step__circle svg {
  transform: scale(1.08);
}

/* Vorherige Schritte (vor dem aktiven) — nur Border + Icon in Rot,
   kein Fill, kein Lift; markiert den bereits durchlaufenen Pfad. */
.ams-startseite .config-step:has(~ .config-step.is-current) .config-step__circle {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.ams-startseite .config-step__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.05rem; color: var(--ink);
  margin-bottom: 6px;
  transition: color 450ms var(--ease-out);
}
.ams-startseite .config-step:hover .config-step__title,
.ams-startseite .config-step.is-current .config-step__title { color: var(--brand-primary); }

.ams-startseite .config-step__desc {
  font-size: 0.85rem; color: var(--ink-2); line-height: 1.5;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 500ms var(--ease-out) 80ms,
              transform 500ms var(--ease-out) 80ms;
}
.ams-startseite .config-step:hover .config-step__desc,
.ams-startseite .config-step.is-current .config-step__desc {
  opacity: 1; transform: translateY(0);
}

/* Launch — ruhige Reassurance-Zeile + zentrierter CTA + Sec-Link. */
.ams-startseite .config-launch {
  max-width: 640px; margin: 0 auto;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}
.ams-startseite .config-launch__headline {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.35rem; line-height: 1.35;
  color: var(--ink); letter-spacing: -0.01em;
  max-width: 540px;
}
.ams-startseite .config-launch__headline em {
  font-style: italic; color: var(--brand-primary); font-weight: 500;
}
.ams-startseite .config-launch__actions {
  display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap; justify-content: center;
}
.ams-startseite .config-launch__sec {
  font-size: 0.88rem; color: var(--ink-3);
}
/* Inline-Sec-Link mit gleichem Underline + Arrow-Slide-Pattern wie
   die übrigen animierten Link-Buttons. Der Pfeil liegt jetzt im Link,
   damit Underline und Arrow-Nudge zusammen auf Hover greifen. */
.ams-startseite .config-launch__sec a {
  position: relative; overflow: visible;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 2px 4px;
  color: var(--brand-primary); font-weight: 500;
  text-decoration: none;
}
.ams-startseite .config-launch__sec a::before {
  content: '';
  position: absolute; left: 2px; right: 18px; bottom: 0;
  height: 2px;
  background: var(--brand-primary); border-radius: 100px;
  transform-origin: left center; transform: scaleX(0);
  transition: transform 320ms var(--ease-out);
  pointer-events: none;
}
.ams-startseite .config-launch__sec a:hover::before { transform: scaleX(1); }
.ams-startseite .config-launch__sec a .arr {
  display: inline-block; color: var(--brand-primary);
  transition: transform 320ms var(--ease-out);
}
.ams-startseite .config-launch__sec a:hover .arr { transform: translateX(5px); }
.ams-startseite .config-launch__sec a:hover { text-decoration: none; }

/* ── Konfigurator Reveal ──────────────────────────────────
   IntersectionObserver setzt `.is-revealed` auf das Element,
   sobald es in den Viewport scrollt. CSS fadet Head → Mockup →
   Progress-Linie → Steps → Launch gestaffelt ein. */
.ams-startseite.ams-element-konfigurator .config-head .eyebrow,
.ams-startseite.ams-element-konfigurator .config-head .h2,
.ams-startseite.ams-element-konfigurator .config-head__sub,
.ams-startseite.ams-element-konfigurator .config-mockup,
.ams-startseite.ams-element-konfigurator .config-flow__line,
.ams-startseite.ams-element-konfigurator .config-step,
.ams-startseite.ams-element-konfigurator .config-launch__headline,
.ams-startseite.ams-element-konfigurator .config-launch__actions,
.ams-startseite.ams-element-konfigurator .config-launch__sec {
  opacity: 0; transform: translateY(10px);
  transition: opacity 1400ms var(--ease-out),
              transform 1400ms var(--ease-out);
}
/* Progress-Linie startet als skalierter Strich von links — der
   Reveal-Effekt überlagert den is-current-Wert kurzzeitig, bevor
   er bei is-revealed übergeben wird. */
.ams-startseite.ams-element-konfigurator .config-flow__line {
  transform: scaleX(0); transform-origin: left center;
  transition: opacity 1000ms var(--ease-out),
              transform 1600ms var(--ease-out);
}

.ams-startseite.ams-element-konfigurator.is-revealed .config-head .eyebrow       { opacity: 1; transform: translateY(0); transition-delay: 150ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-head .h2            { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-head__sub           { opacity: 1; transform: translateY(0); transition-delay: 680ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-mockup              { opacity: 1; transform: translateY(0); transition-delay: 920ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-flow__line          { opacity: 1; transform: scaleX(1); transition-delay: 980ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-step                { opacity: 1; transform: translateY(0); }
.ams-startseite.ams-element-konfigurator.is-revealed .config-step:nth-child(2)   { transition-delay: 1060ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-step:nth-child(3)   { transition-delay: 1280ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-step:nth-child(4)   { transition-delay: 1500ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-step:nth-child(5)   { transition-delay: 1720ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-launch__headline    { opacity: 1; transform: translateY(0); transition-delay: 2000ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-launch__actions     { opacity: 1; transform: translateY(0); transition-delay: 2240ms; }
.ams-startseite.ams-element-konfigurator.is-revealed .config-launch__sec         { opacity: 1; transform: translateY(0); transition-delay: 2480ms; }

@media (prefers-reduced-motion: no-such-value) {
  .ams-startseite.ams-element-konfigurator .config-head .eyebrow,
  .ams-startseite.ams-element-konfigurator .config-head .h2,
  .ams-startseite.ams-element-konfigurator .config-head__sub,
  .ams-startseite.ams-element-konfigurator .config-mockup,
  .ams-startseite.ams-element-konfigurator .config-flow__line,
  .ams-startseite.ams-element-konfigurator .config-step,
  .ams-startseite.ams-element-konfigurator .config-launch__headline,
  .ams-startseite.ams-element-konfigurator .config-launch__actions,
  .ams-startseite.ams-element-konfigurator .config-launch__sec {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ────────────────────────────────────────────────
   AMS Leistungen — komplette Section 4 als monolithisches
   Element. Self-Breakout per width:100vw + neg. Margin (analog
   AMS Hero / Lösungen / Konfigurator). Inhalt im inneren
   .container (max-width 1280). Head zeigt Eyebrow + H2 links
   und einen Ghost-CTA rechts; 4-Spalten-Grid mit 8 Tiles.
   Self-Breakout-Pattern siehe docs/guidelines.md.
   ──────────────────────────────────────────────── */
.ams-startseite.ams-element-leistungen,
.ams-startseite .ams-element-leistungen {
  position: relative;
  /* z-index: 0 — bleibt explizit unter dem Konfigurator (z-index: 2), damit
     das unten-links bleeding-Signet aus Section 3 frei in den oberen
     Section-4-Whitespace ragen darf, ohne von der weißen Section-4-Fläche
     verdeckt zu werden. */
  z-index: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - 72px);
  padding: 120px clamp(80px, 8vw, 160px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}
body.admin-bar .ams-startseite.ams-element-leistungen,
body.admin-bar .ams-startseite .ams-element-leistungen {
  min-height: calc(100vh - 72px - 32px);
}
.ams-startseite.ams-element-leistungen > .container,
.ams-startseite .ams-element-leistungen > .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/* Head — Eyebrow + H2 links, Ghost-CTA rechts unten (align-items: flex-end). */
.ams-startseite .leistungen__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 56px; gap: 24px; flex-wrap: wrap;
}
.ams-startseite .leistungen__head .h2 { margin-bottom: 0; }
.ams-startseite .leistungen__head-cta { color: var(--ink-2); }

/* 4-Spalten-Tile-Grid */
.ams-startseite .leistungen__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ams-startseite .leistung {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px 24px; box-shadow: var(--shadow-card);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.ams-startseite .leistung:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.ams-startseite .leistung__icon {
  width: 36px; height: 36px; color: var(--brand-primary);
  margin-bottom: 18px; display: inline-flex; align-items: center;
}
.ams-startseite .leistung__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.1rem; margin-bottom: 8px; color: var(--ink);
}
.ams-startseite .leistung__desc { font-size: 0.85rem; color: var(--ink-2); line-height: 1.6; }

/* Inline-Mehr-Link unter dem Grid */
/* Inline-Mehr-Link unter dem Grid — gleiche Underline + Arrow-Slide-
   Animation wie die Hero-/Leistungen-Ghost-CTAs, in Brand-Rot-Text.
   Underline in Ink-Color (dunkel) für Kontrast gegen den roten Text. */
.ams-startseite .leistungen__more {
  position: relative; overflow: visible;
  display: inline-flex; align-items: center; gap: 8px; margin-top: 32px;
  font-weight: 600; color: var(--brand-primary); font-size: 0.9rem;
  padding: 4px 4px 6px;
}
.ams-startseite .leistungen__more::before {
  content: '';
  position: absolute; left: 4px; right: 22px; bottom: 0;
  height: 2px;
  background: var(--brand-primary); border-radius: 100px;
  transform-origin: left center; transform: scaleX(0);
  transition: transform 320ms var(--ease-out);
  pointer-events: none;
}
.ams-startseite .leistungen__more:hover::before { transform: scaleX(1); }
.ams-startseite .leistungen__more .arr {
  display: inline-block; color: var(--brand-primary);
  transition: transform 320ms var(--ease-out);
}
.ams-startseite .leistungen__more:hover .arr { transform: translateX(5px); }

/* ── Leistungen Scroll-In Reveal ─────────────────────────
   `is-revealed` wird von leistungen-reveal.js gesetzt, sobald die
   Section in den Viewport scrollt. Same-Element-Selektor-Form
   (`.ams-startseite.ams-element-leistungen`), weil beide Klassen auf
   demselben Knoten sitzen — analog Konfigurator-Reveal-Fix. */

/* Eyebrow-Bar wächst von links — gleiche Brand-Geste wie in
   Lösungen/Konfigurator. */
.ams-startseite.ams-element-leistungen .eyebrow::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1200ms var(--ease-out) 150ms;
}
.ams-startseite.ams-element-leistungen.is-revealed .eyebrow::before { transform: scaleX(1); }

/* Head-Elemente (Eyebrow-Text, H2, Head-CTA) und Mehr-Link starten
   unsichtbar und faden gestaffelt ein. Head-CTA hat im Render die
   Klasse `.leistungen__head-cta` (= `.btn.btn--ghost`). */
.ams-startseite.ams-element-leistungen .leistungen__head .eyebrow,
.ams-startseite.ams-element-leistungen .leistungen__head .h2,
.ams-startseite.ams-element-leistungen .leistungen__head .btn,
.ams-startseite.ams-element-leistungen .leistungen__more {
  opacity: 0; transform: translateY(10px);
  transition: opacity 1200ms var(--ease-out),
              transform 1200ms var(--ease-out);
}
.ams-startseite.ams-element-leistungen .leistungen__head .eyebrow { transition-delay: 150ms; }
.ams-startseite.ams-element-leistungen .leistungen__head .h2      { transition-delay: 380ms; }
.ams-startseite.ams-element-leistungen .leistungen__head .btn     { transition-delay: 560ms; }
.ams-startseite.ams-element-leistungen.is-revealed .leistungen__head .eyebrow,
.ams-startseite.ams-element-leistungen.is-revealed .leistungen__head .h2,
.ams-startseite.ams-element-leistungen.is-revealed .leistungen__head .btn,
.ams-startseite.ams-element-leistungen.is-revealed .leistungen__more { opacity: 1; transform: translateY(0); }

/* 8 Tiles kommen gestaffelt aus 700 → 1540 ms (120 ms je Tile) per
   Keyframe-Animation. Animation übernimmt den Endzustand, sodass
   der Hover-Lift weiterhin greift, weil :hover den transform direkt
   nach der Animation überschreibt. */
@keyframes leistungReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ams-startseite.ams-element-leistungen .leistung { opacity: 0; transform: translateY(12px); }
.ams-startseite.ams-element-leistungen.is-revealed .leistung { animation: leistungReveal 1100ms var(--ease-out) both; }
.ams-startseite.ams-element-leistungen.is-revealed .leistung:nth-child(1) { animation-delay:  700ms; }
.ams-startseite.ams-element-leistungen.is-revealed .leistung:nth-child(2) { animation-delay:  820ms; }
.ams-startseite.ams-element-leistungen.is-revealed .leistung:nth-child(3) { animation-delay:  940ms; }
.ams-startseite.ams-element-leistungen.is-revealed .leistung:nth-child(4) { animation-delay: 1060ms; }
.ams-startseite.ams-element-leistungen.is-revealed .leistung:nth-child(5) { animation-delay: 1180ms; }
.ams-startseite.ams-element-leistungen.is-revealed .leistung:nth-child(6) { animation-delay: 1300ms; }
.ams-startseite.ams-element-leistungen.is-revealed .leistung:nth-child(7) { animation-delay: 1420ms; }
.ams-startseite.ams-element-leistungen.is-revealed .leistung:nth-child(8) { animation-delay: 1540ms; }
/* Hover-Lift überschreibt den Animation-Endzustand */
.ams-startseite.ams-element-leistungen.is-revealed .leistung:hover { transform: translateY(-6px); }

/* Mehr-Link kommt als letzter, nachdem alle Tiles eingeblendet sind. */
.ams-startseite.ams-element-leistungen.is-revealed .leistungen__more { transition-delay: 1700ms; }


/* ── Trust-Section ────────────────────────────────────── */
.ams-startseite .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ams-startseite .trust__body { font-size: 1rem; color: var(--ink-2); line-height: 1.75; margin-bottom: 32px; }
.ams-startseite .trust__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.ams-startseite .trust__list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.95rem; font-weight: 500;
}
.ams-startseite .trust__list li::before {
  content: ''; width: 22px; height: 22px; flex-shrink: 0;
  background: var(--brand-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l4 4 6-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
  border-radius: 50%;
}
.ams-startseite .trust__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ams-startseite .trust__card { background: var(--surface); border-radius: var(--r-card); padding: 28px 24px; }
.ams-startseite .trust__card--lead { grid-column: span 2; background: var(--ink); color: #fff; }
.ams-startseite .trust__card-num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 2.4rem; line-height: 1; margin-bottom: 8px; letter-spacing: -0.02em;
}
.ams-startseite .trust__card-lbl { font-size: 0.88rem; color: var(--ink-2); line-height: 1.4; }
.ams-startseite .trust__card--lead .trust__card-lbl { color: rgba(255,255,255,0.65); }


/* ── Branchen-Grid (dunkel) ───────────────────────────── */
.ams-startseite .branchen__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ams-startseite .branche {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-card); padding: 24px 16px; text-align: center;
  cursor: pointer; transition: all var(--t-base) var(--ease-out);
}
.ams-startseite .branche:hover { background: rgba(204,0,0,0.18); border-color: var(--brand-primary); }
.ams-startseite .branche__icon {
  color: rgba(255,255,255,0.85); margin-bottom: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ams-startseite .branche:hover .branche__icon { color: #fff; }
.ams-startseite .branche__name { font-size: 0.88rem; font-weight: 500; color: rgba(255,255,255,0.9); }


/* ── CTA-Section ──────────────────────────────────────── */
.ams-startseite .cta { text-align: center; }
.ams-startseite .cta .eyebrow { justify-content: center; }
.ams-startseite .cta .h2 { margin: 0 auto 18px; text-align: center; }
.ams-startseite .cta__sub {
  font-size: 1.05rem; color: var(--ink-2);
  max-width: 520px; margin: 0 auto 36px; line-height: 1.7;
}
.ams-startseite .cta__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }


/* ── Footer ───────────────────────────────────────────── */
.ams-startseite .footer { background: var(--ink); color: #fff; padding: 64px 48px 32px; }
.ams-startseite .footer__top {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 32px;
}
.ams-startseite .footer__brand img { height: 36px; margin-bottom: 16px; }
.ams-startseite .footer__brand p,
.ams-startseite .footer__brand-text { font-size: 0.88rem; color: rgba(255,255,255,0.6); line-height: 1.7; max-width: 280px; }
/* Brand-Text als Block-Spans rendern (siehe class-ams-site-footer.php) —
   so vermeidet das Element wpautop-Quirks, die <br> als Absatzwechsel
   interpretieren würden. Blöcke werden durch Leerzeile getrennt und
   bekommen vertikalen Abstand; Zeilen innerhalb eines Blocks stapeln
   sich eng. */
.ams-startseite .footer__brand-line {
  display: block;
  line-height: inherit;
  margin: 0;
}
.ams-startseite .footer__brand-block + .footer__brand-block {
  margin-top: 14px;
}
.ams-startseite .footer__col-title {
  font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 14px;
}
.ams-startseite .footer__links { display: flex; flex-direction: column; gap: 10px; }
.ams-startseite .footer__links a {
  font-size: 0.88rem; color: rgba(255,255,255,0.65);
  transition: color var(--t-base);
}
.ams-startseite .footer__links a:hover { color: #fff; }
.ams-startseite .footer__bottom {
  max-width: var(--container-max); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: rgba(255,255,255,0.4); flex-wrap: wrap; gap: 16px;
}
.ams-startseite .footer__seals {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
/* Seals sind jetzt Bild-basiert (Partner-/Qualitäts-Logos) statt Text-
   Pillen. Container hält 48 px Höhe und weißen Hintergrund, damit auch
   transparente PNGs gegen den dunklen Footer-Background ausreichend
   Kontrast haben. Hover-Lift gibt visuelles Feedback. */
.ams-startseite .seal {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 6px 12px;
  background: #fff; border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.ams-startseite .seal:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.ams-startseite .seal img {
  display: block;
  height: 100%; width: auto;
  max-width: 220px;
}


/* ────────────────────────────────────────────────
   Ultrawide / Großbild — ab 1921 px Viewport-Breite bleibt der
   Lese-Content in einem zentrierten 1440 px-Korridor stehen.
   Sections behalten ihren Full-Bleed-Hintergrund, das Padding-Inline
   wächst nach der Formel `max(<basis>, (100vw − 1440) / 2)` mit.

   --container-max wird auf 1440 angehoben, damit alle inneren
   .container automatisch den größeren Korridor nutzen. Hero hat
   eine eigene Sonderbehandlung — die 1920-er Cap greift erst ab
   2200 px, damit das Standard-Viewport 1920 unverändert bleibt
   und der Layout-Sprung erst auf echten Ultrawide-Monitoren erfolgt.
   ──────────────────────────────────────────────── */
@media (min-width: 1921px) {
  .ams-startseite { --container-max: 1440px; }

  .ams-startseite.ams-element-loesungen,
  .ams-startseite .ams-element-loesungen {
    padding-inline: max(120px, calc((100vw - 1440px) / 2));
  }
  .ams-startseite.ams-element-konfigurator,
  .ams-startseite.ams-element-konfigurator {
    padding-inline: max(80px, calc((100vw - 1440px) / 2));
  }
  .ams-startseite.ams-element-leistungen,
  .ams-startseite .ams-element-leistungen {
    padding-inline: max(120px, calc((100vw - 1440px) / 2));
  }

  /* Site-Nav und Footer sitzen Full-Bleed, brauchen aber denselben
     Content-Korridor wie der Rest der Seite — Padding-Inline bekommt
     ihre kleinere Basis (48 px). */
  .ams-element-site-nav {
    padding-inline: max(48px, calc((100vw - 1440px) / 2));
  }
  .ams-startseite .footer {
    padding-inline: max(48px, calc((100vw - 1440px) / 2));
  }

  /* Hero links — Content bleibt kompakt (max 600 px) und rückt mit
     wachsendem Viewport rechtsbündig in seiner Spalte, damit er sich
     visuell die Mitte mit der Scene-Showcase teilt.
     Anders als die Vollbreit-Sektionen darf der Hero-Left nicht mit dem
     zentrierten 1440er-Korridor bündig starten — die Hero-Spalte ist nur
     ~halb so breit, sodass ein 240er-Padding den Text optisch zu weit
     nach rechts drückt. Stattdessen wächst das Padding sanft mit der
     Viewport-Breite (clamp 120 → 200px) bis zur 2200px-Schwelle. */
  .ams-startseite.ams-element-hero .hero__left,
  .ams-startseite .ams-element-hero .hero__left {
    padding-left: clamp(120px, 9vw, 200px);
    padding-right: 64px;
    align-items: flex-end;
  }
  .ams-startseite.ams-element-hero .hero__left > *,
  .ams-startseite .ams-element-hero .hero__left > * {
    max-width: 600px;
    width: 100%;
  }
  .ams-startseite.ams-element-hero .hero__left .h1,
  .ams-startseite .ams-element-hero .hero__left .h1 {
    max-width: 16ch;
  }
  .ams-startseite.ams-element-hero .hero__trust,
  .ams-startseite .ams-element-hero .hero__trust {
    max-width: 600px;
  }
}

/* Ab 2200 px wird der gesamte Hero auf 1920 px gecappt und zentriert.
   Die Scene-Showcase bekommt eine fixe Breite von 960 px (sonst würde
   sie auf Ultrawide-Monitoren grotesk groß), die linke Spalte teilt
   sich den Rest. Beide unteren Ecken des Sliders werden abgerundet,
   damit die Section visuell „eingerahmt" wirkt. 1920 selbst bleibt
   bewusst der Original-Standard — die Cap greift erst, wenn deutlich
   mehr Viewport-Breite vorhanden ist. */
@media (min-width: 2200px) {
  .ams-startseite.ams-element-hero,
  .ams-startseite .ams-element-hero {
    width: 1920px;
    /* Statt `calc(50% - 50vw)` (full-bleed) zentriert hier `calc(50% - 960px)`
       das gecappte 1920-er Element in der Viewport-Mitte. Voraussetzung:
       Avada-Wrapper sind auf width: 100% gezwungen (s. Wrapper-Reset oben),
       also entspricht 50% des Parents dem Viewport-Center. */
    margin-left: calc(50% - 960px);
    margin-right: calc(50% - 960px);
    grid-template-columns: 1fr 960px;
  }
  .ams-startseite.ams-element-hero .hero__right,
  .ams-startseite .ams-element-hero .hero__right {
    border-bottom-right-radius: 24px;
  }
  /* Padding rechnet jetzt gegen die gecappte 1920-er Hero-Breite, nicht
     mehr gegen den Viewport — sonst würde es auf 2400+ Viewports zu viel
     Leerraum auf der linken Seite geben. */
  .ams-startseite.ams-element-hero .hero__left,
  .ams-startseite .ams-element-hero .hero__left {
    padding-left: max(120px, calc((1920px - 1440px) / 2));
  }
  /* Content-Cluster eine Stufe größer skalieren — sonst wirkt der Text
     in der gecappten 1920er-Hero-Box wie ein 1280er-Layout, das in einem
     übergroßen Rahmen schwimmt. */
  .ams-startseite.ams-element-hero .hero__left > *,
  .ams-startseite .ams-element-hero .hero__left > * {
    max-width: 760px;
    width: 100%;
  }
  .ams-startseite.ams-element-hero .hero__left .h1,
  .ams-startseite .ams-element-hero .hero__left .h1 {
    max-width: 16ch;
    font-size: 4.8rem;
  }
  .ams-startseite.ams-element-hero .hero__left .hero__sub,
  .ams-startseite .ams-element-hero .hero__left .hero__sub {
    max-width: 600px;
    font-size: 1.15rem;
  }
  .ams-startseite.ams-element-hero .hero__trust,
  .ams-startseite .ams-element-hero .hero__trust {
    max-width: 760px;
  }
  .ams-startseite.ams-element-hero .stat__num,
  .ams-startseite .ams-element-hero .stat__num {
    font-size: 2.5rem;
  }
  .ams-startseite.ams-element-hero .stat__icon svg,
  .ams-startseite .ams-element-hero .stat__icon svg {
    width: 48px;
    height: 48px;
  }
  /* Außerhalb des gecappten Hero füllen diese zwei Pseudo-Elemente die
     Bereiche links und rechts bis zum Viewport-Rand mit Weiß. Damit hat
     die Section auf Ultrawide einen einheitlich weißen Außenrahmen,
     unabhängig davon, was Avada oder der Body als Hintergrund liefert
     (Cream-Streifen oder Stack-Wrapper-Tönungen werden überdeckt).
     Der Cream-Hintergrund der Scene-Showcase wird ohnehin von den
     Photos überdeckt. */
  .ams-startseite.ams-element-hero,
  .ams-startseite .ams-element-hero {
    position: relative;
  }
  .ams-startseite.ams-element-hero::before,
  .ams-startseite .ams-element-hero::before,
  .ams-startseite.ams-element-hero::after,
  .ams-startseite .ams-element-hero::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 100vw;
    background: #fff;
    pointer-events: none;
  }
  .ams-startseite.ams-element-hero::before,
  .ams-startseite .ams-element-hero::before { right: 100%; }
  .ams-startseite.ams-element-hero::after,
  .ams-startseite .ams-element-hero::after  { left: 100%; }
}

/* Ab 2600 px noch eine Stufe größer skalieren — Hero bleibt zwar auf
   1920 px gecapped, aber Headline, Sub, Trust und Stats wachsen weiter
   mit, damit die linke Spalte auf echten 4K-/5K-Monitoren nicht in
   ihrem max-width-Korridor klein wirkt. */
@media (min-width: 2600px) {
  .ams-startseite.ams-element-hero .hero__left > *,
  .ams-startseite .ams-element-hero .hero__left > * {
    max-width: 880px;
  }
  .ams-startseite.ams-element-hero .hero__left .h1,
  .ams-startseite .ams-element-hero .hero__left .h1 {
    font-size: 5.4rem;
  }
  .ams-startseite.ams-element-hero .hero__left .hero__sub,
  .ams-startseite .ams-element-hero .hero__left .hero__sub {
    max-width: 680px;
    font-size: 1.22rem;
  }
  .ams-startseite.ams-element-hero .hero__trust,
  .ams-startseite .ams-element-hero .hero__trust {
    max-width: 880px;
  }
  .ams-startseite.ams-element-hero .stat__num,
  .ams-startseite .ams-element-hero .stat__num {
    font-size: 2.7rem;
  }
}


/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .ams-startseite.ams-element-konfigurator,
  .ams-startseite.ams-element-konfigurator { padding: 96px 32px; min-height: auto; }
  .ams-startseite.ams-element-leistungen,
  .ams-startseite .ams-element-leistungen { padding: 96px 32px; min-height: auto; }
  /* Stepper vertikal — vertikale Progress-Linie statt horizontal,
     Steps als kompaktes 2-Spalten-Grid (Circle | Title+Desc). */
  .ams-startseite .config-flow {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 540px;
    margin-left: auto; margin-right: auto;
  }
  .ams-startseite .config-flow__line {
    display: block;
    top: 28px; bottom: 28px; left: 27px;
    right: auto; width: 2px; height: auto;
  }
  .ams-startseite .config-flow__line::after {
    transform-origin: top;
    transform: scaleY(1);
    transition: none;
  }
  .ams-startseite .config-step {
    text-align: left; padding: 0;
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 20px;
    align-items: start;
  }
  .ams-startseite .config-step__circle {
    width: 56px; height: 56px; margin: 0;
    grid-row: 1 / 3; grid-column: 1;
    align-self: start;
  }
  .ams-startseite .config-step__circle svg { width: 22px; height: 22px; }
  .ams-startseite .config-step__title {
    grid-column: 2; grid-row: 1;
    align-self: center; margin: 0 0 2px;
    padding-top: 12px; line-height: 1.2;
  }
  .ams-startseite .config-step__desc {
    grid-column: 2; grid-row: 2;
    opacity: 1 !important; transform: none !important;
    transition: none !important;
  }
  .ams-startseite .config-mockup { margin-bottom: 56px; }

  .ams-startseite .trust { grid-template-columns: 1fr; gap: 48px; }
  .ams-startseite .leistungen__grid { grid-template-columns: repeat(3, 1fr); }
  .ams-startseite .branchen__grid { grid-template-columns: repeat(4, 1fr); }
  .ams-startseite .footer__top { grid-template-columns: 1.6fr 1fr 1fr; }
}
@media (max-width: 800px) {
  .ams-startseite .section { padding: 80px 24px; }
  .ams-startseite.ams-element-leistungen,
  .ams-startseite .ams-element-leistungen { padding: 72px 24px; }
  .ams-startseite .loesungen__grid { grid-template-columns: 1fr; gap: 16px; }
  .ams-startseite .loesung-card { min-height: 440px; }
  .ams-startseite .loesung-card__visual { height: 220px; }
  .ams-startseite .loesung-card__icon-large { width: 72px; height: 72px; }
  .ams-startseite .loesung-card__body { padding: 24px 22px; }
  .ams-startseite.ams-element-konfigurator,
  .ams-startseite.ams-element-konfigurator { padding: 72px 24px; }
  .ams-startseite .leistungen__grid { grid-template-columns: repeat(2, 1fr); }
  .ams-startseite .branchen__grid { grid-template-columns: repeat(2, 1fr); }
  .ams-startseite .trust__cards { grid-template-columns: 1fr; }
  .ams-startseite .trust__card--lead { grid-column: span 1; }
  .ams-startseite .footer { padding: 48px 24px 24px; }
  .ams-startseite .footer__top { grid-template-columns: 1fr 1fr; }
  .ams-startseite .h2 { margin-bottom: 40px; }
}
@media (max-width: 480px) {
  .ams-startseite .leistungen__grid { grid-template-columns: 1fr; }
  .ams-startseite .footer__top { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   KONTAKT-SEITE — Page-Elements
   Vorlage: Kontakt.html. Vier Sektionen: Kontakt Hero,
   Trust Bar, Kontakt Main (Form + Team), Kontakt Anfahrt.
   Alle nutzen das Self-Breakout-Pattern und werden vom
   :has()-Wrapper-Bügel oben in dieser Datei gegen Avada-
   Spacing geschützt.
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   AMS Kontakt Hero — dunkler Foto-Hero mit Glass-
   Contact-Card und integrierter Trust-Bar.

   Aufbau:
   • Section füllt den ersten Fold: min-height: calc(100vh - 72px),
     flex column, dunkler ink-Hintergrund.
   • .kontakt-hero__photo: absolutes Foto + Gradient-Overlay
     (88 % → 35 % von links nach rechts).
   • .kontakt-hero__inner-wrap: flex:1, zentriert Content vertikal.
   • .kontakt-hero__inner: 2-col grid 1fr / 380px (Text-Block links,
     Glass-Card rechts).
   • .kontakt-hero__trust: Glass-Bar mit blur am unteren Rand.
     Trust-Bar-Items rendert das PHP-Element direkt mit; Reveal-
     Animationen werden vom Hero-Reveal mitgetriggert.

   Self-Breakout via width:100vw + neg. Margin analog AMS Hero/
   Lösungen — siehe :has()-Wrapper-Bügel oben in dieser Datei.
   ──────────────────────────────────────────────── */
.ams-startseite.ams-element-kontakt-hero,
.ams-startseite .ams-element-kontakt-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - 72px);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.admin-bar .ams-startseite.ams-element-kontakt-hero,
body.admin-bar .ams-startseite .ams-element-kontakt-hero {
  min-height: calc(100vh - 72px - 32px);
}

/* Hintergrund-Foto + Darken-Gradient */
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__photo,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__photo::after,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(26, 26, 26, 0.88) 0%,
    rgba(26, 26, 26, 0.78) 45%,
    rgba(26, 26, 26, 0.55) 75%,
    rgba(26, 26, 26, 0.35) 100%);
}

/* Inner-Wrap nimmt den freien Platz und zentriert Content vertikal */
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__inner-wrap,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__inner-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 64px 80px 48px;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__inner,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: start;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__main,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__main { padding-top: 4px; }
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__main .h1,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__main .h1 {
  color: #fff;
  margin: 8px 0 28px;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__main .eyebrow,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__main .eyebrow {
  margin-bottom: 16px;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__lead,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 580px;
  column-count: 2;
  column-gap: 36px;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__lead p,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__lead p {
  break-inside: avoid;
  margin: 0;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__lead p + p,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__lead p + p {
  margin-top: 14px;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__lead strong,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__lead strong {
  color: #fff;
  font-weight: 600;
}

/* ─ Glass-Contact-Card ─────────────────────────── */
.ams-startseite.ams-element-kontakt-hero .kontakt-card,
.ams-startseite .ams-element-kontakt-hero .kontakt-card {
  position: relative;
  background: rgba(20, 20, 20, 0.62);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 36px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__mark,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__mark {
  position: absolute;
  top: -18px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
}

/* Section-Label über dem Phone */
.ams-startseite.ams-element-kontakt-hero .kontakt-card__label,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__label svg,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__label svg {
  color: var(--brand-primary);
}

/* Telefon als großer visueller Anker */
.ams-startseite.ams-element-kontakt-hero .kontakt-card__phone,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__phone {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.4vw, 2.7rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__phone:hover,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__phone:hover {
  color: var(--brand-primary);
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__phone-meta,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__phone-meta {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 10px 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Sekundär-Liste E-Mail + Erreichbar */
.ams-startseite.ams-element-kontakt-hero .kontakt-card__alt,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__alt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__alt-row,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__alt-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: start;
  color: #fff;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__alt-row svg,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__alt-row svg {
  color: var(--brand-primary);
  margin-top: 2px;
  flex-shrink: 0;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__alt-row .lbl,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__alt-row .lbl {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 3px;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__alt-row .val,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__alt-row .val {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__alt-row a.val,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__alt-row a.val {
  transition: color 200ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__alt-row a.val:hover,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__alt-row a.val:hover {
  color: var(--brand-primary);
}

/* Primary-CTA */
.ams-startseite.ams-element-kontakt-hero .kontakt-card__cta,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__cta {
  width: 100%;
  justify-content: center;
}

/* Sekundär-Inline-CTA: scaleX-Underline-Animation + Pfeil-Down-Slide */
.ams-startseite.ams-element-kontakt-hero .kontakt-card__cta-alt,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__cta-alt {
  position: relative;
  overflow: visible;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  margin: 14px auto 0;
  padding: 8px 4px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  border: 0;
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__cta-alt::before,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__cta-alt::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 30px;
  bottom: 2px;
  height: 2px;
  background: var(--brand-primary);
  border-radius: 100px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 320ms var(--ease-out);
  pointer-events: none;
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__cta-alt .arr,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__cta-alt .arr {
  color: var(--brand-primary);
  display: inline-flex;
  transition: transform 320ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__cta-alt:hover::before,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__cta-alt:hover::before {
  transform: scaleX(1);
}
.ams-startseite.ams-element-kontakt-hero .kontakt-card__cta-alt:hover .arr,
.ams-startseite .ams-element-kontakt-hero .kontakt-card__cta-alt:hover .arr {
  transform: translateY(3px);
}
@media (prefers-reduced-motion: reduce) {
  .ams-startseite.ams-element-kontakt-hero .kontakt-card__cta-alt::before,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card__cta-alt::before,
  .ams-startseite.ams-element-kontakt-hero .kontakt-card__cta-alt .arr,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card__cta-alt .arr {
    transition: none;
  }
}

/* ─ Integrierte Trust-Bar am Hero-Boden ────────── */
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__trust,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__trust {
  position: relative;
  z-index: 1;
  background: rgba(20, 20, 20, 0.55);
  color: #fff;
  padding: 28px 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__trust-inner,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__trust-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.ams-startseite.ams-element-kontakt-hero .trust-bar__item,
.ams-startseite .ams-element-kontakt-hero .trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ams-startseite.ams-element-kontakt-hero .trust-bar__icon,
.ams-startseite .ams-element-kontakt-hero .trust-bar__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
}
.ams-startseite.ams-element-kontakt-hero .trust-bar__title,
.ams-startseite .ams-element-kontakt-hero .trust-bar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.ams-startseite.ams-element-kontakt-hero .trust-bar__desc,
.ams-startseite .ams-element-kontakt-hero .trust-bar__desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  max-width: 220px;
  margin: 0;
}

/* ─ Responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__inner-wrap,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__inner-wrap {
    padding: 56px 40px 40px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__inner,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__lead,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__lead {
    column-count: 1;
    max-width: none;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-card,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card {
    max-width: 480px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__trust,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__trust {
    padding: 32px 40px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__trust-inner,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__trust-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 640px) {
  .ams-startseite.ams-element-kontakt-hero,
  .ams-startseite .ams-element-kontakt-hero { min-height: 0; }
  body.admin-bar .ams-startseite.ams-element-kontakt-hero,
  body.admin-bar .ams-startseite .ams-element-kontakt-hero { min-height: 0; }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__inner-wrap,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__inner-wrap {
    padding: 56px 20px 40px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-card,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card {
    padding: 28px 22px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-card__phone,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card__phone {
    font-size: 1.9rem;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__trust,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__trust {
    padding: 28px 20px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__trust-inner,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__trust-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ams-startseite.ams-element-kontakt-hero .trust-bar__item,
  .ams-startseite .ams-element-kontakt-hero .trust-bar__item {
    align-items: center;
    text-align: center;
  }
  .ams-startseite.ams-element-kontakt-hero .trust-bar__desc,
  .ams-startseite .ams-element-kontakt-hero .trust-bar__desc {
    max-width: none;
  }
}

/* ────────────────────────────────────────────────
   AMS Kontakt Main — Form + Team in einem Element.
   2-Spalten-Grid 1.05fr / 1fr auf white BG. Links
   Formidable-Form, rechts editorial Team-Liste mit
   128 px Initials-Avataren. Reveal-Animationen über
   gestaffelte Transition-Delays beim Setzen der
   `.is-revealed`-Klasse (via kontakt-reveal.js).
   ──────────────────────────────────────────────── */
.ams-startseite.ams-element-kontakt-main,
.ams-startseite .ams-element-kontakt-main {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 96px 80px;
  background: #fff;
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-margin-top: 72px;
}
body.admin-bar .ams-startseite.ams-element-kontakt-main,
body.admin-bar .ams-startseite .ams-element-kontakt-main {
  min-height: calc(100vh - 72px - 32px);
}
.ams-startseite.ams-element-kontakt-main .kontakt-main__inner,
.ams-startseite .ams-element-kontakt-main .kontakt-main__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 96px;
  align-items: start;
}
.ams-startseite.ams-element-kontakt-main .kontakt-main__form-col,
.ams-startseite .ams-element-kontakt-main .kontakt-main__form-col,
.ams-startseite.ams-element-kontakt-main .kontakt-main__team-col,
.ams-startseite .ams-element-kontakt-main .kontakt-main__team-col {
  padding-top: 4px;
}
.ams-startseite.ams-element-kontakt-main .kontakt-main__form-col .h2,
.ams-startseite .ams-element-kontakt-main .kontakt-main__form-col .h2,
.ams-startseite.ams-element-kontakt-main .kontakt-main__team-col .h2,
.ams-startseite .ams-element-kontakt-main .kontakt-main__team-col .h2 {
  margin-bottom: 0;
}
.ams-startseite.ams-element-kontakt-main .kontakt-main__sub,
.ams-startseite .ams-element-kontakt-main .kontakt-main__sub {
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 12px 0 36px;
  max-width: 460px;
}
.ams-startseite.ams-element-kontakt-main .kontakt-main__sub strong,
.ams-startseite .ams-element-kontakt-main .kontakt-main__sub strong {
  color: var(--ink);
  font-weight: 600;
}

/* Form-Slot: Formidable rendert hier rein. Style kommt aus brand.css. */
.ams-startseite.ams-element-kontakt-main .kontakt-main__form,
.ams-startseite .ams-element-kontakt-main .kontakt-main__form {
  /* Wrapper für den Formidable-Shortcode. */
}
.ams-startseite.ams-element-kontakt-main .kontakt-main__form-missing,
.ams-startseite .ams-element-kontakt-main .kontakt-main__form-missing {
  padding: 24px 28px;
  border: 1px dashed #e8e6e1;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.6;
}
.ams-startseite.ams-element-kontakt-main .kontakt-main__form-missing code,
.ams-startseite .ams-element-kontakt-main .kontakt-main__form-missing code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* Team-Liste — editorial */
.ams-startseite.ams-element-kontakt-main .kontakt-main__team-list,
.ams-startseite .ams-element-kontakt-main .kontakt-main__team-list {
  display: flex;
  flex-direction: column;
}
.ams-startseite.ams-element-kontakt-main .team-row,
.ams-startseite .ams-element-kontakt-main .team-row {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid #e8e6e1;
  transition: padding 200ms var(--ease-out);
}
/* Erste Row hat keinen Border-Top — der Sub-Text darüber soll
   nicht mit einem starken Trenner abgegrenzt werden. */
.ams-startseite.ams-element-kontakt-main .team-row:first-child,
.ams-startseite .ams-element-kontakt-main .team-row:first-child {
  border-top: 0;
}
.ams-startseite.ams-element-kontakt-main .team-row:last-child,
.ams-startseite .ams-element-kontakt-main .team-row:last-child {
  border-bottom: 1px solid #e8e6e1;
}
.ams-startseite.ams-element-kontakt-main .team-row:hover,
.ams-startseite .ams-element-kontakt-main .team-row:hover {
  padding-left: 8px;
}
.ams-startseite.ams-element-kontakt-main .team-row__name,
.ams-startseite .ams-element-kontakt-main .team-row__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.ams-startseite.ams-element-kontakt-main .team-row__role,
.ams-startseite .ams-element-kontakt-main .team-row__role {
  font-size: 0.85rem;
  color: var(--brand-primary);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
/* Kontakt-Spalte rechts: Tel/Mail vertikal untereinander mit
   Icon + Text als reguläre Links, tabular-nums für die Nummer. */
.ams-startseite.ams-element-kontakt-main .team-row__cnt,
.ams-startseite .ams-element-kontakt-main .team-row__cnt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  color: var(--ink-2);
  font-size: 1.02rem;
}
.ams-startseite.ams-element-kontakt-main .team-row__cnt a,
.ams-startseite .ams-element-kontakt-main .team-row__cnt a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: color 200ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-main .team-row__cnt a:hover,
.ams-startseite .ams-element-kontakt-main .team-row__cnt a:hover {
  color: var(--brand-primary);
}
.ams-startseite.ams-element-kontakt-main .team-row__cnt svg,
.ams-startseite .ams-element-kontakt-main .team-row__cnt svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* Avatar — 128 px Kreis. Bei Foto-Override (.team-row__avatar--photo)
   wird das <img> voll abgedeckt; bei Initials-Fallback greift der
   Gradient pro Person über die avatar--{slug}-Klasse. */
.ams-startseite.ams-element-kontakt-main .team-row__avatar,
.ams-startseite .ams-element-kontakt-main .team-row__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.8rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  user-select: none;
  position: relative;
  overflow: hidden;
}
.ams-startseite.ams-element-kontakt-main .team-row__avatar:not(.team-row__avatar--photo)::after,
.ams-startseite .ams-element-kontakt-main .team-row__avatar:not(.team-row__avatar--photo)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.45), transparent 55%);
  pointer-events: none;
}
.ams-startseite.ams-element-kontakt-main .team-row__avatar--photo img,
.ams-startseite .ams-element-kontakt-main .team-row__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Gradient-Hintergründe pro Person für den Initials-Fallback */
.ams-startseite.ams-element-kontakt-main .avatar--sk,
.ams-startseite .ams-element-kontakt-main .avatar--sk { background: linear-gradient(135deg, #dfd5c2, #b8a78a); }
.ams-startseite.ams-element-kontakt-main .avatar--ib,
.ams-startseite .ams-element-kontakt-main .avatar--ib { background: linear-gradient(135deg, #f0d5ce, #d49b8e); }
.ams-startseite.ams-element-kontakt-main .avatar--rb,
.ams-startseite .ams-element-kontakt-main .avatar--rb { background: linear-gradient(135deg, #d8d6cc, #9d9b8e); }

/* ─ Reveal-Animationen ─────────────────────────── */
.ams-startseite.ams-element-kontakt-main .kontakt-main__form-col .eyebrow,
.ams-startseite .ams-element-kontakt-main .kontakt-main__form-col .eyebrow,
.ams-startseite.ams-element-kontakt-main .kontakt-main__form-col .h2,
.ams-startseite .ams-element-kontakt-main .kontakt-main__form-col .h2,
.ams-startseite.ams-element-kontakt-main .kontakt-main__form-col .kontakt-main__sub,
.ams-startseite .ams-element-kontakt-main .kontakt-main__form-col .kontakt-main__sub,
.ams-startseite.ams-element-kontakt-main .kontakt-main__form,
.ams-startseite .ams-element-kontakt-main .kontakt-main__form,
.ams-startseite.ams-element-kontakt-main .kontakt-main__team-col .eyebrow,
.ams-startseite .ams-element-kontakt-main .kontakt-main__team-col .eyebrow,
.ams-startseite.ams-element-kontakt-main .kontakt-main__team-col .h2,
.ams-startseite .ams-element-kontakt-main .kontakt-main__team-col .h2,
.ams-startseite.ams-element-kontakt-main .kontakt-main__team-col .kontakt-main__sub,
.ams-startseite .ams-element-kontakt-main .kontakt-main__team-col .kontakt-main__sub,
.ams-startseite.ams-element-kontakt-main .team-row,
.ams-startseite .ams-element-kontakt-main .team-row {
  opacity: 0;
  transform: translateY(14px);
  /* `padding` mit drin, damit die team-row::hover-Padding-Slide-
     Animation (8 px nach links) flüssig läuft. Ohne diesen
     Eintrag würde die Reveal-Transition den padding-Slide hart
     snappen lassen, weil sie die team-row-eigene transition-Liste
     überschreibt. */
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out),
              padding 200ms var(--ease-out);
  will-change: opacity, transform;
}
.ams-startseite.ams-element-kontakt-main.is-revealed .kontakt-main__form-col .eyebrow,
.ams-startseite .ams-element-kontakt-main.is-revealed .kontakt-main__form-col .eyebrow,
.ams-startseite.ams-element-kontakt-main.is-revealed .kontakt-main__form-col .h2,
.ams-startseite .ams-element-kontakt-main.is-revealed .kontakt-main__form-col .h2 { opacity: 1; transform: none; transition-delay: 60ms; }
.ams-startseite.ams-element-kontakt-main.is-revealed .kontakt-main__form-col .kontakt-main__sub,
.ams-startseite .ams-element-kontakt-main.is-revealed .kontakt-main__form-col .kontakt-main__sub { opacity: 1; transform: none; transition-delay: 180ms; }
.ams-startseite.ams-element-kontakt-main.is-revealed .kontakt-main__form,
.ams-startseite .ams-element-kontakt-main.is-revealed .kontakt-main__form { opacity: 1; transform: none; transition-delay: 300ms; }
.ams-startseite.ams-element-kontakt-main.is-revealed .kontakt-main__team-col .eyebrow,
.ams-startseite .ams-element-kontakt-main.is-revealed .kontakt-main__team-col .eyebrow,
.ams-startseite.ams-element-kontakt-main.is-revealed .kontakt-main__team-col .h2,
.ams-startseite .ams-element-kontakt-main.is-revealed .kontakt-main__team-col .h2 { opacity: 1; transform: none; transition-delay: 160ms; }
.ams-startseite.ams-element-kontakt-main.is-revealed .kontakt-main__team-col .kontakt-main__sub,
.ams-startseite .ams-element-kontakt-main.is-revealed .kontakt-main__team-col .kontakt-main__sub { opacity: 1; transform: none; transition-delay: 280ms; }
/* transition-delay als Komma-Liste — matched zur transition-Property-
   Reihenfolge (opacity, transform, padding). Padding bleibt auf 0 ms,
   damit der Hover-Padding-Slide ohne Reveal-Verzögerung läuft. */
.ams-startseite.ams-element-kontakt-main.is-revealed .team-row:nth-child(1),
.ams-startseite .ams-element-kontakt-main.is-revealed .team-row:nth-child(1) { opacity: 1; transform: none; transition-delay: 400ms, 400ms, 0ms; }
.ams-startseite.ams-element-kontakt-main.is-revealed .team-row:nth-child(2),
.ams-startseite .ams-element-kontakt-main.is-revealed .team-row:nth-child(2) { opacity: 1; transform: none; transition-delay: 500ms, 500ms, 0ms; }
.ams-startseite.ams-element-kontakt-main.is-revealed .team-row:nth-child(3),
.ams-startseite .ams-element-kontakt-main.is-revealed .team-row:nth-child(3) { opacity: 1; transform: none; transition-delay: 600ms, 600ms, 0ms; }

/* Auch der Hero und die Trust Bar bekommen Reveal-Übergänge.
   Hero: Eyebrow, H1, Lead, Card. Trust Bar: 4 Items + Icons. */
.ams-startseite.ams-element-kontakt-hero .eyebrow,
.ams-startseite .ams-element-kontakt-hero .eyebrow,
.ams-startseite.ams-element-kontakt-hero .h1,
.ams-startseite .ams-element-kontakt-hero .h1,
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__lead,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__lead,
.ams-startseite.ams-element-kontakt-hero .kontakt-card,
.ams-startseite .ams-element-kontakt-hero .kontakt-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-hero.is-revealed .eyebrow,
.ams-startseite .ams-element-kontakt-hero.is-revealed .eyebrow { opacity: 1; transform: none; transition-delay: 60ms; }
.ams-startseite.ams-element-kontakt-hero.is-revealed .h1,
.ams-startseite .ams-element-kontakt-hero.is-revealed .h1 { opacity: 1; transform: none; transition-delay: 180ms; }
.ams-startseite.ams-element-kontakt-hero.is-revealed .kontakt-hero__lead,
.ams-startseite .ams-element-kontakt-hero.is-revealed .kontakt-hero__lead { opacity: 1; transform: none; transition-delay: 320ms; }
.ams-startseite.ams-element-kontakt-hero.is-revealed .kontakt-card,
.ams-startseite .ams-element-kontakt-hero.is-revealed .kontakt-card { opacity: 1; transform: none; transition-delay: 440ms; }

/* Trust-Bar-Container selbst fadet zusammen mit den Items ein —
   sonst sieht die Glass-Bar (dunkler BG + Blur) auf der weißen
   Hero-Section sofort hart aus, bevor die Items kommen. */
.ams-startseite.ams-element-kontakt-hero .kontakt-hero__trust,
.ams-startseite .ams-element-kontakt-hero .kontakt-hero__trust {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-hero.is-revealed .kontakt-hero__trust,
.ams-startseite .ams-element-kontakt-hero.is-revealed .kontakt-hero__trust {
  opacity: 1;
  transform: none;
  transition-delay: 480ms;
}

/* Trust-Bar-Items sind Teil des Kontakt-Heros — Reveal kommt vom
   Hero-is-revealed-Trigger mit höheren Delays als Hero-Main/Card. */
.ams-startseite.ams-element-kontakt-hero .trust-bar__item,
.ams-startseite .ams-element-kontakt-hero .trust-bar__item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-hero .trust-bar__icon,
.ams-startseite .ams-element-kontakt-hero .trust-bar__icon {
  opacity: 0;
  transform: scale(0.85);
  transition: transform 700ms var(--ease-out), opacity 600ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(1),
.ams-startseite .ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(1) { opacity: 1; transform: none; transition-delay: 560ms; }
.ams-startseite.ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(2),
.ams-startseite .ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(2) { opacity: 1; transform: none; transition-delay: 660ms; }
.ams-startseite.ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(3),
.ams-startseite .ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(3) { opacity: 1; transform: none; transition-delay: 760ms; }
.ams-startseite.ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(4),
.ams-startseite .ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(4) { opacity: 1; transform: none; transition-delay: 860ms; }
.ams-startseite.ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(1) .trust-bar__icon,
.ams-startseite .ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(1) .trust-bar__icon { opacity: 1; transform: scale(1); transition-delay: 680ms; }
.ams-startseite.ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(2) .trust-bar__icon,
.ams-startseite .ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(2) .trust-bar__icon { opacity: 1; transform: scale(1); transition-delay: 780ms; }
.ams-startseite.ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(3) .trust-bar__icon,
.ams-startseite .ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(3) .trust-bar__icon { opacity: 1; transform: scale(1); transition-delay: 880ms; }
.ams-startseite.ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(4) .trust-bar__icon,
.ams-startseite .ams-element-kontakt-hero.is-revealed .trust-bar__item:nth-child(4) .trust-bar__icon { opacity: 1; transform: scale(1); transition-delay: 980ms; }

/* prefers-reduced-motion respektieren */
@media (prefers-reduced-motion: reduce) {
  .ams-startseite.ams-element-kontakt-hero .eyebrow,
  .ams-startseite .ams-element-kontakt-hero .eyebrow,
  .ams-startseite.ams-element-kontakt-hero .h1,
  .ams-startseite .ams-element-kontakt-hero .h1,
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__lead,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__lead,
  .ams-startseite.ams-element-kontakt-hero .kontakt-card,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card,
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__trust,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__trust,
  .ams-startseite.ams-element-kontakt-hero .trust-bar__item,
  .ams-startseite .ams-element-kontakt-hero .trust-bar__item,
  .ams-startseite.ams-element-kontakt-hero .trust-bar__icon,
  .ams-startseite .ams-element-kontakt-hero .trust-bar__icon,
  .ams-startseite.ams-element-kontakt-main [class*="kontakt-main__"],
  .ams-startseite .ams-element-kontakt-main [class*="kontakt-main__"],
  .ams-startseite.ams-element-kontakt-main .team-row,
  .ams-startseite .ams-element-kontakt-main .team-row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 960px) {
  .ams-startseite.ams-element-kontakt-main,
  .ams-startseite .ams-element-kontakt-main { padding: 72px 40px; }
  .ams-startseite.ams-element-kontakt-main .kontakt-main__inner,
  .ams-startseite .ams-element-kontakt-main .kontakt-main__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .ams-startseite.ams-element-kontakt-main .team-row,
  .ams-startseite .ams-element-kontakt-main .team-row {
    grid-template-columns: 96px 1fr auto;
    gap: 20px;
  }
  .ams-startseite.ams-element-kontakt-main .team-row__avatar,
  .ams-startseite .ams-element-kontakt-main .team-row__avatar {
    width: 96px;
    height: 96px;
    font-size: 2.2rem;
  }
}
@media (max-width: 600px) {
  .ams-startseite.ams-element-kontakt-main,
  .ams-startseite .ams-element-kontakt-main { padding: 64px 24px; min-height: 0; }
  body.admin-bar .ams-startseite.ams-element-kontakt-main,
  body.admin-bar .ams-startseite .ams-element-kontakt-main { min-height: 0; }
  .ams-startseite.ams-element-kontakt-main .team-row,
  .ams-startseite .ams-element-kontakt-main .team-row {
    grid-template-columns: 72px 1fr;
    gap: 16px;
  }
  .ams-startseite.ams-element-kontakt-main .team-row__avatar,
  .ams-startseite .ams-element-kontakt-main .team-row__avatar {
    width: 72px;
    height: 72px;
    font-size: 1.6rem;
  }
  .ams-startseite.ams-element-kontakt-main .team-row__cnt,
  .ams-startseite .ams-element-kontakt-main .team-row__cnt {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}

/* ────────────────────────────────────────────────
   AMS Kontakt Anfahrt — Immersive Map-Section.
   Dunkler Section-BG, Satellitenbild als Full-Bleed-
   Hintergrund, schwebende weiße Visit-Card links,
   Glas-Verkehrsmittel-Kacheln rechts unten.
   Attribution-Pill unten rechts.
   Bild: assets/photos/anfahrt_map-bg.png (austauschbar
   via Builder-Feld). Pin ist Teil des Bildes.
   ──────────────────────────────────────────────── */
.ams-startseite.ams-element-kontakt-anfahrt,
.ams-startseite .ams-element-kontakt-anfahrt {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 96px 80px;
  background: var(--ink);
  color: #fff;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  overflow: hidden;
  scroll-margin-top: 72px;
}
body.admin-bar .ams-startseite.ams-element-kontakt-anfahrt,
body.admin-bar .ams-startseite .ams-element-kontakt-anfahrt {
  min-height: calc(100vh - 72px - 32px);
}

/* Full-bleed Satellitenbild-Hintergrund + Lesbarkeits-Overlays */
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__map-bg,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__map-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__map-bg::before,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__map-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #1f2a25 var(--anfahrt-map-img) center/cover no-repeat;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__map-bg::after,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__map-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 12, 11, 0.55) 0%, rgba(10, 12, 11, 0.20) 32%, rgba(10, 12, 11, 0.10) 50%, rgba(10, 12, 11, 0.30) 75%, rgba(10, 12, 11, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 12, 11, 0.0) 60%, rgba(10, 12, 11, 0.30) 100%);
}

/* Attribution-Pill (Pflicht bei Google-Earth-Bild) */
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__attribution,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__attribution {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 3;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(10, 12, 11, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Bühne für Visit-Card und Mode-Kacheln */
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__inner,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  min-height: 580px;
}

/* Schwebende Visit-Card links zentriert */
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__card,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__card {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 460px;
  background: #fff;
  color: var(--ink);
  border-radius: 14px;
  padding: 44px 44px 36px;
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__card .eyebrow,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__card .eyebrow {
  margin-bottom: 14px;
}
.ams-startseite.ams-element-kontakt-anfahrt .h2,
.ams-startseite .ams-element-kontakt-anfahrt .h2 {
  color: var(--ink);
  margin-bottom: 14px;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__lead,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__lead {
  font-size: 0.98rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 0 28px;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__lead strong,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__lead strong {
  color: var(--ink);
  font-weight: 600;
}

/* Adress-Rows in der Visit-Card */
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__addr-row,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__addr-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__addr-row + .anfahrt__addr-row,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__addr-row + .anfahrt__addr-row {
  border-bottom: 1px solid var(--line);
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__addr-row svg,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__addr-row svg {
  color: var(--brand-primary);
  margin-top: 2px;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__addr-row-lbl,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__addr-row-lbl {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__addr-row-val,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__addr-row-val {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__addr-row-val strong,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__addr-row-val strong {
  font-weight: 700;
}
/* Defensiv gegen wpautop / Avada-p-Margins */
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__addr-row-val p,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__addr-row-val p {
  margin: 0;
  line-height: inherit;
}
/* Multi-Line-Werte als Block-Spans (statt <br>) */
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__addr-row-line,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__addr-row-line {
  display: block;
  line-height: inherit;
  margin: 0;
}

/* CTAs unter den Adress-Rows */
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__actions,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 64px;
}

/* Glas-Kacheln Verkehrsmittel (rechts unten) */
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__modes,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__modes {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 600px;
  z-index: 1;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode {
  background: rgba(10, 12, 11, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 22px 20px;
  color: #fff;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode:hover,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode:hover {
  background: rgba(10, 12, 11, 0.7);
  transform: translateY(-2px);
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode-icon,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode-icon {
  width: 32px;
  height: 32px;
  color: var(--brand-primary);
  margin-bottom: 14px;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode-lbl,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 6px;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode-val,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 4px;
}
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode-meta,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode-meta {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* ─ Reveal-Animationen ─────────────────────────── */
.ams-startseite.ams-element-kontakt-anfahrt .eyebrow,
.ams-startseite .ams-element-kontakt-anfahrt .eyebrow,
.ams-startseite.ams-element-kontakt-anfahrt .h2,
.ams-startseite .ams-element-kontakt-anfahrt .h2,
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__lead,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__lead,
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__addr-row,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__addr-row,
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__actions,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__actions,
.ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode,
.ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.ams-startseite.ams-element-kontakt-anfahrt.is-revealed .eyebrow,
.ams-startseite .ams-element-kontakt-anfahrt.is-revealed .eyebrow { opacity: 1; transform: none; transition-delay: 60ms; }
.ams-startseite.ams-element-kontakt-anfahrt.is-revealed .h2,
.ams-startseite .ams-element-kontakt-anfahrt.is-revealed .h2 { opacity: 1; transform: none; transition-delay: 180ms; }
.ams-startseite.ams-element-kontakt-anfahrt.is-revealed .anfahrt__lead,
.ams-startseite .ams-element-kontakt-anfahrt.is-revealed .anfahrt__lead { opacity: 1; transform: none; transition-delay: 300ms; }
.ams-startseite.ams-element-kontakt-anfahrt.is-revealed .anfahrt__addr-row:nth-of-type(1),
.ams-startseite .ams-element-kontakt-anfahrt.is-revealed .anfahrt__addr-row:nth-of-type(1) { opacity: 1; transform: none; transition-delay: 420ms; }
.ams-startseite.ams-element-kontakt-anfahrt.is-revealed .anfahrt__addr-row:nth-of-type(2),
.ams-startseite .ams-element-kontakt-anfahrt.is-revealed .anfahrt__addr-row:nth-of-type(2) { opacity: 1; transform: none; transition-delay: 500ms; }
.ams-startseite.ams-element-kontakt-anfahrt.is-revealed .anfahrt__actions,
.ams-startseite .ams-element-kontakt-anfahrt.is-revealed .anfahrt__actions { opacity: 1; transform: none; transition-delay: 600ms; }
.ams-startseite.ams-element-kontakt-anfahrt.is-revealed .anfahrt__mode:nth-child(1),
.ams-startseite .ams-element-kontakt-anfahrt.is-revealed .anfahrt__mode:nth-child(1) { opacity: 1; transform: none; transition-delay: 740ms; }
.ams-startseite.ams-element-kontakt-anfahrt.is-revealed .anfahrt__mode:nth-child(2),
.ams-startseite .ams-element-kontakt-anfahrt.is-revealed .anfahrt__mode:nth-child(2) { opacity: 1; transform: none; transition-delay: 840ms; }
.ams-startseite.ams-element-kontakt-anfahrt.is-revealed .anfahrt__mode:nth-child(3),
.ams-startseite .ams-element-kontakt-anfahrt.is-revealed .anfahrt__mode:nth-child(3) { opacity: 1; transform: none; transition-delay: 940ms; }

@media (prefers-reduced-motion: reduce) {
  .ams-startseite.ams-element-kontakt-anfahrt .eyebrow,
  .ams-startseite .ams-element-kontakt-anfahrt .eyebrow,
  .ams-startseite.ams-element-kontakt-anfahrt .h2,
  .ams-startseite .ams-element-kontakt-anfahrt .h2,
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__lead,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__lead,
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__addr-row,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__addr-row,
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__actions,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__actions,
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Responsive: Tablet — Visit-Card und Modes untereinander stacken */
@media (max-width: 1100px) {
  .ams-startseite.ams-element-kontakt-anfahrt,
  .ams-startseite .ams-element-kontakt-anfahrt { padding: 72px 40px; }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__inner,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__card,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__card {
    position: static;
    transform: none;
    width: 100%;
    max-width: 520px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__modes,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__modes {
    position: static;
    width: 100%;
  }
}

/* Responsive: Mobile — Modes 1-spaltig */
@media (max-width: 640px) {
  .ams-startseite.ams-element-kontakt-anfahrt,
  .ams-startseite .ams-element-kontakt-anfahrt { padding: 64px 24px; min-height: 0; }
  body.admin-bar .ams-startseite.ams-element-kontakt-anfahrt,
  body.admin-bar .ams-startseite .ams-element-kontakt-anfahrt { min-height: 0; }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__card,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__card {
    padding: 32px 28px 28px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__actions,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__actions {
    margin-top: 32px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__modes,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__modes {
    grid-template-columns: 1fr;
  }
}

/* ────────────────────────────────────────────────
   KONTAKT-SEITE — Ultrawide-Layer (≥ 1600 px)
   Hintergründe bleiben full-bleed; Inner-Container
   cappen bei 1440 px und Side-Padding wächst gleichmäßig
   mit dem Viewport, so dass der Content immer zentriert
   bleibt. Gleiche Konvention wie in Kontakt.html
   (Startseite verwendet dieselbe Logik).
   ──────────────────────────────────────────────── */
@media (min-width: 1600px) {
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__inner,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__inner,
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__trust-inner,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__trust-inner,
  .ams-startseite.ams-element-kontakt-main .kontakt-main__inner,
  .ams-startseite .ams-element-kontakt-main .kontakt-main__inner,
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__inner,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__inner {
    max-width: 1440px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__inner-wrap,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__inner-wrap {
    padding-left: max(80px, calc((100vw - 1440px) / 2));
    padding-right: max(80px, calc((100vw - 1440px) / 2));
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__trust,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__trust {
    padding-left: max(80px, calc((100vw - 1440px) / 2));
    padding-right: max(80px, calc((100vw - 1440px) / 2));
  }
  .ams-startseite.ams-element-kontakt-main,
  .ams-startseite .ams-element-kontakt-main {
    padding-left: max(80px, calc((100vw - 1440px) / 2));
    padding-right: max(80px, calc((100vw - 1440px) / 2));
  }
  .ams-startseite.ams-element-kontakt-anfahrt,
  .ams-startseite .ams-element-kontakt-anfahrt {
    padding-left: max(80px, calc((100vw - 1440px) / 2));
    padding-right: max(80px, calc((100vw - 1440px) / 2));
  }
}

/* ────────────────────────────────────────────────
   KONTAKT-HERO — Ultrawide-Skalierung (≥ 2200 px /
   ≥ 2600 px). Headline, Lead, Glass-Card und Trust-
   Bar wachsen mit, sonst wirken sie in der gecappten
   1440er-Box verloren. Spiegelt die Stufen aus
   Kontakt.html bzw. Startseite. */
@media (min-width: 2200px) {
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__inner,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__inner {
    grid-template-columns: 1fr 460px;
    gap: 96px;
  }
  .ams-startseite.ams-element-kontakt-hero .h1,
  .ams-startseite .ams-element-kontakt-hero .h1 {
    font-size: 4.6rem;
    line-height: 1.05;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__lead,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__lead {
    font-size: 1.28rem;
    max-width: 720px;
    column-gap: 48px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-card,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card {
    padding: 44px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-card__phone,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card__phone {
    font-size: 3.1rem;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-card__alt-row .val,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card__alt-row .val {
    font-size: 1rem;
  }
  .ams-startseite.ams-element-kontakt-hero .trust-bar__title,
  .ams-startseite .ams-element-kontakt-hero .trust-bar__title {
    font-size: 1.08rem;
  }
  .ams-startseite.ams-element-kontakt-hero .trust-bar__desc,
  .ams-startseite .ams-element-kontakt-hero .trust-bar__desc {
    font-size: 0.92rem;
    max-width: 260px;
  }
  .ams-startseite.ams-element-kontakt-hero .trust-bar__icon,
  .ams-startseite .ams-element-kontakt-hero .trust-bar__icon {
    width: 46px;
    height: 46px;
  }

  /* Kontakt-Anfahrt — Visit-Card und Mode-Kacheln wachsen mit */
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__inner,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__inner {
    min-height: 640px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__card,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__card {
    width: 520px;
    padding: 52px 52px 44px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__lead,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__lead {
    font-size: 1.05rem;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__modes,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__modes {
    width: 680px;
    gap: 18px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode {
    padding: 24px 22px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode-val,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode-val {
    font-size: 1.65rem;
  }
}
@media (min-width: 2600px) {
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__inner,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__inner {
    grid-template-columns: 1fr 520px;
    gap: 112px;
  }
  .ams-startseite.ams-element-kontakt-hero .h1,
  .ams-startseite .ams-element-kontakt-hero .h1 {
    font-size: 5.2rem;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-hero__lead,
  .ams-startseite .ams-element-kontakt-hero .kontakt-hero__lead {
    font-size: 1.36rem;
    max-width: 820px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-card,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card {
    padding: 52px;
  }
  .ams-startseite.ams-element-kontakt-hero .kontakt-card__phone,
  .ams-startseite .ams-element-kontakt-hero .kontakt-card__phone {
    font-size: 3.5rem;
  }
  .ams-startseite.ams-element-kontakt-hero .trust-bar__title,
  .ams-startseite .ams-element-kontakt-hero .trust-bar__title {
    font-size: 1.14rem;
  }
  .ams-startseite.ams-element-kontakt-hero .trust-bar__desc,
  .ams-startseite .ams-element-kontakt-hero .trust-bar__desc {
    font-size: 0.96rem;
    max-width: 280px;
  }

  /* Kontakt-Anfahrt — weitere Stufe */
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__inner,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__inner {
    min-height: 700px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__card,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__card {
    width: 580px;
    padding: 60px 56px 48px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__lead,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__lead {
    font-size: 1.1rem;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__modes,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__modes {
    width: 760px;
  }
  .ams-startseite.ams-element-kontakt-anfahrt .anfahrt__mode-val,
  .ams-startseite .ams-element-kontakt-anfahrt .anfahrt__mode-val {
    font-size: 1.78rem;
  }
}