/* ============================================================
   A&M Service – Brand Layer (Avada Child) v1.3.40
   ------------------------------------------------------------
   KANONISCHE, SEITENÜBERGREIFENDE BRAND-STYLESHEET.
   Single Source: Repo `ci-neu/assets/brand.css`.
   Deploy: per SFTP -> wp-content/themes/Avada-Child/assets/css/brand.css
   Enqueue: functions.php (Handle `ams-brand`), lädt nach Avadas
   fusion-dynamic-css, damit Werte hier Avada-Defaults überschreiben.

   Prinzip: Element braucht ein Aussehen -> CSS-Klasse aus dieser
   Datei zuweisen. Styling fehlt -> hier konfliktfrei ergänzen.
   Keine zweite Custom-CSS-Datei (frühere ams-custom.css + Test-mu-
   plugin sind eingepflegt und entfernt).

   CI-Referenz / Tokens: ci-neu/ (01-design-tokens.md etc.).
   ============================================================ */


/* ------------------------------------------------------------
   FONTS – Roboto Variable, self-hosted
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}


/* ------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------ */
:root {
  /* Brand */
  --brand-primary:        #CC0000;
  --brand-primary-dark:   #990000;
  --brand-primary-glow:   #E8001F;
  --brand-primary-shade:  #7A0000;

  /* Neutrals */
  --navy:                 #1a2744;
  --ink:                  #1a1a1a;
  --ink-2:                #4a4a4a;
  --ink-3:                #7a7a7a;
  --line:                 #e8e6e1;
  --surface:              #f5f4f2;
  --surface-2:            #fafaf8;
  --white:                #ffffff;

  /* Semantic */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-on-dark:    #ffffff;
  --fg-on-dark-2:  rgba(255,255,255,0.65);
  --fg-on-dark-3:  rgba(255,255,255,0.4);
  --fg-accent:     var(--brand-primary);
  --bg-1:          var(--white);
  --bg-2:          var(--surface);
  --bg-3:          var(--surface-2);
  --bg-dark:       var(--ink);
  --bg-accent:     var(--brand-primary);
  --border-1:      var(--line);
  --border-2:      rgba(255,255,255,0.1);

  --success: #2f7a3d;
  --warning: #c97a1a;
  --danger:  #CC0000;

  /* Type families */
  --font-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Type roles – all headlines run Medium (500) */
  --t-display: 500 clamp(3rem, 5vw, 4.25rem)/1.05 var(--font-display);
  --t-h1:      500 clamp(2.5rem, 4vw, 3.5rem)/1.1 var(--font-display);
  --t-h2:      500 clamp(2rem, 3vw, 2.75rem)/1.15 var(--font-display);
  --t-h3:      500 1.5rem/1.3 var(--font-sans);
  --t-h4:      500 1.15rem/1.4 var(--font-sans);
  --t-lead:    400 1.125rem/1.65 var(--font-sans);
  --t-body:    400 1rem/1.7 var(--font-sans);
  --t-small:   400 0.875rem/1.55 var(--font-sans);
  --t-caption: 500 0.75rem/1.4 var(--font-sans);

  --t-eyebrow-size: 0.78rem;
  --t-eyebrow-tracking: 0.12em;

  /* Spacing */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px; --s-9: 80px; --s-10: 120px;

  --section-pad-desktop: 120px;
  --section-pad-tablet:   80px;
  --section-pad-mobile:   64px;

  --container-max: 1280px;
  --container-pad: 80px;
  --nav-height:    72px;

  /* Radii */
  --r-button: 100px;
  --r-card:  10px;
  --r-pill: 100px;
  --r-image:  8px;

  /* Shadows */
  --shadow-card:       0 4px 16px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 12px 32px rgba(0,0,0,0.10);
  --shadow-cta:        0 4px 16px rgba(204,0,0,0.25);
  --shadow-cta-hover:  0 8px 24px rgba(204,0,0,0.35);
  --shadow-overlay:    0 20px 60px rgba(0,0,0,0.08);
  --ring-focus:        0 0 0 3px rgba(204,0,0,0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 150ms;
  --t-base: 200ms;
  --t-slow: 400ms;
}


/* ------------------------------------------------------------
   AVADA OVERRIDES – body, headlines, links
   Beim Avada-Builder bitte Google-Fonts-Anbindung deaktivieren
   (Avada → Options → Typography), damit unser Roboto greift.
   ------------------------------------------------------------ */
body,
.fusion-body {
  font: var(--t-body);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* overflow-x: clip verhindert horizontale Scrollbar durch
   Full-Viewport-Breakouts (z.B. .ams-element-loesungen mit
   width:100vw + negativem Margin) und bricht — anders als
   overflow:hidden — keine position:sticky-Ketten.
   Body und Avada-Wrapper bekommen den Clip ebenfalls, sonst
   entsteht in der Boxed-Layout-Kette ein zweiter Scrollable-
   Container.

   HINWEIS: Custom Brand-Scrollbar (rot) wurde entfernt — er
   hat sichtbar zu Problemen mit doppelten Scrollbars in Avadas
   Boxed-Wrapper-Kette geführt (`::-webkit-scrollbar` matcht
   jeden inneren Scrollbar). Nicht prioritär, kann später als
   reines Brand-Detail wieder rein, wenn die Scrollable-
   Container-Situation klarer ist. */
html { overflow-x: clip !important; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body,
#boxed-wrapper,
#wrapper,
#wrapper.fusion-wrapper,
.fusion-wrapper,
main#main,
main.clearfix,
.fusion-tb-header,
.fusion-tb-footer {
  overflow-x: clip !important;
  overflow-y: clip !important;
}

h1, .fusion-title h1 { font: var(--t-h1); color: var(--fg-1); letter-spacing: -0.02em; }
h2, .fusion-title h2 { font: var(--t-h2); color: var(--fg-1); letter-spacing: -0.01em; }
h3, .fusion-title h3 { font: var(--t-h3); color: var(--fg-1); }
h4, .fusion-title h4 { font: var(--t-h4); color: var(--fg-1); }

/* Brand-Voice: Headlines im Sentence Case rendern. Avada hatte auf
   der Live-Konfiguration text-transform:capitalize global auf Headings
   gesetzt — das wurde sichtbar als „Drei Wege, Wie Wir Ihren Erfolg
   Steigern." statt korrekter Sentence-Case-Schreibweise. !important,
   weil Avada das per dynamischem inline-CSS mit hoher Spezifität
   injiziert. Card-Titel und Element-spezifische .h2-Klassen mit drin. */
h1, h2, h3, h4, h5, h6,
.fusion-title h1, .fusion-title h2, .fusion-title h3, .fusion-title h4,
.h1, .h2, .h3, .h4,
.loesung-card__title,
.entry-title,
.fusion-post-title,
.product_title {
  text-transform: none !important;
}

h1 em, h2 em,
.fusion-title h1 em, .fusion-title h2 em {
  font-style: italic;
  color: var(--brand-primary);
}

/* Avada-spezifische Title-Klassen — Avada injiziert dort dynamisches CSS
   mit höherer Spezifität (z.B. Inter, 600). !important nur auf
   font-family und font-weight, damit unser Brand-Type konsequent greift. */
.entry-title,
.entry-title a,
.fusion-post-title,
.fusion-post-title a,
.fusion-page-title-bar h1,
.fusion-page-title-bar h2,
.fusion-blog-shortcode .entry-title,
.fusion-blog-layout-post .entry-title,
.fusion-blog-layout-classic .entry-title,
.fusion-blog-layout-large .entry-title,
.fusion-blog-layout-grid .entry-title,
.product_title,
.fusion-meta-info-title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}
a:hover { color: var(--brand-primary-dark); }


/* ------------------------------------------------------------
   BRAND HELPERS – nutzbar als CSS-Class im Avada-Builder
   ------------------------------------------------------------ */

/* Headline-Pattern */
.am-h1, h1.am { font: var(--t-h1); color: var(--ink); letter-spacing: -0.02em; }
.am-h1 em, h1.am em { font-style: italic; color: var(--brand-primary); }
.am-h2, h2.am { font: var(--t-h2); color: var(--ink); letter-spacing: -0.01em; }
.am-h2 em, h2.am em { font-style: italic; color: var(--brand-primary); }
.am-h3, h3.am { font: var(--t-h3); color: var(--ink); }
.am-h4, h4.am { font: var(--t-h4); color: var(--ink); }

.am-lead    { font: var(--t-lead);    color: var(--ink-2); }
.am-body    { font: var(--t-body);    color: var(--ink); }
.am-small   { font: var(--t-small);   color: var(--ink-2); }
.am-caption { font: var(--t-caption); color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }

/* Eyebrow: red small caps with leading bar */
.am-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--t-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.am-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--brand-primary);
}

/* Container helper */
.am-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}


@media (max-width: 1024px) {
  .am-container { padding-left: var(--s-6); padding-right: var(--s-6); }
}


/* ------------------------------------------------------------
   AMS SECTION — Brand-Section-Wrapper
   ------------------------------------------------------------
   Wird als CSS-Klasse auf Avada-`[fusion_builder_container]`s gelegt
   (via Builder-Klassen-Feld). Bündelt zwei Brand-Konventionen:

   1. **Theme-Farben** über drei Modifier — light (transparent / Standard),
      surface (warm off-white), dark (Ink + white text).
   2. **Section-Padding** aus Brand-Tokens (`--section-pad-*` vertikal,
      `--container-pad` horizontal mit Mobile-Reduktion).

   Avada-Container-Hinweis: für edge-to-edge `hundred_percent="yes"` am
   Container setzen, Padding-Attribute leer lassen (kommt aus dieser CSS-
   Klasse). Dark-Theme braucht zusätzlich keine Avada-`background_color`
   mehr — Klasse bringt's mit.
   ------------------------------------------------------------ */

/* Specificity-Boost via doppelter `.ams-section.ams-section`-Selector (Spec 0,2,0)
   gegen Avadas eigene `.fusion-fullwidth`-Padding-Defaults. Zusätzlich CSS-Vars
   überschreiben (`--awb-padding-*`), damit Avada-Mechaniken die padding via
   diesen Variablen auflösen, ebenfalls unsere Brand-Tokens nutzen. */
.ams-section.ams-section {
  position: relative;
  --awb-padding-top:    var(--section-pad-desktop);
  --awb-padding-right:  var(--container-pad);
  --awb-padding-bottom: var(--section-pad-desktop);
  --awb-padding-left:   var(--container-pad);
  padding-top: var(--section-pad-desktop);
  padding-bottom: var(--section-pad-desktop);
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Theme-Varianten. `.ams-section--light` ist Default-Wahl, aber kommt
   explizit als Modifier — damit der Builder-User in seinem Klassen-Feld
   bewusst Theme wählt statt versehentlich auf Default-Transparent zu
   landen (was bei Avada-Container-Hintergründen unklar wäre).

   Doppelter Klassen-Selektor `.ams-section.ams-section--{theme}` (Spec 0,2,0)
   schlägt Avadas globale `--full_width_bg_color: rgba(255,255,255,0)`-
   Default-Mechanik (0,1,0). Zusätzlich überschreiben wir die Avada-CSS-Var
   `--awb-background-color` mit unserem Brand-Token, damit andere Avada-
   Mechaniken die unsere Section-BG erwarten würden, ebenfalls den korrekten
   Wert bekommen. Belt + suspenders gegen Avada-Cascade-Eigenheiten. */
.ams-section.ams-section--light {
  --awb-background-color: var(--white);
  --full_width_bg_color: var(--white);
  background: var(--white);
  color: var(--ink);
}
.ams-section.ams-section--surface {
  --awb-background-color: var(--surface);
  --full_width_bg_color: var(--surface);
  background: var(--surface);
  color: var(--ink);
}
.ams-section.ams-section--dark {
  --awb-background-color: var(--ink);
  --full_width_bg_color: var(--ink);
  background: var(--ink);
  color: var(--fg-on-dark);
}

/* Dark-Theme — Brand-Headlines auf white für jeden Container, der
   `.ams-section--dark` trägt (z. B. der dunkle Footer). */
.ams-section--dark h1,
.ams-section--dark h2,
.ams-section--dark h3,
.ams-section--dark h4 { color: var(--fg-on-dark); }

/* Responsive Section-Padding. Vertikal aus den Brand-Tokens, horizontal
   reduziert sich von 80 px (Desktop) → 24 px (Mobile) für lesbare
   Rand-Abstände auf schmalen Bildschirmen. Doppelter Selector wieder
   nötig, damit der Boost auch hier greift. */
@media (max-width: 1024px) {
  .ams-section.ams-section {
    --awb-padding-top:    var(--section-pad-tablet);
    --awb-padding-right:  var(--s-6);
    --awb-padding-bottom: var(--section-pad-tablet);
    --awb-padding-left:   var(--s-6);
    padding-top: var(--section-pad-tablet);
    padding-bottom: var(--section-pad-tablet);
    padding-left: var(--s-6);
    padding-right: var(--s-6);
  }
}
@media (max-width: 640px) {
  .ams-section.ams-section {
    --awb-padding-top:    var(--section-pad-mobile);
    --awb-padding-right:  24px;
    --awb-padding-bottom: var(--section-pad-mobile);
    --awb-padding-left:   24px;
    padding-top: var(--section-pad-mobile);
    padding-bottom: var(--section-pad-mobile);
    padding-left: 24px;
    padding-right: 24px;
  }
}


/* ------------------------------------------------------------
   HEADER HELPERS – als CSS-Class im Avada Header-Layout vergeben
   ------------------------------------------------------------ */

/* .ams-mainmenu — auf das Menu-Element legen.
   Setzt den Abstand zwischen den Menü-Items und die Brand-Hover-Farbe. */
.ams-mainmenu ul,
.ams-mainmenu .menu,
.ams-mainmenu .awb-menu__main-ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ams-mainmenu li { margin: 0; }
.ams-mainmenu a,
.ams-mainmenu .awb-menu__main-anchor {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}
.ams-mainmenu a:hover,
.ams-mainmenu .awb-menu__main-anchor:hover {
  color: var(--brand-primary);
}

/* .ams-cta-button — auf das Kontakt-Button-Element legen.
   Setzt Brand-Primary mit Hover-Variante. !important nur dort, wo
   Avadas inline-styles unsere Tokens sonst überlagern. */
.ams-cta-button,
.ams-cta-button .fusion-button,
.ams-cta-button a.fusion-button,
.ams-cta-button button {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  border-radius: var(--r-button) !important;
  padding: 10px 20px !important;
  font-weight: 600;
  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-cta-button:hover,
.ams-cta-button .fusion-button:hover,
.ams-cta-button a.fusion-button:hover {
  background: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-2px);
}

/* .ams-header — auf den Header-Container im Avada-Layout legen.
   Background mit leichter Transparenz + Backdrop-Blur + Bottom-Border.
   Sticky-Verhalten bleibt Avada-Container-Setting (UI). */
.ams-header,
.ams-header.fusion-flex-container {
  background: rgba(255, 255, 255, 0.96) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* .ams-header-container / .ams-footer-container — auf den Avada-
   Container im Header- bzw. Footer-Layout legen. Zwingt full-width
   und entfernt das Avada-Standard-Padding sowie die Site-Width-
   Begrenzung. Avada nutzt sowohl Bindestrich- als auch Unterstrich-
   Varianten der Column-Klassen — beide einschließen. */
.ams-header-container,
.ams-footer-container,
.ams-header-container .fusion-builder-row,
.ams-footer-container .fusion-builder-row,
.ams-header-container .fusion-row,
.ams-footer-container .fusion-row,
.ams-header-container .fusion-flex-content-wrap,
.ams-footer-container .fusion-flex-content-wrap,
.ams-header-container .fusion-builder-column,
.ams-footer-container .fusion-builder-column,
.ams-header-container .fusion_builder_column,
.ams-footer-container .fusion_builder_column,
.ams-header-container .fusion-layout-column,
.ams-footer-container .fusion-layout-column,
.ams-header-container .fusion-flex-column,
.ams-footer-container .fusion-flex-column,
.ams-header-container .fusion-column-wrapper,
.ams-footer-container .fusion-column-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Header + Footer zusätzlich vertical-Spacing raus. Avada setzt für
   Columns eine Inline-CSS-Variable --awb-margin-bottom-large:20px —
   direkter Override mit margin-bottom:0 !important schlägt das.
   Beim Header sichtbar geworden als Lücke zwischen Site-Nav und
   Section 1 (Avada-Default-Spacing der Layout-Section-Spalte). */
.ams-header-container,
.ams-header-container .fusion-builder-row,
.ams-header-container .fusion-flex-content-wrap,
.ams-header-container .fusion-builder-column,
.ams-header-container .fusion_builder_column,
.ams-header-container .fusion-layout-column,
.ams-header-container .fusion-flex-column,
.ams-header-container .fusion-column-wrapper,
.ams-footer-container,
.ams-footer-container .fusion-builder-row,
.ams-footer-container .fusion-flex-content-wrap,
.ams-footer-container .fusion-builder-column,
.ams-footer-container .fusion_builder_column,
.ams-footer-container .fusion-layout-column,
.ams-footer-container .fusion-flex-column,
.ams-footer-container .fusion-column-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* .ams-fullwidth-section — Self-Breakout per 100vw + negativem
   Margin. Bricht den Section-Container aus jedem Parent-Padding aus,
   inklusive Avadas Default-Page-Wrapper (.fusion-row mit padding:
   0 30px), der sonst eine ~30 px Restlücke an den Seiten hinterlässt.
   Identisches Muster wie das Self-Breakout im AMS Lösungen-Element.
   COLUMNS WERDEN NICHT ANGEFASST — Spalten-Layout (50/50 etc.)
   bleibt intakt. Im Builder zusätzlich am Container "Interior
   Content Width: 100% Width" setzen, damit auch die Inner-Row die
   Site-Width-Begrenzung verliert.
   max-width: 100vw verhindert horizontalen Overflow bei sehr breiten
   Viewports; overflow-x: clip auf html (siehe oben) fängt eventuelle
   Sub-pixel-Reste ab. */
.ams-fullwidth-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* Avada legt auf jede Builder-Column ein Default-Gutter über die
   CSS-Variable --awb-spacing-left/right-large:3.84% (analog medium/
   small), das als padding angewendet wird. In Edge-to-Edge-Sektionen
   nicht erwünscht — Variablen UND padding/margin direkt auf 0
   überschreiben. WIDTH wird NICHT angefasst (--awb-width-large:50%
   etc. bleibt erhalten), damit das Spalten-Verhältnis (50/50, 1/3
   etc.) intakt bleibt und Spalten nicht umbrechen. */
.ams-fullwidth-section .fusion-builder-column,
.ams-fullwidth-section .fusion_builder_column,
.ams-fullwidth-section .fusion-flex-column,
.ams-fullwidth-section .fusion-layout-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --awb-spacing-left-large: 0% !important;
  --awb-spacing-right-large: 0% !important;
  --awb-spacing-left-medium: 0% !important;
  --awb-spacing-right-medium: 0% !important;
  --awb-spacing-left-small: 0% !important;
  --awb-spacing-right-small: 0% !important;
}

/* Damit position:sticky am Header-Element greift, müssen alle
   umgebenden Container overflow:visible haben. */
.ams-header-container,
.ams-footer-container,
.ams-header-container .fusion-builder-row,
.ams-footer-container .fusion-builder-row,
.ams-header-container .fusion-builder-column,
.ams-footer-container .fusion-builder-column,
.ams-header-container .fusion_builder_column,
.ams-footer-container .fusion_builder_column {
  overflow: visible !important;
}

/* ────────────────────────────────────────────────
   FORMIDABLE FORMS — Boxed Brand-Style
   Globaler Style für alle Formidable-Forms auf der
   Site. Ableitung aus Kontakt.html (aktuelle Iteration):
   boxed Inputs mit weichem Rahmen, Small-Caps-Labels,
   Submit als Brand-Primary-Pill. Brand-Rot ist Akzent
   für Focus (mit 3 px Glow), Required und Error.
   Selektoren prefixed mit `.frm_forms` — andere
   <form>-Elemente bleiben unberührt.
   ──────────────────────────────────────────────── */

/* Wrapper-Reset */
.frm_forms,
.frm_forms .frm_form_fields {
  font-family: var(--font-display);
  color: var(--ink);
}
.frm_forms .frm_form_fields > fieldset { border: 0; padding: 0; margin: 0; }

/* Field-Container */
.frm_forms .frm_form_field,
.frm_forms .frm_field_container {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Labels — Small-Caps editorial (bleibt wie Vorlage) */
.frm_forms label.frm_primary_label,
.frm_forms .frm_primary_label {
  display: block;
  font-family: var(--font-sans, var(--font-display));
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.frm_forms .frm_required {
  color: var(--brand-primary);
  margin-left: 4px;
}

/* Description (kleiner Hilfetext unter dem Label) */
.frm_forms .frm_description {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.45;
}

/* Inputs — boxed: weißer BG, weicher Border, Radius 6 px */
.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="tel"],
.frm_forms input[type="url"],
.frm_forms input[type="number"],
.frm_forms input[type="password"],
.frm_forms input[type="date"],
.frm_forms textarea,
.frm_forms select {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line, #e8e6e1);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}
.frm_forms textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}
.frm_forms select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  padding-right: 44px;
  cursor: pointer;
}
.frm_forms input::placeholder,
.frm_forms textarea::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

/* Focus — Brand-Rot-Border + dezenter 3 px Brand-Glow */
.frm_forms input:focus,
.frm_forms textarea:focus,
.frm_forms select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--ring-focus);
}

