/* ====================================================================
   Stylesheet fuer lernen.html – im Stil von sokrateam.de

   Die Gestaltung folgt sokrateam.de. Dort wiederum stammt sie von
   teamfixx – zurueck kommen die Verfeinerungen aus jenem Umbau.

   Das klingt nach einem Kreis, ist aber keiner: Was von dort
   zurueckkommt, sind die Verfeinerungen aus dem Umbau.

   - #2b2b2b als dunkler Ton statt des Dunkelblaus #1a1a2e. Warmes
     Neutralgrau statt Blaustich.
   - Ein aufgehelltes Rot #ff8a8a fuer dunkle Flaechen. Das Markenrot
     hat auf Anthrazit zu wenig Kontrast; Ziffern und betonte Woerter
     waren dort praktisch unsichtbar.
   - Abschnittstitel vollstaendig in Rot, das hervorgehobene Wort
     dagegen im dunklen Ton. In einer roten Zeile waere ein rotes Wort
     unsichtbar – die Betonung dreht das Vorzeichen um.
   - Leisten, die am Inhaltsraster ausgerichtet sind statt randlos
     ueber die volle Fensterbreite zu laufen.

   Das Markup von lernen.html bleibt unveraendert; hier
   werden nur seine Klassen neu gefasst. Die Kalenderregeln stehen
   weiterhin in Style-Lernen-Kalender.css.
   ==================================================================== */


/* --------------------------------------------------------------------
   Grundwerte
   -------------------------------------------------------------------- */

:root {
  --red: #990000;
  --red-dunkel: #7a0000;
  /* Gilt ausschliesslich auf dunklem Grund. */
  --red-hell: #ff8a8a;
  --dunkel: #2b2b2b;
  --ink: #333333;
  --grey: #666666;
  --grey-2: #A6A6A6;
  --linie: #e0e0e0;
  --linie-hell: #f0f0f0;
  --paper: #ffffff;
  --paper-2: #f8f8f8;
  --rot-hauch: #fff5f5;

  --schrift: 'Inter', system-ui, -apple-system, sans-serif;

  --kachel-radius: 16px;
  --kachel-schatten: 0 4px 20px rgba(0, 0, 0, 0.05);
  --kachel-schatten-hoch: 0 12px 32px rgba(0, 0, 0, 0.1);
}


/* --------------------------------------------------------------------
   Zuruecksetzen und Grundtypografie

   Durchgehend Inter, auch in den Ueberschriften. Die Serifenschrift
   der ersten Fassung entfaellt ersatzlos.
   -------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--schrift);
  color: var(--ink);
  background-color: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--schrift); line-height: 1.2; color: var(--dunkel); }
h1 { font-size: 60px; font-weight: 800; line-height: 1.05; }
h2 { font-size: 48px; font-weight: 800; color: var(--red); line-height: 1.1; margin-bottom: 40px; }
h3 { font-size: 22px; font-weight: 700; }
h4 { font-size: 20px; font-weight: 700; }

p { margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color 0.2s ease; }

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

::selection { background-color: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Das hervorgehobene Wort dreht das Vorzeichen um: dunkel in roter
   Zeile, aufgehelltes Rot auf dunklem Grund. Die Selektoren sind
   bewusst spezifischer als .text-red, das im Markup daran haengt. */
.section h1 em, .section h2 em,
.hero em, .camp-box h3 em { font-style: normal; color: var(--dunkel); }
.section-dark h2 em, .section-dark .text-red { color: var(--red-hell); }

.text-xs   { font-size: 13px; }
.text-sm   { font-size: 15px; }
.text-lg   { font-size: 20px; }
.text-grey { color: var(--grey); }
.text-red  { color: var(--red); }
.mt-4 { margin-top: 24px; }
.mt-8 { margin-top: 40px; }
.mb-4 { margin-bottom: 24px; }

.skip-link {
  position: absolute; left: 20px; top: -4rem; z-index: 2000;
  background-color: var(--dunkel); color: #fff;
  padding: 10px 20px; border-radius: 8px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 20px; }

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


/* --------------------------------------------------------------------
   Raster und Abschnitte
   -------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 64px;
}

.section { padding-block: 100px; }
.section-alt { background-color: var(--paper-2); }

.section-dark { background-color: var(--dunkel); color: #fff; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .text-grey { color: var(--grey-2); }

.grid-3, .grid-4 { display: grid; gap: 32px; margin-top: 40px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }


/* --------------------------------------------------------------------
   Einblenden beim Scrollen
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
  .reveal.active { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------
   Kopfzeile: schwebender Glasbalken

   Das Markup bringt .site-header mit .header-inner mit. Der Balken
   sitzt auf der inneren Huelle, damit er sich auf seinen Inhalt
   zusammenzieht statt die Seitenbreite einzunehmen.
   -------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 20px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.header-inner {
  width: auto;
  max-width: calc(100% - 40px);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  border-radius: 8px;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(clamp(8px, 1em, 20px));
  backdrop-filter: blur(clamp(8px, 1em, 20px));
  background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.2), rgba(255,255,255,0.05));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset 0 -1px 1px rgba(255,255,255,0.1),
    0 8px 32px rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(255,255,255,0.2);
}

/* Der Glasbalken lebt vom Durchscheinen. Ueber weissem Inhalt geht er
   verloren, deshalb bekommt er beim Scrollen einen eigenen Grund. */
.site-header.scrolled .header-inner {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.05);
}

.logo { display: flex; align-items: center; }
.logo img { height: 34px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 28px; }

.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  font-size: 15px;
  font-weight: 600;
  color: var(--dunkel);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--red); }
.nav-links a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }

.nav-cta {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: var(--red);
  padding: 10px 24px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(153,0,0,0.25);
  transition: all 0.3s ease;
}
.nav-cta:hover { background-color: var(--red-dunkel); transform: translateY(-1px); }

