/* =========================================================
   WAERMEPUMPENTRAINING — eigene Bilder und Abschnitte
   Nach styles.css und training.css geladen, nur auf dieser Seite.

   Leitmotiv Energie und Waerme: Im Hero fliesst Energie durch den
   Titel, die Kennzahlen laden sich wie ein Akku, im Energiekonzept fliesst
   Solarstrom zur Waermepumpe und Waerme ins Haus, der
   Verkaufsprozess ist eine Leitung mit drei Stationen.
   Gruen bleibt die Markenfarbe, Bernstein steht nur fuer Waerme.
   ========================================================= */

:root{
  --waerme: #f2a65a;
  --waerme-glanz: rgba(242, 166, 90, 0.35);
}

/* ---------- Bilder: Waermepumpe statt PV ---------- */
.hero .hero-image{
  background-image: url('./images/wp-aussengeraet-garten.webp');
  background-position: 30% 60%;
}

/* ---------- Hero: Titel mit Energiefluss ---------- */
.training-hero .hero-title em{
  background-image: linear-gradient(90deg, var(--accent-2) 0%, var(--accent-3) 25%, #e3f6ec 50%, var(--accent-3) 75%, var(--accent-2) 100%);
  background-size: 200% 100%;
  /* styles.css schaltet den Verlauf in Hervorhebungen ab, hier gewollt an */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titelfluss 6s linear infinite;
}
@keyframes titelfluss{ to{ background-position: 200% 0; } }

/* ---------- Kennzahlen: Ringe laden sich wie ein Akku ---------- */
.kennzahl-ring{
  position: relative;
  width: 172px; height: 172px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
}
.kennzahl-ring svg{ position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-spur{ fill: none; stroke: var(--line-light-strong); stroke-width: 2; }
.ring-ladung{
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  transition: stroke-dashoffset 1.9s var(--ease) 0.2s;
}
/* Weicher Schein unter der Ladung (ein Filter wuerde einen Kasten zeichnen) */
.ring-schein{ stroke: var(--accent-2); stroke-width: 12; opacity: 0.14; }
.kennzahl.visible .ring-ladung{ stroke-dashoffset: 0; }
.kennzahl:nth-child(2) .ring-ladung{ transition-delay: 0.4s; }
.kennzahl-ring strong{ font-size: clamp(34px, 3.2vw, 44px); }
/* Zwei Kennzahlen: mittig statt in drei Spalten */
.kennzahlen-grid{ grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
@media (max-width:780px){
  .kennzahlen-grid{ grid-template-columns: 1fr; }
}

/* ---------- Das erreichst du: grosses Feld mit Energiekonzept ---------- */
.nutzen-grid--bento{
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: stretch;
}
.nutzen--gross{ grid-row: span 2; display: flex; flex-direction: column; }
.nutzen--gross h3{ font-size: 24px; }
.nutzen--gross p{ font-size: 16px; }
@media (max-width:880px){
  .nutzen-grid--bento{ grid-template-columns: 1fr; }
  .nutzen--gross{ grid-row: auto; }
}

/* Kleine Felder: Signal-Ring um das Icon */
.nutzen-grid--bento .nutzen-icon{ position: relative; }
.nutzen-grid--bento .nutzen-icon::after{
  content: '';
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--accent-2);
  opacity: 0;
  animation: signal 3.6s ease-out infinite;
}
.nutzen-grid--bento .nutzen:nth-child(3) .nutzen-icon::after{ animation-delay: 1.8s; }
@keyframes signal{
  0%  { transform: scale(1); opacity: 0.7; }
  60% { transform: scale(1.8); opacity: 0; }
  100%{ transform: scale(1.8); opacity: 0; }
}

/* Zeichnung: Haus mit PV-Anlage, Waermepumpe, Strom- und Waermefluss.
   Beim Hereinscrollen zeichnen sich die Linien, dann fliesst Energie. */
.ek-bild{
  display: block;
  width: 100%;
  height: auto;
  margin: -8px 0 28px;
  stroke: var(--text-dim);
  stroke-width: 1.6;
}
.ek-zeichnen{
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.ek-boden{ stroke: var(--line-strong); }
.ek-pv{ fill: rgba(var(--shadow-rgb), 0.18); stroke: var(--accent-2); }
.ek-pv-raster{ stroke: var(--accent-2); stroke-width: 1; }
.ek-sonne{ stroke: var(--accent-3); }
.ek-strahlen{
  transform-box: view-box;
  transform-origin: 62px 46px;
  animation: strahlen 24s linear infinite;
}
@keyframes strahlen{ to{ transform: rotate(360deg); } }
.ek-luefter{
  stroke: var(--text);
  transform-box: view-box;
  transform-origin: 331px 197px;
  animation: luefter 1.6s linear infinite;
}
.ek-fenster{ fill: var(--waerme); stroke: none; opacity: 0; }
.ek-heizkoerper{ stroke: var(--waerme); stroke-width: 1.2; }
.ek-welle{
  stroke: var(--waerme);
  stroke-width: 1.4;
  opacity: 0;
}
.ek-strom-spur,
.ek-waerme-spur{ stroke: var(--line-strong); stroke-width: 2; }
.ek-strom,
.ek-waerme{ stroke-width: 2.4; stroke-dasharray: 4 10; }
.ek-strom{ stroke: var(--accent-3); filter: drop-shadow(0 0 4px rgba(130, 199, 171, 0.8)); }
.ek-waerme{ stroke: var(--waerme); filter: drop-shadow(0 0 4px var(--waerme-glanz)); }

/* Reihenfolge: Linien zeichnen -> Sonne -> Strom -> Waerme im Haus */
.ek-pv, .ek-pv-raster, .ek-sonne, .ek-strom, .ek-strom-spur,
.ek-waerme, .ek-waerme-spur, .ek-heizkoerper, .ek-luefter{
  opacity: 0;
  transition: opacity 0.8s ease;
}
.nutzen--gross.visible .ek-zeichnen{ stroke-dashoffset: 0; }
.nutzen--gross.visible .ek-pv,
.nutzen--gross.visible .ek-pv-raster{ opacity: 1; transition-delay: 0.9s; }
.nutzen--gross.visible .ek-sonne{ opacity: 1; transition-delay: 1.2s; }
.nutzen--gross.visible .ek-luefter{ opacity: 1; transition-delay: 1.3s; }
.nutzen--gross.visible .ek-strom,
.nutzen--gross.visible .ek-strom-spur{ opacity: 1; transition-delay: 1.6s; }
.nutzen--gross.visible .ek-waerme,
.nutzen--gross.visible .ek-waerme-spur,
.nutzen--gross.visible .ek-heizkoerper{ opacity: 1; transition-delay: 2.1s; }
.nutzen--gross.visible .ek-strom{ animation: leitung 0.9s linear infinite; }
.nutzen--gross.visible .ek-waerme{ animation: leitung 0.9s linear infinite; }
.nutzen--gross.visible .ek-fenster{ animation: fensterglanz 4s ease-in-out 2.4s infinite; }
.nutzen--gross.visible .ek-welle{ animation: waermewelle 2.4s ease-out 2.4s infinite; }
.nutzen--gross.visible .ek-welle-2{ animation-delay: 3.2s; }
.nutzen--gross.visible .ek-welle-3{ animation-delay: 4s; }
@keyframes leitung{ to{ stroke-dashoffset: -14; } }
@keyframes fensterglanz{ 0%, 100%{ opacity: 0.12; } 50%{ opacity: 0.38; } }
@keyframes waermewelle{
  0%  { opacity: 0; transform: translateY(4px); }
  30% { opacity: 1; }
  100%{ opacity: 0; transform: translateY(-10px); }
}

/* ---------- Luefter im Icon der Energiekette ---------- */
.luefter{
  transform-box: view-box;
  transform-origin: 9.5px 11px;
  animation: luefter 3.2s linear infinite;
}
@keyframes luefter{ to{ transform: rotate(360deg); } }

/* ---------- Warum jetzt: Energiekette PV-Anlage -> Verbraucher ---------- */
.energiekette{
  display: flex;
  align-items: center;
  margin: 8px 0 44px;
}
.energie-quelle,
.energie-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(10, 15, 13, 0.55);
  backdrop-filter: blur(6px);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.energie-quelle{ border-color: var(--accent-2); box-shadow: 0 0 22px rgba(var(--shadow-rgb), 0.35); }
.energie-icon{
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-deep);
  color: var(--accent-3);
}
.energie-icon svg{ width: 18px; height: 18px; }
.energie-verbraucher{ display: flex; flex-wrap: wrap; gap: 10px; }
/* Jeder Verbraucher leuchtet auf, wenn der Strom ankommt */
.energie-chip{ animation: ankommen 2.7s ease-in-out infinite; }
.energie-chip:nth-child(2){ animation-delay: 0.3s; }
.energie-chip:nth-child(3){ animation-delay: 0.6s; }
@keyframes ankommen{
  0%, 45%, 100%{ border-color: var(--line-strong); box-shadow: none; }
  20%          { border-color: var(--accent-2); box-shadow: 0 0 20px rgba(var(--shadow-rgb), 0.5); }
}

/* Leitung mit wandernden Stromimpulsen */
.energie-fluss{
  position: relative;
  flex: 0 0 72px;
  height: 2px;
  margin: 0 10px;
  background: var(--line-strong);
  overflow: hidden;
}
.energie-fluss::after{
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--accent-3) 0 10px, transparent 10px 24px);
  animation: stromfluss 0.9s linear infinite;
}
@keyframes stromfluss{ from{ background-position: 0 0; } to{ background-position: 24px 0; } }

