/* cmsms stylesheet: Academy 2026 modified: 30.07.2026 14:46:40 */
/* ==========================================================================
   OSTAK Academy 2026 – Stylesheet
   CMSMS 2.2.10 · Design: Academy 2026
   --------------------------------------------------------------------------
   Schriften werden lokal ausgeliefert (DSGVO). Erwartete Dateien unter
   /uploads/fonts/ :
     dmsans-400.woff2  dmsans-500.woff2  dmsans-600.woff2  dmsans-700.woff2
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/uploads/fonts/dmsans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/uploads/fonts/dmsans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/uploads/fonts/dmsans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/uploads/fonts/dmsans-700.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Design-Tokens
   -------------------------------------------------------------------------- */

:root {
  /* OSTAK-Markenpalette (aus dem Logo) */
  --navy:         #004891;
  --navy-dark:    #003366;
  --navy-deep:    #002850;
  --blue-medium:  #1e71a7;
  --blue-light:   #81ceed;
  --teal:         #32b8cc;
  --teal-soft:    #c4eaef;

  /* Neutrale Skala */
  --slate-900: #0f172a;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
  --white:     #ffffff;

  /* Funktional */
  --alert:     #dc2626;
  --alert-bg:  #fef2f2;

  /* Radien */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Layout */
  --wrap:      1200px;
  --gutter:    48px;
}

/* --------------------------------------------------------------------------
   3. Reset / Basis
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--navy); text-decoration: none; }
button { font: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn--primary {
  background: var(--navy);
  color: var(--white);
}
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--navy-dark); }

.btn--outline {
  background: var(--white);
  color: var(--navy);
  border-color: var(--slate-200);
}
.btn--outline:hover,
.btn--outline:focus-visible { border-color: var(--blue-light); }

.btn--ghost {
  background: transparent;
  color: var(--slate-700);
  border-color: transparent;
}
.btn--ghost:hover,
.btn--ghost:focus-visible { color: var(--navy); }

.btn--light {
  background: var(--white);
  color: var(--navy);
}
.btn--light:hover,
.btn--light:focus-visible { background: var(--slate-100); }

.btn--small {
  padding: 7px 14px;
  font-size: 13px;
}

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Kopfbereich / Navigation
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
  position: relative;
  z-index: 40;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 74px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.site-logo img { height: 32px; width: auto; }

.site-nav { flex: 1; }

.site-nav__list {
  display: flex;
  gap: 23px;
}

.site-nav__list a {
  display: inline-block;
  position: relative;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700);
  white-space: nowrap;
  transition: color .18s ease;
}
.site-nav__list a:hover { color: var(--navy); }

.site-nav__list a.is-active { color: var(--navy); }
.site-nav__list a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 2px;
  background: var(--navy);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Kopfbereich-Buttons kompakter als die CTAs im Seiteninhalt */
.site-header__actions .btn {
  padding: 9px 17px;
  font-size: 14px;
  white-space: nowrap;
}

/* Burger (nur mobil sichtbar) */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
}
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  position: absolute;
  left: 50%;
  width: 20px; height: 2px;
  margin-left: -10px;
  background: var(--slate-700);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-burger span { top: 21px; }
.nav-burger span::before { content: ''; left: 0; margin-left: 0; top: -6px; }
.nav-burger span::after  { content: ''; left: 0; margin-left: 0; top:  6px; }

.nav-toggle:checked ~ .site-header .nav-burger span { background: transparent; }
.nav-toggle:checked ~ .site-header .nav-burger span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle:checked ~ .site-header .nav-burger span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Das Ankreuzfeld ist unsichtbar – Tastaturfokus daher am Burger anzeigen */
.nav-toggle:focus-visible ~ .site-header .nav-burger {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: 68px 0 60px;
  background: linear-gradient(180deg, var(--white) 0%, var(--slate-50) 100%);
  border-bottom: 1px solid var(--slate-200);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero__eyebrow {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--slate-500);
}

.hero__title {
  margin-bottom: 20px;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.6px;
  color: var(--slate-900);
}
.hero__title em {
  font-style: normal;
  color: var(--navy);
}

.hero__lead {
  max-width: 30em;
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate-600);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__stats {
  display: flex;
  gap: 44px;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid var(--slate-200);
}
.hero__stat b {
  display: block;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
}
.hero__stat span {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  color: var(--slate-500);
}

/* Vorschaukarte rechts */
.teaser-card {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
}

.teaser {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  transition: border-color .18s ease;
}
.teaser + .teaser { margin-top: 10px; }
.teaser:hover { border-color: var(--blue-light); }

