/* ============================================================
   EB Visual-Partials — Mikro-Visualisierungen für Unterseiten
   ([eb_visual name="…"] → parts/visuals/*.php). 2026-07-14.

   Kontrakt (wie eb-motion, docs/motion-ausbau.md):
   - Markup-Grundzustand = ENDZUSTAND (No-JS zeigt alles fertig).
   - Startzustände/Animationen NUR unter body.eb-js (das setzt
     eb-motion.js — und nur ohne prefers-reduced-motion).
   - One-Shots + Loops starten erst mit .eb-visual.is-running
     (Viewport-Gating aus eb-motion.js); body.eb-hidden pausiert.
   - Stagger-Delays pro Element via --ebv-d (inline).
   Namespace eb-v-* / data-eb-* — kollisionsfrei zu eb-home.{css,js}.
   ============================================================ */

/* ---------- Karte + Grundgerüst ---------- */
.eb-visual { min-width: 0; }
.eb-vcard {
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 22px;
  padding: 22px 24px 24px;
}
.eb-v-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.eb-v-label,
.eb-v-status {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: #686C74;
}
.eb-v-status { display: inline-flex; align-items: center; gap: 7px; }
.eb-v-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #3FB768;
}
.eb-v-box {
  background: var(--eb-papier);
  border: 1px solid var(--eb-hairline);
  border-radius: 14px;
}
.eb-v-caption {
  margin-top: 10px;
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: #686C74;
}

/* ---------- Zeilen-Visuals (Automatisierung, SEO) ---------- */
.eb-v-rows { padding: 4px 18px 14px; }
.eb-v-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--eb-hairline);
}
.eb-v-rows .eb-v-row:last-of-type { border-bottom: 0; }
.eb-v-task { font-size: 13.5px; font-weight: 600; color: #2C3038; }
.eb-v-kw { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #2C3038; }
.eb-v-badge {
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--eb-ultramarin);
  background: rgba(35, 56, 232, .07);
  border: 1px solid rgba(35, 56, 232, .22);
  padding: 4px 8px;
}
.eb-v-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 12px;
  border: 1px solid var(--eb-hairline);
  background: #FFFFFF;
  padding: 6px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--eb-grau);
}
.eb-v-star { color: var(--eb-ultramarin); }

/* ---------- Business-Case (Consulting + Beispiel-Rechnung) ---------- */
.eb-v-kvs { padding: 16px 18px; }
.eb-v-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
}
.eb-v-kv:first-child { margin-top: 0; }
.eb-v-kv span { color: var(--eb-grau); }
.eb-v-kv strong { color: #12141C; font-weight: 600; }
.eb-v-verdict { position: relative; height: 28px; margin-top: 14px; }
.eb-v-va,
.eb-v-vb {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  color: #FFFFFF;
}
.eb-v-va { background: var(--eb-ultramarin); }
.eb-v-vb { background: #12141C; opacity: 0; }

/* ---------- Browser-Mockup (Relaunch) ---------- */
.eb-v-browser {
  background: var(--eb-papier);
  border: 1px solid var(--eb-hairline);
  border-radius: 14px;
  overflow: hidden;
}
.eb-v-bbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--eb-nebel);
  border-bottom: 1px solid var(--eb-hairline);
}
.eb-v-bdot { width: 7px; height: 7px; border-radius: 999px; background: #D9D6CA; }
.eb-v-burl {
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 6px;
  padding: 3px 16px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--eb-grau);
}
.eb-v-bbody { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 8px; }
.eb-v-skel { height: 8px; background: var(--eb-nebel); border-radius: 4px; }
.eb-v-skel--head { height: 12px; background: var(--eb-hairline); }
.eb-v-btnblock { height: 26px; width: 106px; background: var(--eb-ultramarin); margin-top: 4px; opacity: .92; }
.eb-v-build { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.eb-v-buildtxt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--eb-grau);
}
.eb-v-build .eb-v-dot { width: 6px; height: 6px; }

/* ---------- Chat (Assistenten) ---------- */
.eb-v-chat { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.eb-v-q {
  align-self: flex-end;
  max-width: 75%;
  background: #12141C;
  color: #FFFFFF;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  font-size: 13.5px;
  line-height: 1.45;
}
.eb-v-stage { position: relative; min-height: 84px; }
.eb-v-typing {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  padding: 13px 14px;
  border-radius: 14px 14px 14px 4px;
  opacity: 0; /* Grundzustand: Antwort sichtbar, Typing weg */
}
.eb-v-tdot { width: 6px; height: 6px; border-radius: 999px; background: #9BA0AD; }
.eb-v-answer {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 86%;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #2C3038;
}
.eb-v-src {
  display: block;
  margin-top: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: #686C74;
}

/* ---------- Balkenchart (Ads) ---------- */
.eb-v-barwrap { padding: 16px 18px; }
.eb-v-bars { display: flex; align-items: flex-end; gap: 7px; height: 96px; }
.eb-v-bar {
  flex: 1;
  background: rgba(35, 56, 232, var(--ebv-o, 1));
  border-radius: 4px 4px 2px 2px;
}

/* ============================================================
   Animationen — nur ohne reduced-motion und nur mit JS (body.eb-js).
   One-Shots (Pops, Balken) und Loops starten mit .is-running.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Startzustände (nur wenn animierbar) */
  body.eb-js .eb-visual [data-eb-pop] { opacity: 0; transform: scale(.85); }
  body.eb-js .eb-visual [data-eb-bar] { transform: scaleY(.06); transform-origin: bottom; }

  /* One-Shots */
  body.eb-js .eb-visual.is-running [data-eb-pop] {
    animation: eb-v-pop .5s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)) forwards;
    animation-delay: var(--ebv-d, 0s);
  }
  body.eb-js .eb-visual.is-running [data-eb-bar] {
    animation: eb-v-grow .7s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)) forwards;
    animation-delay: var(--ebv-d, 0s);
  }

  /* Loops (is-running existiert nur mit JS + ohne reduce) */
  .eb-visual.is-running .eb-v-dot { animation: eb-v-pulse 2.2s ease-in-out infinite; }
  .eb-visual.is-running .eb-v-tdot {
    animation: eb-v-blink 1.2s ease-in-out infinite;
    animation-delay: var(--ebv-d, 0s);
  }
  body.eb-js .eb-visual.is-running .eb-v-typing { animation: eb-v-typing 7.2s ease-in-out infinite; }
  body.eb-js .eb-visual.is-running .eb-v-answer { animation: eb-v-answer 7.2s ease-in-out infinite; }
  body.eb-js .eb-visual.is-running .eb-v-va { animation: eb-v-verdict-a 6.4s ease-in-out infinite; }
  body.eb-js .eb-visual.is-running .eb-v-vb { animation: eb-v-verdict-b 6.4s ease-in-out infinite; }

  /* Hintergrund-Tab pausiert alles (Klasse aus eb-motion.js) */
  body.eb-hidden .eb-visual [data-eb-pop],
  body.eb-hidden .eb-visual [data-eb-bar],
  body.eb-hidden .eb-visual .eb-v-dot,
  body.eb-hidden .eb-visual .eb-v-tdot,
  body.eb-hidden .eb-visual .eb-v-typing,
  body.eb-hidden .eb-visual .eb-v-answer,
  body.eb-hidden .eb-visual .eb-v-va,
  body.eb-hidden .eb-visual .eb-v-vb { animation-play-state: paused !important; }
}

@keyframes eb-v-pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes eb-v-grow { to { transform: scaleY(1); } }
@keyframes eb-v-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}
@keyframes eb-v-blink {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
/* Chat-Zyklus: Typing 0–30 %, Übergabe, Antwort 38–90 % */
@keyframes eb-v-typing {
  0%, 30%  { opacity: 1; }
  36%, 94% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes eb-v-answer {
  0%, 30%  { opacity: 0; }
  38%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
/* Verdict-Swap ✓/✗ */
@keyframes eb-v-verdict-a {
  0%, 44%  { opacity: 1; }
  50%, 94% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes eb-v-verdict-b {
  0%, 44%  { opacity: 0; }
  50%, 94% { opacity: 1; }
  100%     { opacity: 0; }
}

/* ---------- Anatomie-Flow (KI-Agenten) ---------- */
.eb-v-flow { padding: 8px 18px 12px; display: flex; flex-direction: column; }
.eb-v-node {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0 12px 4px;
}
.eb-v-node + .eb-v-node { border-top: 1px dashed var(--eb-hairline); }
.eb-v-nodenum {
  flex: 0 0 auto;
  width: 22px;
  padding-top: 1px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--eb-grau);
}
.eb-v-nodetxt { font-size: 13.5px; font-weight: 600; color: #2C3038; line-height: 1.3; }
.eb-v-nodetxt small {
  display: block;
  margin-top: 2px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--eb-grau);
}
.eb-v-node--ai {
  border-left: 2px solid var(--eb-ultramarin);
  margin-left: -4px;
  padding-left: 10px;
  background: rgba(35, 56, 232, .05);
}
.eb-v-node--ai + .eb-v-node { border-top: 0; }
.eb-v-node--ai .eb-v-nodetxt { color: var(--eb-ultramarin); }
.eb-v-node--ai .eb-v-nodenum { color: var(--eb-ultramarin); }

/* ============================================================
   PREISE — Paketkarten (.eb-pkg) + Range-Balken (.eb-range).
   Signatur der Preisseite. Range-Fill wächst via scaleX unter
   .eb-visual.is-running (Gating in eb-motion.js) — kein neues JS.
   No-JS / reduced-motion = Endzustand (volle Balken). W11, 2026-07-15.
   ============================================================ */

/* ---------- 3 Wege: Paketkarten ---------- */
.eb-pkg {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 18px;
  padding: 28px 26px 26px;
}
.eb-pkg--feature { border-color: var(--eb-tinte); box-shadow: 0 18px 44px rgba(18, 20, 28, .10); }
@media (hover: hover) and (pointer: fine) {
  .eb-pkg { transition: transform .25s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)), box-shadow .25s ease, border-color .25s ease; }
  .eb-pkg:hover { transform: translateY(-4px); border-color: var(--eb-tinte); box-shadow: 0 16px 38px rgba(18, 20, 28, .10); }
  .eb-pkg--feature:hover { box-shadow: 0 24px 52px rgba(18, 20, 28, .14); }
}
.eb-pkg-tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--eb-ultramarin);
}
.eb-pkg-name {
  margin: 12px 0 0;
  font-family: "Archivo Expanded", system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--eb-tinte);
  line-height: 1.15;
}
.eb-pkg-price {
  margin: 16px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--eb-tinte);
  line-height: 1;
}
.eb-pkg-price .eb-pkg-ab { font-size: .8rem; color: var(--eb-grau); letter-spacing: .04em; margin-right: 3px; }
.eb-pkg-note {
  display: block;
  margin-top: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--eb-grau);
}
.eb-pkg-for { margin: 16px 0 0; font-size: .95rem; line-height: 1.55; color: var(--eb-grau); }
.eb-pkg-div { height: 1px; margin: 20px 0 18px; background: var(--eb-hairline); }
.eb-pkg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.eb-pkg-list li { position: relative; padding-left: 26px; font-size: .9375rem; line-height: 1.5; color: #2C3038; }
.eb-pkg-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--eb-ultramarin); font-weight: 600; }
.eb-pkg-cta { margin-top: auto; padding-top: 24px; }