@media (max-width:780px){
  .energiekette{ flex-direction: column; align-items: flex-start; }
  .energie-fluss{ flex-basis: 32px; width: 2px; height: 32px; margin: 8px 0 8px 25px; }
  .energie-fluss::after{
    background: repeating-linear-gradient(180deg, var(--accent-3) 0 10px, transparent 10px 24px);
    animation-name: stromfluss-senkrecht;
  }
}
@keyframes stromfluss-senkrecht{ from{ background-position: 0 0; } to{ background-position: 0 24px; } }

/* ---------- Inhalte: drei Stationen auf einer Leitung ---------- */
/* Statt Karten: Spalten ohne Rahmen, darueber mittig ein Knoten je
   Station. Die Leitung fuellt sich, die Knoten leuchten nacheinander
   mit einer Welle auf, dann erscheinen ihre Module. */
.inhalte-fluss{ position: relative; padding-top: 88px; }
.inhalte-fluss .inhalte-gruppe{
  position: relative;
  padding: 0;
  border: none;
  background: none;
}
/* Die Gruppen loesen nur die Animation aus, eingeblendet wird der Block */
.inhalte-fluss .inhalte-gruppe.reveal{ opacity: 1; transform: none; }
.inhalte-fluss .inhalte-gruppe h3{ font-size: 13px; text-align: center; }
.fluss-linie{
  position: absolute;
  top: 27px;
  left: calc((100% - 48px) / 6);
  right: calc((100% - 48px) / 6);
  height: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.fluss-linie span{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 45%, var(--accent-3) 50%, var(--accent-2) 55%, var(--accent));
  background-size: 300% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s var(--ease);
}
.inhalte-fluss.visible .fluss-linie span{
  transform: scaleX(1);
  animation: lichtimpuls 3.5s linear 1.6s infinite;
}
@keyframes lichtimpuls{ from{ background-position: 100% 0; } to{ background-position: -50% 0; } }