.teaser__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--slate-50);
  border-radius: var(--radius-sm);
  color: var(--navy);
}
.teaser__icon svg { width: 20px; height: 20px; }

.teaser__body { flex: 1; min-width: 0; }
.teaser__meta {
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--blue-medium);
}
.teaser__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--slate-900);
}

/* Badges */
.badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.badge--live { background: var(--alert-bg); color: var(--alert); }
.badge--free { background: var(--teal-soft); color: #0f6e7a; }

/* --------------------------------------------------------------------------
   7. Angebotsbereiche
   -------------------------------------------------------------------------- */

.section { padding: 66px 0; }

.section__head { margin-bottom: 32px; }
.section__head h2 {
  margin-bottom: 8px;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--slate-900);
}
.section__head p {
  font-size: 15px;
  color: var(--slate-500);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.card:hover { border-color: var(--blue-light); transform: translateY(-2px); }
.card:hover::before { transform: scaleX(1); }

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 18px;
  background: var(--slate-50);
  border-radius: var(--radius-md);
  color: var(--navy);
}
.card__icon svg { width: 22px; height: 22px; }

.card h3 {
  margin-bottom: 7px;
  font-size: 17px;
  font-weight: 600;
  color: var(--slate-900);
}
.card p {
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate-500);
}
.card__link {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   8. Nächstes Webinar (Banner)
   -------------------------------------------------------------------------- */

.featured {
  padding: 42px 48px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-medium) 100%);
  border-radius: var(--radius-xl);
  color: var(--white);
}

.featured__eyebrow {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-light);
}

.featured h2 {
  max-width: 20em;
  margin-bottom: 14px;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.22;
}

.featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 22px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .85);
}
.featured__meta li::before {
  content: '\2022';
  margin-right: 8px;
  color: var(--blue-light);
}

/* --------------------------------------------------------------------------
   9. Sponsoren
   -------------------------------------------------------------------------- */

.sponsors {
  padding: 46px 0;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
  text-align: center;
}
.sponsors__label {
  margin-bottom: 26px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--slate-500);
}
.sponsors__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 26px 56px;
}
.sponsors__row img {
  height: 34px;
  width: auto;
}

/* Theramex enthält Bildmarke und Claim übereinander – bei gleicher Gesamthöhe
   wirken die Buchstaben dadurch nur etwa halb so groß wie bei den reinen
   Wortmarken. Wird deshalb optisch ausgeglichen.
   Der Selektor greift über den Dateinamen und braucht keine Klasse im Template. */
.sponsors__row img[src*="theramex"] { height: 68px; }

/* --------------------------------------------------------------------------
   9a. Seitenkopf der Unterseiten
   -------------------------------------------------------------------------- */

.page-head {
  padding: 46px 0 40px;
  background: linear-gradient(180deg, var(--white) 0%, var(--slate-50) 100%);
  border-bottom: 1px solid var(--slate-200);
}
.page-head h1 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.4px;
  color: var(--slate-900);
}
.page-head p {
  max-width: 46em;
  margin-top: 12px;
  font-size: 17px;
  color: var(--slate-600);
}

/* --------------------------------------------------------------------------
   9b. Fließtext aus dem Editor
   -------------------------------------------------------------------------- */

.prose {
  max-width: 46em;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--slate-700);
}
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child  { margin-bottom: 0; }

/* Ausklappbare Fragen dürfen breiter laufen als Fließtext */
.prose--breit { max-width: 62em; }

.prose h2 {
  margin: 44px 0 14px;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.2px;
  color: var(--slate-900);
}
.prose h3 {
  margin: 34px 0 10px;
  font-size: 19px;
  font-weight: 600;
  color: var(--slate-900);
}
.prose h4 {
  margin: 26px 0 8px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--slate-900);
}

.prose p { margin: 0 0 18px; }

.prose a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--blue-medium); }

.prose strong { font-weight: 600; color: var(--slate-900); }

.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 7px; padding-left: 4px; }
.prose li::marker { color: var(--blue-medium); }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin: 7px 0 0; }

.prose blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--blue-light);
  color: var(--slate-600);
}

.prose hr {
  height: 0;
  margin: 34px 0;
  border: 0;
  border-top: 1px solid var(--slate-200);
}

.prose img {
  height: auto;
  margin: 24px 0;
  border-radius: var(--radius-md);
}

.prose table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  font-size: 15px;
}
.prose th, .prose td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--slate-200);
}
.prose th {
  font-weight: 600;
  color: var(--slate-900);
  background: var(--slate-50);
  border-bottom-color: var(--slate-300);
}