/* Checkbox / Radio — Brand-Rot via accent-color */
.frm_forms .frm_checkbox,
.frm_forms .frm_radio {
  margin-top: 4px;
}
.frm_forms .frm_checkbox label,
.frm_forms .frm_radio label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.55;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.frm_forms .frm_checkbox input[type="checkbox"],
.frm_forms .frm_radio input[type="radio"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}
.frm_forms .frm_checkbox label a,
.frm_forms .frm_radio label a {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

/* Submit — Brand-Primary Pill (analog .btn--primary) */
.frm_forms .frm_submit {
  margin-top: 18px;
}
.frm_forms .frm_button_submit,
.frm_forms .frm_submit input[type="submit"],
.frm_forms .frm_submit button[type="submit"],
.frm_forms .frm_submit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1;
  color: #fff;
  background: var(--brand-primary);
  border: 0;
  border-radius: var(--r-button);
  padding: 13px 26px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: var(--shadow-cta);
  transition: background 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.frm_forms .frm_button_submit:hover,
.frm_forms .frm_submit input[type="submit"]:hover,
.frm_forms .frm_submit button[type="submit"]:hover,
.frm_forms .frm_submit button:hover {
  background: var(--brand-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}
.frm_forms .frm_button_submit:active,
.frm_forms .frm_submit input[type="submit"]:active,
.frm_forms .frm_submit button[type="submit"]:active,
.frm_forms .frm_submit button:active {
  transform: translateY(0);
}

/* Error-States — Brand-Rot als Underline + Error-Text */
.frm_forms .frm_error,
.frm_forms .frm_error_style {
  color: var(--brand-primary);
  font-size: 0.82rem;
  margin-top: 4px;
}
.frm_forms .frm_blank_field input,
.frm_forms .frm_blank_field textarea,
.frm_forms .frm_blank_field select,
.frm_forms .frm_error_field input,
.frm_forms .frm_error_field textarea,
.frm_forms .frm_error_field select,
.frm_forms .has-error input,
.frm_forms .has-error textarea,
.frm_forms .has-error select {
  border-color: var(--brand-primary);
  box-shadow: var(--ring-focus);
}

/* Success-Message nach erfolgreichem Submit */
.frm_message {
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid #cfe8d4;
  background: #f0fbf2;
  color: #1f5a2c;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Section-Heading innerhalb mehrteiliger Forms */
.frm_forms .frm_section_heading {
  margin: 24px 0 8px;
}
.frm_forms .frm_section_heading h3 {
  font: var(--t-h4);
  color: var(--ink);
  margin: 0;
}

/* Mehrspaltige Felder (.frm_first, .frm_half, .frm_third, .frm_two_thirds)
   bleiben auf Desktop wie vom Plugin gesetzt — auf Mobile alles untereinander. */
@media (max-width: 600px) {
  .frm_forms .frm_first,
  .frm_forms .frm_half,
  .frm_forms .frm_two_thirds,
  .frm_forms .frm_third {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
}


/* ============================================================
   AVADA-NATIVE SKIN
   ------------------------------------------------------------
   Brand-Skin für Avadas eigene Output-Klassen (.fusion-*).
   Greift global, sobald ein Avada-Native-Element auf einer
   Seite verwendet wird — keine Custom-Klassen nötig außer wo
   explizit als Opt-in markiert.

   Wächst pro Section. Aktuell abgedeckt (Section 1 · Hero):
   Eyebrow auf .fusion-text · Counter-Box vertikal · Button
   Primary + Outline · Hero-Imageframe.

   Stufe-B-Direktive: Avada-Native ist die Regel, kein Custom-
   PHP für brand-typische Sections. Siehe docs/avada-mapping-
   startseite.md für Section-Mappings.
   ============================================================ */

/* ── Eyebrow auf [fusion_text class="am-eyebrow"] ──────────
   `.am-eyebrow` ist als inline-flex-Pille definiert (Zeile
   ~243 in dieser Datei). Avada wrappt den Eyebrow-Text aber
   in <div class="fusion-text"><p>…</p></div> — der innere
   <p> hat Avada-Defaults (color via --awb-text-color, Margins),
   die `inherit` ignoriert. Deshalb hier explizit + !important
   gegen Avadas Per-Element-Inline-Vars. */
.fusion-text.am-eyebrow {
  display: inline-flex;
  margin-bottom: 16px;
}
.fusion-text.am-eyebrow > p {
  margin: 0 !important;
  display: inline !important;
  font-family: var(--font-sans) !important;
  font-size: var(--t-eyebrow-size) !important;
  font-weight: 600 !important;
  color: var(--brand-primary) !important;
  letter-spacing: var(--t-eyebrow-tracking) !important;
  text-transform: uppercase !important;
}

/* ── Avada-Buttons nebeneinander statt gestackt ─────────────
   Avada wickelt jeden Button in ein klassenfreies `<div >`,
   block-level by default → gestackte Buttons. Wir machen alle
   klassenlosen direkten Kind-Divs der Column-Wrapper inline-
   block. Robust ohne `:has()`-Support nötig, weil Avada
   bare-divs nur als Button-Wrapper in diesem Kontext einsetzt. */
.fusion-column-wrapper > div:not([class]),
.fusion-builder-column > div:not([class]) {
  display: inline-block;
  vertical-align: middle;
}

/* ── Avada Counter Box (fusion_counter_box) ────────────────
   Brand-Layout horizontal: Icon links, Number + Label rechts
   stacked. Wie im Original-Hero (.stat in Startseite.html).
   Icon-Farbe kommt vom Avada-Param `iconcolor` (z.B. #CC0000). */
.fusion-counter-box {
  text-align: left;
}
.fusion-counter-box .counter-box-container {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: center;
}
.fusion-counter-box .content-box-percentage {
  display: contents;
}
.fusion-counter-box .counter-box-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  /* !important: Avada setzt color via `color:inherit` aus dem counters-box-
     Wrapper (der via shortcode-Param `color` einen `--awb-color` als Inline-
     Style bekommt — z.B. #1a1a1a). Source-Order allein reicht hier nicht,
     wenn Avada zur Render-Zeit Inline-CSS-Vars schreibt. */
  font-size: 28px !important;
  color: var(--brand-primary) !important;
  align-self: center;
  margin: 0;
}
.fusion-counter-box .display-counter {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.fusion-counter-box .counter-box-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
  /* Lange dt. Compound-Wörter („Produktionsfläche") brauchen
     Hyphenation, sonst überlaufen sie die enge Counter-Spalte. */
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
}

/* ── Avada Button: Primary (red gradient) ─────────────────
   Roter Primary-Button (button_gradient_top_color="#CC0000")
   bekommt automatisch CTA-Shadow + Hover-Lift. Pill-Radius
   pro Button via "border_radius=100px"-Param am Shortcode.
   :not(.ams-btn-outline) — damit der Outline-Button unten
   trotz custom-color nicht den Primary-Shadow erbt. */
.fusion-button.button-custom {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out),
              background 200ms var(--ease-out),
              color 200ms var(--ease-out);
}
.fusion-button.button-custom[style*="#cc0000"]:not(.ams-btn-outline),
.fusion-button.button-custom[style*="#CC0000"]:not(.ams-btn-outline) {
  box-shadow: var(--shadow-cta);
}
.fusion-button.button-custom[style*="#cc0000"]:not(.ams-btn-outline):hover,
.fusion-button.button-custom[style*="#CC0000"]:not(.ams-btn-outline):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}

/* ── Avada Button: Outline (Opt-in: class="ams-btn-outline") ──
   Transparent BG + 2px ink-Border + ink-Text. Hover invertiert
   zu ink BG + weißem Text. Pill-Radius via Avada-Param. */
.fusion-button.ams-btn-outline {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid var(--ink) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.fusion-button.ams-btn-outline .fusion-button-text,
.fusion-button.ams-btn-outline .awb-button__text {
  color: var(--ink);
}
.fusion-button.ams-btn-outline:hover {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
.fusion-button.ams-btn-outline:hover .fusion-button-text,
.fusion-button.ams-btn-outline:hover .awb-button__text {
  color: #fff;
}

/* ── Secondary-CTA-Buttons (transparenter Fill) — sichtbare Border erzwingen ──
   SEITENÜBERGREIFEND. Avada `type="flat"` rendert border-width:0; die
   `--button_border_color`-Variable ist gesetzt, aber ohne Breite unsichtbar
   → die Sekundär-Buttons (transparenter Gradient) hatten KEINE sichtbare
   Border. Hier 2px-Border erzwingen, Farbe je Kontext wie im Entwurf:
   hell = ink, dunkel = transluzentes Weiß. Primär-Buttons (#cc0000) matchen
   den Transparent-Selektor nicht und bleiben unberührt. */
.fusion-button.button-custom[style*="--button_gradient_top_color:rgba(0,0,0,0)"] {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--ink) !important;             /* light: ink-Border */
}
.am-on-dark .fusion-button.button-custom[style*="--button_gradient_top_color:rgba(0,0,0,0)"],
.ams-section--dark .fusion-button.button-custom[style*="--button_gradient_top_color:rgba(0,0,0,0)"] {
  border-color: rgba(255,255,255,0.45) !important;  /* dark: transluzentes Weiß (Entwurf) */
  color: #fff !important;
}
.am-on-dark .fusion-button.button-custom[style*="--button_gradient_top_color:rgba(0,0,0,0)"]:hover,
.ams-section--dark .fusion-button.button-custom[style*="--button_gradient_top_color:rgba(0,0,0,0)"]:hover {
  border-color: #fff !important;                    /* hover: voller weißer Rahmen (Fill wird weiß) */
}

/* ── Avada Title: Heading-Color forciert ─────────────────
   Avadas .fusion-title-heading kann via CSS-Var per Inline-
   Style überschrieben werden. Brand-Defaults (h1/h2/h3 →
   --fg-1) brauchen hier explizite !important-Bestätigung. */
.fusion-title .fusion-title-heading {
  color: var(--ink) !important;
}
.fusion-title .fusion-title-heading em {
  color: var(--brand-primary) !important;
  font-style: italic;
}

/* ── Dark Sections: Titel auf dunklem BG ─────────────────
   Auf Container mit class="am-on-dark". Kontert die globale
   --ink-Titelfarbe (oben) mit Weiß. Höhere Spezifität (3
   Klassen, 0,3,0) schlägt `.fusion-title .fusion-title-heading`
   (0,2,0) unabhängig von der Ladereihenfolge — deshalb braucht
   es keine separate Datei/Enqueue-Reihenfolge mehr. Der em-
   Akzent („Projekte") bleibt brand-rot über die em-Regel oben. */
.am-on-dark .fusion-title .fusion-title-heading {
  color: var(--fg-on-dark) !important;
}

/* ── Avada Tabs: Clean Brand-Look + Nav unten statt oben ──
   `flex-direction: column-reverse` flippt die Reihenfolge:
   Tab-Content (Title + Text + Image) oben, Nav-Liste unten.
   Active-Tab bekommt eine Border-TOP (statt -bottom) als
   Brand-Accent — visuell sitzt der Strich jetzt zwischen
   Content und Nav. Wird vom Hero-Tabs-Block genutzt. */
.fusion-tabs {
  display: flex;
  flex-direction: column-reverse;
}
.fusion-tabs .nav-tabs {
  border-top: 1px solid var(--line);
  border-bottom: none;
  background: transparent;
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
}
.fusion-tabs .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
  background: transparent !important;
}
.fusion-tabs .nav-tabs > li > a.tab-link {
  border: none !important;
  background: transparent !important;
  padding: 18px 4px !important;
  margin: 0 16px !important;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  border-top: 2px solid transparent !important;
  border-bottom: none !important;
}
.fusion-tabs .nav-tabs > li > a.tab-link:hover {
  color: var(--brand-primary) !important;
}
.fusion-tabs .nav-tabs > li.active > a.tab-link,
.fusion-tabs .nav-tabs > li > a.tab-link.active {
  color: var(--brand-primary) !important;
  border-top-color: var(--brand-primary) !important;
}
.fusion-tabs .nav-tabs > li > a.tab-link .fusion-tab-heading {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-transform: none;
  letter-spacing: 0.04em;
  color: inherit;
}
.fusion-tabs .tab-pane {
  padding: 32px !important;
  border: none !important;
}

/* ── Tab-Content: Image-Block mit Brand-Radius (default) ──── */
.fusion-tabs .tab-pane .fusion-image-element {
  margin-top: 24px;
  margin-bottom: 0;
}
.fusion-tabs .tab-pane .fusion-image-element img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  display: block;
}


/* ============================================================
   HERO — Section 1 (Custom-Skin auf Avada-Native)
   ------------------------------------------------------------
   Wird durch drei Klassen im post_content getriggert:
     .am-hero          — Container (Stretch beider Spalten)
     .am-hero__left    — linke Column (Text + CTAs + Stats)
     .am-hero__right   — rechte Column (Showcase-Tabs)
     .am-hero-showcase — die Avada-Tabs in der rechten Column
                         (override des Default-Tab-Skins für
                         full-bleed Bild + dunkler Scrim + weißer
                         Overlay-Text + scenebar-look unten)
   ============================================================ */

/* ── Container/Row: volle Hero-Höhe, beide Columns gleich hoch */
.am-hero .fusion-row,
.am-hero > .fusion-builder-row {
  align-items: stretch !important;
  min-height: calc(100vh - 72px);
}

/* ── Left Column: Signet-Watermark + Fade-Up-Entry ──────────
   Avada-Output: <div class="fusion-builder-column am-hero__left">
                   <div class="fusion-column-wrapper">…</div>
                 </div>
   Watermark sitzt absolut auf der Column, kommt visuell hinter
   den Inhalt — z-index der Wrapper-Children ist 1. */
.am-hero__left {
  position: relative;
  overflow: hidden;
}
.am-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;
  pointer-events: none;
  z-index: 0;
  animation: amHeroSignetIn 1.6s var(--ease-out) 0.5s forwards;
}
@keyframes amHeroSignetIn {
  from { opacity: 0; transform: translateY(-55%) scale(0.92); }
  to   { opacity: 0.045; transform: translateY(-55%) scale(1); }
}
.am-hero__left > .fusion-column-wrapper { position: relative; z-index: 1; }

/* Fade-Up-Entry für die Kinder im Column-Wrapper. Avada packt
   Eyebrow, Title, Text, Inner-Row, Separator, Counters in den
   Wrapper — wir staffeln die Animation per :nth-child. */
@keyframes amHeroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.am-hero__left > .fusion-column-wrapper > * {
  opacity: 0;
  animation: amHeroFadeUp 0.6s var(--ease-out) forwards;
}
.am-hero__left > .fusion-column-wrapper > *:nth-child(1) { animation-delay: 0.00s; }
.am-hero__left > .fusion-column-wrapper > *:nth-child(2) { animation-delay: 0.10s; }
.am-hero__left > .fusion-column-wrapper > *:nth-child(3) { animation-delay: 0.20s; }
.am-hero__left > .fusion-column-wrapper > *:nth-child(4) { animation-delay: 0.30s; }
.am-hero__left > .fusion-column-wrapper > *:nth-child(5) { animation-delay: 0.40s; }
.am-hero__left > .fusion-column-wrapper > *:nth-child(6) { animation-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  .am-hero__left::before { animation: none; opacity: 0.045; transform: translateY(-55%) scale(1); }
  .am-hero__left > .fusion-column-wrapper > * { animation: none; opacity: 1; transform: none; }
}

/* ── Right Column: stellt den Container für den Showcase ──── */
.am-hero__right { position: relative; overflow: hidden; }
.am-hero__right > .fusion-column-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ── Hero-Showcase = [fusion_fusionslider] ────────────────────
   Avada-Output:
     .fusion-slider-container.am-hero-showcase
       .fusion-slider-loading           (Loading-Text, blenden wir aus)
       .tfs-slider.flexslider.main-flex
         ul.slides
           li.flex-active-slide?
             .slide-content-container.slide-content-left (display:none initial,
                                                         Flexslider setzt display:block)
               .slide-content
                 .heading   > .fusion-title-sc-wrapper > .fusion-title > h3
                 .caption   > .fusion-title-sc-wrapper > .fusion-title > h4
                 .buttons   (leer, da kein button_1)
             .background.background-image (inline style: background-image url)
         ol.flex-control-nav.flex-control-paging (von Flexslider injiziert)
           li > a.flex-active

   Skin-Strategie:
   - Container füllt die rechte Spalte vollständig (Höhe 100%)
   - Loading-Overlay weg, Bilder-Lazy-Loader ausschalten
   - Slide-Content sitzt absolut oben links über dem Bild
   - „Was wir tun"-Eyebrow als ::before auf .heading (für alle Slides identisch)
   - Heading + Caption auf Brand-Typo + weiß forcieren (Avada injiziert
     Inline-Font-Size + Color via --awb-Vars und font-size:1em am h3/h4)
   - Bullets unten → Scenebar: Punkte verbergen, ::after via :nth-child(n)
     trägt die Wort-Labels (Mailing/Druck/Logistik/Design/Werbetechnik) */

.am-hero-showcase.fusion-slider-container {
  position: relative;
  flex: 1 1 auto;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: calc(100vh - 72px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  box-sizing: border-box;
}
.am-hero-showcase .fusion-slider-loading { display: none !important; }
.am-hero-showcase .flex-direction-nav { display: none !important; }
.am-hero-showcase .tfs-scroll-down-indicator { display: none !important; }

/* Volle Höhe durch alle Avada-Wrapper bis runter zur ul.slides.
   Avada-JS (smoothHeight + updateHeight) setzt zur Laufzeit
   `height:NNNpx` inline auf .flexslider. !important + explizite
   min-height schlagen das. */
.am-hero-showcase .tfs-slider,
.am-hero-showcase .flexslider,
.am-hero-showcase .flex-viewport,
.am-hero-showcase ul.slides {
  height: 100% !important;
  min-height: calc(100vh - 72px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  max-height: none !important;
}

/* Slides selbst — wichtig im Fade-Mode: ALLE Slides sind im
   Flexslider-Modell `position: absolute` übereinandergestapelt,
   nur die aktive bekommt opacity 1 (Flexslider-Default).
   Avadas Theme-CSS schreibt aber `.tfs-slider li.flex-active-slide
   { position: relative; }` — das nimmt die aktive aus dem Stack
   raus, was bei Slide 1 noch funktioniert (sie sitzt natürlich
   oben), bei Slide 2+ aber kollabiert (kein erzwungenes Layout
   mehr). Wir forcieren absolute auch auf der aktiven Slide. */
.am-hero-showcase ul.slides {
  position: relative !important;
}
.am-hero-showcase ul.slides > li,
.am-hero-showcase ul.slides > li.flex-active-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: calc(100vh - 72px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: block !important;
}

/* Avadas Default: `.tfs-slider .background { position: relative; z-index: 2 }`.
   Für unseren Compact-Slider muss das absolut sein, damit das Bild
   den ganzen Slide deckt statt darunter zu sitzen. */
.am-hero-showcase ul.slides > li .background,
.am-hero-showcase ul.slides > li .background.background-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 1 !important;
}

/* Dunkler Scrim oben über dem Bild als Pseudoelement der li */
.am-hero-showcase ul.slides > li {
  position: relative;
  overflow: hidden;
}
.am-hero-showcase ul.slides > li::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(10,10,10,0.78) 0%,
              rgba(10,10,10,0.55) 22%,
              rgba(10,10,10,0.18) 48%,
              rgba(10,10,10,0)    65%);
  z-index: 2;
  pointer-events: none;
}

/* Slide-Content-Container: Avada-Default ist absolute top:50% +
   transform translateY(-50%) — wir wollen oben links.
   Außerdem `display: block !important` damit Avadas JS-show/hide-
   Logik nicht greift (würde Slide 2+ unsichtbar lassen). */
.am-hero-showcase ul.slides > li .slide-content-container {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 3 !important;
  padding: 32px 48px 24px !important;
  width: 100%;
}
/* Avada-Default: .slide-content { opacity: 0 } — JS animiert auf 1.
   Wir forcieren sichtbar, weil unser Layout ohne Avadas Pre-Hide-
   Animation auskommt. Außerdem setzt Avada-JS `margin-left: 100px`
   auf .slide-content-left .slide-content — wegnehmen. */
.am-hero-showcase ul.slides > li .slide-content-container .slide-content {
  opacity: 1 !important;
  max-width: 540px !important;
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
  text-align: left !important;
}
.am-hero-showcase ul.slides > li .slide-content-container.slide-content-left .slide-content {
  margin-left: 0 !important;
}

/* „Was wir tun"-Eyebrow als ::before auf der heading-Box. Identisch
   für alle Slides → kein per-Slide-Markup nötig. */
.am-hero-showcase ul.slides > li .heading {
  position: relative;
  padding-top: 16px;
  margin-bottom: 8px;
}
.am-hero-showcase ul.slides > li .heading::before {
  content: 'Was wir tun';
  display: block;
  width: max-content;
  margin-bottom: 10px;
  padding-left: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  /* Roter Bar via Background-Gradient — 24px breit, 2px hoch,
     vertikal zentriert. Lücke zum Text via padding-left (32px). */
  background: linear-gradient(var(--brand-primary), var(--brand-primary)) no-repeat;
  background-size: 24px 2px;
  background-position: 0 50%;
}

/* Heading: brand-typo + white forcieren. Avada injiziert eine inline
   font-size:1em am h3 — wir overriden mit !important. */
.am-hero-showcase ul.slides > li .heading .fusion-title-heading,
.am-hero-showcase ul.slides > li .heading h3 {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.55);
}
.am-hero-showcase ul.slides > li .heading .fusion-title-heading em {
  color: #fff !important;
  font-style: italic;
}

/* Caption: Brand-Lead-Größe + white. Avada rendert hier h4. */
.am-hero-showcase ul.slides > li .caption {
  margin-top: 10px;
}
.am-hero-showcase ul.slides > li .caption .fusion-title-heading,
.am-hero-showcase ul.slides > li .caption h4 {
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 6px rgba(0,0,0,0.5);
}

/* Buttons-Block leer ausblenden */
.am-hero-showcase ul.slides > li .buttons:empty { display: none; }

/* ── Pagination = Scenebar mit Wort-Labels ─────────────────
   Flexslider injiziert <ol class="flex-control-nav flex-control-paging">
   mit fünf <li> > <a> innerhalb von .tfs-slider.flexslider.
   Position: absolute am unteren Rand des Slider-Containers
   (nicht .flexslider, damit Flexsliders interne Height-Mechanik
   nicht stört). Erreichen wir durch: .flexslider position:static
   überschreiben → nächster positionierter Ancestor ist die
   .am-hero-showcase.fusion-slider-container (position:relative). */
.am-hero-showcase .flex-control-nav.flex-control-paging {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 4 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 80px 0 22px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  background: linear-gradient(0deg,
              rgba(10,10,10,0.92) 0%,
              rgba(10,10,10,0.72) 40%,
              rgba(10,10,10,0.30) 75%,
              rgba(10,10,10,0)    100%);
  list-style: none !important;
  text-align: left;
  box-sizing: border-box !important;
}

/* .flexslider als position:static deklarieren, damit die absolut
   positionierte .flex-control-paging am Container (.fusion-slider-
   container) hängt und nicht an der .flexslider — die hat ggf. eine
   per JS gesetzte Pixel-Höhe, die nicht bis zum Bottom des Containers
   reicht. */
.am-hero-showcase .tfs-slider,
.am-hero-showcase .flexslider {
  position: static !important;
}
.am-hero-showcase .flex-viewport {
  position: relative;  /* Slides drin brauchen positioned Parent */
}
.am-hero-showcase .flex-control-nav.flex-control-paging > li {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 8px !important;
  display: block;
  min-width: 0;  /* sonst lässt das Grid die Cell nicht unter min-content schrumpfen */
  overflow: hidden;
}

/* Bullet-Punkt verstecken, der ganze <a> wird zur Klickfläche
   mit Wort-Label im ::after. */
.am-hero-showcase .flex-control-nav.flex-control-paging > li > a {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 4px 4px !important;
  background: transparent !important;
  border: none !important;
  border-top: 2px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
  text-indent: 0 !important;
  cursor: pointer;
  position: relative;
  transition: border-color 250ms var(--ease-out);
  /* Original-Punkt-Icon weg */
  color: transparent;
  text-shadow: none;
  font-size: 0;
  line-height: 0;
}
.am-hero-showcase .flex-control-nav.flex-control-paging > li > a::after {
  display: block;
  content: '';
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.6);
  text-align: center;
  text-transform: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  transition: color 250ms var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am-hero-showcase .flex-control-nav.flex-control-paging > li:nth-child(1) > a::after { content: 'Mailing'; }
.am-hero-showcase .flex-control-nav.flex-control-paging > li:nth-child(2) > a::after { content: 'Druck'; }
.am-hero-showcase .flex-control-nav.flex-control-paging > li:nth-child(3) > a::after { content: 'Logistik'; }
.am-hero-showcase .flex-control-nav.flex-control-paging > li:nth-child(4) > a::after { content: 'Design'; }
.am-hero-showcase .flex-control-nav.flex-control-paging > li:nth-child(5) > a::after { content: 'Werbetechnik'; }

.am-hero-showcase .flex-control-nav.flex-control-paging > li > a:hover {
  border-top-color: rgba(255,255,255,0.24) !important;
}
.am-hero-showcase .flex-control-nav.flex-control-paging > li > a:hover::after {
  color: rgba(255,255,255,0.92);
}
.am-hero-showcase .flex-control-nav.flex-control-paging > li > a.flex-active {
  border-top-color: var(--brand-primary) !important;
}
.am-hero-showcase .flex-control-nav.flex-control-paging > li > a.flex-active::after {
  color: #fff;
  font-weight: 600;
}

/* Flexslider-Nav-Arrows (zur Sicherheit auch via CSS aus) */
.am-hero-showcase .flex-direction-nav { display: none !important; }

/* Responsive */
@media (max-width: 1024px) {
  .am-hero__left {
    padding: 64px 32px !important;
  }
  .am-hero__left::before {
    width: 360px; height: 360px;
    right: -80px;
  }
  .am-hero-showcase.fusion-slider-container { min-height: 480px; }
  .am-hero-showcase ul.slides > li .slide-content-container { padding: 24px 32px 24px; }
  .am-hero-showcase .flex-control-nav.flex-control-paging { padding: 60px 16px 18px !important; }
  .am-hero-showcase .flex-control-nav.flex-control-paging > li > a::after { font-size: 0.92rem; }
}
@media (max-width: 640px) {
  .am-hero__left {
    padding: 48px 24px !important;
  }
  .am-hero__left::before { display: none; }
  .am-hero-showcase ul.slides > li .slide-content-container { padding: 20px 24px; }
}

/* ── #main-Padding-Reset für Pages mit Full-Bleed-Hero ────────
   Avadas Default ist `#main { padding: 55px 10px 45px }` — die
   10px rechts und 45px unten lassen den Site-Background hinter
   #main durchschimmern (sichtbar als Spalt am rechten und
   unteren Rand der Hero-Section). Für Pages, die einen Full-
   Bleed-Hero rendern (`.am-hero` als erstes Child der Page),
   muss #main padding-frei sein. */