.fluss-knoten{
  position: absolute;
  top: -88px; left: 50%;
  width: 56px; height: 56px;
  margin-left: -28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--text-dim);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 0.5s, border-color 0.5s, color 0.5s, box-shadow 0.5s;
}
.fluss-knoten::after{
  content: '';
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--accent-3);
  opacity: 0;
}
.inhalte-gruppe.visible .fluss-knoten{
  border-color: var(--accent-2);
  background: var(--accent-deep);
  color: var(--accent-3);
  box-shadow: 0 0 0 6px rgba(var(--shadow-rgb), 0.12), 0 0 28px rgba(var(--shadow-rgb), 0.45);
}
.inhalte-gruppe.visible .fluss-knoten::after{ animation: welle 1.4s ease-out forwards; }
@keyframes welle{
  0%  { transform: scale(1); opacity: 0.9; }
  100%{ transform: scale(2.4); opacity: 0; }
}

/* Module einer Station erscheinen nacheinander */
.inhalte-fluss .inhalte-liste li{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease);
}
.inhalte-gruppe.visible .inhalte-liste li{ opacity: 1; transform: none; }
.inhalte-gruppe.visible .inhalte-liste li:nth-child(2){ transition-delay: 0.12s; }
.inhalte-gruppe.visible .inhalte-liste li:nth-child(3){ transition-delay: 0.24s; }

