/* ===== QM-GURU ONLINE AKADEMIE - COMBINED CSS ===== */
/* Generated: 2026-10-31T05:30:55.908Z */

/* ===================================================
   QM-GURU ONLINE AKADEMIE - CSS VARIABLEN
   Änderungen hier = Änderungen überall!
   =================================================== */

:root {
  /* ===== HAUPTFARBEN ===== */
  --color-primary: #2B6CB0;
  --color-secondary: #ED8936;
  --color-accent: #4299E1;
  --color-success: #48BB78;
  --color-error: #E53E3E;
  --color-warning: #ECC94B;

  /* ===== KATEGORIE-FARBEN ===== */
  --color-qm: #2B6CB0;
  --color-um: #38A169;
  --color-datenschutz: #805AD5;
  --color-arbeitssicherheit: #DD6B20;

  /* ===== HINTERGRÜNDE ===== */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7FAFC;
  --color-bg-dark: #1a202c;

  /* ===== TEXT ===== */
  --color-text: #2D3748;
  --color-text-light: #718096;
  --color-text-inverse: #FFFFFF;
  --color-border: #E2E8F0;

  /* ===== TYPOGRAFIE ===== */
  --font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --line-height: 1.6;
  --line-height-tight: 1.3;

  /* ===== ABSTÄNDE ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ===== RUNDUNGEN ===== */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===== SCHATTEN ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.2);

  /* ===== LAYOUT ===== */
  --max-width: 1200px;
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --header-height: 73px;
  --sidebar-width: 280px;

  /* ===== ÜBERGÄNGE ===== */
  --transition-fast: 0.15s ease;
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ===== Z-INDEX ===== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}

/* ===== RESET ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* ===== UTILITY CLASSES ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-light { color: var(--color-text-light); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }

.bg-primary { background: var(--color-primary); }
.bg-secondary { background: var(--color-secondary); }
.bg-alt { background: var(--color-bg-alt); }

.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* ===================================================
   QM-GURU ONLINE AKADEMIE - KOMPONENTEN
   =================================================== */

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-primary:hover {
  background: #2c5aa0;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-cta {
  background: linear-gradient(135deg, var(--color-secondary), #DD6B20);
  color: var(--color-text-inverse);
  padding: var(--spacing-sm) var(--spacing-lg);
}

.btn-cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-base);
}

/* ===== TOP-BAR ===== */
.top-bar {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-lg);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.top-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-weight: bold;
  font-size: var(--font-size-lg);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: var(--line-height-tight);
}

.logo-name {
  font-weight: 700;
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}

.logo-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.top-bar-links {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.hero-content {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-text-inverse);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-lg);
  backdrop-filter: blur(4px);
}

.hero h1 {
  color: var(--color-text-inverse);
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-tight);
}

.hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2xl);
  flex-wrap: wrap;
}

.hero-stat {
  text-align: center;
}

.hero-stat-value {
  display: block;
  color: var(--color-text-inverse);
  font-size: var(--font-size-3xl);
  font-weight: 700;
}

.hero-stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
}

/* ===== KATEGORIE NAVIGATION ===== */
.category-nav {
  background: var(--color-bg);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: var(--header-height);
  z-index: calc(var(--z-sticky) - 1);
}

.category-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.category-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.category-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.category-btn.active {
  color: var(--color-text-inverse);
}

.category-btn[data-category="all"].active { background: var(--color-primary); }
.category-btn[data-category="qm"].active { background: var(--color-qm); }
.category-btn[data-category="um"].active { background: var(--color-um); }
.category-btn[data-category="datenschutz"].active { background: var(--color-datenschutz); }
.category-btn[data-category="arbeitssicherheit"].active { background: var(--color-arbeitssicherheit); }

.category-btn .count {
  background: rgba(0, 0, 0, 0.15);
  padding: 2px var(--spacing-sm);
  border-radius: 10px;
  font-size: var(--font-size-xs);
  margin-left: var(--spacing-sm);
}

.category-btn.active .count {
  background: rgba(255, 255, 255, 0.3);
}

/* ===== KURS-KARTEN ===== */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--spacing-lg);
}

.course-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-slow);
  display: flex;
  flex-direction: column;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}

.course-card.coming-soon {
  opacity: 0.7;
}

.course-card.coming-soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
}

.course-header {
  padding: var(--spacing-lg);
  position: relative;
}

.course-header[data-category="qm"] { border-top: 4px solid var(--color-qm); }
.course-header[data-category="um"] { border-top: 4px solid var(--color-um); }
.course-header[data-category="datenschutz"] { border-top: 4px solid var(--color-datenschutz); }
.course-header[data-category="arbeitssicherheit"] { border-top: 4px solid var(--color-arbeitssicherheit); }