body:has(.am-hero) #main {
  padding: 0 !important;
}


/* ============================================================
   HERO LEFT — Spacing/Sizing-Overrides nach Original-Vorlage
   ------------------------------------------------------------
   Re-implementiert die exakten Werte aus dem alten Custom-PHP-
   Hero (sections.css → .ams-element-hero .hero__left) auf
   Avadas Output-Klassen.
   ============================================================ */

/* Lead-Text direkt unter dem H1 — fusion_text mit class="am-hero-lead".
   Original: max-width 480px, font-size 1.05rem, line-height 1.7,
   color ink-2, margin 24px 0 36px. */
.am-hero__left .fusion-text.am-hero-lead {
  max-width: 480px !important;
  margin-top: 24px !important;
  margin-bottom: 36px !important;
}
.am-hero__left .fusion-text.am-hero-lead p {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: var(--ink-2) !important;
  margin: 0 !important;
}

/* Buttons-Row — Original: gap 28px statt margin_right 16. */
.am-hero__left .am-hero__actions .fusion-column-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 28px !important;
}
.am-hero__left .am-hero__actions .fusion-button {
  margin: 0 !important;
}

/* Stats-Wrapper (Counter-Box) — Original hero__trust:
   padding-top 36px zur Buttons-Reihe, gap 56px zwischen Stats. */
.am-hero__left .fusion-counters-box.am-hero-stats {
  margin-top: 36px !important;
}
.am-hero__left .fusion-counters-box.am-hero-stats .fusion-columns {
  gap: 56px !important;
}
.am-hero__left .fusion-counters-box.am-hero-stats .fusion-column {
  /* Avada-Default hat fusion-column mit width:33.33% + spacing.
     Mit gap 56px brauchen wir width:auto + flex damit Cells
     gleich proportional bleiben. */
  width: auto !important;
  flex: 1 1 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Hero-Counter-Box — eigene Größen/Stil-Werte für den Hero,
   überschreiben die globalen .fusion-counter-box-Defaults in
   der AVADA-NATIVE-SKIN-Sektion.
   Original: Zahl 2.2rem weight 700, Label kein uppercase,
   ls 0.04em, Icon 42px. */
.am-hero__left .fusion-counter-box .display-counter {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
}
.am-hero__left .fusion-counter-box .counter-box-content {
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  margin-top: 6px !important;
}
.am-hero__left .fusion-counter-box .counter-box-icon {
  font-size: 42px !important;
}

/* ============================================================
   HEADER · Avada-Native + Brand-Skin
   ------------------------------------------------------------
   Layout-Section "A&M Header Native" rendert eine flex-Container-
   Section mit class="am-header" als <header>-Tag. Inhalt:
   Logo (1_5) · Menu/CTA/Hotline-Row (4_5).
   Sticky + Blur via CSS hier (nicht Avadas sticky="on", das ist
   sticky-on-scroll). Ziel: Original-Look aus Startseite.html
   Zeile 18 ff. mit Avada-Output-Klassen geskinnt.
   ============================================================ */

.am-header.fusion-fullwidth {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  min-height: 72px;
}

/* Avada wickelt Container in mehrere Wrapper. Auf flex-Container-
   Ebene 72px Mindesthöhe halten, Padding-Vertical = 0. */
.am-header.fusion-fullwidth .fusion-builder-row {
  align-items: center;
  min-height: 72px;
  width: 100% !important;
  max-width: none !important;
}

/* Logo: 32px Höhe (Vorlage). Avada-Imageframe-Wrapper auf
   Größe nicht beschränken, IMG selbst constrainen. */
.am-header__logo .fusion-imageframe,
.am-header__logo .imageframe-align-element-none {
  display: inline-block;
  margin: 0 !important;
}
.am-header__logo img {
  height: 32px !important;
  width: auto !important;
  max-width: none !important;
}

/* Rechte Spalte: Menu + CTA + Hotline horizontal, rechtsbündig,
   gap 16px. Avada-Column ist mit content_layout="row" schon
   flex-row; wir setzen Alignment + Gap. */
.am-header__right > .fusion-column-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex-wrap: nowrap;
}

/* ── Menu (fusion_menu) ────────────────────────────────────
   Klasse am Shortcode: am-header__menu. Avada-Output:
   <nav class="fusion-main-menu ..."><ul class="fusion-menu">…</ul></nav>.
   Original: 14.7px (0.92rem) · weight 500 · ink-2 → brand-rot on hover. */
.am-header__menu {
  flex: 0 1 auto;
}
.am-header__menu .fusion-menu {
  gap: 32px !important;
  margin: 0;
  padding: 0;
}
.am-header__menu .fusion-menu > li > a {
  font-family: var(--font-sans) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  transition: color 200ms var(--ease-out);
}
.am-header__menu .fusion-menu > li > a:hover,
.am-header__menu .fusion-menu > li.current-menu-item > a {
  color: var(--brand-primary) !important;
}
/* Untermenü-Dropdowns: weiß, brand-Border, leichter Shadow */
.am-header__menu .fusion-menu .sub-menu {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 10px) !important;
  box-shadow: var(--shadow-card, 0 4px 16px rgba(0,0,0,0.06)) !important;
  padding: 8px 0 !important;
}
.am-header__menu .fusion-menu .sub-menu li a {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  padding: 10px 18px !important;
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.am-header__menu .fusion-menu .sub-menu li a:hover {
  color: var(--brand-primary) !important;
  background: var(--surface) !important;
}

/* ── CTA-Button (fusion_button.am-header__cta) ─────────────
   Brand-Primary Pill, kompakter im Header (kleineres Padding). */
.fusion-button.am-header__cta {
  background: var(--brand-primary) !important;
  border-radius: 100px !important;
  padding: 10px 22px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: var(--shadow-cta, 0 4px 16px rgba(204,0,0,0.25));
  transition: all 200ms var(--ease-out);
}
.fusion-button.am-header__cta:hover {
  background: var(--brand-primary-dark) !important;
  transform: translateY(-2px);
}
.fusion-button.am-header__cta .fusion-button-text {
  color: #fff !important;
}

/* ── Hotline-Pill (fusion_button.am-header__hotline) ───────
   Outline-Pill mit Phone-Icon. Border → ink-2; Hover → brand-rot. */
.fusion-button.am-header__hotline {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 100px !important;
  padding: 8px 14px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
  transition: all 200ms var(--ease-out);
}
.fusion-button.am-header__hotline .fusion-button-text {
  color: var(--ink) !important;
}
.fusion-button.am-header__hotline i,
.fusion-button.am-header__hotline svg {
  color: var(--brand-primary) !important;
  font-size: 14px !important;
}
.fusion-button.am-header__hotline:hover {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}
.fusion-button.am-header__hotline:hover .fusion-button-text,
.fusion-button.am-header__hotline:hover i,
.fusion-button.am-header__hotline:hover svg {
  color: var(--brand-primary) !important;
}

/* ── Mobile: Burger-Toggle aus Avadas mobile_nav_mode="collapse-to-button"
   Avada-Output: <a class="fusion-flyout-menu-icons">☰</a>. Pille im Brand-Look. */
.am-header__menu .fusion-flyout-menu-toggle {
  color: var(--ink) !important;
  font-size: 22px !important;
}
.am-header__menu .fusion-mobile-nav-holder .fusion-mobile-selector {
  border-radius: 100px;
  border: 1px solid var(--line);
  padding: 6px 12px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .am-header.fusion-fullwidth {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .am-header__menu .fusion-menu {
    gap: 24px !important;
  }
  .am-header__right > .fusion-column-wrapper {
    gap: 16px;
  }
}
@media (max-width: 640px) {
  .am-header.fusion-fullwidth {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Hotline-Pille reduzieren auf Icon-only auf Mobile */
  .fusion-button.am-header__hotline .fusion-button-text {
    display: none;
  }
  .fusion-button.am-header__hotline {
    padding: 8px 10px !important;
  }
}

/* =====================================================================
   TRACK 3 — CUSTOM FUSION ELEMENT: [ams_hero]
   ---------------------------------------------------------------------
   Voll editierbares Hero in einem einzigen Avada-Builder-Element.
   Markup-Wurzel: .ams-hero-el (class-ams-hero-element.php) +
   .ams-hero-el__slide (class-ams-hero-slide-element.php).
   Slider-JS: assets/js/ams-hero-slider.js.

   Unabhängig vom Track-1-Native-Skin (.am-hero*) — eigene Klassen,
   eigene Höhe, eigene Spalten. Beide können auf der gleichen Seite
   nebeneinander stehen.
   ===================================================================== */

.ams-hero-el {
    position: relative;
    width: 100%;
    background: var(--surface);
    overflow: hidden;
}

.ams-hero-el__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 72px);
    align-items: stretch;
}

/* ---------- linke Spalte: Text-Stack ---------- */
.ams-hero-el__left {
    position: relative;
    padding: 96px clamp(40px, 5vw, 96px) 64px clamp(40px, 8vw, 120px);
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.ams-hero-el__left::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -120px;
    transform: translateY(-50%);
    width: 520px;
    height: 520px;
    background: url('../logos/AuM_Signet.png') no-repeat center/contain;
    opacity: 0.045;
    pointer-events: none;
    z-index: 0;
}

.ams-hero-el__left > * {
    position: relative;
    z-index: 1;
}

.ams-hero-el__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin: 0 0 20px;
}

.ams-hero-el__eyebrow-bar {
    width: 24px;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 100px;
    display: inline-block;
}

.ams-hero-el__h1 {
    font: var(--t-h1);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 24px;
    max-width: 16ch;
}

.ams-hero-el__h1 em {
    font-style: italic;
    color: var(--brand-primary);
    font-weight: 500;
}

.ams-hero-el__lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 0 36px;
    max-width: 52ch;
}

.ams-hero-el__actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.ams-hero-el .ams-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--r-button);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out);
    line-height: 1;
}

.ams-hero-el .ams-btn--primary {
    background: var(--brand-primary);
    color: #fff;
    box-shadow: var(--shadow-cta);
}

.ams-hero-el .ams-btn--primary:hover {
    background: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-cta-hover);
}

.ams-hero-el .ams-btn--primary:active {
    background: var(--brand-primary-dark);
    transform: none;
}

.ams-hero-el .ams-btn--outline {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--ink);
}

.ams-hero-el .ams-btn--outline:hover {
    background: var(--ink);
    color: #fff;
    transform: translateY(-2px);
}

.ams-hero-el .ams-btn__arrow {
    transition: transform 200ms var(--ease-out);
}

.ams-hero-el .ams-btn:hover .ams-btn__arrow {
    transform: translateX(4px);
}

/* ---------- Stats ---------- */
.ams-hero-el__stats {
    display: flex;
    gap: clamp(24px, 4vw, 56px);
    flex-wrap: wrap;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

.ams-hero-el__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
}

.ams-hero-el__stat-icon {
    width: 42px;
    height: 42px;
    color: var(--brand-primary);
    margin-bottom: 4px;
}

.ams-hero-el__stat-icon svg {
    width: 100%;
    height: 100%;
}

.ams-hero-el__stat-num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
}

.ams-hero-el__stat-suffix {
    font-weight: 500;
    color: var(--brand-primary);
}

.ams-hero-el__stat-label {
    font-size: 0.85rem;
    color: var(--ink-2);
    line-height: 1.4;
    hyphens: auto;
    word-break: break-word;
}

/* ---------- rechte Spalte: Slider ---------- */
.ams-hero-el__right {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    background: var(--ink);
}

.ams-hero-el__slides {
    position: absolute;
    inset: 0;
}

.ams-hero-el__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--ink);
    opacity: 0;
    transition: opacity 600ms var(--ease-out);
    pointer-events: none;
}

.ams-hero-el__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.ams-hero-el__slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.5) 100%);
}

.ams-hero-el__slide-text {
    position: absolute;
    left: 48px;
    right: 48px;
    bottom: 120px;
    color: #fff;
    z-index: 2;
}

.ams-hero-el__slide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.ams-hero-el__slide-bar {
    width: 24px;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 100px;
    display: inline-block;
}

.ams-hero-el__slide-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.75rem, 2.5vw, 2.4rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0 0 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.55);
}

.ams-hero-el__slide-caption {
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.55;
    margin: 0;
    max-width: 540px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ---------- Scenebar ---------- */
.ams-hero-el__scenebar {
    position: absolute;
    left: 48px;
    right: 48px;
    bottom: 32px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    z-index: 3;
}

.ams-hero-el__scenebtn {
    appearance: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 12px;
    font: inherit;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: 6px;
    transition: background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
    text-align: center;
    line-height: 1.2;
}

.ams-hero-el__scenebtn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.ams-hero-el__scenebtn.is-active {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .ams-hero-el__inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .ams-hero-el__left {
        padding: 80px clamp(32px, 6vw, 64px) 64px;
    }
    .ams-hero-el__right {
        min-height: 480px;
    }
    .ams-hero-el__slide-text {
        bottom: 110px;
        left: 32px;
        right: 32px;
    }
    .ams-hero-el__scenebar {
        left: 32px;
        right: 32px;
        bottom: 24px;
    }
}

@media (max-width: 640px) {
    .ams-hero-el__left {
        padding: 64px 24px 56px;
    }
    .ams-hero-el__h1 {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }
    .ams-hero-el__lead {
        font-size: 1rem;
        margin-bottom: 28px;
    }
    .ams-hero-el__actions {
        gap: 12px;
        margin-bottom: 36px;
    }
    .ams-hero-el .ams-btn {
        padding: 12px 22px;
        font-size: 0.9rem;
    }
    .ams-hero-el__stats {
        gap: 20px;
    }
    .ams-hero-el__stat-num {
        font-size: 1.8rem;
    }
    .ams-hero-el__right {
        min-height: 380px;
    }
    .ams-hero-el__slide-text {
        bottom: 88px;
        left: 20px;
        right: 20px;
    }
    .ams-hero-el__scenebar {
        left: 20px;
        right: 20px;
        bottom: 16px;
        gap: 4px;
    }
    .ams-hero-el__scenebtn {
        padding: 8px 6px;
        font-size: 0.7rem;
    }
}


/* =====================================================================
   KONTAKT-SEITE — Section 1 (Hero + Quickcard)
   ---------------------------------------------------------------------
   Avada-nativ gebaut: Container class="am-kontakt-hero ams-hero-fill
   am-on-dark". Titel-Weiß kommt aus dem .am-on-dark-Override oben.
   Hier nur: Viewport-Fill-Utility + die Quickcard-Komponente (Hero-
   Kontaktkarte aus einzelnen fusion_*-Elementen in Nested-Columns).
   Vorher in ams-custom.css ausgelagert — jetzt konsolidiert.
   ===================================================================== */

/* Hero füllt den sichtbaren Bereich = volle Sichthöhe minus Header.
   Einheitliche Höhe für ALLE BG-Bild-Heroes (Lettershop = Maßstab, Kontakt
   u. künftige folgen). Kein zusätzlicher Abzug mehr (vorher -60px → zu niedrig). */
.ams-hero-fill            { min-height: calc(100vh - var(--nav-height, 94px)); }
@media (max-width: 1024px){ .ams-hero-fill { min-height: calc(100vh - 80px - 220px); } }
@media (max-width: 640px) { .ams-hero-fill { min-height: auto; } }

/* Quickcard hugt ihren Inhalt statt auf Spaltenhöhe zu strecken.
   Avada gibt dem inneren .fusion-column-wrapper height:100% — in der hohen
   Hero-Section (ams-hero-fill) streckt das die Karte. height:auto fixt's.
   Nur im Hero gescoped, damit andere am-quickcard-Nutzungen (z.B. die
   Anfahrt-Karten) ihre Gleich-Höhe behalten. Vertikale Ausrichtung kommt
   aus dem nativen align_self der Spalte (center), NICHT aus CSS. */
.am-kontakt-hero .am-quickcard > .fusion-column-wrapper { height: auto !important; }

/* Badge „DIREKT" = fusion_button als Pill */
.am-quickcard__mark                { margin: 0 0 18px; }
.am-quickcard__mark .fusion-button { padding: 6px 14px !important; min-height: 0 !important;
                                     font: 700 .72rem/1 var(--font-sans) !important;
                                     letter-spacing: .08em !important; text-transform: uppercase !important; }

/* Anfahrt-Karte: Button-Reihe nebeneinander (Route planen + Termin vereinbaren).
   Avada rendert jeden fusion_button-Wrapper als Block -> sie stapeln. Flex-Row
   auf dem Column-Wrapper legt sie nebeneinander; gap statt Button-Margins.
   Gleiches Muster wie .am-hero__left .am-hero__actions (oben). */
.am-anfahrt-actions .fusion-column-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Eyebrow „Schnellster Weg" (fusion_text) */
.am-quickcard__label p { margin: 0; font: 500 12px/1.4 var(--font-sans);
                         letter-spacing: .06em; text-transform: uppercase; color: var(--fg-on-dark-2); }

/* Telefon (fusion_text + Link) */
.am-quickcard__phone p       { margin: 0; }
.am-quickcard__phone a       { font: 500 clamp(1.9rem,2.4vw,2.25rem)/1.1 var(--font-sans);
                               color: var(--fg-on-dark); text-decoration: none; letter-spacing: -.01em; }
.am-quickcard__phone a:hover { color: var(--brand-primary-glow); }

/* Meta-Zeile */
.am-quickcard__meta p { margin: 0; font: 400 .875rem/1.5 var(--font-sans); color: rgba(255,255,255,.6); }

/* Kontakt-Zeilen: schmale Icon-Spalte + Label/Wert */
.am-qc-ico   { padding-left: 0 !important; padding-right: 0 !important; }
.am-qc-lbl   { margin-bottom: 2px; }
.am-qc-lbl p { margin: 0; font: 500 11px/1.4 var(--font-sans);
               letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.am-qc-val   { margin-bottom: 0; }
.am-qc-val p { margin: 0; font: 400 15px/1.4 var(--font-sans); color: var(--fg-on-dark); }
.am-qc-val a { color: var(--fg-on-dark); text-decoration: none; }

/* Kontakt-Zeilen als natives fusion_checklist (.am-qc-list) — für die in
   den Hero integrierte Kontakt-Quickcard (nur eine Nesting-Ebene erlaubt,
   daher kein row_inner mehr). Label + Wert gestapelt, on-dark. */
.am-qc-list .fusion-li-item            { padding-top: 0 !important; margin-bottom: 14px !important; align-items: flex-start; }
.am-qc-list .fusion-li-item:last-child { margin-bottom: 0 !important; }
.am-qc-list .fusion-li-icon            { color: var(--brand-primary) !important; font-size: 16px !important; margin-top: 3px; }
.am-qc-list .fusion-li-item-content    { margin-inline-start: 12px !important; display: flex; flex-direction: column; }
.am-qc-list .am-qc-lbl     { font: 500 11px/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 2px; }
.am-qc-list .am-qc-val     { font: 400 15px/1.4 var(--font-sans); color: var(--fg-on-dark); }
.am-qc-list .am-qc-val a       { color: var(--fg-on-dark); text-decoration: none; }
.am-qc-list .am-qc-val a:hover { color: var(--brand-primary-glow); }

/* Sekundär-Link „Oder Anfrage senden" */
.am-quickcard__cta-alt p       { margin: 0; }
.am-quickcard__cta-alt a       { color: rgba(255,255,255,.6); font: 500 .875rem/1 var(--font-sans); text-decoration: none; }
.am-quickcard__cta-alt a:hover { color: var(--fg-on-dark); }


/* ── Kontaktformular: „Bevorzugte Kontaktart" als Pills (.am-kform) ──
   Formidable rendert Radios nicht nativ als Pills/Icons → CSS-Layer (letzte
   Wahl). Pill = .frm_radio>label · Dot = nativer Radio-Input (accent-color) ·
   Icon = ::before mit Avada Font Awesome 5 · Reihenfolge [Dot][Icon][Text]
   via flex `order`. Icons sind reihenfolge-abhängig: 1. Option = Telefon,
   2. Option = E-Mail. */
.am-kform .frm_opt_container { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.am-kform .frm_radio        { margin: 0; }
.am-kform .frm_radio > label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; font: 400 15px/1 var(--font-sans); color: var(--ink);
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.am-kform .frm_radio > label:hover { border-color: var(--ink-3); }
.am-kform .frm_radio input[type="radio"] {
  order: -1; accent-color: var(--brand-primary);
  width: 16px; height: 16px; margin: 0; flex: 0 0 auto;
}
.am-kform .frm_radio:has(input:checked) > label {
  border-color: var(--brand-primary); background: rgba(204,0,0,0.04);
}
.am-kform .frm_radio > label::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  color: var(--brand-primary); font-size: 14px; line-height: 1;
}
.am-kform .frm_radio:nth-of-type(1) > label::before { content: "\f095"; } /* fa-phone */
.am-kform .frm_radio:nth-of-type(2) > label::before { content: "\f0e0"; } /* fa-envelope */


/* ── Team-Kontaktzeilen: kompakte native Checklist (.am-team-contact) ──
   Telefon/Mail als fusion_checklist (native Icons statt Inline-<i>). Avadas
   Default-Abstände sind zu groß für die kompakte Zeile → hier nur die
   aufgelösten Properties getightet (die --awb-*-Vars sind inline am <ul>,
   daher Override an den Kind-Elementen, nicht an den Vars). */
.am-team-contact { margin: 8px 0 0; }
.am-team-contact .fusion-li-item            { padding-top: 0 !important; margin-bottom: 4px; }
.am-team-contact .icon-wrapper              { width: 16px !important; height: 16px !important; }
.am-team-contact .fusion-li-icon            { font-size: 13px !important; }
.am-team-contact .fusion-li-item-content    { margin-inline-start: 8px !important; font-size: 15px; line-height: 1.5; }
.am-team-contact .fusion-li-item-content a       { color: var(--ink); text-decoration: none; }
.am-team-contact .fusion-li-item-content a:hover { color: var(--brand-primary); }

/* Team-Avatare: einheitlich rund + größer. Quellbilder sind Hochformat
   (z.B. 258×300) → object-fit:cover für sauberen Kreis, feste Größe. */
.am-team .fusion-imageframe img {
  width: 144px !important; height: 144px !important; max-width: none;
  border-radius: 50% !important; object-fit: cover; display: block;
}


/* =====================================================================
   LEISTUNGEN-SEITE — Section-Skin (Avada-nativ)
   ---------------------------------------------------------------------
   Komponenten-Klassen für die Leistungsseite (Draft `leistungen-test`).
   Layout/Spacing soweit möglich über native Avada-Attribute (column_
   spacing, align_self, nested columns); hier nur, was nativ nicht geht.
   Wächst pro Section. Aktuell: Section 1 (Intro/Hero).
   ===================================================================== */

/* ── Buttons: Sentence-Case statt Avada-Capitalize ─────────────────
   Avada uppercased/capitalized Button-Text per Default — Brand-Voice
   ist Sentence Case („Beratung vereinbaren"). */
.fusion-button .fusion-button-text,
.fusion-button.button-custom { text-transform: none !important; }

/* ── Hero-Buttons nebeneinander ────────────────────────────────────
   2 Buttons in einer nested column (class="am-hero-actions") als
   Flex-Row mit Gap — robuster als Avadas bare-div-inline-Trick. */
.am-hero-actions .fusion-column-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}
.am-hero-actions .fusion-button-wrapper { margin: 0 !important; }

/* ── Bild-Platzhalter ──────────────────────────────────────────────
   Avada hat kein „leeres Bild"-Element. [fusion_text] mit dieser Klasse
   rendert eine beschriftete Box im Zielformat (Surface + dashed Border).
   Bilder folgen später → dann durch [fusion_imageframe] ersetzen. */
.fusion-text.am-img-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  box-sizing: border-box;
}
.fusion-text.am-img-slot p {
  margin: 0;
  font: 500 0.8rem/1.4 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fusion-text.am-img-slot--4x5 { aspect-ratio: 4 / 5; }

/* ── Intro-Media + Badge-Overlay ───────────────────────────────────
   Die Media-Spalte (class="am-intro-media") ist Positionierungs-
   Kontext; die Badge-Spalte (class="am-intro-badge", nested column)
   schwebt unten links über dem Bild. Native lässt sich ein Overlay
   nicht setzen → CSS. */
.am-intro-media > .fusion-column-wrapper { position: relative; }
.am-intro-badge.fusion-builder-column-inner {
  position: absolute !important;
  left: -20px;
  bottom: 28px;
  width: auto !important;
  max-width: 280px;
  margin: 0 !important;
  background: #fff;
  box-shadow: var(--shadow-overlay);
  border-radius: var(--r-card);
  padding: 16px 22px;
  z-index: 2;
}
.am-intro-badge .fusion-column-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 14px;
}
.am-intro-badge .fusion-text p { margin: 0; }
.am-intro-badge .fusion-text strong {
  display: block;
  font: 600 0.95rem/1.2 var(--font-sans);
  color: var(--ink);
}
.am-intro-badge .fusion-text span {
  display: block;
  font: 400 0.8rem/1.3 var(--font-sans);
  color: var(--ink-3);
}