/* Breit stehen alle Stationen nebeneinander: der Strom erreicht sie
   nacheinander */
@media (min-width:1081px){
  .inhalte-gruppe.visible .fluss-knoten,
  .inhalte-gruppe.visible .fluss-knoten::after{ transition-delay: 0.2s; animation-delay: 0.2s; }
  .inhalte-gruppe:nth-of-type(2).visible .fluss-knoten,
  .inhalte-gruppe:nth-of-type(2).visible .fluss-knoten::after{ transition-delay: 0.9s; animation-delay: 0.9s; }
  .inhalte-gruppe:nth-of-type(3).visible .fluss-knoten,
  .inhalte-gruppe:nth-of-type(3).visible .fluss-knoten::after{ transition-delay: 1.5s; animation-delay: 1.5s; }
  .inhalte-gruppe.visible .inhalte-liste li{ transition-delay: 0.4s; }
  .inhalte-gruppe.visible .inhalte-liste li:nth-child(2){ transition-delay: 0.52s; }
  .inhalte-gruppe.visible .inhalte-liste li:nth-child(3){ transition-delay: 0.64s; }
  .inhalte-gruppe:nth-of-type(2).visible .inhalte-liste li{ transition-delay: 1.1s; }
  .inhalte-gruppe:nth-of-type(2).visible .inhalte-liste li:nth-child(2){ transition-delay: 1.22s; }
  .inhalte-gruppe:nth-of-type(2).visible .inhalte-liste li:nth-child(3){ transition-delay: 1.34s; }
  .inhalte-gruppe:nth-of-type(3).visible .inhalte-liste li{ transition-delay: 1.7s; }
  .inhalte-gruppe:nth-of-type(3).visible .inhalte-liste li:nth-child(2){ transition-delay: 1.82s; }
  .inhalte-gruppe:nth-of-type(3).visible .inhalte-liste li:nth-child(3){ transition-delay: 1.94s; }
}

/* Schmal: Leitung senkrecht links, Knoten neben jeder Station */
@media (max-width:1080px){
  .inhalte-fluss{ padding-top: 0; padding-left: 80px; row-gap: 48px; }
  .inhalte-fluss .inhalte-gruppe h3{ text-align: left; }
  .fluss-linie{ top: 14px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; }
  .fluss-linie span{ transform: scaleY(0); transform-origin: top; background-size: 100% 300%; }
  .inhalte-fluss.visible .fluss-linie span{ transform: scaleY(1); animation-name: lichtimpuls-senkrecht; }
  .fluss-knoten{ top: -14px; left: -80px; margin-left: 0; }
}
@keyframes lichtimpuls-senkrecht{ from{ background-position: 0 100%; } to{ background-position: 0 -50%; } }
@media (max-width:480px){
  .inhalte-fluss{ padding-left: 64px; }
  .fluss-linie{ left: 21px; }
  .fluss-knoten{ left: -64px; width: 44px; height: 44px; font-size: 15px; top: -8px; }
}

