/* =========================================================
   TRAININGSSEITEN — waermepumpentraining.html, fuehrungskraeftetraining.html

   Nur die Bausteine, die styles.css nicht hat. Farben, Schrift und
   Abstaende kommen aus den Tokens dort. Muss nach styles.css stehen.
   ========================================================= */

/* ---------- Hero: kurzer Titel, Unterzeile ---------- */
.training-hero .hero-title{
  font-size: clamp(34px, 5.2vw, 72px);
  margin-bottom: 20px;
}
.training-hero .hero-sub{
  max-width: 760px;
  margin: 0 auto;
  color: var(--text);
}
.training-hero .hero-eyebrow{ margin-bottom: 28px; }
@media (max-width:880px){
  .training-hero .hero-title{ font-size: clamp(30px, 9vw, 44px); }
  .training-hero .hero-eyebrow{ letter-spacing: 0.15em; }
}

/* Der Button-Text „Kostenloses Erstgespraech" ist auf kleinen Handys
   breiter als der Inhalt. Unter 360px darf er umbrechen. */
@media (max-width:480px){
  .btn{ padding: 16px 22px; letter-spacing: 0.1em; white-space: normal; }
}

/* ---------- Platzhalter fuer Videos (Hero, Erklaervideo, Fallstudien) ---------- */
.video-ph{
  width: 100%;
  aspect-ratio: 16/9;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 25% 20%, rgba(var(--shadow-rgb), 0.20), transparent 60%),
    var(--bg-2);
  color: var(--text-dim);
}
.hero-img-wrap .video-ph{ position: absolute; inset: 0; aspect-ratio: auto; }
.video-ph-icon{
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent-deep);
  color: var(--on-accent);
  margin-bottom: 6px;
}
.video-ph-icon svg{ width: 24px; height: 24px; margin-left: 3px; }
.video-ph strong{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text);
}
.video-ph span{ font-size: 13px; }
.section-light .video-ph{
  border-color: var(--line-light-strong);
  background:
    radial-gradient(ellipse at 25% 20%, rgba(var(--shadow-rgb), 0.12), transparent 60%),
    var(--light-3);
  color: var(--ink-dim);
}
.section-light .video-ph strong{ color: var(--ink); }