.course-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.course-badge.qm { background: rgba(43, 108, 176, 0.1); color: var(--color-qm); }
.course-badge.ki-training { background: rgba(128, 90, 213, 0.12); color: #6b46c1; }
.category-btn[data-category="ki-training"].active { background: #805ad5; }
.course-header[data-category="ki-training"] { border-top: 4px solid #805ad5; }
.course-hero[data-category="ki-training"] { border-left: 6px solid #805ad5; }
.bezahlt-hinweis { font-size: 0.9rem; color: var(--color-text-light); margin: 0.6rem 0 0; }
/* „Jetzt am echten Fall üben“ – Verweis auf die KI-Trainings */
.ueben-box { margin: 2rem 0; padding: 1.2rem 1.4rem; border: 1px solid rgba(128, 90, 213, 0.35); border-left: 6px solid #805ad5; border-radius: 10px; background: rgba(128, 90, 213, 0.06); }
.ueben-titel { font-weight: 700; margin: 0 0 0.6rem; }
.ueben-box ul { list-style: none; margin: 0; padding: 0; }
.ueben-box li { margin: 0.5rem 0; }
.ueben-box li a { font-weight: 600; }
.ueben-preis { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #805ad5; color: #fff; font-size: 0.78rem; font-weight: 600; }
.ueben-text { display: block; font-size: 0.92rem; color: var(--color-text-light); }
.ueben-fuss { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--color-text-light); }
.course-badge.um { background: rgba(56, 161, 105, 0.1); color: var(--color-um); }
.course-badge.datenschutz { background: rgba(128, 90, 213, 0.1); color: var(--color-datenschutz); }
.course-badge.arbeitssicherheit { background: rgba(221, 107, 32, 0.1); color: var(--color-arbeitssicherheit); }
.course-badge.coming-soon-badge { background: var(--color-bg-alt); color: var(--color-text-light); }

.course-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-tight);
}

.course-subtitle {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.course-body {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-meta {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.course-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.course-features {
  list-style: none;
  margin-bottom: var(--spacing-lg);
  flex: 1;
}

.course-features li {
  padding: 6px 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.course-features li::before {
  content: '✓';
  color: var(--color-success);
  font-weight: bold;
  flex-shrink: 0;
}

.course-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-price {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.course-price strong {
  font-size: var(--font-size-xl);
  color: var(--color-text);
}

.course-cta {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all var(--transition);
}

.course-cta.available {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.course-cta.available:hover {
  background: #2c5aa0;
}

.course-cta.coming-soon {
  background: var(--color-bg);
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  cursor: default;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer-col h4 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-md);
  color: var(--color-text-inverse);
}

.footer-col li {
  margin-bottom: var(--spacing-sm);
}

.footer-col a {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--color-text-inverse);
}

.footer-col .highlight {
  color: var(--color-secondary);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.footer-legal {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-xs);
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.6);
  margin-left: var(--spacing-md);
}

.footer-legal a:hover {
  color: var(--color-text-inverse);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .top-bar-inner {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .hero h1 {
    font-size: var(--font-size-2xl);
  }

  .hero p {
    font-size: var(--font-size-base);
  }

  .hero-stats {
    gap: var(--spacing-lg);
  }

  .category-nav {
    top: 0;
    position: relative;
  }

  .courses-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ===== ANIMATION ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.course-card {
  animation: fadeInUp 0.5s ease forwards;
}

.course-card:nth-child(1) { animation-delay: 0.1s; }
.course-card:nth-child(2) { animation-delay: 0.15s; }
.course-card:nth-child(3) { animation-delay: 0.2s; }
.course-card:nth-child(4) { animation-delay: 0.25s; }
.course-card:nth-child(5) { animation-delay: 0.3s; }
.course-card:nth-child(6) { animation-delay: 0.35s; }


/* ===================================================
   QM-GURU ONLINE AKADEMIE - MAIN STYLES
   Diese Datei importiert alle anderen CSS-Dateien
   =================================================== */

/* ===== SEITEN-SPEZIFISCHE STYLES ===== */

/* Landingpage - Benefits Section */
.benefits-section {
  background: var(--color-bg-alt);
  padding: var(--spacing-3xl) var(--spacing-lg);
}

.benefits-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.benefit-card {
  background: var(--color-bg);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  text-align: center;
  border: 1px solid var(--color-border);
}

.benefit-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto var(--spacing-lg);
}

.benefit-card h3 {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}

.benefit-card p {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* CTA Section */
.cert-cta {
  background: linear-gradient(135deg, var(--color-secondary), #DD6B20);
  padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center;
}

.cert-cta-inner {
  max-width: 800px;
  margin: 0 auto;
}

.cert-cta h2 {
  color: var(--color-text-inverse);
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-md);
}

.cert-cta p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
}

.cert-cta-btn {
  display: inline-block;
  background: var(--color-bg);
  color: var(--color-secondary);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius);
  font-size: var(--font-size-lg);
  font-weight: 600;
  transition: all var(--transition);
}

.cert-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.section-header h2 {
  color: var(--color-primary);
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-sm);
}

.section-header p {
  color: var(--color-text-light);
  font-size: var(--font-size-lg);
}

/* Courses Section */
.courses-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

/* ===================================================
   SEITEN-STYLES: Landingpages, Kategorie-Seiten,
   Für-Unternehmen, Breadcrumb, FAQ, Fakten-Grid
   =================================================== */

.breadcrumb { font-size: var(--font-size-sm); color: var(--color-text-light); margin-bottom: var(--spacing-lg); }
.breadcrumb a { color: var(--color-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; opacity: .6; }
.hero .breadcrumb, .hero .breadcrumb a { color: rgba(255,255,255,.85); }

.course-page-inner { max-width: 860px; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-md) var(--spacing-3xl); }
.course-page h1 { font-size: var(--font-size-3xl); line-height: var(--line-height-tight); margin: var(--spacing-sm) 0; }
.course-page h2 { font-size: var(--font-size-2xl); margin: var(--spacing-2xl) 0 var(--spacing-md); }
.course-page-subtitle { font-size: var(--font-size-lg); color: var(--color-text-light); margin-bottom: var(--spacing-lg); }
.course-hero .course-badge { position: static; display: inline-block; margin-bottom: var(--spacing-sm); }

.course-hero-cta { display: flex; gap: var(--spacing-md); flex-wrap: wrap; margin: var(--spacing-lg) 0; }
.course-hero-cta.bottom { justify-content: center; margin-top: var(--spacing-2xl); }
.course-cta.big { padding: 14px 28px; font-size: var(--font-size-lg); }
.course-cta.secondary { background: var(--color-bg-alt); color: var(--color-primary); border: 1px solid var(--color-border); }
.course-cta.secondary:hover { background: var(--color-border); }
.course-cta.notify { background: var(--color-bg-alt); color: var(--color-text); border: 1px dashed var(--color-text-light); }
.course-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }

.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--spacing-sm); margin: var(--spacing-lg) 0; }
.fact { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--spacing-sm) var(--spacing-md); }
.fact-key { display: block; font-size: var(--font-size-xs); color: var(--color-text-light); text-transform: uppercase; letter-spacing: .04em; }
.fact-val { font-weight: 700; }

.legal-box { background: #EBF4FF; border-left: 4px solid var(--color-primary); border-radius: var(--radius); padding: var(--spacing-lg); margin: var(--spacing-xl) 0; }
.legal-box h2 { margin-top: 0; font-size: var(--font-size-xl); }
.legal-row { margin-bottom: var(--spacing-sm); }
.legal-row strong { display: block; }
.legal-row span { color: var(--color-text-light); font-size: var(--font-size-sm); }

.course-description p { margin-bottom: var(--spacing-md); }
.course-contents ul { padding-left: 1.2em; }
.course-contents li { margin-bottom: 6px; }
.modul-liste { padding-left: 0; list-style: none; counter-reset: modul; }
.modul-liste li { counter-increment: modul; display: grid; grid-template-columns: 2.2em 1fr; gap: 0 var(--spacing-sm); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border); }
.modul-liste li::before { content: counter(modul); font-weight: 700; color: var(--color-primary); grid-row: 1 / span 2; }
.modul-liste li strong { display: block; }
.modul-liste li span { color: var(--color-text-light); font-size: var(--font-size-sm); }
.zielgruppe { color: var(--color-text-light); margin: calc(-1 * var(--spacing-md)) 0 var(--spacing-lg); }
.reihe-box { background: #FFF7E6; border-left: 4px solid var(--color-accent); border-radius: var(--radius); padding: var(--spacing-md) var(--spacing-lg); margin: 0 0 var(--spacing-lg); }
.reihe-box p { margin: 0; }
.reihe-titel { font-weight: 700; }
.reihe-nav { font-size: var(--font-size-sm); margin-top: 4px !important; }
.reihe-nav .demnaechst { color: var(--color-text-light); }
.reihe-liste { padding-left: 0; list-style: none; }
.reihe-teil { display: grid; grid-template-columns: 5em 1fr; gap: var(--spacing-md); padding: var(--spacing-md) 0; border-bottom: 1px solid var(--color-border); }
.reihe-teil h3 { margin: 0 0 4px; }
.reihe-teil p { margin: 0 0 6px; color: var(--color-text-light); }
.reihe-teil .reihe-meta { font-size: var(--font-size-sm); }
.reihe-nr { font-weight: 700; color: var(--color-primary); }
.reihe-teil.coming-soon h3 { color: var(--color-text-light); }
.reihe-teaser { max-width: 900px; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-md); }
.reihe-kompakt { columns: 2; column-gap: var(--spacing-xl); padding-left: 1.4em; }
.reihe-kompakt li { margin-bottom: 6px; break-inside: avoid; }
.reihe-kompakt li.coming-soon { color: var(--color-text-light); }
.reihe-link { text-align: center; margin-top: var(--spacing-lg); }
@media (max-width: 640px) { .reihe-kompakt { columns: 1; } .reihe-teil { grid-template-columns: 1fr; gap: 4px; } }

.faq-section .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: var(--spacing-sm); background: var(--color-bg); }
.faq-item summary { cursor: pointer; font-weight: 700; padding: var(--spacing-md); }
.faq-item p { padding: 0 var(--spacing-md) var(--spacing-md); color: var(--color-text-light); }