/* ---------- Fehler: Karten nacheinander, Abschlusskarte mit Leuchtrand ---------- */
@media (min-width:1081px){
  .fehler-grid .fehler:nth-child(3n+2).reveal{ transition-delay: 0.12s; }
  .fehler-grid .fehler:nth-child(3n+3).reveal{ transition-delay: 0.24s; }
}
.fehler.reveal .fehler-icon{
  transform: rotate(-90deg) scale(0.6);
  opacity: 0;
  transition: transform 0.6s var(--ease) 0.35s, opacity 0.6s ease 0.35s;
}
.fehler.visible .fehler-icon{ transform: none; opacity: 1; }

@property --rand-winkel{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.fehler--weitere{
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--light-3), var(--light-3)) padding-box,
    conic-gradient(from var(--rand-winkel), var(--accent) 0%, var(--accent-3) 10%, rgba(31, 95, 73, 0.12) 28%, rgba(31, 95, 73, 0.12) 72%, var(--accent) 100%) border-box;
  box-shadow: 0 22px 48px -28px rgba(var(--shadow-rgb), 0.7);
  animation: rand-drehen 4s linear infinite;
}
@keyframes rand-drehen{ to{ --rand-winkel: 360deg; } }

/* Fehlerkarten zum Umdrehen: vorne der Fehler, hinten die Loesung.
   Beide Seiten liegen in derselben Rasterzelle, die Karte ist so hoch
   wie die laengere Seite. */
