/* =========================================================
   WWN Bildungsinstitut — Final Professional Polish 2026
   Red / White design system, responsive typography, motion
   ========================================================= */
:root {
  --wwn-final-red: #b11226;
  --wwn-final-red-dark: #790919;
  --wwn-final-red-soft: #fff2f4;
  --wwn-final-ink: #151922;
  --wwn-final-muted: #5c667a;
  --wwn-final-line: rgba(177, 18, 38, .16);
  --wwn-final-shadow: 0 18px 54px rgba(17, 24, 39, .10);
  --wwn-final-shadow-red: 0 18px 48px rgba(177, 18, 38, .16);
}
html { scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--wwn-final-ink); }
h1, h2, h3, h4, h5, h6, .section-title, .hero-title, .page-hero h1 { letter-spacing: -.035em; text-wrap: balance; }
p, li, .section-subtitle, .hero-subtitle { text-wrap: pretty; }
.hero-title, .page-hero h1 { font-size: clamp(2.35rem, 6vw, 5.35rem) !important; line-height: .98; }
.section-title { font-size: clamp(2rem, 4.2vw, 3.75rem) !important; line-height: 1.05; }
.section-subtitle, .hero-subtitle { font-size: clamp(1rem, 1.8vw, 1.22rem); line-height: 1.75; }
.site-header { transition: box-shadow .28s ease, transform .28s ease, background .28s ease; }
.site-header.is-scrolled { box-shadow: 0 14px 44px rgba(17,24,39,.12); }
.navbar-brand img, .site-logo { object-fit: contain; max-width: min(170px, 42vw); height: auto; }
.nav-link { font-weight: 800 !important; letter-spacing: -.01em; }
.btn, button, .nav-link, .course-card, .feature-box, .blog-card, .testimonial-card, .location-card, .process-step, .level-option { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: var(--wwn-final-shadow-red); }
.course-card:hover, .feature-box:hover, .blog-card:hover, .testimonial-card:hover, .location-card:hover, .process-step:hover { transform: translateY(-6px); box-shadow: var(--wwn-final-shadow); border-color: rgba(177,18,38,.24) !important; }
.hero-section, .page-hero { position: relative; overflow: hidden; }
.hero-section::before, .page-hero::before { content:""; position:absolute; inset:-12% -10% auto auto; width:44rem; height:44rem; border-radius:50%; background:radial-gradient(circle, rgba(177,18,38,.16), transparent 68%); pointer-events:none; filter: blur(4px); }
.hero-badge, .section-label { box-shadow: 0 12px 30px rgba(177,18,38,.13); }
.cookie-banner { z-index: 1080; box-shadow: 0 -18px 54px rgba(17,24,39,.16); border-top: 1px solid rgba(255,255,255,.16); }
.cookie-banner a { color: #fff; text-decoration: underline; font-weight: 800; }
.newsletter-privacy { color: rgba(255,255,255,.76); font-size: .78rem; line-height: 1.45; }
.newsletter-privacy a { color: #fff; text-decoration: underline; font-weight: 800; }
.newsletter-privacy .form-check-input { margin-top: .22rem; border-color: rgba(255,255,255,.45); background-color: transparent; }
.newsletter-privacy .form-check-input:checked { background-color: var(--wwn-final-red); border-color: var(--wwn-final-red); }
.form-control.is-invalid, .form-select.is-invalid, textarea.is-invalid, .form-check-input.is-invalid { border-color: #dc3545 !important; box-shadow: 0 0 0 .18rem rgba(220, 53, 69, .14) !important; }
.legal-content { background:#fff; border:1px solid rgba(177,18,38,.10); border-radius:28px; padding:clamp(1.25rem, 4vw, 3rem); box-shadow: var(--wwn-final-shadow); }
.legal-content h2 { margin-top: 2.3rem; padding-top: 1.2rem; border-top: 1px solid rgba(177,18,38,.12); color: var(--wwn-final-red-dark); font-weight: 950; }
.legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-content h3 { color: #2a2f3b; font-weight: 900; margin-top: 1.4rem; }
.legal-content table { font-size: .95rem; }
.legal-alert { border:1px solid rgba(177,18,38,.22); background: linear-gradient(135deg, #fff2f4, #fff); border-radius:20px; padding:1rem 1.1rem; margin:1rem 0 1.5rem; }
.legal-alert strong { color: var(--wwn-final-red-dark); }
.level-test-section { scroll-margin-top: 7rem; }
.level-test-card { position: relative; overflow: hidden; }
.level-test-card::after { content:""; position:absolute; right:-5rem; bottom:-5rem; width:16rem; height:16rem; border-radius:50%; background:radial-gradient(circle, rgba(177,18,38,.12), transparent 70%); pointer-events:none; }
.level-badge-result { display:inline-flex; gap:.5rem; align-items:center; background:var(--wwn-final-red); color:#fff; padding:.55rem .9rem; border-radius:999px; font-weight:900; margin-bottom:.85rem; }
.share-toast { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%) translateY(1rem); opacity: 0; pointer-events:none; background:#111827; color:#fff; padding:.75rem 1rem; border-radius:999px; font-weight:800; z-index: 2000; box-shadow:0 14px 40px rgba(0,0,0,.22); transition: opacity .2s ease, transform .2s ease; }
.share-toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
.wwn-reveal { opacity: 0; transform: translateY(22px); transition: opacity .72s ease, transform .72s ease; }
.wwn-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .wwn-reveal { opacity: 1; transform: none; } }
@media (max-width: 991.98px) { .top-bar-grid { gap: .55rem !important; } .navbar-collapse { padding: 1rem 0; } .nav-link { padding: .8rem 1rem !important; border-radius: 14px; } .hero-title, .page-hero h1 { letter-spacing: -.045em; } .legal-content { border-radius: 22px; } }
@media (max-width: 767.98px) { .section-padding { padding-top: 4rem !important; padding-bottom: 4rem !important; } .hero-section, .page-hero { min-height: auto; padding-top: 4.25rem; padding-bottom: 4.25rem; } .btn { width: 100%; justify-content: center; } .hero-cta, .cta-buttons, .level-test-actions { display: grid !important; grid-template-columns: 1fr; gap: .8rem !important; } .newsletter-form .input-group { border-radius: 18px !important; } .newsletter-form .input-group .form-control, .newsletter-form .input-group .btn { border-radius: 0 !important; } .cookie-banner .btn { width: auto; } .table-responsive { border-radius: 16px; } }
[data-theme="dark"] .legal-content { background:#1f1116; border-color:rgba(255,255,255,.10); color:#f9fafb; }
[data-theme="dark"] .legal-alert { background:linear-gradient(135deg, rgba(177,18,38,.20), rgba(255,255,255,.04)); border-color:rgba(255,255,255,.12); }


/* =========================================================
   WWN Final V2 — Layout stability, premium red-white look
   ========================================================= */
:root {
  --wwn-red: #b00020;
  --wwn-red-700: #8d001a;
  --wwn-red-50: #fff1f3;
  --wwn-radius-lg: 30px;
  --wwn-radius-md: 20px;
  --wwn-focus: 0 0 0 .22rem rgba(176, 0, 32, .18);
}
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(176,0,32,.055), transparent 32rem),
    linear-gradient(180deg, #fff 0%, #fff 62%, #fff7f8 100%);
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}
a { text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  outline: 0 !important;
  box-shadow: var(--wwn-focus) !important;
  border-color: rgba(176,0,32,.55) !important;
}
img { max-width: 100%; height: auto; }
.site-header, header.site-header {
  backdrop-filter: saturate(165%) blur(16px);
  -webkit-backdrop-filter: saturate(165%) blur(16px);
  border-bottom: 1px solid rgba(176,0,32,.10);
}
.navbar .nav-link.active, .navbar .nav-link:hover {
  color: var(--wwn-red) !important;
  background: rgba(176,0,32,.06);
}
.btn-primary, .btn-cta, .hero-cta .btn:first-child {
  background: linear-gradient(135deg, var(--wwn-red), #d01835) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(176,0,32,.24);
}
.btn-outline-primary, .btn-outline-danger {
  color: var(--wwn-red) !important;
  border-color: rgba(176,0,32,.38) !important;
  background: #fff !important;
}
.btn-outline-primary:hover, .btn-outline-danger:hover {
  color: #fff !important;
  background: var(--wwn-red) !important;
  border-color: var(--wwn-red) !important;
}
.hero-section, .page-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(176,0,32,.18), transparent 28rem),
    linear-gradient(135deg, #fff 0%, #fff5f6 55%, #ffffff 100%) !important;
}
.hero-section::after, .page-hero::after {
  content:"";
  position:absolute;
  left:-7rem;
  bottom:-10rem;
  width:24rem;
  height:24rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(176,0,32,.10), transparent 70%);
  pointer-events:none;
}
.hero-image, .hero-visual, .hero-card, .level-test-card, .course-card, .feature-box, .testimonial-card, .blog-card, .location-card, .process-step, .info-card { border-radius: var(--wwn-radius-lg) !important; }
.course-card, .feature-box, .testimonial-card, .blog-card, .location-card, .process-step, .level-test-card, .legal-content {
  border: 1px solid rgba(176,0,32,.12) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 20px 54px rgba(18, 24, 38, .08) !important;
}
.blog-card img, .course-card img, .team-card img, .article-hero img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; }
.section-label, .hero-badge, .badge-soft, .level-badge-result { background: var(--wwn-red-50) !important; color: var(--wwn-red-700) !important; border: 1px solid rgba(176,0,32,.16); }
.level-badge-result { background: var(--wwn-red) !important; color:#fff !important; }
.level-test-card .progress, .progress { height: .72rem; border-radius: 999px; background: #ffe5e9; overflow: hidden; }
.level-test-card .progress-bar, .progress-bar { background: linear-gradient(90deg, var(--wwn-red), #e12843) !important; }
.level-option { cursor: pointer; border-radius: 18px !important; border: 1px solid rgba(176,0,32,.12) !important; background: #fff; }
.level-option:hover, .level-option.is-selected { border-color: rgba(176,0,32,.48) !important; background: #fff7f8; }
.cookie-banner { background: linear-gradient(135deg, #7c0017, #b00020) !important; color: #fff; }
.footer, footer, .site-footer { background: linear-gradient(135deg, #18050a, #4c0010 55%, #8d001a) !important; }
.footer a, footer a, .site-footer a { transition: color .2s ease, opacity .2s ease; }
.footer a:hover, footer a:hover, .site-footer a:hover { opacity: .82; }
.legal-content p, .legal-content li { line-height: 1.78; }
.legal-content ul { padding-left: 1.25rem; }
@media (min-width: 992px) {
  .navbar .nav-link { margin-inline: .08rem; }
  .hero-section, .page-hero { padding-top: clamp(6rem, 8vw, 9rem); padding-bottom: clamp(5rem, 7vw, 8rem); }
}
@media (max-width: 575.98px) {
  body { font-size: 16px; }
  .hero-title, .page-hero h1 { font-size: clamp(2.05rem, 12vw, 3.2rem) !important; line-height: 1.04; }
  .section-title { font-size: clamp(1.7rem, 9vw, 2.5rem) !important; }
  .top-bar, .top-header { font-size: .78rem; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  .course-card, .feature-box, .testimonial-card, .blog-card, .location-card, .process-step, .level-test-card, .legal-content { border-radius: 22px !important; }
  .cookie-banner { border-radius: 22px 22px 0 0; }
}


/* =========================================================
   WWN Final V3 — mobile action bar, language switch, motion
   ========================================================= */
:root {
  --wwn-glass-bg: rgba(255,255,255,.82);
  --wwn-glass-line: rgba(176,0,32,.16);
  --wwn-mobile-bar-height: 76px;
}
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 1200;
  pointer-events: none;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #b00020, #e12843, #ff7b90);
  box-shadow: 0 0 16px rgba(176,0,32,.36);
}
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  padding: .22rem;
  border: 1px solid rgba(176,0,32,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 28px rgba(17,24,39,.07);
}
.language-switch__btn {
  min-width: 38px;
  height: 34px;
  padding: 0 .58rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4b5563;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .02em;
  line-height: 1;
}
.language-switch__btn:hover,
.language-switch__btn:focus-visible,
.language-switch__btn.is-active,
.language-switch__btn[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, #8d001a, #d01835);
  box-shadow: 0 10px 26px rgba(176,0,32,.24);
}
.language-switch--mobile { transform: scale(.94); transform-origin: right center; }
#google_translate_element,
.goog-te-banner-frame,
.goog-te-gadget,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
  display: none !important;
  visibility: hidden !important;
}
body { top: 0 !important; }
html.translated-ltr body, html.translated-rtl body { top: 0 !important; }
.mobile-action-bar {
  display: none;
}
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(var(--wwn-mobile-bar-height) + env(safe-area-inset-bottom, 0px) + .85rem);
  }
  .whatsapp-float {
    display: none !important;
  }
  .mobile-action-bar {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(.72rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(430px, calc(100% - 1.1rem));
    min-height: var(--wwn-mobile-bar-height);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
    padding: .48rem;
    z-index: 1048;
    border: 1px solid var(--wwn-glass-line);
    border-radius: 28px;
    background: var(--wwn-glass-bg);
    box-shadow: 0 22px 60px rgba(17,24,39,.18), 0 4px 16px rgba(176,0,32,.08);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
  }
  .mobile-action-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    border-radius: 22px;
    padding: .52rem .28rem;
    color: #741022;
    font-weight: 900;
    font-size: .73rem;
    letter-spacing: -.01em;
    line-height: 1.1;
    text-decoration: none !important;
    background: rgba(255,255,255,.52);
  }
  .mobile-action-item i {
    width: 2.05rem;
    height: 2.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #8d001a, #d01835);
    box-shadow: 0 10px 24px rgba(176,0,32,.24);
    font-size: 1.05rem;
  }
  .mobile-action-item:hover,
  .mobile-action-item:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #8d001a, #d01835);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(176,0,32,.20);
  }
  .mobile-action-item:hover i,
  .mobile-action-item:focus-visible i {
    color: #8d001a;
    background: #fff;
  }
  .mobile-action-whatsapp i { background: linear-gradient(135deg, #128c7e, #25d366); }
  .cookie-banner.show { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .share-toast { bottom: calc(var(--wwn-mobile-bar-height) + 1.35rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
  .mobile-action-bar { display: none !important; }
}
@media (max-width: 420px) {
  .language-switch__btn { min-width: 32px; height: 31px; padding-inline: .42rem; font-size: .72rem; }
  .navbar-brand img, .site-logo { max-width: 134px; }
  .mobile-action-bar { border-radius: 24px; width: calc(100% - .75rem); }
}
.premium-lift,
.hero-card,
.course-card,
.feature-box,
.blog-card,
.testimonial-card,
.location-card,
.process-step,
.level-test-card {
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .hero-card:hover,
  .level-test-card:hover {
    transform: translateY(-5px) scale(1.004);
  }
}
@media print {
  .mobile-action-bar, .scroll-progress, .language-switch { display: none !important; }
}

.floating-language-switch { position: fixed; top: .75rem; right: .75rem; z-index: 1055; }
@media (max-width: 575.98px) { .floating-language-switch { top: .55rem; right: .55rem; transform: scale(.92); transform-origin: top right; } }
@media print { .floating-language-switch { display: none !important; } }


/* Final legal page polish */
.legal-content .legal-table th {
  width: 32%;
  min-width: 180px;
  background: rgba(185, 28, 28, 0.06);
  color: var(--wwn-dark, #111827);
  font-weight: 800;
}
.legal-content .legal-alert-success {
  border-left: 4px solid #16a34a;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.10), rgba(255,255,255,0.92));
}
@media (max-width: 575.98px) {
  .legal-content .legal-table th,
  .legal-content .legal-table td {
    display: block;
    width: 100%;
  }
  .legal-content .legal-table th {
    border-bottom: 0;
  }
}


/* ---------- Privacy-first Google Maps consent card ---------- */
.wwn-map-consent {
  min-height: var(--wwn-map-height, 320px);
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(177,18,38,.15);
  background:
    radial-gradient(circle at 20% 20%, rgba(177,18,38,.12), transparent 34%),
    linear-gradient(135deg, #fff7f8, #ffffff 58%, #f8fafc);
  box-shadow: 0 18px 46px rgba(17,24,39,.10);
  display: grid;
  place-items: center;
  position: relative;
}
.wwn-map-consent::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(177,18,38,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177,18,38,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.18));
  pointer-events: none;
}
.wwn-map-consent__box {
  position: relative;
  z-index: 1;
  width: min(92%, 520px);
  text-align: center;
  padding: clamp(1.4rem, 4vw, 2.35rem);
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 18px 45px rgba(17,24,39,.10);
}
.wwn-map-consent__box > i {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #8d001a, #d01835);
  box-shadow: 0 14px 30px rgba(176,0,32,.22);
  font-size: 1.45rem;
  margin-bottom: .75rem;
}
.wwn-map-consent__box strong {
  display: block;
  color: #151922;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  letter-spacing: -.02em;
  margin-bottom: .4rem;
}
.wwn-map-consent__box p {
  margin: 0 auto .95rem;
  color: #5c667a;
  max-width: 42rem;
}
.wwn-map-consent__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .65rem;
}
.wwn-map-consent iframe {
  width: 100%;
  height: var(--wwn-map-height, 320px);
  display: block;
  border: 0;
}
[data-theme="dark"] .wwn-map-consent {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(135deg, #191b22, #101218);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .wwn-map-consent__box {
  background: rgba(23,25,34,.86);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .wwn-map-consent__box strong { color: #fff; }
[data-theme="dark"] .wwn-map-consent__box p { color: rgba(255,255,255,.74); }
@media (max-width: 575.98px) {
  .wwn-map-consent {
    min-height: 300px;
    border-radius: 20px;
  }
  .wwn-map-consent__box {
    padding: 1.25rem;
  }
}

/* V6 form readiness and accessibility polish */
.wwn-form [type="submit"]:disabled,
.anmeldung-form [type="submit"]:disabled,
.newsletter-form [type="submit"]:disabled {
  cursor: not-allowed;
  opacity: .72;
  filter: grayscale(.15);
}
.csrf-status-message {
  border: 1px solid rgba(220, 38, 38, .18);
  border-radius: 16px;
  font-weight: 700;
}