/* ---------- Preisrahmen je Position: Range-Balken ---------- */
.eb-ranges { display: flex; flex-direction: column; gap: 26px; }
.eb-range-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.eb-range-name { font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 1.0625rem; font-weight: 600; color: var(--eb-tinte); }
.eb-range-name small {
  display: inline-block;
  margin-left: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--eb-grau);
}
.eb-range-val { flex: 0 0 auto; font-family: "IBM Plex Mono", monospace; font-size: 1.05rem; color: var(--eb-tinte); white-space: nowrap; }
.eb-range-val .eb-range-lo { color: var(--eb-grau); font-size: .8em; }
.eb-range-track { position: relative; height: 10px; border-radius: 999px; background: var(--eb-nebel); }
.eb-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--eb-lo, 0%);
  width: calc(var(--eb-hi, 60%) - var(--eb-lo, 0%));
  border-radius: 999px;
  background: linear-gradient(90deg, var(--eb-ultramarin), #4A5BF0);
  transform-origin: left center;
}
.eb-range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .06em;
  color: #686C74;
}

@media (prefers-reduced-motion: no-preference) {
  body.eb-js .eb-visual .eb-range-fill { transform: scaleX(0); }
  body.eb-js .eb-visual.is-running .eb-range-fill {
    animation: eb-range-grow .9s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)) forwards;
    animation-delay: var(--ebv-d, 0s);
  }
  body.eb-hidden .eb-visual .eb-range-fill { animation-play-state: paused !important; }
}
@keyframes eb-range-grow { to { transform: scaleX(1); } }

/* Hero-Preview (.eb-v-preise): kompaktere Range-Rows */
.eb-v-preise-box { padding: 16px 18px; }
.eb-v-preise .eb-ranges { gap: 16px; }
.eb-v-preise .eb-range-name { font-size: .9rem; }
.eb-v-preise .eb-range-val { font-size: .8125rem; }
.eb-v-preise .eb-range-track { height: 8px; }

/* ============================================================
   BAUSTEIN-GALERIE W01–W14 (Claude Design Bausteine.dc.html, W12 2026-07-15)
   Wiederverwendbare Module für Leistungs-/Wissensseiten.
   Gleicher Kontrakt: Grundzustand = ENDZUSTAND, Animation nur
   body.eb-js + .is-running, body.eb-hidden pausiert, reduced-motion
   = Endzustand. Loops sind ambient (laufen ohne Scroll/Klick).
   Farben auf a11y-sichere Token geportet (#686C74 statt #8B90A0 …).
   ============================================================ */

/* ---------- Gemeinsame Kleinteile ---------- */
.eb-w-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 999px;
  background: var(--eb-nebel);
  border: 1px solid var(--eb-hairline);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #2C3038;
}
.eb-w-spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--eb-hairline);
  border-top-color: var(--eb-ultramarin);
  border-radius: 999px;
}
.eb-w-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.eb-w-eq > span { width: 3px; height: 16px; background: var(--eb-ultramarin); transform-origin: bottom; }
.eb-w-eq > span:nth-child(1) { opacity: .55; }
.eb-w-eq > span:nth-child(2) { opacity: .75; }
.eb-w-eq > span:nth-child(4) { opacity: .65; }

/* Prüf-Zyklus (W01/W10): data-eb-wait ↔ data-eb-ok. Grundzustand: erledigt. */
.eb-w-state { position: relative; flex: none; }
.eb-w-state [data-eb-wait] { position: absolute; right: 0; top: 2px; opacity: 0; white-space: nowrap; }
.eb-w-state [data-eb-ok] {
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--eb-ultramarin);
  background: rgba(35, 56, 232, .07);
  border: 1px solid rgba(35, 56, 232, .22);
  padding: 4px 7px;
}
.eb-w-wait-txt { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .04em; color: var(--eb-grau); }

/* Scanner-Karten (W11/W13): Grundzustand = gewählt/gedimmt (Endzustand) */
.eb-w-slot { position: relative; border: 1px solid var(--eb-hairline); background: #FFFFFF; }
.eb-w-slot[data-pick] { border-color: var(--eb-ultramarin); background: rgba(35, 56, 232, .08); }
.eb-w-slot:not([data-pick]) { opacity: .45; }
.eb-w-badge2 {
  position: absolute;
  top: -9px;
  right: -7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 7.5px;
  letter-spacing: .06em;
  color: #FFFFFF;
  background: var(--eb-ultramarin);
  padding: 3px 6px;
  white-space: nowrap;
}
.eb-w-reason { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--eb-grau); }
.eb-w-reason strong { color: var(--eb-ultramarin); font-weight: 700; }

/* Balken horizontal (W09/W14): Grundzustand voll */
[data-eb-fillx] { transform-origin: left center; }

/* Track/Progress-Zeile (W09/W14) */
.eb-w-track { height: 8px; background: var(--eb-nebel); border-radius: 99px; overflow: hidden; }
.eb-w-track > span { display: block; height: 100%; background: var(--eb-ultramarin); border-radius: 99px; }

