/* jobscout-Demo: Hinweisleiste + Erklärseite (nutzt die Farben aus style.css) */
.demo-leiste {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 16px; font-size: 13.5px; background: var(--akzent); color: var(--akzent-text);
}
.demo-leiste a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.demo-leiste + .rahmen .seite { top: 34px; height: calc(100vh - 34px); }
@media (max-width: 900px) {
  .demo-leiste { position: static; gap: 4px 10px; padding: 6px 16px; font-size: 12.5px; line-height: 1.35; }
  .demo-leiste + .rahmen .seite { top: -48px; height: auto; }
}

/* ---------- Erklärseite ---------- */
body.erklaerung { background: var(--fenster); }
.erk-kopf { display: flex; align-items: center; justify-content: space-between; max-width: 1040px; margin: 0 auto; padding: 22px 24px; }
.erk-marke { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; font-size: 19px; letter-spacing: -.025em; text-decoration: none; }
.erk-marke .zeichen { width: 22px; height: 30px; color: var(--akzent); stroke: none; }
.erk-inhalt { max-width: 1040px; margin: 0 auto; padding: 24px 24px 72px; }
.erk-dach { font-size: 14px; font-weight: 600; color: var(--akzent); margin: 24px 0 8px; }
.erk-inhalt h1 { font: 700 clamp(30px, 4.4vw, 46px)/1.12 var(--schrift); letter-spacing: -.03em; margin: 0 0 18px; max-width: 22ch; }
.erk-lead { font-size: 19px; line-height: 1.55; color: var(--text-2); max-width: 62ch; margin: 0 0 40px; }
.erk-inhalt section { margin: 48px 0; }
.erk-inhalt h2 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 18px; }
.erk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.erk-raster .karte { margin: 0; }
.erk-raster h3 { margin: 2px 0 6px; font-size: 17px; }
.erk-raster p { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.erk-bild { margin: 0; padding: 20px; }
.erk-bild svg { width: 100%; height: auto; display: block; stroke: none; fill: none; }
.erk-box rect { fill: var(--tint); stroke: var(--linie-stark); stroke-width: 1; }
.erk-box.agent rect { fill: var(--akzent-flaeche); stroke: var(--akzent); }
.erk-box.pruef rect { fill: var(--orange-flaeche); stroke: var(--orange); }
.erk-box.mensch rect { fill: var(--gruen-flaeche); stroke: var(--gruen); }
.erk-box text { fill: var(--text); font: 600 15px var(--schrift); text-anchor: middle; }
.erk-bild text.klein { fill: var(--text-2); font: 400 12px var(--schrift); text-anchor: middle; }
.erk-bild text.links { text-anchor: start; }
.erk-linie { stroke: var(--text-3); stroke-width: 1.6; fill: none; }
.erk-linie.gestrichelt { stroke-dasharray: 5 5; }
.erk-pfeil { fill: var(--text-3); }
.erk-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 75ch; }
.erk-liste li { background: var(--karte); border-radius: var(--r-l); box-shadow: var(--schatten); padding: 14px 18px; color: var(--text-2); line-height: 1.55; }
.erk-liste strong { color: var(--text); }
.erk-inhalt section > p { max-width: 75ch; color: var(--text-2); line-height: 1.6; }
.erk-fuss { border-top: .5px solid var(--linie-stark); margin-top: 56px; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-2); }