@font-face {
  font-family: 'Playfair Display';
  src: url('font/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations'),
       url('font/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('font/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('font/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('font/Manrope-VariableFont_wght.ttf') format('truetype-variations'),
       url('font/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --orange: #EC841F;
  --orange-d: #D4711A;
  --orange-bg: #FEF3E8;
  --blue: #254156;
  --blue-d: #1A3244;
  --blue-bg: #EAF0F2;
  --green: #77B82A;
  --ink: #2B2B2B;
  --muted: #2B2B2B;
  --paper: #F5F5F3;
  --card: #FFFFFF;
  --border: #E2E2E0;
  --r: 20px;
  --r-sm: 10px;
  --r-pill: 999px;
  --shadow: 0 1px 3px rgba(43,43,43,.08), 0 1px 2px rgba(43,43,43,.05);
  --shadow-md: 0 6px 20px rgba(43,43,43,.08), 0 2px 6px rgba(43,43,43,.05);
  --shadow-lg: 0 16px 40px rgba(236,132,31,.16), 0 4px 16px rgba(43,43,43,.07);
  --serif-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --serif-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --w-content: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--serif-body); background: var(--paper); color: var(--ink); font-size: 16px; letter-spacing: .3px; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphenate-limit-chars: 8 4 6; hyphenate-limit-lines: 2; hyphenate-limit-last: always; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 6; -webkit-hyphenate-limit-lines: 2; text-wrap: pretty; }
p, li { text-wrap: pretty; }
h1, h2, h3, h4, .btn-primary, .btn-outline, button { hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; }
h1, h2, h3, h4 { font-family: var(--serif-display); font-weight: 400; letter-spacing: .2px; }
a { color: var(--orange-d); text-decoration: none; }
img { max-width: 100%; height: auto; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }

/* Globaler Pfeilstil */
.arrow-ico { width: 15px; height: 10px; display: inline-block; vertical-align: -1px; flex-shrink: 0; transition: transform .18s ease; }
a:hover .arrow-ico, button:hover .arrow-ico { transform: translateX(4px); text-decoration: none; }
.tb-cta:hover .arrow-ico { transform: rotate(-45deg); }
.mag-read { display: inline-flex; align-items: center; gap: 6px; }
.f-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1.5px solid var(--orange); border-radius: var(--r-pill); font-size: 1.1rem; font-weight: 600; font-family: var(--serif-body); color: var(--orange-d); transition: background .15s, color .15s; }
.f-link:hover { background: var(--orange-bg); }
.f-link:hover .arrow-ico { transform: rotate(-45deg); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.container { max-width: var(--w-content); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
p { max-width: 65ch; }
section { padding: 96px 0; }
em { font-style: italic; }
.serif-num { font-family: var(--serif-display); }

/* Orange Utility-Leiste über der eigentlichen Nav: Markenname + Kontaktdaten, auf jeder Seite über topbar.js */
#topbar-utility { background: var(--orange-d); }
#topbar-utility:not(.hero-mode) { margin-bottom: 12px; }
.topbar-utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.topbar-utility-brand { font-size: 1rem; font-weight: 700; letter-spacing: .03em; color: var(--paper); font-family: var(--serif-body); }
.topbar-utility-contact { display: flex; align-items: center; gap: 24px; }
.topbar-utility-contact a { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.9); font-family: var(--serif-body); }
.topbar-utility-contact a:hover { color: var(--ink); text-decoration: none; }
.topbar-utility-contact svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 640px) { #topbar-utility { display: none; } }

/* Hero-Modus (index.html): Utility-Leiste ist über dem Hero-Bild zunächst unsichtbar und
   erscheint erst zusammen mit dem Nav-Wechsel beim Scrollen — nicht schon beim Seitenaufruf. */
#topbar-utility.hero-mode {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
#topbar-utility.hero-mode.scrolled {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}

/* Top Nav — solides Weiß ist der universelle Standard (funktioniert auf jeder Seite ohne JS) */
#topbar {
  position: sticky; top: 0; z-index: 100; padding: 16px 0;
  background: #fff;
  border-bottom: 1px solid rgba(226, 226, 224, .6);
  box-shadow: var(--shadow-md);
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease, border-radius .35s ease, max-width .35s ease, margin .35s ease, top .35s ease;
}
@media (min-width: 1024px) {
  #topbar { max-width: 1160px; margin: 0 auto; top: 14px; border-radius: 24px; border: 1px solid rgba(226, 226, 224, .6); }
}

/* Opt-in: transparenter Start über dunklem Hero — nur Seiten mit .hero-mode + Scroll-Script (z.B. index.html) */
#topbar.hero-mode:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
@media (min-width: 1024px) {
  #topbar.hero-mode:not(.scrolled) { top: 0; border-radius: 0; border-color: transparent; }
}
/* Nav rutscht im gescrollten Hero-Modus unter die (jetzt sichtbare) Utility-Leiste statt sie zu überlappen */
#topbar.hero-mode.scrolled { top: var(--utility-h, 0px); }
@media (min-width: 1024px) {
  #topbar.hero-mode.scrolled { top: calc(var(--utility-h, 0px) + 14px); }
}
.topbar-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.wordmark { display: flex; align-items: center; }
.wordmark img { height: auto; max-height: 60px; width: auto; max-width: 100%; display: block; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-self: end; grid-column: 3; }
.tb-call { font-size: 1rem; color: var(--ink); font-weight: 600; }
.tb-call:hover { color: var(--orange-d); text-decoration: none; }
.tb-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 600; font-size: 1rem; transition: background .15s; }
.tb-cta:hover { background: var(--orange-d); text-decoration: none; color: white; }

