/* ═══════════════════════════════════════════════════════════════════════════
   Anirova — Info-Seiten (faq, press, roadmap, status, devlog, tech, newsletter)
   2026-09-27, Verkaufs-Umbau.

   Nur von diesen sieben Seiten geladen — und zwar INNERHALB von <main>, weil
   der District-Router beim Seitenwechsel nur <main> austauscht und keine
   Stylesheets aus dem <head> nachlädt.

   Namensraum .ifo-*. Baut auf den Tokens aus district-tokens.css (--color-*,
   --font-*, --space-*) und verkauf.css (--vk-*, .vk-store) auf; ändert keine
   Bestandsklasse global, nur innerhalb von main[data-district].

   Formate per Container-Abfrage auf die tatsächliche Inhaltsbreite (die
   Bühne hat je nach Format eine Seitenleiste), nicht auf die Fensterbreite.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Seitenkopf: deutscher Nutzen-Satz unter dem Titel ─────────────────── */
.ifo-lead {
  margin: var(--space-3, 12px) 0 0;
  max-width: 62ch;
  font: 400 clamp(16px, 1.1vw + 11px, 19px)/1.55 var(--font-body);
  color: var(--vk-text-2, #c2d4e8);
  text-transform: none;
  letter-spacing: 0;
}

/* Kurze Fakten-Kacheln (belegte Aussagen aus dem Seiteninhalt) */
.ifo-fakten {
  container-type: inline-size;
  display: grid;
  gap: 12px;
  margin: 0 0 var(--space-4, 16px);
  padding: 0;
  list-style: none;
}
.ifo-fakten__liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@container (min-width: 560px) {
  .ifo-fakten__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ifo-fakt {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 14px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--color-border, #24445e);
  border-radius: var(--radius-lg, 16px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(0 179 255 / .10), transparent 60%),
    var(--color-surface, #0d1426);
}
.ifo-fakt__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgb(0 230 255 / .35);
  color: var(--vk-akzent-hell, #00e6ff);
  background: rgb(0 179 255 / .08);
}
.ifo-fakt__icon svg { width: 20px; height: 20px; }
.ifo-fakt strong {
  font: 700 16px/1.3 var(--font-display);
  color: var(--color-text-hi, #eaf2ff);
}
.ifo-fakt span:not(.ifo-fakt__icon) {
  font: 400 14px/1.5 var(--font-body);
  color: var(--vk-text-3, #9bb4cc);
}

/* ─── Dezenter Download-Weg (beide Stores + Web-App) ────────────────────── */
.ifo-app {
  container-type: inline-size;
  position: relative;
  margin: var(--space-6, 32px) 0 var(--space-5, 24px);
  border-radius: 22px;
  padding: 1px;               /* Rahmen als Verlauf */
  background: linear-gradient(120deg, rgb(0 230 255 / .55), rgb(124 196 255 / .18) 45%, rgb(210 123 255 / .5));
  isolation: isolate;
}
.ifo-app__innen {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas:
    "bild kopf"
    "stores stores"
    "hinweis hinweis";
  gap: 16px 18px;
  align-items: center;
  padding: 20px 18px;
  border-radius: 21px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(210 123 255 / .14), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgb(0 179 255 / .14), transparent 60%),
    #081226;
  overflow: hidden;
}
.ifo-app__bild { grid-area: bild; margin: 0; align-self: start; }
.ifo-app__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 621 / 1344;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgb(0 230 255 / .45);
  background: #000;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .9), 0 0 36px -10px rgb(0 179 255 / .5);
  transform: rotate(-3deg);
}
.ifo-app__kopf { grid-area: kopf; min-width: 0; }
.ifo-app__kicker {
  margin: 0 0 6px;
  font: 700 11px/16px var(--font-code);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vk-akzent-hell, #00e6ff);
}
.ifo-app__titel {
  margin: 0;
  font: 800 clamp(19px, 1.4vw + 13px, 26px)/1.18 var(--font-display);
  letter-spacing: -.01em;
  color: var(--color-text-hi, #eaf2ff);
}
.ifo-app__lead {
  margin: 8px 0 0;
  font: 400 15px/1.55 var(--font-body);
  color: var(--vk-text-2, #c2d4e8);
}
.ifo-app .vk-stores { grid-area: stores; max-width: none; }
.ifo-app__hinweis {
  grid-area: hinweis;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 16px;
  margin: -4px 0 0;
  font: 500 14px/1.4 var(--font-body);
  color: var(--vk-text-3, #9bb4cc);
}
.ifo-app__hinweis a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--vk-akzent-hell, #00e6ff);
  font-weight: 700;
  text-decoration: none;
}
.ifo-app__hinweis a::after { content: "→"; transition: transform .2s; }
.ifo-app__hinweis a:hover::after { transform: translateX(3px); }
.ifo-app__hinweis a:focus-visible { outline: 3px solid var(--vk-akzent-hell, #00e6ff); outline-offset: 3px; border-radius: 6px; }
.ifo-app__punkt { display: inline-flex; align-items: center; gap: 8px; }
.ifo-app__punkt::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vk-gruen, #3ddc84);
  box-shadow: 0 0 10px rgb(61 220 132 / .7);
}

/* Tablet und breiter: Screen links über die ganze Höhe */
@container (min-width: 520px) {
  .ifo-app__innen {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "bild kopf"
      "bild stores"
      "bild hinweis";
    gap: 14px 28px;
    padding: 26px 28px;
  }
  .ifo-app .vk-stores > .vk-store { flex: 0 0 auto; justify-content: flex-start; }
}
/* Breit: Text links, Stores rechts — eine ruhige Zeile statt eines Blocks */
@container (min-width: 860px) {
  .ifo-app__innen {
    grid-template-columns: 124px minmax(0, 1fr) auto;
    grid-template-areas:
      "bild kopf stores"
      "bild hinweis stores";
    gap: 10px 36px;
    padding: 28px 36px;
  }
  .ifo-app .vk-stores { flex-direction: column; align-self: center; }
  .ifo-app .vk-stores > .vk-store { min-width: 210px; }
  .ifo-app__hinweis { margin: 0; align-self: start; }
  .ifo-app__kopf { align-self: end; }
}

/* ─── Technik-Chips statt wiederholter „Technologie“-Zeilen ─────────────── */
.ifo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 var(--space-5, 24px) var(--space-5, 24px);
  list-style: none;
}
.ifo-chips li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid rgb(0 179 255 / .35);
  border-radius: 999px;
  background: rgb(0 179 255 / .07);
  font: 600 13px/1.3 var(--font-code);
  color: var(--color-text-hi, #eaf2ff);
}
main[data-district] .ifo-text {
  margin: 0;
  padding: var(--space-5, 24px);
  font: 400 15px/1.65 var(--font-body);
  color: var(--vk-text-2, #c2d4e8);
}
main[data-district] .ifo-text a {
  color: var(--vk-akzent-hell, #00e6ff);
  text-decoration: underline;
  text-underline-offset: 3px;
}
main[data-district] .ifo-text strong { color: var(--color-text-hi, #eaf2ff); }
.ifo-hinweis-zeile {
  margin: 0;
  padding: 0 var(--space-5, 24px) var(--space-4, 16px);
  font: 400 13px/1.5 var(--font-body);
  color: var(--vk-text-3, #9bb4cc);
}

/* ─── Status-Pillen ─────────────────────────────────────────────────────── */
.ifo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgb(61 220 132 / .45);
  background: rgb(61 220 132 / .1);
  font: 700 13px/1.3 var(--font-body);
  color: #6ff0a6;             /* auf #0d1426: > 10:1 */
  white-space: nowrap;
}
.ifo-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 3px rgb(61 220 132 / .22);
}
@media (prefers-reduced-motion: no-preference) {
  .ifo-pill::before { animation: ifo-puls 2.4s ease-in-out infinite; }
}
@keyframes ifo-puls {
  0%, 100% { box-shadow: 0 0 0 3px rgb(61 220 132 / .22); }
  50% { box-shadow: 0 0 0 6px rgb(61 220 132 / .06); }
}

/* ─── Devlog: Einträge als Links ────────────────────────────────────────── */
main[data-district] a.bv.ifo-bv-link {
  min-height: 56px;
  color: inherit;
  text-decoration: none;
  transition: background-color .2s;
}
main[data-district] a.bv.ifo-bv-link:hover { background: rgb(0 179 255 / .07); }
main[data-district] a.bv.ifo-bv-link:hover .bv__titel { color: var(--color-text-hi, #eaf2ff); }
main[data-district] a.bv.ifo-bv-link:focus-visible { outline: 3px solid var(--vk-akzent-hell, #00e6ff); outline-offset: -3px; }
main[data-district] a.bv.ifo-bv-link .bv__meta::after { content: " →"; color: var(--vk-akzent-hell, #00e6ff); }

/* ─── Newsletter: die Mail-Folge als Strecke ────────────────────────────── */
.ifo-folge {
  container-type: inline-size;
  padding: var(--space-5, 24px);
}
.ifo-folge__liste {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ifo-folge__liste::before {           /* Gleis */
  content: "";
  position: absolute;
  left: 23px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--vk-akzent-hell, #00e6ff), var(--vk-magenta, #d27bff));
  opacity: .55;
}
.ifo-folge__schritt {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 4px 16px;
}
.ifo-folge__tag {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--vk-akzent-hell, #00e6ff);
  background: #081226;
  box-shadow: 0 0 18px -4px rgb(0 230 255 / .6);
  font: 800 12px/1.05 var(--font-code);
  text-align: center;
  color: var(--color-text-hi, #eaf2ff);
}
.ifo-folge__schritt:last-child .ifo-folge__tag { border-color: var(--vk-magenta, #d27bff); box-shadow: 0 0 18px -4px rgb(210 123 255 / .6); }
.ifo-folge__art {
  margin: 2px 0 0;
  font: 700 11px/16px var(--font-code);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vk-akzent-hell, #00e6ff);
}
.ifo-folge__titel {
  margin: 0;
  font: 800 18px/1.3 var(--font-display);
  color: var(--color-text-hi, #eaf2ff);
}
.ifo-folge__text {
  margin: 4px 0 0;
  font: 400 15px/1.6 var(--font-body);
  color: var(--vk-text-2, #c2d4e8);
}
@container (min-width: 760px) {
  .ifo-folge__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .ifo-folge__liste::before {
    left: 24px; right: 24px; top: 23px; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--vk-akzent-hell, #00e6ff), var(--vk-magenta, #d27bff));
  }
  .ifo-folge__schritt { grid-template-columns: 1fr; gap: 6px; }
  .ifo-folge__tag { grid-row: auto; margin-bottom: 8px; }
}

/* ─── Presse: echte App-Screens zum Laden ───────────────────────────────── */
.ifo-screens {
  container-type: inline-size;
  padding: var(--space-5, 24px);
}
.ifo-screens__raster {
  /* Flex statt Raster: eine unvollständige letzte Reihe steht mittig statt links verwaist */
  --spalten: 2;
  --luecke: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px var(--luecke);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ifo-screens__raster > li { flex: 0 0 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten)); min-width: 0; }
@container (min-width: 600px) { .ifo-screens__raster { --spalten: 3; --luecke: 20px; } }
@container (min-width: 900px) { .ifo-screens__raster { --spalten: 5; } }
@media (max-width: 599px) { .ifo-screens { padding: 8px 0 16px; } }
.ifo-screens figure { margin: 0; }
.ifo-screens img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 621 / 1344;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgb(0 230 255 / .35);
  background: #000;
  box-shadow: 0 20px 44px -22px rgb(0 0 0 / .9), 0 0 30px -14px rgb(0 179 255 / .5);
}
.ifo-screens figcaption {
  margin-top: 10px;
  font: 400 13px/1.45 var(--font-body);
  color: var(--vk-text-3, #9bb4cc);
}
.ifo-screens figcaption strong {
  display: block;
  font: 700 15px/1.3 var(--font-display);
  color: var(--color-text-hi, #eaf2ff);
}
.ifo-laden {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font: 700 14px/1.2 var(--font-body);
  color: var(--vk-akzent-hell, #00e6ff);
  text-decoration: none;
}
.ifo-laden { white-space: nowrap; }
.ifo-laden__groesse { font-weight: 500; color: var(--vk-text-3, #9bb4cc); }
.ifo-laden:hover { text-decoration: underline; text-underline-offset: 3px; }
.ifo-laden:focus-visible { outline: 3px solid var(--vk-akzent-hell, #00e6ff); outline-offset: 2px; border-radius: 6px; }
.ifo-banner {
  display: grid;
  gap: 8px 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgb(36 68 94 / .62);
}
.ifo-banner img { aspect-ratio: 1200 / 586; border-radius: 14px; }
@container (min-width: 700px) {
  .ifo-banner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
}

/* Zeilen-Werte in Presse-Faktenliste dürfen umbrechen (sonst Überlauf bei 390) */
main[data-district] .ifo-umbruch .bz__wert { white-space: normal; text-align: right; }
@media (max-width: 599px) {
  main[data-district] .ifo-umbruch .bz { flex-direction: column; align-items: flex-start; gap: 2px; }
  main[data-district] .ifo-umbruch .bz__wert { text-align: left; }
}

/* ─── Devlog: Sprunglinks landen am Artikelanfang ───────────────────────────
   styles.css schätzt .section/.blog-post per content-visibility:auto auf
   400 px; echte Einträge sind > 1000 px hoch, der Sprung auf #e2e-crypto
   landete deshalb im Vorgänger-Artikel. Hier sichtbar rendern und unter
   Kopf- und Abschnittsleiste freihalten. Nur auf der Devlog-Seite. */
main.district-place--devlog-foundry .section,
main.district-place--devlog-foundry .blog-post {
  content-visibility: visible;
  contain-intrinsic-size: none;
}
main.district-place--devlog-foundry .blog-post,
main.district-place--devlog-foundry #alle-eintraege { scroll-margin-top: 140px; }

/* ─── Roadmap: Abstimmungskarten ─────────────────────────────────────────────
   Titel und Beschreibung liefen ohne Umbruch ineinander ("…-ImportImport …"),
   weil display:block für strong nur im Phone-Stylesheet steht. Spalten nach
   Inhaltsbreite statt fest vier, damit "AI-Empfehlungen" nicht abgeschnitten
   wird. Nur Optik; die Abstimmungslogik bleibt unberührt. */
main.district-place--roadmap-transit[data-district="roadmap"] .vote-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
main.district-place--roadmap-transit .vote-item { min-width: 0; }
main.district-place--roadmap-transit .vote-text { min-width: 0; }
main.district-place--roadmap-transit .vote-text strong {
  display: block;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
  hyphens: auto;
}
main.district-place--roadmap-transit .vote-text small {
  display: block;
  line-height: 1.4;
}