/* ==========================================================
   Startseite -- Seitenmodul ueber troncom.css.
   Traegt nur, was es allein hier gibt: Kartenreihe unter der
   Buehne, Ablaufbalken, Sparten-Reiter, gestapelte Ebenen,
   Vergleichsmatrix und Herstellerraster.
   ========================================================== */
.hm {
  --dim: rgba(255,255,255,.5);
  --mono: var(--font-mono);
}

/* ---------- Erdflug ----------
   Nachtaufnahme der Erde als WebGL-Kugel (erde.js). Mit .ist-flug
   wird der Abschnitt hoch und die Buehne bleibt stehen, waehrend
   man scrollt; erde.js setzt daraus Kamera, Aussagen und Kontur.
   Ohne Skript, ohne WebGL oder bei reduzierter Bewegung bleibt es
   bei einer ruhigen Buehne in Schirmhoehe. */
.erdflug { position: relative; background: #000; }
.erdflug.ist-flug { height: 380vh; }
.erdflug-buehne {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 560px;
  background: #000;
}
.erdflug.ist-flug .erdflug-buehne { position: sticky; top: 0; }
.erdflug-erde, .erdflug-kontur { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.erdflug-erde { opacity: 0; transition: opacity 1.8s var(--ease); }
.erdflug.ist-bereit .erdflug-erde { opacity: 1; }
.erdflug-kontur { pointer-events: none; }

/* Ohne WebGL: dieselbe Aufnahme als flaches Bild, in Bernstein getoent */
.erdflug.ohne-gl .erdflug-buehne { background: #000 url(images/erde-1-m.webp) 46% 30% / cover no-repeat; }
.erdflug.ohne-gl .erdflug-buehne::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: #FFC46B; mix-blend-mode: multiply;
}
.erdflug.ohne-gl .erdflug-erde, .erdflug.ohne-gl .erdflug-kontur { display: none; }

/* Links abdunkeln, damit die Schrift ueber den Lichtern steht */
.erdflug-schleier {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.46) 24%, rgba(0,0,0,.08) 48%, rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.6) 100%);
}

.erdflug-takt { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; pointer-events: none; }
.erdflug.ist-flug .erdflug-takt { will-change: opacity, transform; }
.erdflug-takt a { pointer-events: auto; }
.ef-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.ef-start { align-items: flex-start; padding-top: calc(var(--nav-h) + clamp(36px, 8vh, 110px)); }
.ef-start .kicker { color: rgba(255,255,255,.78); }
.ef-start h1 {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(44px, 6.4vw, 116px); font-weight: 300; letter-spacing: -.058em; line-height: .96;
}
.ef-lead {
  max-width: 44ch; margin-top: clamp(20px, 2.2vw, 28px);
  font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; letter-spacing: -.01em;
  color: rgba(255,255,255,.8);
}
.ef-start .knopf-reihe { margin-top: clamp(24px, 2.8vw, 36px); }

/* Folgende Aussagen: erst mit .ist-flug sichtbar, erde.js blendet */
.ef-mitte { display: none; align-items: center; }
.erdflug.ist-flug .ef-mitte { display: flex; opacity: 0; visibility: hidden; }
.ef-satz {
  max-width: 12ch; margin-top: clamp(16px, 1.8vw, 22px);
  font-size: clamp(40px, 5.6vw, 96px); font-weight: 300; letter-spacing: -.055em; line-height: .98;
  text-wrap: balance;
}
.ef-klein {
  max-width: 40ch; margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; color: rgba(255,255,255,.74);
}