/* ---------- Kennzahlen ---------- */
.kennzahlen{ padding: 72px 0; }
.kennzahlen-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}
.kennzahl strong{
  display: block;
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.kennzahl > span{
  display: block;
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.kennzahl small{
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-dim);
}
.kennzahlen-quelle{
  margin-top: 36px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-dim);
}
.kennzahlen-quelle a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width:780px){
  .kennzahlen-grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Das erreichst du (dunkel, drei Spalten) ---------- */
.nutzen-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.nutzen{
  padding: 40px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.nutzen-icon{
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin-bottom: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent-deep);
  color: var(--on-accent);
}
.nutzen-icon svg{ width: 28px; height: 28px; }
.nutzen h3{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
  color: var(--text);
}
.nutzen p{ font-size: 15px; line-height: 1.7; color: var(--text-dim); }
@media (max-width:880px){
  .nutzen-grid{ grid-template-columns: 1fr; }
}

/* ---------- Probleme: Nummer statt Kreuz in .pain-list ---------- */
.pain-list .cross{ font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- Aufbau (hell). Das Erklaervideo steht im Hero. ---------- */
.erklaer-grid{ max-width: 820px; }
.erklaer-text .display{ font-size: clamp(26px, 2.8vw, 40px); }
.erklaer-text .lead{ margin-bottom: 0; }
.erklaer-text .btn{ margin-top: 32px; }
.erklaer-grid + .konzept-pillars{
  max-width: none;
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
}
.erklaer-grid + .konzept-pillars .pillar{ grid-template-columns: 48px 1fr; gap: 18px; }
.erklaer-grid + .konzept-pillars .pillar:last-child{ border-bottom: none; }
@media (max-width:880px){
  .erklaer-grid + .konzept-pillars{ grid-template-columns: 1fr; margin-top: 48px; }
  .erklaer-grid + .konzept-pillars .pillar:last-child{ border-bottom: 1px solid var(--line-light); }
}

/* Nur fuer Screenreader sichtbar */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Zentrierte Abschnittskoepfe mit Einleitung (Inhalte, Fehler) */
.section-head.center .lead{ margin-left: auto; margin-right: auto; margin-bottom: 0; }

/* ---------- Inhalte: Module der Akademie in drei Gruppen (dunkel) ---------- */
.inhalte-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.inhalte-gruppe{
  padding: 36px 32px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.inhalte-gruppe h3{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 8px;
}
.inhalte-liste{ list-style: none; }
.inhalte-liste li{
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.inhalt-num{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.inhalte-liste h4{
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
}
.inhalte-liste p{ font-size: 14px; line-height: 1.65; color: var(--text-dim); }
@media (max-width:1080px){
  .inhalte-grid{ grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
}
@media (max-width:480px){
  .inhalte-gruppe{ padding: 28px 22px 8px; }
}

/* ---------- Fehler: fuenf Fehler und eine Abschlusskarte (hell) ---------- */
.fehler-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fehler{
  padding: 32px 28px;
  border: 1px solid var(--line-light-strong);
  border-radius: var(--radius);
  background: var(--light-3);
}
.fehler--weitere{ border-color: var(--accent); }
.fehler-kopf{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.fehler-icon{
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ink-mute);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.fehler--weitere .fehler-icon{ border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.fehler h3{
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 10px;
}
.fehler p{ font-size: 15px; line-height: 1.65; color: var(--ink-dim); }
@media (max-width:1080px){
  .fehler-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:680px){
  .fehler-grid{ grid-template-columns: 1fr; }
}

/* ---------- Fallstudien-Platzhalter ---------- */
.ist-platzhalter{ font-style: italic; }
.fall-video--platzhalter{
  border-style: dashed;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(var(--shadow-rgb), 0.22), transparent 60%),
    var(--bg-2);
}
.fall-video--platzhalter::after{ content: none; }
.fall-video--platzhalter .fall-video-start{ cursor: default; }
.section-klienten .apply-cta{ margin-top: 48px; }

/* ---------- Vorher / Nachher (hell) ---------- */
.vergleich{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}
.vergleich-spalte{
  padding: 40px 36px;
  border: 1px solid var(--line-light-strong);
  border-radius: var(--radius);
  background: var(--light-3);
}
.vergleich-spalte--mit{ border-color: var(--accent); }
.vergleich-spalte h3{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.vergleich-liste{ list-style: none; }
.vergleich-liste li{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-light);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.vergleich-liste li:last-child{ border-bottom: none; padding-bottom: 0; }
.vergleich-liste strong{ color: var(--ink); font-weight: 600; }
.vergleich-icon{
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.vergleich-spalte--ohne .vergleich-icon{ border: 1px solid var(--ink-mute); color: var(--ink-dim); }
.vergleich-spalte--mit .vergleich-icon{ background: var(--accent); color: var(--on-accent); }
@media (max-width:880px){
  .vergleich{ grid-template-columns: 1fr; }
  .vergleich-spalte{ padding: 32px 24px; }
}

/* ---------- Fuer wen (dunkel, zwei Spalten mit Haken) ---------- */
.zielgruppe-liste{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  margin-bottom: 64px;
}
.zielgruppe-liste li{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 0;
  border-top: 1px solid var(--line-strong);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}
@media (max-width:780px){
  .zielgruppe-liste{ grid-template-columns: 1fr; }
}

/* ---------- Team (hell) ---------- */
.team-split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.team-split img{
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line-light);
}
.person + .person{ margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line-light); }
.person h3{ font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.person .team-role{ margin: 6px 0 12px; }
.person p{ font-size: 15px; line-height: 1.75; color: var(--ink-dim); }
@media (max-width:880px){
  .team-split{ grid-template-columns: 1fr; gap: 40px; }
}