/* ── Stats-Trias (nativ: nested columns Icon + Zahl/Label) ──────────
   Pro Stat (class="am-stat") eine nested row: Icon-Spalte + Text-
   Spalte (Zahl über Label). Ersetzt die fusion_counters_box, deren
   Unit-Suffix („+", „m²") auf eigene Zeilen umbrach. Nur Zahl/Label-
   Typo hier; Anordnung kommt aus den nativen Spalten. */
.am-stat__num .fusion-title-heading {
  font: 700 2.4rem/1 var(--font-sans) !important;
  letter-spacing: -0.02em;
  margin: 0 !important;
}
.am-stat__num .fusion-title-heading span { color: var(--brand-primary) !important; }
.am-stat__label .fusion-title-heading {
  font-weight: 500 !important;
}

/* ── Stats-Card (Hero rechts): fusion_counters_box mit Count-Animation ─
   Eigener Skin im Card-Kontext (überschreibt den globalen .fusion-
   counter-box-Skin). Icon + Zahl + Unit inline auf einer Zeile, Label
   darunter (eingerückt unter die Zahl). Trennlinien zwischen den Stats
   via Border-Top. Zahl weiß, Unit + Icon brand-rot. */
.am-stats-card .fusion-counters-box { width: 100%; }
.am-stats-card .fusion-counter-box {
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}
.am-stats-card .fusion-counter-box + .fusion-counter-box {
  margin-top: 20px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.am-stats-card .fusion-counter-box .counter-box-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.am-stats-card .fusion-counter-box .content-box-percentage {
  display: flex;
  align-items: baseline;
}
.am-stats-card .fusion-counter-box .counter-box-icon {
  align-self: center;
  margin-right: 12px;
  font-size: 30px !important;
  color: var(--brand-primary) !important;
}
.am-stats-card .fusion-counter-box .display-counter {
  font: 700 2.4rem/1 var(--font-sans);
  color: #fff;
  letter-spacing: -0.02em;
}
.am-stats-card .fusion-counter-box .unit {
  font: 700 2.4rem/1 var(--font-sans);
  color: var(--brand-primary);
  letter-spacing: -0.02em;
}
.am-stats-card .fusion-counter-box .counter-box-content {
  padding-left: 42px;
  font: 500 12px/1.3 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* ── Intro-Bild (echtes Bild statt Platzhalter) ────────────────────
   fusion_imageframe mit class="am-intro-img" füllt die Media-Spalte
   im 4:5-Crop mit Brand-Radius. */
.am-intro-img,
.am-intro-img .fusion-imageframe { width: 100%; display: block; }
.am-intro-img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
@media (max-width: 1024px) {
  .am-intro-img img { aspect-ratio: 16 / 10; }
}

@media (max-width: 1024px) {
  .am-intro-badge.fusion-builder-column-inner { left: 16px; }
}


/* =====================================================================
   LEISTUNGEN — Section 2 (Feature-Grid / ams-card)
   ---------------------------------------------------------------------
   Schlichte Karte: Bild + Titel + Text. Ganze Karte klickbar (Overlay-
   Anchor). Einziger Hover-Effekt: Titel wird rot. Kein Icon, kein
   „Mehr erfahren"-Link, kein Lift/Shadow (Avada-Live-Render-stabil).
   ===================================================================== */

/* Section-Head linksbündig, begrenzte Breite */
.am-sec-head { max-width: 640px; margin-bottom: 48px !important; }
.am-sec-head .fusion-text.am-lead p { font-size: 1.2rem !important; line-height: 1.7 !important; }
.am-sec-head .fusion-text.am-lead strong { color: var(--ink); font-weight: 600; }

/* Geringerer oberer Abstand für direkt aufeinanderfolgende Sections */
.ams-section.ams-section.am-tight-top { padding-top: 72px; }

/* Karte. overflow:visible auf der Column, damit der Wrapper-Lift nicht
   geclippt wird (Avada setzt wegen border-radius --awb-overflow:hidden auf
   die Column). Das Bild-Clipping macht der Wrapper selbst (overflow+radius). */
.ams-card { margin-bottom: 0 !important; cursor: pointer;
            overflow: visible !important; --awb-overflow: visible !important; }
.ams-card > .fusion-column-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
  /* Bild am Karten-Radius clippen: overflow auf dem WRAPPER erzwingen.
     Die Column trägt --awb-overflow:visible (für den Hover-Lift) und vererbt
     die Variable hierher → lokal auf hidden zurücksetzen + !important, sonst
     ragen die quadratischen oberen Bild-Ecken über den Radius hinaus. */
  --awb-overflow: hidden;
  overflow: hidden !important;
  border-radius: 10px;
  transition: transform 250ms var(--ease-out),
              box-shadow 250ms var(--ease-out) !important;
}

/* Karten-Raster: Avadas Flex-Gutter (column_spacing) ist nicht steuerbar
   (px wie % werden ignoriert) → echtes CSS-Grid auf der row_inner
   (.am-card-grid); Gap frei wählbar, Hover-Lift wird nicht geclippt.
   Die Row trägt inline width:104% + -2% Ränder (Avada-Flex) → per
   box-sizing + padding:2% exakt auf 0..100% kompensiert. Spalten-Margin
   (--awb-spacing) wird genullt, Breite = Grid-Zelle. */
.am-card-grid { display: grid !important; grid-template-columns: repeat(3, 1fr);
                gap: 24px; box-sizing: border-box; padding-left: 2%; padding-right: 2%; }
.am-card-grid .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
@media (max-width: 1024px){ .am-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .am-card-grid { grid-template-columns: 1fr; } }
/* Sanftes Schweben — Transform/Shadow auf dem WRAPPER (= sichtbare Karte),
   NICHT auf der Column (Gutter-Rand-Glitch). */
.ams-card:hover > .fusion-column-wrapper {
  transform: translateY(-12px) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18) !important;
}

/* Bild full-width oben */
.ams-card .fusion-image-element { margin: 0 0 16px 0 !important; line-height: 0; }
.ams-card .ams-card__img { display: block; width: 100%; }
.ams-card .ams-card__img img {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Titel + Text (eigenes Padding, da Column-Padding 0) */
.ams-card__title { padding: 0 28px !important; margin: 0 !important; }
.ams-card__title .fusion-title-heading {
  font: var(--t-h4) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  min-height: 2.8em !important;
  transition: color var(--t-base) var(--ease-out);
}
.ams-card__text { padding: 10px 28px 0 28px !important; margin: 0 !important; }
.ams-card__text p { font: var(--t-small); color: var(--ink-2); margin: 0; }

/* Einziger Hover: Titel rot */
.ams-card:hover .ams-card__title .fusion-title-heading { color: var(--brand-primary) !important; }

/* Ganze Karte klickbar: transparenter Overlay-Anchor über dem Wrapper */
.ams-card__overlay { margin: 0 !important; padding: 0 !important; }
.ams-card__overlay a { position: absolute; inset: 0; z-index: 4; }

/* CTA-Abschluss-Kachel: weiß, ink-Top-Border, zentriert, eigenes Padding */
.ams-card--cta > .fusion-column-wrapper { justify-content: center; padding: 28px !important; }
.ams-card--cta .ams-card__title,
.ams-card--cta .ams-card__text { padding: 0 !important; }


/* =====================================================================
   LEISTUNGEN — Section 3 (Prozess / Schritte)
   ---------------------------------------------------------------------
   4 Schritte = nested column_inner (1_4) mit Top-Border (2px line).
   Inhalt gestapelt: Nummer (mono, rot) · Icon · Titel · Text.
   ===================================================================== */
.ams-step__no { margin: 0 0 16px !important; }
.ams-step__no p {
  font: 600 0.8rem/1 var(--font-mono);
  color: var(--brand-primary);
  letter-spacing: 0.08em;
  margin: 0;
}
.ams-step__icon {
  display: block;
  margin: 0 0 14px !important;
  font-size: 24px !important;
  color: var(--brand-primary) !important;
}
.ams-step__title { margin: 0 0 8px !important; }
.ams-step__title .fusion-title-heading {
  font: var(--t-h4) !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.ams-step__text p { font: var(--t-small); color: var(--ink-2); margin: 0; }


/* =====================================================================
   LEISTUNGEN — Section 4 (CTA-Band, dunkel, zentriert)
   ---------------------------------------------------------------------
   Container trägt zusätzlich .am-on-dark (Titel weiß). Inhalt zentriert,
   max 720px; Lead hell; 2 Buttons mittig (primary + weiß-outline Tel).
   ===================================================================== */
.am-cta-band .fusion-column-wrapper {
  max-width: 720px;
  margin: 0 auto !important;
  text-align: center;
  align-items: center;   /* Flex-Spalte (content_layout=column): Items horizontal zentrieren,
                            sonst sitzt das schmale Lead-Element (p max-width:600) links */
}
.am-cta-band .fusion-text.am-eyebrow { display: inline-flex; }
.am-cta-lead p {
  font: 400 1.125rem/1.7 var(--font-sans);
  color: rgba(255,255,255,0.75);
  margin: 0 auto;
  max-width: 600px;
  text-align: center;
}
.am-cta-actions .fusion-column-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center;
  gap: 18px !important;
}
.am-cta-actions .fusion-button-wrapper { margin: 0 !important; }


/* =====================================================================
   LETTERSHOP-DETAILSEITE (/lettershop-test) — 1. Leistungs-Detailseite
   ---------------------------------------------------------------------
   Avada-nativ. Reuse: Kontakt-Hero (am-kontakt-hero / ams-hero-fill /
   am-quickcard) + am-sec-head + am-cta-band. Hier nur neue Atome.
   ===================================================================== */

/* ── Breadcrumb (auf dunklem Hero) ─────────────────────────────────── */
.am-crumb p { margin: 0; font: 500 .78rem/1 var(--font-sans);
              letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.am-crumb a { color: rgba(255,255,255,.6); text-decoration: none;
              transition: color var(--t-base) var(--ease-out); }
.am-crumb a:hover           { color: #fff; }
.am-crumb i                 { font-size: 9px; opacity: .7; margin: 0 8px; vertical-align: middle; }
.am-crumb .am-crumb__here   { color: #fff; }

/* ── Quickcard: Leistungs-Steckbrief (statt Kontaktzeilen) ─────────── */
.am-cap p           { margin: 0; font: 400 16px/1.5 var(--font-sans); color: rgba(255,255,255,.9); }
.am-cap strong      { color: #fff; font-weight: 600; }
.am-quickcard__foot p { margin: 0; font: 400 .8rem/1.5 var(--font-sans);
                        color: rgba(255,255,255,.55); text-align: center; }
/* „Im Leistungspaket"-Label größer als das Kontakt-Hero-Label (gescoped) */
.am-pkg-label p { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.72); }
/* Trust-Bar: rein nativ (wie Kontakt) — keine eigenen Klassen nötig. */

/* ── Print-Detail Hero: Trust-Bar als TEIL von Section 1 ───────────────
   Abweichung vom Lettershop-Muster: die Trust-Bar liegt transparent am
   unteren Hero-Rand über dem Foto (CI-Vorgabe). Ein Container → eine Row →
   1_1-Column (.am-hero-col) → zwei row_inner: .am-hero-main (Haupttext+Card,
   füllt den Raum) + .am-hero-trust (unten angedockt). Vertikales Verteilen
   kann Avada nicht nativ → hier scoped. -------------------------------- */
.am-kontakt-hero .am-hero-col > .fusion-column-wrapper {
  display: flex !important; flex-direction: column; justify-content: space-around;
  min-height: calc(100vh - var(--nav-height, 94px) - 85px); gap: clamp(32px, 5vh, 64px); }
.am-kontakt-hero .am-hero-col .fusion_builder_row_inner { width: 100% !important; }
.am-kontakt-hero .am-hero-trust { padding-top: 0; }
/* Browser/Avada-Default-margin auf <p> im Hero unterbinden (Inline-Margins
   der Lead-Absätze bleiben, da Inline > Klassen-Selektor). */
.am-kontakt-hero .fusion-text p { margin-bottom: 0; }
/* Caps der Quickcard als natives fusion_checklist (statt nested rows —
   Avada erlaubt nur eine Nesting-Ebene; die Card ist hier column_inner). */
.am-quickcard__caps { margin-top: 0 !important; }
.am-quickcard__caps .fusion-li-item         { padding-top: 0 !important; margin-bottom: 15px !important; align-items: flex-start; }
.am-quickcard__caps .fusion-li-item:last-child { margin-bottom: 0 !important; }
.am-quickcard__caps .fusion-li-icon         { color: var(--brand-primary) !important; font-size: 17px !important; margin-top: 3px; }
.am-quickcard__caps .fusion-li-item-content { margin-inline-start: 14px !important; font: 400 16px/1.5 var(--font-sans) !important; color: rgba(255,255,255,.9) !important; }
.am-quickcard__caps .fusion-li-item-content strong,
.am-quickcard__caps .fusion-li-item-content b { color: #fff !important; font-weight: 600; }
/* Trust-Items transparent/on-dark. Icon-Größe via Inline-Var --awb-font-size
   (size="22px" je Shortcode) → seitenübergreifend hier per !important/Scope
   überschrieben (deutlich größer); Texte leicht größer. */
.am-hero-trust .fontawesome-icon { font-size: 30px !important; }
.am-tr-title .fusion-title-heading { font: 600 18px/1.3 var(--font-sans) !important; color: #fff !important; letter-spacing: -.01em; }
.fusion-text.am-tr-desc,
.fusion-text.am-tr-desc p { margin: 0; font: 400 15px/1.55 var(--font-sans); color: rgba(255,255,255,.72) !important; }
/* Subtext 1- vs 2-zeilig → Mindesthöhe 2 Zeilen, damit alle Trust-Items gleich
   hoch sind (min-height, nicht fix: längerer Umbruch auf schmalen Viewports
   wird nicht gekappt). 2 × 1.55 × 15px ≈ 46.5px. */
.fusion-text.am-tr-desc { min-height: 47px; }
@media (max-width: 640px) { .fusion-text.am-tr-desc { min-height: 0; } }

/* Lesbarkeit: dezenter Textschatten im Hero, weil Text/Icons über dem
   Hintergrundbild liegen (je nach Motiv stellenweise kontrastarm). Nur im
   Hero (am-kontakt-hero), NICHT in soliden dunklen Sektionen (CTA etc.).
   text-shadow vererbt → erreicht auch Eyebrow-/Crumb-Spans in den fusion_text. */
.am-kontakt-hero .fusion-title-heading,
.am-kontakt-hero .fusion-text,
.am-kontakt-hero .fontawesome-icon { text-shadow: 0 1px 4px rgba(0,0,0,0.6); }

/* ── Leistungs-Hero: Navbar statt Trust-Bar (neue Leistungen-Standalone) ──
   Hero = 1_1 `am-hero-col` → row_inner `am-hero-main` (Text + Stats-Card, füllt
   den Raum, vertikal zentriert) + Label + row_inner `am-leistungsnav` (8 Links,
   4×2, unten). Navbar transparent über dem Foto, **dark/light-kompatibel**:
   Text/Trennlinien aus dem Section-Theme via `currentColor`/`color-mix`, Icons =
   brand-primary-glow. 8 Items als CSS-Grid (kein Avada-Gutter; Learning #10/#11). */
.am-leistung-hero .am-hero-col > .fusion-column-wrapper { display: flex !important; flex-direction: column;
                   justify-content: space-around; min-height: calc(100vh - var(--nav-height, 94px) - 85px); }
.am-leistung-hero .am-hero-col .fusion_builder_row_inner { width: 100% !important; }
.am-leistung-hero .fusion-text p { margin-bottom: 0; }
/* Action-Buttons im Haupttext nebeneinander (ohne nested row — Learning #16) */
.am-leistung-hero .am-hero-main .fusion-button-wrapper { display: inline-flex !important; vertical-align: top; margin: 0 14px 0 0 !important; }
/* Navbar-Label */
.am-lnav__label { margin: 0 !important; }
.am-lnav__label p { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--font-sans);
                    letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.am-lnav__label p::before { content: ""; width: 24px; height: 2px; background: var(--brand-primary-glow); display: inline-block; flex: 0 0 24px; }
/* Navbar-Grid (4-up CSS-Grid) — Farben exakt wie Standalone (dark) */
.am-leistungsnav { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0; box-sizing: border-box;
                   padding: 0 2%; margin-top: 34px; border-top: 1px solid rgba(255,255,255,.16); }
.am-leistungsnav .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.am-lnav__item, .am-lnav__item .fusion-text, .am-lnav__item p { height: 100%; margin: 0 !important; }
.am-lnav__item a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 22px 24px; color: #fff;
                   text-decoration: none; position: relative; box-sizing: border-box;
                   border-bottom: 1px solid rgba(255,255,255,.16);
                   border-right: 1px solid rgba(255,255,255,.10);
                   transition: background var(--t-base) var(--ease-out); }
.am-leistungsnav .fusion_builder_column_inner:nth-child(4n) .am-lnav__item a { border-right: 0; }
.am-lnav__item a::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 2px;
                          background: var(--brand-primary-glow); transform: scaleX(0); transform-origin: left;
                          transition: transform var(--t-base) var(--ease-out); }
.am-lnav__item a:hover { background: rgba(15,22,30,.60); color: #fff; }
.am-lnav__item a:hover::after { transform: scaleX(1); }
.am-lnav__item i { color: var(--brand-primary-glow); font-size: 22px; width: 26px; text-align: center; flex-shrink: 0; }
.am-lnav__name { font: 600 1.15rem/1.25 var(--font-sans); }
@media (max-width: 1024px) {
  .am-leistungsnav { grid-template-columns: repeat(2, 1fr); }
  .am-leistungsnav .fusion_builder_column_inner:nth-child(4n) .am-lnav__item a { border-right: 1px solid rgba(255,255,255,.10); }
  .am-leistungsnav .fusion_builder_column_inner:nth-child(2n) .am-lnav__item a { border-right: 0; }
}
@media (max-width: 640px) {
  .am-leistungsnav { grid-template-columns: 1fr; }
  .am-leistungsnav .am-lnav__item a { border-right: 0 !important; }
}
/* Light-Theme-Variante (Navbar bleibt dark/light-kompatibel): auf hellem
   Container `am-on-light` ODER via Modifier `am-leistungsnav--light`. */
.am-on-light .am-leistungsnav,
.am-leistungsnav--light                       { border-top-color: rgba(26,26,26,.14); }
.am-on-light .am-lnav__label p,
.am-leistungsnav--light .am-lnav__label p     { color: rgba(26,26,26,.58); }
.am-on-light .am-lnav__item a,
.am-leistungsnav--light .am-lnav__item a      { color: var(--ink); border-bottom-color: rgba(26,26,26,.14); border-right-color: rgba(26,26,26,.09); }
.am-on-light .am-lnav__item a:hover,
.am-leistungsnav--light .am-lnav__item a:hover { background: rgba(26,26,26,.04); color: var(--ink); }
@media (max-width: 1024px) {
  .am-on-light .am-leistungsnav .fusion_builder_column_inner:nth-child(4n) .am-lnav__item a,
  .am-leistungsnav--light .fusion_builder_column_inner:nth-child(4n) .am-lnav__item a { border-right-color: rgba(26,26,26,.09); }
}

/* ── Quicknav: 7-up Bild-Kachel-Raster ────────────────────────────────
   Avada kann 7 Spalten nicht als native Fraction → CSS-Grid auf der
   row_inner (.am-quicknav), Tiles = column_inner. Ganze Kachel klickbar
   via Overlay-<a> (Learning #6). ------------------------------------- */
.am-quicknav { display: grid !important; grid-template-columns: repeat(7, 1fr); gap: 16px;
               box-sizing: border-box; padding-left: 2%; padding-right: 2%; }
/* 8-up-Variante (Print-Detailseite, 8 Druckdisziplinen). Nur Desktop-Spaltenzahl
   anders; die 1024-/640-Media-Queries unten greifen über den Basis-Selektor. */
.am-quicknav.am-quicknav--8 { grid-template-columns: repeat(8, 1fr); }
/* 3-up-Variante (Logistik-Detailseite, 3 Kategorien). Breitere Tiles → 4:3 statt 1:1,
   bleibt auf Tablet 3-spaltig (höhere Spezifität schlägt die 1024-Basis-Query). */
.am-quicknav.am-quicknav--3 { grid-template-columns: repeat(3, minmax(0, 190px)); justify-content: center; gap: 24px; }
.am-quicknav--3 .am-qn__img img { aspect-ratio: 4 / 3; }
@media (max-width: 640px) { .am-quicknav.am-quicknav--3 { grid-template-columns: 1fr; } }
/* 2-up-Variante (Grafik-Detailseite, 2 Kategorien). Gleiche Tile-Größe wie --3. */
.am-quicknav.am-quicknav--2 { grid-template-columns: repeat(2, minmax(0, 190px)); justify-content: center; gap: 24px; }
.am-quicknav--2 .am-qn__img img { aspect-ratio: 4 / 3; }
@media (max-width: 640px) { .am-quicknav.am-quicknav--2 { grid-template-columns: 1fr; } }
/* Avada legt der Row inline width:104% + -2% Seitenränder auf (Gutter-System);
   inline !important ist extern unschlagbar → per border-box + 2% Padding genau
   kompensiert (Tracks landen exakt auf 0..100%). Tiles tragen den Gutter als
   --awb-spacing-Variablen → Padding/Marge der column_inner auf 0. */
.am-quicknav .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important;
               padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; }
.am-qn { position: relative; }
.am-qn .am-qn__img { display: block; margin: 0 0 12px !important; border-radius: var(--r-card);
                     overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card); }
.am-qn .am-qn__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
                         transition: transform var(--t-slow) var(--ease-out); }
.am-qn:hover .am-qn__img img { transform: scale(1.06); }
.am-qn__label { margin: 0 !important; }
.am-qn__label .fusion-title-heading { font: 600 .84rem/1.2 var(--font-sans) !important;
                                      color: var(--ink) !important; text-align: center;
                                      transition: color var(--t-base) var(--ease-out); }
.am-qn:hover .am-qn__label .fusion-title-heading { color: var(--brand-primary) !important; }
.am-qn__overlay { margin: 0 !important; }
.am-qn__overlay a { position: absolute; inset: 0; z-index: 4; }
@media (max-width: 1024px){ .am-quicknav { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (max-width: 640px) { .am-quicknav { grid-template-columns: repeat(2, 1fr); } }

/* ── Prozess-Schritte (Grafik-Detailseite, 3 Schritte: Nummer+Linie / Icon-Titel / Text)
   CSS-Grid auf der row_inner wie am-quicknav (Avada column_spacing wirkungslos, Learning #10/#11). */
.am-process { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px);
              box-sizing: border-box; padding-left: 2%; padding-right: 2%; }
.am-process .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important;
              padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; }
/* Nummer = natives fusion_text "01" (kein Struktur-HTML). Die Trennlinie rechts der Nummer
   als CSS-::after (inline neben Text ohne 2. Nesting-Ebene nicht nativ machbar, Learning #16). */
.am-pstep__no { margin: 0 0 14px !important; }
.am-pstep__no p { display: flex; align-items: center; gap: 16px; margin: 0;
              font: 700 2.25rem/1 var(--font-sans); color: var(--brand-primary);
              font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.am-pstep__no p::after { content: ''; flex: 1; height: 1px; background: var(--border-1); }
.am-pstep__title { margin: 0 0 14px !important; }
.am-pstep__title .fusion-title-heading { display: flex !important; align-items: center; gap: 11px;
              font: 600 1.25rem/1.3 var(--font-sans) !important; color: var(--ink) !important; letter-spacing: -0.01em; }
.am-pstep__title i { color: var(--brand-primary); font-size: 19px; }
.am-pstep__text { font: 400 1.0625rem/1.6 var(--font-sans); color: var(--fg-2); }
.am-pstep__text p { margin: 0; }
.am-pstep__text b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px){ .am-process { grid-template-columns: 1fr; gap: 36px; } .am-pstep__no p { font-size: 1.875rem; } }

/* ── Statistik-Band (Logistik-Detailseite, dunkel, 4 Kennzahlen zentriert) ─────
   CSS-Grid auf der row_inner wie am-quicknav. Native Atome: Zahl/Label/Sub je
   fusion_text. Zahlen statisch (keine Count-Animation). am-sec-head--center für
   die zentrierte Kopfzeile (Eyebrow + H2 ohne Lead). */
.am-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.am-sec-head--center .fusion-column-wrapper { align-items: center !important; }
.am-sec-head--center .fusion-text p { text-align: center; }
.am-statband { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 56px);
               box-sizing: border-box; padding-left: 2%; padding-right: 2%; text-align: center; }
.am-statband .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important;
               padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; }
