/* ===============================
   Basis-Styles & Root Variablen
   =============================== */
:root {
  --bg: #FBFBFA;
  --card-bg: #FFFFFF;
  --muted: #6b6b6b;
  --radius: 14px;
  --gap: 20px;
  --max-width: 1100px;
  --shadow: 0 8px 20px rgba(13,20,25,0.06);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Phase 1 (Responsive): body entschärft — margin/background/padding/display entfernt
   (Standalone-Player-Reste, leakten site-weit und stapelten mit Kadence-Padding).
   color + font-smoothing bleiben (überschreiben Kadence nicht sichtbar). */
body {
  color: #14202B;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Phase 1 (Responsive): box-sizing global für Plugin-Layout-Elemente,
   damit Paddings die Breite nicht aufblähen (ec-*, eck-*, Layout-Container). */
.unit-step-layout, .unit-content,
[class^="ec-"], [class*=" ec-"],
[class^="eck-"], [class*=" eck-"] {
  box-sizing: border-box;
}

/* ===============================
   Kacheln
   =============================== */
.wrap {
  width: 100%;
  max-width: var(--max-width);
  background: var(--card-bg);
  border-radius: calc(var(--radius) + 6px);
  padding: 36px;
  box-shadow: var(--shadow);
  margin: 0 auto;
  position: relative;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: #14202B;
  box-shadow: 0 6px 14px rgba(10,18,20,0.04);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
  padding: 20px;
  text-align: center;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(10,18,20,0.08);
}

/* Kachel Farben */
.card[data-accent="1"] { background: linear-gradient(135deg,#E8F5F2,#ffffff); }
.card[data-accent="2"] { background: linear-gradient(135deg,#FFF4E8,#ffffff); }
.card[data-accent="3"] { background: linear-gradient(135deg,#FFECEC,#ffffff); }
.card[data-accent="4"] { background: linear-gradient(135deg,#EAF9F6,#ffffff); }
.card[data-accent="5"] { background: linear-gradient(135deg,#F0F8FF,#ffffff); }
.card[data-accent="6"] { background: linear-gradient(135deg,#FFF8F4,#ffffff); }

.card_title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.card_subtitle,
.card_content {
  margin: 6px 0 0 0;
  color: #14202B;
  font-size: 14px;
}

/* Overlay */
.overlay-global {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.98);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.overlay-global.active {
  opacity: 1;
  pointer-events: auto;
}

/* 🔹 X-Button: fixed damit overflow-y:auto ihn nicht abschneidet */
.overlay-global .close {
  position: fixed;
  top: 20px;
  right: 24px;
  background: #f0f0f0;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  color: #444;
  transition: background 0.15s, color 0.15s;
  z-index: 9999;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-global .close:hover {
  background: #e0e0e0;
  color: #111;
}

/* 🔹 Schließen-Button unten – verhindert versehentliches Weiter-Klicken */
.overlay-close-bottom {
  align-self: flex-end;
  margin-top: auto;
  padding: 9px 20px;
  background: #f0f4fa;
  border: 1px solid #d0d8e8;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1F3A5F;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.overlay-close-bottom:hover {
  background: #dce6f5;
  border-color: #2E75B6;
}

.ec_tile_group_header {
  font-size: 28px;
  margin: 0 0 18px 0;
  letter-spacing: -0.02em;
}

.ec_tile_group_description {
  color: var(--muted);
  margin: 0 0 26px 0;
}

.ec_overlay_title {
  margin-top: 0;
  font-size: 24px;
}

.ec_overlay_text {
  font-size: 16px;
  line-height: 1.6;
  color: #1f2b2a;
}

/* ===============================
   Layout Content + Buttons
   =============================== */
.unit-step-layout {
  display: flex;
  gap: 20px;
}

/* Spezifische Layout-Klassen */
.unit-step-layout.ec-tiles {
  flex-direction: column; /* Kacheln stapeln */
}

.unit-step-layout.ec-freetext {
  flex-direction: row; /* Freitext + Buttons nebeneinander */
  align-items: flex-start;
}

/* Prozess, Zuordnung, Sortierung, Video: Content + Buttons untereinander */
.unit-step-layout.ec-stacked {
  flex-direction: column;
  min-height: auto; /* kein künstlicher Mindestplatz nötig */
}

.unit-step-layout.ec-stacked .unit-content {
  flex: unset;
  width: 100%;
}

.unit-step-layout.ec-stacked .choice-buttons-wrapper {
  margin-top: 1.5rem;
  width: 100%;
}

/* Content-Bereich */
.unit-content {
  flex: 5;
  margin: 0;
}

/* Buttons */
.choice-buttons-wrapper,
.nav-buttons {
  display: block;
  /* display: flex;
  flex-direction: column;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center; */
}

.choice-buttons-wrapper .choice-btn {
  /* flex: 1 1 auto;
  flex-direction: column; */
  display: block;
  width: 100%;
  min-width: 0;
  padding: 1.2rem 1.5rem;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(10, 18, 20, 0.06);
  background: linear-gradient(135deg, #ffffff, #f8fafa);
  justify-content: center;
  align-items: center;
  min-height: 80px;
  transition: all 0.25s ease;
  color: #14202B;
}

/* Hover-Effekt */
.choice-buttons-wrapper .choice-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(10, 18, 20, 0.12);
}

/* Button-Farbvarianten */
.choice-buttons-wrapper .choice-btn:nth-child(1) { background: linear-gradient(135deg, #E8F5F2, #ffffff); }
.choice-buttons-wrapper .choice-btn:nth-child(2) { background: linear-gradient(135deg, #FFF4E8, #ffffff); }
.choice-buttons-wrapper .choice-btn:nth-child(3) { background: linear-gradient(135deg, #FFECEC, #ffffff); }
.choice-buttons-wrapper .choice-btn:nth-child(4) { background: linear-gradient(135deg, #EAF9F6, #ffffff); }
.choice-buttons-wrapper .choice-btn:nth-child(5) { background: linear-gradient(135deg, #F0F8FF, #ffffff); }

/* Weiter-Button */
.nav-buttons {
  margin-top: 20px;
}

.nav-btn {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background-color: #007BFF;
  color: white;
}

/* === Sanftes Überblenden (Crossfade) === */
.fade-out {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.9s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ============================================================
   Layout-Fixes: Mindesthöhe & Maximalbreite
   ============================================================ */

/* 🔹 Mindesthöhe für den gesamten Step-Block */
.unit-step-layout {
  min-height: 520px; /* kannst du anpassen – 520px wirkt meist harmonisch */
  align-items: stretch; /* sorgt für gleichmäßige Höhe von Content & Buttons */
}

/* 🔹 Maximalbreite für Buttons */
.choice-buttons-wrapper .choice-btn,
.nav-buttons .nav-btn {
  max-width: 360px; /* oder 400px, je nach Designgefühl */
  flex: 1 1 auto;
  margin: 0 auto;
}

/* ============================================================
   Visuelle Hilfen & Vereinheitlichung
   ============================================================ */

/* 🔹 Schrittbereich – Rahmen/Abstand (Test-Hintergrund Phase 1 entfernt) */
.unit-step-layout {
  border-radius: var(--radius);
  padding: 24px;
  min-height: 520px; /* Desktop; im Mobile-Breakpoint auf auto (siehe unten) */
  align-items: stretch;
  box-sizing: border-box;
}

/* 🔹 Einheitliches Button-Design (Weiter/Zurück = Interaktionsbuttons) */
.ecoach-btn,
.nav-buttons .nav-btn,
.choice-buttons-wrapper .choice-btn {
  /* display: inline-flex; */
  display:block;
  justify-content: center;
  align-items: center;
  padding: 1.2rem 1.5rem;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(10, 18, 20, 0.06);
  background: linear-gradient(135deg, #ffffff, #f8fafa);
  color: #14202B;
  transition: all 0.25s ease;
  min-height: 80px;
  max-width: 360px;
}

/* Hover-Effekt wie Interaktionsbuttons */
.ecoach-btn:hover,
.nav-buttons .nav-btn:hover,
.choice-buttons-wrapper .choice-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(10, 18, 20, 0.12);
}



/* 🔹 Titel (z. B. <h3>) grundsätzlich ausblenden */
/* #unit-view-wrapper h3 {
  display: none !important;
} */

#unit-view-wrapper > h3 {
  display: none !important;
}

/* ============================================================
   Kino-Vorspann (.ecv) – global, v3 (Slides 1 & 2 langsamer)
   ============================================================ */
@keyframes ecvIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ecvZoom{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}}
@keyframes ecvBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ecvFlyRight{from{opacity:0;transform:translateX(85%) skewX(-7deg)}to{opacity:1;transform:none}}
/* Dauer-Animationen (Endlos – halten die Slide am Leben) */
@keyframes ecvGlow{from{background-position:50% 0%}to{background-position:50% 42%}}
@keyframes ecvLinePulse{0%,100%{opacity:1;transform:scaleX(1)}50%{opacity:.55;transform:scaleX(.88)}}
@keyframes ecvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ecvScreenGlow{0%,100%{box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 30px rgba(91,140,255,.14)}50%{box-shadow:0 10px 52px rgba(0,0,0,.55),inset 0 0 46px rgba(91,140,255,.28)}}

.ecv{position:relative;min-height:330px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.1rem;text-align:center;padding:60px 24px;border-radius:16px;overflow:hidden;
  color:#eef3ff;box-shadow:inset 0 0 130px rgba(0,0,0,.55);
  background:radial-gradient(130% 130% at 50% -8%,#1b2f5e 0%,#0d1b39 52%,#070e1f 100%);
  background-size:200% 200%;animation:ecvGlow 20s ease-in-out infinite alternate;}
.ecv::before,.ecv::after{content:'';position:absolute;left:0;right:0;height:26px;background:#05080f;z-index:2;}
.ecv::before{top:0}.ecv::after{bottom:0}
.ecv > *{position:relative;z-index:1;}

.ecv-k{font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;color:#8fb0ff;
  animation:ecvIn 1s ease both .15s;}
.ecv-q{font-size:clamp(1.15rem,3.6vw,1.55rem);font-weight:300;font-style:italic;color:#dbe6ff;
  max-width:24ch;line-height:1.4;animation:ecvIn 1.4s ease both .4s, ecvFloat 6s ease-in-out infinite 1.8s;}
.ecv-logo{animation:ecvZoom 1.3s ease both .2s, ecvFloat 7s ease-in-out infinite 1.6s;}
.ecv-logo img{width:210px;max-width:64%;filter:drop-shadow(0 10px 34px rgba(0,0,0,.55));}

/* ── Vorspann 1 – deutlich langsamer ───────────────────────────── */
.ecv-line{width:56px;height:3px;border-radius:2px;background:linear-gradient(90deg,#5b8cff,#9bb8ff);
  transform-origin:center;animation:ecvBar 2.2s ease both .9s, ecvLinePulse 5s ease-in-out infinite 3.2s;}
.ecv-s{font-size:.98rem;color:#b9c8ee;max-width:34ch;animation:ecvIn 2.4s ease both 1.8s;}

/* ── Vorspann 2 – Kinoleinwand, langsam von rechts ─────────────── */
.ecv-screen{padding:22px 34px;border:1px solid rgba(143,176,255,.4);border-radius:12px;
  background:linear-gradient(180deg,rgba(40,70,140,.35),rgba(10,20,45,.55));
  animation:ecvFlyRight 2.6s cubic-bezier(.16,.72,.18,1) both .7s, ecvScreenGlow 6s ease-in-out infinite 3.4s;}
.ecv-screen-text{font-weight:800;letter-spacing:.26em;font-size:clamp(1.5rem,5vw,2.4rem);line-height:1.1;
  text-shadow:0 2px 24px rgba(80,130,255,.45);}

/* ── Vorspann Titel – ruhig, ohne Flackern (unverändert) ───────── */
.ecv-title{font-weight:800;letter-spacing:.06em;line-height:1.12;font-size:clamp(1.5rem,5vw,2.3rem);
  text-shadow:0 2px 30px rgba(80,130,255,.35);animation:ecvIn 1.2s ease both .3s;}


/* ============================================================
   eCoach · LE-Design-Komponenten  (ec-le.css)
   Wiederverwendbare Bausteine für Inhaltsseiten (Freitext, HTML-Modus).
   Nutzung im Content NUR über Klassen — keine Inline-Styles (wp_kses-sicher,
   wie .ecv). In Steps mit edit_mode_1:"html" verwenden.
   Einbinden: an css/style.css anhängen ODER separat enqueuen.
   Palette: Teal #0f6e69 · Deep #0a524e · Amber #d4862a · Ink #14202B

   ⚠ RENDERER-EIGENTUM (Topf C1, ab 01.07.2026): Diese Klassen werden vom
   Infobox-Renderer (renderInfoboxWidget, ec_contenttypes_frontend.js) erzeugt und
   sind KEINE reinen Freitext-HTML-Bausteine mehr:
     .ec-callout (+--teal/--amber) · .ec-quote (+cite) · .ec-stats/.ec-stat
     (+.ec-stat-num/.ec-stat-label) · .ec-def (+dt/dd) · .ec-chips/.ec-chip
     .ec-goals/.ec-panel(.ziele/.themen) · .ec-checklist/.ec-arrowlist (Infobox-Typ "goals")
     .ec-compare (+.col.neg/.col.pos) (Infobox-Typ "compare", ab 01.07.2026)
   → Beim späteren Topf-A-Cleanup NICHT mitlöschen. Nur ec-split/figure/flow/
     abc/hero sind Topf-A-Kandidaten. (ec-compare ist jetzt Renderer-Eigentum.)
   ============================================================ */
:root{
  --ec-teal:#0f6e69; --ec-teal-deep:#0a524e; --ec-teal-tint:#e8f5f2;
  --ec-amber:#d4862a; --ec-amber-deep:#9a5a12; --ec-amber-tint:#fff4e8;
  --ec-ink:#14202B; --ec-muted:#5f6b68; --ec-line:#e9eeec; --ec-rad:14px;
}

/* Seiten-Wrapper: vertikaler Rhythmus */
.ec-page{max-width:880px;margin:0 auto;color:var(--ec-ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial;}
.ec-page > * + *{margin-top:22px;}

/* Kicker + Lead */
.ec-kicker{font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ec-teal);font-weight:600;margin:0 0 10px;}
.ec-lead{font-size:17px;line-height:1.6;color:var(--ec-muted);max-width:64ch;}

/* HERO – Auftakt jeder Inhaltsseite */
.ec-hero{background:linear-gradient(135deg,var(--ec-teal) 0%,var(--ec-teal-deep) 100%);
  color:#eafaf5;padding:34px 38px 30px;border-radius:18px;}
.ec-hero .ec-kicker{color:#7fd8c4;}
.ec-hero h3{font-family:"Bricolage Grotesque",Georgia,serif;font-weight:700;
  font-size:30px;line-height:1.15;margin:0 0 12px;color:#fff;letter-spacing:-.01em;}
.ec-hero p{font-size:16px;line-height:1.6;color:#cdeae2;margin:0;max-width:62ch;}

/* GOALS – Lernziele | Lerninhalte (Seite 1) */
.ec-goals{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.ec-panel{border-radius:var(--ec-rad);padding:22px;border:1px solid var(--ec-line);}
.ec-panel.ziele{background:linear-gradient(135deg,var(--ec-teal-tint),#fff);}
.ec-panel.themen{background:linear-gradient(135deg,var(--ec-amber-tint),#fff);}
.ec-panel h4{font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 14px;font-weight:600;}
.ec-panel.ziele h4{color:var(--ec-teal-deep);}
.ec-panel.themen h4{color:var(--ec-amber-deep);}
.ec-checklist,.ec-arrowlist{list-style:none;margin:0;padding:0;}
.ec-checklist li,.ec-arrowlist li{display:flex;align-items:flex-start;gap:10px;
  padding:9px 0;font-size:14.5px;line-height:1.5;border-top:1px solid rgba(0,0,0,.05);}
.ec-checklist li:first-child,.ec-arrowlist li:first-child{border-top:none;}
.ec-checklist li::before{content:"✓";flex:none;line-height:1.5;
  position:static !important;margin:0 !important;left:auto !important;top:auto !important;
  color:var(--ec-teal);font-weight:700;}
.ec-arrowlist li::before{content:"▸";flex:none;line-height:1.5;
  position:static !important;margin:0 !important;left:auto !important;top:auto !important;
  color:var(--ec-amber);font-weight:700;}
/* Theme-Override (z. B. Kadence): höhere Spezifität via #unit-view-wrapper + Box-Reset,
   damit eine Theme-„li::before"-Regel mein ✓/▸ und die Positionierung nicht überschreibt. */
#unit-view-wrapper .ec-checklist,#unit-view-wrapper .ec-arrowlist{list-style:none !important;}
#unit-view-wrapper .ec-checklist li,#unit-view-wrapper .ec-arrowlist li{
  padding-left:0 !important;background-image:none !important;}
#unit-view-wrapper .ec-checklist li::before{content:"✓" !important;color:var(--ec-teal) !important;
  position:static !important;left:auto !important;top:auto !important;right:auto !important;
  margin:0 !important;padding:0 !important;width:auto !important;height:auto !important;
  background:none !important;border:none !important;transform:none !important;
  flex:none;line-height:1.5;font-weight:700;font-size:1em;}
#unit-view-wrapper .ec-arrowlist li::before{content:"▸" !important;color:var(--ec-amber) !important;
  position:static !important;left:auto !important;top:auto !important;right:auto !important;
  margin:0 !important;padding:0 !important;width:auto !important;height:auto !important;
  background:none !important;border:none !important;transform:none !important;
  flex:none;line-height:1.5;font-weight:700;font-size:1em;}

/* SPLIT – Text + Bild nebeneinander (responsiv) */
.ec-split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;}
.ec-split.wide-text{grid-template-columns:1.4fr 1fr;}
.ec-split.rev .ec-split-media{order:-1;}
.ec-split h3{font-size:22px;margin:0 0 12px;color:var(--ec-ink);}
.ec-split p{font-size:15.5px;line-height:1.65;color:#2c3a37;margin:0 0 12px;}
.ec-figure{margin:0;border-radius:var(--ec-rad);overflow:hidden;
  box-shadow:0 10px 26px rgba(13,20,25,.10);}
.ec-figure img{display:block;width:100%;height:auto;}
.ec-figure figcaption{font-size:12.5px;color:var(--ec-muted);padding:8px 12px;
  background:#fafbfb;}

/* CALLOUT – Hervorhebung (Teal/Amber) */
.ec-callout{border-radius:var(--ec-rad);padding:20px 22px;font-size:15px;
  line-height:1.6;border:1px solid var(--ec-line);}
.ec-callout--teal{background:var(--ec-teal-tint);border-color:#bfe6dc;}
.ec-callout--amber{background:var(--ec-amber-tint);border-color:#f3d9b6;}
.ec-callout h4{margin:0 0 8px;font-size:15px;font-weight:700;}
.ec-callout--teal h4{color:var(--ec-teal-deep);}
.ec-callout--amber h4{color:var(--ec-amber-deep);}

/* QUOTE – Pull-Quote */
.ec-quote{border-left:4px solid var(--ec-amber);padding:6px 0 6px 22px;
  font-family:"Bricolage Grotesque",Georgia,serif;font-size:21px;line-height:1.4;
  color:var(--ec-teal-deep);font-style:italic;}
.ec-quote cite{display:block;margin-top:10px;font-size:13px;font-style:normal;
  color:var(--ec-muted);font-family:"Inter",sans-serif;}

/* STATS – Kennzahl-Karten */
.ec-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.ec-stat{background:#fff;border:1px solid var(--ec-line);border-radius:var(--ec-rad);
  padding:20px;text-align:center;box-shadow:0 6px 16px rgba(13,20,25,.05);}
.ec-stat-num{font-family:"Bricolage Grotesque",Georgia,serif;font-size:34px;
  font-weight:800;color:var(--ec-teal);line-height:1;}
.ec-stat-num.amber{color:var(--ec-amber);}
.ec-stat-label{font-size:13px;color:var(--ec-muted);margin-top:8px;line-height:1.4;}

/* FLOW – Schrittfolge/Karten-Raster (3 pro Zeile; --4 für 4 pro Zeile) */
.ec-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.ec-flow--4{grid-template-columns:repeat(4,1fr);}
.ec-flow-item{background:#fff;border:1px solid var(--ec-line);border-radius:var(--ec-rad);
  padding:18px;position:relative;}
.ec-flow-num{display:inline-flex;width:28px;height:28px;border-radius:50%;
  background:var(--ec-teal);color:#fff;font-weight:700;font-size:14px;
  align-items:center;justify-content:center;margin-bottom:10px;}
.ec-flow-item h4{margin:0 0 6px;font-size:15px;color:var(--ec-ink);}
.ec-flow-item p{margin:0;font-size:13.5px;color:var(--ec-muted);line-height:1.5;}

/* DEFINITION-Box */
.ec-def{background:#fff;border:1px solid var(--ec-line);border-left:4px solid var(--ec-teal);
  border-radius:0 var(--ec-rad) var(--ec-rad) 0;padding:18px 22px;}
.ec-def dt{font-weight:700;color:var(--ec-teal-deep);margin-bottom:6px;}
.ec-def dd{margin:0;font-size:15px;line-height:1.6;color:#2c3a37;}

/* CHIPS – Meta-Zeile */
.ec-chips{display:flex;flex-wrap:wrap;gap:10px;}
.ec-chip{display:inline-flex;align-items:center;gap:7px;background:#f3f6f5;
  border:1px solid #e7ecea;border-radius:999px;padding:8px 15px;font-size:13px;
  color:#37534e;font-weight:500;}

/* COMPARE – zwei Spalten (z. B. Mythos | Realität, Präsenz | Remote) */
.ec-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.ec-compare .col{border-radius:var(--ec-rad);padding:20px;border:1px solid var(--ec-line);}
.ec-compare .col.neg{background:#fbeeee;border-color:#f0d2d2;}
.ec-compare .col.pos{background:var(--ec-teal-tint);border-color:#bfe6dc;}
.ec-compare .col h4{margin:0 0 12px;font-size:15px;}
.ec-compare .col.neg h4{color:#9a2b2b;}
.ec-compare .col.pos h4{color:var(--ec-teal-deep);}
.ec-compare ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.6;}

/* ABC – beschriftete Antwortoptionen (Frageseiten; Buttons bleiben kurz) */
.ec-abc{list-style:none !important;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.ec-abc li::before{content:none !important;display:none !important;}
.ec-abc li::marker{content:"" !important;}
.ec-abc li{display:flex;gap:12px;align-items:flex-start;background:#fff;
  border:1px solid var(--ec-line);border-radius:var(--ec-rad);padding:14px 16px;
  font-size:15px;line-height:1.5;}
.ec-abc .let{flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--ec-teal-tint);color:var(--ec-teal-deep);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:14px;}

/* ============================================================
   Lead-Zone (Topf B) — optionaler Vollbreiten-Block über den Freitext-Spalten.
   Stil = Flag (data-style), Klasse setzt der Renderer (unitstep.js). Palette:
   Teal #0f6e69 · Deep #0a524e · Ink #14202B.
   ============================================================ */
.ec-lead-zone { width: 100%; margin-bottom: 22px; box-sizing: border-box; }
.ec-lead-zone > :first-child { margin-top: 0; }
.ec-lead-zone > :last-child  { margin-bottom: 0; }

/* schlicht — dezenter Block, keine Farbe */
.ec-lead-zone[data-style="schlicht"] {
  padding: 4px 0 18px;
  border-bottom: 1px solid #e9eeec;
  color: #14202B;
}

/* hero — Optik des alten .ec-hero (Teal-Gradient, große weiße Überschrift) */
.ec-lead-zone[data-style="hero"] {
  background: linear-gradient(135deg, #0f6e69 0%, #0a524e 100%);
  color: #eafaf5;
  padding: 34px 38px 30px;
  border-radius: 18px;
}
.ec-lead-zone[data-style="hero"] h3 {
  font-family: "Bricolage Grotesque", Georgia, serif; font-weight: 700;
  font-size: 30px; line-height: 1.15; margin: 0 0 12px; color: #fff; letter-spacing: -.01em;
}
.ec-lead-zone[data-style="hero"] p { font-size: 16px; line-height: 1.6; color: #cdeae2; margin: 0; max-width: 62ch; }
.ec-lead-zone[data-style="hero"] a { color: #eafaf5; text-decoration: underline; }
.ec-lead-zone[data-style="hero"] .ec-kicker { color: #7fd8c4; }

/* callout — Optik von .ec-callout--teal (Teal-Tint-Box) */
.ec-lead-zone[data-style="callout"] {
  background: #e8f5f2;
  border: 1px solid #bfe6dc;
  border-radius: 14px;
  padding: 20px 22px;
  font-size: 15px; line-height: 1.6; color: #14202B;
}
.ec-lead-zone[data-style="callout"] h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #0a524e; }
.ec-lead-zone[data-style="callout"] p { margin: 0; }

/* Infobox-Wrapper (Topf C1) — die Typ-Klassen (.ec-callout/.ec-quote/.ec-stats/
   .ec-def/.ec-chips) bringen die Optik bereits mit; nur dezenter Außenabstand. */
.ec-ib { margin: 0 0 4px; }

/* ec-le-Grid mobil einspaltig (Phase 1: von 4× identisch auf 1× reduziert) */
@media(max-width:680px){
  .ec-goals,.ec-split,.ec-split.wide-text,.ec-compare{grid-template-columns:1fr;}
  .ec-flow,.ec-flow--4{grid-template-columns:1fr 1fr;}
  .ec-hero h3{font-size:24px;} .ec-hero{padding:26px 22px;}
}

/* ============================================================
   Phase 1 (Responsive): konsolidierter Mobile-Breakpoint ≤600px.
   Reduziert die gestapelten Paddings, hebt die künstliche Mindesthöhe auf.
   ============================================================ */
@media (max-width: 600px) {
  .unit-step-layout { padding: 14px; min-height: auto; }
  .ec-hero  { padding: 20px 16px; }
  .eck-hero { padding: 22px 16px; }
  .ec-panel, .ec-callout, .ec-flow-item, .ec-stat { padding: 16px; }
  .unit-content, .ec-page { width: 100%; }
  .ec-lead-zone[data-style="hero"]    { padding: 20px 16px; }
  .ec-lead-zone[data-style="callout"] { padding: 16px; }

  /* Phase 1b: Kadence-Theme-Wrapper NUR auf Player-Seiten schmaler (horizontal).
     Gescopt via :has(#unit-view-wrapper) → greift nicht auf Marketing-Seiten.
     !important, weil die Kadence-Regeln sonst gewinnen. Nur Padding → kein Overflow. */
  .entry-content-wrap:has(#unit-view-wrapper) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  main.wrap:has(#unit-view-wrapper) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ============================================================
   Breiter Anzeigebereich für Player-/Vorschau-Seiten (Desktop).
   Gescopt via :has(#unit-view-wrapper) → greift NUR auf Seiten mit
   Player (z. B. lerneinheit-vorschau), nicht auf Marketing-Seiten.
   Muster analog Phase 1b oben; deckt Kadence- und Legacy-Wrapper ab.
   Breite bei Bedarf hier zentral anpassen.
   ============================================================ */
@media (min-width: 1024px) {
  .site-container:has(#unit-view-wrapper),
  .content-container:has(#unit-view-wrapper),
  .entry-content-wrap:has(#unit-view-wrapper),
  main.wrap:has(#unit-view-wrapper),
  #content:has(#unit-view-wrapper) {
    max-width: 1320px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ===============================
   Responsive
   =============================== */
@media (max-width: 980px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .wrap {
    padding: 12px;
  }
  .card {
    padding: 16px;
  }
  .unit-step-layout.ec-freetext,
  .unit-step-layout.ec-stacked {
    flex-direction: column;
    gap: 12px;
  }
  .choice-buttons-wrapper .choice-btn,
  .nav-buttons .nav-btn {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

#activehome-chat {
  display: none;
}

}

/* =========================================================
   Feedback-Widget (Sterne-Bewertung am LE-Ende)
   HTML:  .feedback-widget > .feedback-stars > span.star[data-rating]
          + .feedback-selected, textarea.feedback-text, button.feedback-submit
   JS (unitstep.js) toggelt .hover (Hover-Vorschau) und .selected (Auswahl).
   ========================================================= */
.feedback-widget {
  margin: 8px auto 0;
  max-width: 640px;
  text-align: center;
}
.feedback-intro {
  margin-bottom: 14px;
  line-height: 1.55;
  text-align: center;
}
.feedback-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 2rem;
  line-height: 1;
  user-select: none;
}
.feedback-stars .star {
  color: #cbd5e1;              /* leer: helles Grau */
  cursor: pointer;
  transition: color .12s ease, transform .12s ease;
}
.feedback-stars .star:hover {
  transform: scale(1.12);
}
.feedback-stars .star.hover,
.feedback-stars .star.selected {
  color: #f59e0b;             /* gefuellt / Hover: Gold */
}
.feedback-selected {
  margin: 8px 0 14px;
  font-size: .9rem;
  color: #64748b;
}
.feedback-text {
  display: block;
  width: 100%;
  max-width: 640px;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.feedback-text:focus {
  outline: none;
  border-color: #0f6e69;
  box-shadow: 0 0 0 3px rgba(15, 110, 105, .15);
}
.feedback-submit {
  margin-top: 14px;
  padding: 11px 22px;
  border: none;
  border-radius: 10px;
  background: #0f6e69;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease, opacity .15s ease;
}
.feedback-submit:hover:not(:disabled) {
  background: #0a524e;
  transform: translateY(-1px);
}
.feedback-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* =========================================================
   Freetext mit Bild: Bild + Nav-Buttons am Textblock ausrichten
   (nicht an der Überschrift in html1). Hoch spezifisch über
   #unit-view-wrapper gescopet, damit prod/Theme-CSS nicht gewinnt.
   :has(img) lässt reine Zwei-Text-Spalten (z. B. "Deine Lernziele")
   unberührt.
   ========================================================= */
#unit-view-wrapper .unit-step-layout.ec-freetext .ec-two-col-grid:has(img){ align-items:center; }
#unit-view-wrapper .unit-step-layout.ec-freetext .choice-buttons-wrapper{ align-self:center; }