/* ============================================================
   EA-Wissenswerk – Komponenten
   Meta-Karte, Themenseiten-Bausteine, Karten, Expandables,
   Querverbindungen, Glossar, Fall-Beispiele.
   ============================================================ */

/* -------- Meta-Zusammenfassung (60-Sekunden-Take) -------- */
.meta-take {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius);
  margin: var(--sp-5) 0 var(--sp-6);
  box-shadow: var(--shadow-soft);
  max-width: var(--max-content);
}
.meta-take__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.meta-take__body {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--c-text);
  margin: 0;
}
.meta-take__body strong { color: var(--c-text); }

/* -------- Zentrale Visualisierung -------- */
.figure {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin: var(--sp-5) 0 var(--sp-6);
  box-shadow: var(--shadow-card);
  max-width: var(--max-wide);
}
.figure__caption {
  margin-top: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  text-align: center;
}
.figure svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* -------- Vertiefung (ausklappbar) -------- */
.deepen {
  border-top: 1px solid var(--c-line);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
}
.deepen__intro {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-4);
}

details.expand {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  transition: box-shadow var(--t-base);
}
details.expand[open] { box-shadow: var(--shadow-soft); }

details.expand > summary {
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  transition: background var(--t-fast);
}
details.expand > summary::-webkit-details-marker { display: none; }
details.expand > summary:hover { background: var(--c-bg-soft); }

details.expand > summary::before {
  content: "+";
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-accent-50);
  color: var(--c-accent);
  text-align: center;
  line-height: 22px;
  font-weight: 700;
  font-size: 1.1em;
  transition: transform var(--t-base), background var(--t-fast);
  flex-shrink: 0;
}
details.expand[open] > summary::before {
  content: "−";
  transform: rotate(180deg);
}

details.expand .expand__body {
  padding: 0 var(--sp-5) var(--sp-5);
  font-family: var(--font-serif);
}
details.expand .expand__body > *:first-child { margin-top: var(--sp-2); }
details.expand .expand__body > *:last-child  { margin-bottom: 0; }

/* -------- Fall-Beispiele -------- */
.case {
  background: linear-gradient(180deg, var(--c-bg-card) 0%, var(--c-accent-50) 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-4) 0;
  box-shadow: var(--shadow-soft);
  max-width: var(--max-content);
}
.case__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}
.case__label::before {
  content: "❯";
  font-size: 0.9em;
}
.case__type {
  font-weight: 400;
  color: var(--c-text-mute);
  letter-spacing: 0.06em;
  margin-left: var(--sp-2);
}
.case__title {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
}
.case__body {
  font-style: italic;
  color: var(--c-text-soft);
}
.case__body p { font-style: italic; }
.case__body p:last-child { margin-bottom: 0; }

.case__commentary {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.case__commentary strong { color: var(--c-accent); }

/* -------- Querverbindungen -------- */
.connections {
  background: var(--c-bg-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-6) 0;
}
.connections__title {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin-bottom: var(--sp-4);
}
.connections__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.connection-card {
  display: block;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-line);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.connection-card:hover {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-soft);
  border-bottom-color: var(--c-accent);
  transform: translateY(-1px);
}
.connection-card__area {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: var(--sp-1);
}
.connection-card__area.a-anthro   { background: var(--c-anthro-50);   color: var(--c-anthro); }
.connection-card__area.a-gm1      { background: var(--c-gm1-50);      color: var(--c-gm1); }
.connection-card__area.a-gm2      { background: var(--c-gm2-50);      color: var(--c-gm2); }
.connection-card__area.a-gm3      { background: var(--c-gm3-50);      color: var(--c-gm3); }
.connection-card__area.a-gm4      { background: var(--c-gm4-50);      color: var(--c-gm4); }
.connection-card__area.a-methode  { background: var(--c-methode-50);  color: var(--c-methode); }
.connection-card__area.a-thema    { background: var(--c-thema-50);    color: var(--c-thema); }
.connection-card__area.a-stoerung { background: var(--c-stoerung-50); color: var(--c-stoerung); }
.connection-card__area.a-praxis   { background: var(--c-praxis-50);   color: var(--c-praxis); }
.connection-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-base);
  margin-bottom: 2px;
}
.connection-card__why {
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  font-family: var(--font-serif);
}