.topbar-nav { display: flex; align-items: center; gap: 2px; justify-self: center; background: transparent; border-radius: var(--r-pill); padding: 6px; }
.topbar-nav a { padding: 8px 18px; border-radius: var(--r-pill); font-size: 1rem; font-weight: 600; color: var(--ink); white-space: nowrap; transition: background .15s, color .15s; }
.topbar-nav a:hover { background: var(--orange-bg); color: var(--orange-d); text-decoration: none; }
#topbar.hero-mode:not(.scrolled) .topbar-nav { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.7); }
#topbar.hero-mode:not(.scrolled) .topbar-nav a { color: var(--ink); }
#topbar.hero-mode:not(.scrolled) .topbar-nav a:hover { background: var(--orange-bg); color: var(--orange-d); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: var(--r-pill); font-size: 1rem; font-weight: 600; font-family: inherit; color: var(--ink); white-space: nowrap; background: none; border: none; cursor: pointer; transition: background .15s, color .15s; }
.nav-dropdown-toggle:hover, .nav-dropdown:hover .nav-dropdown-toggle, .nav-dropdown:focus-within .nav-dropdown-toggle { background: var(--orange-bg); color: var(--orange-d); }
.nav-dropdown-chevron { width: 10px; height: 10px; transition: transform .15s; }
.nav-dropdown:hover .nav-dropdown-chevron, .nav-dropdown:focus-within .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; background: #fff; border: 1px solid rgba(226, 226, 224, .6); border-radius: 16px; box-shadow: var(--shadow-md); padding: 6px; min-width: 170px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 1rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.nav-dropdown-menu a:hover { background: var(--orange-bg); color: var(--orange-d); }
#topbar.hero-mode:not(.scrolled) .nav-dropdown-toggle { color: var(--ink); }
#topbar.hero-mode:not(.scrolled) .nav-dropdown-toggle:hover, #topbar.hero-mode:not(.scrolled) .nav-dropdown:hover .nav-dropdown-toggle, #topbar.hero-mode:not(.scrolled) .nav-dropdown:focus-within .nav-dropdown-toggle { background: var(--orange-bg); color: var(--orange-d); }
#topbar.hero-mode:not(.scrolled) .tb-cta { background: var(--ink); border: none; color: var(--paper); }
#topbar.hero-mode:not(.scrolled) .tb-cta:hover { background: var(--orange-d); color: white; }
@media (max-width: 900px) {
  .topbar-nav { display: none; }
}
/* Tablet: CTA-Text bricht sonst zweizeilig um (macht die Topbar höher als der
   feste -94px-Versatz des Hero erwartet -> weißer Spalt am oberen Rand) */
@media (min-width: 901px) and (max-width: 1099px) {
  .tb-cta .arrow-ico { display: none; }
}