.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.hamburger, .hamburger::before, .hamburger::after {
  display: block; width: 24px; height: 2px;
  background-color: var(--dunkel);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburger::before, .hamburger::after { content: ''; position: relative; }
.hamburger::before { top: -7px; }
.hamburger::after  { top: 5px; }
.menu-open .hamburger { background-color: transparent; }
.menu-open .hamburger::before { transform: translateY(7px) rotate(45deg); }
.menu-open .hamburger::after  { transform: translateY(-5px) rotate(-45deg); }


/* --------------------------------------------------------------------
   Aufmacher

   Das Kopfbild bleibt, tritt aber weit zurueck: Es liegt als ruhige
   Flaeche unter dem Text, damit die Zeile traegt.
   -------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #fafafa 0%, #f0eeec 100%);
}

.hero-bild { position: absolute; inset: 0; z-index: 0; }

/* Das Bild laeuft in voller Staerke. Der Bildausschnitt ist auf das
   Gesicht gelegt, das direkt herausschaut – bei 62 Prozent der Breite
   und 32 Prozent der Hoehe. Damit bleibt es im Bild, egal wie stark
   der Ausschnitt beschnitten wird. */
.hero-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 32%;
}

/* Der Schleier deckt nur die linke Haelfte, auf der der Text steht,
   und laeuft vor dem Gesicht aus. Ein gleichmaessiger Schleier ueber
   das ganze Bild kostet beides: die Lesbarkeit gewinnt er nur dort,
   wo Text ist, das Bild verliert er ueberall.

   Die Stufen sind eng gesetzt: Bis 34 Prozent deckt er praktisch
   ganz, ab 62 Prozent gar nicht mehr. Dazwischen liegt der Uebergang,
   und er endet, bevor das Gesicht beginnt. */
.hero-bild::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    #f7f5f3 0%,
    rgba(247,245,243,0.97) 34%,
    rgba(247,245,243,0.80) 46%,
    rgba(247,245,243,0.30) 56%,
    rgba(247,245,243,0) 64%);
}

/* Der Textblock bleibt schmaler als zuvor, damit zwischen der letzten
   Zeile und dem Gesicht Luft steht. Auf dem Bild waere er sonst genau
   dort zu Ende, wo das Bild anfaengt zu tragen. */
.hero-inhalt {
  position: relative;
  z-index: 1;
  padding-block: 190px 110px;
  max-width: 700px;
}

.hero h1 { color: var(--red); margin-bottom: 20px; }

.hero-zeile {
  font-size: 24px;
  font-weight: 600;
  color: var(--dunkel);
  margin-bottom: 36px;
  max-width: 46ch;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }


/* --------------------------------------------------------------------
   Schaltflaechen
   -------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--schrift);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  padding: 14px 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.btn-primary { color: #fff; background-color: var(--red); box-shadow: 0 4px 12px rgba(153,0,0,0.2); }
.btn-primary:hover { background-color: var(--red-dunkel); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(153,0,0,0.28); }

.btn-outline { color: var(--red); background: transparent; border-color: rgba(153,0,0,0.3); }
.btn-outline:hover { background: var(--rot-hauch); border-color: var(--red); }

.section-dark .btn-outline { color: #fff; border-color: rgba(255,255,255,0.4); }
.section-dark .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.btn-klein { font-size: 14px; padding: 8px 16px; border-radius: 6px; }


/* --------------------------------------------------------------------
   Kachel – Grundform fast aller Inhaltsbloecke
   -------------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--linie);
  border-radius: var(--kachel-radius);
  padding: 32px 28px;
  box-shadow: var(--kachel-schatten);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--kachel-schatten-hoch); }

.card h3 { color: var(--dunkel); margin-bottom: 12px; }
.card p  { color: var(--grey); font-size: 16px; }

.section-dark .card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.section-dark .card h3 { color: #fff; }
.section-dark .card p  { color: rgba(255,255,255,0.75); }


/* --------------------------------------------------------------------
   Der Schmerzpunkt

   Ein einzelner Absatz mit roter Kante links – die Behauptung, auf
   die die ganze Seite antwortet.
   -------------------------------------------------------------------- */

.schmerzpunkt {
  background: var(--rot-hauch);
  border: 1px solid rgba(153,0,0,0.1);
  border-left: 6px solid var(--red);
  border-radius: 12px;
  padding: 32px 36px;
  max-width: 1100px;
  box-shadow: 0 10px 30px rgba(153,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.schmerzpunkt:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(153,0,0,0.12); }
.schmerzpunkt p { font-size: 22px; line-height: 1.5; color: var(--ink); }
.schmerzpunkt strong { color: var(--red); font-weight: 700; }


/* --------------------------------------------------------------------
   Fuer wen? – Kacheln mit Bild
   -------------------------------------------------------------------- */

.ziel-karte { padding: 0; overflow: hidden; border-color: var(--linie-hell); }

.ziel-bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.ziel-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.ziel-karte:hover .ziel-bild img { transform: scale(1.04); }

.ziel-inhalt { padding: 28px; }
.ziel-inhalt h3 { margin-bottom: 10px; }

.ziel-liste { list-style: none; margin-top: 14px; }
.ziel-liste li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  color: var(--grey);
  margin-bottom: 8px;
}
.ziel-liste li::before {
  content: '';
  position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background-color: var(--red);
}


/* --------------------------------------------------------------------
   Drei Formate

   Das mittlere ist das namengebende. Es wird nicht groesser, sondern
   dunkler – das Raster bleibt ruhig, die Betonung eindeutig.
   -------------------------------------------------------------------- */

.format-name {
  font-size: 32px;
  font-weight: 800;
  color: var(--red);
  line-height: 1.1;
}

.format-menge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-block: 8px 14px;
}