/* W02 — Datenfluss */
.eb-w02-stage { position: relative; flex: 1; margin-top: 8px; min-height: 148px; }
.eb-w02-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eb-w02-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  color: #3C414D;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 8px;
  padding: 8px 12px;
  white-space: nowrap;
}
.eb-w02-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: #12141C;
  border-radius: 11px;
  padding: 11px 16px;
}
.eb-w02-hub b { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; color: #FFFFFF; }
.eb-w02-hub small { display: block; margin-top: 3px; font-family: "IBM Plex Mono", monospace; font-size: 8.5px; letter-spacing: .1em; color: #A6AAB2; }
.eb-w02-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: var(--eb-ultramarin);
  opacity: 0; /* Grundzustand: Punkte unsichtbar (Fluss ist Bewegung) */
}

/* W03 — Business-Case-Tacho */
.eb-w03-gauge { width: 210px; max-width: 100%; height: auto; overflow: visible; }
.eb-w03-arc { stroke: var(--eb-ultramarin); stroke-dasharray: 251; stroke-dashoffset: 70.3; }
.eb-w03-needle { transform-box: view-box; transform-origin: 110px 110px; transform: rotate(129.6deg); }
.eb-w03-roi { position: relative; display: inline-block; min-width: 3ch; }
.eb-w03-roi span { font-family: "IBM Plex Mono", monospace; font-size: 23px; font-weight: 600; color: #12141C; }
.eb-w03-roi [data-roi-b] { position: absolute; left: 0; top: 0; opacity: 0; }
.eb-w03-verdict { position: relative; height: 28px; margin-top: 4px; }
.eb-w03-verdict span {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  color: #FFFFFF;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
}
.eb-w03-verdict [data-v-a] { background: var(--eb-ultramarin); }
.eb-w03-verdict [data-v-b] { background: #12141C; opacity: 0; }

/* W04 — Festpreis vs. Tagessatz */
.eb-w04-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; align-items: stretch; }
.eb-w04-card { border: 1px solid var(--eb-hairline); background: #FFFFFF; border-radius: 11px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.eb-w04-card--dark { border-color: #23252E; background: #12141C; }
.eb-w04-label { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .12em; color: var(--eb-grau); }
.eb-w04-card--dark .eb-w04-label { color: #A6AAB2; }
.eb-w04-climb { position: relative; height: 24px; font-family: "IBM Plex Mono", monospace; font-size: 20px; font-weight: 600; color: #12141C; }
.eb-w04-climb span { position: absolute; left: 0; top: 0; opacity: 0; }
.eb-w04-climb span:last-child { opacity: 1; } /* Grundzustand: höchster Wert */
.eb-w04-price { font-family: "IBM Plex Mono", monospace; font-size: 20px; font-weight: 600; color: #FFFFFF; }
.eb-w04-open { margin-top: auto; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .1em; color: #C2410C; }
.eb-w04-fix { align-self: flex-start; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .08em; color: #FFFFFF; background: var(--eb-ultramarin); padding: 4px 8px; }
.eb-w04-sub { margin-top: auto; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .1em; color: #9BA0AD; }
.eb-w04-bar { height: 6px; background: var(--eb-nebel); border-radius: 99px; overflow: hidden; }
.eb-w04-bar > span { display: block; height: 100%; width: 95%; background: #C2410C; border-radius: 99px; }

/* W05 — Amortisation */
.eb-w05-line { stroke: var(--eb-ultramarin); stroke-dasharray: 440; stroke-dashoffset: 0; }
.eb-w05-area { fill: var(--eb-ultramarin); fill-opacity: .12; opacity: 1; }
.eb-w05-be { opacity: 1; }
.eb-w-legend { display: flex; align-items: center; gap: 16px; margin-top: 6px; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .1em; color: var(--eb-grau); }
.eb-w-legend i { display: inline-block; width: 14px; }

/* W06 — Ranking-Klettern */
.eb-w06-stage { position: relative; height: 184px; margin-top: 14px; }
.eb-w06-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 8px;
  box-sizing: border-box;
}
.eb-w06-row .eb-w06-fav { width: 22px; height: 22px; border-radius: 5px; background: var(--eb-nebel); flex: none; }
.eb-w06-skel { display: block; height: 7px; background: var(--eb-hairline); border-radius: 4px; }
.eb-w06-dom { display: block; margin-top: 5px; font-family: "IBM Plex Mono", monospace; font-size: 9px; color: #686C74; }
.eb-w06-row--eb { background: rgba(35, 56, 232, .06); border-color: rgba(35, 56, 232, .30); }
.eb-w06-row--eb .eb-w06-fav { background: var(--eb-ultramarin); display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; }
.eb-w06-rank { position: relative; width: 3ch; flex: none; font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; color: var(--eb-ultramarin); }
.eb-w06-rank span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.eb-w06-rank [data-rank-a] { opacity: 0; }
.eb-w06-trend {
  flex: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--eb-ultramarin);
  background: rgba(35, 56, 232, .08);
  border: 1px solid rgba(35, 56, 232, .22);
  padding: 3px 6px;
}
/* DOM-Reihenfolge: 3 Wettbewerber-Zeilen, dann die eb-Zeile (4. Kind).
   Grundzustand = Endlayout (eb auf Platz 2). KEIN !important — das würde
   die top-Keyframes blockieren (Animationen verlieren gegen !important). */
.eb-w06-row:nth-child(1) { top: 0; }
.eb-w06-row:nth-child(2) { top: 92px; }
.eb-w06-row:nth-child(3) { top: 138px; }
.eb-w06-row.eb-w06-row--eb { top: 46px; }

/* W08 — Antwort-Box */
.eb-w08-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 99px;
  padding: 10px 15px;
}
.eb-w08-lens { width: 12px; height: 12px; border: 2px solid #9BA0AD; border-radius: 999px; flex: none; }
.eb-w08-q { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #2C3038; min-width: 0; white-space: nowrap; overflow: hidden; }
.eb-w08-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%; }
.eb-w08-caret { display: inline-block; width: 2px; height: 13px; background: var(--eb-ultramarin); margin-left: 1px; vertical-align: -2px; }
.eb-w08-box { overflow: hidden; max-height: 200px; opacity: 1; margin-top: 12px; }
.eb-w08-card { background: #FFFFFF; border: 1px solid var(--eb-hairline); border-radius: 12px; padding: 14px; }
.eb-w08-pos {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: #FFFFFF;
  background: var(--eb-ultramarin);
  padding: 4px 8px;
  margin-bottom: 10px;
}

/* ---------- Animationen (nur ohne reduced-motion, nur mit JS) ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* Loops: Spinner, Equalizer */
  .eb-visual.is-running .eb-w-spin { animation: eb-w-spin .8s linear infinite; }
  .eb-visual.is-running .eb-w-eq > span { animation: eb-w-eq 1s ease-in-out infinite; }
  .eb-visual.is-running .eb-w-eq > span:nth-child(2) { animation-delay: .15s; }
  .eb-visual.is-running .eb-w-eq > span:nth-child(3) { animation-delay: .3s; }
  .eb-visual.is-running .eb-w-eq > span:nth-child(4) { animation-delay: .45s; }

  /* W02: Dash-March + Wander-Punkte (Ecke → Hub, gestaffelt) */
  .eb-visual.is-running .eb-w-dash { animation: eb-w-dash 1.1s linear infinite; }
  body.eb-js .eb-visual.is-running .eb-w02-dot {
    animation: eb-w02-travel 1.7s linear infinite;
    animation-delay: var(--ebv-d, 0s);
  }

  /* Prüf-Zyklus W01/W10 (8s, gestaffelt via --ebv-d) */
  body.eb-js .eb-visual [data-eb-ok] { opacity: 0; transform: scale(.85); }
  body.eb-js .eb-visual [data-eb-wait] { opacity: 1; }
  body.eb-js .eb-visual.is-running [data-eb-ok] {
    animation: eb-w-ok 8s cubic-bezier(.34, 1.4, .5, 1) infinite backwards;
    animation-delay: var(--ebv-d, 0s);
  }
  body.eb-js .eb-visual.is-running [data-eb-wait] {
    animation: eb-w-wait 8s linear infinite backwards;
    animation-delay: var(--ebv-d, 0s);
  }

  /* W03: Tacho-Zyklus 10s — UMSETZEN (72 %) ↔ ehrliches LASSEN (20 %) */
  body.eb-js .eb-visual.is-running .eb-w03-arc { animation: eb-w03-arc 10s ease-in-out infinite; }
  body.eb-js .eb-visual.is-running .eb-w03-needle { animation: eb-w03-needle 10s ease-in-out infinite; }
  body.eb-js .eb-visual.is-running .eb-w03-roi [data-roi-a] { animation: eb-w03-a 10s linear infinite; }
  body.eb-js .eb-visual.is-running .eb-w03-roi [data-roi-b] { animation: eb-w03-b 10s linear infinite; }
  body.eb-js .eb-visual.is-running .eb-w03-verdict [data-v-a] { animation: eb-w03-a 10s linear infinite; }
  body.eb-js .eb-visual.is-running .eb-w03-verdict [data-v-b] { animation: eb-w03-b 10s linear infinite; }

  /* W04: kletternder Tagessatz (7s) — 3 Wertstufen + Balken */
  body.eb-js .eb-visual.is-running .eb-w04-climb span:nth-child(1) { animation: eb-w04-v1 7s linear infinite; }
  body.eb-js .eb-visual.is-running .eb-w04-climb span:nth-child(2) { animation: eb-w04-v2 7s linear infinite; }
  body.eb-js .eb-visual.is-running .eb-w04-climb span:nth-child(3) { animation: eb-w04-v3 7s linear infinite; }
  body.eb-js .eb-visual.is-running .eb-w04-bar > span { animation: eb-w04-bar 7s linear infinite; }
  .eb-visual.is-running .eb-w04-open { animation: eb-v-blink 1.6s ease-in-out infinite; }

  /* W05: Linie zeichnet, Fläche blendet, Break-even poppt (One-Shot) */
  body.eb-js .eb-visual .eb-w05-line { stroke-dashoffset: 440; }
  body.eb-js .eb-visual .eb-w05-area { opacity: 0; }
  body.eb-js .eb-visual .eb-w05-be { opacity: 0; }
  body.eb-js .eb-visual.is-running .eb-w05-line { animation: eb-w05-draw 1.3s cubic-bezier(.22, .61, .36, 1) forwards; }
  body.eb-js .eb-visual.is-running .eb-w05-area { animation: eb-v-pop 1.3s ease forwards; animation-delay: .2s; }
  body.eb-js .eb-visual.is-running .eb-w05-be { animation: eb-v-pop .5s ease forwards; animation-delay: 1s; }

  /* W06: Ranking-Klettern (10s Loop, Start unten → Platz 2) */
  body.eb-js .eb-visual.is-running .eb-w06-row--eb { animation: eb-w06-eb 10s cubic-bezier(.22, .61, .36, 1) infinite; }
  body.eb-js .eb-visual.is-running .eb-w06-row:nth-child(2) { animation: eb-w06-o2 10s cubic-bezier(.22, .61, .36, 1) infinite; }
  body.eb-js .eb-visual.is-running .eb-w06-row:nth-child(3) { animation: eb-w06-o3 10s cubic-bezier(.22, .61, .36, 1) infinite; }
  body.eb-js .eb-visual.is-running .eb-w06-rank [data-rank-a] { animation: eb-w06-ra 10s linear infinite; }
  body.eb-js .eb-visual.is-running .eb-w06-rank [data-rank-b] { animation: eb-w06-rb 10s linear infinite; }
  body.eb-js .eb-visual.is-running .eb-w06-trend { animation: eb-w06-trend 10s linear infinite; }

  /* W08: Typewriter (11s Loop) — Mono-Font, Breite in ch */
  body.eb-js .eb-visual.is-running .eb-w08-type { animation: eb-w08-type 11s linear infinite; }
  .eb-visual.is-running .eb-w08-caret { animation: eb-v-blink 1s step-end infinite; }
  body.eb-js .eb-visual.is-running .eb-w08-box { animation: eb-w08-box 11s ease infinite; }

  /* W09/W14: horizontale Balken (One-Shot) */
  body.eb-js .eb-visual [data-eb-fillx] { transform: scaleX(0); }
  body.eb-js .eb-visual.is-running [data-eb-fillx] {
    animation: eb-w-growx .7s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: var(--ebv-d, 0s);
  }

  /* W11/W13: Scanner (9s Loop) — Flash läuft per --ebv-d durch die Slots,
     danach hält der [data-pick]-Slot, alle anderen dimmen synchron. */
  body.eb-js .eb-visual.is-running .eb-w-slot:not([data-pick]) {
    border-color: var(--eb-hairline);
    background: #FFFFFF;
    animation: eb-w-scanflash 9s linear infinite var(--ebv-d, 0s), eb-w-dimwin 9s linear infinite;
  }
  body.eb-js .eb-visual.is-running .eb-w-slot[data-pick] {
    border-color: var(--eb-hairline);
    background: #FFFFFF;
    animation: eb-w-pickwin 9s linear infinite;
  }
  body.eb-js .eb-visual .eb-w-badge2,
  body.eb-js .eb-visual .eb-w-reason { opacity: 0; }
  body.eb-js .eb-visual.is-running .eb-w-badge2,
  body.eb-js .eb-visual.is-running .eb-w-reason { animation: eb-w-badgewin 9s linear infinite; }

  /* Hintergrund-Tab pausiert ALLES in Visuals */
  body.eb-hidden .eb-visual,
  body.eb-hidden .eb-visual * { animation-play-state: paused !important; }
}

@keyframes eb-w-spin { to { transform: rotate(360deg); } }
@keyframes eb-w-dash { to { stroke-dashoffset: -22; } }
@keyframes eb-w-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes eb-w02-travel {
  0%   { opacity: 0; left: var(--eb-x0); top: var(--eb-y0); }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; left: 50%; top: 50%; }
}
@keyframes eb-w-ok {
  0% { opacity: 0; transform: scale(.85); }
  7%, 86% { opacity: 1; transform: scale(1); }
  93%, 100% { opacity: 0; transform: scale(.85); }
}
@keyframes eb-w-wait {
  0%, 6% { opacity: 1; }
  8%, 85% { opacity: 0; }
  94%, 100% { opacity: 1; }
}
@keyframes eb-w03-arc {
  0%, 4% { stroke-dashoffset: 251; stroke: var(--eb-ultramarin); }
  16%, 48% { stroke-dashoffset: 70.3; stroke: var(--eb-ultramarin); }
  56%, 88% { stroke-dashoffset: 200.8; stroke: #12141C; }
  96%, 100% { stroke-dashoffset: 251; stroke: var(--eb-ultramarin); }
}
@keyframes eb-w03-needle {
  0%, 4% { transform: rotate(0deg); }
  16%, 48% { transform: rotate(129.6deg); }
  56%, 88% { transform: rotate(36deg); }
  96%, 100% { transform: rotate(0deg); }
}
@keyframes eb-w03-a { 0%, 12% { opacity: 0; } 16%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes eb-w03-b { 0%, 52% { opacity: 0; } 56%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes eb-w04-v1 { 0%, 2% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes eb-w04-v2 { 0%, 33% { opacity: 0; } 35%, 65% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes eb-w04-v3 { 0%, 66% { opacity: 0; } 68%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eb-w04-bar { 0% { width: 20%; } 33% { width: 46%; } 66% { width: 72%; } 96% { width: 95%; } 100% { width: 20%; } }
@keyframes eb-w05-draw { to { stroke-dashoffset: 0; } }
@keyframes eb-w06-eb {
  0%, 8% { top: 138px; }
  18%, 90% { top: 46px; }
  98%, 100% { top: 138px; }
}
@keyframes eb-w06-o2 {
  0%, 8% { top: 46px; }
  18%, 90% { top: 92px; }
  98%, 100% { top: 46px; }
}
@keyframes eb-w06-o3 {
  0%, 8% { top: 92px; }
  18%, 90% { top: 138px; }
  98%, 100% { top: 92px; }
}
@keyframes eb-w06-ra { 0%, 16% { opacity: 1; } 20%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes eb-w06-rb { 0%, 16% { opacity: 0; } 20%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes eb-w06-trend { 0%, 22% { opacity: 0; } 26%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes eb-w08-type {
  0%, 3% { width: 0; animation-timing-function: steps(39); }
  20%, 90% { width: 39ch; }
  95%, 100% { width: 0; }
}
@keyframes eb-w08-box {
  0%, 22% { max-height: 0; opacity: 0; }
  30%, 90% { max-height: 200px; opacity: 1; }
  96%, 100% { max-height: 0; opacity: 0; }
}
@keyframes eb-w-growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes eb-w-scanflash {
  0%, 1% { border-color: var(--eb-hairline); background: #FFFFFF; }
  2%, 4% { border-color: rgba(35, 56, 232, .5); background: rgba(35, 56, 232, .04); }
  5%, 100% { border-color: var(--eb-hairline); background: #FFFFFF; }
}
@keyframes eb-w-dimwin { 0%, 30% { opacity: 1; } 34%, 86% { opacity: .45; } 92%, 100% { opacity: 1; } }
@keyframes eb-w-pickwin {
  0%, 31% { border-color: var(--eb-hairline); background: #FFFFFF; }
  34%, 88% { border-color: var(--eb-ultramarin); background: rgba(35, 56, 232, .08); }
  94%, 100% { border-color: var(--eb-hairline); background: #FFFFFF; }
}
@keyframes eb-w-badgewin { 0%, 32% { opacity: 0; } 36%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 766px) {
  .eb-vcard { border-radius: 16px; padding: 16px 16px 18px; }
  .eb-v-rows { padding: 2px 14px 10px; }
  .eb-v-bars { height: 72px; }
  .eb-pkg { padding: 22px 20px 22px; border-radius: 16px; }
  .eb-range-name { font-size: 1rem; }
  .eb-range-val { font-size: .95rem; }
  .eb-w04-grid { grid-template-columns: 1fr; }
  .eb-w02-chip { padding: 6px 8px; font-size: 9px; }
}

/* ============================================================
   HERO-SIGNATUR „Automation mit Kontrolle" (W13/E21, 2026-07-20)
   Drei Eingänge → Automation → Ergebnisse. Der Sonderfall läuft
   sichtbar durch einen Human-in-the-Loop und anschließend zurück
   durch die Automation. Keine Toolwerbung, keine erfundene Metrik.
   Grundzustand = verständlicher Endzustand; mit JS genau ein
   13,5-s-Durchlauf. Alle Punktkoordinaten liegen exakt auf den
   SVG-Linien im 480×330-Bezugsraum; jeder Pfad wird beim ersten
   Befahren per SVG-Maske hinter dem Datenpunkt aufgedeckt.
   ============================================================ */
.eb-hm { overflow: hidden; }
.eb-hm .eb-v-head { margin-bottom: 8px; }
.eb-hm-demo { color: var(--eb-ultramarin); white-space: nowrap; }
.eb-hm-demo-short { display: none; }
.eb-hm-stage { position: relative; width: 100%; aspect-ratio: 480 / 330; margin-top: 8px; }
.eb-hm-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eb-hm-stage .eb-hm-line { stroke: #CCD0E6; stroke-width: 1.6; stroke-dasharray: 5 6; fill: none; }
.eb-hm-mask {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.eb-hm-mask--i1 { --eb-hm-trace-delay: 1.215s; --eb-hm-trace-duration: .675s; }
.eb-hm-mask--o1 { --eb-hm-trace-delay: 2.43s; --eb-hm-trace-duration: .675s; }
.eb-hm-mask--i2 { --eb-hm-trace-delay: 3.375s; --eb-hm-trace-duration: .675s; }
.eb-hm-mask--o2 { --eb-hm-trace-delay: 4.59s; --eb-hm-trace-duration: .675s; }
.eb-hm-mask--i3 { --eb-hm-trace-delay: 5.67s; --eb-hm-trace-duration: .81s; }
.eb-hm-mask--review { --eb-hm-trace-delay: 7.425s; --eb-hm-trace-duration: .81s; }
.eb-hm-mask--o3 { --eb-hm-trace-delay: 12.555s; --eb-hm-trace-duration: .675s; }
.eb-hm-col {
  position: absolute;
  top: 0;
  z-index: 2;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .14em;
  color: #686C74;
}
.eb-hm-col--in { left: 0; }
.eb-hm-col--out { left: 68.5%; }
.eb-hm-slot {
  position: absolute;
  left: 0;
  width: 27.5%;
  height: 16%;
  border: 1px dashed var(--eb-hairline);
  border-radius: 10px;
  box-sizing: border-box;
  z-index: 2;
}
.eb-hm-s1, .eb-hm-r1 { top: 7%; }
.eb-hm-s2, .eb-hm-r2 { top: 34%; }
.eb-hm-s3, .eb-hm-r3 { top: 61%; }
.eb-hm-task {
  position: absolute;
  inset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 6px;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .05em;
  line-height: 1.35;
  color: #2C3038;
}
.eb-hm-hub {
  position: absolute;
  left: 36.5%;
  top: 34%;
  width: 27%;
  height: 17%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  text-align: center;
  background: #12141C;
  border-radius: 12px;
  z-index: 3;
}
.eb-hm-hub b { display: block; font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 11px; letter-spacing: .18em; color: #FFFFFF; }
.eb-hm-ok {
  position: absolute;
  left: 68.5%;
  width: 31.5%;
  height: 16%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 8px 9px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .05em;
  line-height: 1.35;
  color: var(--eb-ultramarin);
  background: rgba(35, 56, 232, .07);
  border: 1px solid rgba(35, 56, 232, .22);
  border-radius: 8px;
  z-index: 2;
}
.eb-hm-dot {
  position: absolute;
  left: 27.5%;
  top: 15.15%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--eb-ultramarin);
  box-shadow: 0 0 0 3px rgba(35, 56, 232, .12);
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 4;
}
.eb-hm-review {
  position: absolute;
  left: 31%;
  top: 76%;
  width: 37.5%;
  height: 18.5%;
  border: 1px solid var(--eb-hairline);
  border-radius: 10px;
  background: var(--eb-papier);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  z-index: 2;
}
.eb-hm-review b { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: #12141C; }
.eb-hm-review small { font-size: 8px; letter-spacing: .1em; color: #686C74; }

@media (prefers-reduced-motion: no-preference) {
  /* No-JS/reduced-motion sehen den Endzustand. Nur der einmalige
     JS-Durchlauf setzt Karten zunächst zurück. */
  body.eb-js .eb-hm .eb-hm-task,
  body.eb-js .eb-hm .eb-hm-ok { opacity: 0; transform: scale(.88); }
  body.eb-js .eb-hm .eb-hm-mask { stroke-dashoffset: 1; }

  body.eb-js .eb-hm.is-running .eb-hm-task,
  body.eb-js .eb-hm.is-running .eb-hm-ok {
    animation: eb-hm-reveal .45s cubic-bezier(.34, 1.4, .5, 1) 1 both;
    animation-delay: var(--eb-hm-delay, 0s);
  }
  body.eb-js .eb-hm.is-running .eb-hm-t1 { --eb-hm-delay: .5s; }
  body.eb-js .eb-hm.is-running .eb-hm-t2 { --eb-hm-delay: 2.5s; }
  body.eb-js .eb-hm.is-running .eb-hm-t3 { --eb-hm-delay: 4.9s; }
  body.eb-js .eb-hm.is-running .eb-hm-r1 { --eb-hm-delay: 3.15s; }
  body.eb-js .eb-hm.is-running .eb-hm-r2 { --eb-hm-delay: 5.3s; }
  body.eb-js .eb-hm.is-running .eb-hm-r3 { --eb-hm-delay: 13s; }

  body.eb-js .eb-hm.is-running .eb-hm-d1 { animation: eb-hm-route-1 13.5s linear 1 both; }
  body.eb-js .eb-hm.is-running .eb-hm-d2 { animation: eb-hm-route-2 13.5s linear 1 both; }
  body.eb-js .eb-hm.is-running .eb-hm-d3 { animation: eb-hm-route-3 13.5s linear 1 both; }
  body.eb-js .eb-hm.is-running .eb-hm-hub { animation: eb-hm-hub-cycle 13.5s ease-in-out 1 both; }
  body.eb-js .eb-hm.is-running .eb-hm-review { animation: eb-hm-review-cycle 13.5s ease-in-out 1 both; }
  body.eb-js .eb-hm.is-running .eb-hm-line--review { animation: eb-hm-review-line 13.5s ease 1 both; }
  body.eb-js .eb-hm.is-running .eb-hm-mask {
    animation: eb-hm-trace var(--eb-hm-trace-duration) linear var(--eb-hm-trace-delay) 1 both;
  }
}

@keyframes eb-hm-reveal {
  from { opacity: 0; transform: scale(.88); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes eb-hm-trace {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes eb-hm-route-1 {
  0%, 8% { opacity: 0; left: 27.5%; top: 15.15%; }
  9% { opacity: 1; left: 27.5%; top: 15.15%; }
  14% { opacity: 1; left: 36.667%; top: 42.424%; }
  15% { opacity: 0; left: 36.667%; top: 42.424%; }
  17% { opacity: 0; left: 63.542%; top: 42.424%; }
  18% { opacity: 1; left: 63.542%; top: 42.424%; }
  23% { opacity: 1; left: 68.542%; top: 15.15%; }
  24%, 100% { opacity: 0; left: 68.542%; top: 15.15%; }
}
@keyframes eb-hm-route-2 {
  0%, 24% { opacity: 0; left: 27.5%; top: 42.121%; }
  25% { opacity: 1; left: 27.5%; top: 42.121%; }
  30% { opacity: 1; left: 36.667%; top: 42.424%; }
  31% { opacity: 0; left: 36.667%; top: 42.424%; }
  33% { opacity: 0; left: 63.542%; top: 42.424%; }
  34% { opacity: 1; left: 63.542%; top: 42.424%; }
  39% { opacity: 1; left: 68.542%; top: 42.121%; }
  40%, 100% { opacity: 0; left: 68.542%; top: 42.121%; }
}
@keyframes eb-hm-route-3 {
  0%, 41% { opacity: 0; left: 27.5%; top: 69.091%; }
  42% { opacity: 1; left: 27.5%; top: 69.091%; }
  48% { opacity: 1; left: 36.667%; top: 42.424%; }
  49% { opacity: 0; left: 36.667%; top: 42.424%; }
  54% { opacity: 0; left: 50%; top: 50.909%; }
  55% { opacity: 1; left: 50%; top: 50.909%; }
  61% { opacity: 1; left: 50%; top: 76.061%; }
  62% { opacity: 0; left: 50%; top: 76.061%; }
  73% { opacity: 0; left: 50%; top: 76.061%; }
  74% { opacity: 1; left: 50%; top: 76.061%; }
  88% { opacity: 1; left: 50%; top: 50.909%; }
  89% { opacity: 0; left: 50%; top: 50.909%; }
  92% { opacity: 0; left: 63.542%; top: 42.424%; }
  93% { opacity: 1; left: 63.542%; top: 42.424%; }
  98% { opacity: 1; left: 68.542%; top: 69.091%; }
  99%, 100% { opacity: 0; left: 68.542%; top: 69.091%; }
}
@keyframes eb-hm-hub-cycle {
  0%, 13%, 16%, 29%, 32%, 47%, 50%, 87%, 90%, 100% { transform: scale(1); box-shadow: none; }
  14.5%, 30.5%, 48.5%, 88.5% { transform: scale(1.035); box-shadow: 0 0 0 2px var(--eb-ultramarin); }
}
@keyframes eb-hm-review-cycle {
  0%, 60%, 82%, 100% { transform: scale(1); border-color: var(--eb-hairline); background: var(--eb-papier); }
  65%, 76% { transform: scale(1.025); border-color: rgba(35, 56, 232, .55); background: rgba(35, 56, 232, .07); }
}
@keyframes eb-hm-review-line {
  0%, 52%, 66%, 71%, 91%, 100% { stroke: #CCD0E6; }
  56%, 62%, 75%, 88% { stroke: var(--eb-ultramarin); }
}

@media (max-width: 640px) {
  .eb-hm-stage { aspect-ratio: 480 / 400; }
  .eb-hm-brand, .eb-hm-demo-long { display: none; }
  .eb-hm-demo-short { display: inline; }
  .eb-hm-task, .eb-hm-ok { font-size: 9px; letter-spacing: 0; }
  .eb-hm-col { font-size: 8.5px; letter-spacing: .1em; }
  .eb-hm-hub b { font-size: 9.5px; letter-spacing: .12em; }
  .eb-hm-review b { font-size: 9px; letter-spacing: .02em; }
  .eb-hm-review small { font-size: 7.5px; letter-spacing: .06em; }
}

/* ============================================================
   GLOSSAR — Eintrags-Bausteine (Beiträge unter /glossar/, W14 2026-07-17)
   Breadcrumb, Klartext-Kasten (Marken-Signatur je Eintrag), Fließtext,
   Verwandte-Begriffe-Chips. Nutzt die bestehenden eb-Tokens/-Klassen
   (ebwrap, ebeyebrow, eb-faq-item, eb-facts). Farben a11y-sicher (§7.18).
   ============================================================ */
/* Lesespalte: ruhige Zeilenlänge für Fließtext-Einträge */
.eb-read { max-width: 760px; }
.eb-glead { font-size: 1.1875rem; line-height: 1.6; color: var(--eb-tinte); }

.eb-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eb-grau);
}
.eb-crumb a { color: var(--eb-grau); border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.eb-crumb a:hover { color: var(--eb-ultramarin); border-bottom-color: var(--eb-ultramarin); }
.eb-crumb .eb-crumb-sep { color: #A8A79C; }
.eb-crumb [aria-current] { color: var(--eb-tinte); }

.eb-gmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: .08em;
  color: var(--eb-grau);
}
.eb-gmeta > span { display: inline-flex; align-items: center; gap: 7px; }
.eb-gmeta .eb-gdot { width: 5px; height: 5px; border-radius: 999px; background: var(--eb-ultramarin); }

/* Klartext-Kasten: die everbrave-Signatur je Eintrag (entzaubert den Hype). */
.eb-klartext {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-left: 3px solid var(--eb-ultramarin);
  border-radius: 12px;
  padding: 20px 24px 22px;
}
.eb-klartext-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eb-ultramarin);
}
.eb-klartext-label::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--eb-ultramarin);
  display: inline-block;
}
.eb-klartext p {
  margin: 10px 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--eb-tinte);
  font-weight: 500;
}

/* Fließtext im Glossar-Eintrag */
.eb-prose h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.2;
  margin: 0;
}
.eb-prose p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--eb-grau);
  margin: 14px 0 0;
}
.eb-prose p strong { color: var(--eb-tinte); font-weight: 600; }
.eb-prose a { color: var(--eb-tinte); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.eb-prose a:hover { color: var(--eb-ultramarin); }
.eb-prose ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.eb-prose ul li { position: relative; padding-left: 26px; font-size: 1.0625rem; line-height: 1.6; color: var(--eb-grau); }
.eb-prose ul li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--eb-ultramarin); font-weight: 600; }
.eb-prose ul li strong { color: var(--eb-tinte); font-weight: 600; }

/* Verwandte Begriffe */
.eb-related {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.eb-related a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--eb-tinte);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.eb-related a:hover { border-color: var(--eb-tinte); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(18, 20, 28, .08); }
.eb-related a .eb-related-k {
  flex: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: .1em;
  color: var(--eb-ultramarin);
  background: rgba(35, 56, 232, .07);
  border: 1px solid rgba(35, 56, 232, .18);
  border-radius: 5px;
  padding: 3px 6px;
}
.eb-related a .eb-related-arrow { flex: none; margin-left: 2px; color: var(--eb-grau); }
.eb-related a:hover .eb-related-arrow { color: var(--eb-ultramarin); }

@media (max-width: 640px) {
  .eb-klartext { padding: 16px 18px 18px; }
  .eb-prose p, .eb-prose ul li { font-size: 1rem; }
}

/* ============================================================
   GLOSSAR v2 — Mischung aus Datenblatt-Leiste (eigener Entwurf)
   und Claude-Design Glossar-Beitrag.dc.html (W14, 2026-07-17).
   Entscheidungen: rechte Sticky-Leiste (Datenblatt + Weiterführend),
   dunkle ✗/✓-Klartext-Karte, FAQ bleibt, Hype-Faktor (Range-Reuse),
   Chat-Demo nur wo passend, Praxis-Verweis OHNE Button, kein
   Fortschrittsbalken. Farben a11y-sicher (§7.18).
   ============================================================ */

/* Hero mit Punktraster (Muster der Startseite) */
.eb-glhero { position: relative; overflow: hidden; }
.eb-dotsbg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(18, 20, 28, .09) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 35%, black 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 35%, black 70%, transparent);
  pointer-events: none;
}
.eb-glhero > *:not(.eb-dotsbg) { position: relative; }

/* BEGRIFF-Badge + Cluster (zweiteiliger Eyebrow aus dem Design) */
.eb-gl-badge {
  display: inline-flex;
  align-items: center;
  background: #12141C;
  color: #F7F7F4;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.59375rem;
  letter-spacing: .14em;
  padding: 5px 10px;
}
.eb-gl-badge { margin-right: 10px; }
.eb-gl-cluster {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65625rem;
  letter-spacing: .14em;
  color: var(--eb-ultramarin);
}

/* IN EINEM SATZ — Antwort-zuerst-Karte im Lesefluss */
.eb-satz {
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 18px;
  padding: 22px 26px;
}
.eb-satz-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--eb-ultramarin);
}
.eb-satz p {
  margin: 12px 0 0;
  font-family: "Archivo Expanded", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--eb-tinte);
}

/* Zweispalter: Artikel + rechte Leiste */
.eb-gl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}
.eb-gl-rail {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eb-gl-card {
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 14px;
  padding: 18px 20px;
}
.eb-gl-card .eb-gl-cardlabel {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: #686C74;
}
.eb-gl-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 11px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.71875rem;
}
.eb-gl-kv span { color: #686C74; letter-spacing: .04em; }
.eb-gl-kv strong { color: var(--eb-tinte); font-weight: 600; text-align: right; }
.eb-hype { margin-top: 14px; }
.eb-hype .eb-range-track { height: 8px; margin-top: 8px; }
.eb-hype-word {
  margin-top: 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: .06em;
  color: #686C74;
}

/* Mono-Kicker über Sektions-H2 */
.eb-kick {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--eb-ultramarin);
}

/* Dunkle Klartext-Karte mit ✗/✓-Zeilen */
.eb-klartext2 {
  background: var(--eb-nacht);
  border-radius: 18px;
  padding: 24px 26px 26px;
}
.eb-klartext2-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--eb-nacht-text);
}
.eb-klartext2 .eb-kl2-row {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #DFE1E8;
}
.eb-klartext2 .eb-kl2-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.eb-klartext2 .eb-kl2-row:first-of-type { margin-top: 10px; }
.eb-kl2-no,
.eb-kl2-yes {
  flex: none;
  width: 20px;
  min-width: 20px;
  height: auto;
  margin-top: 1px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  background: transparent;
}
.eb-kl2-no {
  color: #9BA0AD;
}
.eb-kl2-yes {
  /* Auf Nacht aufgehelltes Ultramarin: 5,73:1 Kontrast, ohne Box. */
  color: #7884FF;
}
.eb-klartext2 strong { color: #FFFFFF; font-weight: 600; }
/* Inline-Links erben sonst die schwarze Theme-Linkfarbe und verschwinden auf Nacht. */
.eb-klartext2 .eb-kl2-row a[href] {
  color: #FFFFFF;
  text-decoration-color: rgba(255, 255, 255, .58);
}
.eb-klartext2 .eb-kl2-row a[href]:hover {
  color: #C9CEFF;
  text-decoration-color: #C9CEFF;
}

/* Schritt-Zeilenkarten */
.eb-step {
  display: flex;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 0.96875rem;
  line-height: 1.6;
  color: var(--eb-grau);
}
.eb-step + .eb-step { margin-top: 10px; }
.eb-step .eb-step-n {
  flex: none;
  margin-top: 2px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: .14em;
  color: var(--eb-ultramarin);
}
.eb-step strong { color: var(--eb-tinte); font-weight: 600; }

/* Praxis-Verweis (schlank, ohne Button) */
.eb-praxis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 18px;
  padding: 20px 24px;
}
.eb-praxis-tile {
  width: 56px;
  height: 56px;
  background: var(--eb-nacht);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Archivo Expanded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #FFFFFF;
}
.eb-praxis-tile--brand {
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
}
.eb-praxis-tile--brand img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.eb-praxis-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: .14em;
  color: #686C74;
}
.eb-praxis-text {
  margin-top: 5px;
  font-family: "Archivo Expanded", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--eb-tinte);
}

/* Begriffs-Karten im „Mehr Begriffe"-Band */
.eb-termcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid var(--eb-hairline);
  border-radius: 16px;
  padding: 24px;
  color: var(--eb-tinte);
  transition: transform .3s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)), border-color .3s ease, box-shadow .3s ease;
}
.eb-termcard:hover { transform: translateY(-4px); border-color: var(--eb-tinte); box-shadow: 0 14px 34px rgba(18, 20, 28, .09); }
.eb-termcard .eb-termrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eb-termcard h3 {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.eb-termcard h3::before {
  content: "";
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background-image: var(--eb-term-icon);
  background-position: var(--eb-term-icon-position, center);
  background-size: var(--eb-term-icon-size, contain);
  background-repeat: no-repeat;
}

/* E20: dieselben Begriffs-Icons wie im Glossar-Hub, kompakt neben dem Titel. */
.eb-termcard[href$="/seo/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -56px; }
.eb-termcard[href$="/aeo/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -28px; }
.eb-termcard[href$="/geo/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center 0; }
.eb-termcard[href$="/llms-txt/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -84px; }
.eb-termcard[href$="/ki-automatisierung/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -112px; }
.eb-termcard[href$="/ki-agent/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -140px; }
.eb-termcard[href$="/llm/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -168px; }
.eb-termcard[href$="/rag/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -196px; }
.eb-termcard[href$="/halluzination/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -224px; }
.eb-termcard[href$="/dsgvo/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -252px; }
.eb-termcard[href$="/eu-ai-act/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -280px; }
.eb-termcard[href$="/landingpage/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -308px; }
.eb-termcard[href$="/responsive-design/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -336px; }
.eb-termcard[href$="/ladezeit/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -364px; }
.eb-termcard[href$="/conversion/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -392px; }
.eb-termcard[href$="/klickpreis-cpc/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -420px; }
.eb-termcard[href="/glossar/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -448px; }
.eb-termcard[href="/was-kostet-seo/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center -56px; }
.eb-termcard[href="/was-ist-geo/"] { --eb-term-icon: url("./eb-glossar-icons.svg"); --eb-term-icon-size: 28px 476px; --eb-term-icon-position: center 0; }
.eb-termcard[href$="/claude/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-claude-offiziell-120x120.png"); }
.eb-termcard[href$="/gpt/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-gpt-openai-offiziell-120x120.png"); }
.eb-termcard[href$="/gemini/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-gemini-offiziell-120x120.png"); }
.eb-termcard[href$="/glm/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-glm-zai-offiziell-120x120.png"); }
.eb-termcard[href$="/deepseek/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-deepseek-offiziell-120x120.png"); }
.eb-termcard[href$="/kimi-ai/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-kimi-ai-offiziell-120x120-1.png"); }
.eb-termcard[href$="/hermes-agent/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-hermes-agent-offiziell-120x120.png"); }
.eb-termcard[href$="/openclaw/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-openclaw-offiziell-120x120.png"); }
.eb-termcard[href$="/claude-code/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-claude-code-offiziell-120x120.png"); }
.eb-termcard[href$="/codex/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-codex-openai-offiziell-120x120.png"); }
.eb-termcard[href$="/antigravity/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-antigravity-google-offiziell-120x120.png"); }
.eb-termcard[href$="/higgsfield/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-higgsfield-offiziell-120x120.png"); }
.eb-termcard[href$="/n8n/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-n8n-offiziell-120x120.png"); }
.eb-termcard[href$="/make/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-make-automation-offiziell-120x120.png"); }
.eb-termcard[href$="/wordpress/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-wordpress-offiziell-120x120.png"); }
.eb-termcard[href$="/bricks-builder/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-bricks-builder-offiziell-120x120.png"); }
.eb-termcard[href$="/google-ads/"] { --eb-term-icon: url("/wp-content/uploads/2026/07/icon-glossar-google-ads-offiziell-120x120.png"); }
.eb-termarrow {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--eb-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--eb-grau);
}
.eb-termcard:hover .eb-termarrow { border-color: var(--eb-ultramarin); color: var(--eb-ultramarin); }
.eb-termcard p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--eb-grau); }

@media (max-width: 990px) {
  .eb-gl-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .eb-gl-rail { position: static; }
}
@media (max-width: 640px) {
  .eb-satz { padding: 18px 20px; }
  .eb-satz p { font-size: 1.0625rem; }
  .eb-klartext2 { padding: 20px 20px 22px; }
  .eb-praxis { grid-template-columns: 1fr; padding: 18px 20px; }
  .eb-praxis-tile { display: none; }
}

/* ============================================================
   GLOSSAR v3 — gemeinsame Begriffs-Karten + individuelle
   Begriffserklärungen für SEO und AEO (E12, 2026-07-18).
   Grundzustand ist immer der verständliche Endzustand; Animationen
   laufen nur mit eb-js, ohne reduced-motion und nach Viewport-Gating.
   ============================================================ */
.eb-gl-termgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* SEO: Crawling → Index → Ranking */
.eb-gl-seoflow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 18px;
  overflow: hidden;
}
.eb-gl-seostage { display: contents; }
.eb-gl-seonode {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--eb-hairline);
  border-radius: 12px;
  background: #FFFFFF;
}
.eb-gl-seonode:not(.eb-gl-seonode--rank)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 100%;
  width: 22px;
  height: 2px;
  background: var(--eb-ultramarin);
  transform-origin: left center;
}
.eb-gl-flow-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: .14em;
  color: var(--eb-ultramarin);
}
.eb-gl-seonode strong {
  font-family: "Archivo Expanded", system-ui, sans-serif;
  font-size: 0.875rem;
  letter-spacing: .02em;
  color: var(--eb-tinte);
}
.eb-gl-seonode small {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65625rem;
  line-height: 1.45;
  color: #686C74;
}
.eb-gl-seonode--rank {
  border-color: rgba(35, 56, 232, .34);
  background: rgba(35, 56, 232, .055);
}

/* AEO: Frage → Prüfung → direkte Antwort mit Quelle */
.eb-gl-aeoflow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
}
.eb-gl-aeo-question {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 78%;
  padding: 11px 14px;
  border-radius: 14px 14px 4px 14px;
  background: var(--eb-nacht);
  color: #FFFFFF;
}
.eb-gl-aeo-question strong { font-size: 0.9375rem; line-height: 1.35; }
.eb-gl-aeo-k {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: .14em;
  color: #B9BDC9;
}
.eb-gl-aeostage { position: relative; min-height: 112px; }
.eb-gl-aeo-scan {
  position: absolute;
  left: 0;
  top: 8px;
  width: min(80%, 360px);
  padding: 11px 14px;
  border: 1px solid var(--eb-hairline);
  border-radius: 12px;
  background: #FFFFFF;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: .12em;
  color: #686C74;
  opacity: 0;
}
.eb-gl-aeo-scan i {
  display: block;
  height: 2px;
  margin-top: 9px;
  background: linear-gradient(90deg, var(--eb-ultramarin) 0 38%, var(--eb-hairline) 38% 100%);
}
.eb-gl-aeo-answer {
  position: absolute;
  left: 0;
  top: 0;
  width: min(88%, 430px);
  padding: 13px 15px;
  border: 1px solid rgba(35, 56, 232, .28);
  border-radius: 14px 14px 14px 4px;
  background: #FFFFFF;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--eb-tinte);
}

@media (prefers-reduced-motion: no-preference) {
  body.eb-js .eb-gl-seovisual .eb-gl-seonode {
    opacity: 0;
    transform: translateY(10px) scale(.97);
  }
  body.eb-js .eb-gl-seovisual .eb-gl-seonode:not(.eb-gl-seonode--rank)::after {
    transform: scaleX(0);
  }
  body.eb-js .eb-gl-seovisual.is-running .eb-gl-seonode {
    animation: eb-gl-seonode .55s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)) forwards;
  }
  body.eb-js .eb-gl-seovisual.is-running .eb-gl-seonode--crawl { animation-delay: .1s; }
  body.eb-js .eb-gl-seovisual.is-running .eb-gl-seonode--index { animation-delay: .68s; }
  body.eb-js .eb-gl-seovisual.is-running .eb-gl-seonode--rank { animation-delay: 1.26s; }
  body.eb-js .eb-gl-seovisual.is-running .eb-gl-seonode--crawl::after {
    animation: eb-gl-seoline .42s ease-out .52s forwards;
  }
  body.eb-js .eb-gl-seovisual.is-running .eb-gl-seonode--index::after {
    animation: eb-gl-seoline .42s ease-out 1.1s forwards;
  }

  body.eb-js .eb-gl-aeovisual .eb-gl-aeo-question {
    opacity: 0;
    transform: translateY(8px) scale(.97);
  }
  body.eb-js .eb-gl-aeovisual .eb-gl-aeo-answer {
    opacity: 0;
    transform: translateY(10px);
  }
  body.eb-js .eb-gl-aeovisual.is-running .eb-gl-aeo-question {
    animation: eb-gl-aeo-question .55s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)) .1s forwards;
  }
  body.eb-js .eb-gl-aeovisual.is-running .eb-gl-aeo-scan {
    animation: eb-gl-aeo-scan .95s ease-in-out .62s both;
  }
  body.eb-js .eb-gl-aeovisual.is-running .eb-gl-aeo-answer {
    animation: eb-gl-aeo-answer .6s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)) 1.48s forwards;
  }

  body.eb-hidden .eb-gl-seovisual *,
  body.eb-hidden .eb-gl-aeovisual * { animation-play-state: paused !important; }
}