/* Zahl = nativer Avada-Counter (fusion_counter_box, Count-up beim Scroll-in).
   Globalen Counter-Skin (Icon|Label-Grid) hier überschreiben → nur zentrierte Zahl.
   Hinweis: Avada-Counter zählt nur HOCH; Fixkosten-Count-down geht nativ nicht. */
.am-statband__item .fusion-counters-box { margin: 0 0 8px !important; width: 100%; }
.am-statband__item .fusion-counter-box { margin: 0 !important; width: 100% !important; float: none !important; text-align: center !important; }
.am-statband__item .counter-box-container { display: block !important; }
.am-statband__item .content-box-percentage { display: inline-flex !important; align-items: baseline; }
.am-statband__item .display-counter, .am-statband__item .unit {
               font: 700 clamp(2.75rem, 5vw, 4rem)/1 var(--font-sans) !important;
               color: var(--brand-primary-glow) !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.am-statband__item .unit { font-size: 0.5em !important; margin-left: 4px; }
.am-statband__item .counter-box-content, .am-statband__item .counter-box-icon { display: none !important; }
/* Statische Zahl (z. B. Fixkosten 0 €) — Avada-Counter liefert bei value=0 NaN,
   daher hier nativer fusion_text im selben Zahlen-Stil. */
.am-statband__numtext { margin: 0 0 8px !important; }
.am-statband__numtext p { margin: 0; font: 700 clamp(2.75rem, 5vw, 4rem)/1 var(--font-sans);
               color: var(--brand-primary-glow); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.am-statband__label { margin: 0 0 6px !important; }
.am-statband__label p { margin: 0; font: 600 1.0625rem/1.4 var(--font-sans); color: #fff; letter-spacing: -0.01em; }
.am-statband__sub { max-width: 24ch; margin: 0 auto !important; }
.am-statband__sub p { margin: 0; font: 400 0.92rem/1.5 var(--font-sans); color: rgba(255,255,255,0.6); }
@media (max-width: 760px){ .am-statband { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
@media (max-width: 460px){ .am-statband { grid-template-columns: 1fr; } }

/* ── Mailing-Typ-Sektionen (alternierend Bild/Text + Checkliste) ───────
   2-up nativ (1_2 + 1_2), Alternierung durch physische Spalten-Reihenfolge.
   id am Container = Quicknav-Anker; scroll-margin schützt vor Header-Overlap. */
.am-mtype { scroll-margin-top: 88px; }
.am-mtype__media { display: block !important; width: 100%; }
.am-mtype__media p { margin: 0; }
.am-mtype__media img,
.am-mtype__media video { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
                       border-radius: var(--r-card); box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card); }
.am-mtype__lead p      { margin: 0 0 22px; font: var(--t-lead); color: var(--ink-2); }
.am-mtype__lead strong { color: var(--ink); font-weight: 600; }
/* Sketch/Signet-Bild: natürliche Proportionen, kein aspect-ratio-Crop */
.am-sketch { margin: 0; }
.am-sketch img { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; }
@media (max-width: 900px) { .am-sketch img { max-width: 360px; } }
/* Portrait-Foto (Geschäftsführung): natürliche Proportionen, max 64vh, contain */
.am-portrait { margin: 0; }
.am-portrait img { aspect-ratio: auto; width: auto; max-width: 100%; height: auto; max-height: 64vh;
                   display: block; margin: 0 auto; object-fit: contain; border-radius: var(--r-card); }
/* GF-Foto (Über-uns S3): etwas kleiner + rechtsbündig (näher an den Text) */
.am-portrait.am-gf-photo img { max-width: 410px; max-height: 60vh; margin-left: auto; margin-right: 0; }
@media (max-width: 900px) { .am-portrait.am-gf-photo img { margin: 0 auto; } }
/* Geschäftsführer-Kontaktzeilen */
.am-gf-contacts { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.am-gf-contact { display: flex; align-items: center; gap: 12px; }
.am-gf-contact i { color: var(--brand-primary); font-size: 16px; width: 18px; flex-shrink: 0; text-align: center; }
.am-gf-contact a { color: var(--ink); text-decoration: none; font: 400 1.0625rem/1.5 var(--font-sans); }
.am-gf-contact a:hover { color: var(--brand-primary); }
.am-checklist .fusion-li-item         { padding-top: 0 !important; margin-bottom: 15px !important; align-items: flex-start; }
.am-checklist .fusion-li-icon         { color: var(--brand-primary) !important; font-size: 17px !important; margin-top: 4px; }
.am-checklist .fusion-li-item-content { margin-inline-start: 14px !important; font: 400 1.125rem/1.6 var(--font-sans) !important; color: var(--ink); }
.am-checklist .fusion-li-item-content b,
.am-checklist .fusion-li-item-content strong { font-weight: 600; color: var(--ink); }


/* ============================================================
   §37 WERBETECHNIK-DETAILSEITE — Material-Katalog-Atome
   ------------------------------------------------------------
   Reuse: Kontakt-Hero (am-kontakt-hero / ams-hero-fill /
   am-quickcard / am-hero-trust §33.1) + am-sec-head + am-checklist
   + am-cta-band. Body-Muster ist hier ein KATALOG (Material-Kachel-
   raster), NICHT das alternierende am-mtype. NEU: Quicknav-4er,
   am-tilegrid/am-tile, am-matside--band, am-vehicle/am-gallery.
   ============================================================ */

/* ── Quicknav 4-up (Werbetechnik) ────────────────────────────
   Wie §32.3/§34.1, aber 4 volle Spalten mit Querformat-Tiles
   (lange Labels „Folien & Klebematerialien"). Basis-Responsive
   (1024→4, 640→2) der §32.3-am-quicknav greift mit. */
.am-quicknav.am-quicknav--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.am-quicknav--4 .am-qn__img img { aspect-ratio: 4 / 3; }
/* 5-up-Variante (Programmierung-Detailseite, 5 Bereiche). Full-width wie --4/--8,
   Querformat-Tiles; Basis-Responsive (1024→4, 640→2) greift mit. */
.am-quicknav.am-quicknav--5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.am-quicknav--5 .am-qn__img img { aspect-ratio: 4 / 3; }

/* ── Material-Kachelraster am-tilegrid (auf row_inner) ────────
   CSS-Grid auf der row_inner (Avada column_spacing wirkungslos,
   Learning #10/#11 → padding:0 2%-Kompensation, Spalten margin:0).
   Tile = column_inner class="am-tile": fusion_imageframe
   .am-tile__img + fusion_text .am-tile__cap. Aspect je Kategorie
   exakt aus dem Mockup. Hover-Zoom 1.05. */
.am-matcat { scroll-margin-top: 88px; }
/* Dunkle Kategorie-Sektion (am-matcat + am-on-dark): Lead + Caption lesbar.
   Scoped auf .am-on-dark, damit helle Kachelsektionen unberührt bleiben. */
.am-on-dark .am-sec-head .fusion-text.am-lead p,
.am-on-dark .am-lead p { color: rgba(255,255,255,0.8); }
.am-on-dark .am-sec-head .fusion-text.am-lead strong,
.am-on-dark .am-lead strong { color: #fff; }
.am-on-dark .am-tile__cap p { color: rgba(255,255,255,0.6); }
.am-tilegrid { display: grid !important; gap: 18px; width: 100%; box-sizing: border-box; padding: 0 2%; }
.am-tilegrid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.am-tilegrid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.am-tilegrid--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.am-tilegrid .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.am-tile__img { display: block !important; overflow: hidden; border-radius: 6px; background: var(--surface); margin: 0 !important; }
.am-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease-out); }
.am-tilegrid--3 .am-tile__img { aspect-ratio: 677 / 400; }
.am-tilegrid--5 .am-tile__img { aspect-ratio: 677 / 693; }
.am-tilegrid--4 .am-tile__img { aspect-ratio: 677 / 1000; }
.am-tile:hover .am-tile__img img { transform: scale(1.05); }
.am-tile__cap p { margin: 14px 0 0 !important; text-align: center; font: 600 0.85rem/1.3 var(--font-sans);
                  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 1024px) { .am-tilegrid--5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
                             .am-tilegrid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px)  { .am-tilegrid--3, .am-tilegrid--4, .am-tilegrid--5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 440px)  { .am-tilegrid { grid-template-columns: minmax(0,1fr); } }

/* ── Vergleichsraster am-compare (HP-Latex Weißdruck, §41) ───
   am-tilegrid--3 als zentrierte, kompakte Vorher/Nachher-Reihe unter
   einem am-mtype-Feature. Avada schreibt dem row_inner inline
   max-width:104% !important — Container-Breite ist daher nicht per
   Stylesheet kappbar; stattdessen feste, zentrierte Grid-Spuren
   (grid-template-columns setzt Avada NICHT inline). */
.am-compare { margin-top: clamp(28px,4vw,52px) !important;
              grid-template-columns: repeat(3, minmax(0,260px)) !important;
              justify-content: center !important; }

/* ── Hinweis-Band am-matside--band (unter dem Banner-Raster) ──
   column_inner 1_1, full-width Surface-Panel: Titel (fusion_text)
   + fusion_checklist am-checklist 3-spaltig. */
.am-matside--band { margin-top: 44px !important; background: var(--surface); border-radius: var(--r-card); padding: 28px 32px; }
.am-matside__title p { margin: 0 0 18px !important; font: 600 0.78rem/1 var(--font-sans);
                       letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.am-matside--band .fusion-checklist { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 36px; row-gap: 14px; }
.am-matside--band .am-checklist .fusion-li-item { margin-bottom: 0 !important; }
.am-matside--band .am-checklist .fusion-li-item-content { font-size: 1rem !important; }
@media (max-width: 760px) { .am-matside--band .fusion-checklist { grid-template-columns: 1fr; } }

/* ── Querverweis-Band am-matxref (Folien → HP-Latex-Detailseite) ──
   column_inner content_layout="row" class="am-matxref": linker
   Beschreibungstext (fusion_text am-matxref__txt) + rechter
   fusion_button (Rot-Outline) "Mehr zur Maschine". Wie Mockup-
   Referenz: KEIN Card-Kasten, sondern eine dezente Trennlinie
   (border-top var(--line)) + padding-top, die den Verweisteil von der
   Kachel-Galerie darüber absetzt. Stapelt unter 760px. */
.am-matxref { margin-top: clamp(32px,4vw,48px) !important; }
.am-matxref .fusion-column-wrapper {
  display: flex !important; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 14px 28px;
  border-top: 1px solid var(--line) !important; padding-top: 28px !important; }
.am-matxref__txt { flex: 1 1 380px; max-width: 64ch; }
.am-matxref__txt p { margin: 0 !important; font: 400 1.0625rem/1.6 var(--font-sans);
                     color: var(--ink-2); }
.am-matxref__txt strong { color: var(--ink); font-weight: 600; }
.am-matxref .fusion-button-wrapper { margin: 0 !important; flex: 0 0 auto; }
@media (max-width: 760px) { .am-matxref .fusion-column-wrapper { flex-direction: column; align-items: flex-start; } }

/* ── Fahrzeug-Galerie-Modul am-vehicle ───────────────────────
   Folgt dem Sektions-Ton: hell (surface, Mockup-Referenz) per
   Default; Weiß-Text-Overrides sind auf .am-on-dark gescoped, falls
   die Sektion wieder dunkel gestellt wird.
   row_inner am-vehicle__grid = CSS-Grid 1.6fr/1fr; 2 column_inner:
   links am-gallery (9 fusion_imageframe als Sub-Grid im column-
   wrapper, eine breit), rechts am-vehicle__side (Eyebrow/H2/Lead/
   Checkliste). Sub-Grid auf den column-wrapper, weil column_inner
   keine weitere row_inner nesten darf (Learning #16). */
.am-vehicle__grid { display: grid !important; grid-template-columns: 1.6fr 1fr; gap: clamp(40px,4vw,64px);
                    align-items: start; width: 100%; box-sizing: border-box; padding: 0 2%; }
.am-vehicle__grid > .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
@media (max-width: 960px) { .am-vehicle__grid { grid-template-columns: 1fr; gap: 40px; } }
/* Avada wrappt jedes fusion_imageframe in ein <div.fusion-image-element>
   — DAS ist das Grid-Item (nicht das innere .fusion-imageframe-span). Grid
   + aspect-ratio + Clip daher aufs .fusion-image-element. Wide = erstes Item
   (auto-2) → span 2. */
.am-gallery > .fusion-column-wrapper { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
.am-gallery > .fusion-column-wrapper > .fusion-image-element {
  margin: 0 !important; border-radius: var(--r-image); overflow: hidden; aspect-ratio: 4 / 3; }
.am-gallery > .fusion-column-wrapper > .fusion-image-element:first-child { grid-column: span 2; aspect-ratio: 8 / 3; }
.am-gallery .fusion-imageframe { display: block !important; height: 100%; margin: 0 !important; line-height: 0; }
.am-gallery .fusion-imageframe img { width: 100%; height: 100%; object-fit: cover; display: block;
                                     transition: transform var(--t-slow) var(--ease-out); }
.am-gallery .fusion-image-element:hover img { transform: scale(1.06); }
@media (max-width: 600px) { .am-gallery > .fusion-column-wrapper { grid-template-columns: repeat(2,1fr); }
                            .am-gallery > .fusion-column-wrapper > .fusion-image-element:first-child { grid-column: span 2; aspect-ratio: 16 / 6; } }
.am-vehicle__side .am-vehicle__lead p { margin: 0 0 26px !important; font: var(--t-lead); color: var(--ink-2); }
.am-vehicle__side .am-vehicle__lead strong { color: var(--ink); font-weight: 600; }
.am-on-dark .am-vehicle__side .am-vehicle__lead p { color: rgba(255,255,255,0.78); }
.am-on-dark .am-vehicle__side .am-vehicle__lead strong { color: #fff; font-weight: 500; }
.am-on-dark .am-vehicle__side .am-checklist .fusion-li-item-content { color: rgba(255,255,255,0.85) !important; }
.am-on-dark .am-vehicle__side .am-checklist .fusion-li-item-content b,
.am-on-dark .am-vehicle__side .am-checklist .fusion-li-item-content strong { color: #fff !important; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   §38 · Programmierung-Detailseite (/programmierung-test) — Atome
   ════════════════════════════════════════════════════════════════════ */

/* ── Vernetzungs-Diagramm (NATIV) — Hub-Banner + 3-Spalten-Knotenraster ──────
   Eugen-Redesign: KEIN position:absolute / aspect-ratio (kollabiert in Avadas
   Flex-Spalten, s. Learning #23/#24). Hub = rote, zentrierte Pille (Spalten-
   Wrapper als fit-content-Flex: Logo + Text), gestrichelter Verbinder via
   ::after, 6 Knoten als CSS-Grid auf der row_inner (wie am-statband, 104%-
   Kompensation). Logo 4218 (AuM_Logo_Weiss_quer) ist bereits weiß → kein Filter. */
/* Spezifität (.ams-section …) + !important, weil Avada den Spalten-Wrapper mit
   gleicher Spezifität und späterer Ladereihenfolge überschreibt. */
.ams-section .am-netmap__hub > .fusion-column-wrapper { position: relative;
  width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 0 auto 56px !important;
  display: flex !important; align-items: center; gap: 18px; text-align: left;
  background: var(--brand-primary) !important; border-radius: var(--r-card);
  padding: 22px 32px !important; box-shadow: var(--shadow-cta), 0 0 0 8px rgba(204,0,0,0.12); }
.am-netmap__hub .fusion-imageframe { margin: 0 !important; flex-shrink: 0; line-height: 0; }
.am-netmap__hub .am-netmap__logo img { height: 34px; width: auto; }
.am-netmap__hub .fusion-text p { margin: 0; font: 500 1.05rem/1.35 var(--font-sans); color: #fff; max-width: 26ch; }
.am-netmap__hub .fusion-text p b { font-weight: 700; }
/* gestrichelter Verbinder hängt zentriert UNTER der Pille (absolut an der Pille
   verankert — als Flex-Kind der Spalte landete er sonst am Rand). */
.am-netmap__hub > .fusion-column-wrapper::after { content: ""; position: absolute;
  left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  width: 0; height: 36px; border-left: 2px dashed rgba(232,0,31,0.6); }
.am-netmap__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;
  box-sizing: border-box; padding-left: 2%; padding-right: 2%; }
.am-netmap__grid .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; }
/* Spezifität + !important wie beim Hub — Avada überschreibt den Spalten-Wrapper sonst.
   Breite NICHT hier kappen — wird nativ über Avada (Spaltenbreite) gesteuert.
   Inhalt vertikal+horizontal zentriert. */
.ams-section .am-netmap__node > .fusion-column-wrapper { height: 100%;
  background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: var(--r-card); padding: 16px 14px !important;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.am-netmap__node .fusion-icon { margin: 0 !important; }
.am-netmap__node .fusion-icon i { color: var(--brand-primary-glow); font-size: 24px; }
.am-netmap__nl, .am-netmap__nl .fusion-title-heading { margin: 0 !important;
  font: 600 0.85rem/1.3 var(--font-sans); color: #fff; letter-spacing: -0.01em; }
.am-netmap__ns p { margin: 0; font: 400 0.78rem/1.4 var(--font-sans); color: rgba(255,255,255,0.6); }
@media (max-width: 760px) {
  .am-netmap__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .am-netmap__hub > .fusion-column-wrapper { flex-direction: column; text-align: center; gap: 12px; }
  .am-netmap__hub .fusion-text p { max-width: none; }
}
@media (max-width: 440px) { .am-netmap__grid { grid-template-columns: 1fr; } }
/* Light-Kontext-Overrides (Vernetzungs-Sektion auf --light statt --dark).
   Spezifität 3 Klassen (> 2 Klassen der Basis-Regel) sichert den Override. */
.ams-section.ams-section--light .am-netmap__node > .fusion-column-wrapper {
  background: var(--surface) !important; border-color: var(--line) !important;
  box-shadow: var(--shadow-card) !important; }
.ams-section.ams-section--light .am-netmap__nl,
.ams-section.ams-section--light .am-netmap__nl .fusion-title-heading { color: var(--ink) !important; }
.ams-section.ams-section--light .am-netmap__ns p { color: var(--ink-2); }

/* ============================================================
   §39 · Papier-und-mehr-Detailseite (/papier-test) — Atome
   ════════════════════════════════════════════════════════════════════ */

/* ── Akzent-Modul „Nachhaltig einkaufen" (am-eco) — Editorial-Split ──────────
   Inhaltsgetriebene Eigenheit der Papier-Seite. Links (3_5) Text + 3 offene
   Zertifizierungs-Marken (am-eco__certs, KEINE Box/Cert-Logos); rechts (2_5)
   eine Karte mit Gewichts-Wechsel-Badge (80→75 g/m², am-eco__vsw) + 3 Kennzahl-
   Zeilen (am-eco__rows). Komplett NATIV (kein fusion_code, s. Learning #23/#24);
   Karten-Visual auf dem Spalten-WRAPPER mit .ams-section-Spezifität + !important
   (#12/#24). Badge-Layout per Flex auf der <p> (wpautop, #18).
   WICHTIG: am-eco__certs/__rows sind die `<ul.fusion-checklist>` SELBST (Klasse
   am ul) → kompakte Selektoren `.am-eco__certs.fusion-checklist`, NICHT
   `.am-eco__certs .fusion-checklist` (Descendant matcht nichts, Learning #25). */
/* Zerts: 3 Marken NEBENEINANDER (Grid), je Icon links + Name/Sub gestapelt. */
.am-eco__certs.fusion-checklist { display: grid !important; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 30px; }
.am-eco__certs .fusion-li-item { display: flex !important; align-items: flex-start;
  padding: 0 !important; margin: 0 !important; line-height: 1.3 !important; }
.am-eco__certs .icon-wrapper { margin: 0 !important; flex-shrink: 0; width: auto !important; }
.am-eco__certs .fusion-li-icon { color: var(--brand-primary) !important; font-size: 22px !important;
  width: auto !important; height: auto !important; margin-top: 1px; }
.am-eco__certs .fusion-li-item-content { display: flex !important; flex-direction: column;
  margin: 0 0 0 12px !important; }
.am-eco__certs .fusion-li-item-content b { font: 600 1.0625rem/1.25 var(--font-sans); color: var(--ink); }
.am-eco__certs .am-eco__certsub { font: 400 0.825rem/1.3 var(--font-sans); color: var(--ink-3); margin-top: 3px; }
@media (max-width: 640px) { .am-eco__certs.fusion-checklist { grid-template-columns: 1fr; gap: 16px; } }

/* Karte rechts — Visual auf dem Spalten-Wrapper (.ams-section + !important, #24). */
.ams-section .am-eco__card > .fusion-column-wrapper {
  background: #fff !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-card); padding: 34px 32px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.07); }
/* Gewichts-Wechsel-Badge — HORIZONTAL & NATIV: EINE fusion_text-Zeile mit
   Inline-Rich-Text (einzelnes <i>-Icon + <strong>, #20-erlaubt — KEIN Struktur-
   Gerüst, KEIN fusion_fontawesome-Kreis-Skin). „80" gedämpft, Pfeil + „75" rot.
   Flex auf der <p> (#18). Darunter eine kleine fusion_text-Caption. */
.am-eco__vsw { margin: 0 0 6px !important; }
.am-eco__vsw p { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0;
  font: 800 clamp(1.5rem, 2.6vw, 2rem)/1 var(--font-sans); color: var(--ink-3); letter-spacing: -0.02em; }
.am-eco__vsw strong { color: var(--brand-primary); font-weight: 800; }
.am-eco__vsw i { color: var(--brand-primary); font-size: 0.72em; }
.am-eco__vswcap { margin: 0 !important; }
.am-eco__vswcap p { margin: 0; text-align: center; font: 600 0.7rem/1.2 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
/* Kennzahl-Zeilen: native Checkliste, Icon rot, Zahl als <b> (größer). */
.am-eco__rows.fusion-checklist { margin-top: 0; }
.am-eco__rows .fusion-li-item { display: flex !important; align-items: center;
  padding: 0 !important; margin: 0 0 16px !important; }
.am-eco__rows .fusion-li-item:last-child { margin-bottom: 0 !important; }
.am-eco__rows .icon-wrapper { margin: 0 !important; flex-shrink: 0; width: auto !important; }
.am-eco__rows .fusion-li-icon { color: var(--brand-primary) !important; font-size: 20px !important;
  width: auto !important; height: auto !important; }
.am-eco__rows .fusion-li-item-content { margin: 0 0 0 14px !important;
  font: 400 1.0625rem/1.4 var(--font-sans); color: var(--ink-2); }
.am-eco__rows .fusion-li-item-content b { color: var(--ink); font-weight: 700; font-size: 1.2rem; margin-right: 6px; }
@media (max-width: 980px) { .am-eco__card > .fusion-column-wrapper { margin-top: 32px; } }

/* ============================================================
   §40 · Give-Aways-Detailseite (/give-aways-test) — Atome
   ════════════════════════════════════════════════════════════════════
   Reuse: Kontakt-Hero (§33.1) + am-sec-head + am-cta-band. Eigenheit
   dieser Seite = großer Werbeartikel-KATALOG (34 Artikel). Das Mockup
   gibt eine eigene .catcard vor (Bild + Titel + Kurztext) — passt zu
   keinem Bestands-Atom: am-tile hat keinen Beschreibungstext, ams-card
   ist eine klickbare Verlinkungs-Karte. Daher EINE neue, schlanke,
   NICHT klickbare Katalog-Karte. */

/* Katalog-Raster auf der row_inner — CSS-Grid (Avada column_spacing
   wirkungslos, Learning #10/#11 → padding:0 2%-Kompensation, Spalten
   margin:0/width:100%). 4-up Desktop; 1024→3, 760→2, 440→1. */
.am-catgrid { display: grid !important; gap: 24px; width: 100%; box-sizing: border-box; padding: 0 2%;
  grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 8px; }
.am-catgrid .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important;
  margin: 0 !important; padding: 0 !important; }

/* Karte = column_inner class="am-catcard" (Column-Padding 0 nativ →
   Bild full-bleed oben, Text-Elemente padden sich selbst, Learning #1).
   Karten-Visual auf dem WRAPPER (.ams-section + !important, #12/#24);
   border-radius per CSS (NICHT nativ) → kein --awb-overflow-Clip des
   Hover-Lifts (#12). */
.ams-section .am-catcard > .fusion-column-wrapper {
  background: #fff !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-card); overflow: hidden;
  display: flex !important; flex-direction: column; height: 100%;
  box-shadow: 0 10px 28px rgba(0,0,0,0.05);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.am-catcard:hover > .fusion-column-wrapper { transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10); }

/* Bild (fusion_imageframe class landet auf .fusion-image-element, #25) —
   4:3 cover, Hover-Zoom 1.05 (wie am-tile). */
.am-catcard__img { display: block !important; margin: 0 !important; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--surface); }
.am-catcard__img .fusion-imageframe { display: block; height: 100%; }
.am-catcard__img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--ease-out); }
.am-catcard:hover .am-catcard__img img { transform: scale(1.05); }

/* Body — Titel (fusion_title) + Kurztext (fusion_text). Eigenes
   h-Padding 18px (Column-Padding ist 0). */
.am-catcard__title { margin: 0 !important; padding: 16px 18px 0 !important; }
.am-catcard__title .fusion-title-heading { font: 600 1.0625rem/1.3 var(--font-sans) !important;
  color: var(--ink) !important; transition: color 0.2s var(--ease-out); }
.am-catcard:hover .am-catcard__title .fusion-title-heading { color: var(--brand-primary) !important; }
.am-catcard__text { padding: 0 18px 18px !important; margin: 0 !important; }
.am-catcard__text p { margin: 6px 0 0 !important; font: 400 0.85rem/1.5 var(--font-sans);
  color: var(--ink-3); }

@media (max-width: 1024px) { .am-catgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px)  { .am-catgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 440px)  { .am-catgrid { grid-template-columns: minmax(0,1fr); } }

/* Such-/Filter-Leiste — Live-Filter über die Katalog-Karten (JS im Child-Theme:
   assets/js/catalog-filter.js, migrationssicher; <script> in post_content wird
   gestrippt, Learning #26). Sucheingabe + Treffer-Zähler links/rechts; Empty-
   Hinweis bei 0 Treffern. Eingabe liegt als raw <input> in einer fusion_text
   (überlebt the_content, im Gegensatz zu <script>). */
.am-catbar { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin: 26px 0 4px; }
.am-catsearch-wrap { display: flex; align-items: center; gap: 10px; flex: 1 1 320px;
  max-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: 100px;
  padding: 12px 20px; transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.am-catsearch-wrap:focus-within { border-color: var(--brand-primary);
  box-shadow: var(--ring-focus); }
.am-catsearch-wrap i { color: var(--ink-3); font-size: 15px; flex-shrink: 0; }
.am-catsearch { border: 0; outline: 0; background: transparent; width: 100%;
  font: 400 0.95rem/1.4 var(--font-sans); color: var(--ink); padding: 0; margin: 0; }
.am-catsearch::placeholder { color: var(--ink-3); }
.am-catcount { font: 600 0.85rem/1 var(--font-sans); color: var(--ink-3);
  letter-spacing: 0.04em; white-space: nowrap; }
.am-catcount b { color: var(--ink); font-weight: 700; }
.am-catempty { display: none; margin: 30px 0 0 !important; text-align: center;
  font: 500 1rem/1.5 var(--font-sans); color: var(--ink-3); }


/* ============================================================
   §42 · Lettershop-Detailseite — Handschriftsimulation-Sektion
   ------------------------------------------------------------
   Neue Akzent-Sektion vor dem CTA (id="handschrift"); das 8. Quick-
   nav-Tile verweist darauf (Quicknav via am-quicknav--8, existiert).
   Reuse am-sec-head. Neue am-hs*-Atome: zweispaltiges Grid (Intro+
   Stat | Ansprechpartnerin-Card) + 4er-Schriftmuster-Galerie
   (fusion_imageframe lightbox="yes" = native Avada-Lightbox).
   Card/Galerie-Visuals auf den Spalten-Wrapper mit .ams-section…
   !important (Avada gewinnt sonst). Stat = EINE fusion_text, Flex
   auf das wpautop-<p> (Learning #18).
   ============================================================ */
.am-hs { scroll-margin-top: 88px; }

/* Zweispaltiges Grid auf row_inner (Avada column_spacing wirkungslos,
   Learning #10/#11 → padding:0 2%, Spalten margin:0). */
.am-hs__grid { display: grid !important; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px,5vw,72px); align-items: center; width: 100%; box-sizing: border-box; padding: 0 2%; }
.am-hs__grid > .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
@media (max-width: 900px) { .am-hs__grid { grid-template-columns: 1fr; gap: 36px; } }

/* Intro-Texte links */
.am-hs__lead p { margin: 0 0 18px !important; font: var(--t-lead); color: var(--ink-2); }
.am-hs__lead strong { color: var(--ink); font-weight: 600; }
.am-hs__p p { margin: 0 0 24px !important; font: 400 1rem/1.65 var(--font-sans); color: var(--ink-2); max-width: 46ch; }
.am-hs__p strong { color: var(--ink); font-weight: 600; }

/* Stat-Zeile: eine fusion_text mit 2 Inline-Spans; Flex + Trennlinien auf das <p>. */
.am-hs__stat p { margin: 6px 0 0 !important; display: flex; align-items: baseline; gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.am-hs__statnum { font: 600 clamp(2.5rem,5vw,3.5rem)/1 var(--font-sans); color: var(--brand-primary);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.am-hs__statlabel { font: 500 1rem/1.45 var(--font-sans); color: var(--ink-2); max-width: 22ch; }

/* Ansprechpartnerin-Card (Wrapper-Visual): Flex-Row Foto + Meta-Block. */
.ams-section .am-hs__person > .fusion-column-wrapper {
  display: flex !important; flex-direction: row !important; align-items: center; gap: clamp(18px,2.5vw,28px);
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card);
  padding: clamp(20px,2.5vw,28px) !important; }
.am-hs__person > .fusion-column-wrapper > * { margin: 0 !important; }
.am-hs__person > .fusion-column-wrapper > .fusion-image-element,
.am-hs__person > .fusion-column-wrapper > .am-hs__photo { flex: 0 0 clamp(120px,14vw,160px); }
.am-hs__person > .fusion-column-wrapper > .fusion-text { flex: 1 1 auto; }
.am-hs__photo { display: block; width: 100% !important; aspect-ratio: 3 / 4;
  border-radius: var(--r-image); overflow: hidden; background: var(--surface); }
.am-hs__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.am-hs__pmeta .am-hs__phello { margin: 0 0 4px; font: 600 1.15rem/1.3 var(--font-sans); color: var(--ink); }
.am-hs__pmeta .am-hs__ptext  { margin: 0 0 10px; font: 400 0.95rem/1.55 var(--font-sans); color: var(--ink-2); }
.am-hs__pmeta .am-hs__pcontact { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.am-hs__pmeta .am-hs__pcontact a { display: inline-flex; align-items: center; gap: 10px;
  font: 600 0.95rem/1.2 var(--font-sans); color: var(--brand-primary); }
.am-hs__pmeta .am-hs__pcontact a i { width: 16px; text-align: center; font-size: 14px; }
@media (max-width: 520px) { .ams-section .am-hs__person > .fusion-column-wrapper { flex-direction: column !important; text-align: center; }
                            .am-hs__pmeta .am-hs__pcontact { align-items: center; } }

/* Bild rechts im Grid (Print-Variante statt Ansprechpartnerin-Card). */
.am-hs__media { display: block !important; margin: 0 !important; border-radius: var(--r-card);
  overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card); }
.am-hs__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }

/* Schriftmuster-Galerie (4 Tiles, fusion_imageframe lightbox="yes"). */
.am-hs__samples { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(6px,0.6vw,9px); margin-top: clamp(48px,6vw,72px) !important; width: 100%; box-sizing: border-box; padding: 0 2%; }
.am-hs__samples > .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.am-hs__simg { display: block !important; aspect-ratio: 5 / 4; border-radius: var(--r-image);
  overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card); margin: 0 !important;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.am-hs__simg a { display: block; height: 100%; line-height: 0; }
.am-hs__simg img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--ease-out); }
.am-hs__sample:hover .am-hs__simg { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card-hover); }
.am-hs__sample:hover .am-hs__simg img { transform: scale(1.04); }
.am-hs__sname p { margin: 12px 0 0 !important; text-align: center; font: 600 0.8rem/1 var(--font-sans);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) { .am-hs__samples { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 460px) { .am-hs__samples { grid-template-columns: minmax(0,1fr); max-width: 380px; margin-left: auto; margin-right: auto; } }


/* ============================================================
   §43 · Über-uns-Seite — Native Komponenten-Registry (/ueber-uns-test)
   Hero-Values (am-val) · Wer-wir-sind · Geschäftsführung ·
   Team-Directory (am-deptnav / am-pgrid / am-pcard) · CTA-Reuse
   ============================================================ */

/* ── §43.1 am-valstack — Text-Werte-Stack (Variante zu am-stats-card/counters_box) ──
   Icon + Titel + Subtext + dezente Trennlinie — strukturell identisch zu .am-stats-card,
   aber ohne Zahl; für Unternehmens-Werte im Hero. */
.am-stats-card .fusion-text.am-valstack { background: transparent !important; padding: 0 !important; width: 100%; }
.am-val-item { padding: 20px 0; }
.am-val-item + .am-val-item { border-top: 1px solid rgba(255,255,255,0.12); }
.am-val-item:first-child { padding-top: 0; }
.am-val-item:last-child  { padding-bottom: 0; }
.am-val-item__head { display: flex; align-items: center; gap: 20px; margin-bottom: 5px; }
.am-val-item__ico  { font-size: 36px; color: var(--brand-primary); width: 36px; text-align: center; flex-shrink: 0; }
.am-val-item__title { font: 600 1.25rem/1.3 var(--font-sans); color: #fff; margin: 0; display: block; }
.am-stats-card .fusion-text.am-valstack p { margin: 0 !important; padding-left: 56px; font: 400 1rem/1.6 var(--font-sans); color: rgba(255,255,255,0.75); }
.am-stats-card .fusion-text.am-valstack strong { color: #fff; font-weight: 500; }
.am-valcards { display: flex !important; flex-direction: column; gap: 14px; }
.am-val {
  background: rgba(20,28,36,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 18px 22px;
}
.am-val__ico { font-size: 18px; color: var(--brand-primary); margin-bottom: 6px; display: block; }
.am-val__title { display: block; font: 600 0.95rem/1.3 var(--font-sans); color: #fff; margin: 0 0 5px; }
.am-val p { margin: 0 !important; font: 400 0.875rem/1.55 var(--font-sans); color: rgba(255,255,255,0.75); }
.am-val p strong { color: #fff; font-weight: 600; }
@media (max-width: 900px) { .am-valcards { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .am-val { flex: 1 1 calc(50% - 5px); } }
@media (max-width: 480px) { .am-val { flex: 1 1 100%; } }

/* ── §43.4 Team-Directory ── */
/* Dept-Navigation — sticky als eigener Container auf Seitenebene */
/* Team-Header: weniger Abstand nach unten zur sticky Nav */
.ams-section.am-team-head { padding-bottom: 16px !important; margin-bottom: 0 !important; }
/* Team-Content: weniger Abstand nach oben von sticky Nav */
.ams-section.am-team-content { padding-top: 32px !important; }

.am-deptnav-sticky { position: sticky !important; top: 70px !important; z-index: 9999 !important;
  margin-top: -50px !important;
  background: rgba(255,255,255,0.82) !important; border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  will-change: transform; isolation: isolate;
  --awb-padding-top: 20px !important; --awb-padding-bottom: 8px !important; }
.am-deptnav-sticky ~ .fusion-fullwidth { position: relative; z-index: 0 !important; }
.am-deptnav { margin: 0; }
.am-deptnav nav { display: flex; flex-wrap: wrap; gap: 8px; }
.am-deptnav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line);
  font: 500 0.8rem/1 var(--font-sans); color: var(--ink-2);
  text-decoration: none; transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.am-deptnav a:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.am-deptnav a i { font-size: 12px; }

/* Abteilungs-Block */
.am-dept-block { margin-bottom: 56px; scroll-margin-top: 180px; }
.am-dept__head { display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.am-dept__icon { font-size: 26px; color: var(--brand-primary); }
.am-dept__title { margin: 0; font: 600 1.1rem/1.3 var(--font-sans); color: var(--ink); }

/* Person-Grid */
.am-pgrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 1024px) { .am-pgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 760px)  { .am-pgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 440px)  { .am-pgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Person-Card */
.am-pcard {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.am-pcard__photo { display: block; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: var(--surface); }
.am-pcard__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  transition: transform 0.35s ease; }
.am-pcard:hover .am-pcard__photo img { transform: scale(1.04); }
.am-pcard figcaption { padding: 10px 12px 12px; }
.am-pcard__name { display: block; font: 600 0.85rem/1.3 var(--font-sans); color: var(--ink); margin-bottom: 3px; }
.am-pcard__role { display: block; font: 400 0.75rem/1.4 var(--font-sans); color: var(--ink-3);
  margin-bottom: 8px; }
.am-pcard__links { display: flex; flex-direction: column; gap: 5px; }
.am-pcard__tel, .am-pcard__mail {
  display: inline-flex !important; align-items: center;
  font: 500 0.82rem/1.2 var(--font-sans); color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
}
.am-pcard__tel:hover, .am-pcard__mail:hover { color: var(--brand-primary); }
.am-pcard__tel .am-ico, .am-pcard__mail .am-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; flex-shrink: 0; margin-right: 6px;
}
.am-pcard__tel .am-ico i, .am-pcard__mail .am-ico i {
  font-size: 13px; color: var(--brand-primary);
}


/* ── §43.5 Team-Grid: fusion_person native als am-pcard ── */
/* Dept-Header (id= fürs Scroll-Anchor) */
.am-dept-head-block {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--line);
  scroll-margin-top: 180px;
}

/* Personen-Grid: row_inner mit class="am-dept-persons" überschreibt Avada-Flex */
.am-dept-persons.fusion-builder-row-inner {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 56px !important;
  padding: 0 !important;
}
@media (max-width: 1024px) { .am-dept-persons.fusion-builder-row-inner { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 760px)  { .am-dept-persons.fusion-builder-row-inner { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 440px)  { .am-dept-persons.fusion-builder-row-inner { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.am-dept-persons .fusion-layout-column { width: 100% !important; padding: 0 !important; float: none !important; }
.am-dept-persons .fusion-column-wrapper { padding: 0 !important; }

/* Card */
.am-dept-persons .fusion-person {
  margin: 0 !important;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex !important;
  flex-direction: column;
}

/* Foto */
.am-dept-persons .fusion-person .person-shortcode-image-wrapper { flex-shrink: 0; }
.am-dept-persons .fusion-person .person-image-container {
  aspect-ratio: 3/4 !important;
  overflow: hidden !important;
  background: var(--surface);
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: auto !important;
}
.am-dept-persons .fusion-person .person-img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center top !important;
  display: block; transition: transform 0.35s ease;
}
.am-dept-persons .fusion-person:hover .person-img { transform: scale(1.04); }

/* Beschriftung */
.am-dept-persons .fusion-person .person-desc {
  padding: 10px 12px 12px !important;
  background: #fff !important;
  margin-top: 0 !important;
  flex: 1;
}
.am-dept-persons .fusion-person .person-author { display: block; }
.am-dept-persons .fusion-person .person-author-wrapper { margin-bottom: 4px; }
.am-dept-persons .fusion-person .person-name {
  display: block;
  font: 600 0.85rem/1.3 var(--font-sans) !important;
  color: var(--ink) !important; margin-bottom: 3px;
}
.am-dept-persons .fusion-person .person-title {
  display: block;
  font: 400 0.75rem/1.4 var(--font-sans) !important;
  color: var(--ink-3) !important; margin-bottom: 6px;
}

/* Kontakt-Icons (Tel + Mail) */
.am-dept-persons .fusion-person .fusion-social-networks { margin: 0 !important; }
.am-dept-persons .fusion-person .fusion-social-networks-wrapper {
  display: flex !important; flex-direction: column; gap: 4px;
}
.am-dept-persons .fusion-person .fusion-social-network-icon {
  display: inline-flex !important; align-items: center; gap: 8px;
  font: 500 0.82rem/1.2 var(--font-sans) !important;
  color: var(--ink-2) !important; text-decoration: none;
  transition: color var(--t-base);
}
.am-dept-persons .fusion-person .fusion-social-network-icon::before {
  font-size: 13px !important; color: var(--brand-primary) !important;
  width: 14px; text-align: center; flex-shrink: 0;
}
.am-dept-persons .fusion-person .fusion-social-network-icon:hover { color: var(--brand-primary) !important; }

/* Kontakt-Links im person-content (Font Awesome, identisch zu am-pcard__links) */
.am-dept-persons .fusion-person .person-content {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.am-dept-persons .fusion-person .person-content p { margin: 0 !important; }

/* ============================================================
   §44 · Karriere-Seite — Native Komponenten-Registry (/karriere-test)
   Split-Intro (am-mtype-Reuse) · Benefits-Grid · Job-Accordion · CTA-Kontakt
   ============================================================ */

/* ── §44.1 Benefits-Grid (Section 2 — 6 Vorteile, 3-spaltig) ── */
.am-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  box-sizing: border-box;
  padding: 0 2%;
}
.am-benefit-grid .fusion_builder_column_inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.am-benefit > .fusion-column-wrapper {
  padding: 0 !important;
  align-items: center !important;
  text-align: center !important;
}
.am-benefit .fusion-text p { text-align: center !important; }
.am-benefit .fusion-fontawesome {
  color: var(--brand-primary) !important;
  margin-bottom: 16px !important;
  display: block;
}
.am-benefit .fusion-title .fusion-title-heading {
  font: 600 1.05rem/1.3 var(--font-sans) !important;
  color: var(--ink) !important;
  margin: 0 0 8px !important;
}
.am-benefit .fusion-text p { font: 400 0.95rem/1.6 var(--font-sans); color: var(--ink-2); margin: 0; }
.am-benefit .fusion-text strong { color: var(--ink); font-weight: 600; }
@media (max-width: 800px) {
  .am-benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
@media (max-width: 480px) {
  .am-benefit-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── §44.2 Job Accordion (Sections 3+4 — fusion_accordion + fusion_toggle) ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--surface);
  border: 1px solid var(--line);
  font: 500 0.78rem/1 var(--font-sans);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip i { font-size: 11px; color: var(--brand-primary); }

/* §44.4 Job-Karten Chips (Karriere S3+S4 — am-job-chips in fusion_text) */
.am-job-chips { padding: 8px 28px 0 28px !important; margin: 0 !important; }
.am-job-chips p { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }

/* §44.5 Karriere S1 — Breadcrumb (light): am-crumb--light überschreibt nur Farben */
.am-crumb--light p  { color: var(--ink-3) !important; }
.am-crumb--light a  { color: var(--ink-3) !important; }
.am-crumb--light a:hover { color: var(--ink) !important; }
.am-crumb--light i  { color: var(--ink-3) !important; }
.am-crumb--light .am-crumb__here { color: var(--brand-primary) !important; }

/* §44.6 Karriere S1 — Bildstapel rechts (am-stack-col / ams-stack-img)
   Avada-Struktur: .fusion-column-wrapper (flex) > .fusion-image-element > span.ams-stack-img
   align-self muss auf dem flex-Kind (.fusion-image-element) sitzen, nicht auf dem span */
.am-stack-col > .fusion-column-wrapper {
  display: flex !important; flex-direction: column !important;
  gap: clamp(14px, 1.6vw, 22px) !important; padding: 0 !important;
}
.am-stack-col > .fusion-column-wrapper > .fusion-image-element {
  width: 86% !important;
}
.am-stack-col > .fusion-column-wrapper > .fusion-image-element:has(.ams-stack-img--l) {
  align-self: flex-start !important;
}
.am-stack-col > .fusion-column-wrapper > .fusion-image-element:has(.ams-stack-img--r) {
  align-self: flex-end !important;
}
.ams-stack-img {
  display: block !important; line-height: 0 !important;
  border-radius: var(--r-card) !important; overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card) !important;
}
.ams-stack-img img { width: 100% !important; object-fit: cover; display: block; }

.am-job-acc .fusion-panel {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  background: #fff;
}
.am-job-acc .fusion-toggle-heading {
  background: #fff !important;
  border-bottom: none !important;
  padding: 0 !important;
}
.am-job-acc .fusion-toggle-button {
  font: 600 1.1rem/1.4 var(--font-sans) !important;
  color: var(--ink) !important;
  padding: 20px 24px !important;
  text-decoration: none !important;
}
.am-job-acc .fusion-toggle-button:hover { color: var(--brand-primary) !important; }
.am-job-acc .fusion-toggle-icon { color: var(--ink-3) !important; }
.am-job-acc .fusion-panel-body {
  padding: 0 24px 24px !important;
  background: #fff !important;
}
.am-job-thumb { margin-bottom: 20px !important; }
.am-job-thumb img {
  width: 100%;
  aspect-ratio: 21 / 6;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.am-job-thumb p { margin: 0 !important; }
.am-job-meta p {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 20px !important;
}
.am-job-intro p { color: var(--ink-2); margin: 0 0 24px !important; }
.am-job-intro strong { color: var(--ink); font-weight: 600; }

.am-jcols {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 28px;
}
.am-jcols .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

.am-jcols2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 32px;
}
.am-jcols2 .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

.am-jcol > .fusion-column-wrapper { padding: 0 !important; }
.am-jcol__title .fusion-title-heading {
  font: 600 0.78rem/1.2 var(--font-sans) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--ink-3) !important;
  margin: 0 0 14px !important;
}
@media (max-width: 860px) {
  .am-jcols  { grid-template-columns: 1fr !important; gap: 24px 0; }
  .am-jcols2 { grid-template-columns: 1fr !important; gap: 20px 0; }
}

/* ── §44.3 CTA Kontaktblock (Section 5) ── */
.am-cta-contact { margin: 20px auto 28px; max-width: 480px; text-align: center; }
.am-cta-contact p { margin: 0 !important; line-height: 1.7; }
.am-cta-contact p + p { margin-top: 4px !important; }
.am-cta-role {
  display: inline-block;
  font: 600 0.78rem/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
}
.am-cta-name {
  display: block;
  font: 700 1.2rem/1.2 var(--font-sans);
  color: #fff;
  margin: 6px 0 10px;
}
.am-cta-contact .am-cta-addr p { color: rgba(255,255,255,0.68); font-size: 0.9rem; }
.am-cta-contact .am-cta-addr a { color: rgba(255,255,255,0.88); text-decoration: none; }
.am-cta-contact .am-cta-addr a:hover { color: #fff; text-decoration: underline; }


/* =====================================================================
   §45 · WIR-SUCHEN-SEITE (/wir-suchen-test) — Stellenübersicht
   ---------------------------------------------------------------------
   Avada-nativ. Reuse: am-crumb--light, am-eyebrow, am-lead, .chip,
   am-cta-band (§31.4/§44). NEU: am-jumpbar (Anker-Leiste) + am-jd*
   (Job-Description-Sektion: Kopf + Banner + Intro + Spalten-Checklisten
   + Foot). Werte 1:1 aus dem Standalone-Mockup (output/wir-suchen-test).
   ===================================================================== */

/* ── §45.1 Seitenkopf-Lead (pagehead) + Jumpbar (S00) ───────────────── */
.am-pagehead > .fusion-column-wrapper { max-width: 820px; }

/* Sticky Stellen-Navigation — Verhalten 1:1 wie Über-uns am-deptnav-sticky (§43.4):
   eigener Top-Level-Container, klebt unter der Navbar (top:95px). Reines CSS.
   Voraussetzungen erfüllt: #wrapper overflow-y:clip (#28), z-index 9999 +
   will-change + isolation (#29). Folge-Container nach unten (z-index:0). */
.am-jumpbar-sticky {
  position: sticky !important; top: 72px !important; z-index: 9999 !important;   /* bündig unter gescrolltem menu_only-Sticky-Header (~72px) */
  margin-top: 0 !important;
  background: rgba(255,255,255,0.82) !important; border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  will-change: transform; isolation: isolate;
  --awb-padding-top: 14px !important; --awb-padding-bottom: 14px !important;
}
.am-jumpbar-sticky ~ .fusion-fullwidth { position: relative; z-index: 0 !important; }

.am-jumpbar { margin: 0 !important; }   /* lebt jetzt im Sticky-Bar, kein Page-Head-Abstand */
.am-jumpbar p { margin: 0 !important; display: flex !important; flex-wrap: wrap; gap: 10px !important; }
.am-jumpbar a {
  font: 500 0.85rem/1 var(--font-sans);
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--border-1);
  padding: 11px 16px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.am-jumpbar a:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* Enger Verbund Seitenkopf ↔ Sticky-Nav ↔ erste Stelle (#30: ams-section-Padding
   ist direkt gesetzt → Override nur per Klasse + !important, Spez. 0,3,0). */
.ams-section.ams-section.am-jumphost   { padding-bottom: 0px !important; }
.ams-section.ams-section.am-jd--first  { padding-top: 48px !important; }

/* ── §45.2 am-jd — Container-Block (Anker, max 1040 zentriert) ───────────
   am-jd liegt auf dem fusion_builder_container (id = Anker → scroll-margin
   hier). Die einzige Top-Level 1_1-Column wird auf 1040 begrenzt
   (Technik wie am-cta-band: max-width auf den column-wrapper). */
.am-jd { scroll-margin-top: 170px; }   /* Navbar 95 + Sticky-Jumpbar ~57 + Puffer (wie Über-uns) */
.am-jd .fusion-row > .fusion-layout-column > .fusion-column-wrapper {
  max-width: 1040px;   /* Mockup .jd = linksbündig (KEIN margin:auto) */
}

/* Kopf: Eyebrow + H2 + Chips + Banner + Intro (in EINER 1_1-Column am-jd__head) */
.am-jd__head .fusion-title-heading { margin: 14px 0 0 !important; }   /* H2 */
.am-jd__chips { margin-top: 18px !important; }
.am-jd__chips p { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
/* Chips 1:1 zum Mockup (ohne den geteilten .chip-Atom zu ändern) */
.am-jd__chips .chip { padding: 6px 11px; border: 0; color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.02em; }
.am-jd__chips .chip i { font-size: 10px; }

/* Banner-Abstand am Avada-Block-Wrapper (.fusion-image-element), NICHT am
   inneren span.am-jd__banner — Margins auf dem span verschieben den Flow nicht. */
.am-jd__head .fusion-image-element { margin: 30px 0 34px !important; line-height: 0; }
.am-jd__banner {
  display: block; line-height: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card);
}
.am-jd__banner img {
  width: 100% !important; height: auto;
  aspect-ratio: 1393 / 360; object-fit: cover;
  background: var(--surface); display: block;
}
.am-jd__intro p {
  font: var(--t-lead); color: var(--fg-2);
  margin: 0 0 36px !important; max-width: 82ch;
}
.am-jd__intro strong { color: var(--ink); font-weight: 600; }

/* ── §45.3 Spalten-Grid (Aufgaben / Profil / Wir bieten) ─────────────────
   CSS-Grid auf der row_inner (#10/#11: column_spacing wirkungslos,
   width:104% via padding:0 2% kompensiert). 2- bzw. 3-spaltig. */
.am-jd__grid, .am-jd__grid--3 {
  display: grid !important;
  gap: 36px;
  box-sizing: border-box;
  padding: 0 2%;
}
.am-jd__grid    { grid-template-columns: 1fr 1fr; }
.am-jd__grid--3 { grid-template-columns: repeat(3, 1fr); }
.am-jd__grid .fusion_builder_column_inner,
.am-jd__grid--3 .fusion_builder_column_inner {
  width: 100% !important; max-width: 100% !important; margin: 0 !important;
}
.am-jd__col > .fusion-column-wrapper { padding: 0 !important; }

/* Spalten-Titel: h4 (uppercase) + inline FA-Icon */
.am-jd__coltitle .fusion-title-heading {
  display: flex; align-items: center; gap: 9px;
  font: 600 0.8rem/1 var(--font-sans) !important;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink) !important; margin: 0 0 18px !important;
}
.am-jd__coltitle .fusion-title-heading i { color: var(--brand-primary); font-size: 14px; }

/* Checklisten (clist) — flacher/dichter als am-checklist (1rem, Icon 13px) */
.am-jd__clist.fusion-checklist { margin: 0 !important; }
.am-jd__clist .fusion-li-item {
  display: flex !important; align-items: flex-start; gap: 11px;
  padding-top: 0 !important; margin-bottom: 11px !important;
}
.am-jd__clist .fusion-li-item:last-child { margin-bottom: 0 !important; }
.am-jd__clist .icon-wrapper { margin: 0 !important; flex-shrink: 0; }   /* Avadas Eigen-Abstand raus → sauberer 11px-gap */
.am-jd__clist .fusion-li-icon {
  color: var(--brand-primary) !important; font-size: 13px !important; margin-top: 5px;
}
.am-jd__clist .fusion-li-item-content {
  margin: 0 !important;
  font: 400 1rem/1.55 var(--font-sans) !important; color: var(--fg-2);
}
.am-jd__clist .fusion-li-item-content strong { color: var(--ink); font-weight: 600; }

/* Minijob-Abschlusssatz (nur S02) */
.am-jd__note p {
  margin: 28px 0 0 !important; padding-top: 22px; border-top: 1px solid var(--line);
  font: 400 1rem/1.65 var(--font-sans); color: var(--fg-2);
}
.am-jd__note strong { color: var(--ink); font-weight: 600; }

/* ── §45.4 Foot — Bewerben-Button + Zurück-Ghostlink ──────────────────
   Avada gibt dem Column-Wrapper `fusion-content-layout-column`
   (= flex-direction:column) → display:flex allein lässt Button + Ghostlink
   stapeln; flex-direction:row erzwingen. Trennlinie + Padding !important,
   da Avada eigene Wrapper-Regeln mitbringt. */
.am-jd__foot > .fusion-column-wrapper {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 26px !important; flex-wrap: wrap;
  margin-top: 38px !important; padding-top: 30px !important;
  border-top: 1px solid var(--line) !important;
}
.am-jd__foot .fusion-button-wrapper { margin: 0 !important; }
/* Bewerben-Button = Mockup .btn-primary (Avada gab keine Eckradien aus → Skin) */
.am-jd__foot .fusion-button {
  border-radius: 100px !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 16px rgba(204,0,0,0.25);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.am-jd__foot .fusion-button .fusion-button-text { font: 500 0.95rem/1 var(--font-sans); }
.am-jd__foot .fusion-button:hover { box-shadow: 0 8px 24px rgba(204,0,0,0.30); transform: translateY(-2px); }
.am-jd__back p { margin: 0 !important; }
.am-jd__back a {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink-2); font: 500 0.95rem/1 var(--font-sans);
  padding: 12px 2px; text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}
.am-jd__back a:hover { color: var(--brand-primary); }
.am-jd__back .arrow--back { display: inline-block; transition: transform var(--t-base) var(--ease-out); }
.am-jd__back a:hover .arrow--back { transform: translateX(-4px); }

/* ── §45.5 Responsive ───────────────────────────────────────────────── */
@media (max-width: 860px) { .am-jd__grid--3 { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 760px) { .am-jd__grid    { grid-template-columns: 1fr; gap: 26px; } }

/* ============================================================
   §46 KLIMANEUTRAL (/klimaneutral-test)
   Reuse-Seite: Hero (§43.1 am-kontakt-hero + am-valstack) ·
   Prozess (am-process/am-pstep) · Zertifikat & Download
   (am-mtype + am-portrait) · CTA (am-cta-band).
   EINZIGES neues Atom: Zertifikat-Badge-Row in Section 3.
   ============================================================ */

/* ── §46.1 Zertifikat-Badges (Section 3, unter am-mtype__lead) ──
   Kleine Pill-Auszeichnungen (Programmname + kompensierte Menge).
   .am-cert-badges sitzt auf dem fusion_text-Wrapper; die <span>.am-badge
   sind direkte Kinder → Flex greift ohne weiteren Wrapper. */
.am-cert-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.am-cert-badges .am-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  font: 600 0.85rem/1.2 var(--font-sans);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-1);
  border-radius: var(--r-pill);
}
.am-cert-badges .am-badge i { color: var(--brand-primary); font-size: 0.95rem; }


/* ============================================================
   §47 PACKZAUBER (/packzauber-test)
   Reuse-Seite: heller Split-Seitenkopf (am-mtype + am-portrait) ·
   Sortiment (am-benefit-grid) · Text/Bild (am-mtype) · CTA (am-cta-band).
   EINZIGES neues Atom: Kanal-Links im Seitenkopf (Shop / Etsy / Instagram).
   AKZENT: Salbeigrün statt Brand-Rot — seitenweit, scoped per .pz-accent
   am Container (CSS-Vars vererben an alle Kinder; migrations-sicher,
   kein Body-Class/functions.php). Toggle = Klasse entfernen → wieder rot.
   ============================================================ */

/* ── §47.0 Packzauber-Akzent · Salbeigrün (scoped) ──
   Remappt die Brand-Variablen auf der Seite. Tiefes Sage für Text/Buttons
   (Kontrast ≥ AA), helles #acccbb als Glow auf dunklen Flächen. */
.pz-accent {
  --brand-primary:       #5e8b6e;
  --brand-primary-dark:  #4a7058;
  --brand-primary-glow:  #acccbb;
  --shadow-cta:        0 4px 16px rgba(94,139,110,0.30);
  --shadow-cta-hover:  0 8px 24px rgba(94,139,110,0.36);
}

/* ── §47.1 Seitenkopf — Kanal-Links (Shop-Button + Etsy/Instagram-Chips) ──
   Eine Flex-Reihe unter dem Intro-Text. .am-hero-links sitzt als <div> direkt
   im fusion_text (block-level → kein wpautop-<p>). Reproduziert .pz-hero-links
   aus dem Entwurf 1:1. */
.am-hero-links {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 32px;
}
.am-hero-links .am-btn-shop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--r-pill);
  background: var(--brand-primary); color: #fff; border: 2px solid var(--brand-primary);
  font: 500 0.95rem/1 var(--font-sans); white-space: nowrap; text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.am-hero-links .am-btn-shop:hover {
  background: var(--brand-primary-dark); border-color: var(--brand-primary-dark);
  box-shadow: var(--shadow-cta-hover); transform: translateY(-2px); color: #fff;
}
.am-hero-links .am-btn-shop .am-arrow { transition: transform var(--t-base) var(--ease-out); }
.am-hero-links .am-btn-shop:hover .am-arrow { transform: translateX(4px); }
.am-pz-link {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-radius: var(--r-pill);
  border: 1px solid var(--border-1); color: var(--ink); white-space: nowrap;
  font: 500 0.92rem/1 var(--font-sans); text-decoration: none;
  transition: border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.am-pz-link i { color: var(--brand-primary); font-size: 15px; transition: color var(--t-base) var(--ease-out); }
.am-pz-link:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--surface); }
@media (max-width: 480px) { .am-hero-links { gap: 10px; } }

/* ── §47.2 Seitenkopf-Trustbar (Light-Variante) ──
   Reuse von .am-hero-trust (Icon + am-tr-title + am-tr-desc) wie Lettershop.
   Auf heller Section nur Titel/Desc dunkel umfärben (Dark-Hero-Regeln §33.1
   erzwingen #fff !important → hier per .pz-accent-Vorfahr überstimmt).
   Layout/Abstände kommen aus dem geteilten Hero-Gerüst §48 (wie Lettershop). */
.pz-accent .am-tr-title .fusion-title-heading { color: var(--ink) !important; }
.pz-accent .fusion-text.am-tr-desc,
.pz-accent .fusion-text.am-tr-desc p { color: var(--ink-3) !important; }

/* §47.3 → in §48 verschoben (geteiltes Light-Hero-Gerüst `am-hero-light`).
   Packzauber-Container nutzt `am-hero-light ams-hero-fill pz-accent`. */

/* ── §47.4 S2 „Sortiment & Service" — zweispaltig (Material-Liste | Service-Karten) ──
   Avada liefert die 2 Spalten via row_inner (1_2|1_2); die internen Raster
   (mat-grid, mv-svc-stack) sind self-contained HTML im fusion_text (wie
   am-valstack). Alle Selektoren mit .pz-accent geprefixt → schlagen die
   Avada-.fusion-text-Elementregeln (h3/h4/p) in der Spezifität. */
.pz-accent .mv-col__label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 0.78rem/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-primary); margin: 0 0 26px;
}
.pz-accent .mv-col__label::before { content: ''; width: 24px; height: 2px; background: var(--brand-primary); flex-shrink: 0; }
/* Material-Raster (6 Items, 2-spaltig) */
.pz-accent .mat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 30px; }
.pz-accent .mat-item { display: flex; align-items: flex-start; gap: 14px; }
.pz-accent .mat-item i { color: var(--brand-primary); font-size: 19px; width: 24px; text-align: center; margin-top: 3px; flex-shrink: 0; }
.pz-accent .mat-item h4 { font: 500 1.05rem/1.3 var(--font-sans); color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.pz-accent .mat-item p { font: 400 0.95rem/1.55 var(--font-sans); color: var(--fg-2); margin: 4px 0 0; }
.pz-accent .mat-item p strong { color: var(--ink); font-weight: 600; }
/* Service-Karten-Stack (2 Karten, horizontal) */
.pz-accent .mv-svc-stack { display: flex; flex-direction: column; gap: 16px; }
.pz-accent .svc__card {
  display: flex; flex-direction: row; align-items: flex-start; gap: 22px;
  background: #fff; border-radius: var(--r-card); padding: 26px 28px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card);
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.pz-accent .svc__card:hover { box-shadow: 0 0 0 1px rgba(94,139,110,0.24), var(--shadow-card-hover); transform: translateY(-3px); }
.pz-accent .svc__icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--brand-primary); background: rgba(172,204,187,0.30);
}
.pz-accent .svc__kicker { display: block; font: 600 0.72rem/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 10px; }
.pz-accent .svc__title { font: 500 1.3rem/1.25 var(--font-sans); color: var(--ink); letter-spacing: -0.01em; margin: 0 0 8px; }
.pz-accent .svc__text { font: 400 1.0625rem/1.7 var(--font-sans); color: var(--fg-2); margin: 0; }
.pz-accent .svc__text strong { color: var(--ink); font-weight: 600; }
@media (max-width: 520px) {
  .pz-accent .mat-grid { grid-template-columns: 1fr; gap: 24px; }
  .pz-accent .svc__card { flex-direction: column; }
}

/* ── §47.5 S3 „Laden vor Ort" — 2 quadratische Fotos (1_2|1_2 nativ) ──
   fusion_imageframe class="store-shot"; Quadrat + 8px-Radius + Sage-Hairline.
   :has() zwingt das .fusion-image-element auf volle Spaltenbreite. */
.pz-accent .fusion-image-element:has(.store-shot) { width: 100% !important; max-width: 100% !important; }
.pz-accent .store-shot { display: block; width: 100%; margin: 0; border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(132,156,142,0.28), var(--shadow-card); }
.pz-accent .store-shot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface); }

/* ── §47.6 S4 „Geschenkbox" — Split (Box-Foto schlicht | Checkliste) ──
   Bild ohne Karte/Hintergrund (Eugen): freigestelltes Foto, zentriert.
   box-list = HTML-Checkliste im fusion_text. */
.pz-accent .box-shot { margin: 0; }
.pz-accent .box-shot img { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }
.pz-accent .box-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pz-accent .box-list li { display: flex; align-items: flex-start; gap: 11px; font: 400 1rem/1.55 var(--font-sans); color: var(--fg-2); }
.pz-accent .box-list li i { color: var(--brand-primary); font-size: 13px; margin-top: 5px; flex-shrink: 0; }
.pz-accent .box-list li strong { color: var(--ink); font-weight: 600; }

/* ── §47.7 S5 CTA (dunkel) — Eyebrow im hellen Sage-Glow (Kontrast auf Dunkel) ──
   Primär-Button-Farben kommen als Sage-Hex direkt im Shortcode (Shortcode-
   Literale lesen die CSS-Var nicht). Hier nur die Eyebrow-Aufhellung. */
.pz-accent.am-on-dark .am-eyebrow,
.pz-accent .am-cta-band .am-eyebrow { color: var(--brand-primary-glow) !important; }
.pz-accent.am-on-dark .am-eyebrow::before,
.pz-accent .am-cta-band .am-eyebrow::before { background: var(--brand-primary-glow) !important; }


/* ============================================================
   §48 GETEILTES LIGHT-HERO-GERÜST (Unterseiten: Packzauber, Karriere …)
   ------------------------------------------------------------
   Übernimmt das Lettershop-Hero-Verhalten auf hellen Unterseiten:
   .ams-hero-fill gibt die min-height (Viewport), der am-hero-col-Wrapper
   verteilt seine Kinder (am-hero-main + Trustbar | Scroll-Cue) per
   space-around. Container nutzt 48/40-Padding (Shortcode), KEIN ams-section
   (sonst 120px-Zwang) und KEIN Dark-Styling (kein Text-Shadow/Weißschrift).
   Verwendung: class="am-hero-light ams-hero-fill" am Container; Bottom-Slot
   = entweder .am-hero-trust (Packzauber) ODER .am-hero-cue (Karriere).
   ============================================================ */
.am-hero-light { background: var(--white); }
.am-hero-light .am-hero-col > .fusion-column-wrapper {
  display: flex !important; flex-direction: column; justify-content: space-around;
  min-height: calc(100vh - var(--nav-height, 94px) - 85px); gap: clamp(32px, 5vh, 64px);
}
.am-hero-light .am-hero-col .fusion_builder_row_inner { width: 100% !important; }
.am-hero-light .am-hero-trust { padding-top: 0; }
.am-hero-light .am-hero-trust .am-tr-title .fusion-title-heading { color: var(--ink) !important; }
.am-hero-light .am-hero-trust .fusion-text.am-tr-desc,
.am-hero-light .am-hero-trust .fusion-text.am-tr-desc p { color: var(--ink-2) !important; }

/* ── §48.1 Scroll-Cue (Platzhalter statt Trustbar) ──
   Füllt den unteren Hero-Slot funktional: Hairline-Abschluss + Label +
   animierter Pfeil, der zur verlinkten Section springt. Dockt per space-around
   unten an → einheitliche Positionierung wie ein Hero mit Trustbar. */
.am-hero-cue__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.am-cue-rule { width: 100%; height: 1px; background: var(--border-1); }
.am-cue {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 600 0.8rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); transition: color var(--t-base) var(--ease-out);
}
.am-cue i { color: var(--brand-primary); animation: am-cue-bounce 1.8s ease-in-out infinite; }
.am-cue:hover { color: var(--brand-primary); }
@keyframes am-cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .am-cue i { animation: none; } }
/* §48.1b Dark-Variante (am-on-dark / am-kontakt-hero): helle Scroll-Cue auf
   dunklem Hero — Über-uns & Klimaneutral nutzen die Cue im am-kontakt-hero. */
.am-on-dark .am-cue-rule { background: rgba(255,255,255,0.22); }
.am-on-dark .am-cue { color: rgba(255,255,255,0.78); }
.am-on-dark .am-cue i { color: var(--brand-primary-glow); }
.am-on-dark .am-cue:hover { color: #fff; }
/* Anker-Sektion: Sticky-Header-Overlap verhindern */
.am-anchor { scroll-margin-top: 88px; }


/* ============================================================
   §49 PRAXISPARTNER DER IU (/praxispartner-iu)
   Unternehmens-Unterseite. Reuse: am-crumb--light (§44.5), am-eyebrow,
   am-lead, am-sec-head(--center), am-cta-band (§31.4) für S4.
   NEU: §49.1 Hero-Split (hell) · §49.2 Buttons/Ghostlink ·
   §49.3 Pendel (Theorie⇄Praxis) · §49.4 Crosslink (Verweis Ausbildung).
   Werte 1:1 aus output/praxispartner-iu/mockup/_decoded_clean.html.
   ============================================================ */

/* ── §49.1 Hero-Split (hell, content-height — KEIN ams-section/-fill) ──
   Container class="am-pp-hero"; Padding kommt aus dem Shortcode (96/104).
   Breadcrumb + 2-Spalten-Split (Text 1.1fr | IU-Siegel 1fr) in EINER
   1_1-Column (Head+Grid-Muster, Learning #9). */
.am-pp-hero { background: var(--white); }
/* Viewport-Fill + vertikale Zentrierung kommen aus dem geteilten Hero-Gerüst
   §48 (Container `am-hero-light ams-hero-fill`, Column `am-hero-col`) — dieselbe
   bewährte Regel wie Packzauber. Hier nur Wrapper-Padding zurücksetzen. */
.am-pp-hero__inner > .fusion-column-wrapper { padding: 0 !important; }

.am-pp-split {
  display: grid !important; grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 5vw, 76px); align-items: center;
  box-sizing: border-box; padding: 0 2%;   /* Avada-104%-Kompensation (#11) */
}
.am-pp-split .fusion_builder_column_inner {
  width: 100% !important; max-width: 100% !important; margin: 0 !important;
}
.am-pp-hero__body > .fusion-column-wrapper { padding: 0 !important; }
.am-pp-hero__h1 .fusion-title-heading { margin: 0 0 20px !important; }
.am-pp-hero__h1 em { color: var(--brand-primary); font-style: normal; }
.am-pp-hero__lead p { margin: 0 0 18px !important; }
.am-pp-hero__p p { font: 400 1.0625rem/1.7 var(--font-sans); color: var(--fg-2); margin: 0 !important; }
.am-pp-hero__p strong, .am-pp-hero__p b { color: var(--ink); font-weight: 600; }

/* IU-Siegel rechts — flach auf hellem Grund, OHNE Card (zentriert) */
.am-pp-siegel > .fusion-column-wrapper {
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 0 !important;
}
.am-pp-siegel .fusion-image-element { margin: 0 auto !important; width: 100% !important; text-align: center; }
.am-pp-siegel__img { display: inline-block; }
.am-pp-siegel__img img {
  width: clamp(240px, 88%, 360px) !important; height: auto !important;
  aspect-ratio: 1 / 1; object-fit: contain; margin: 0 auto !important; display: block;
}
.am-pp-siegel__cap p {
  margin: 0 !important; text-align: center;
  font: 600 0.72rem/1.4 var(--font-sans); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 900px) {
  .am-pp-split { grid-template-columns: 1fr; gap: 32px; }
}

/* §49.1b Zentrierte Stack-Variante (Eugen): Siegel groß oben, Text zentriert
   darunter. Modifier `am-pp-hero--stack` auf der 1_1-Hero-Column. */
.am-pp-hero--stack > .fusion-column-wrapper { max-width: 860px; margin: 0 auto !important; padding: 0 !important; }
.am-pp-hero--stack .fusion-text { text-align: center; }
.am-pp-hero--stack .am-crumb p { justify-content: center; }
.am-pp-hero--stack .am-eyebrow { margin-left: auto !important; margin-right: auto !important; }
.am-pp-hero--stack .am-pp-cta { justify-content: center; }
.am-pp-hero--stack .fusion-image-element { margin: 0 auto 14px !important; width: 100% !important; text-align: center; }
.am-pp-hero--stack .am-pp-siegel__img { display: inline-block; margin: 0 auto !important; }
.am-pp-hero--stack .am-pp-siegel__img img { width: clamp(240px, 36vw, 340px) !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 auto; }
.am-pp-hero--stack .am-pp-siegel__cap p { margin: 0 !important; }

/* ── §49.2 Buttons + Ghostlink (CTA-Reihe in fusion_text) ──
   Reproduziert die Mockup-.btn/.ghostlink 1:1. Leben als Inline-<a> in
   einem block-level <div class="am-pp-cta"> im fusion_text (#20-konform,
   wie am-hero-links §47). Einzeilig → kein wpautop-Eingriff. */
.am-pp-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 30px; }
.am-pp-cta .am-btn, .am-xlink .am-btn, .am-bsplit__actions .am-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--r-pill); font: 500 0.95rem/1 var(--font-sans);
  border: 2px solid transparent; text-decoration: none; cursor: pointer;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