.format-karte--betont { background: var(--dunkel); border-color: var(--dunkel); }
.format-karte--betont .format-name  { color: #fff; }
.format-karte--betont .format-menge { color: var(--grey-2); }
.format-karte--betont p { color: rgba(255,255,255,0.8); }

.format-schluss {
  text-align: center;
  font-size: 15px;
  color: var(--grey);
  margin-top: 32px;
}
.format-schluss strong { color: var(--red); }


/* --------------------------------------------------------------------
   Was Sie lernen
   -------------------------------------------------------------------- */

.lern-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.lern-karte--gross {
  grid-row: span 2;
  position: relative;
  min-height: 340px;
  padding: 0;
  border: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.lern-karte--gross::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.1) 100%);
}
.lern-karte--gross .lern-text { position: relative; z-index: 1; margin-top: auto; padding: 28px; }
.lern-karte--gross h3 { color: #fff; }
.lern-karte--gross p  { color: rgba(255,255,255,0.85); font-size: 15px; }

.lern-karte--breit { grid-column: span 2; }

.symbol {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 999px;
  background-color: rgba(153,0,0,0.08);
  color: var(--red);
  margin-bottom: 16px;
  flex: none;
}

.marken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.marke {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background-color: var(--paper-2);
  border: 1px solid var(--linie-hell);
}


/* --------------------------------------------------------------------
   Ihr Gewinn – nummerierte Liste auf dunklem Grund
   -------------------------------------------------------------------- */

.gewinn-liste { list-style: none; counter-reset: gewinn; margin-top: 40px; }

.gewinn-punkt {
  counter-increment: gewinn;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 24px;
  padding-block: 32px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.gewinn-punkt:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }

.gewinn-punkt::before {
  content: counter(gewinn, decimal-leading-zero);
  font-size: 32px;
  font-weight: 800;
  color: var(--red-hell);
  line-height: 1;
}
.gewinn-punkt h3 { color: #fff; margin-bottom: 10px; }
.gewinn-punkt p  { color: rgba(255,255,255,0.75); }


/* --------------------------------------------------------------------
   Empfohlener Einstieg
   -------------------------------------------------------------------- */

.schritt-marke {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.schritt-marke--frei   { background: var(--paper-2); color: var(--grey); }
.schritt-marke--rot    { background: var(--rot-hauch); color: var(--red); }
.schritt-marke--dunkel { background: rgba(255,255,255,0.12); color: #fff; }

.schritt-karte h3 { font-size: 20px; }

/* Der Hinweis fuer Erfahrene steht abgesetzt, damit man ihn beim
   Ueberfliegen findet. */
.profi-hinweis {
  background: var(--paper-2);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 15px;
}
.profi-hinweis strong { color: var(--red); }

.schritt-meta { margin-top: auto; padding-top: 20px; font-size: 15px; color: var(--grey); }

.schritt-karte--dunkel { background: var(--dunkel); border-color: var(--dunkel); }
.schritt-karte--dunkel h3 { color: #fff; }
.schritt-karte--dunkel p  { color: rgba(255,255,255,0.78); }
.schritt-karte--dunkel .profi-hinweis {
  background: rgba(255,255,255,0.07);
  border-left-color: var(--red-hell);
  color: rgba(255,255,255,0.85);
}
.schritt-karte--dunkel .profi-hinweis strong { color: var(--red-hell); }
.schritt-karte--dunkel .schritt-meta { color: var(--grey-2); }


/* --------------------------------------------------------------------
   Aufbau der Ausbildung
   -------------------------------------------------------------------- */

.teil { margin-top: 80px; }
.teil:first-of-type { margin-top: 48px; }

.teil-kopf {
  padding-bottom: 14px;
  border-bottom: 3px solid var(--red);
  margin-bottom: 24px;
}
.teil-kopf h3 { font-size: 32px; font-weight: 800; color: var(--dunkel); }

.teil-liste { list-style: none; margin-block: 20px; }
.teil-liste li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.teil-liste li::before {
  content: '';
  position: absolute; left: 0; top: 0.7em;
  width: 14px; height: 2px;
  background-color: var(--red);
}

.webinar-ueberschrift {
  font-size: 22px;
  font-weight: 700;
  color: var(--dunkel);
  margin-block: 40px 20px;
}

.webinar-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.webinar-karte { padding: 24px; }

.webinar-kopf {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}
.webinar-kopf .webinar-icon { width: 48px; height: 48px; }

.webinar-kennung {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}
.webinar-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--dunkel);
  line-height: 1.3;
  margin-top: 4px;
}

/* Die Symbolfarbe trennt die kostenfreien Grundlagen von der
   kostenpflichtigen Methode.

   Rot gehoert ausschliesslich teamfixx. Die A-Reihe ist ausdruecklich
   methodenneutral – die Seite sagt selbst "unabhaengig von Methode
   oder Rolle" – und traegt deshalb den dunklen Grundton. Damit wird
   das Rot lesbar: wo es steht, geht es um das Verfahren, und dort
   kostet es etwas.

   Ein zweiter Buntton waere die naheliegende, aber falsche Loesung:
   Die Palette hat genau einen Akzent, ein weiterer wuerde sie
   entwerten. Unterschieden wird deshalb ueber den Kontrast zwischen
   Akzent und Neutralton.

   Gewaehlt ist das mittlere Grau, nicht der dunkle Grundton: Bei
   duennen Strichen von 48 Pixeln liegen #990000 und #2b2b2b beide im
   dunklen Bereich, der Unterschied ist dann allein einer des
   Farbtons. #666666 unterscheidet sich zusaetzlich in der Helligkeit
   und ist deshalb auch im Vorbeischauen zu erkennen.

   Die Farbe steht hier und nicht im Markup, damit sie sich an einer
   Stelle aendern laesst. Praesentationsattribute wie stroke="…" im
   SVG unterliegen jeder CSS-Regel, deshalb genuegt das. */
#module_a .webinar-icon,
#module_a .webinar-icon * { stroke: var(--grey); }

/* Im Sommercamp gilt dasselbe: Die ersten beiden Tage wiederholen die
   Grundlagen und sind kostenfrei, die beiden folgenden sind teamfixx
   und kosten. Das betrifft auch die kleinen Symbole der
   Inhaltsuebersicht. */
.camp-box .webinar-raster:first-of-type .webinar-icon,
.camp-box .webinar-raster:first-of-type .webinar-icon *,
.camp-box .webinar-raster:first-of-type .camp-inhalt svg,
.camp-box .webinar-raster:first-of-type .camp-inhalt svg * { stroke: var(--grey); }

/* Die Kennung darueber folgt der Symbolfarbe, sonst zerfaellt die
   Karte in zwei Aussagen. */
#module_a .webinar-kennung,
.camp-box .webinar-raster:first-of-type .webinar-kennung { color: var(--grey); }

.webinar-karte > p { font-size: 15px; color: var(--grey); }

.webinar-fuss {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.webinar-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.webinar-preis { font-size: 15px; font-weight: 700; color: var(--dunkel); text-align: right; }
.webinar-preis span { display: block; font-weight: 400; font-size: 13px; color: var(--grey); }

.camp-inhalt { list-style: none; margin-bottom: 14px; }
.camp-inhalt li { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; }
.camp-inhalt svg { flex: none; }

.camp-box {
  border: 2px solid var(--red);
  border-radius: var(--kachel-radius);
  padding: 32px;
  margin-top: 64px;
  background: var(--paper);
}
.camp-box > h3 { font-size: 28px; font-weight: 800; color: var(--red); margin-bottom: 24px; }


/* --------------------------------------------------------------------
   Vergleich mit klassischer Mediation
   -------------------------------------------------------------------- */

.vergleich { margin-block: 48px; }
.vergleich h4 { font-size: 24px; font-weight: 800; color: var(--dunkel); margin-bottom: 8px; }
.vergleich-vorspann { color: var(--grey); margin-bottom: 24px; }

.vergleich-tabelle {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--paper);
  border: 1px solid var(--linie);
  border-radius: var(--kachel-radius);
  overflow: hidden;
}
.vergleich-tabelle th {
  width: 50%;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  color: var(--dunkel);
  background: var(--paper-2);
  padding: 16px;
  border-bottom: 2px solid var(--linie);
}
.vergleich-tabelle th.spalte-teamfixx { color: var(--red); }

.vergleich-tabelle td {
  vertical-align: top;
  padding: 20px 16px;
  border-bottom: 1px solid var(--linie-hell);
  font-size: 15px;
  color: var(--grey);
}
.vergleich-tabelle tr:last-child td { border-bottom: 0; }
.vergleich-tabelle td strong {
  display: block;
  font-size: 16px;
  color: var(--dunkel);
  margin-bottom: 6px;
}
.vergleich-tabelle .zelle-teamfixx { background: rgba(153,0,0,0.03); }

.vergleich-fazit {
  margin-top: 24px;
  padding: 24px 28px;
  background: var(--dunkel);
  color: rgba(255,255,255,0.85);
  border-radius: 12px;
}
.vergleich-fazit strong { color: #fff; }


/* --------------------------------------------------------------------
   Was wir nicht verschweigen
   -------------------------------------------------------------------- */

.hinweis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 40px;
  padding: 24px 28px;
  background: var(--rot-hauch);
  border: 1px solid rgba(153,0,0,0.15);
  border-left: 6px solid var(--red);
  border-radius: 12px;
}
.hinweis h4 { font-size: 20px; color: var(--dunkel); margin-bottom: 8px; }
.hinweis p  { color: var(--ink); }
.hinweis em { font-style: normal; font-weight: 700; color: var(--red); }

.teil-details { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 20px; }
.teil-detail {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--dunkel);
}
.teil-detail svg { color: var(--red); flex: none; }


/* --------------------------------------------------------------------
   Qualifikationsstufen
   -------------------------------------------------------------------- */

.stufen { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }

.stufe {
  display: grid;
  grid-template-columns: 96px 3.5rem 1fr;
  gap: 24px;
  align-items: center;
  padding: 20px 28px;
  border-radius: 12px;
}
.stufe img { width: 96px; height: auto; }

.stufe-nummer { font-size: 40px; font-weight: 800; color: var(--linie); line-height: 1; transition: color 0.3s ease; }
.stufe:hover .stufe-nummer { color: var(--red); }

.stufe h3 { font-size: 20px; margin-bottom: 6px; }
.stufe p  { font-size: 15px; }


/* --------------------------------------------------------------------
   Kalender

   Er bringt eigene Mindestbreiten mit und braucht mehr Platz als der
   uebrige Inhalt; der eigene Scrollbereich verhindert, dass er auf
   schmalen Bildschirmen die ganze Seite waagerecht scrollen laesst.
   -------------------------------------------------------------------- */

.container-kalender {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 64px;
}
#visual-calendar { overflow-x: auto; }


/* --------------------------------------------------------------------
   Fussbereich – schwarz wie bei SOKRATeam
   -------------------------------------------------------------------- */

.site-footer { background-color: #000; color: rgba(255,255,255,0.7); padding-block: 64px 32px; }

.footer-raster { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }

.footer-marke { font-size: 32px; font-weight: 800; color: var(--red); margin-bottom: 8px; }
.footer-spruch { color: rgba(255,255,255,0.7); }

.footer-spalte h4 { color: #fff; font-size: 16px; margin-bottom: 16px; }
.footer-spalte ul { list-style: none; }
.footer-spalte li { margin-bottom: 10px; }
.footer-spalte a  { color: rgba(255,255,255,0.7); font-size: 15px; }
.footer-spalte a:hover { color: #fff; }

.footer-schluss {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: rgba(255,255,255,0.45);
}


/* --------------------------------------------------------------------
   Schmalere Bildschirme
   -------------------------------------------------------------------- */

/* Der Umbruchpunkt ist gemessen, nicht uebernommen: Die Leiste ist
   mit drei Navigationspunkten und der Schaltflaeche 589 Pixel breit.
   Sie passt damit bis weit unter 900 Pixel Fensterbreite – frueher
   umzuklappen waere unnoetig. (Auf sokrateam.de liegt der Wert bei
   1150, dort sind es sechs Punkte, teils mit langen Woertern.) */
/* Der Umbruch liegt bei 1200 und nicht erst bei 900 Pixeln. Grund:
   Der Textblock ist in Pixeln begrenzt, der Schleier in Prozent. Je
   schmaler das Fenster, desto groesser der Anteil, den der Text
   einnimmt – ab etwa 1200 Pixeln reicht seine letzte Zeile in die
   Zone, in der der Schleier schon auslaeuft.

   Statt den Schleier zu verbreitern und damit das Gesicht wieder
   zuzudecken, wandert das Bild dort unter den Text: sauberer Grund
   fuer die Schrift, volle Staerke fuer das Bild. */
@media (max-width: 1200px) {
  .hero { display: flex; flex-direction: column; }
  .hero-bild { position: static; order: 2; height: 300px; }
  .hero-bild::after { display: none; }
  .hero-inhalt { max-width: none; padding-block: 160px 56px; }
}

@media (max-width: 900px) {
  .hero-bild { height: 240px; }
  .hero-inhalt { padding-block: 150px 48px; }

  .menu-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 20px; right: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: rgba(255,255,255,0.97);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    display: none;
  }
  .menu-open .main-nav { display: flex; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 0; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding-block: 10px; font-size: 16px; border-bottom: 1px solid var(--linie-hell); }
  .nav-links li:last-child a { border-bottom: 0; }
}

@media (max-width: 1100px) {
  .lern-raster { grid-template-columns: repeat(2, 1fr); }
  .lern-karte--gross { grid-row: span 1; grid-column: span 2; }
  .lern-karte--breit { grid-column: span 2; }
  .footer-raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  h1 { font-size: 36px; }
  h2 { font-size: 32px; margin-bottom: 24px; }

  .container, .container-kalender { padding-inline: 20px; }
  .section { padding-block: 64px; }

  .hero-inhalt { padding-block: 140px 64px; }
  .hero-zeile { font-size: 18px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }

  .schmerzpunkt { padding: 24px 20px; }
  .schmerzpunkt p { font-size: 18px; }

  .lern-raster, .webinar-raster { grid-template-columns: 1fr; }
  .lern-karte--gross, .lern-karte--breit { grid-column: span 1; }

  .gewinn-punkt { grid-template-columns: 1fr; gap: 8px; }

  .teil-kopf h3 { font-size: 24px; }
  .camp-box { padding: 24px 20px; }

  .stufe { grid-template-columns: 64px 1fr; row-gap: 12px; }
  .stufe img { width: 64px; }
  .stufe-nummer { display: none; }

  /* Tabelle gestapelt: die Kopfzeile entfaellt, jede Zelle traegt
     ihre Zuordnung selbst. */
  .vergleich-tabelle, .vergleich-tabelle tbody, .vergleich-tabelle tr, .vergleich-tabelle td { display: block; width: 100%; }
  .vergleich-tabelle thead { display: none; }
  .vergleich-tabelle tr { margin-bottom: 16px; }
  .vergleich-tabelle td::before {
    content: attr(data-spalte);
    display: block;
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--grey);
    margin-bottom: 6px;
  }
  .vergleich-tabelle td.zelle-teamfixx::before { color: var(--red); }

  .footer-raster { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .hero-ctas, .webinar-aktionen { display: none; }
  .section { padding-block: 24px; }
  .card, .stufe { break-inside: avoid; }
}


/* --------------------------------------------------------------------
   Cookie-Einwilligung

   Das Banner erzeugt Javascript-Cookies.js; es setzt kein Markup
   voraus. Die Form folgt den uebrigen Kacheln dieser Seite: heller
   Grund, 16 Pixel Radius, weicher Schatten. "Nur Essenzielle" steht
   als Umrissschaltflaeche, "Alle Akzeptieren" gefuellt – die
   zustimmende Wahl ist die auffaelligere, die ablehnende bleibt
   gleichrangig erreichbar und nicht versteckt.
   -------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 460px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 28px;
  font-family: var(--schrift);
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--linie);
  border-radius: var(--kachel-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(150%);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.cookie-banner.visible { transform: translateY(0); }

.cookie-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dunkel);
}

.cookie-text {
  font-size: 15px;
  color: var(--grey);
  line-height: 1.55;
}
.cookie-text a { color: var(--red); text-decoration: underline; text-underline-offset: 0.15em; }
.cookie-text a:hover { color: var(--red-dunkel); }

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

.cookie-btn {
  flex: 1 1 auto;
  font-family: var(--schrift);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cookie-btn-accept { color: #fff; background: var(--red); box-shadow: 0 4px 12px rgba(153,0,0,0.2); }
.cookie-btn-accept:hover { background: var(--red-dunkel); transform: translateY(-2px); }

.cookie-btn-deny { color: var(--red); background: transparent; border-color: rgba(153,0,0,0.3); }
.cookie-btn-deny:hover { background: var(--rot-hauch); border-color: var(--red); }

@media (max-width: 768px) {
  .cookie-banner { left: 16px; right: 16px; bottom: 16px; padding: 20px; max-width: none; }
  .cookie-buttons { flex-direction: column; }
}


/* ====================================================================
   RECHTSTEXTE

   Impressum, Datenschutzerklaerung und Teilnahmebedingungen behalten
   ihren Rumpf unveraendert; hier werden nur ihre Klassen neu gefasst.

   Fliesstext will kurze Zeilen. Die 1600 Pixel des uebrigen Rasters
   gelten deshalb nicht: Der Block wird schmaler und mittig gesetzt,
   der Text selbst bleibt linksbuendig bei rund 900 Pixeln.
   ==================================================================== */

.legal-page {
  padding-block: 180px 100px;
  background-color: var(--paper);
}

.legal-container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 64px;
}

.legal-title {
  font-size: 48px;
  font-weight: 800;
  color: var(--red);
  line-height: 1.1;
  margin-bottom: 40px;
}

.legal-section { margin-bottom: 48px; max-width: 900px; }

.legal-section h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--dunkel);
  margin-bottom: 16px;
}
.legal-section h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--dunkel);
  margin-block: 28px 10px;
}
.legal-section p  { margin-bottom: 16px; color: var(--ink); }
.legal-section ul, .legal-section ol { margin: 0 0 16px 24px; }
.legal-section li { margin-bottom: 8px; }
.legal-section a  { color: var(--red); text-decoration: underline; text-underline-offset: 0.15em; }
.legal-section a:hover { color: var(--red-dunkel); }
.legal-section strong { color: var(--dunkel); }