.author-box { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin-top: var(--spacing-2xl); }
.author-box h2 { margin-top: 0; font-size: var(--font-size-xl); }

.related-courses ul { padding-left: 1.2em; }

.hero.small { padding: var(--spacing-2xl) var(--spacing-md); }
.hero.small h1 { font-size: var(--font-size-3xl); }

.category-nav .category-btn { text-decoration: none; }

.company-cta .cert-cta-inner { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); }

.course-title a { color: inherit; text-decoration: none; }
.course-title a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .course-page h1 { font-size: var(--font-size-2xl); }
  .top-bar-links .btn { padding: 6px 10px; font-size: var(--font-size-xs); }
}

/* ===================================================
   FÜR UNTERNEHMEN: Preise, Muster-Nachweis, Schritte,
   Formulare, Rechtstexte (ergänzt 25.10.2026)
   =================================================== */
.course-page-inner.narrow { max-width: 680px; }
.company-page h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-xs); }
.company-page .course-hero-cta .course-cta.big { text-align: center; }

/* Preis-Spalten */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); align-items: stretch; }
.price-card { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); }
.price-card.empfohlen { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.price-card h3 { color: var(--color-primary); }
.price-tag { font-size: var(--font-size-3xl); font-weight: 700; line-height: 1.1; }
.price-sub { font-size: var(--font-size-sm); color: var(--color-text-light); margin-bottom: var(--spacing-md); min-height: 2.6em; }
.price-features { flex: 1; margin-bottom: var(--spacing-lg); }
.price-features li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: var(--font-size-sm); }
.price-features li::before { content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); }
.price-card .course-cta { text-align: center; }
.pricing-note { margin-top: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-light); }
.pricing-note a { color: var(--color-primary); }

/* Tabellen (Muster-Sammelnachweis, Unterauftragsverarbeiter) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nachweis-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); margin: var(--spacing-md) 0; background: var(--color-bg); }
.nachweis-table th, .nachweis-table td { border: 1px solid var(--color-border); padding: 8px 10px; text-align: left; vertical-align: top; white-space: nowrap; }
.legal-text .nachweis-table th, .legal-text .nachweis-table td { white-space: normal; }
.nachweis-table th { background: #EBF4FF; color: var(--color-primary); font-weight: 700; }
.nachweis-table tbody tr:nth-child(even) { background: var(--color-bg-alt); }

/* Schritte */
.steps { counter-reset: schritt; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); }
.steps li { counter-increment: schritt; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--spacing-md); display: flex; flex-direction: column; gap: 6px; }
.steps li::before { content: counter(schritt); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-inverse); font-weight: 700; }
.steps li span { font-size: var(--font-size-sm); color: var(--color-text-light); }

