/**
 * Neues Design (V2) – gesamte Seite edv-it-multimedia.de
 *
 * Alle Regeln hängen an body.ev-v2 (alle Seiten) bzw. body.ev-sub (alle Seiten
 * außer Startseite). Die Startseite hat zusätzlich eigene Regeln in home-v2.css.
 * Gesetzt in inc/site-v2.php. Farben bleiben die der Seite (Indigo/Navy + Coral).
 *
 * „Überlagerter Header": Folgt direkt auf die Navigation (.ev-nav) ein dunkler Hero
 * (.gradient-hero*, .ms-hero-narrow, .ev-hero, section.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.
 */

.ev-v2 {
  --ev-ink: #181c2f;
  --ev-navy: #181c2f;
  --ev-navy-2: #22256a;
  --ev-indigo: #3639a4;
  --ev-coral: #ff7364;
  --ev-coral-hi: #ff8f84;
  --ev-coral-dark: #f86150;
  --ev-soft: #eceefa;
  --ev-line: #e4e6f4;
  --ev-hero-bg:
    radial-gradient(52rem 26rem at 88% -8%, rgba(255, 115, 100, 0.20), transparent 62%),
    linear-gradient(135deg, #12152a 0%, #1c1f55 52%, #2f3292 100%);
  --ev-radius: 24px;
  --ev-shadow: 0 18px 50px rgba(24, 28, 47, 0.14);
  --ev-shadow-sm: 0 6px 18px rgba(24, 28, 47, 0.08);
  --ev-bar: 0px;
  --ev-nav-h: 65px;
  --ev-curve: 28px;
}
@media (min-width: 768px) {
  .ev-v2 { --ev-bar: 40px; --ev-curve: 44px; }
}
@media (min-width: 1024px) {
  .ev-v2 { --ev-nav-h: 81px; }
}

/* ============================================================
   Buttons: Pillen
   ============================================================ */
body.ev-v2 :is(a, button)[class*="inline-flex"]:is([class*="rounded-xl"], [class*="rounded-lg"], [class*="rounded-md"]) { border-radius: 999px; }
body.ev-v2 :is(a, button)[class*="block"][class*="rounded-xl"][class*="text-center"] { border-radius: 999px; }
body.ev-v2 .btn-coral { box-shadow: 0 8px 22px rgba(255, 115, 100, 0.38); }
body.ev-v2 .btn-coral:hover { box-shadow: 0 12px 28px rgba(255, 115, 100, 0.45); }
body.ev-v2 main :is(h1, h2, h3), body.ev-v2 :is(h1, h2, h3) { letter-spacing: -0.02em; }
body.ev-v2 .rounded-2xl { border-radius: 22px; }
body.ev-v2 .rounded-3xl { border-radius: 32px; }

/* ============================================================
   Header + Top-Bar: transparent über dunklem Hero
   ============================================================ */
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav {
  margin-top: var(--ev-bar);
  margin-bottom: calc((var(--ev-bar) + var(--ev-nav-h)) * -1);
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav img { filter: brightness(0) invert(1); transition: filter 0.25s ease; }
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav .lg\:flex > a { color: rgba(255, 255, 255, 0.9); }
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav .lg\:flex > a:hover,
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav .lg\:flex > a.font-semibold { color: #fff; }
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav #mobile-menu-btn { color: #fff; }

/* Mobiles Menü legt sich über den Hero statt ihn nach unten zu schieben */
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav #mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 18px 40px rgba(24, 28, 47, 0.18);
}

/* Weißer Zustand: gescrollt oder mobiles Menü offen */
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav.ev-nav--scrolled,
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav:has(#mobile-menu:not(.hidden)) {
  background-color: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--ev-line);
  box-shadow: var(--ev-shadow-sm);
}
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav.ev-nav--scrolled img,
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav:has(#mobile-menu:not(.hidden)) img { filter: none; }
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav.ev-nav--scrolled .lg\:flex > a,
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav:has(#mobile-menu:not(.hidden)) .lg\:flex > a { color: #374151; }
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav.ev-nav--scrolled .lg\:flex > a:hover,
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav.ev-nav--scrolled .lg\:flex > a.font-semibold { color: #2c2f86; }
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav.ev-nav--scrolled #mobile-menu-btn,
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav:has(#mobile-menu:not(.hidden)) #mobile-menu-btn { color: #4b5563; }

/* ============================================================
   Hero (direkt nach der Navigation): dunkle Fläche mit geschwungener Kante
   ============================================================ */
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-hero) {
  --ev-next-bg: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--ev-bar) + var(--ev-nav-h));
  background: var(--ev-hero-bg);
  color: #fff;
}
/* Heros mit eigenem Innenabstand (py-*) bekommen oben zusätzlich Luft */
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-hero)[class*="py-"] { padding-top: calc(var(--ev-bar) + var(--ev-nav-h) + 2.5rem); padding-bottom: calc(var(--ev-curve) + 2.5rem); }
@media (min-width: 768px) {
  body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-hero)[class*="py-"] { padding-top: calc(var(--ev-bar) + var(--ev-nav-h) + 3.5rem); padding-bottom: calc(var(--ev-curve) + 3rem); }
}
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-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: #5256c8; opacity: 0.20;
}
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-hero)::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  left: 0; right: 0; bottom: -1px; height: var(--ev-curve);
  background: var(--ev-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;
}
/* Sektionen mit Bild-Hero-Deko des Alt-Designs: Blob nicht doppelt */
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-hero) > .absolute.inset-0.opacity-10 { display: none; }
/* Inhalt über der Kante halten (Innenabstand unten reicht i. d. R. aus) */
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-hero) > .relative { z-index: 3; }