/* Anschriften und Kontaktangaben: als Block abgesetzt, damit sie sich
   vom Fliesstext abheben, ohne einen eigenen Kasten zu brauchen. */
.legal-address {
  border-left: 3px solid var(--red);
  padding-left: 20px;
  margin-block: 16px 24px;
}
.legal-address p { margin-bottom: 4px; }
.legal-address p:last-child { margin-bottom: 0; }

/* Die Fassungszeile am Ende. */
.legal-update {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
  font-size: 15px;
  color: var(--grey);
  max-width: 900px;
}

@media (max-width: 768px) {
  .legal-page { padding-block: 140px 64px; }
  .legal-container { padding-inline: 20px; }
  .legal-title { font-size: 32px; margin-bottom: 24px; }
  .legal-section h2 { font-size: 24px; }
  .legal-section { margin-bottom: 32px; }
}


/* ====================================================================
   AUFMACHER MIT KOPFBILD

   Anmeldung und Standards setzen ihren Aufmacher-Text mittig ueber das
   Bild – anders als lernen.html, wo er links steht. Ein Verlauf, der
   nur eine Seite deckt, hilft dort deshalb nicht; stattdessen liegt
   ein gleichmaessiger heller Schleier ueber dem Bild.

   Das Bild bleibt dabei in voller Staerke: Der Schleier daempft es,
   loescht es aber nicht. Die Alternative – Bild auf 15 Prozent
   Deckkraft – kostet die Wirkung und bringt keine Lesbarkeit dazu.
   ==================================================================== */