@keyframes eb-gl-seonode {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes eb-gl-seoline {
  to { transform: scaleX(1); }
}
@keyframes eb-gl-aeo-question {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes eb-gl-aeo-scan {
  0% { opacity: 0; transform: translateX(-14px); }
  22%, 72% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(14px); }
}
@keyframes eb-gl-aeo-answer {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 990px) {
  .eb-gl-termgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .eb-gl-seoflow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .eb-gl-seonode { min-height: 92px; }
  .eb-gl-seonode:not(.eb-gl-seonode--rank)::after {
    top: 100%;
    left: 50%;
    width: 2px;
    height: 14px;
    transform-origin: center top;
  }
  body.eb-js .eb-gl-seovisual .eb-gl-seonode:not(.eb-gl-seonode--rank)::after {
    transform: scaleY(0);
  }
  body.eb-js .eb-gl-seovisual.is-running .eb-gl-seonode--crawl::after,
  body.eb-js .eb-gl-seovisual.is-running .eb-gl-seonode--index::after {
    animation-name: eb-gl-seoline-mobile;
  }
  .eb-gl-aeo-question { max-width: 92%; }
  .eb-gl-aeo-answer { width: 100%; }
}
@keyframes eb-gl-seoline-mobile {
  to { transform: scaleY(1); }
}

/* ============================================================
   GLOSSAR E13 — gemeinsames Prozess-Visual für 18 Fachbegriffe
   plus kategorisierte Hub-Ausgabe. Grundzustand = Endzustand;
   Animation nur mit eb-js, Viewport-Gating und ohne reduced-motion.
   ============================================================ */
.eb-gl-seqflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 16px;
  overflow: hidden;
}
.eb-gl-seqstage { display: contents; }
.eb-gl-seqnode {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--eb-hairline);
  border-radius: 12px;
  background: #FFFFFF;
}
.eb-gl-seqnode:not(.eb-gl-seqnode--3)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 100%;
  width: 22px;
  height: 2px;
  background: var(--eb-ultramarin);
  transform-origin: left center;
}
.eb-gl-seqnode--3 {
  border-color: rgba(35, 56, 232, .34);
  background: rgba(35, 56, 232, .055);
}
.eb-gl-seq-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: .14em;
  color: var(--eb-ultramarin);
}
.eb-gl-seqnode strong {
  font-family: "Archivo Expanded", system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--eb-tinte);
}
.eb-gl-seqnode small {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65625rem;
  line-height: 1.45;
  color: #686C74;
}

