/* Elemente passen sich der Seite an: Schrift und Textfarbe werden geerbt,
   Flächen entstehen aus currentColor bzw. --vae-accent (in der Vorschau aus der Seite gelesen). */
.vae {
  --vae-accent: var(--site-accent, var(--va-accent, #c8102e));
  --vae-surface: color-mix(in srgb, currentColor 6%, transparent);
  --vae-line: color-mix(in srgb, currentColor 16%, transparent);
  --vae-tint: color-mix(in srgb, var(--vae-accent) 12%, transparent);
  margin: 2em 0;
  font-size: 0.95em;
  line-height: 1.5;
  box-sizing: border-box;
}
.vae * { box-sizing: border-box; }
.vae p { margin: 0.4em 0 0; }
.vae-title { font-weight: 700; margin: 0 0 0.75em; font-size: 1.05em; }
.vae-note { opacity: 0.6; font-size: 0.85em; }
.vae-kicker { display: block; font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vae-accent); margin-bottom: 0.35em; }

.vae-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75em; }
.vae-stat { background: var(--vae-tint); border-radius: 12px; padding: 1em 1.1em; }
.vae-stat strong { display: block; font-size: 1.9em; line-height: 1.1; }
.vae-stat span { display: block; margin-top: 0.3em; opacity: 0.8; font-size: 0.9em; }

.vae-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.vae-axis { stroke: var(--vae-line); stroke-width: 1; }
.vae-val { font-size: 13px; font-weight: 600; fill: currentColor; font-family: inherit; }
.vae-lab { font-size: 12px; fill: currentColor; opacity: 0.7; font-family: inherit; }
.vae-pie { display: flex; gap: 1.5em; align-items: center; flex-wrap: wrap; }
.vae-pie svg { width: min(220px, 100%); flex: none; }
.vae-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4em; }
.vae-pie li { display: flex; gap: 0.5em; align-items: center; }
.vae-pie i { width: 0.8em; height: 0.8em; border-radius: 3px; flex: none; }

.vae-timeline ol { list-style: none; margin: 0; padding: 0 0 0 1.25em; position: relative; }
.vae-timeline ol::before { content: ""; position: absolute; left: 0.3em; top: 0.4em; bottom: 0.4em; width: 2px; background: var(--vae-line); }
.vae-timeline li { position: relative; padding: 0 0 1em 0.75em; }
.vae-timeline li::before { content: ""; position: absolute; left: -1.23em; top: 0.35em; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--vae-accent); }
.vae-tl-label { display: block; font-size: 0.8em; font-weight: 700; color: var(--vae-accent); }

.vae-scroll { overflow-x: auto; }
.vae-table table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.vae-table th, .vae-table td { text-align: left; padding: 0.55em 0.75em; border-bottom: 1px solid var(--vae-line); vertical-align: top; }
.vae-table th { font-weight: 700; background: var(--vae-tint); }

.vae-box { background: var(--vae-surface); border-radius: 12px; padding: 1.1em 1.25em; display: block; }
.vae-box > strong { display: block; font-size: 1.05em; }
.vae-box-warning { background: color-mix(in srgb, #d93025 12%, transparent); }
.vae-box-warning .vae-kicker { color: #d93025; }
.vae-box-tip { background: var(--vae-tint); }
.vae-takeaways ul { margin: 0.5em 0 0; padding-left: 1.2em; }
.vae-takeaways li { margin: 0.3em 0; }

.vae-quote { margin: 2.2em 0; padding: 0 0 0 1em; border-left: 4px solid var(--vae-accent); }
.vae-quote p { font-size: 1.45em; line-height: 1.3; font-weight: 700; margin: 0; }
.vae-quote cite { display: block; margin-top: 0.5em; font-style: normal; opacity: 0.7; }

.vae-image img { width: 100%; height: auto; display: block; border-radius: 8px; }
.vae-image figcaption { margin-top: 0.5em; font-size: 0.85em; opacity: 0.85; }
.vae-placeholder { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--vae-surface); border-radius: 8px; opacity: 0.7; }

.vae-options { display: grid; gap: 0.5em; margin-top: 0.75em; }
.vae-options button { font: inherit; color: inherit; text-align: left; padding: 0.6em 0.9em; border-radius: 8px; border: 1px solid var(--vae-line); background: transparent; cursor: pointer; }
.vae-options button:hover:not(:disabled) { border-color: var(--vae-accent); }
.vae-options button:disabled { cursor: default; }
.vae-options .is-right { background: color-mix(in srgb, #1e8e3e 18%, transparent); border-color: #1e8e3e; }
.vae-options .is-wrong { background: color-mix(in srgb, #d93025 14%, transparent); border-color: #d93025; }