/* -------- Quellen -------- */
.sources {
  margin: var(--sp-6) 0 var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-4);
}
.sources__label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-2);
  color: var(--c-text);
}
.sources ul { list-style: none; padding: 0; max-width: 100%; }
.sources li {
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.sources li:last-child { border-bottom: none; }
.sources code { background: transparent; padding: 0; font-size: var(--fs-xs); }

/* -------- Glossar-Hover (Begriffe) -------- */
.term {
  position: relative;
  border-bottom: 1px dotted var(--c-accent);
  cursor: help;
  color: inherit;
}
.term[data-def]:hover::after,
.term[data-def]:focus::after {
  content: attr(data-def);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-text);
  color: var(--c-bg);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  width: max-content;
  max-width: 320px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: 1.5;
  z-index: 50;
  box-shadow: var(--shadow-card);
  pointer-events: none;
}
.term[data-def]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--c-text);
  z-index: 50;
}

/* -------- Karten-Grids (Index, Übersichtsseiten) -------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}
.tile {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-line);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--tile-color, var(--c-accent));
}
.tile__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tile-color, var(--c-accent));
}
.tile__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
}
.tile__desc {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  margin: 0;
}

/* -------- Inline-Schemen / Tabellen-Light -------- */
.scheme {
  margin: var(--sp-5) 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-card);
  overflow: hidden;
}
.scheme__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--c-line-soft);
}
.scheme__row:last-child { border-bottom: none; }
.scheme__key {
  font-family: var(--font-sans);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-soft);
  color: var(--c-text);
}
.scheme__val {
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-text-soft);
}
@media (max-width: 600px) {
  .scheme__row { grid-template-columns: 1fr; }
  .scheme__key { padding-bottom: 0; }
}

/* -------- Breadcrumbs -------- */
.crumbs {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  margin-bottom: var(--sp-3);
}
.crumbs a { color: var(--c-text-mute); border-bottom: none; }
.crumbs a:hover { color: var(--c-accent); }
.crumbs__sep { margin: 0 var(--sp-2); opacity: 0.5; }

/* -------- Meta-Karte (Layer 1) -------- */
.meta-map {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin: var(--sp-5) 0;
  box-shadow: var(--shadow-card);
}

/* -------- Helper -------- */
.muted { color: var(--c-text-mute); }
.small { font-size: var(--fs-sm); }
.lede { font-size: var(--fs-md); color: var(--c-text-soft); }

/* -------- Comparison-Grid (z.B. Beratung vs. Therapie) -------- */
.comparison-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  max-width: var(--max-content);
}
.comparison-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: var(--sp-3);
  align-items: stretch;
}
.comparison-axis {
  background: var(--c-bg-soft);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.comparison-axis__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}
.comparison-axis__title {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 var(--sp-1);
  color: var(--c-text);
}
.comparison-axis__lede {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  margin: 0;
  font-style: italic;
}
.comparison-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
}
.comparison-card--a { border-left: 4px solid var(--c-praxis, #4A6147); }
.comparison-card--b { border-left: 4px solid #A65A3E; }
.comparison-card--single { grid-column: 2 / span 2; }
.comparison-card__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-mute);
  margin-bottom: var(--sp-2);
}
.comparison-card__body {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  margin: 0;
  line-height: 1.55;
}
.comparison-card__body strong { color: var(--c-text); }
@media (max-width: 800px) {
  .comparison-row { grid-template-columns: 1fr; }
  .comparison-card--single { grid-column: 1; }
}

/* -------- Quadrant-Grid (z.B. Vier Formen des Helfens) -------- */
.quadrant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
  max-width: var(--max-content);
}
.quadrant-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--c-praxis, #4A6147);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  position: relative;
}
.quadrant-card__num {
  position: absolute;
  top: var(--sp-3); right: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--c-praxis, #4A6147);
  opacity: 0.18;
  line-height: 1;
}
.quadrant-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0 0 var(--sp-1);
  color: var(--c-text);
}
.quadrant-card__sub {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  margin: 0 0 var(--sp-3);
  font-style: italic;
}
.quadrant-card__body {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  line-height: 1.55;
  margin: 0 0 var(--sp-3);
}
.quadrant-card__body strong { color: var(--c-text); }
.quadrant-card__example {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line);
  margin: 0;
}
.quadrant-card__example strong { color: var(--c-accent); }

/* -------- Step-List (nummerierte Schritte) -------- */
.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  max-width: var(--max-content);
}
.step-list__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-4);
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  align-items: start;
}
.step-list__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-praxis-50, rgba(74,97,71,0.12));
  color: var(--c-praxis, #4A6147);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-md);
}
.step-list__body { min-width: 0; }
.step-list__title {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  color: var(--c-text);
}
.step-list__body p {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  line-height: 1.55;
  margin: 0;
}
.step-list__body p strong { color: var(--c-text); }

/* -------- Diagram-Wrap (für direkte <img>-Einbindung) -------- */
.diagram-wrap {
  margin: var(--sp-5) 0;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  max-width: var(--max-content);
}
.diagram {
  width: 100%;
  height: auto;
  display: block;
}