/* Brotkrumen-Leiste (Seminar-, Glossar-, Partner-, Trainer-Seiten) als schlankes dunkles Band */
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav + div.bg-gray-50.border-b:not(:has(+ .gradient-hero)) {
  padding-top: calc(var(--ev-bar) + var(--ev-nav-h) + 0.75rem);
  padding-bottom: calc(var(--ev-curve) + 0.5rem);
  border-bottom-width: 0;
}
/* Brotkrumen-Leiste direkt vor einem Hero: liegt als Overlay über dem Hero (kein eigener Hintergrund) */
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  padding-top: calc(var(--ev-bar) + var(--ev-nav-h) + 0.75rem);
  background: transparent;
  border-bottom-width: 0;
}
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav + div.bg-gray-50.border-b :is(nav, a, span) { color: rgba(255, 255, 255, 0.74); }
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav + div.bg-gray-50.border-b a:hover,
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) .ev-nav + div.bg-gray-50.border-b span.font-medium { color: #fff; }

/* Farbe der Kante = Hintergrund der folgenden Sektion */
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-hero):has(+ .bg-mist) { --ev-next-bg: #f4f6fb; }
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-hero):has(+ .bg-gray-50) { --ev-next-bg: #f9fafb; }
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-hero):has(+ .bg-brand-50) { --ev-next-bg: #f4f5fe; }
body.ev-v2:has(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b)) :is(.ev-nav + :is(.gradient-hero, .gradient-hero-blue, .gradient-hero-green, .ms-hero-narrow, section.bg-brand-900, .ev-hero, .ev-hero-light, div.bg-gray-50.border-b:not(:has(+ .gradient-hero))), .ev-nav + div.bg-gray-50.border-b:has(+ .gradient-hero) + .gradient-hero):has(+ :is(.bg-brand-900, .gradient-hero, .gradient-hero-blue, .gradient-hero-green, .gradient-cta)) { --ev-next-bg: #181c2f; }

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

/* ============================================================
   Abschluss-Sektion (direkt vor dem Footer, dunkel) als gerundete Karte
   ============================================================ */
body.ev-v2 :is(section.gradient-cta, section.gradient-hero, section.gradient-hero-blue, section.bg-brand-900, section.ev-cta):has(+ footer):not(.ev-nav + *) {
  position: relative; isolation: isolate; overflow: hidden;
  width: calc(100% - 2 * clamp(14px, 3vw, 40px)); max-width: 1232px;
  margin: 56px auto 72px;
  border-radius: 32px;
  background: var(--ev-hero-bg);
}
body.ev-v2 :is(section.gradient-cta, section.gradient-hero, section.gradient-hero-blue, section.bg-brand-900, section.ev-cta):has(+ footer):not(.ev-nav + *)::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) {
  body.ev-v2 :is(a, button) { transition: none; }
}

/* ============================================================
   Blog-Beitrag: Kopfbereich im dunklen Hero
   ============================================================ */
body.ev-v2 .ev-post-hero nav,
body.ev-v2 .ev-post-hero nav a { color: rgba(255, 255, 255, 0.72); }
body.ev-v2 .ev-post-hero nav a:hover { color: #fff; }
body.ev-v2 .ev-post-hero nav span.font-medium { color: #fff; }
body.ev-v2 .ev-post-hero h1 { color: #fff; }
body.ev-v2 .ev-post-hero .text-gray-400,
body.ev-v2 .ev-post-hero .text-gray-600 { color: rgba(255, 255, 255, 0.78); }
body.ev-v2 .ev-post-hero a:hover .text-gray-600,
body.ev-v2 .ev-post-hero .group:hover .group-hover\:text-brand-600 { color: #fff; }
body.ev-v2 .ev-post-hero .bg-brand-100 { background: rgba(255, 255, 255, 0.14); color: #fff; }
body.ev-v2 .ev-post-hero .ring-gray-200 { --tw-ring-color: rgba(255, 255, 255, 0.35); }
body.ev-v2 .ev-post-hero .mb-8 { margin-bottom: 0; }