/* Tabellen auf schmalen Displays horizontal scrollbar statt gequetscht */
.prose__scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   9c. Webinarliste
   -------------------------------------------------------------------------- */

.webinar-list { display: grid; gap: 16px; }

.webinar-item {
  display: flex;
  gap: 20px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  transition: border-color .18s ease;
}
.webinar-item:hover { border-color: var(--blue-light); }

.webinar-item__date {
  flex: 0 0 68px;
  align-self: flex-start;
  padding: 12px 0;
  text-align: center;
  background: var(--slate-50);
  border-radius: var(--radius-md);
}
.webinar-item__date .monat {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--blue-medium);
}
.webinar-item__date .tag {
  display: block;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--slate-900);
}

.webinar-item__body { flex: 1; min-width: 0; }

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.badge--preis   { background: var(--slate-100); color: var(--slate-700); }
.badge--punkte  { background: #eff6ff; color: var(--blue-medium); }
.badge--thema   { background: var(--white); color: var(--slate-600); border: 1px solid var(--slate-200); }

.webinar-item__body h2,
.webinar-item__body h3 {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--slate-900);
}
.webinar-item__speakers {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--slate-500);
}
.webinar-item__text {
  margin-bottom: 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate-600);
}
.webinar-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--slate-600);
}
.webinar-item__meta b { font-weight: 600; color: var(--slate-900); }

.webinar-item__note {
  font-size: 13.5px;
  color: var(--slate-500);
}

/* Leere Liste */
.list-empty {
  padding: 44px 32px;
  text-align: center;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  color: var(--slate-500);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   9d. Filterleiste und Videoraster
   -------------------------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-group__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-500);
}

.filter-pills {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--slate-50);
  border-radius: var(--radius-sm);
}
.filter-pills a {
  padding: 6px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
  white-space: nowrap;
}
.filter-pills a:hover { color: var(--navy); }
.filter-pills a.is-active {
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.filter-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--slate-500);
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.topic-tags a {
  padding: 6px 14px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate-600);
  white-space: nowrap;
}
.topic-tags a:hover { border-color: var(--blue-light); color: var(--navy); }
.topic-tags a.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* Kachelraster */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.video-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.video-card:hover { border-color: var(--blue-light); transform: translateY(-2px); }

.video-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
}
.video-thumb--1 { background: linear-gradient(135deg, var(--navy) 0%, var(--blue-medium) 100%); }
.video-thumb--2 { background: linear-gradient(135deg, var(--blue-medium) 0%, var(--teal) 100%); }
.video-thumb--3 { background: linear-gradient(135deg, var(--navy-deep) 0%, var(--blue-medium) 100%); }

.video-thumb__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: rgba(255,255,255,.95);
  border-radius: 50%;
}
.video-thumb__play svg { width: 22px; height: 22px; margin-left: 2px; color: var(--navy); }

.video-thumb__preis {
  position: absolute;
  top: 12px; right: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,.95);
  color: var(--slate-900);
}
.video-thumb__preis.is-free { background: var(--teal-soft); color: #0f6e7a; }

.video-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px;
}
.video-card__body h2,
.video-card__body h3 {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--slate-900);
}
.video-card__speakers {
  flex: 1;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--slate-500);
}
.video-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-100);
  font-size: 12.5px;
  color: var(--slate-500);
}
.video-card__foot .btn { margin-left: auto; }
.video-card__note { font-size: 12.5px; color: var(--slate-500); }

/* Aktionszeile am Fuß der Kachel im geschützten Bereich */
.video-card__aktion { margin-top: 12px; }
.video-card__aktion .btn { width: 100%; text-align: center; }

/* Abgelaufene Videos zurückhaltender darstellen */
.video-card--aus { opacity: .72; }
.video-card--aus .video-thumb { filter: grayscale(100%); }

/* Gruppenüberschrift mit Anzahl */
.gruppe-titel {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-700);
}
.gruppe-titel .zahl {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate-400);
}
.gruppe + .gruppe { margin-top: 30px; }

/* Hinweiskasten im Editor-Inhalt: <p class="hinweis">…</p> */
.prose .hinweis {
  padding: 16px 20px;
  margin: 24px 0;
  background: var(--slate-50);
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--slate-700);
}
.prose .hinweis strong { color: var(--slate-900); }

/* Handlungslinks im Editor-Inhalt: <p class="aktionen"><a class="btn …">
   Die Farbe muss hier mit gesetzt werden, da .prose a spezifischer ist
   als die Grundregeln der Schaltflächen. */
