/* =========================================================
   WWN Bildungsinstitut - Professional Red/White Redesign
   Added by ChatGPT: preserves existing content, SEO, forms,
   cookies and image paths while improving readability.
   ========================================================= */
:root {
  --wwn-primary: #b11226;
  --wwn-primary-dark: #790919;
  --wwn-primary-light: #d51f3b;
  --wwn-secondary: #f4b23a;
  --wwn-secondary-light: #ffd166;
  --wwn-accent: #e11d48;
  --wwn-success: #15803d;
  --wwn-danger: #b11226;
  --wwn-white: #ffffff;
  --wwn-dark: #111827;
  --wwn-gray-50: #fff7f7;
  --wwn-gray-100: #feecec;
  --wwn-gray-200: #f8d5d8;
  --wwn-gray-300: #f1aeb6;
  --wwn-gray-400: #d97984;
  --wwn-gray-500: #6b7280;
  --wwn-gray-600: #4b5563;
  --wwn-gray-700: #374151;
  --wwn-gray-800: #1f2937;
  --wwn-gray-900: #111827;
  --gradient-primary: linear-gradient(135deg, #b11226 0%, #d51f3b 54%, #790919 100%);
  --gradient-secondary: linear-gradient(135deg, #ffffff 0%, #fff4f4 100%);
  --gradient-dark: linear-gradient(135deg, #790919 0%, #111827 100%);
  --gradient-hero: radial-gradient(circle at 85% 20%, rgba(255,255,255,.22), transparent 28%), linear-gradient(135deg, rgba(121,9,25,.96) 0%, rgba(177,18,38,.94) 52%, rgba(70,7,17,.95) 100%);
  --gradient-cta: linear-gradient(135deg, #ffffff 0%, #fff2f3 100%);
  --shadow-sm: 0 1px 2px rgba(17,24,39,.06);
  --shadow: 0 8px 24px rgba(17,24,39,.08);
  --shadow-md: 0 12px 32px rgba(17,24,39,.10);
  --shadow-lg: 0 18px 48px rgba(177,18,38,.14);
  --shadow-xl: 0 28px 70px rgba(17,24,39,.20);
  --shadow-gold: 0 16px 40px rgba(177,18,38,.18);
  --shadow-primary: 0 18px 44px rgba(177,18,38,.20);
  --radius-sm: .45rem;
  --radius: .75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2.25rem;
  --radius-full: 999px;
}
html { text-rendering: optimizeLegibility; }
body {
  color: #252b37;
  background: #fff;
  font-size: 1rem;
  line-height: 1.72;
  letter-spacing: -0.005em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at top left, rgba(177,18,38,.07), transparent 30rem),
    radial-gradient(circle at bottom right, rgba(177,18,38,.05), transparent 24rem);
}
a { color: #a10e22; }
a:hover { color: #790919; }
::selection { background: rgba(177,18,38,.20); color: #790919; }
.container { max-width: 1180px; }
.skip-link { background: #b11226 !important; color: #fff !important; }

/* Header / Navigation */
.top-bar {
  background: #790919 !important;
  color: rgba(255,255,255,.95) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
.top-bar a, .top-bar span { color: rgba(255,255,255,.96) !important; }
.top-bar i { color: #fff !important; opacity: .92; }
.site-header { box-shadow: 0 10px 34px rgba(17,24,39,.07); }
.navbar {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(177,18,38,.10) !important;
}
.navbar.scrolled, .site-header.scrolled .navbar {
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 12px 40px rgba(177,18,38,.10) !important;
}
.navbar-brand img.site-logo { max-height: 54px; object-fit: contain; }
.nav-link {
  color: #2f3643 !important;
  font-weight: 700 !important;
  border-radius: 999px;
  padding: .62rem .84rem !important;
  position: relative;
}
.nav-link:hover, .nav-link.active {
  color: #b11226 !important;
  background: rgba(177,18,38,.08);
}
.navbar-toggler, .theme-toggle {
  border: 1px solid rgba(177,18,38,.16) !important;
  background: #fff7f7 !important;
  color: #b11226 !important;
  box-shadow: none !important;
}
.btn-cta, .btn-cta-gold, .btn-hero-primary, .btn-course, .btn-google-write {
  background: #b11226 !important;
  color: #fff !important;
  border: 1px solid #b11226 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 34px rgba(177,18,38,.22) !important;
}
.btn-cta:hover, .btn-cta-gold:hover, .btn-hero-primary:hover, .btn-course:hover, .btn-google-write:hover {
  background: #790919 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(177,18,38,.28) !important;
}
.btn-hero-outline, .btn-cta-outline, .btn-outline-primary, .btn-google-reviews {
  background: #fff !important;
  color: #b11226 !important;
  border: 1.5px solid rgba(177,18,38,.28) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.btn-hero-outline:hover, .btn-cta-outline:hover, .btn-outline-primary:hover, .btn-google-reviews:hover {
  background: #b11226 !important;
  color: #fff !important;
  border-color: #b11226 !important;
}
.btn-warning { background: #b11226 !important; border-color: #b11226 !important; color: #fff !important; }
.btn-outline-light { border-color: rgba(255,255,255,.75) !important; color: #fff !important; }

/* Hero */
.hero-section, .page-hero {
  background: var(--gradient-hero) !important;
  color: #fff !important;
  position: relative;
}
.hero-section::before, .page-hero::before {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.08) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,.08) 25%, transparent 25%) !important;
  background-size: 34px 34px !important;
  opacity: .35 !important;
}
.hero-badge, .section-label, .badge {
  background: rgba(177,18,38,.10) !important;
  color: #b11226 !important;
  border: 1px solid rgba(177,18,38,.18) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}
.hero-section .hero-badge, .page-hero .hero-badge, .oif-section .section-label, .cta-section .section-label {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.24) !important;
}
.hero-title, .page-hero h1 {
  letter-spacing: -0.055em !important;
  text-wrap: balance;
  color: #fff !important;
}
.hero-title .highlight, .page-hero .highlight, .highlight {
  color: #fff !important;
  background: linear-gradient(135deg, #fff, #ffd6dc) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.hero-subtitle, .page-hero p { color: rgba(255,255,255,.92) !important; }
.hero-image-wrapper, .hero-image-mobile, .story-bridge-figure, .story-success-figure, .map-wrapper {
  border-radius: 28px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 28px 70px rgba(17,24,39,.26) !important;
}
.hero-floating-stat {
  border: 1px solid rgba(177,18,38,.12) !important;
  box-shadow: 0 18px 46px rgba(17,24,39,.14) !important;
}
.hero-floating-stat i, .hero-trust-badge i { color: #fff !important; }
.hero-floating-stat strong { color: #b11226 !important; }
.hero-trust-badge {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

/* Sections */
.section-padding { padding: clamp(4rem, 8vw, 7rem) 0 !important; }
.section-title {
  color: #111827 !important;
  font-weight: 900 !important;
  line-height: 1.09 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}
.section-subtitle {
  color: #4b5563 !important;
  max-width: 760px;
  font-size: clamp(1rem, 1.35vw, 1.17rem);
}
section[style*="var(--wwn-gray-50)"], .trust-bar, .faq-section { background: #fff7f7 !important; }
.story-bridge-section, .story-success-section, .nachhilfe-teaser-section { background: #fff !important; }
.trust-item, .feature-box, .course-card, .blog-card, .testimonial-card, .process-step, .card, .accordion-item, .contact-card, .office-card, .legal-card, .author-bio, .oif-card {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(177,18,38,.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 42px rgba(17,24,39,.07) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.trust-item:hover, .feature-box:hover, .course-card:hover, .blog-card:hover, .testimonial-card:hover, .process-step:hover, .card:hover, .oif-card:hover {
  transform: translateY(-4px);
  border-color: rgba(177,18,38,.22) !important;
  box-shadow: 0 24px 60px rgba(177,18,38,.12) !important;
}
.trust-icon, .feature-icon-wrap, .oif-icon, .step-number {
  background: #fff2f3 !important;
  color: #b11226 !important;
  border: 1px solid rgba(177,18,38,.12) !important;
}
.trust-number, .level, .level-name, .course-price, .footer-google-link, .text-primary {
  color: #b11226 !important;
}
.course-card-header { background: linear-gradient(135deg, #b11226, #790919) !important; color: #fff !important; }
.course-card-header .level, .course-card-header .level-name { color: #fff !important; }
.course-features i, .bi-check-circle-fill, .text-success { color: #15803d !important; }
.blog-card-img, .blog-card-visual { background: linear-gradient(135deg, #b11226, #790919) !important; }
.blog-tag, .blog-tag-tr {
  background: #fff2f3 !important;
  color: #b11226 !important;
  border: 1px solid rgba(177,18,38,.16) !important;
}
.blog-read-more { color: #b11226 !important; font-weight: 800; }
.accordion-button { font-weight: 800 !important; color: #111827 !important; border-radius: 18px !important; }
.accordion-button:not(.collapsed) { color: #b11226 !important; background: #fff2f3 !important; box-shadow: none !important; }
.accordion-button:focus { border-color: rgba(177,18,38,.35) !important; box-shadow: 0 0 0 .25rem rgba(177,18,38,.12) !important; }

/* Forms */
.form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="tel"], select {
  border: 1.5px solid rgba(177,18,38,.16) !important;
  border-radius: 16px !important;
  padding: .84rem 1rem !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus, textarea:focus, input:focus, select:focus {
  border-color: #b11226 !important;
  box-shadow: 0 0 0 .25rem rgba(177,18,38,.11) !important;
}
.form-label { color: #111827 !important; font-weight: 800 !important; }
.form-check-input:checked { background-color: #b11226 !important; border-color: #b11226 !important; }

/* CTA / SZ section */
.cta-section, .oif-section {
  background: linear-gradient(135deg, #790919 0%, #b11226 58%, #520612 100%) !important;
  color: #fff !important;
}
.cta-section .section-title, .oif-section .section-title, .cta-section h2, .oif-section h2 { color: #fff !important; }
.oif-section p, .cta-section p { color: rgba(255,255,255,.86) !important; }
.oif-section .oif-card { background: rgba(255,255,255,.97) !important; color: #111827 !important; }
.oif-section .oif-card p { color: #4b5563 !important; }
.oif-section .oif-card h4 { color: #111827 !important; font-weight: 900; }
.oif-section .oif-card i { font-size: 1.9rem; }

/* Level test */
.level-test-section {
  background: linear-gradient(180deg, #fff 0%, #fff7f7 100%);
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  position: relative;
}
.level-test-card {
  background: #fff;
  border: 1px solid rgba(177,18,38,.12);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(177,18,38,.12);
  overflow: hidden;
}
.level-test-intro {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(135deg, #b11226, #790919);
  color: #fff;
  height: 100%;
}
.level-test-intro .section-label { color: #fff !important; background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.25) !important; }
.level-test-intro h2 { font-weight: 900; letter-spacing: -.04em; line-height: 1.1; margin: 1rem 0; }
.level-test-intro p, .level-test-note { color: rgba(255,255,255,.88); }
.level-test-benefits { display: grid; gap: .75rem; margin-top: 1.5rem; }
.level-test-benefits span { display: flex; gap: .6rem; align-items: center; font-weight: 700; }
.level-test-benefits i { color: #fff; }
.level-test-form { padding: clamp(1.25rem, 4vw, 2.5rem); }
.level-test-progress { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; font-weight: 800; color: #111827; }
.level-test-bar { height: 10px; border-radius: 999px; background: #fee2e5; overflow: hidden; margin-bottom: 1.5rem; }
.level-test-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #b11226, #e11d48); transition: width .25s ease; }
.level-question { margin-bottom: 1.35rem; }
.level-question h3 { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 900; line-height: 1.28; color: #111827; margin-bottom: 1rem; }
.level-options { display: grid; gap: .75rem; }
.level-option {
  display: flex; align-items: flex-start; gap: .8rem;
  border: 1.5px solid rgba(177,18,38,.14);
  border-radius: 18px;
  padding: .9rem 1rem;
  cursor: pointer;
  background: #fff;
  transition: all .2s ease;
  color: #252b37;
}
.level-option:hover { border-color: rgba(177,18,38,.34); background: #fff7f7; transform: translateY(-1px); }
.level-option input { margin-top: .25rem; accent-color: #b11226; }
.level-option.is-selected { border-color: #b11226; background: #fff2f3; box-shadow: 0 12px 32px rgba(177,18,38,.10); }
.level-test-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-top: 1.25rem; }
.level-test-error { color: #b11226; font-weight: 800; display: none; }
.level-test-result {
  display: none;
  margin-top: 1.25rem;
  padding: 1.35rem;
  border-radius: 22px;
  border: 1px solid rgba(177,18,38,.16);
  background: #fff7f7;
}
.level-test-result.is-visible { display: block; }
.level-badge-result {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: #b11226;
  color: #fff;
  font-weight: 900;
  margin-bottom: .75rem;
}
.level-test-result h3 { font-weight: 900; color: #111827; margin-bottom: .45rem; }
.level-test-result p { margin-bottom: .85rem; color: #4b5563; }
.level-test-result .btn { margin-right: .5rem; margin-bottom: .5rem; }

/* Footer / cookie / floating */
.site-footer {
  background: linear-gradient(135deg, #790919 0%, #111827 100%) !important;
  color: rgba(255,255,255,.80) !important;
}
.site-footer::before { background: linear-gradient(90deg, #fff, #e11d48, #fff) !important; opacity: .8; }
.footer-heading { color: #fff !important; }
.footer-heading::after { background: #fff !important; }
.footer-links a, .footer-contact-item, .footer-contact-item a, .footer-brand p { color: rgba(255,255,255,.78) !important; }
.footer-links a:hover, .footer-contact-item a:hover { color: #fff !important; }
.social-links a { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.15); }
.social-links a:hover { background: #fff !important; color: #b11226 !important; }
.sz-badge-footer { background: rgba(255,255,255,.12) !important; color: #fff !important; border-color: rgba(255,255,255,.18) !important; }
.cookie-banner {
  background: rgba(17,24,39,.96) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 70px rgba(17,24,39,.35) !important;
}
.cookie-banner a { color: #fff !important; text-decoration: underline; }
.whatsapp-float { background: #25D366 !important; box-shadow: 0 18px 48px rgba(37,211,102,.28) !important; }
#backToTopBtn { background: #b11226 !important; color: #fff !important; box-shadow: 0 18px 44px rgba(177,18,38,.24) !important; }

/* Blog / article readability */
.blog-article, article, .legal-content, .content-wrapper {
  font-size: 1.04rem;
  line-height: 1.82;
}
.blog-article h2, article h2, .legal-content h2 { color: #111827 !important; font-weight: 900 !important; letter-spacing: -.02em; margin-top: 2rem; }
.blog-article p, article p, .legal-content p, .accordion-body { color: #3f4754 !important; }
.breadcrumb-section { background: #fff7f7 !important; border-bottom: 1px solid rgba(177,18,38,.08); }
.breadcrumb a { color: #b11226 !important; font-weight: 800; }

/* Accessibility and responsive refinements */
:focus-visible { outline: 3px solid rgba(177,18,38,.38) !important; outline-offset: 3px; }
@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: .75rem;
    padding: 1rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(177,18,38,.10);
    box-shadow: 0 18px 44px rgba(17,24,39,.10);
  }
  .nav-link { padding: .78rem 1rem !important; }
  .hero-section { padding-top: 4.25rem !important; }
  .hero-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .level-test-intro { min-height: auto; }
}
@media (max-width: 575.98px) {
  body { font-size: .98rem; }
  .top-bar-grid { gap: .25rem !important; }
  .section-padding, .level-test-section { padding: 3.25rem 0 !important; }
  .section-title { font-size: clamp(1.85rem, 9vw, 2.45rem) !important; }
  .hero-cta-group, .level-test-actions { flex-direction: column; align-items: stretch; }
  .btn, .btn-cta, .btn-hero-primary, .btn-hero-outline { width: 100%; justify-content: center; }
  .trust-item, .feature-box, .course-card, .blog-card, .testimonial-card, .oif-card { border-radius: 20px !important; }
  .level-test-form, .level-test-intro { padding: 1.25rem; }
  .cookie-banner { left: .75rem !important; right: .75rem !important; bottom: .75rem !important; width: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Dark mode remains readable but follows red identity */
[data-theme="dark"] body { background: #12060a !important; color: #f9fafb !important; }
[data-theme="dark"] .navbar { background: rgba(18,6,10,.96) !important; border-color: rgba(255,255,255,.10) !important; }
[data-theme="dark"] .nav-link { color: rgba(255,255,255,.88) !important; }
[data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: #fff !important; background: rgba(255,255,255,.12); }
[data-theme="dark"] section[style*="var(--wwn-gray-50)"], [data-theme="dark"] .trust-bar, [data-theme="dark"] .faq-section, [data-theme="dark"] .level-test-section { background: #16070c !important; }
[data-theme="dark"] .story-bridge-section, [data-theme="dark"] .story-success-section { background: #12060a !important; }
[data-theme="dark"] .trust-item, [data-theme="dark"] .feature-box, [data-theme="dark"] .course-card, [data-theme="dark"] .blog-card, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .process-step, [data-theme="dark"] .card, [data-theme="dark"] .accordion-item, [data-theme="dark"] .level-test-card, [data-theme="dark"] .level-test-form, [data-theme="dark"] .level-option, [data-theme="dark"] .oif-card {
  background: #1f1116 !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #f9fafb !important;
}
[data-theme="dark"] .section-title, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] .level-question h3 { color: #fff !important; }
[data-theme="dark"] .section-subtitle, [data-theme="dark"] p, [data-theme="dark"] .accordion-body, [data-theme="dark"] .blog-article p { color: rgba(255,255,255,.78) !important; }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] textarea, [data-theme="dark"] input, [data-theme="dark"] select { background: #14090d !important; color: #fff !important; border-color: rgba(255,255,255,.18) !important; }