/* Modifier mit `.am-btn.am-btn--*` (0,2,0) — muss die `border`-Kurzform des
   Basis-Selektors `.am-xlink .am-btn` (0,2,0, border-color:transparent) per
   Quell-Reihenfolge schlagen, sonst bleibt die Outline-Border unsichtbar. */
.am-btn.am-btn--primary { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); box-shadow: var(--shadow-cta); }
.am-btn.am-btn--primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); box-shadow: var(--shadow-cta-hover); transform: translateY(-2px); color: #fff; }
.am-btn.am-btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.am-btn.am-btn--outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.am-btn .am-arrow, .am-ghostlink .am-arrow { transition: transform var(--t-base) var(--ease-out); }
.am-btn:hover .am-arrow, .am-ghostlink:hover .am-arrow { transform: translateX(4px); }
.am-ghostlink {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.9rem/1 var(--font-sans); color: var(--brand-primary);
  padding: 6px 2px; text-decoration: none;
}
.am-ghostlink:hover { color: var(--brand-primary-dark); }
/* Dark-Varianten (Entwurf): Secondary-/Ghost-Link auf dunklem Grund */
.am-on-dark .am-btn.am-btn--outline { color: #fff; border-color: rgba(255,255,255,0.45); }
.am-on-dark .am-btn.am-btn--outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
.am-on-dark .am-ghostlink { color: #fff; }
.am-on-dark .am-ghostlink:hover { color: rgba(255,255,255,0.7); }

/* ── §49.3 Pendel · Theorie ⇄ Praxis (S2, surface) ──
   Self-contained HTML in EINEM fusion_text (Muster wie am-valstack §43.1).
   Einzeiliger Content, beginnt mit <div> → wpautop lässt es unangetastet.
   2 Knoten-Karten + Wechsel-Ring (1fr auto 1fr). */
.am-pendel { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 980px; margin: 0 auto; }
.am-pendel__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(18px, 3vw, 40px); width: 100%; }
.am-pnode {
  background: #fff; border-radius: var(--r-card); padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
/* __head kapselt Icon+Kicker+Titel als Block — verhindert wpautop-Streu-<p>
   (Inline-Run + Block-<p>-Geschwister im selben Div triggert das Wrappen). */
.am-pnode__head { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.am-pnode__icon { font-size: 34px; color: var(--brand-primary); }
.am-pnode__kicker { font: 600 0.72rem/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.am-pnode__title { font: 500 1.4rem/1.25 var(--font-sans); color: var(--ink); letter-spacing: -0.01em; }
.am-pnode__text { font: 400 1rem/1.6 var(--font-sans); color: var(--fg-2); margin: 0; max-width: 34ch; }
.am-pnode__text strong { color: var(--ink); font-weight: 600; }
.am-pswap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 110px; }
.am-pswap__ring {
  width: 64px; height: 64px; border-radius: 50%; background: var(--brand-primary);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: var(--shadow-cta);
}
.am-pswap__label { font: 600 0.68rem/1.3 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: center; max-width: 13ch; }
.am-pendel__note { margin: clamp(28px, 4vw, 44px) 0 0 !important; max-width: 70ch; text-align: center; font: 400 1.0625rem/1.7 var(--font-sans); color: var(--fg-2); }
.am-pendel__note strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .am-pendel__row { grid-template-columns: 1fr; gap: 16px; }
  .am-pswap { flex-direction: row; min-width: 0; }
  .am-pswap__ring { transform: rotate(90deg); }
  .am-pswap__label { max-width: none; }
}

/* ── §49.4 Crosslink · Verweis Ausbildung (S3, light) ──
   2-Spalten-Grid (Text 1.2fr | verlinktes Foto 1fr) via CSS-Grid auf der
   row_inner (#10/#11). Foto = fusion_imageframe (link=/karriere/), 4:3. */
.am-xlink {
  display: grid !important; grid-template-columns: 1.2fr 1fr;
  gap: clamp(36px, 5vw, 72px); align-items: center;
  box-sizing: border-box; padding: 0 2%;
}
.am-xlink .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.am-xlink__body > .fusion-column-wrapper { padding: 0 !important; }
.am-xlink__h2 .fusion-title-heading { margin: 0 0 16px !important; }
.am-xlink__p p { font: 400 1.0625rem/1.7 var(--font-sans); color: var(--fg-2); margin: 0 0 26px !important; }
.am-xlink__p strong { color: var(--ink); font-weight: 600; }
.am-xlink__media > .fusion-column-wrapper { padding: 0 !important; }
.am-xlink__media .fusion-image-element { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.am-xlink__img { display: block; width: 100%; margin: 0; border-radius: var(--r-card); overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card); }
.am-xlink__img a { display: block; line-height: 0; }
.am-xlink__img img { width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface); }
@media (max-width: 860px) {
  .am-xlink { grid-template-columns: 1fr; gap: 28px; }
  .am-xlink__media { order: -1; }
}

/* ════════════════════════════════════════════════════════════════════
   §50 · INFOMATERIAL (/infomaterial)
   ----------------------------------------------------------------------
   Download-/Broschüren-Seite, Bereich „Vorlagen & Infos". Reuse:
   am-crumb(--light), am-sec-head, am-eyebrow, am-lead, am-cta-band (§31.4).
   NEU: §50.1 Split-Reihe (am-bsplit, alternierend; Grid auf row_inner wie
   §49.4 am-xlink) · §50.2 Cover-Bild (fusion_imageframe, echte Fotos) ·
   §50.3 pmflow (Konfigurator-Schrittkette). Werte 1:1 aus
   output/infomaterial/mockup/_decoded_clean.html.
   ════════════════════════════════════════════════════════════════════ */

/* ── §50.1 Split-Reihe — Grid auf row_inner (Modell: §49.4 am-xlink) ──
   media-Spalte steht in der Quelle IMMER zuerst; --flip dreht visuell
   per grid-template + order (kein Markup-Umbau pro Reihe). */
.am-bsplit {
  display: grid !important; grid-template-columns: 2fr 3fr;
  gap: clamp(36px, 5vw, 72px); align-items: center;
  box-sizing: border-box;
  margin-bottom: clamp(56px, 7vw, 96px) !important;
}
.am-bsplit--last { margin-bottom: 0 !important; }
.am-bsplit .fusion_builder_column_inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.am-bsplit__media > .fusion-column-wrapper { padding: 14px !important; }
.am-bsplit__body  > .fusion-column-wrapper { padding: 0 !important; }
.am-bsplit--flip { grid-template-columns: 3fr 2fr; }
.am-bsplit--flip .am-bsplit__media { order: 2; }
/* Cover-Bild (fusion_imageframe) — shadow auf Wrapper, nicht img (sonst overflow-clip) */
.am-bsplit__media .fusion-imageframe {
  display: block; line-height: 0;
  border-radius: var(--r-image); overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 6px 28px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.07);
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.am-bsplit:hover .am-bsplit__media .fusion-imageframe {
  box-shadow: 0 14px 48px rgba(0,0,0,0.20), 0 4px 14px rgba(0,0,0,0.10);
  transform: translateY(-4px);
}
.am-bsplit__media .fusion-imageframe img { width: 100%; height: auto; display: block; }
.am-bsplit__body .fusion-title-heading {
  font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.18 var(--font-sans) !important;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 16px !important; }
.am-bsplit__body .fusion-text.am-lead p { margin: 0 0 16px !important; }
.am-bsplit__body .am-bsplit__p p { font: 400 1.0625rem/1.7 var(--font-sans); color: var(--fg-2); margin: 0; }
.am-bsplit__body .am-bsplit__p strong { color: var(--ink); font-weight: 600; }
/* Aktions-Reihe (am-btn-Familie §49.2 als <a> in EINER fusion_text) */
.am-bsplit__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
@media (max-width: 860px) {
  .am-bsplit { grid-template-columns: 1fr; gap: 28px; max-width: 460px; }
  .am-bsplit--flip .am-bsplit__media { order: 0; }
}

/* ── §50.2 Cover-Kachel (CSS-gebrandet, KEIN Foto) ──
   Content-Atom in EINER fusion_text (wie am-valstack §46/Klimaneutral).
   Text-Selektoren unter .bcover gescoped → schlagen Avada-.fusion-text-Defaults. */
.am-bsplit__media .bcover-wrap { position: relative; }
.am-bsplit__media:hover .bcover { box-shadow: 0 0 0 1px rgba(0,0,0,0.08), var(--shadow-card-hover); transform: translateY(-3px); }
.bcover {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-image); overflow: hidden;
  background: var(--ink); color: #fff; display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card);
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.bcover .bcover__bar { height: 6px; background: var(--brand-primary); flex-shrink: 0; }
.bcover::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 0; width: 14px; z-index: 2;
  background: linear-gradient(90deg, rgba(0,0,0,0.42), rgba(255,255,255,0.05)); }