/* Unterkante: Koordinaten und Hoehe, Scroll-Hinweis, Bildnachweis */
.ef-leiste {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px;
  max-width: var(--wrap); margin-inline: auto;
  padding: 0 var(--gutter) clamp(18px, 3.4vh, 32px);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; line-height: 1.4;
  text-transform: uppercase; pointer-events: none;
}
.ef-anzeige { display: flex; flex-wrap: wrap; gap: 6px 22px; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }
.erdflug:not(.ist-flug) .ef-anzeige { visibility: hidden; }
.erdflug.ist-flug .ef-anzeige { opacity: 0; visibility: hidden; }
.ef-hinweis { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,.5); letter-spacing: .22em; }
.ef-hinweis::after {
  content: ''; width: 1px; height: 34px; transform-origin: top;
  background: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,0));
  animation: hinweisLinie 2.4s var(--ease) infinite;
}
@keyframes hinweisLinie { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.erdflug:not(.ist-flug) .ef-hinweis { visibility: hidden; }
.ef-quelle { grid-column: 3; justify-self: end; color: rgba(255,255,255,.34); font-size: 9.5px; text-align: right; }

.zeile { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.zeile > span { display: block; transform: translateY(108%); animation: zeileHoch 1.15s var(--ease-out) forwards; animation-delay: calc(.25s + var(--z) * .13s); }
@keyframes zeileHoch { to { transform: none; } }

@media (max-width: 720px) {
  .erdflug.ist-flug { height: 340vh; }
  .erdflug-schleier {
    background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 56%, rgba(0,0,0,.78) 84%, rgba(0,0,0,.9) 100%);
  }
  .ef-start { padding-top: calc(var(--nav-h) + 26px); }
  .ef-mitte { align-items: flex-end; padding-bottom: 96px; }
  .ef-leiste { grid-template-columns: 1fr auto; }
  .ef-hinweis { display: none; }
  .ef-anzeige { flex-direction: column; }
  .ef-quelle { grid-column: 2; max-width: 16ch; }
}
@media (max-width: 560px) {
  .ef-start .knopf-reihe { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .zeile > span { animation: none; transform: none; }
  .ef-hinweis::after { animation: none; }
}

/* ---------- Kurz gesagt ---------- */
.hm-werte { padding-bottom: clamp(20px, 3vw, 40px); }

/* ---------- Aussage ---------- */
.say-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: clamp(26px, 4vw, 72px); align-items: end; }
.say-top p { hyphens: none; font-size: clamp(32px, 4.2vw, 62px); font-weight: 300; letter-spacing: -.05em; line-height: 1.02; max-width: 18ch; text-wrap: balance; }
.say-top .sub { font-size: clamp(16px, 1.4vw, 19px); font-weight: 400; line-height: 1.55; color: var(--text-2); max-width: 52ch; letter-spacing: -.005em; }
.say-top .sub em { font-style: normal; color: #fff; }
@media (max-width: 900px) {
  .say-top { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Ablaufvergleich: ein Vorgang, zwei Rechnungen ---------- */
.gt {
  margin-top: clamp(48px, 6.5vw, 92px);
  padding-top: clamp(26px, 3.2vw, 44px);
  border-top: 1px solid var(--rule-strong);
}

.gt-head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
  gap: clamp(18px, 3vw, 56px); align-items: end;
  padding-bottom: clamp(24px, 2.8vw, 36px);
  border-bottom: 1px solid var(--rule);
}
.gt-kick {
  display: block; margin-bottom: 12px;
  font-family: var(--mono); font-size: clamp(9.5px, .92vw, 11px);
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.gt-head h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }
.gt-head p { font-size: clamp(12.5px, 1.15vw, 14.5px); line-height: 1.6; color: rgba(255,255,255,.55); }

.gt-plot { position: relative; padding-top: clamp(30px, 3.6vw, 46px); }

.gt-row {
  display: grid;
  grid-template-columns: clamp(88px, 10vw, 132px) minmax(0,1fr) clamp(64px, 7vw, 92px);
  align-items: center; gap: clamp(14px, 1.8vw, 26px);
}
.gt-row + .gt-row { margin-top: clamp(16px, 1.8vw, 24px); }

.gt-lb {
  font-family: var(--mono); font-size: clamp(9.5px, .9vw, 11px);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.gt-row:last-of-type .gt-lb { color: #fff; }

.gt-bar {
  display: flex; align-items: stretch;
  height: clamp(38px, 4.2vw, 54px);
  background: rgba(255,255,255,.045);
  outline: 1px solid rgba(255,255,255,.08); outline-offset: 0;
}
.sg {
  position: relative; display: grid; place-items: center;
  width: var(--w); min-width: 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .8s cubic-bezier(.22,.61,.28,1);
  transition-delay: calc(var(--t) * 700ms + var(--g) * 130ms + 300ms);
}
.hm-say.visible .sg { transform: scaleX(1); }
.sg + .sg { border-left: 1px solid #000; }
.sg i {
  font-style: normal; font-family: var(--mono); font-size: clamp(9.5px, .9vw, 11.5px);
  letter-spacing: .04em; opacity: 0;
  transition: opacity .5s ease-out;
  transition-delay: calc(var(--t) * 700ms + var(--g) * 130ms + 900ms);
}
.hm-say.visible .sg i { opacity: 1; }

.sg.is-arbeit { background: rgba(255,255,255,.9); }
.sg.is-arbeit i { color: #000; }
.sg.is-suchen { background: linear-gradient(180deg, #FFC46B 0%, #E0A24E 100%); }
.sg.is-suchen i { color: #000; }
.sg.is-warten {
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 5px, rgba(255,255,255,.05) 5px 10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.sg.is-warten i { color: rgba(255,255,255,.65); }
.sg.is-auto { background: linear-gradient(180deg, #7CF5B0 0%, #4FD48C 100%); }
.sg.is-auto i { color: #000; }

.gt-sum {
  font-size: clamp(22px, 2.6vw, 36px); font-weight: 300;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums; text-align: right;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .6s ease-out, transform .6s cubic-bezier(.25,0,.3,1);
  transition-delay: calc(var(--t) * 700ms + 1.05s);
}
.hm-say.visible .gt-sum { opacity: 1; transform: none; }
.gt-sum i {
  display: block; margin-top: 3px; font-style: normal;
  font-family: var(--mono); font-size: clamp(8.5px, .8vw, 10px);
  font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}

/* Der Abstand zwischen beiden Balken, ausgezeichnet */
.gt-delta {
  display: grid;
  grid-template-columns: clamp(88px, 10vw, 132px) minmax(0,1fr) clamp(64px, 7vw, 92px);
  gap: clamp(14px, 1.8vw, 26px);
  margin-top: clamp(12px, 1.4vw, 18px);
  opacity: 0; transition: opacity .8s ease-out 2.2s;
}
.hm-say.visible .gt-delta { opacity: 1; }
.gt-brk {
  grid-column: 2; position: relative; height: 16px;
  margin-left: 27.78%;                 /* endet dort, wo der kurze Balken aufhoert */
  border-left: 1px solid rgba(255,255,255,.3);
  border-right: 1px solid rgba(255,255,255,.3);
  border-bottom: 1px solid rgba(255,255,255,.3);
}
.gt-dv {
  grid-column: 2; justify-self: center; margin-top: 10px;
  font-size: clamp(13px, 1.2vw, 15px); font-weight: 500; letter-spacing: -.01em;
}
.gt-dv i {
  display: inline-block; margin-left: 10px; font-style: normal;
  font-family: var(--mono); font-size: clamp(8.5px, .8vw, 10px); font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}

.gt-legend {
  display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 30px);
  margin-top: clamp(30px, 3.4vw, 44px);
  padding-top: clamp(20px, 2.2vw, 26px);
  border-top: 1px solid var(--rule);
}
.lg-i {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: clamp(9px, .85vw, 10.5px);
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.lg-i i { width: 13px; height: 13px; flex: 0 0 auto; }
.lg-i i.is-arbeit { background: rgba(255,255,255,.9); }
.lg-i i.is-suchen { background: #FFC46B; }
.lg-i i.is-warten { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.22) 0 4px, rgba(255,255,255,.05) 4px 8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.lg-i i.is-auto   { background: #7CF5B0; }

.gt-note {
  margin-top: clamp(16px, 1.8vw, 22px);
  font-size: clamp(11.5px, 1.05vw, 13px); line-height: 1.6; color: rgba(255,255,255,.38);
}

@media (max-width: 820px) {
  .gt-head { grid-template-columns: 1fr; align-items: start; }
  .gt-row, .gt-delta { grid-template-columns: 1fr; gap: 8px; }
  .gt-row + .gt-row { margin-top: clamp(22px, 5vw, 30px); }
  .gt-sum { text-align: left; }
  .gt-sum i { display: inline; margin-left: 8px; }
  .gt-brk, .gt-dv { grid-column: 1; }
  .gt-bar { height: 34px; }
  .sg i { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .sg { transition: none; transform: scaleX(1); }
  .sg i, .gt-sum, .gt-delta { transition: none; opacity: 1; transform: none; }
}


/* ---------- Sparten: drei hohe Bildkarten ----------
   Wie "Eine Plattform" bei Squarespace: das Bild traegt die Karte,
   oben stehen Kicker, Titel und Satz, unten die Punkte als Mono-
   Liste wie bei Black Forest Labs und der runde Pfeil. */
.sp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); }
.sp.fade-in { opacity: 1; transform: none; }
.sp-karte {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: clamp(560px, 46vw, 700px);
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: var(--radius-karte); overflow: hidden;
  background: var(--flaeche-1);
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--s) * 120ms);
}
.sp.visible .sp-karte { opacity: 1; transform: none; }
.sp-karte > img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.7) brightness(.58);
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out), filter .6s var(--ease);
}
.sp-karte::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 40%, rgba(0,0,0,.3) 62%, rgba(0,0,0,.9) 100%);
}
.sp-karte::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); pointer-events: none; }
.sp-karte:hover > img { transform: scale(1.07); filter: saturate(.85) brightness(.68); }
.sp-karte:hover .bildkarte-pfeil { background: #fff; color: #000; box-shadow: none; }
.sp-oben .kicker { color: rgba(255,255,255,.7); }
.sp-oben h3 { margin-top: clamp(16px, 1.6vw, 20px); font-size: clamp(36px, 3.4vw, 52px); font-weight: 300; letter-spacing: -.055em; line-height: .98; }
.sp-claim { margin-top: 14px; max-width: 22ch; font-size: clamp(17px, 1.35vw, 20px); letter-spacing: -.02em; line-height: 1.3; }
.sp-lead { margin-top: 12px; max-width: 36ch; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.72); hyphens: manual; }
.sp-unten { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sp-pkt { display: grid; gap: 9px; }
.sp-pkt li {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; line-height: 1.35;
  text-transform: uppercase; color: rgba(255,255,255,.84); hyphens: manual;
}
.sp-unten .bildkarte-pfeil { flex: 0 0 auto; }
@media (max-width: 1000px) {
  .sp { grid-template-columns: 1fr; }
  .sp-karte { min-height: 500px; }
}
@media (prefers-reduced-motion: reduce) { .sp-karte { opacity: 1; transform: none; transition: none; } }

/* ---------- Aufbau: gestapelte Karten (Black Forest Labs) ----------
   Links bleibt der Kopf stehen, rechts schieben sich die drei Ebenen
   beim Scrollen uebereinander. */
.hm-stapel { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.stapel-kopf { position: sticky; top: calc(var(--nav-h) + 48px); }
.stapel-kopf h2 { margin-top: clamp(18px, 2vw, 26px); max-width: 12ch; font-size: clamp(34px, 4.2vw, 60px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; }
.stapel-kopf p { margin-top: 20px; max-width: 40ch; font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.6; color: var(--text-2); }
.ebn-liste { display: grid; gap: clamp(18px, 2.4vw, 32px); margin: 0; padding: 0; }
.ebn-liste.fade-in { opacity: 1; transform: none; }
.ebn {
  position: sticky; top: calc(var(--nav-h) + 48px + var(--y) * 22px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(20px, 2.6vw, 40px); align-items: center;
  min-height: clamp(320px, 27vw, 420px);
  padding: clamp(24px, 2.8vw, 42px);
  border-radius: var(--radius-karte);
  background: var(--flaeche-1);
  box-shadow: inset 0 0 0 1px var(--rule), 0 -24px 60px rgba(0,0,0,.7);
}
.ebn-kopf {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.ebn-kopf i { font-style: normal; color: var(--dim); }
.ebn-kopf em { font-style: normal; color: rgba(255,255,255,.8); padding-left: 12px; border-left: 1px solid var(--rule-strong); }
.ebn-text h3 { margin-top: clamp(14px, 1.6vw, 20px); font-size: clamp(28px, 2.8vw, 42px); font-weight: 300; letter-spacing: -.05em; line-height: 1; }
.ebn-text p { margin-top: 14px; max-width: 42ch; font-size: clamp(14.5px, 1.15vw, 15.5px); line-height: 1.6; color: var(--text-2); }
.ebn-daten { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 40px); margin: clamp(18px, 2vw, 26px) 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.ebn-daten dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
.ebn-daten dd { margin: 0; font-size: 14px; color: rgba(255,255,255,.88); }
/* --- Figur --- */
.ebn-bild { padding-left: clamp(0px, 2vw, 30px); border-left: 1px solid var(--rule); }
.ebn-fig  { display: block; width: 100%; height: auto; overflow: visible; }
.ebn-fig * { vector-effect: non-scaling-stroke; }

/* Grundton - die Einzelregeln darunter muessen gleich spezifisch sein,
   sonst gewinnt diese Sammelregel (0,1,1) gegen eine reine Klasse (0,1,0). */
.ebn-fig line, .ebn-fig path, .ebn-fig polyline, .ebn-fig rect { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1; }
.ebn-fig .fg-rahmen, .ebn-fig .fg-kern { stroke: rgba(255,255,255,.42); }
.ebn-fig .fg-kern   { fill: rgba(255,255,255,.05); }
.ebn-fig .fg-zeile  { fill: rgba(255,255,255,.2); stroke: none; }
.ebn-fig .fg-zeile:nth-of-type(2) { fill: rgba(255,255,255,.15); }
.ebn-fig .fg-quelle, .ebn-fig .fg-ziel { fill: rgba(255,255,255,.05); }
.ebn-fig .fg-zelle  { fill: rgba(255,255,255,.16); stroke: none; }
.ebn-fig .fg-zelle.ist-hell { fill: rgba(255,255,255,.6); }
.ebn-fig .fg-kurve  { stroke: #FFC46B; stroke-width: 1.4; }
.ebn-fig .fg-haken  { stroke: #7CF5B0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ebn-fig .fg-caret  { stroke: #FFC46B; stroke-width: 1.6; }
.ebn-fig .fg-tipp   { stroke: rgba(255,255,255,.5); }

/* Eintritt der Figuren: alles zeichnet sich */
.fg-rahmen, .fg-kern, .fg-quelle, .fg-ziel {
  stroke-dasharray: var(--len, 420); stroke-dashoffset: var(--len, 420);
  transition: stroke-dashoffset 1.1s cubic-bezier(.25,0,.3,1);
  transition-delay: calc(var(--y) * 190ms + 300ms);
}
.ebn-liste.visible .fg-rahmen,
.ebn-liste.visible .fg-kern,
.ebn-liste.visible .fg-quelle,
.ebn-liste.visible .fg-ziel { stroke-dashoffset: 0; }

.fg-ein, .fg-aus, .fg-haken, .fg-kurve, .fg-tipp {
  stroke-dasharray: var(--len, 460); stroke-dashoffset: var(--len, 460);
  transition: stroke-dashoffset 1.2s cubic-bezier(.3,0,.25,1);
  transition-delay: calc(var(--y) * 190ms + var(--i, 0) * 110ms + 480ms);
}
.ebn-liste.visible .fg-ein,
.ebn-liste.visible .fg-aus,
.ebn-liste.visible .fg-haken,
.ebn-liste.visible .fg-kurve,
.ebn-liste.visible .fg-tipp { stroke-dashoffset: 0; }

.fg-zeile { transform: scaleX(0); transform-box: fill-box; transform-origin: left center;
  transition: transform .6s cubic-bezier(.25,0,.3,1);
  transition-delay: calc(var(--y) * 190ms + var(--i) * 140ms + 700ms); }
.ebn-liste.visible .fg-zeile { transform: scaleX(1); }

.fg-zelle { opacity: 0; transition: opacity .5s ease-out;
  transition-delay: calc(var(--y) * 190ms + var(--i) * 40ms + 420ms); }
.ebn-liste.visible .fg-zelle { opacity: 1; }

/* Ruhiges Eigenleben */
.ebn-liste.visible .fg-caret { animation: ebnBlink 1.2s steps(1,end) 1.6s infinite; }
@keyframes ebnBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.ebn-liste.visible .fg-ziel  { animation: ebnLeuchte 4.2s ease-in-out calc(var(--i) * 700ms + 2s) infinite; }
@keyframes ebnLeuchte { 0%,100% { fill: rgba(255,255,255,.05); } 18% { fill: rgba(255,196,107,.3); } }
.ebn-liste.visible .fg-zelle.ist-hell { animation: ebnFlimmer 5s ease-in-out calc(var(--i) * 260ms + 2s) infinite; }
@keyframes ebnFlimmer { 0%,100% { fill: rgba(255,255,255,.6); } 50% { fill: rgba(255,255,255,.16); } }

@media (max-width: 1000px) {
  .hm-stapel { grid-template-columns: 1fr; }
  .stapel-kopf { position: static; }
}
@media (max-width: 700px) {
  .ebn { position: relative; top: auto; grid-template-columns: 1fr; align-items: start; }
  .ebn-bild { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ebn-schiene { transition: none; transform: scaleY(1); }
  .ebn-marke { display: none; }
  .ebn-tick, .ebn-text > * { transition: none; opacity: 1; transform: none; }
  .fg-rahmen, .fg-kern, .fg-quelle, .fg-ziel, .fg-ein, .fg-aus,
  .fg-haken, .fg-kurve, .fg-tipp { transition: none; stroke-dashoffset: 0; }
  .fg-zeile { transition: none; transform: none; }
  .fg-zelle { transition: none; opacity: 1; }
  .ebn-liste.visible .fg-caret, .ebn-liste.visible .fg-ziel,
  .ebn-liste.visible .fg-zelle.ist-hell { animation: none; }
}


/* ---------- Vergleichsmatrix ---------- */
.vg { overflow-x: auto; }
.vg table { width: 100%; border-collapse: collapse; min-width: 780px; }
.vg-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.vg thead td { border: 0; }
.vg thead th {
  text-align: left; vertical-align: bottom;
  padding: 0 clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--rule-strong);
}
.vg thead .mk {
  display: block; font-size: clamp(17px, 1.7vw, 22px); font-weight: 400;
  letter-spacing: -.03em; color: rgba(255,255,255,.62);
}
.vg thead .ut {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: clamp(9px, .85vw, 10.5px);
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
/* Die eigene Spalte steht hervorgehoben */
.vg thead .ist-wir { border-bottom-color: #fff; }
.vg thead .ist-wir .mk { color: #fff; }
.vg thead .ist-wir .ut { color: rgba(255,255,255,.62); }

.vg tbody tr {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s cubic-bezier(.25,0,.3,1), transform .7s cubic-bezier(.25,0,.3,1);
  transition-delay: calc(var(--z) * 120ms + 200ms);
}
.vg.visible tbody tr { opacity: 1; transform: none; }

.vg tbody th {
  width: 22%; text-align: left; vertical-align: top;
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 24px) 0;
  font-size: clamp(13.5px, 1.2vw, 15px); font-weight: 500; letter-spacing: -.01em;
  border-bottom: 1px solid var(--rule);
}
.vg tbody td {
  width: 26%; vertical-align: top;
  padding: clamp(18px, 2vw, 24px) clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid var(--rule);
  font-size: clamp(12.5px, 1.15vw, 14px); line-height: 1.55;
  color: rgba(255,255,255,.55);
}
.vg tbody td i { display: block; margin-bottom: 9px; font-size: 15px; }
.vg tbody td.ist-ja   i { color: #7CF5B0; }
.vg tbody td.ist-halb i { color: #FFC46B; }
.vg tbody td.ist-nein i { color: rgba(255,255,255,.3); }
/* Die eigene Spalte bleibt durchgehend lesbar */
.vg tbody td:nth-child(2) { color: rgba(255,255,255,.86); background: rgba(255,255,255,.035); }
.vg tbody tr:last-child td, .vg tbody tr:last-child th { border-bottom: 0; }

@media (max-width: 900px) {
  .vg { margin-inline: calc(var(--pad, 0px) * -1); }
  .vg table { min-width: 700px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg tbody tr { transition: none; opacity: 1; transform: none; }
}

/* ---------- Marken ---------- */
/* Haarlinienraster wie im Fuss von Black Forest Labs */
.hm-brands {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.hm-brand {
  display: grid; place-items: center;
  min-height: clamp(120px, 13vw, 200px);
  padding: clamp(18px, 2.4vw, 34px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  opacity: 0; transform: translateY(18px);
  transition: opacity .85s cubic-bezier(.25,0,.3,1), transform .85s cubic-bezier(.25,0,.3,1);
  transition-delay: calc(var(--b) * 140ms);
}
.hm-brands.visible .hm-brand { opacity: 1; transform: none; }

.hm-brand .mark { display: flex; align-items: center; justify-content: center; }
.hm-brand .lg { display: block; width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .86; transition: opacity .3s var(--ease); }
.hm-brand:hover .lg { opacity: 1; }
.hm-brand .lg-intel  { height: clamp(30px, 3.2vw, 42px); }
.hm-brand .lg-amd    { height: clamp(24px, 2.5vw, 33px); }
.hm-brand .lg-nvidia { height: clamp(17px, 1.8vw, 24px); }
.hm-brand .lg-smc    { height: clamp(42px, 4.6vw, 62px); }
/* Vier nebeneinander bleiben es auch auf dem Handy -- dort tragen
   engere Abstaende und kleinere Marken die Reihe, nicht ein Umbruch. */
@media (max-width: 900px) {
  .hm-brand { min-height: clamp(84px, 20vw, 120px); padding: 12px; }
  /* Hoehen so gestaffelt, dass alle vier etwa gleich breit erscheinen --
     die Seitenverhaeltnisse reichen von 1,96 (Supermicro) bis 5,47 (Nvidia). */
  .hm-brand .lg-intel  { height: clamp(20px, 7vw, 30px); }
  .hm-brand .lg-amd    { height: clamp(15px, 4.4vw, 22px); }
  .hm-brand .lg-nvidia { height: clamp(11px, 3.3vw, 16px); }
  .hm-brand .lg-smc    { height: clamp(26px, 9vw, 34px); }
}


@media (prefers-reduced-motion: reduce) {
  .say-top p, .hm-end h2, .hm-end p, .hm-end .hm-actions, .hm-end .hm-kicker,
  .hm-brand { opacity: 1; transform: none; transition: none; }
}