.prose .aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0;
}
.prose .btn { text-decoration: none; }

.prose .btn--primary,
.prose .btn--primary:hover { color: var(--white); }

.prose .btn--outline,
.prose .btn--outline:hover,
.prose .btn--light,
.prose .btn--light:hover { color: var(--navy); }

/* Ausklappbare Fragen im Editor-Inhalt: <details class="faq"><summary>…
   Kommt ohne JavaScript aus und ist mit der Tastatur bedienbar. */
.prose details.faq {
  margin: 0 0 10px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.prose details.faq[open] { border-color: var(--blue-light); }

.prose details.faq > summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--slate-900);
  cursor: pointer;
  list-style: none;
  transition: background-color .15s ease;
}
.prose details.faq > summary::-webkit-details-marker { display: none; }
.prose details.faq > summary:hover { background: var(--slate-50); }
.prose details.faq > summary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

/* Plus- bzw. Minuszeichen rechts */
.prose details.faq > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-left: auto;
  border-radius: 4px;
  background:
    linear-gradient(var(--white), var(--white)) center / 10px 2px no-repeat,
    linear-gradient(var(--white), var(--white)) center / 2px 10px no-repeat,
    var(--navy);
  transition: transform .2s ease;
}
.prose details.faq[open] > summary::after {
  background:
    linear-gradient(var(--white), var(--white)) center / 10px 2px no-repeat,
    var(--navy);
  transform: rotate(180deg);
}

.prose details.faq > *:not(summary) {
  padding: 0 20px;
  font-size: 15.5px;
  color: var(--slate-600);
}
.prose details.faq > *:not(summary):last-child { padding-bottom: 18px; }
.prose details.faq > summary + * { padding-top: 2px; }

/* Kontaktkarten im Editor-Inhalt: <div class="kontakt-karten"><div>…</div></div> */
.prose .kontakt-karten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0 0 28px;
}
.prose .kontakt-karten > div {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
}
.prose .kontakt-karten h3 {
  margin: 0 0 6px;
  font-size: 17px;
}
.prose .kontakt-karten p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate-500);
}
.prose .kontakt-karten p:last-child { margin-bottom: 0; }
.prose .kontakt-karten a {
  font-weight: 500;
  text-decoration: none;
}
.prose .kontakt-karten a:hover { text-decoration: underline; }

/* Anschrift */
.prose address.anschrift {
  padding: 22px 24px;
  margin: 0 0 8px;
  font-style: normal;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--slate-700);
  background: var(--slate-50);
  border-radius: var(--radius-lg);
}
.prose address.anschrift strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

@media (max-width: 700px) {
  .prose .kontakt-karten { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   9e. Formulare
   Generisch über Elementselektoren, damit die Ausgabe der Module (FEU,
   Selfreg) ohne Eingriff in deren Vorlagen erfasst wird.
   -------------------------------------------------------------------------- */

.form-scope label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700);
}

.form-scope input[type="text"],
.form-scope input[type="password"],
.form-scope input[type="email"],
.form-scope input[type="tel"],
.form-scope input[type="number"],
.form-scope input[type="search"],
.form-scope select,
.form-scope textarea {
  display: block;
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 18px;
  font-family: inherit;
  font-size: 15px;
  color: var(--slate-900);
  background: var(--white);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-scope textarea { min-height: 140px; resize: vertical; }

.form-scope input:focus,
.form-scope select:focus,
.form-scope textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 72, 145, .12);
}

/* Zeile mit Ankreuzfeld und danebenstehender Beschriftung */
.form-scope .checkbox-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--slate-700);
  cursor: pointer;
}
.form-scope .checkbox-zeile input { margin-top: 3px; }