.hero-scroll-wrapper { position: relative; z-index: 1; }

.hero-image-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  background-color: var(--paper);
}
.hero-image-frame img,
.hero-image { width: 100%; height: 100%; object-fit: cover; }

.hero-image-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(250,249,248,0.72) 0%,
    rgba(250,249,248,0.86) 45%,
    rgba(250,249,248,0.78) 100%);
}

.hero-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
  max-width: 1000px;
  z-index: 10;
}

.hero-headline {
  font-size: 60px;
  font-weight: 800;
  color: var(--red);
  line-height: 1.05;
  margin-bottom: 16px;
}
.hero-headline em { font-style: normal; color: var(--dunkel); }

.hero-subheadline {
  font-size: 24px;
  font-weight: 600;
  color: var(--dunkel);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .hero-headline { font-size: 34px; }
  .hero-subheadline { font-size: 18px; }
}


/* ====================================================================
   ANMELDESEITE – Angleichung

   Die Bauteile der Anmeldung stehen in einem eigenen Stilblock in der
   Seite selbst, mit eigenem Namensraum (anm-*). Der wird nicht neu
   geschrieben: Er ist der neuen Formensprache bereits nah – gleiches
   Rot, gleiche Radien, Pillen als Filter – und er traegt die Logik
   eines funktionierenden Buchungsablaufs.

   Angeglichen werden nur die Toene: #111 und #333 werden zum waermeren
   #2b2b2b, #ddd zur Linienfarbe des uebrigen Rasters. Diese Datei wird
   NACH dem Stilblock geladen, deshalb genuegt gleiche Spezifitaet.
   ==================================================================== */