.bcover .bcover__inner {
  position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 34px); padding-left: clamp(30px, 3vw, 44px); }
.bcover .bcover__kicker {
  font: 600 0.68rem/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary-glow); margin: 0 0 16px; display: block; }
.bcover .bcover__title {
  font: 500 clamp(1.5rem, 2.2vw, 2rem)/1.12 var(--font-sans); letter-spacing: -0.01em; color: #fff;
  text-wrap: balance; margin: 0; }
.bcover .bcover__title em { color: var(--brand-primary-glow); font-style: italic; }
.bcover .bcover__sub { font: 400 0.98rem/1.5 var(--font-sans); color: rgba(255,255,255,0.7); margin: 12px 0 0; max-width: 24ch; }
.bcover .bcover__meta {
  margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 9px;
  font: 500 0.78rem/1 var(--font-sans); color: rgba(255,255,255,0.78); letter-spacing: 0.02em; }
.bcover .bcover__meta i { color: var(--brand-primary-glow); font-size: 13px; }
.bcover .bcover__signet {
  position: absolute; right: -18px; bottom: -14px; width: 168px; height: auto; z-index: 1;
  opacity: 0.10; pointer-events: none; margin: 0; }

/* ── §50.3 pmflow — Konfigurator-Schrittkette (Print-Mailing-Body) ── */
.pmflow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0;
  font: 500 0.82rem/1.3 var(--font-sans); color: var(--ink-3); letter-spacing: 0.01em; }