/* Freistehender Hinweiskasten innerhalb eines Formulars */
.form-scope .notiz {
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-600);
  background: var(--slate-50);
  border-left: 3px solid var(--blue-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Manche Modulformulare geben ihre Felder in Tabellen aus */
.form-scope table { width: 100%; border-collapse: collapse; }
.form-scope table th,
.form-scope table td {
  padding: 0 0 4px;
  text-align: left;
  vertical-align: top;
  border: 0;
  font-weight: 400;
}
.form-scope table th { padding-right: 16px; }

.form-scope input[type="checkbox"],
.form-scope input[type="radio"] {
  width: auto;
  margin: 0 8px 0 0;
  accent-color: var(--navy);
}

.form-scope input[type="submit"],
.form-scope button[type="submit"],
.form-scope button {
  display: inline-block;
  width: 100%;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  background: var(--navy);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .18s ease;
}
.form-scope input[type="submit"]:hover,
.form-scope button:hover { background: var(--navy-dark); }

/* Meldungen der Module */
.form-scope .error,
.form-scope .cms_error,
.form-scope .feu_error,
.form-scope .warning {
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14.5px;
  color: #991b1b;
  background: var(--alert-bg);
  border-left: 3px solid var(--alert);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.form-scope .message,
.form-scope .cms_message,
.form-scope .feu_message {
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14.5px;
  color: #14532d;
  background: #dcfce7;
  border-left: 3px solid var(--success, #16a34a);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --------------------------------------------------------------------------
   9f. Anmelde- und Registrierungsseiten
   -------------------------------------------------------------------------- */

.auth__layout {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* Einspaltig, für längere Formulare wie die Registrierung */
.auth__mittel {
  max-width: 720px;
  margin: 0 auto;
}

/* Hinweise nebeneinander statt untereinander */
.auth__hinweise--reihe { grid-template-columns: repeat(2, 1fr); }

.auth__card {
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(0, 72, 145, .06);
}
.auth__card > p:first-child {
  margin-bottom: 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate-500);
}

.auth__links {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--slate-100);
  font-size: 14px;
  color: var(--slate-500);
  text-align: center;
}
.auth__links a { font-weight: 500; }
.auth__links p { margin-bottom: 8px; }
.auth__links p:last-child { margin-bottom: 0; }

/* Vorab-Hinweise neben der Karte */
.auth__hinweise {
  display: grid;
  gap: 12px;
}
.auth__hinweise > div {
  padding: 14px 18px;
  background: var(--slate-50);
  border-left: 3px solid var(--blue-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-600);
}
.auth__hinweise strong {
  display: block;
  margin-bottom: 2px;
  color: var(--slate-900);
}

/* Aufzählung für die Registrierungsseite */
.auth__vorteile { margin: 0 0 24px; }
.auth__vorteile li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--slate-700);
}
.auth__vorteile li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background:
    linear-gradient(var(--white), var(--white)) center / 8px 2px no-repeat,
    var(--teal);
}