/* Die Abschnittstitel der Anmeldung standen als einzige des Auftritts
   in einer Serifenschrift (DM Serif Display) und in Schwarz. Sie
   folgen jetzt der Form aller uebrigen Seiten: Inter, 48 Pixel,
   Staerke 800, ganz in Rot. Der Abstand nach unten bleibt knapper als
   bei .section-title, weil hier unmittelbar die Einleitungszeile
   folgt und nicht der Abschnittsinhalt. */
.anm-h2 {
  font-family: var(--schrift);
  font-size: 48px;
  font-weight: 800;
  color: var(--red);
  line-height: 1.1;
  margin-bottom: 16px;
}
.anm-h2 em { font-style: normal; color: var(--dunkel); }

.anm-lead, .anm-note { color: var(--grey); }

.anm-chip { border-color: var(--linie); color: var(--ink); }
.anm-chip:hover { border-color: var(--red); color: var(--red); }

.anm-step-no { font-size: 15px; }
.anm-step h3 { color: var(--dunkel); }

.anm-selected { border-radius: var(--kachel-radius); }
.anm-selected-title { color: var(--dunkel); }
.anm-selected-price { color: var(--red); }

.anm-dialog { border-radius: var(--kachel-radius); }
.anm-dialog h3, .anm-dialog h2 { color: var(--dunkel); }

/* Nachtrag: Beim Umstellen auf Inter wurde .anm-h2 angeglichen, die Titel IM
   Anmeldefenster aber uebersehen - der Stilblock von anmeldung.html setzt dort
   weiterhin 'DM Serif Display'. Betrifft den Termintitel (#anm-modal-titel) und
   die Bestaetigung (#anm-ok-titel); beide standen als einzige Ueberschriften des
   Auftritts noch in der Serifenschrift. Groesse, Farbe und Abstaende bleiben wie
   gehabt, nur die Schrift folgt jetzt dem Rest. */
.anm-dialog h2 { font-family: var(--schrift); }

.anm-field span, .anm-field label { color: var(--dunkel); }
.anm-field input, .anm-field select, .anm-field textarea { border-color: var(--linie); }
.anm-field input:focus, .anm-field select:focus, .anm-field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(153,0,0,0.1);
}

.anm-btn { box-shadow: 0 4px 12px rgba(153,0,0,0.2); }
.anm-btn:hover { background: var(--red-dunkel); }
.anm-btn--ghost { box-shadow: none; }

.anm-section--alt { background-color: var(--paper-2); }


/* ====================================================================
   BAUTEILE DES BESTANDS

   standards.html behaelt ihren Rumpf und damit die urspruenglichen
   Klassennamen von teamfixx. Sie werden hier in der neuen
   Formensprache gefasst – dieselben Bauteile, die lernen.html unter
   eigenen Namen bereits hat.
   ==================================================================== */

/* --- Abschnitte ----------------------------------------------------- */

.content-section { width: 100%; background-color: var(--paper); }
.content-section--alt { background-color: var(--paper-2); }

.section-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 64px;
}

.section-title {
  font-size: 48px;
  font-weight: 800;
  color: var(--red);
  line-height: 1.1;
  margin-bottom: 40px;
}
.section-title em { font-style: normal; color: var(--dunkel); }