/* E16: echte Markenlogos als Teil des jeweiligen Prozess-Visuals. */
.eb-gl-brandvisual .eb-v-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eb-gl-brandmark {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--eb-hairline);
  border-radius: 11px;
  background: #FFFFFF;
}
.eb-gl-brandmark img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.eb-gl-brandvisual .eb-gl-seqnode--1 { padding-right: 54px; }
.eb-gl-nodebrand {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--eb-hairline);
  border-radius: 8px;
  background: var(--eb-papier, #F7F7F4);
}
.eb-gl-nodebrand img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.eb-gl-directory { padding: clamp(56px, 8vw, 96px) 0 var(--eb-sektion-pad); }
.eb-gl-directory-head { max-width: 720px; }
.eb-gl-directory-head h2 { margin-top: 14px; }
.eb-gl-directory-head p { margin: 14px 0 0; color: var(--eb-grau); }
.eb-gl-category { margin-top: clamp(42px, 6vw, 68px); }
.eb-gl-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--eb-hairline);
}
.eb-gl-category-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: .12em;
  color: var(--eb-grau);
}
.eb-gl-termgrid--directory { margin-top: 18px; }
.eb-termname {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--eb-tinte);
}

@media (prefers-reduced-motion: no-preference) {
  body.eb-js .eb-gl-brandvisual .eb-gl-brandmark img {
    opacity: .55;
    transform: scale(.86) rotate(-4deg);
  }
  body.eb-js .eb-gl-brandvisual .eb-gl-nodebrand {
    opacity: 0;
    transform: scale(.72);
  }
  body.eb-js .eb-gl-brandvisual.is-running .eb-gl-brandmark img {
    animation: eb-gl-brand-pop .7s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)) .05s forwards;
  }
  body.eb-js .eb-gl-brandvisual.is-running .eb-gl-nodebrand {
    animation: eb-gl-brand-node .55s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)) .22s forwards;
  }
  body.eb-js .eb-gl-seqvisual .eb-gl-seqnode {
    opacity: 0;
    transform: translateY(10px) scale(.97);
  }
  body.eb-js .eb-gl-seqvisual .eb-gl-seqnode:not(.eb-gl-seqnode--3)::after { transform: scaleX(0); }
  body.eb-js .eb-gl-seqvisual.is-running .eb-gl-seqnode {
    animation: eb-gl-seqnode .55s var(--eb-ease-out, cubic-bezier(.22, 1, .36, 1)) forwards;
  }
  body.eb-js .eb-gl-seqvisual.is-running .eb-gl-seqnode--1 { animation-delay: .1s; }
  body.eb-js .eb-gl-seqvisual.is-running .eb-gl-seqnode--2 { animation-delay: .68s; }
  body.eb-js .eb-gl-seqvisual.is-running .eb-gl-seqnode--3 { animation-delay: 1.26s; }
  body.eb-js .eb-gl-seqvisual.is-running .eb-gl-seqnode--1::after { animation: eb-gl-seqline .42s ease-out .52s forwards; }
  body.eb-js .eb-gl-seqvisual.is-running .eb-gl-seqnode--2::after { animation: eb-gl-seqline .42s ease-out 1.1s forwards; }
  body.eb-hidden .eb-gl-seqvisual * { animation-play-state: paused !important; }
}
@keyframes eb-gl-brand-pop { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes eb-gl-brand-node { to { opacity: 1; transform: scale(1); } }
@keyframes eb-gl-seqnode { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes eb-gl-seqline { to { transform: scaleX(1); } }

@media (max-width: 640px) {
  .eb-gl-seqflow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .eb-gl-seqnode { min-height: 92px; }
  .eb-gl-seqnode:not(.eb-gl-seqnode--3)::after {
    top: 100%; left: 50%; width: 2px; height: 14px; transform-origin: center top;
  }
  body.eb-js .eb-gl-seqvisual .eb-gl-seqnode:not(.eb-gl-seqnode--3)::after { transform: scaleY(0); }
  body.eb-js .eb-gl-seqvisual.is-running .eb-gl-seqnode--1::after,
  body.eb-js .eb-gl-seqvisual.is-running .eb-gl-seqnode--2::after { animation-name: eb-gl-seqline-mobile; }
  .eb-gl-category-head { align-items: flex-start; flex-direction: column; gap: 6px; }
}
@keyframes eb-gl-seqline-mobile { to { transform: scaleY(1); } }

/* ============================================================
   E14: Einheitlicher Rechts-oben-Pfeil
   Form und Proportion entsprechen den Startseiten-Leistungskarten.
   Ultramarin auf hell, Weiß auf Nachtflächen/Primärbuttons.
   ============================================================ */
.eb-up-right,
.eb-termcard .eb-termarrow {
  --eb-up-right-color: var(--eb-ultramarin, #2338E8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-left: .2em;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--eb-up-right-color) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  vertical-align: middle;
}
.eb-up-right::before,
.eb-termcard .eb-termarrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cline%20x1='7'%20y1='17'%20x2='17'%20y2='7'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%3Cpolyline%20points='7%207%2017%207%2017%2017'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cline%20x1='7'%20y1='17'%20x2='17'%20y2='7'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%3Cpolyline%20points='7%207%2017%207%2017%2017'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
.eb-termcard:hover .eb-termarrow {
  color: var(--eb-ultramarin, #2338E8) !important;
}
.eb-up-right--light,
.ebbtnprimary .eb-up-right,
.eb-btn-primary .eb-up-right,
.ebbandnacht .eb-up-right,
.eb-cta .eb-up-right,
.eb-contact-card--primary .eb-up-right,
.eb-klartext2 .eb-up-right {
  --eb-up-right-color: #FFFFFF;
  color: #FFFFFF !important;
}

/* ============================================================
   E15: Glossar-Hub — Fachbegriff-Verzeichnis (Icon-Panel-Karten
   + Suche/Filter). Vorbild: Claude-Design Glossar.dc.html +
   Icons.dc.html. Icons: offizielle Logos (Mediathek) wo vorhanden,
   sonst bespoke Inline-SVG. Toolbar = Progressive Enhancement:
   ohne JS bleiben alle Begriffe sichtbar (eb-motion.js blendet die
   Toolbar ein [data-gh-toolbar] und filtert). 2026-07-18.
   ============================================================ */
.eb-gh { --eb-panel: #FBFAF7; }

/* Toolbar — erst per JS sichtbar (Filter ist JS-only) */
.eb-gh-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 30px 0 0; }
.eb-gh-toolbar[hidden] { display: none; }
.eb-gh-search {
  display: flex; align-items: center; gap: 10px;
  width: min(420px, 100%); box-sizing: border-box;
  background: #FFFFFF; border: 1px solid var(--eb-hairline, #E5E3DA); padding: 0 16px;
}
.eb-gh-search:focus-within { border-color: var(--eb-tinte, #12141C); }
.eb-gh-search-ico { font-family: "IBM Plex Mono", monospace; font-size: 14px; color: #686C74; }
.eb-gh-search-input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 13px 0;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--eb-tinte, #12141C);
}
.eb-gh-search-input::placeholder { color: #868A92; }
.eb-gh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eb-gh-chip {
  cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; letter-spacing: .14em;
  color: #686C74; border: 1px solid var(--eb-hairline, #E5E3DA); background: #FFFFFF; padding: 8px 12px;
  transition: background .25s, color .25s, border-color .25s;
}
.eb-gh-chip:hover { border-color: var(--eb-tinte, #12141C); color: var(--eb-tinte, #12141C); }
.eb-gh-chip.is-active { color: #FFFFFF; background: var(--eb-tinte, #12141C); border-color: var(--eb-tinte, #12141C); }
.eb-gh-chip:focus-visible { outline: 2px solid var(--eb-ultramarin, #2338E8); outline-offset: 2px; }
.eb-gh-count { font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; letter-spacing: .14em; color: #686C74; margin-left: auto; }

/* Kategorie-Block */
.eb-gh-cat { margin-top: clamp(42px, 6vw, 60px); }
.eb-gh-cat[hidden] { display: none; }
.eb-gh-cathead { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--eb-hairline, #E5E3DA); padding-top: 24px; }
.eb-gh-catcount { font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; letter-spacing: .12em; color: #868A92; }

/* Icon-Panel-Karten */
.eb-gh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; margin-top: 22px; }
.eb-gh-card {
  display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--eb-hairline, #E5E3DA);
  border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--eb-tinte, #12141C);
  transition: transform .3s var(--eb-ease-out, cubic-bezier(.22,1,.36,1)), border-color .3s ease, box-shadow .3s ease;
}
.eb-gh-card[hidden] { display: none; }
.eb-gh-card:hover { transform: translateY(-4px); border-color: var(--eb-tinte, #12141C); box-shadow: 0 14px 34px rgba(18, 20, 28, .09); }
.eb-gh-card:focus-visible { outline: 2px solid var(--eb-ultramarin, #2338E8); outline-offset: 2px; }
.eb-gh-panel { display: flex; align-items: center; justify-content: center; height: 112px; background: var(--eb-panel, #FBFAF7); border-bottom: 1px solid var(--eb-hairline, #E5E3DA); }
.eb-gh-ico { display: block; color: var(--eb-tinte, #12141C); }
.eb-gh-logo { width: 46px; height: 46px; object-fit: contain; display: block; }
.eb-gh-body { padding: 15px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.eb-gh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eb-gh-name { font-family: "Archivo Expanded", system-ui, sans-serif; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.15; color: var(--eb-tinte, #12141C); }
.eb-gh-desc { font-size: 0.8125rem; line-height: 1.55; color: var(--eb-grau, #5A5F6B); }
.eb-gh-card .eb-up-right { margin-left: 0; }

/* Empty-State (per JS) */
.eb-gh-empty { margin-top: 40px; border: 1px dashed var(--eb-hairline, #E5E3DA); border-radius: 16px; padding: 40px; text-align: center; }
.eb-gh-empty[hidden] { display: none; }
.eb-gh-empty p { margin: 12px auto 0; max-width: 420px; font-size: 0.9375rem; line-height: 1.6; color: var(--eb-grau, #5A5F6B); }

@media (max-width: 560px) {
  .eb-gh-count { margin-left: 0; }
  .eb-gh-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .eb-gh-panel { height: 92px; }
}

/* ============================================================
   E21/H1: Ratgeber- und News-Index. Teilen sich die .eb-gh-*-Kartenoptik
   (E15); News-Karten ergänzen ein individuelles 16:9-Beitragsbild.
   Ratgeber = kuratiert (parts/ratgeber-index.php), News = dynamisch aus
   der Kategorie "news" (parts/news-index.php). 2026-07-29.
   ============================================================ */
.eb-rg-grid,
.eb-news-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.eb-news-grid { grid-auto-rows: 1fr; }

.eb-rg-card .eb-gh-body,
.eb-news-card .eb-gh-body { padding: 22px 24px 24px; gap: 8px; }

.eb-news-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--eb-papier, #F7F7F4);
  border-bottom: 1px solid var(--eb-hairline, #E5E3DA);
}
.eb-news-thumb__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--eb-ease-out, cubic-bezier(.22,1,.36,1));
}
.eb-news-card:hover .eb-news-thumb__image { transform: scale(1.025); }

/* Kategorie- bzw. Datumszeile über dem Titel */
.eb-rg-cat,
.eb-news-date {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: .14em;
  color: var(--eb-ultramarin, #2338E8);
}
.eb-news-date { color: #686C74; display: block; }

/* Titel in Karten darf mehrzeilig laufen, Pfeil bleibt oben rechts */
.eb-rg-card .eb-gh-row,
.eb-news-card .eb-gh-row { align-items: flex-start; }
.eb-rg-card .eb-gh-name,
.eb-news-card .eb-gh-name { font-size: 1.125rem; line-height: 1.25; }
.eb-rg-card .eb-up-right,
.eb-news-card .eb-up-right { margin-top: 1px; }

/* News-Leerzustand: die Seite geht live, bevor der erste Beitrag steht */
.eb-news-empty { margin-top: 8px; }
.eb-news-empty p a { color: var(--eb-tinte, #12141C); text-decoration: underline; text-underline-offset: 3px; }

/* Einstiegskarten auf /wissen/ (drei Wege: Ratgeber, Glossar, News) */
.eb-entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.eb-entry {
  display: flex; flex-direction: column; gap: 10px;
  background: #FFFFFF; border: 1px solid var(--eb-hairline, #E5E3DA); border-radius: 16px;
  padding: 28px 26px 26px; text-decoration: none; color: var(--eb-tinte, #12141C);
  transition: transform .3s var(--eb-ease-out, cubic-bezier(.22,1,.36,1)), border-color .3s ease, box-shadow .3s ease;
}
.eb-entry:hover { transform: translateY(-4px); border-color: var(--eb-tinte, #12141C); box-shadow: 0 14px 34px rgba(18, 20, 28, .09); }
.eb-entry:focus-visible { outline: 2px solid var(--eb-ultramarin, #2338E8); outline-offset: 2px; }
.eb-entry-count { font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; letter-spacing: .14em; color: var(--eb-ultramarin, #2338E8); }
.eb-entry-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eb-entry-name { margin: 0; font-family: "Archivo Expanded", system-ui, sans-serif; font-weight: 700; font-size: 1.375rem; letter-spacing: -.01em; }
.eb-entry-desc { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--eb-grau, #5A5F6B); }

@media (max-width: 990px) { .eb-entry-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .eb-rg-grid, .eb-news-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   F6: redaktionelle Detailansicht für Beiträge der Kategorie News.
   Der Beitrag selbst bleibt Standard-WordPress-HTML; diese Klassen bilden
   die ruhige, wiederverwendbare Artikelhülle. 2026-07-30.
   ============================================================ */
.eb-news-single { background: var(--eb-papier, #F7F7F4); }
.eb-news-single .ebwrap {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}
.eb-news-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(104px, 11vw, 150px) 0 clamp(56px, 7vw, 84px);
  border-bottom: 1px solid var(--eb-hairline, #E5E3DA);
}
.eb-news-hero .eb-dotsbg { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.eb-news-hero .ebwrap { position: relative; z-index: 1; }
.eb-news-label {
  margin-top: 28px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--eb-ultramarin, #2338E8);
}
.eb-news-hero h1 {
  max-width: 850px;
  margin: 16px 0 0;
  font-family: "Archivo Expanded", system-ui, sans-serif;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--eb-tinte, #16181D);
}
.eb-news-lead {
  max-width: 720px;
  margin: 24px 0 0;
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.65;
  color: var(--eb-grau, #5A5F6B);
}
.eb-news-meta { margin-top: 28px; }

.eb-news-featured {
  margin: 0;
  padding: clamp(32px, 5vw, 64px) 0 0;
  background: var(--eb-papier, #F7F7F4);
}
.eb-news-featured__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--eb-hairline, #E5E3DA);
  border-radius: 16px;
}

.eb-news-main { padding: clamp(56px, 8vw, 96px) 0 clamp(76px, 10vw, 124px); }
.eb-news-copy { max-width: 760px; }
.eb-news-copy > :first-child { margin-top: 0; }
.eb-news-copy h2,
.eb-news-copy h3 {
  font-family: "Archivo Expanded", system-ui, sans-serif;
  color: var(--eb-tinte, #16181D);
  letter-spacing: -.015em;
}
.eb-news-copy h2 {
  margin: 56px 0 0;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.15;
}
.eb-news-copy h3 { margin: 34px 0 0; font-size: 1.25rem; line-height: 1.25; }
.eb-news-copy p,
.eb-news-copy li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--eb-grau, #5A5F6B);
}
.eb-news-copy p { margin: 18px 0 0; }
.eb-news-copy ul,
.eb-news-copy ol { margin: 20px 0 0; padding-left: 24px; }
.eb-news-copy li + li { margin-top: 10px; }
.eb-news-copy strong { font-weight: 650; color: var(--eb-tinte, #16181D); }
.eb-news-copy a {
  color: var(--eb-tinte, #16181D);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.eb-news-copy a:hover { color: var(--eb-ultramarin, #2338E8); }

.eb-news-answer,
.eb-news-klartext {
  margin: 0 0 42px;
  padding: 24px 26px;
  border: 1px solid var(--eb-hairline, #E5E3DA);
  border-left: 4px solid var(--eb-ultramarin, #2338E8);
  border-radius: 0 12px 12px 0;
  background: #FFFFFF;
}
.eb-news-answer-label,
.eb-news-klartext-label,
.eb-news-sources-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--eb-ultramarin, #2338E8);
}
.eb-news-answer p,
.eb-news-klartext p { margin-top: 10px; color: var(--eb-tinte, #16181D); }

.eb-news-sources {
  margin-top: 58px;
  padding-top: 28px;
  border-top: 1px solid var(--eb-hairline, #E5E3DA);
}
.eb-news-sources h2 { margin-top: 10px; }
.eb-news-sources ol { margin-top: 22px; padding-left: 20px; }
.eb-news-sources li { padding-left: 6px; font-size: .9375rem; line-height: 1.6; }
.eb-news-sources small { display: block; margin-top: 3px; color: #6D717A; }

.eb-news-after {
  padding: clamp(64px, 8vw, 92px) 0;
  border-top: 1px solid var(--eb-hairline, #E5E3DA);
  background: var(--eb-nebel, #EEEDE8);
}
.eb-news-after-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.eb-news-after h2 { max-width: 620px; margin: 14px 0 0; font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1.12; }
.eb-news-after-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 22px; }

@media (max-width: 720px) {
  .eb-news-hero { padding-top: 92px; }
  .eb-news-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .eb-news-featured { padding-top: 24px; }
  .eb-news-featured__image { border-radius: 10px; }
  .eb-news-copy p, .eb-news-copy li { font-size: 1rem; line-height: 1.7; }
  .eb-news-answer, .eb-news-klartext { padding: 20px 18px; }
  .eb-news-after-inner { align-items: flex-start; flex-direction: column; }
  .eb-news-after-links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .eb-news-thumb__image { transition: none; }
}

/* ============================================================
   G1 — Globaler Header: Original-Logo + gemeinsame Nav-Achse
   ============================================================ */
.eb-header-logo {
  display: flex;
  align-items: center;
  height: 64px;
  line-height: 1;
}

.eb-header-logo .eb-logo-full {
  display: block;
  width: auto;
  max-width: none;
  height: 60px;
  object-fit: contain;
}

@media (min-width: 767px) {
  .eb-mobile-nav > .eb-dropdown {
    display: flex;
    align-items: center;
  }

  .eb-mobile-nav > .eb-navlink,
  .eb-mobile-nav > .eb-dropdown > .eb-dropdown-trigger {
    display: flex;
    align-items: center;
    min-height: 42.4px;
    padding: 8px 0;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 26.4px;
  }

  /* eb-navlink keeps a 2px hover border; asymmetric padding compensates its baseline. */
  .eb-mobile-nav > .eb-navlink {
    padding-top: 9px;
    padding-bottom: 7px;
  }
}

@media (max-width: 766px) {
  .eb-header-logo { height: 56px; }
  .eb-header-logo .eb-logo-full { height: 52px; }
}