@media (max-width: 900px) {
  .auth__layout { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 620px) {
  .auth__hinweise--reihe { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .auth__card { padding: 22px; }
}

/* --------------------------------------------------------------------------
   10. Fußbereich
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 52px 0;
  background: var(--slate-900);
  color: var(--slate-400);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}

.site-footer h2 {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}
.site-footer p,
.site-footer a {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--slate-400);
}
.site-footer a { display: block; }
.site-footer a:hover { color: var(--white); }
.site-footer p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   10a. Geschützter Bereich
   -------------------------------------------------------------------------- */

.app-topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 70px;
  padding: 12px 28px;
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
  border-top: 3px solid var(--navy);
}
.app-topbar__logo img { height: 32px; width: auto; }
.app-topbar__trenner { width: 1px; height: 28px; background: var(--slate-200); }
.app-topbar__pfad { font-size: 13.5px; color: var(--slate-500); }
.app-topbar__pfad b { font-weight: 500; color: var(--slate-900); }
.app-topbar__rechts { margin-left: auto; }

.app-body {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  min-height: calc(100vh - 73px);
}

/* --- Seitenleiste --- */

.app-sidebar {
  display: flex;
  flex-direction: column;
  padding-bottom: 18px;
  background: var(--navy);
}

.app-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 22px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.app-user__kreis {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}
.app-user__text { min-width: 0; }
.app-user__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-user__mail {
  font-size: 11.5px;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-nav__titel {
  padding: 18px 22px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.app-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  font-size: 14.5px;
  color: rgba(255,255,255,.78);
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.app-nav a svg { flex: 0 0 auto; width: 18px; height: 18px; }
.app-nav a:hover { color: var(--white); background: rgba(255,255,255,.06); }
.app-nav a.is-active {
  color: var(--white);
  background: rgba(255,255,255,.09);
  border-left-color: var(--blue-light);
  font-weight: 500;
}
.app-nav__zahl {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--white);
  background: var(--teal);
}

.app-sidebar__fuss {
  margin-top: auto;
  padding: 16px 22px 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.app-sidebar__fuss a {
  display: block;
  padding: 4px 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
}
.app-sidebar__fuss a:hover { color: var(--white); }
.app-sidebar__fuss .abmelden { margin-top: 10px; color: rgba(255,255,255,.8); }

/* Abmelde-Formular des Moduls unauffällig wie ein Menüpunkt darstellen */
/* Logout-Ausgabe des Moduls: <p class="logout"> mit <i> und <a> nebeneinander.
   Als Flex-Zeile ausgerichtet, damit Icon und Text in einer Zeile stehen. */
.app-sidebar__fuss .app-logout .logout,
.app-sidebar__fuss .app-logout p {
  display: flex;
  align-items: center;
  margin: 0;
}
.app-sidebar__fuss .app-logout a {
  display: inline;
  white-space: nowrap;
}
.app-sidebar__fuss input[type="submit"],
.app-sidebar__fuss button {
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: rgba(255,255,255,.8);
  background: none;
  border: 0;
  cursor: pointer;
}
.app-sidebar__fuss input[type="submit"]:hover,
.app-sidebar__fuss button:hover { color: var(--white); text-decoration: underline; }
.app-sidebar__fuss form:hover .material-icons { background: var(--white); }

/* Das FEU-Logout-Template bringt ein Material-Icon als Textkennung mit
   ("power_settings_new"). Die neue Seite lädt diese Schrift nicht. Statt es
   nur auszublenden, ersetzen wir es per Maske durch ein echtes SVG-Symbol –
   ohne Eingriff in die Modulvorlage. So passt der Abmelden-Eintrag optisch
   zu den übrigen Menüpunkten und die frühere Einrückung entfällt. */
.app-sidebar__fuss .material-icons {
  display: inline-block;
  width: 17px; height: 17px;
  font-size: 0;                 /* verbirgt den Icon-Namen als Text */
  flex: 0 0 auto;
  margin-right: 0;
  background: rgba(255,255,255,.8);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Inhaltsbereich --- */

.app-main {
  padding: 32px 32px 48px;
  background: var(--slate-50);
}

.app-begruessung { margin-bottom: 28px; }
.app-begruessung h1 {
  margin-bottom: 6px;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--slate-900);
}
.app-begruessung p { font-size: 15.5px; color: var(--slate-500); }

.app-hinweis {
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #7c2d12;
  background: var(--warning-bg, #fef3c7);
  border-left: 3px solid var(--warning, #d97706);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.app-hinweis a { color: inherit; text-decoration: underline; }

/* Wrapper der redaktionellen Mitteilung. Er wird auch bei leerem Inhaltsfeld
   ausgegeben, weil {content} ohne assign nötig ist (CMSMS-Pflichtblock).
   Grundzustand daher unsichtbar; sichtbar nur, wenn wirklich Inhalt da ist.
   Das :has() erkennt echten Inhalt (ein Element im Wrapper); die :empty-Regel
   fängt den Fall ganz ohne Zeichen ab. Ein blankes Leerzeichen oder &nbsp;
   allein erzeugt kein Kindelement und bleibt damit ebenfalls unsichtbar. */
.app-mitteilung-wrap {
  display: none;
  padding: 18px 22px;
  margin-bottom: 24px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-700);
}
.app-mitteilung-wrap:has(> *) { display: block; }
.app-mitteilung-wrap > *:last-child { margin-bottom: 0; }

/* Redaktionelle Mitteilung oben im Dashboard */
.app-mitteilung {
  padding: 18px 22px;
  margin-bottom: 24px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-700);
}
.app-mitteilung > *:last-child { margin-bottom: 0; }

/* Kennzahlen */
.kennzahl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}
.kennzahl {
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
}
.kennzahl__titel {
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--slate-500);
}
.kennzahl__wert {
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--slate-900);
}
.kennzahl__zusatz {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--slate-500);
}
.kennzahl--wichtig {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-medium) 100%);
  border-color: transparent;
}
.kennzahl--wichtig .kennzahl__titel { color: rgba(255,255,255,.72); }
.kennzahl--wichtig .kennzahl__wert  { color: var(--white); }
.kennzahl--wichtig .kennzahl__zusatz{ color: var(--blue-light); }

/* Abschnitte im Inhaltsbereich */
.block { margin-bottom: 34px; }
.block__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.block__kopf h2 {
  font-size: 18.5px;
  font-weight: 600;
  color: var(--slate-900);
}
.block__mehr { font-size: 13.5px; font-weight: 500; color: var(--navy); }

.block-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.block-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* Hinweis "bereits gebucht/angemeldet" in den Backend-Übersichten */
.webinar-item__gebucht,
.video-card__gebucht {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: #0f6e7a;
}
.webinar-item__gebucht svg,
.video-card__gebucht svg { flex: 0 0 auto; color: var(--teal); }
.webinar-item__gebucht a { margin-left: 4px; font-weight: 500; }