.section-text, .results-text {
  font-size: 20px;
  color: var(--ink);
  line-height: 1.6;
  max-width: 1000px;
}
.section-text strong, .results-text strong { color: var(--dunkel); }


/* --- Zielgruppenkacheln --------------------------------------------- */

.target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.target-card {
  background: var(--paper);
  border: 1px solid var(--linie-hell);
  border-radius: var(--kachel-radius);
  overflow: hidden;
  box-shadow: var(--kachel-schatten);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.target-card:hover { transform: translateY(-4px); box-shadow: var(--kachel-schatten-hoch); }

.target-image-wrapper { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.target-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.target-card:hover .target-image { transform: scale(1.04); }

.target-content { padding: 28px; }
.target-title { font-size: 22px; font-weight: 700; color: var(--dunkel); margin-bottom: 10px; }
.target-desc { font-size: 16px; color: var(--grey); }

.target-sublist { list-style: none; margin-top: 14px; }
.target-sublist li {
  position: relative; padding-left: 20px;
  font-size: 15px; color: var(--grey); margin-bottom: 8px;
}
.target-sublist li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background-color: var(--red);
}


/* --- Lernkacheln ---------------------------------------------------- */

.learning-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.learn-card {
  background: var(--paper);
  border: 1px solid var(--linie);
  border-radius: var(--kachel-radius);
  box-shadow: var(--kachel-schatten);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.learn-card:hover { transform: translateY(-4px); box-shadow: var(--kachel-schatten-hoch); }
.learn-card h3 { font-size: 20px; font-weight: 700; color: var(--dunkel); margin-bottom: 10px; }
.learn-card p  { font-size: 15px; color: var(--grey); }

.learn-card-text { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.learn-card-wide { grid-column: span 2; padding: 28px; }

.learn-card-large {
  grid-column: span 2; grid-row: span 2;
  position: relative; min-height: 340px;
  border: 0;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.learn-card-overlay {
  position: relative; z-index: 1; width: 100%; padding: 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 70%, transparent 100%);
}
.learn-card-overlay h3 { color: #fff; }
.learn-card-overlay p  { color: rgba(255,255,255,0.85); }

.icon-box {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 999px;
  background-color: rgba(153,0,0,0.08);
  color: var(--red);
  margin-bottom: 16px;
}

.tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  background-color: var(--paper-2);
  border: 1px solid var(--linie-hell);
}


/* --- Ausbildungsteile und Webinarkarten ----------------------------- */

.training-grid { margin-top: 40px; }
.training-col { margin-bottom: 64px; }

.training-col-header {
  padding-bottom: 14px;
  border-bottom: 3px solid var(--red);
  margin-bottom: 24px;
}
.training-col-title { font-size: 32px; font-weight: 800; color: var(--dunkel); }
.training-col-desc  { font-size: 17px; color: var(--ink); margin-bottom: 16px; }

.training-list { list-style: none; margin-block: 20px; }
.training-list li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--ink); }
.training-list li::before {
  content: ''; position: absolute; left: 0; top: 0.7em;
  width: 14px; height: 2px; background-color: var(--red);
}

.webinar-list-title { font-size: 22px; font-weight: 700; color: var(--dunkel); margin-block: 40px 20px; }

.webinar-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.webinar-item {
  background: var(--paper);
  border: 1px solid var(--linie);
  border-radius: var(--kachel-radius);
  box-shadow: var(--kachel-schatten);
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.webinar-item:hover { transform: translateY(-4px); box-shadow: var(--kachel-schatten-hoch); }

.webinar-header {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  padding: 24px 24px 0;
}
.webinar-header .webinar-icon { width: 48px; height: 48px; }

.webinar-code-a, .webinar-code-b {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  grid-column: 2;
}
/* Grundlagen kostenfrei, teamfixx kostenpflichtig – dieselbe
   Unterscheidung wie auf lernen.html. */
.webinar-code-a { color: var(--grey); }
.webinar-code-b { color: var(--red); }

.webinar-title {
  grid-column: 2;
  display: block;
  font-size: 18px; font-weight: 700;
  color: var(--dunkel); line-height: 1.3;
  margin-top: 4px;
}

.webinar-desc { padding: 14px 24px 0; font-size: 15px; color: var(--grey); }
.card-price-row { font-size: 15px; font-weight: 700; color: var(--dunkel); }

.part-c-details { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 20px; }
.part-c-detail-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--dunkel);
}
.part-c-detail-item svg { color: var(--red); flex: none; }


/* --- Qualifikationsstufen ------------------------------------------- */

.levels-list { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }

.level-row-card {
  background: var(--paper);
  border: 1px solid var(--linie);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.level-row-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--kachel-schatten);
  border-color: rgba(153,0,0,0.25);
}

.level-header { display: flex; align-items: center; padding: 20px 28px; gap: 24px; }
.level-seal-wrapper { flex: none; width: 96px; }
.level-seal-small { width: 96px; height: auto; }

.level-main-info { display: flex; align-items: center; gap: 24px; }
.level-number-small {
  font-size: 40px; font-weight: 800;
  color: var(--linie); line-height: 1;
  transition: color 0.3s ease;
}
.level-row-card:hover .level-number-small { color: var(--red); }

.level-titles h3 { font-size: 20px; font-weight: 700; color: var(--dunkel); margin-bottom: 6px; }
.level-titles p  { font-size: 15px; color: var(--grey); }


/* --- Einzelnes ------------------------------------------------------ */

.btn-primary-download {
  display: inline-block;
  font-family: var(--schrift);
  font-size: 16px; font-weight: 600;
  color: #fff; background-color: var(--red);
  padding: 14px 28px;
  border: none; border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(153,0,0,0.2);
  transition: all 0.2s ease;
}
.btn-primary-download:hover { background-color: var(--red-dunkel); transform: translateY(-2px); }

.pdf-preview-wrapper {
  background: var(--paper-2);
  border: 1px solid var(--linie);
  border-radius: var(--kachel-radius);
  padding: 24px;
}