.pmflow i { font-size: 9px; color: var(--brand-primary); }


/* ════════════════════════════════════════════════════════════════════
   §51 · DRUCKVORLAGEN (/druckvorlagen)
   ----------------------------------------------------------------------
   Bereich „Vorlagen & Infos". Fast reiner Reuse: am-crumb, am-eyebrow,
   am-sec-head, am-lead, am-bsplit (§50.1), am-btn (§49.2), am-cta-band (§31.4).
   Split (S2) = am-bsplit (§50.1, Spalten 5_12 Cover | 7_12 Text). Cover =
   natives fusion_imageframe (4769) verlinkt aufs PDF (Schatten §51.5).
   Leitfaden-Punkte = native `fusion_content_boxes` (layout icon-on-side,
   columns 1) — KEIN HTML-Gerüst (Learning #20).
   NEU nur: §51.2 am-dvnote (Hinweiszeile) · §51.4 am-dv-hero (kompakter
   BG-Hero) · §51.5 am-dv-cover (Cover-Schatten, scoped).
   Inhalt bewusst OHNE konkrete Werte (mm/dpi/CMYK) — Vorgaben im Datenblatt.
   ════════════════════════════════════════════════════════════════════ */

/* ── §51.2 am-dvnote — Hinweiszeile unter den Aktions-Buttons ── */
.am-dvnote {
  display: flex; align-items: center; gap: 9px; margin: 20px 0 0 !important;
  font: 400 0.875rem/1.5 var(--font-sans); color: var(--ink-3); }
.am-dvnote i { color: var(--brand-primary); font-size: 13px; flex-shrink: 0; }

/* ── §51.4 Seitenkopf-Hero — kompakt, BG-Bild + Gradient (schmal) ──
   Container `ams-section am-on-dark am-dv-hero` mit nativem background_image
   (Leitfaden-3.webp) + Gradient-Overlay; KEIN ams-hero-fill → nicht
   viewport-hoch, sondern kompakte Band-Höhe. ams-section erzwingt 120px
   Padding direkt per Property (Learning #30) → Modifier drückt auf kompakt.
   am-sec-head-Margin raus (sonst großer Leerraum unter dem Lead → höher).
   Titel/Lead-Weiß kommt aus `.am-on-dark` (§ oben, schon v1.3.33).
   `<em>`-Akzent auf Dunkel heller (glow) wie bcover/Lettershop. */
.ams-section.am-dv-hero { padding-top: 64px !important; padding-bottom: 56px !important; }
.am-dv-hero .am-sec-head { margin-bottom: 0 !important; }
.am-dv-hero .fusion-title-heading em { color: var(--brand-primary-glow); font-style: italic; }

/* ── §51.5 Cover-Schatten (leicht, parent-agnostisch) ──
   Split = jetzt native Avada-Spalten (2_5|3_5), KEIN am-bsplit mehr → Selektor
   direkt auf `.fusion-imageframe.am-dv-cover`, unabhängig vom Eltern-Container. */
.fusion-imageframe.am-dv-cover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.10), 0 1px 5px rgba(0,0,0,0.05) !important;
  transition: box-shadow var(--t-base) var(--ease-out); }
.fusion-imageframe.am-dv-cover:hover {
  box-shadow: 0 10px 34px rgba(0,0,0,0.14), 0 3px 10px rgba(0,0,0,0.07) !important; }

/* ── §51.6b / §51.7 Aktions-Reihe — native fusion_button nebeneinander ──
   Section-2-Buttons jetzt als 2 native `fusion_button` in einer nested column
   (content_layout="row" `am-dv-actions`), Muster wie CTA-Section (am-cta-actions
   §31.4), aber LINKS ausgerichtet. content_layout="row" braucht !important auf
   justify/gap (Learning #21), sonst gewinnen Avadas Row-Defaults. */
.am-dv-actions .fusion-column-wrapper {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  justify-content: flex-start !important; align-items: center; gap: 14px !important; }
.am-dv-actions .fusion-button-wrapper { margin: 0 !important; }

/* ── §51.6 fusion_content_boxes an Entwurf angleichen (scoped `.am-dvbox`) ──
   Natives Avada-Element behalten, nur per brand.css auf die CI-Optik skinnen
   (Muster wie am-checklist/am-quickcard-Skins). Avada setzt Chip-Maße/
   border-radius:50% + Titelgröße INLINE → mit !important überschreiben.
   Ziel: rundes Quadrat (Surface + inset Line, roter Icon) statt Kreis,
   Titel 1.125rem/500, Body 1rem/1.6, engere Item-Abstände. */
.am-dvbox { --awb-item-margin-bottom: 22px !important; }
/* Icon-Chip: Kreis → rundes Quadrat (span = äußere Hülle, i = innen) */
.am-dvbox .heading-with-icon .icon span,
.am-dvbox .heading-with-icon .icon span i {
  border-radius: var(--r-card) !important; border-color: transparent !important;
  box-sizing: border-box !important; }
.am-dvbox .heading-with-icon .icon span {
  width: 44px !important; height: 44px !important; line-height: 44px !important;
  background: var(--surface) !important; margin-right: 16px !important;
  box-shadow: inset 0 0 0 1px var(--line); }
.am-dvbox .heading-with-icon .icon span i {
  width: 44px !important; height: 44px !important; line-height: 44px !important;
  background: transparent !important; font-size: 18px !important; }
/* Titel + Body an die CI-Typo */
.am-dvbox .content-box-heading {
  font-size: 1.125rem !important; line-height: 1.3 !important; font-weight: 500 !important;
  color: var(--ink) !important; margin: 0 0 1px !important; letter-spacing: -0.01em; }
.am-dvbox .content-container {
  font: 400 1rem/1.6 var(--font-sans); color: var(--fg-2); margin: 0 !important; }
.am-dvbox .content-container strong { color: var(--ink); font-weight: 600; }
/* Vertikal: nur EINE Abstandsquelle (Item-Margin), keine vertikalen Paddings
   auf Spalte/Wrapper (sonst Padding+Margin = doppelter Abstand). Titel↔Text
   eng (1px), Abstand ZWISCHEN den Punkten größer (20px), damit der Folgepunkt
   nicht am Text des vorigen klebt. Links-Einrückung (Icon-Spalte,
   --awb-content-padding-left) bleibt unangetastet. */
.am-dvbox { --awb-item-margin-bottom: 20px !important; }
.am-dvbox .content-box-column {
  margin-bottom: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* NUR das echte letzte Item nullen — bei columns="1" trägt JEDES Item die
   Avada-Klasse `content-box-column-last-in-row`, daher `:last-child` statt
   dieser Klasse (sonst Abstand bei allen 0 → Punkte kleben). */
.am-dvbox .content-box-column:last-child { margin-bottom: 0 !important; }
.am-dvbox .content-box-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; }


/* ════════════════════════════════════════════════════════════════════
   §52 · INFOMATERIAL (/infomaterial) — Dokument-Liste (Cover-Zeilen)
   ----------------------------------------------------------------------
   Reuse: am-crumb(--light), am-eyebrow, am-lead, am-cta-band (§31.4) +
   native fusion_button/fusion_imageframe.
   STRUKTUR rein nativ: je Brosch. EINE fusion_builder_row `am-docrow`
   (KEIN Karten-Box — nur Trennlinie + Abstand) mit 2 Spalten: dcover
   (echtes PDF-Cover, dekorativ) | docrow__main (Titel/Sub/Meta + Button-
   Reihe als nested row_inner `am-doc-actions`). Cover NICHT verlinkt
   (Flipbook kapert `a[href$=.pdf]`; no-flipbook erreicht das imageframe-<a>
   nicht). PDF-Buttons = native fusion_button + class="no-flipbook"
   (landet auf <a>) + Download via link_attributes="download" (rendert
   sauberes download-Attr aufs <a>). §52-CSS nur Skin/Typo/Trennlinie.
   ════════════════════════════════════════════════════════════════════ */

/* ── §52.1 Gruppen-Label (fusion_title size=6, Uppercase + Trennlinie) ── */
.am-docgroup__head.fusion-title { border-bottom: 1px solid var(--line);
  padding-bottom: 12px !important; margin-bottom: 0 !important; }
.am-docgroup__head .fusion-title-heading {
  font: 600 0.82rem/1 var(--font-sans) !important; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3) !important; margin: 0 !important; }

/* ── §52.2 docrow — gestapelte 1_1-Spalte (stapelt zuverlässig; mehrere
   [fusion_builder_row] in EINEM Container legt Avada in EINE Reihe zusammen!)
   Trennlinie via border-bottom; vertikaler Abstand über NATIVE padding-Attr
   der Spalte. Darin EIN row_inner (Cover | Text). */
.am-docrow { border-bottom: 1px solid var(--line); }
.am-docrow.am-docrow--last { border-bottom: 0; }

/* ── §52.3 dcover — echtes PDF-Cover (dekorativ), einheitlich, Radius+Schatten ── */
.am-dcover .fusion-image-element { margin: 0 !important; }
.am-dcover .fusion-imageframe, .am-dcover img { display: block; line-height: 0; }
.am-dcover img { width: 100%; max-width: 190px; height: auto;
  border-radius: var(--r-image);
  box-shadow: 0 6px 22px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.06); }

/* ── §52.4 Text-Block (Titel/Sub/Meta) ── */
.am-docrow__title .fusion-title-heading {
  font: 500 1.3rem/1.25 var(--font-sans) !important; color: var(--ink);
  letter-spacing: -0.01em; margin: 0 0 8px !important; }
.am-docrow__sub p { font: 400 1.0625rem/1.6 var(--font-sans); color: var(--fg-2);
  margin: 0 0 12px !important; max-width: 60ch; }
.am-docrow__sub strong { color: var(--ink); font-weight: 600; }
.am-docrow__meta p { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px !important;
  font: 500 0.8rem/1 var(--font-sans); color: var(--ink-3); letter-spacing: 0.01em; }
.am-docrow__meta i { color: var(--brand-primary); font-size: 12px; }

/* ── §52.5 Aktions-Buttons — native fusion_button, inline unter dem Text ──
   Text-Spalte (am-docrow__main) bewusst OHNE content_layout → Block-Fluss:
   Titel/Sub/Meta stapeln, die fusion_button-Wrapper (inline-block) fließen
   nebeneinander. Gap + Umbruch-Abstand über margin. */
.am-docrow__main .fusion-button-wrapper { display: inline-block;
  margin: 0 10px 10px 0 !important; }

/* Mobile: Cover kleiner */
@media (max-width: 820px) { .am-dcover img { max-width: 150px; } }


/* =====================================================================
   AMS-CARD--STYLED — visuelles Upgrade auf bestehenden ams-card Elementen
   Einfach als zweite Klasse zur Column hinzufuegen: class="ams-card ams-card--styled"
   Beruehrt ams-card Basis-Regeln nicht.
   ===================================================================== */

/* Roten Avada-Oberborder entfernen, dezente Rundum-Linie */
.ams-card--styled > .fusion-column-wrapper {
  border: 1px solid var(--line) !important;
  --awb-border-top: 0px !important;
  --awb-border-right: 0px !important;
  --awb-border-bottom: 0px !important;
  --awb-border-left: 0px !important;
  background: var(--surface) !important;
}

/* Bild-Zoom auf Hover */
.ams-card--styled .ams-card__img img {
  transition: transform 400ms var(--ease-out) !important;
}
.ams-card--styled:hover .ams-card__img img {
  transform: scale(1.05) !important;
}

/* Gradient-Uebergang Bild → Body */
.ams-card--styled .fusion-image-element {
  position: relative !important;
  margin: 0 !important;
}
.ams-card--styled .fusion-image-element::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}

/* Titel groesser + weniger Min-Height */
.ams-card--styled .ams-card__title .fusion-title-heading {
  font-size: 1.25rem !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

/* Body Padding unten */
.ams-card--styled .ams-card__text {
  padding-bottom: 20px !important;
}




/* ams-card--styled Korrekturen */
/* Titel schwarz – Avada/Link-Farbe ueberschreiben */
.ams-card--styled .ams-card__title .fusion-title-heading,
.ams-card--styled .ams-card__title .fusion-title-heading a,
.ams-card--styled .ams-card__title h3 {
  color: var(--ink) !important;
}
/* Hover-Titel bleibt schwarz bei --styled */

/* Body Abstände */
.ams-card--styled .ams-card__title { padding: 20px 24px 0 !important; }
.ams-card--styled .ams-card__text { padding: 10px 24px 24px !important; }
.ams-card--styled .ams-card__text p { font-size: 0.9rem !important; line-height: 1.6 !important; }


/* CTA-Button in ams-card--styled */
.am-card-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 16px;
  font-size: 0.88rem; font-weight: 600; color: var(--ink);
  transition: color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.ams-card--styled:hover .am-card-cta { color: var(--brand-primary); transform: translateX(4px); }
.am-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;
  transition: transform 220ms var(--ease-out);
}
.ams-card--styled:hover .am-card-cta__arrow { transform: scale(1.1); }
.am-card-cta__arrow svg { width: 14px; height: 14px; }