/* Mobile Burger-Menü */
.menu-toggle {
  display: none;
  grid-column: 3; justify-self: end;
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7);
  cursor: pointer; padding: 0; flex-shrink: 0;
}
#topbar:not(.hero-mode) .menu-toggle, #topbar.hero-mode.scrolled .menu-toggle { background: var(--paper); border-color: var(--border); }
.menu-toggle-bars { position: relative; width: 18px; height: 14px; display: block; }
.menu-toggle-bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.menu-toggle-bars span:nth-child(1) { top: 0; }
.menu-toggle-bars span:nth-child(2) { top: 6px; }
.menu-toggle-bars span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  background: var(--ink);
  visibility: hidden;
  clip-path: circle(0% at calc(100% - 46px) 46px);
  transition: clip-path .5s ease-in-out, visibility 0s linear .5s;
}
.mobile-menu.open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 46px) 46px);
  transition: clip-path .5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: visibility 0s linear .2s; }
  .mobile-menu.open { transition: none; }
}
.mobile-menu-close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  color: var(--paper); cursor: pointer; padding: 0;
}
.mobile-menu-close svg { width: 18px; height: 18px; }
.mobile-menu-close:hover { background: rgba(255,255,255,.18); }
.mobile-menu-cta { background: var(--orange); color: #fff; padding: 14px 28px; font-size: 1rem; box-shadow: 0 10px 26px rgba(236,132,31,.35); }
.mobile-menu-cta:hover { background: var(--orange-d); }
.mobile-menu-nav { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mobile-menu-nav a { font-family: var(--serif-display); font-size: 2rem; color: var(--paper); padding: 8px 16px; }
.mobile-menu-nav a:hover { color: var(--orange); text-decoration: none; }

@media (max-width: 900px) {
  .topbar-actions { display: none; }
  .menu-toggle { display: flex; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none; }
}

/* Hero (fusioniert mit Quiz, siehe #quiz) */
#hero > .wrap { max-width: none; padding: 0 20px; }
.hero-content { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 24px; width: 100%; max-width: none; margin: 0 auto; padding-top: clamp(160px, 25vh, 320px); text-align: left; }
.hero-content > * { grid-column: 1 / -1; }
.hero-eyebrow { font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; font-family: var(--serif-body); }
.hero-content h1 { font-size: clamp(2.5rem, 1.3rem + 2.4vw, 3rem); font-weight: 500; line-height: 1.15; max-width: 70%; margin: 0 0 24px; color: var(--ink); text-shadow: none; }
.hero-content h1 em {
  font-style: normal;
  color: var(--ink);
  text-shadow: none;
  background-image: linear-gradient(104deg, rgba(236,132,31,0) 0.9%, rgba(236,132,31,.45) 2.4%, rgba(236,132,31,.45) 96%, rgba(236,132,31,0) 98.5%);
  background-repeat: no-repeat;
  background-size: 100% 65%;
  background-position: 0 58%;
  padding: 0.05em 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-content .sub { font-family: var(--serif-body); font-weight: 700; font-size: 1.6rem; letter-spacing: .05em; color: var(--ink); margin: 0 0 32px; text-shadow: none; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; border-radius: var(--r-pill); background: var(--orange); border: 1.5px solid var(--orange); color: white; font-weight: 600; font-size: 1rem; font-family: var(--serif-body); transition: transform .15s, background .15s, border-color .15s; }
.btn-primary:hover { transform: translateY(-2px); background: var(--orange-d); border-color: var(--orange-d); text-decoration: none; color: white; }
.btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 16px 24px; border-radius: var(--r-pill); background: transparent; color: var(--blue); font-weight: 600; font-size: 1rem; font-family: var(--serif-body); border: 1.5px solid var(--blue); transition: background .15s, color .15s; }
.btn-outline:hover { background: var(--blue); color: white; text-decoration: none; }

/* CTA-Banner: klassischer, dunkler Abschluss-Bereich (Kursseiten, Team-Seite, ...) */
.cta-banner { background: var(--ink); }
.cta-banner-inner { text-align: center; max-width: 640px; margin: 0 auto; }
.cta-banner-title { font-family: var(--serif-display); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 400; margin: 0 0 16px; color: var(--paper); }
.cta-banner-text { font-size: 1.1rem; line-height: 1.7; color: rgba(255,255,255,.75); margin: 0 0 32px; font-family: var(--serif-body); max-width: none; }
.hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.hero-trust-item { font-size: 1rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hero-trust-item::before { content: '✓'; color: var(--green); font-weight: 700; }
.hero-content .hero-trust-item { color: var(--ink); }

.hero-badges { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.azav-badge {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  color: var(--ink); font-weight: 700; font-size: 1.1rem; letter-spacing: .01em;
  font-family: var(--serif-body);
  background: var(--card); box-shadow: var(--shadow-md);
  border-radius: var(--r-pill); padding: 12px 22px;
}
.azav-badge-icon { width: 22px; height: 22px; }

.hero-scroll-hint {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  background: rgba(236, 132, 31, .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 10px 30px rgba(236,132,31,.4);
  color: #fff;
  transition: transform .2s ease;
}
.hero-scroll-hint-text { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.hero-scroll-hint-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; animation: hero-scroll-bounce 1.8s ease-in-out infinite; }
.hero-scroll-hint svg { width: 18px; height: 18px; }
.hero-scroll-hint:hover { transform: translateX(-50%) scale(1.06); text-decoration: none; color: #fff; }
@media (max-width: 640px) {
  .hero-scroll-hint { flex-direction: column; padding: 14px 18px; }
}
@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint-icon { animation: none; }
}

/* Trust Bar */
.trust-bar { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-bar-inner { padding: 32px 24px; display: flex; justify-content: center; align-items: center; gap: 56px; flex-wrap: wrap; }
.t-stat { text-align: center; }
.t-stat strong { display: block; font-family: var(--serif-display); font-size: 2rem; font-weight: 700; color: var(--orange-d); line-height: 1; }
.t-stat span { font-size: 1rem; color: var(--muted); margin-top: 8px; display: block; }
.t-div { width: 1px; height: 42px; background: var(--border); }

/* Section header */
.sh { text-align: center; margin-bottom: 56px; }
.sh-label { display: inline-block; padding: 8px 16px; border-radius: var(--r-pill); background: var(--orange-bg); color: var(--orange-d); font-size: 1rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; font-family: var(--serif-body); }
.sh h2 { font-size: clamp(2.5rem, 3.2vw, 2.5rem); font-weight: 400; margin: 0 0 16px; line-height: 1.15; color: var(--ink); }
.sh p { color: var(--muted); font-size: 1rem; max-width: 1160px; margin: 0 auto; font-family: var(--serif-body); }
.cert-search {
  display: block;
  width: 100%;
  padding: 12px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--serif-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
}
.cert-search:focus { outline: none; border-color: var(--orange); }
.cert-search-full { margin-bottom: 32px; }

/* Hero-Bild — echtes Element statt reinem CSS-background, damit "cover" (= garantiert lückenlos) + Zoom-Puffer für Positionierung kombinierbar sind, ohne je weiße Ränder zu riskieren */
#hero { position: relative; overflow: hidden; margin-top: calc(-1 * var(--topbar-h, 94px)); min-height: 100vh; min-height: 100svh; padding: 0 0 100px; display: flex; align-items: flex-start; --melt: 0; }
.hero-arc {
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, calc(var(--melt) * 100%));
  width: min(560px, 80%); height: 70px; border-radius: var(--r-pill) var(--r-pill) 0 0;
  z-index: 3; background: var(--card, #fff);
  display: flex; align-items: center; justify-content: center; padding: 0 24px;
}
.hero-arc .search-icon-wrap { margin: 0; transform: translateY(8px); }
.hero-arc .hero-scroll-hint-icon { color: var(--orange-d); width: 18px; height: 18px; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-arc { transition: none; }
}
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('image/hero-weiterbildung-bildungsgutschein.webp') center 80% / cover no-repeat;
  transform: scale(1);
}
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(42% 32% at 50% 18%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 78%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
#hero > .wrap { position: relative; z-index: 1; }
@media (max-width: 640px) {
  #hero::before { background-image: url('image/hero-mobile.webp'); background-position: center 50%; background-size: cover; transform: scale(1); }
  .hero-content { text-align: center; padding-top: 120px; }
  .hero-content h1 { margin-left: auto; margin-right: auto; font-size: 1.8rem; max-width: 100%; }
  .hero-content .sub { display: block; font-size: 1.2rem; margin-left: auto; margin-right: auto; }
  .hero-badges { display: none; }
  .hero-arc { width: 100%; }
  .wg-heading { font-size: 2rem; }
}
/* "2K"-Klasse: großer Desktop-Monitor, normale Pixel-Dichte (auch skaliert) */
@media (min-width: 1600px) {
  #hero::before { background-position: center 0%; transform: scale(1); }
  .hero-content .sub { max-width: 65ch; margin-left: 0; margin-right: 0; font-size: 1.4rem; }
  .hero-content h1 { font-size: 3.5rem; }
  .wrap { max-width: 1400px; }
}
/* "4K"-Klasse: erkannt über echte Pixel-Dichte statt CSS-Breite, damit
   Windows-Skalierung (125/150/200%) die Erkennung nicht verfälscht.
   Braucht zusätzlich min-width:1600px, damit kleine Retina-Handys/Laptops
   nicht fälschlich als "4K-Monitor" gelten. */
@media (min-width: 1600px) and (min-resolution: 1.5dppx) {
  .hero-content .sub { font-size: 2rem; }
  .hero-content h1 { font-size: 5rem; }
  .wrap { max-width: 1700px; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  #hero::before { background-position: center 80%; }
  .hero-content { text-align: center; padding-top: clamp(70px, 12vh, 150px); }
  .hero-badges { gap: 18px; justify-content: center; }
  .hero-content h1 { margin-left: auto; margin-right: auto; font-size: 3.5rem; }
  .hero-content .sub { margin-left: auto; margin-right: auto; font-size: 1.8rem; }
}
@media (min-width: 641px) and (max-height: 820px) {
  /* Flache Viewports (typ. 15"-Laptop-Displays): H1 auf max. 48px begrenzen, Bild weiter nach unten. */
  .hero-content h1 { font-size: clamp(2.5rem, 1.3rem + 2.4vw, 2.75rem); }
  .hero-content { padding-top: clamp(90px, 18vh, 180px); }
  
  #hero::before { background-position: center 50%; }
}

/* Quiz — ruhiger Verlaufshintergrund, Quiz-Karte als Modal darüber */
#quiz { position: relative; overflow: hidden; background: var(--paper); min-height: 100vh; display: flex; align-items: center; padding: 0; }
#quiz .qf-section-content { width: 100%; position: relative; z-index: 4; }
#quiz .search-icon-label { color: var(--orange); }

/* Such-Icon */
.search-icon-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 20px; text-decoration: none; }
a.search-icon-wrap { cursor: pointer; }
a.search-icon-wrap:hover .search-icon-label { color: var(--orange); }
.search-icon { width: 90px; height: 90px; color: var(--orange); flex-shrink: 0; }
.search-icon-label { font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-d); font-family: var(--serif-body); }

/* Generisches Überschriften-Icon (gleiche Größe wie Kurs-Finder) */
.h-icon-wrap { display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.h-icon { width: 90px; height: 90px; color: var(--orange); flex-shrink: 0; }
img.h-icon { width: auto; }
#magazin .h-icon-wrap img.h-icon { height: 70px; }
.contact-text .h-icon { color: var(--orange); }

/* Icon-Medaillon (Kursseiten-Sektionen, siehe trainings.css) - Basisstil hier, damit auch
   Seiten ohne trainings.css (z.B. team.html) ihn ohne Nebenwirkungen mitbekommen. */
.icon-medallion { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--orange-bg); margin-bottom: 24px; }
.icon-medallion svg { width: 28px; height: 28px; color: var(--orange-d); }
.icon-medallion img { width: 34px; height: 34px; object-fit: contain; }
/* Seiten-Header mit Icon-Medaillon statt Eyebrow-Text (z.B. team.html): freistehend wie .h-icon, 90px */
.article-hero .icon-medallion { width: fit-content; height: auto; background: transparent; border-radius: 0; margin-bottom: 20px; }
.article-hero .icon-medallion img { width: auto; height: auto; max-width: 90px; max-height: 90px; object-fit: contain; }

.qf-launcher { text-align: center; padding: 24px 0; }

/* Quiz-Inhalt läuft frei auf dem Sektions-Hintergrund, keine Karte/Box */
.quiz-wrap { color: var(--ink); position: relative; padding: 20px 0; transition: opacity .16s ease; }
.quiz-wrap.qf-swap { opacity: .35; }
.quiz-step { display: none; animation: fadeIn .25s ease; position: relative; }
.quiz-step.active { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 8px; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Ruhiger Verlaufshintergrund der #quiz-Sektion (kein Video) */
.qf-bg-scrim { position: absolute; inset: 0; z-index: 0; background: #FFFFFF; pointer-events: none; }
.qf-flash { position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 60% at 50% 45%, #FFFFFF 0%, var(--orange-bg) 50%, rgba(254,243,232,0) 78%); opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.qf-flash.show { opacity: 1; }

.quiz-progress-mid { grid-column: 2 / 6; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.quiz-progress-dashes { display: flex; gap: 6px; }
.quiz-progress-dash { flex: 1; height: 5px; border-radius: 3px; background: var(--border); transition: background .3s ease; }
.quiz-progress-dash.filled { background: var(--orange); }
.quiz-progress-label { font-size: 1rem; color: var(--muted); opacity: .75; font-family: var(--serif-body); text-align: center; }
.quiz-back { background: var(--card); border: 1.5px solid var(--border); color: var(--ink); font-weight: 600; font-size: 1rem; font-family: var(--serif-body); cursor: pointer; padding: 16px 32px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; transition: background .15s, border-color .15s, color .15s; }
.quiz-back:hover { background: var(--orange-bg); border-color: var(--orange); color: var(--orange-d); }
.quiz-step h3 { grid-column: 1 / -1; font-size: clamp(2.5rem, 3.2vw, 2.5rem); font-weight: 400; line-height: 1.2; margin: 0 0 31px; font-family: var(--serif-display); color: var(--ink); text-align: center; }
.quiz-step .quiz-sub { grid-column: 1 / -1; font-size: 1rem; color: var(--muted); opacity: .85; margin: 0 auto 22px; font-family: var(--serif-body); text-align: center; }
.quiz-options-panel { grid-column: 1 / -1; background: var(--paper); border-radius: var(--r); padding: 70px 24px 0; display: flex; flex-direction: column; overflow-y: auto; max-height: min(600px, 85dvh); }
.quiz-options { width: 66.6667%; margin: 0 auto; display: grid; gap: 8px; }
@media (min-width: 640px) { .quiz-options { grid-template-columns: 1fr 1fr; } }
.quiz-options.quiz-options--stacked { grid-template-columns: 1fr; }
.quiz-options.quiz-options--cols-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .quiz-options.quiz-options--cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .quiz-options.quiz-options--cols-4 { grid-template-columns: repeat(4, 1fr); } }
.qo { background: var(--card); border: 1.5px solid #000; border-radius: 14px; padding: 12px 24px; min-height: 68px; cursor: pointer; font-size: 1rem; font-weight: 400; font-family: var(--serif-display); color: var(--ink); text-align: left; transition: background .15s, border-color .15s; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.qo:hover { background: var(--orange-bg); border-color: var(--orange); }
.qo.selected { background: var(--orange-bg); border-color: var(--orange); color: var(--orange-d); font-weight: 700; }
.qo-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1; min-width: 0; }
.qo-label-row { display: flex; align-items: center; gap: 8px; }
.qo-label { font-size: 1.05rem; letter-spacing: .3px; font-family: var(--serif-body); }
@media (min-width: 1024px) {
  .qo-label { font-size: 1.15rem; }
}
@media (min-width: 1024px) {
  .quiz-options .qo-text { text-align: center; }
  .quiz-options .qo-label-row { justify-content: center; }
}
.qo-hint-wrap { position: relative; display: inline-flex; }
.qo-hint-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--border); color: var(--muted); font-family: var(--serif-display); font-style: italic; font-size: .72rem; line-height: 1; cursor: help; }
.qo-hint-tooltip { position: absolute; z-index: 5; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 220px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: .82rem; font-weight: 400; font-family: var(--serif-body); line-height: 1.4; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease; }
.qo-hint-wrap:hover .qo-hint-tooltip { opacity: 1; visibility: visible; }
.qo-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: center; transition: background .15s ease, border-color .15s ease; }
.qo-check svg { width: 14px; height: 11px; color: #fff; opacity: 0; transition: opacity .1s ease; }
.qo.selected .qo-check, .qo.qo-checked .qo-check { background: #2FAE5A; border-color: #2FAE5A; }
.qo.selected .qo-check svg, .qo.qo-checked .qo-check svg { opacity: 1; }
.qf-other-wrap { width: 66.6667%; margin: 12px auto 0; }
.qf-other-input { width: 100%; border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 18px; font-size: 1rem; font-family: var(--serif-body); color: var(--ink); background: var(--card); }
.qf-other-input:focus { border-color: var(--orange); outline: none; }
.qf-multi-actions { margin-top: 18px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: stretch; gap: 10px; position: sticky; bottom: 0; background: var(--paper); padding-top: 12px; padding-bottom: 12px; }
.qf-multi-actions .quiz-back { grid-column: 1; }
.qf-multi-actions .btn-primary { grid-column: 6; }
.qf-multi-actions .btn-primary.qf-btn-hidden { visibility: hidden; }
.quiz-result { display: none; position: relative; text-align: left; }
.quiz-result.show { display: block; animation: fadeIn .3s ease; }
.quiz-result .qf-summary-label { display: block; text-align: left; color: var(--ink); margin: 0 0 10px; }
.qr-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 18px; }
.qr-tag { font-size: 1rem; padding: 6px 14px; border-radius: var(--r-pill); background: var(--orange-bg); color: var(--orange-d); border: 1px solid var(--border); font-family: var(--serif-body); }
.qr-eyebrow { font-size: 1.5rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink); opacity: 1; margin: 0 0 16px; font-family: var(--serif-display); text-align: center; }
.qr-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.qr-list-item { display: flex; flex-direction: column; flex: 0 1 calc((100% - 64px) / 5); max-width: calc((100% - 64px) / 5); border: 1px solid var(--border); border-radius: var(--r); background: var(--card); overflow: hidden; font-size: 1.1rem; font-weight: 600; font-family: var(--serif-body); color: var(--ink); transition: transform .2s, box-shadow .2s; }
.qr-list-item:has(.qr-item-link) { cursor: pointer; }
.qr-list-item:has(.qr-item-link):hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.qr-item-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
@media (max-width: 900px) { .qr-list-item { flex-basis: calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3); } }
@media (max-width: 640px) { .qr-list-item { flex-basis: 100%; max-width: 100%; } }
.qr-item-media { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; }
.qr-item-media img { width: 100%; height: 100%; object-fit: cover; }
.qr-item-title { display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0; padding: 12px; font-size: 1rem; font-weight: 400; line-height: 1.3; text-align: center; font-family: var(--serif-display); color: var(--ink); min-height: calc(1.3em * 3 + 24px); }
#quiz-result .cd-desc { text-align: center; max-width: none; }
.qr-cta-main { display: flex; width: fit-content; margin: 0 auto 24px; }
.quiz-hint { margin-top: 16px; font-size: 1rem; color: var(--muted); opacity: .8; font-family: var(--serif-body); }


/* Kurse im Überblick — Zwei-Ebenen-Filter */
#kurse { background: var(--paper); }
.cert-filter {
  position: relative; overflow: hidden;
  margin-bottom: 8px; padding: 32px;
  background: linear-gradient(135deg, var(--orange-bg) 0%, #fff 55%);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
}
.cert-filter::before {
  content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(236,132,31,.18) 0%, transparent 70%);
  pointer-events: none;
}
.cf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 32px; }
@media (max-width: 780px) {
  .cf-grid { grid-template-columns: 1fr; }
}
.cf-col { display: flex; flex-direction: column; }
.cf-label { position: relative; display: flex; align-items: center; gap: 10px; font-size: 1rem; color: var(--ink); font-weight: 600; margin: 0 0 12px; font-family: var(--serif-body); }
.cf-label-icon { width: 16px; height: 16px; box-sizing: content-box; padding: 7px; border-radius: 50%; background: rgba(236,132,31,.14); flex-shrink: 0; color: var(--orange-d); }
.cert-select {
  display: block; width: 100%;
  padding: 12px 40px 12px 18px;
  border-radius: var(--r-pill); border: 1.5px solid var(--border);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  background-size: 16px;
  font-weight: 600; font-size: 1rem; font-family: var(--serif-body); color: var(--ink);
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
#hauptbereich-row { border-color: var(--green); color: var(--green); }
#cert-row { border-color: var(--orange); color: var(--orange-d); }

.course-detail { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: stretch; margin-top: 28px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 32px; }
.cd-text h3 { margin: 0 0 12px; font-size: clamp(2rem, 2.6vw, 2.5rem); font-weight: 400; color: var(--ink); line-height: 1.2; }
.cd-desc { font-size: 1rem; color: var(--muted); line-height: 1.7; margin: 0 0 20px; font-family: var(--serif-body); }
.cd-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }
.cd-fact { border-radius: var(--r-sm); padding: 12px 14px; }
.cd-fact:nth-child(odd) { background: var(--orange-bg); }
.cd-fact:nth-child(even) { background: var(--blue-bg); }
.cd-fact-label { display: block; font-size: 1rem; margin-bottom: 2px; font-weight: 600; }
.cd-fact:nth-child(odd) .cd-fact-label { color: var(--orange-d); }
.cd-fact:nth-child(even) .cd-fact-label { color: var(--blue); }
.cd-fact-value { display: block; font-size: 1rem; color: var(--ink); font-weight: 600; font-family: var(--serif-body); }
.cd-vertiefungen-label { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 10px; font-family: var(--serif-body); }
.cd-vertiefungen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.cd-vertiefung-pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--paper); color: var(--ink); font-size: .9rem; font-weight: 600; font-family: var(--serif-body); }
.cd-cta { width: 100%; justify-content: center; }
.cd-media { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); min-height: 100%; }
.cd-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 780px) {
  .course-detail { grid-template-columns: 1fr; padding: 24px; }
  .cd-media { aspect-ratio: 4/3; min-height: 0; }
}