/* Formulare */
.form-section { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin-top: var(--spacing-2xl); scroll-margin-top: 90px; }
.form-section h2 { margin-top: 0; }
.akademie-form .form-row { margin-bottom: var(--spacing-md); }
.akademie-form label { display: block; font-weight: 600; font-size: var(--font-size-sm); margin-bottom: 4px; }
.akademie-form input[type=text], .akademie-form input[type=email], .akademie-form select, .akademie-form textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: var(--font-size-base); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.akademie-form input:focus, .akademie-form select:focus, .akademie-form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
.akademie-form small { display: block; font-size: var(--font-size-xs); color: var(--color-text-light); margin-top: 4px; }
.akademie-form .form-row.check label { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; }
.akademie-form .form-row.check input { margin-top: 4px; flex: none; }
.akademie-form .form-row.check a, .form-hinweis a { color: var(--color-primary); text-decoration: underline; }
.akademie-form .form-row.zweispaltig { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-md); }
.form-hinweis { font-size: var(--font-size-xs); color: var(--color-text-light); margin-bottom: var(--spacing-md); }
.akademie-form button.course-cta { border: none; cursor: pointer; width: 100%; }
.akademie-form button[disabled] { opacity: .6; cursor: wait; }
.form-meldung { margin-top: var(--spacing-md); font-size: var(--font-size-sm); }
.form-meldung.erfolg { background: #F0FFF4; border: 1px solid var(--color-success); color: #22543D; padding: var(--spacing-md); border-radius: var(--radius); font-size: var(--font-size-base); }
.form-meldung.fehler { background: #FFF5F5; border: 1px solid var(--color-error); color: #822727; padding: var(--spacing-md); border-radius: var(--radius); }
.form-meldung.warn { background: #FFFAF0; border: 1px solid #C05621; color: #7B341E; padding: var(--spacing-md); border-radius: var(--radius); }
.sprachwechsel { margin-top: var(--spacing-md); }
.akademie-form input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--color-error); }
/* Formular-Layout (Firmenkonto, Bestellung, Fragebogen) */
.form-section { max-width: 760px; margin-left: auto; margin-right: auto; background: var(--color-bg); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.form-intro { color: var(--color-text-light); margin-bottom: var(--spacing-lg); }
.akademie-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md) var(--spacing-lg); }
.akademie-form .form-grid .form-row { margin-bottom: 0; }
.akademie-form label { font-size: var(--font-size-sm); margin-bottom: 6px; color: var(--color-text); }
.akademie-form input[type=text], .akademie-form input[type=email], .akademie-form select, .akademie-form textarea {
  min-height: 46px; padding: 11px 14px; border: 1.5px solid var(--color-border); border-radius: 10px; background: var(--color-bg-alt);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.akademie-form input::placeholder { color: #A0AEC0; }
.akademie-form select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.akademie-form input:hover, .akademie-form select:hover { border-color: #A0AEC0; }
.akademie-form input:focus, .akademie-form select:focus, .akademie-form textarea:focus { outline: none; background: var(--color-bg); border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(49,130,206,.15); }
.akademie-form small { line-height: 1.4; margin-top: 6px; }
.akademie-form .form-row.check { margin: var(--spacing-lg) 0 var(--spacing-md); padding: 14px 16px; background: var(--color-bg-alt); border-radius: 10px; }
.akademie-form .form-row.check label { font-size: var(--font-size-sm); line-height: 1.5; cursor: pointer; margin: 0; }
.akademie-form .form-row.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--color-primary); }
.akademie-form button.course-cta.big { font-size: 1.1rem; padding: 16px 24px; }
.form-trust { text-align: center; font-size: var(--font-size-xs); color: var(--color-text-light); margin: var(--spacing-sm) 0 var(--spacing-md); }
.form-hinweis { line-height: 1.5; }
@media (max-width: 640px) { .akademie-form .form-grid { grid-template-columns: 1fr; } .form-section { padding: var(--spacing-md); } }

/* Bestellung */
.bestell-zusammenfassung { background: #EBF4FF; border-left: 4px solid var(--color-primary); border-radius: var(--radius); padding: var(--spacing-lg); margin: var(--spacing-lg) 0 var(--spacing-xl); }
.bestell-zusammenfassung h2 { margin-top: 0; font-size: var(--font-size-xl); }
.bestell-zusammenfassung a { color: var(--color-primary); text-decoration: underline; }
.zs-preis { font-size: var(--font-size-2xl); font-weight: 700; margin-top: var(--spacing-sm); }
.zs-preis small { display: block; font-size: var(--font-size-xs); font-weight: 400; color: var(--color-text-light); }

/* Hinweis-Kasten (Abgrenzung, nächste Schritte) */
.hinweis-box { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin-top: var(--spacing-2xl); }
.hinweis-box h2 { margin-top: 0; font-size: var(--font-size-xl); }
.hinweis-box p { margin-bottom: var(--spacing-md); }
.hinweis-box p:last-child { margin-bottom: 0; }

/* Rechtstexte */
.legal-text h1 { font-size: var(--font-size-2xl); }
.legal-text h2 { font-size: var(--font-size-xl); margin: var(--spacing-xl) 0 var(--spacing-sm); }
.legal-text h3 { font-size: var(--font-size-base); margin: var(--spacing-md) 0 var(--spacing-xs); }
.legal-text p { margin-bottom: var(--spacing-sm); }
.legal-text ul, .legal-text ol { padding-left: 1.4em; margin-bottom: var(--spacing-sm); }
.legal-text ul { list-style: disc; }
.legal-text ol { list-style: decimal; }
.legal-text li { margin-bottom: 4px; }
.legal-text a { color: var(--color-primary); text-decoration: underline; }
.legal-stand { margin-top: var(--spacing-xl); font-size: var(--font-size-sm); color: var(--color-text-light); }
.legal-text .no-print .course-cta { display: inline-block; margin-right: var(--spacing-sm); margin-top: var(--spacing-sm); }

@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .akademie-form .form-row.zweispaltig { grid-template-columns: 1fr; }
}

@media print {
  .top-bar, .site-footer, .breadcrumb, .no-print { display: none !important; }
  .course-page-inner { max-width: none; padding: 0; }
  .legal-text a { text-decoration: none; color: inherit; }
}

/* Nachweis-Seite */
#nw-zugang.eingeklappt { padding: var(--spacing-md); }
#nw-zugang.eingeklappt .form-grid { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
.nachweis-ergebnis { margin-top: var(--spacing-xl); scroll-margin-top: 100px; }
.nachweis-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-md); flex-wrap: wrap; }
.nachweis-kopf h2 { margin: 0 0 4px; }
.nachweis-meta { color: var(--color-text-light); font-size: var(--font-size-sm); margin: 0; }
.nachweis-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.nachweis-aktionen .course-cta { border: 1px solid var(--color-border); background: var(--color-bg); cursor: pointer; font: inherit; font-size: var(--font-size-sm); padding: 10px 14px; }
.nachweis-kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); margin: var(--spacing-lg) 0; }
.kachel { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; }
.kachel .zahl { font-size: 1.9rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; }
.kachel .label { font-size: var(--font-size-xs); color: var(--color-text-light); margin-top: 4px; }
.nachweis-filter { display: flex; gap: var(--spacing-md); align-items: center; flex-wrap: wrap; margin-bottom: var(--spacing-sm); font-size: var(--font-size-sm); }
.nachweis-filter input[type=search] { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; min-width: 220px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.nachweis-tabelle { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.nachweis-tabelle th { text-align: left; background: var(--color-bg-alt); padding: 10px 12px; border-bottom: 2px solid var(--color-border); white-space: nowrap; }
.nachweis-tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.nachweis-tabelle tr:last-child td { border-bottom: none; }
.nachweis-tabelle td small { color: var(--color-text-light); }
.nachweis-tabelle tr.nein td { color: var(--color-text-light); }
.nachweis-tabelle tr.abgelaufen td { background: #FFFAF0; }
.nachweis-tabelle .mono { font-family: Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap; }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.tag.rot { background: #FFF5F5; color: #822727; border: 1px solid #FEB2B2; }
.tag.gelb { background: #FFFBEB; color: #744210; border: 1px solid #F6E05E; }
.nachweis-leer, .nachweis-hinweis { color: var(--color-text-light); font-size: var(--font-size-sm); margin-top: var(--spacing-md); }
@media (max-width: 760px) { .nachweis-kacheln { grid-template-columns: 1fr 1fr; } #nw-zugang.eingeklappt .form-grid { grid-template-columns: 1fr; } }
@media print {
  .top-bar, .site-footer, footer, .breadcrumb, .no-print, #nw-zugang { display: none !important; }
  .course-page-inner { max-width: none; padding: 0; }
  .nachweis-kacheln { grid-template-columns: repeat(4, 1fr); }
  .table-wrap { border: none; }
  .nachweis-tabelle th, .nachweis-tabelle td { padding: 6px 8px; font-size: 11px; }
  body::after { content: "Sammelnachweis QM-Guru Akademie · qm-guru.de/akademie · gedruckt " attr(data-datum); display: block; margin-top: 16px; font-size: 10px; color: #666; }
}

.price-ust { font-size: 0.85rem; font-weight: 500; color: var(--color-text-light); white-space: nowrap; }
.hero .course-hero-cta { justify-content: center; }
.hero .course-cta.secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 640px) {
  .hero { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
  .hero .hero-badge { display: none; }
  .hero .course-hero-cta { flex-direction: column; margin: var(--spacing-md) 0; }
  .hero .course-hero-cta .course-cta { width: 100%; text-align: center; justify-content: center; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
  .hero-stat-value { font-size: var(--font-size-xl); }
}
.hero .course-cta.available { background: #fff; color: var(--color-primary, #1a5276); }
/* Admin-Übersicht */
.admin-seite h2 { margin-top: var(--spacing-xl); }
.kz-hinweis { color: var(--color-text-light); font-size: var(--font-size-sm); margin: 4px 0 var(--spacing-sm); }
.kz-aktionen { display: flex; gap: var(--spacing-sm); justify-content: flex-end; flex-wrap: wrap; }
.kz-merken { display: block; margin: var(--spacing-sm) 0; font-size: var(--font-size-sm); }
.kz-tabelle .z { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kz-tabelle th[data-s] { cursor: pointer; user-select: none; }
.kz-tabelle th[aria-sort="descending"]::after { content: " ▾"; }
.kz-tabelle th[aria-sort="ascending"]::after { content: " ▴"; }
.kz-tabelle tr.leer td { color: var(--color-text-light); }
.kz-tabelle tfoot td { border-top: 2px solid var(--color-border); background: var(--color-bg-alt); }
.kz-chart { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 8px; background: var(--color-bg, #fff); }
.kz-chart svg { width: 100%; height: auto; display: block; }
.kz-grid { stroke: #e3e7ec; stroke-width: 1; }
.kz-ax { fill: #6b7280; font-size: 11px; }
.kz-val { fill: #1f2937; font-size: 12px; font-weight: 600; }
.kz-fill { fill: #2d6cb5; }
.kz-bar:hover .kz-fill { fill: #1a4f8a; }
@media (max-width: 640px) { .nachweis-kacheln { grid-template-columns: 1fr 1fr; } }
.admin-seite .course-page-inner { max-width: 1120px; }
.kz-fill2 { fill: #a9c3e3; }
.kz-bar:hover .kz-fill2 { fill: #87a9d4; }
.kz-rahmen { fill: none; stroke: #a9c3e3; stroke-width: 1.5; stroke-dasharray: 4 3; }
.kz-ghost { stroke: #d9822b; stroke-width: 2.5; stroke-linecap: round; }
.kz-legende { font-size: var(--font-size-sm); color: var(--color-text-light); display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin: 6px 0 0; }
.kz-legende span { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: -8px; }
.kz-legende .l1 { background: #2d6cb5; } .kz-legende .l2 { background: #a9c3e3; } .kz-legende .l3 { border: 1.5px dashed #a9c3e3; }
.kz-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md, 16px); align-items: start; }
.kz-zwei .table-wrap + .table-wrap { margin-top: var(--spacing-sm); }
@media (max-width: 760px) { .kz-zwei { grid-template-columns: 1fr; } }
.kachel .zahl small { font-size: .55em; font-weight: 600; }
.kachel .zahl small.plus { color: #1d7a3e; } .kachel .zahl small.minus { color: #b42318; }
#kz-erfolg { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.kz-legende .l4 { height: 3px; width: 14px; background: #d9822b; vertical-align: 3px; }
.kz-vergleich { margin: 6px 0 0; font-size: var(--font-size-sm); }
.kz-vergleich .plus { color: #1d7a3e; } .kz-vergleich .minus { color: #b42318; }

.sterne-anzeige { display: inline-flex; align-items: center; gap: 6px; color: #D69E2E; font-size: var(--font-size-lg); margin: 0 0 var(--spacing-md); }
.sterne-anzeige .sterne-text { color: var(--color-text-light); font-size: var(--font-size-sm); }
.sterne-anzeige.klein { font-size: var(--font-size-base); margin: 4px 0 0; }

.badge-bilder { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } .badge-bilder img { max-width: 100%; height: auto; border-radius: 12px; }

.kat-block { margin: 0 0 var(--spacing-2xl); }
.kat-kopf { margin: 0 0 var(--spacing-md); display: grid; grid-template-columns: 1fr auto; gap: 4px var(--spacing-md); align-items: end; }
.kat-kopf h3 { font-size: var(--font-size-2xl); margin: 0; display: flex; align-items: center; gap: 10px; }
.kat-kopf p { margin: 0; color: var(--color-text-light); grid-column: 1; }
.kat-anzahl { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-light); background: var(--color-bg-alt); border-radius: 999px; padding: 2px 10px; }
.kat-link { grid-column: 2; grid-row: 1 / span 2; font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) { .kat-kopf { grid-template-columns: 1fr; } .kat-link { grid-column: 1; grid-row: auto; } }

/* Themen-Kacheln auf dem Hub */
.themen { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.themen-inner { max-width: 1200px; margin: 0 auto; padding: var(--spacing-lg) var(--spacing-md); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-sm); }
.thema { display: grid; gap: 2px; text-decoration: none; color: var(--color-text); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md); min-width: 0; transition: transform .15s, box-shadow .15s; }
.thema:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: var(--color-primary); }
.thema-icon { font-size: 1.8rem; line-height: 1; }
.thema-name { font-weight: 700; font-size: var(--font-size-lg); }
.thema-text { color: var(--color-text-light); font-size: var(--font-size-sm); }
.thema-anzahl { font-size: var(--font-size-xs); color: var(--color-primary); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.thema.reihe { background: linear-gradient(135deg, #FFF7E0, #FFE9A8); border-color: #D69E2E; }
.thema.reihe .thema-anzahl { color: #975A16; }
.course-cta.gold { background: #D69E2E; color: #1A202C; }
.course-cta.gold:hover { background: #B7791F; }
@media (max-width: 900px) { .themen-inner { grid-template-columns: repeat(2, 1fr); } .thema.reihe { grid-column: 1 / -1; } }
@media (max-width: 480px) { .themen-inner { grid-template-columns: 1fr; } }
/* Reihenseite: Raster der zehn Teile */
.reihe-raster { list-style: none; padding: 0; margin: var(--spacing-lg) 0 var(--spacing-xl); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); }
.reihe-raster li a, .reihe-raster li.coming-soon { display: grid; grid-template-columns: 2.4em 1fr; grid-template-rows: auto auto; column-gap: var(--spacing-sm); align-items: center; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-alt); text-decoration: none; color: var(--color-text); min-width: 0; }
.reihe-raster li a:hover { border-color: var(--color-primary); background: var(--color-bg); }
.reihe-raster li.coming-soon { color: var(--color-text-light); }
.rr-nr { grid-row: 1 / span 2; font-weight: 800; font-size: 1.4rem; color: var(--color-primary); text-align: center; }
.rr-titel { font-weight: 600; }
.rr-meta { font-size: var(--font-size-xs); color: var(--color-text-light); }
@media (max-width: 640px) { .reihe-raster { grid-template-columns: 1fr; } }

/* ===== WEGWEISER (/wegweiser/) ===== */
.thema.wegweiser { background: linear-gradient(135deg, #EBF4FF, #D6E8FF); border-color: var(--color-primary); }
@media (max-width: 900px) { .thema.wegweiser { grid-column: 1 / -1; } }
.ww-haupt { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.ww-rolle { font: inherit; color: inherit; text-align: left; cursor: pointer; background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; display: flex; gap: 12px; align-items: flex-start; transition: .15s; }
.ww-rolle:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.ww-rolle.aktiv { border-color: var(--color-primary); background: #EBF4FF; }
.ww-rolle .ww-icon { font-size: 1.7rem; line-height: 1; }
.ww-rolle b { display: block; font-size: 1.05rem; color: var(--color-primary); }
.ww-rolle span { font-size: var(--font-size-sm); color: var(--color-text-light); }
.ww-rolle .ww-ende { display: block; font-style: normal; font-size: .88rem; margin-top: 8px; color: var(--color-text); }
.ww-rolle .ww-ende b { display: inline; font-size: .88rem; color: var(--color-success); }
.ww-zwischen { text-align: center; color: var(--color-text-light); font-size: var(--font-size-sm); margin: var(--spacing-lg) 0 var(--spacing-sm); }
.ww-ausbildung { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-md); }
.ww-ausbildung .ww-rolle { border-style: dashed; background: var(--color-bg-alt); }
.ww-ausbildung .ww-rolle.aktiv { border-style: solid; background: #EBF4FF; }
.ww-weitere { display: flex; flex-direction: column; gap: 12px; }
.ww-gruppe-titel { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-light); margin: 0 0 6px; text-align: center; }
.ww-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ww-chips .ww-rolle { padding: 9px 14px; border-radius: var(--radius-full); border-width: 1px; display: inline-flex; align-items: center; gap: 8px; }
.ww-chips .ww-rolle b { font-size: .92rem; font-weight: 600; }
.ww-chips .ww-rolle span, .ww-chips .ww-rolle .ww-ende { display: none; }
.ww-chips .ww-rolle .ww-icon { font-size: 1.1rem; }
.ww-pfad { display: none; margin: var(--spacing-2xl) 0 var(--spacing-md); }
.ww-pfad.aktiv { display: block; }
.ww-pfad-kopf { display: flex; flex-wrap: wrap; gap: var(--spacing-md); align-items: flex-end; justify-content: space-between; border-bottom: 2px solid #EBF4FF; padding-bottom: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.ww-pfad-kopf h2 { margin: 0 0 6px; color: var(--color-primary); font-size: var(--font-size-2xl); }
.ww-pfad-kopf p { margin: 0; color: var(--color-text-light); max-width: 720px; }
.ww-summe { background: #EBF4FF; border-radius: var(--radius); padding: 10px 16px; font-size: var(--font-size-sm); white-space: nowrap; }
.ww-summe b { color: var(--color-primary); display: block; font-size: 1.1rem; }
.ww-summe small { color: var(--color-text-light); }
.ww-hinweis { background: var(--color-bg-alt); border-left: 4px solid var(--color-primary); padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; font-size: .95rem; margin: 0 0 var(--spacing-lg); }
.ww-stufe { margin-bottom: var(--spacing-lg); }
.ww-stufe-titel, .ww-opt summary { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.ww-opt summary { cursor: pointer; list-style: none; }
.ww-opt summary::-webkit-details-marker { display: none; }
.ww-nr { background: var(--color-primary); color: #fff; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; flex: none; }
.ww-opt .ww-nr { background: #fff; color: var(--color-primary); border: 2px solid var(--color-primary); }
.ww-stufe h3 { margin: 0; font-size: var(--font-size-lg); color: var(--color-primary); }
.ww-opt summary h3 { color: var(--color-text-light); }
.ww-opt[open] summary h3 { color: var(--color-primary); }
.ww-stufe h3 small { color: var(--color-text-light); font-weight: 400; margin-left: 4px; font-size: var(--font-size-sm); }
.ww-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ww-karte { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; background: var(--color-bg); display: flex; flex-direction: column; gap: 8px; }
.ww-karte-paid { border-color: #ECC94B; background: #FFFCF0; }
.ww-kat { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-light); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ww-karte h4 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.ww-karte h4 a { color: var(--color-primary); text-decoration: none; }
.ww-karte h4 a:hover { text-decoration: underline; }
.ww-warum { font-size: .92rem; margin: 0; }
.ww-meta { display: flex; gap: 12px; font-size: var(--font-size-xs); color: var(--color-text-light); flex-wrap: wrap; }
.ww-aktionen { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.ww-aktionen .course-cta { padding: 8px 14px; font-size: var(--font-size-sm); }
.ww-tag { display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ww-pflicht { background: #FFF7ED; color: #B45309; }
.ww-start { background: #ECFDF5; color: #15803D; }
.ww-paid { background: #FEF3C7; color: #92400E; }
.ww-ziel { background: var(--color-bg-dark); color: #fff; border-radius: var(--radius-lg); padding: 22px 26px; display: flex; gap: 18px; align-items: center; margin-top: 8px; }
.ww-ziel > span { font-size: 2rem; }
.ww-ziel b { font-size: 1.1rem; }
.ww-ziel p { margin: 4px 0 0; color: #CBD5E0; font-size: .95rem; }
.ww-team { margin-top: var(--spacing-2xl); }
@media (max-width: 600px) { .ww-pfad-kopf { flex-direction: column; align-items: stretch; } .ww-summe { white-space: normal; } }

/* ===== STARTSEITE: Einstiege, Ablauf, Autorenblock ===== */
.einstiege { background: var(--color-bg); padding: 0 var(--spacing-md); margin-top: -24px; position: relative; }
.einstiege-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-md); }
.einstieg { display: grid; gap: 6px; text-decoration: none; color: var(--color-text); background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: 0 6px 18px rgba(0,0,0,.06); transition: .15s; }
.einstieg:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.einstieg-icon { font-size: 1.8rem; line-height: 1; }
.einstieg b { font-size: var(--font-size-lg); color: var(--color-primary); line-height: var(--line-height-tight); }
.einstieg span:not(.einstieg-icon) { color: var(--color-text-light); font-size: var(--font-size-sm); }
.einstieg em { font-style: normal; font-weight: 700; color: var(--color-primary); font-size: var(--font-size-sm); margin-top: 4px; }
.ablauf { background: var(--color-bg-alt); padding: var(--spacing-2xl) var(--spacing-md); }
.ablauf-inner { max-width: 1000px; margin: 0 auto; }
.ablauf-schritte { list-style: none; padding: 0; margin: var(--spacing-lg) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-md); }
.ablauf-schritte li { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--spacing-lg); display: grid; gap: 6px; border: 1px solid var(--color-border); }
.ablauf-nr { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ablauf-schritte b { font-size: var(--font-size-lg); }
.ablauf-schritte li > span:not(.ablauf-nr) { color: var(--color-text-light); font-size: var(--font-size-sm); }
.autor-block { padding: var(--spacing-2xl) var(--spacing-md); }
.autor-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: var(--spacing-xl); align-items: center; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--spacing-xl); box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.autor-foto { width: 240px; height: auto; border-radius: var(--radius-xl); display: block; }
.autor-kicker { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-light); margin: 0 0 4px; font-weight: 700; }
.autor-text h2 { margin: 0 0 4px; font-size: var(--font-size-2xl); color: var(--color-primary); }
.autor-rolle { color: var(--color-text-light); font-size: var(--font-size-sm); margin: 0 0 12px; }
.autor-grundsatz { font-style: italic; color: var(--color-primary); font-weight: 600; margin: 8px 0; }
.autor-links { font-size: var(--font-size-sm); margin: 0; }
.autor-google { color: #B7791F; font-weight: 600; white-space: nowrap; }
.course-page .autor-block { padding: var(--spacing-lg) 0; }
.course-page .autor-inner { padding: var(--spacing-lg); grid-template-columns: 180px 1fr; }
.course-page .autor-foto { width: 180px; }
@media (max-width: 700px) { .autor-inner { grid-template-columns: 1fr; text-align: center; } .autor-foto { margin: 0 auto; width: 180px; } .course-page .autor-inner { grid-template-columns: 1fr; } .einstiege { margin-top: 0; padding-top: var(--spacing-lg); } }

/* ===== BERATERAUSBILDUNG (/beraterausbildung/) ===== */
.ba-zielgruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); }
.ba-zielgruppen > div { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md); display: grid; gap: 4px; }
.ba-zielgruppen span { font-size: 1.6rem; }
.ba-zielgruppen b { color: var(--color-primary); }
.ba-zielgruppen p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text); }
.ba-stufen { list-style: none; padding: 0; margin: var(--spacing-lg) 0 0; display: grid; gap: var(--spacing-md); }
.ba-stufe { display: grid; grid-template-columns: 48px 1fr; gap: var(--spacing-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); }
.ba-stufe.ba-paid { border-color: #ECC94B; background: #FFFCF0; }
.ba-nr { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.ba-paid .ba-nr { background: #D69E2E; }
.ba-stufe h3 { margin: 4px 0 2px; font-size: var(--font-size-xl); color: var(--color-primary); }
.ba-meta { color: var(--color-text-light); font-size: var(--font-size-sm); margin: 0 0 8px; }
.ba-kurse { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ba-kurse li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius); background: var(--color-bg-alt); }
.ba-paid .ba-kurse li { background: #FFF7D6; }
.ba-kurse a { font-weight: 700; text-decoration: none; color: var(--color-primary); }
.ba-kurse a:hover { text-decoration: underline; }
.ba-kurse li span { font-size: var(--font-size-sm); color: var(--color-text); }
.ba-check { list-style: none; padding: 0; margin: var(--spacing-md) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 28px; }
.ba-check li { padding-left: 28px; position: relative; }
.ba-check li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 800; }
.ba-warum blockquote { margin: var(--spacing-md) 0 0; background: var(--color-bg-alt); border-left: 5px solid var(--color-primary); padding: var(--spacing-lg); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-size: var(--font-size-lg); }
.ba-warum blockquote footer { margin-top: 10px; font-size: var(--font-size-sm); color: var(--color-text-light); }
.ba-ende { margin: var(--spacing-xl) 0; justify-content: center; }
@media (max-width: 600px) { .ba-stufe { grid-template-columns: 36px 1fr; } .ba-nr { width: 32px; height: 32px; font-size: 1rem; } }
/* Startseite: vier Kennzahlen in einer Reihe */
.hero .hero-stats { gap: var(--spacing-xl); }
.hero .hero-stat { flex: 1 1 170px; max-width: 220px; }


/* ===== ACADEMIA (es) ===== */
.equipo-inner { grid-template-columns: 1fr 1fr; align-items: start; }
.equipo-person { display: grid; gap: 6px; justify-items: start; }
.equipo-person .autor-foto { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; }
.equipo-person h3 { margin: 0; color: var(--color-primary); font-size: var(--font-size-xl); }
.equipo-person p { margin: 0; }
.course-page .equipo-inner { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .equipo-inner, .course-page .equipo-inner { grid-template-columns: 1fr; } .equipo-person { justify-items: center; text-align: center; } }
.course-cta.notify.big { font-size: var(--font-size-lg); padding: 14px 24px; }
/* WhatsApp: dezenter schwebender Knopf unten rechts; Platz unten, damit er keinen Inhalt dauerhaft verdeckt */
body { padding-bottom: 72px; }
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 9999px; background: #0a6b50; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.wa-float:hover { background: #075540; color: #fff; }
.wa-float:focus-visible { outline: 3px solid #1a4f8a; outline-offset: 3px; }
.wa-float svg { flex: none; }
@media print { .wa-float { display: none; } }
/* Angebot / Erklärseite */
.zert-empresa { padding: 32px 16px; }
.zert-empresa-inner { max-width: 860px; margin: 0 auto; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-alt); }
.course-page .zert-empresa { padding: 16px 0; }
.zert-empresa h2 { margin: 0 0 8px; color: var(--color-primary); font-size: var(--font-size-xl); }
.zert-empresa p { margin: 0 0 8px; }
.zert-empresa-cta { margin-top: 12px !important; }
.zert-hinweis { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 14px; color: #4a5568; }
.zweck-nein { list-style: none; padding-left: 0; }
.zweck-nein li { position: relative; padding-left: 28px; }
.zweck-nein li::before { content: "✕"; position: absolute; left: 4px; color: #c53030; font-weight: 700; }
.zweck-nein li, .aviso li { margin-bottom: 8px; }
.aviso ul { list-style: disc; padding-left: 20px; }
.course-description p a, .course-description li a, .zert-empresa p a:not(.course-cta), .zert-hinweis a, .zweck-tipp a, .faq-section p a { color: var(--color-primary); text-decoration: underline; }
.zweck-tipp { padding: 12px 16px; border-left: 4px solid var(--color-primary); background: var(--color-bg-alt); border-radius: 0 var(--radius) var(--radius) 0; }
.course-page h3 { margin: 16px 0 8px; }