/* Zugriffsstatus der Videos */
.zugriff {
  display: block;
  padding: 12px 14px;
  margin-top: auto;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: var(--radius-sm);
}
.zugriff b { display: block; font-weight: 600; }
.zugriff--offen  { background: var(--slate-50);  color: var(--slate-600); }
.zugriff--aktiv  { background: var(--teal-soft); color: #0f6e7a; }
.zugriff--eilig  { background: var(--alert-bg);  color: #991b1b; }
.zugriff--abgelaufen { background: var(--slate-100); color: var(--slate-500); }

/* Umschalter der Seitenleiste, nur auf schmalen Bildschirmen */
.app-toggle { position: absolute; opacity: 0; pointer-events: none; }
.app-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
}
.app-burger span,
.app-burger span::before,
.app-burger span::after {
  position: absolute;
  left: 50%;
  width: 18px; height: 2px;
  margin-left: -9px;
  background: var(--slate-700);
  border-radius: 2px;
}
.app-burger span { top: 20px; }
.app-burger span::before { content: ''; left: 0; margin-left: 0; top: -6px; }
.app-burger span::after  { content: ''; left: 0; margin-left: 0; top:  6px; }

@media (max-width: 1100px) {
  .block-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 940px) {
  .app-body { grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
  .app-toggle:checked ~ .app-body .app-sidebar { display: flex; }
  .app-burger { display: block; }
  .app-topbar { gap: 14px; padding: 10px 18px; }
  .app-topbar__pfad, .app-topbar__trenner { display: none; }
  .app-main { padding: 24px 18px 36px; }
  .block-grid-2, .block-grid-3 { grid-template-columns: 1fr; }
  .app-begruessung h1 { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   10b. Videoseite
   -------------------------------------------------------------------------- */

.video-buehne { max-width: 900px; }

.video-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.video-player video { display: block; width: 100%; height: 100%; }

.video-teil { margin-bottom: 26px; }
.video-teil__titel {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-700);
}

.video-kopf { margin-bottom: 20px; }
.video-kopf h1 {
  margin-bottom: 6px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--slate-900);
}
.video-kopf p { font-size: 14.5px; color: var(--slate-500); }

/* Fristband oberhalb des Players */
.frist-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 18px;
  margin-bottom: 18px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}
.frist-band b { font-weight: 600; }
.frist-band--aktiv { background: var(--teal-soft); color: #0f6e7a; }
.frist-band--eilig { background: var(--alert-bg);  color: #991b1b; }

/* Rückfrage vor dem Freischalten */
.freigabe {
  max-width: 560px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
}
.freigabe h2 {
  margin-bottom: 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--slate-900);
}
.freigabe p { margin-bottom: 14px; font-size: 15px; line-height: 1.6; color: var(--slate-600); }
.freigabe__warnung {
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #7c2d12;
  background: var(--warning-bg, #fef3c7);
  border-left: 3px solid var(--warning, #d97706);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.freigabe__aktionen { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------------------
   10c. Anmeldeseite / Bestellstrecke
   -------------------------------------------------------------------------- */

.bestellung { max-width: 720px; }

/* Zusammenfassung von Produkt und Anmeldedaten */
.zusammenfassung {
  padding: 22px 24px;
  margin-bottom: 24px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
}
.zusammenfassung + .zusammenfassung { margin-top: -8px; }
.zusammenfassung h2 {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}
.zusammenfassung dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  font-size: 14.5px;
}
.zusammenfassung dt { color: var(--slate-500); }
.zusammenfassung dd { color: var(--slate-800); }
.zusammenfassung .aendern {
  margin-top: 14px;
  font-size: 13.5px;
}

/* Zahlungsweise */
.zahlwahl { margin-bottom: 8px; }
.zahlwahl__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.zahlwahl__option:hover { border-color: var(--blue-light); }
.zahlwahl__option b { display: block; font-weight: 600; font-size: 14.5px; color: var(--slate-900); }
.zahlwahl__option span { font-size: 13.5px; color: var(--slate-500); }

/* Das eigentliche Radio ist ausgelagert und optisch versteckt; die Auswahl
   wird über die zugehörige Beschriftung dargestellt. */
.zahlwahl__radio {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.zahlwahl__option { position: relative; padding-left: 42px; }
.zahlwahl__option::before {
  content: '';
  position: absolute;
  left: 16px; top: 16px;
  width: 16px; height: 16px;
  border: 2px solid var(--slate-300);
  border-radius: 50%;
  background: var(--white);
}
.zahlwahl__radio:checked + .zahlwahl__option {
  border-color: var(--navy);
  background: rgba(0, 72, 145, .03);
}
.zahlwahl__radio:checked + .zahlwahl__option::before {
  border-color: var(--navy);
  background:
    radial-gradient(circle, var(--navy) 0 4px, transparent 5px);
}
.zahlwahl__radio:focus-visible + .zahlwahl__option {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* SEPA-/Bankblock: nur sichtbar, wenn Bankeinzug gewählt ist. Ganz ohne JS
   über den Zustand des jetzt benachbarten Radiobuttons. */
.sepa-block { display: none; margin: 4px 0 8px; }
#zahlung_bankeinzug:checked ~ .sepa-block { display: block; }
.sepa-hinweis {
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate-600);
  background: var(--slate-50);
  border-left: 3px solid var(--blue-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Zustimmungs-Ankreuzfelder */
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate-700);
}
.zustimmung input { margin-top: 3px; }
.zustimmung.fehler {
  padding: 10px 12px;
  background: var(--alert-bg);
  border-radius: var(--radius-sm);
}

.bestell-abschnitt {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--slate-200);
}
.bestell-abschnitt h2 {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-800);
}

.preis-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  margin-top: 8px;
  border-top: 2px solid var(--slate-200);
  font-size: 15px;
}
.preis-zeile b { font-size: 20px; font-weight: 600; color: var(--slate-900); }

/* --------------------------------------------------------------------------
   11. Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --gutter: 32px; }

  .site-header__inner { gap: 20px; }
  .site-nav__list { gap: 16px; }
  .site-nav__list a { font-size: 13.5px; }
  .site-header__actions .btn { padding: 9px 14px; font-size: 13.5px; }

  .hero__grid { gap: 36px; }
  .hero__title { font-size: 40px; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }

  /* Navigation klappt auf */
  .site-header__inner { flex-wrap: wrap; min-height: 68px; gap: 16px; }
  .site-logo { margin-right: auto; }
  .nav-burger { display: block; margin-left: 0; }

  .site-nav,
  .site-header__actions {
    display: none;
    flex-basis: 100%;
    width: 100%;
  }
  .nav-toggle:checked ~ .site-header .site-nav,
  .nav-toggle:checked ~ .site-header .site-header__actions {
    display: block;
  }
  .nav-toggle:checked ~ .site-header .site-header__actions {
    display: flex;
    padding-bottom: 12px;
  }
  .site-nav__list {
    flex-direction: column;
    gap: 0;
    padding-top: 8px;
    border-top: 1px solid var(--slate-200);
  }
  .site-nav__list a { padding: 12px 0; font-size: 16px; }
  .site-nav__list a.is-active::after { display: none; }
  .site-header__actions .btn { flex: 1; text-align: center; }

  .hero { padding: 44px 0 40px; }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__title { font-size: 34px; }
  .hero__lead { font-size: 16px; }
  .hero__stats { gap: 32px; margin-top: 32px; }
  .hero__stat b { font-size: 25px; }

  .section { padding: 48px 0; }
  .section__head h2 { font-size: 23px; }

  .page-head { padding: 34px 0 30px; }
  .page-head h1 { font-size: 28px; }
  .page-head p { font-size: 16px; }

  .prose { font-size: 16px; }
  .prose h2 { margin-top: 34px; font-size: 21px; }
  .prose h3 { margin-top: 26px; font-size: 18px; }

  .filter-bar { gap: 12px; }
  .filter-count { margin-left: 0; flex-basis: 100%; }

  .featured { padding: 32px 26px; }
  .featured h2 { font-size: 22px; }
}

@media (max-width: 560px) {
  .hero__title { font-size: 29px; }
  .hero__actions .btn { width: 100%; text-align: center; }
  .hero__stats { flex-wrap: wrap; gap: 22px 32px; }

  .card-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .filter-group { flex-wrap: wrap; }
  .filter-pills { width: 100%; }
  .filter-pills a { flex: 1; text-align: center; padding: 8px 6px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 30px; }

  .sponsors__row { gap: 22px 32px; }
  .sponsors__row img { height: 28px; }
  .sponsors__row img[src*="theramex"] { height: 56px; }

  .webinar-item { flex-direction: column; gap: 14px; padding: 18px; }
  .webinar-item__date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 12px;
  }
  .webinar-item__date .tag { font-size: 20px; }
  .webinar-item__body h2,
  .webinar-item__body h3 { font-size: 16.5px; }
}

/* --------------------------------------------------------------------------
   12. Druck
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .nav-burger, .sponsors { display: none; }
  body { color: #000; background: #fff; }
}