/**
 * Neues Design (V2) – gesamte Hauptseite alber-marketing.com
 *
 * Alle Regeln hängen an body.am-v2 (alle Seiten der Hauptdomain) bzw. body.am-sub
 * (alle Seiten außer Startseite). Die Startseite hat zusätzlich eigene Regeln in
 * home-v2.css. Gesetzt in inc/site-v2.php.
 *
 * „Überlagerter Header": Beginnt <main> mit einem dunklen Hero (.am-gradient-hero,
 * .page-hero oder .bg-brand-900), liegen Top-Bar und Header transparent über dem
 * Hero (Erkennung per :has(), kein JS nötig). Alle anderen Seiten behalten den
 * weißen Header.
 */

.am-v2 {
  --v2-ink: #0f1d2f;
  --v2-text: #4b5563;
  --v2-muted: #6b7280;
  --v2-navy: #0f1d2f;
  --v2-navy-2: #1e3a5f;
  --v2-amber: #f59e0b;
  --v2-amber-hi: #fbbf24;
  --v2-amber-dark: #d97706;
  --v2-blue: #2563eb;
  --v2-soft: #eef2f7;
  --v2-line: #e3e8f1;
  --v2-radius: 22px;
  --v2-shadow: 0 18px 50px rgba(15, 29, 47, 0.14);
  --v2-shadow-sm: 0 6px 18px rgba(15, 29, 47, 0.08);
  --v2-bar: 0px;
  --am-curve: 28px;
}

@media (min-width: 768px) {
  .am-v2 { --v2-bar: var(--top-bar-height); --am-curve: 44px; }
}

/* ============================================================
   Buttons: Pillen
   ============================================================ */
.am-v2 .btn,
.am-v2 [class*="am-btn"] { border-radius: 999px; font-family: var(--font-heading); }
.am-v2 .ak-btn { border-radius: 999px; }
.am-v2 .btn { padding-left: 30px; padding-right: 30px; }
.am-v2 .btn--sm { padding-left: 22px; padding-right: 22px; }
.am-v2 :is(a, button)[class*="inline-flex"]:is([class*="rounded-xl"], [class*="rounded-lg"], [class*="rounded-md"]) { border-radius: 999px; }
.am-v2 .header__cta { border-radius: 999px; padding: 10px 22px; }
.am-v2 .header__cta:hover { transform: none; }

/* Karten */
.am-v2 main .rounded-2xl { border-radius: 22px; }
.am-v2 main .rounded-3xl { border-radius: 32px; }
.am-v2 .am-card { border-radius: 22px; }
.am-v2 main :is(h1, h2, h3) { letter-spacing: -0.02em; }