.yt-video-wrapper { margin-top: 40px; }
.yt-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--kachel-radius);
  overflow: hidden;
  box-shadow: var(--kachel-schatten-hoch);
}
.yt-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


@media (max-width: 1100px) {
  .learning-grid { grid-template-columns: repeat(2, 1fr); }
  .learn-card-large { grid-row: span 1; grid-column: span 2; }
}

@media (max-width: 768px) {
  .section-container { padding: 64px 20px; }
  .section-title { font-size: 32px; margin-bottom: 24px; }
  .anm-h2 { font-size: 32px; }
  .section-text, .results-text { font-size: 17px; }

  .target-grid, .learning-grid, .webinar-list { grid-template-columns: 1fr; }
  .learn-card-large, .learn-card-wide { grid-column: span 1; }

  .training-col-title { font-size: 24px; }

  .level-header { flex-wrap: wrap; gap: 16px; padding: 20px; }
  .level-seal-wrapper, .level-seal-small { width: 64px; }
  .level-number-small { display: none; }
}


/* ====================================================================
   MENUELEISTE – gleich auf allen Seiten

   Die Startseite spricht bewusst eine andere Sprache als der Rest:
   Sie wendet sich an Menschen in einer akuten Eskalation, die
   uebrigen Seiten an jene, die diese Hilfe anbieten lernen wollen.
   Der Unterschied ist gewollt.

   Die Menueleiste gehoert nicht dazu. Sie ist Orientierung, kein
   Ausdruck – und muss deshalb ueberall dieselbe sein. Die Werte hier
   sind aus Style.css uebernommen, dem Stylesheet der Startseite:
   Logo 40 Pixel, Punkte 14 Pixel fett mit 16 Pixel Abstand, weisser
   Kontaktknopf, beim Zeigen ein leichtes Zusammenziehen.

   Das Markup der neuen Seiten bleibt unangetastet; nur seine Werte
   werden angeglichen.
   ==================================================================== */

.logo img { height: 40px; }

.nav-links { gap: 16px; }

/* display:block ist hier nicht Kosmetik, sondern Voraussetzung:
   Auf Zeilenelemente wirkt transform nicht. Ohne diese Zeile wechselt
   beim Zeigen zwar die Farbe, das leichte Zusammenziehen der
   Startseite bliebe aber aus. Nebenbei traegt erst so der
   Innenabstand zur Hoehe bei, wie es auf der Startseite der Fall
   ist. */
.nav-links a {
  display: block;
  font-size: 14px;
  font-weight: 700;
  /* Der Grundtext dieser Seiten hat Zeilenhoehe 1.6, die Startseite
     nicht. Als Block wuerde der Punkt dadurch 42 statt 37 Pixel hoch
     und der ganze Balken zwei Pixel hoeher. */
  line-height: normal;
  color: #000;
  padding: 10px 24px;
  border-radius: 999px;
  border-bottom: 0;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.nav-links a:hover { color: var(--red); transform: scale(0.98); }

/* Der weisse Grund, der beim Zeigen kreisfoermig einlaeuft.
   Im Bestand heisst er "Liquid Wrap Animation (Center Bottom Origin)".

   Er liegt als Pseudo-Element HINTER dem Text (z-index -1) und wird
   ueber clip-path freigegeben: erst ein Punkt unten in der Mitte,
   dann ein Kreis, der ueber den Knopf hinauswaechst. Beim Weggehen
   laeuft dieselbe Bewegung rueckwaerts, weil nur der Zielwert
   wechselt und der Uebergang in beide Richtungen gilt.

   Zwei Voraussetzungen, ohne die nichts zu sehen waere: Der Verweis
   braucht position:relative, damit sich das Pseudo-Element an ihm
   ausrichtet, und einen eigenen z-index, damit der negative Wert des
   Grundes nicht hinter den Glasbalken rutscht. Beides steht auf der
   Startseite bereits in .nav-link. */
.nav-links a { position: relative; z-index: 10; background: transparent; }

.nav-links a::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 999vw;
  background: #ffffff;
  z-index: -1;
  opacity: 1;
  clip-path: circle(0% at 50% 100%);
  transform: none;
  transition: clip-path 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-links a:hover::before { clip-path: circle(150% at 50% 100%); }

/* Die Startseite markiert die eigene Seite nicht – sie ist die
   einzige ohne Geschwister im Menue. Auf den uebrigen Seiten bleibt
   die Markierung erhalten, aber nur als Farbe: Ein Unterstrich waere
   ein Bauteil, das die Startseite nicht kennt. */
.nav-links a[aria-current="page"] { color: var(--red); border-bottom: 0; }

/* Der Kontaktknopf traegt im Markup zusaetzlich .btn und .btn-primary.
   Die Kombination aus zwei Klassen setzt sich dagegen durch, ohne dass
   das Markup angefasst werden muss. */
.nav-cta.btn-primary {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background-color: #fff;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.nav-cta.btn-primary:hover {
  background-color: var(--red);
  color: #fff;
  transform: scale(0.98);
}

/* Nicht uebernommen wird die Farbe der Klappmenue-Striche. Auf der
   Startseite sind sie weiss, weil dort ein dunkles Kopfbild
   dahinterliegt. Auf den uebrigen Seiten steht die Leiste ueber
   hellem Inhalt – weisse Striche waeren dort unsichtbar. */

/* Auf der Startseite stehen Punkte und Kontaktknopf als Geschwister im
   Balken und teilen dessen Abstand von 32 Pixeln. Hier liegen sie in
   einer gemeinsamen Huelle, die ihren eigenen Abstand setzt - er muss
   deshalb ausdruecklich denselben Wert tragen. */
.main-nav { gap: 32px; }

/* Unter 768 Pixeln waechst das Logo auf der Startseite auf 50 Pixel.
   Damit die Leisten auch dort gleich aussehen, gilt das hier ebenso. */
@media (max-width: 768px) {
  .logo img { height: 50px; }
}

/* Der Grundtext dieser Seiten hat Zeilenhoehe 1.6, die Startseite
   nicht. Das machte den Kontaktknopf einen Pixel hoeher. */
.nav-cta.btn-primary { line-height: normal; }