/* Förderung */
#foerderung { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.foerder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foerder-card { position: relative; border-radius: var(--r); overflow: hidden; min-height: 380px; display: flex; transition: transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s; }
.foerder-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.foerder-card.primary { background: linear-gradient(135deg, var(--orange) 0%, rgba(0,0,0,.4) 100%); }
.foerder-card.secondary { background: linear-gradient(135deg, var(--blue) 0%, #4a6a82 100%); }

.foerder-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

/* Standardansicht: Tag, Titel, "Mehr lesen" unten im Bild */
.foerder-face { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 30px; background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.08) 55%, rgba(0,0,0,0) 100%); transition: opacity .3s ease; }
.foerder-card:hover .foerder-face, .foerder-card:focus-within .foerder-face { opacity: 0; pointer-events: none; }
.foerder-face h3 { margin: 0; font-size: 1.85rem; font-weight: 400; color: #fff; }
.foerder-readmore { display: inline-flex; align-items: center; gap: 7px; font-family: var(--serif-body); font-weight: 600; font-size: .92rem; color: #fff; }
.foerder-readmore .arrow-ico { width: 15px; height: 9px; transition: transform .2s; }
.foerder-card:hover .foerder-readmore .arrow-ico { transform: translateX(4px); }

.foerder-tag { display: inline-flex; align-self: flex-start; padding: 8px 16px; border-radius: var(--r-pill); font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-family: var(--serif-body); }

/* Hover-Reveal: hartes, deckendes Overlay mit Text + CTA */
.foerder-reveal { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 36px; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.foerder-card.primary .foerder-reveal { background: rgba(20,16,12,.95); }
.foerder-card.secondary .foerder-reveal { background: rgba(37,65,86,.96); }
.foerder-card:hover .foerder-reveal, .foerder-card:focus-within .foerder-reveal { opacity: 1; transform: translateY(0); pointer-events: auto; }
.foerder-reveal h3 { margin: 0; font-size: 1.5rem; font-weight: 400; color: #fff; }
.foerder-reveal p { margin: 0; color: rgba(255,255,255,.85); font-size: 1rem; line-height: 1.7; font-family: var(--serif-body); }
.foerder-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 14px 22px; border-radius: var(--r-pill); background: #fff; color: var(--ink); font-weight: 700; font-family: var(--serif-body); transition: gap .2s; }
.foerder-cta:hover { gap: 12px; }
.foerder-cta .arrow-ico { width: 15px; height: 9px; }

/* FAQ */
section#faq { background: var(--paper); }
.faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 1160px; margin: 0 auto; }
.faq-item { border-radius: var(--r-sm); border: 1px solid var(--border); overflow: hidden; background: var(--card); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 24px 24px; font-size: 1rem; font-weight: 600; font-family: var(--serif-body); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); transition: background .15s; }
.faq-q:hover { background: var(--orange-bg); }
.faq-arrow { font-size: 1rem; color: var(--muted); transition: transform .25s; flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-a { max-height: 340px; }
.faq-a p { margin: 0; padding: 0 24px 24px; font-size: 1rem; color: var(--muted); line-height: 1.8; font-family: var(--serif-body); border-top: 1px solid var(--border); padding-top: 16px; max-width: none; }

/* Magazin */
#magazin { background: var(--card); border-top: none; }
.mag-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px; }
.mag-grid > .mag-card { flex: 0 1 calc((100% - 48px) / 3); }
.mag-card { position: relative; height: 100%; background: var(--paper); border-radius: var(--r); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.mag-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.mag-card-img { width: 100%; height: auto; aspect-ratio: 3 / 4; flex: none; object-fit: contain; background: var(--paper); display: block; }
/* Badge nur bei Kurs-Bildern (image/kurse/), nicht bei Ratgeber-Artikelbildern (image/artikel/) */
.mag-card:has(> .mag-card-img[src^="image/kurse/"])::after {
  content: '✦ KI-generiert';
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-family: var(--serif-body); font-size: .75rem; font-weight: 600; letter-spacing: .01em; line-height: 1;
  color: #fff; background: rgba(20,16,12,.72); padding: 4px 9px; border-radius: var(--r-pill);
  pointer-events: none;
}

/* Wiederverwendbares KI-Bild-Badge für Hero-/Ratgeber-Fotos ohne eigene .mag-card-Struktur */
.ai-badge {
  position: absolute; z-index: 2;
  font-family: var(--serif-body); font-size: .75rem; font-weight: 600; letter-spacing: .01em; line-height: 1;
  color: #fff; background: rgba(20,16,12,.72); padding: 4px 9px; border-radius: var(--r-pill);
  pointer-events: none;
}
.mag-thumb { height: 160px; background: linear-gradient(135deg, var(--tag-c, var(--orange)) 0%, var(--tag-bg, var(--orange-bg)) 130%); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: rgba(255,255,255,.85); position: relative; }
.mag-thumb svg { width: 1em; height: 1em; }
.mag-thumb::after { content: 'Platzhalterbild'; position: absolute; bottom: 8px; right: 10px; font-family: var(--serif-body); font-size: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.mag-card-body { padding: 32px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.mag-tag { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tag-c, var(--orange-d)); font-family: var(--serif-body); }
.mag-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mag-tag-icon { width: 18px; height: 18px; flex-shrink: 0; }
.mag-card-text { display: flex; flex-direction: column; gap: 16px; min-height: calc(1.5rem * 1.35 * 3 + 1rem * 1.65 * 3 + 16px); }
.mag-card h3 { overflow: hidden; max-height: calc(1.5rem * 1.35 * 3); margin: 0; font-size: 1.5rem; font-weight: 400; line-height: 1.35; color: var(--ink); }
.mag-card p { flex: 1; overflow: hidden; max-height: calc(1rem * 1.65 * 3); margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; font-family: var(--serif-body); }
.mag-read { font-size: 1rem; font-weight: 600; color: var(--orange-d); font-family: var(--serif-body); }
.mag-disclaimer { text-align: center; margin-top: 40px; font-size: 1rem; color: var(--muted); font-family: var(--serif-body); max-width: 620px; margin-left: auto; margin-right: auto; }

/* Contact */
#kontakt { background: var(--paper); color: var(--ink); padding: 88px 0; }
.contact-layout { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; max-width: 640px; margin: 0 auto; }
/* Kontaktseite (#formular): oben Intro + Formular nebeneinander (2 Spalten), darunter die Kontaktwege (volle Breite) */
#formular .contact-layout { max-width: 1160px; display: flex; flex-direction: column; align-items: center; gap: 48px; }

#formular .contact-intro { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 640px; gap: 24px; }
#formular .contact-layout > .form-panel { width: 100%; }
#formular .contact-map-section { display: grid; width: 100%; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
@media (max-width: 900px) { #formular .contact-map-section { grid-template-columns: 1fr; } }
.contact-osm-embed { width: 100%; height: 340px; border: none; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.contact-map-info { display: flex; flex-direction: column; gap: 24px; text-align: left; }
.contact-map-address { display: flex; flex-direction: column; gap: 8px; }
.chi-label { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--orange-d); font-family: var(--serif-body); }
.contact-map-address strong { font-size: 1.4rem; font-weight: 400; line-height: 1.3; color: var(--ink); font-family: var(--serif-display); }
.contact-text h2, .contact-intro h1 { font-size: clamp(2.5rem, 3.2vw, 2.5rem); font-weight: 400; margin: 0 0 16px; line-height: 1.15; color: var(--ink); }
.contact-text p, .contact-intro p { color: rgba(43,43,43,.85); margin: 0 0 32px; font-size: 1rem; font-family: var(--serif-body); max-width: none; }
.contact-channels-col { display: flex; flex-direction: column; }
.contact-trust { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ct-item { display: flex; gap: 10px; align-items: center; font-size: 1rem; font-weight: 700; color: var(--ink); font-family: var(--serif-body); }
.ct-item::before { content: '✓'; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: #fff; font-size: .7rem; }
.contact-channels { display: flex; justify-content: center; }
.chan { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; transition: background .15s; text-decoration: none; color: var(--ink); }
.chan:hover { background: rgba(43,43,43,.04); text-decoration: none; }
.chan-static { cursor: default; }
.chan-static:hover { background: var(--card); }
.chan-icon { font-size: 1.5rem; margin-bottom: 8px; }
.chan h3 { font-size: 1rem; font-weight: 700; color: var(--ink); font-family: var(--serif-body); margin: 0; letter-spacing: .2px; }
.chan span { font-size: 1rem; color: rgba(43,43,43,.6); font-family: var(--serif-body); }
.chan.primary { background: var(--c-bg-warm, #FBF6EF); border-color: var(--c-bg-warm, #FBF6EF); color: var(--ink); }
.chan.primary h3, .chan.primary span { color: var(--ink); }
.chan.primary span { color: rgba(43,43,43,.6); }
.chan.primary:hover { background: #F3E7D2; }

/* Kontaktformular */
.alphadi-lead-form { display: flex; flex-direction: column; gap: 16px; }
.alphadi-lead-form label { display: flex; flex-direction: column; gap: 8px; font-size: 1rem; font-weight: 600; color: var(--ink); font-family: var(--serif-body); }
.alphadi-lead-form input[type="text"], .alphadi-lead-form input[type="email"], .alphadi-lead-form input[type="tel"] { padding: 16px; border-radius: var(--r-sm); border: 1px solid var(--border); font-size: 1rem; font-family: var(--serif-body); background: var(--card); color: var(--ink); }
.alphadi-lead-form input[type="text"]:focus, .alphadi-lead-form input[type="email"]:focus, .alphadi-lead-form input[type="tel"]:focus { outline: none; border-color: var(--orange); }
.alphadi-lead-form select { padding: 16px 40px 16px 16px; border-radius: var(--r-sm); border: 1px solid var(--border); font-size: 1rem; font-family: var(--serif-body); background: var(--card); color: var(--ink); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23767068' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
.alphadi-lead-form select:focus { outline: none; border-color: var(--orange); }
.af-vertiefung-wrap { display: flex; flex-direction: column; gap: 8px; }
.af-vertiefung-wrap[hidden] { display: none; }
.af-vertiefung-label { font-size: 1rem; font-weight: 600; color: var(--ink); font-family: var(--serif-body); }
.af-vertiefung-options { display: flex; flex-wrap: wrap; gap: 10px; }
.af-vertiefung-pill { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: .95rem; font-weight: 600; font-family: var(--serif-body); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.af-vertiefung-pill:hover { border-color: var(--orange); }
.af-vertiefung-pill.active { border-color: var(--orange); background: var(--orange); color: #fff; }
.af-pflicht-hinweis { font-size: 1rem; color: var(--muted); margin: 0; font-family: var(--serif-body); }
.af-dsgvo { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 1rem; }
.af-dsgvo input[type="checkbox"] { margin-top: 8px; width: 16px; height: 16px; flex-shrink: 0; }
.af-dsgvo a { color: var(--orange-d); }
.alphadi-lead-form button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; border-radius: var(--r-pill); background: var(--orange); color: white; font-weight: 600; font-size: 1rem; font-family: var(--serif-body); border: none; cursor: pointer; transition: background .15s; }
.alphadi-lead-form button[type="submit"]:hover { background: var(--orange-d); }

.af-steps { display: flex; align-items: center; }
.af-step-item { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.af-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--border); color: var(--muted); font-size: .85rem; font-weight: 700; font-family: var(--serif-body); flex-shrink: 0; transition: background .2s, color .2s; }
.af-step-label { font-size: .9rem; font-weight: 600; color: var(--muted); font-family: var(--serif-body); white-space: nowrap; }
.af-step-line { flex: 1; height: 2px; background: var(--border); min-width: 16px; margin: 0 8px; }
.af-step-item.active .af-step-dot { background: var(--orange); color: #fff; }
.af-step-item.active .af-step-label { color: var(--ink); }
.af-step-item.done .af-step-dot { background: var(--orange-d); color: #fff; }
.af-step-item.done .af-step-label { color: var(--ink); }

.af-selected-kurs { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 0 16px; border-bottom: 1px solid var(--border); font-size: 1rem; font-family: var(--serif-body); color: var(--ink); }
.af-selected-kurs-info { display: flex; flex-direction: column; gap: 8px; }
.af-selected-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.af-selected-row-label { font-weight: 600; }
.af-selected-vertiefung-line[hidden] { display: none; }
.af-selected-vertiefung-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.af-mini-pill { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: var(--r-pill); background: var(--orange); color: #fff; font-weight: 700; font-size: 1rem; font-family: var(--serif-body); }
.af-change-kurs { background: none; border: none; padding: 0; color: var(--orange-d); font-weight: 600; font-size: .95rem; font-family: var(--serif-body); cursor: pointer; text-decoration: underline; flex-shrink: 0; }

.af-step-panel { display: flex; flex-direction: column; gap: 16px; }
.af-step-panel[hidden], .af-selected-kurs[hidden] { display: none; }
.af-step-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.af-btn-next, .af-btn-back { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border-radius: var(--r-pill); font-weight: 600; font-size: 1rem; font-family: var(--serif-body); cursor: pointer; transition: background .15s; border: none; }
.af-btn-next { background: var(--orange); color: #fff; margin-left: auto; }
.af-btn-next:hover { background: var(--orange-d); }
.af-btn-back { background: none; color: var(--ink); border: 1px solid var(--border); }
.af-btn-back:hover { background: rgba(43,43,43,.04); }
.qf-summary { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--border); }
.qf-summary[hidden] { display: none; }
.qf-summary-label { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--orange-d); font-family: var(--serif-body); }
.qf-summary-list { display: flex; flex-direction: column; gap: 6px; }
.qf-summary-row { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .95rem; font-family: var(--serif-body); }
.qf-summary-row-label { font-weight: 600; color: var(--ink); }
.qf-summary-row-value { color: var(--muted); }

/* Footer */
footer { background: var(--ink); color: rgba(245,245,243,.55); padding: 48px 0; }
.footer-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 32px; margin-bottom: 24px; border-bottom: 1px solid rgba(245,245,243,.15); }
.footer-brand .wordmark { display: inline-flex; align-items: center; gap: 12px; }
.footer-brand .wordmark img { height: 38px; }
.footer-brand .wordmark span { font-size: 1.2rem; font-weight: 700; letter-spacing: .02em; color: var(--paper); font-family: var(--serif-body); }
.footer-brand p { font-size: 1rem; max-width: 340px; margin: 8px 0 0; font-family: var(--serif-body); line-height: 1.7; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col strong { display: block; color: var(--orange); font-size: 1rem; margin-bottom: 16px; font-family: var(--serif-display); font-weight: 400; }
.footer-col a.footer-col-title-link { display: flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--orange); text-decoration: none; }
.footer-col-title-link strong { margin-bottom: 0; }
.footer-col a { display: block; font-size: 1rem; color: rgba(245,245,243,.55); margin-bottom: 8px; font-family: var(--serif-body); }
.footer-col a:hover { color: var(--orange); }
.footer-inner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 1rem; font-family: var(--serif-body); text-align: center; }
footer a { color: rgba(245,245,243,.6); }
footer a:hover { color: var(--orange); }

/* Responsive */
@media (max-width: 780px) {
  .mag-grid { gap: 32px; }
  .mag-grid > .mag-card { flex-basis: 100%; }
}
@media (max-width: 640px) {
  section { padding: 64px 0; }
  .trust-bar-inner { gap: 32px; }
  .t-div { display: none; }
  .quiz-wrap { padding: 32px 24px; }
  .foerder-grid { grid-template-columns: 1fr; gap: 20px; }
  .foerder-card { min-height: 300px; }
  .foerder-face, .foerder-reveal { padding: 22px; }
  .foerder-face h3 { font-size: 1.4rem; }
  #kontakt { padding: 64px 0; }
  .contact-channels { grid-template-columns: 1fr; }
  .footer-cols { gap: 32px; }
}

/* TESTIMONIALS — simple, statisches Grid, keine Animation */
#testimonial-featured { padding: 5rem 0; background: var(--c-bg-warm, #FBF6EF); }

.cm-avatar-stack { display: flex; justify-content: center; margin-bottom: 20px; }
.cm-avatar-stack-item {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px; color: #fff;
  object-fit: cover;
  background: var(--orange, #EC841F);
  border: 3px solid var(--c-bg-warm, #FBF6EF);
  margin-left: -16px;
}
.cm-avatar-stack-item:first-child { margin-left: 0; }
.cm-avatar-stack-item.cm-alt { background: var(--green, #77B82A); }
.cm-avatar-stack-item.cm-avatar-stack-more { background: var(--c-dark, #26211c); font-size: 16px; }

.cm-heading {
  text-align: center;
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.5rem);
  color: var(--c-dark, #26211c);
  margin: 0 0 2.5rem;
}

.cm-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.cm-reviews-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 2rem auto 0;
  padding: 10px 20px;
  border: 1.5px solid var(--orange);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--orange-d, #D4711A);
  transition: background .15s;
}
.cm-reviews-link:hover { text-decoration: none; background: var(--orange-bg); }
.cm-reviews-link-arrow { display: inline-block; transition: transform .18s ease; }
.cm-reviews-link:hover .cm-reviews-link-arrow { transform: rotate(-45deg); }
.cm-review-card {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 1.25rem;
}
.cm-review-stars { color: var(--orange, #EC841F); font-size: 24px; margin-bottom: 8px; text-align: center; }
.cm-review-text { font-size: 16px; color: var(--c-dark, #26211c); line-height: 1.55; margin: 0 0 10px; }
.cm-review-author { font-size: 16px; color: var(--c-mid, #6b645c); margin: 0; }

/*
  WEGWEISER-SEKTION
  Nutzt bestehende Tokens (--c-orange-dk, --c-dark, --c-mid) mit Fallback.
*/

.wg-section {
  padding: 3.5rem 0 4.5rem;
  background: #fff;
  text-align: center;
  scroll-margin-top: 140px;
}

.wg-icon {
  width: 90px;
  margin: 0 auto 2rem;
  color: var(--c-orange-dk, #EC841F);
}

.wg-icon svg, .wg-icon img {
  width: 100%;
  height: auto;
  overflow: visible;
}

#wgOverview, #wgQuizPanel, #wgFilterPanel { transition: opacity .22s ease; }
@media (prefers-reduced-motion: reduce) {
  #wgOverview, #wgQuizPanel, #wgFilterPanel { transition: none; }
}

.wg-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}

@media (max-width: 640px) {
  .wg-tiles {
    grid-template-columns: 1fr;
  }
}

.wg-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2.5rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--c-bg-warm, #FBF6EF);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wg-tile:hover {
  border-color: var(--c-orange-dk, #EC841F);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.wg-tile-eyebrow {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-orange-dk, #EC841F);
}

.wg-heading {
  text-align: center;
  font-family: var(--serif-display);
  font-size: clamp(2rem, 3vw, 2.3rem);
  font-weight: 400;
  color: var(--c-dark, #26211c);
  margin: 0 0 2rem;
}

.wg-tile-title {
  font-family: var(--serif-display);
   font-size: clamp(1.8rem, 2.8vw, 2.1rem);
  font-weight: 400;
  color: var(--c-dark, #26211c);
  margin: 0;
}

.wg-accent {
  color: var(--orange-d);
}

.wg-marker {
  background: linear-gradient(104deg, rgba(236,132,31,0) 0.9%, rgba(236,132,31,.45) 2.4%, rgba(236,132,31,.45) 96%, rgba(236,132,31,0) 98.5%);
  padding: 0.05em 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.wg-tile-text {
  font-size: 16px;
  color: var(--c-dark, #26211c);
  line-height: 1.5;
}

.wg-tile-cta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-orange-dk, #EC841F);
}

.wg-back {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  margin: 32px auto 0;
  background: var(--border);
  border: 1.5px solid var(--c-mid, #6b645c);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-mid, #6b645c);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wg-back:hover { background: var(--orange-bg); color: var(--orange-d); border-color: var(--orange-d); }
.wg-back-top { margin: 0 auto 16px; }
.wg-back-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 16px; }
.wg-back-row .wg-back-top { margin: 0; }
.wg-restart-quiz {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--green); border: 1.5px solid var(--green); border-radius: var(--r-pill);
  padding: 10px 22px; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600;
  color: #fff; transition: background .15s ease, border-color .15s ease;
}
.wg-restart-quiz:hover { background: #649F22; border-color: #649F22; }
.wg-restart-quiz[hidden] { display: none; }