.fehler-karte{
  position: relative;
  padding: 0;
  border: none;
  background: none;
  perspective: 1200px;
}
.fehler-innen{
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease);
}
.fehler-karte.ist-gedreht .fehler-innen{ transform: rotateY(180deg); }
.fehler-seite{
  grid-area: 1 / 1;
  padding: 32px 28px 92px;
  border: 1px solid var(--line-light-strong);
  border-radius: var(--radius);
  background: var(--light-3);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fehler-seite--hinten{
  transform: rotateY(180deg);
  border-color: var(--accent);
  background: linear-gradient(160deg, var(--accent-deep) 0%, var(--bg-2) 100%);
}
.fehler-seite--hinten .fehler-kopf{ color: var(--accent-3); }
.fehler-seite--hinten .fehler-icon{ border-color: var(--accent-2); background: var(--accent-2); color: var(--accent-deep); }
.fehler-seite--hinten .fehler-loesung{ font-size: 18px; line-height: 1.55; color: var(--text); }
.fehler-drehen{
  position: absolute;
  left: 28px; bottom: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.fehler-drehen:hover{ background: var(--accent); color: var(--on-accent); }
.fehler-drehen:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.fehler-drehen svg{ width: 16px; height: 16px; transition: transform 0.6s var(--ease); }
.fehler-karte.ist-gedreht .fehler-drehen{ border-color: var(--accent-3); color: var(--accent-3); }
.fehler-karte.ist-gedreht .fehler-drehen:hover{ background: var(--accent-3); color: var(--accent-deep); }
.fehler-karte.ist-gedreht .fehler-drehen svg{ transform: rotate(-180deg); }
/* Beim Hereinscrollen drehen die Karten kurz an: Hinweis, dass hinten etwas steht */
.fehler-karte.visible .fehler-innen{ animation: anstupsen 1.2s var(--ease) 0.8s 1; }
.fehler-karte:nth-child(2).visible .fehler-innen{ animation-delay: 0.95s; }
.fehler-karte:nth-child(3).visible .fehler-innen{ animation-delay: 1.1s; }
.fehler-karte:nth-child(5).visible .fehler-innen{ animation-delay: 0.95s; }
@keyframes anstupsen{
  0%, 100%{ transform: rotateY(0); }
  40%     { transform: rotateY(-24deg); }
}

/* ---------- Was ist das Training: Linie zeichnet sich ueber jedem Baustein ---------- */
.erklaer-grid + .konzept-pillars .pillar{ position: relative; }
.erklaer-grid + .konzept-pillars .pillar::before{
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease) 0.3s;
}
.erklaer-grid + .konzept-pillars .pillar.visible::before{ transform: scaleX(1); }

/* ---------- Fuer wen: Haken springen nacheinander auf ---------- */
.zielgruppe-liste li.reveal .check-circle{
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
.zielgruppe-liste li.visible .check-circle{ transform: none; }

/* ---------- Vorher / nachher: Haken erscheinen nacheinander ---------- */
/* Die Spalte mit Training dunkel und leuchtend, ein Lichtstreif laeuft einmal darueber */
.vergleich-spalte--mit{
  position: relative;
  overflow: hidden;
  border-color: var(--accent-2);
  background: linear-gradient(160deg, var(--accent-deep) 0%, var(--bg-2) 100%);
  box-shadow: 0 28px 64px -30px rgba(var(--shadow-rgb), 0.8);
}
.vergleich-spalte--mit h3{ color: var(--text); }
.vergleich-spalte--mit .vergleich-liste li{ color: rgba(230, 233, 229, 0.78); border-bottom-color: var(--line); }
.vergleich-spalte--mit .vergleich-liste strong{ color: var(--text); }
.vergleich-spalte--mit .vergleich-icon{ background: var(--accent-2); color: var(--accent-deep); }
.vergleich-spalte--mit::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.10) 50%, transparent 62%);
  transform: translateX(-100%);
  pointer-events: none;
}
.vergleich-spalte--mit.visible::after{ animation: streif 1.8s ease 1.2s 1 forwards; }
@keyframes streif{ to{ transform: translateX(100%); } }
.vergleich-spalte--mit.reveal .vergleich-icon{
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vergleich-spalte--mit.visible .vergleich-icon{ transform: none; }
.vergleich-spalte--mit.visible li:nth-child(1) .vergleich-icon{ transition-delay: 0.4s; }
.vergleich-spalte--mit.visible li:nth-child(2) .vergleich-icon{ transition-delay: 0.55s; }
.vergleich-spalte--mit.visible li:nth-child(3) .vergleich-icon{ transition-delay: 0.7s; }
.vergleich-spalte--mit.visible li:nth-child(4) .vergleich-icon{ transition-delay: 0.85s; }

/* ---------- Weniger Bewegung, wenn gewuenscht ---------- */
@media (prefers-reduced-motion: reduce){
  .training-hero .hero-title em,
  .ek-strahlen, .ek-luefter, .luefter,
  .nutzen-grid--bento .nutzen-icon::after,
  .energie-chip,
  .energie-fluss::after,
  .inhalte-fluss.visible .fluss-linie span,
  .fehler--weitere{ animation: none; }
  .nutzen--gross.visible .ek-strom,
  .nutzen--gross.visible .ek-waerme,
  .nutzen--gross.visible .ek-welle,
  .nutzen--gross.visible .ek-fenster,
  .inhalte-gruppe.visible .fluss-knoten::after{ animation: none; }
  .ek-zeichnen{ stroke-dasharray: none; }
  .ring-ladung{ stroke-dashoffset: 0; }
  .ring-ladung, .ek-zeichnen, .fluss-linie span, .fluss-knoten,
  .inhalte-fluss .inhalte-liste li,
  .fehler.reveal .fehler-icon,
  .vergleich-spalte--mit.reveal .vergleich-icon{ transition: none; }
  .inhalte-fluss .inhalte-liste li,
  .fehler.reveal .fehler-icon,
  .vergleich-spalte--mit.reveal .vergleich-icon{ opacity: 1; transform: none; }
  .fehler-karte.visible .fehler-innen,
  .vergleich-spalte--mit.visible::after{ animation: none; }
  .fehler-innen, .fehler-drehen svg{ transition: none; }
  .erklaer-grid + .konzept-pillars .pillar::before{ transform: none; transition: none; }
  .zielgruppe-liste li.reveal .check-circle{ transform: none; transition: none; }
}