/* ============================================================
   Header + Top-Bar: transparent über dunklem Hero
   ============================================================ */
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .top-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1001;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header {
  margin-top: var(--v2-bar);
  margin-bottom: calc(var(--header-height) * -1);
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header .custom-logo,
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header__logo-text { transition: filter 0.25s ease, color 0.25s ease; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header .custom-logo { filter: brightness(0) invert(1); }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header__logo { color: #fff; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .nav__link { color: rgba(255, 255, 255, 0.92); }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .nav__link:hover,
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .nav__link--active { color: #fff; background: rgba(255, 255, 255, 0.14); }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header__cta {
  background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.75); box-shadow: none;
}
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header__cta:hover { background: #fff; color: var(--v2-ink); box-shadow: none; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .mobile-toggle span { background: #fff; }

/* Weißer Zustand: gescrollt oder mobiles Menü offen */
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header.header--scrolled,
body.am-sub.mobile-nav-open:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header {
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--grey-100);
  box-shadow: var(--shadow-sm);
}
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header.header--scrolled .custom-logo,
body.am-sub.mobile-nav-open:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header .custom-logo { filter: none; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header.header--scrolled .header__logo,
body.am-sub.mobile-nav-open:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header .header__logo { color: var(--blue-900); }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header.header--scrolled .nav__link { color: var(--grey-700); }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header.header--scrolled .nav__link:hover,
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header.header--scrolled .nav__link--active { color: var(--blue-600); background: var(--blue-50); }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header.header--scrolled .header__cta,
body.am-sub.mobile-nav-open:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header .header__cta {
  background: var(--v2-amber); border-color: var(--v2-amber); color: var(--v2-ink);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header.header--scrolled .header__cta:hover,
body.am-sub.mobile-nav-open:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header .header__cta:hover { background: var(--v2-amber-dark); border-color: var(--v2-amber-dark); }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header.header--scrolled .mobile-toggle span,
body.am-sub.mobile-nav-open:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) .header .mobile-toggle span { background: var(--grey-800); }

/* ============================================================
   Hero (erstes Element in <main>): Navy-Fläche mit geschwungener Kante
   ============================================================ */
/* flow-root: der negative Hero-Margin kollabiert sonst mit dem Header-Margin */
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main { display: flow-root; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child:not(.ak-modul) {
  --am-next-bg: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(var(--v2-bar) * -1);
  padding-top: calc(var(--v2-bar) + var(--header-height) + 2.5rem);
  background: linear-gradient(135deg, #0a1523 0%, #112239 55%, #1e3a5f 100%);
  color: #fff;
}
@media (min-width: 768px) {
  body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child:not(.ak-modul) { padding-top: calc(var(--v2-bar) + var(--header-height) + 4rem); }
}
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child:not(.ak-modul)::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  right: -10%; top: -45%; width: min(62vw, 780px); aspect-ratio: 1; border-radius: 50%;
  background: #3b6ea8; opacity: 0.16;
}
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child:not(.ak-modul)::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  left: 0; right: 0; bottom: -1px; height: var(--am-curve);
  background: var(--am-next-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 20 100 0V10H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 20 100 0V10H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Seminar-Modul-Seiten (<article class="ak-modul"> mit eigenem Hero) */
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > .ak-modul:first-child > .ak-modul-hero {
  --am-next-bg: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(var(--v2-bar) * -1);
  padding-top: calc(var(--v2-bar) + var(--header-height) + 2.5rem);
  padding-bottom: calc(var(--am-curve) + 2.5rem);
  background: linear-gradient(135deg, #0a1523 0%, #112239 55%, #1e3a5f 100%);
}
@media (min-width: 768px) {
  body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > .ak-modul:first-child > .ak-modul-hero { padding-top: calc(var(--v2-bar) + var(--header-height) + 4rem); }
}
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > .ak-modul:first-child > .ak-modul-hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  right: -10%; top: -45%; width: min(62vw, 780px); aspect-ratio: 1; border-radius: 50%;
  background: #3b6ea8; opacity: 0.16;
}
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > .ak-modul:first-child > .ak-modul-hero::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  left: 0; right: 0; bottom: -1px; height: var(--am-curve);
  background: var(--am-next-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 20 100 0V10H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 20 100 0V10H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Vollbild-Landingpage-Hero (z. B. KI-Sichtbarkeit prüfen): füllt jetzt die ganze Höhe inkl. Header */
@media (min-width: 1024px) {
  body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > .am-hero-vh:first-child {
    height: 100dvh; min-height: 700px;
    padding-top: calc(var(--v2-bar) + var(--header-height) + 1rem);
    padding-bottom: calc(var(--am-curve) + 1rem);
  }
}

/* Helle Kopfbereiche (Rechtstexte, Blog-Beitrag) im selben dunklen Look */
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child.bg-brand-50 { border-bottom: 0; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child.bg-brand-50 :is(nav, h1, h2, p, a, span, time, div, li) { color: rgba(255, 255, 255, 0.84); }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child.bg-brand-50 h1 { color: #fff; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child.bg-brand-50 a:hover { color: #fff; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child.bg-brand-50 :is(.text-accent-600, .text-accent-700) { color: var(--v2-amber-hi); }

/* Farbe der Kante = Hintergrund der folgenden Sektion */
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child:has(+ .bg-brand-50) { --am-next-bg: #f4f6f8; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child:has(+ .bg-neutral-50) { --am-next-bg: #fafafa; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child:has(+ .bg-gray-50) { --am-next-bg: #f9fafb; }
body.am-sub:has(main > :is(.am-gradient-hero, .page-hero, .bg-brand-900, section.bg-brand-50, article.ak-modul):first-child) main > :first-child:has(+ :is(.bg-brand-900, .am-gradient-hero)) { --am-next-bg: #0f1d2f; }

/* ============================================================
   Footer: gerundete Oberkante
   ============================================================ */
body.am-sub footer.bg-brand-900 {
  position: relative; z-index: 1; margin-top: -40px;
  border-radius: 56px 56px 0 0 / 36px 36px 0 0;
}
body.am-sub footer.bg-brand-900 > .am-container { padding-top: 5.5rem; }
@media (max-width: 767px) {
  body.am-sub footer.bg-brand-900 { margin-top: -28px; border-radius: 36px 36px 0 0 / 24px 24px 0 0; }
  body.am-sub footer.bg-brand-900 > .am-container { padding-top: 4rem; }
}

/* ============================================================
   Dunkle Abschluss-Panels (CTA) als gerundete Karte
   ============================================================ */
body.am-sub main > section:not(:first-child).am-cta,
body.am-sub main > section.cta-section {
  position: relative; isolation: isolate; overflow: hidden;
  width: calc(100% - 2 * clamp(14px, 3vw, 40px)); max-width: 1240px;
  margin: 56px auto 72px;
  border-radius: 32px;
  background: linear-gradient(135deg, #0a1523 0%, #112239 55%, #1e3a5f 100%);
}
body.am-sub main > section.am-cta::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  right: -140px; bottom: -260px; width: 560px; height: 560px; border-radius: 50%;
  border: 22px solid rgba(255, 255, 255, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  .am-v2 .btn, .am-v2 [class*="am-btn"] { transition: none; }
}