/* =====================================================================
   EMS Kampfmittelbergung – Bauteil „Infografik mit HTML-Text“ (infografik.css)
   Stand 10.11.2026. Regel: INFOGRAFIK_NEUERZEUGUNG_2026-09-23.md, Abschnitt 7 –
   die Bildebene ist das KI-Bild OHNE Schrift, jedes Wort ist echtes HTML.

   Drei Stufen, gesteuert über die Breite der Figur selbst (Container-Abfrage):
     gestapelt  unter 940 px    Bild oben, darunter Titel, Beschriftungen als Liste, Kasten, Hinweis
     mittel     940 bis 1099 px Bühne: Bild um --m-zoom vergrößert, Titel und Beschriftungen mit
                                Hinweislinien im Bild; der Kasten steht als Band unter der Bühne
     breit      ab 1100 px      Bühne wie die gesetzte Grafik: Titel links oben, Beschriftungen links,
                                Kasten rechts im Bild
   Ohne Container-Abfragen (alte Browser) bleibt die gestapelte Fassung. Kein JavaScript nötig;
   die Vergrößerung übernimmt sub.js über [data-lightbox].

   Stellgrößen, inline am <figure class="infografik">:
     --bild-b / --bild-h   Seitenverhältnis der Bildebene (Standard 1376 / 714). Dasselbe Maß ist die
                           viewBox der Hinweislinien: die Koordinaten aus dem Prototyp gelten weiter.
     --fokus-x / --fokus-y Bildausschnitt in der gestapelten Fassung, 0 bis 100 (Standard 50 / 50)
     --m-zoom              Vergrößerung der Bildebene in der mittleren Stufe (Standard 1.2)
     --m-x                 Verschiebung der Bildebene nach links in der mittleren Stufe, in Prozent
                           der Bühnenbreite (Standard 0 = linke Bildkante bleibt stehen; höchstens (--m-zoom - 1) x 100)
     --kopf-b / --kopf-b-m Breite des Titelblocks in Prozent der Bühne (Standard 36, mittlere Stufe 39)
     --titel-max           Obergrenze der Titelgröße auf der Bühne, z. B. 32px bei dreizeiligen Titeln
     --schleier-b          Breite des hellen Schleiers in Prozent (nur mit Klasse infografik--schleier, Standard 41)
     --nah-x / --nah-y / --nah-b / --nah-h / --nah-ar
                           nur mit Klasse infografik--ebene-nah: Lage des Handy-Ausschnitts (<source>) im
                           vollen Bild – linke und obere Kante, Breite und Höhe in Prozent des vollen Bildes,
                           dazu das Seitenverhältnis des Ausschnitts als Zahl (Breite durch Höhe)
   Stellgrößen, inline am Element:
     .infografik__punkt    --y  senkrechte MITTE der Karte in Prozent der Bühnenhöhe
                           --x  linke Kante in Prozent der Bühnenbreite (Standard 3)
                           --y-m / --x-m  abweichende Werte nur für die mittlere Stufe
     .infografik__kasten   --y  Oberkante in Prozent der Bühnenhöhe (nur breite Stufe, Standard 21)
                           --kasten-r   Abstand zur rechten Bühnenkante (nur breite Stufe, Standard 2.4%)
                           --kasten-px  seitlicher Innenabstand (nur breite Stufe, Standard 18px)
                           --kasten-b   Breite (nur breite Stufe, Standard clamp(240px, 21cqi, 262px))
     .infografik__pin      --x / --y  linke obere Ecke in Prozent der BILDEBENE (liegt in .infografik__ebene)
   Varianten: __punkt--navy (Kante Navy), __punkt--breit, __kasten--hell, __kasten--links (mit --x),
              __kasten--breit, __kasten--legende (Kasten mit ul.infografik__legende), __label--lang,
              __chip--getoent / __chip--voll, __pin--sitz, infografik--schleier,
              infografik--ebene-mobil, infografik--ebene-nah (Ortsmarken auch in der gestapelten Fassung)
   ===================================================================== */

.infografik {
    --ig-navy-900: var(--navy-900, #1a2e44);
    --ig-navy-800: var(--navy-800, #1e3a5c);
    --ig-accent: var(--accent, #E86F2C);
    --ig-accent-400: var(--accent-400, #f09050);
    --ig-accent-650: var(--accent-650, #b8521a);
    --ig-accent-700: var(--accent-700, #a94a15);
    --ig-accent-100: var(--accent-100, #fdeee4);
    --ig-gray-700: var(--gray-700, #4a5568);
    --ig-gray-200: var(--gray-200, #e2e8f0);
    --ig-mono: var(--mono, 'Courier New', ui-monospace, monospace);
    --ig-ease: var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
    --ig-pad: 24px; /* fester Wert für Browser ohne Container-Einheiten; mit cqi siehe @supports unten */
    container: infografik / inline-size;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-lg, 24px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(30,58,92,0.06), 0 12px 32px rgba(30,58,92,0.08));
    color: var(--ig-navy-900);
    font-family: var(--font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    line-height: 1.5;
}
/* Eine Variable mit unbekannter Einheit wird erst beim Einsetzen ungültig und risse alle Abstände auf 0.
   Deshalb stehen die cqi-Werte der Variablen hinter @supports; Browser ohne cqi behalten die festen Werte. */
@supports (width: 1cqi) {
    .infografik { --ig-pad: clamp(20px, 5cqi, 36px); }
    .infografik__label--lang { --label-sm-size: clamp(10.25px, 3.75cqi, 0.6875rem); }
}
.infografik *, .infografik *::before, .infografik *::after { box-sizing: border-box; }
/* Rücksetzer ohne Spezifität, damit jede Bauteilregel darunter gewinnt */
:where(.infografik) :where(p, ul, ol, li, figcaption) { margin: 0; padding: 0; list-style: none; }

/* Platz im Seitenraster der Unterseiten: als Bühne über beide Spalten, vor Artikel und Seitenleiste.
   order -2, weil sub.css am Handy das Inhaltsverzeichnis langer Seiten mit order -1 nach vorn holt. */
.page-body .wrap > .infografik { grid-column: 1 / -1; order: -2; }
@media (max-width: 960px) {
    body.has-long-article .page-body .wrap > .infografik { margin-bottom: 16px; }
}

/* ---------- Bildebene ---------- */
.infografik__szene { position: relative; order: 1; overflow: hidden; aspect-ratio: 4 / 3; background: #c3cad7; }
.infografik__zoom {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit;
    cursor: zoom-in; overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.infografik__zoom img {
    position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: calc(var(--fokus-x, 50) * 1%) calc(var(--fokus-y, 50) * 1%);
}
/* Fokus: Ring als Pseudo-Element über dem Bild (ein nach innen gesetzter outline läge unter dem Bild).
   Dunkles Orange neben Weiß erreicht auf jedem Bildgrund 3:1; der durchsichtige outline greift im Kontrastmodus. */
.infografik__zoom:focus-visible { outline: 3px solid transparent; outline-offset: -6px; border-radius: 0; }
.infografik__zoom:focus-visible::after {
    content: ''; position: absolute; inset: 4px; z-index: 1; pointer-events: none; border-radius: 19px 19px 4px 4px;
    border: 3px solid var(--ig-accent-650); box-shadow: 0 0 0 3px #fff, inset 0 0 0 2px #fff;
}
.infografik__lupe {
    position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; color: var(--ig-navy-900);
    background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(30, 58, 92, 0.14);
    box-shadow: 0 4px 14px rgba(26, 46, 68, 0.2); z-index: 2;
}
.infografik__lupe .ico, .infografik__lupe svg { width: 18px; height: 18px; }
.infografik__zoom:hover .infografik__lupe, .infografik__zoom:focus-visible .infografik__lupe { background: var(--ig-navy-900); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
    .infografik__lupe { transition: background 0.25s var(--ig-ease), color 0.25s var(--ig-ease), transform 0.25s var(--ig-ease); }
    .infografik__zoom:hover .infografik__lupe { transform: scale(1.08); }
}

/* Ebene mit der Geometrie der Bildebene: Hinweislinien (SVG) und Ortsmarken (.infografik__pin).
   Gestapelt ist das Bild beschnitten, die Ebene bleibt deshalb aus. */
.infografik__ebene { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.infografik__ebene svg {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; overflow: visible;
    /* helle Kontur um Linien und Punkte: die Navy-Linie bleibt so auch auf dunklen Bildteilen lesbar.
       Der Filter sitzt am SVG-Element selbst (an einzelnen SVG-Kindern ist er in Safari unzuverlässig). */
    filter: drop-shadow(0 0 0.75px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 0.75px rgba(255, 255, 255, 0.95));
}
/* Karten mit Ortsmarken bringen ihre eigene Zeichnung mit (Leuchtspur, weiß gefasste Marken): keine Kontur. */
:is(.infografik--ebene-nah, .infografik--ebene-mobil) .infografik__ebene svg { filter: none; }
.infografik__ebene svg :is(path, line, polyline) { fill: none; stroke: var(--ig-navy-800); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.infografik__ebene svg circle { fill: var(--ig-accent); stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.infografik__pin {
    position: absolute; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%); pointer-events: auto;
    padding: 5px 10px; border-radius: 10px; white-space: nowrap; font-size: 13.5px; font-weight: 800; line-height: 1.3;
    color: var(--ig-navy-900); background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 14px rgba(30, 58, 92, 0.18);
}
.infografik__pin span { margin-left: 6px; font-weight: 700; color: var(--ig-accent-700); }
.infografik__pin--sitz { color: #fff; background: var(--ig-navy-900); }
.infografik__pin--sitz span { color: var(--ig-accent-100); }

/* ---------- Text: gestapelte Fassung (Grundzustand) ---------- */
.infografik__label {
    order: 2; display: flex; align-items: center; gap: 10px; margin: 22px var(--ig-pad) 0;
    font-family: var(--ig-mono); font-size: var(--label-sm-size, 0.6875rem); font-weight: 700; line-height: 1.5;
    letter-spacing: var(--label-sm-track, 0.14em); text-transform: uppercase; color: var(--ig-accent-700);
}
.infografik__label::before { content: ''; flex: none; width: 26px; height: 2px; border-radius: 2px; background: var(--ig-accent); }
.infografik__kopf { order: 3; margin: 10px var(--ig-pad) 0; }
.infografik__titel {
    font-size: 1.75rem; /* Rückfall ohne Container-Einheiten */
    font-size: clamp(1.6rem, 6.6cqi, 2.1rem); font-weight: 800; line-height: 1.1; letter-spacing: var(--track-display, -0.02em);
    color: var(--ig-navy-900); text-wrap: balance;
}
.infografik__titel span { color: var(--ig-accent-650); }
.infografik__intro { margin-top: 12px; max-width: 60ch; font-size: 1.02rem; line-height: 1.55; color: var(--ig-gray-700); text-wrap: pretty; }

.infografik__punkte { order: 4; display: grid; grid-template-columns: minmax(0, 1fr); margin: 20px var(--ig-pad) 0; padding-bottom: 26px; }
.infografik__punkt { position: relative; padding: 15px 0 15px 26px; border-top: 1px solid var(--ig-gray-200); }
.infografik__punkt:last-child { padding-bottom: 0; }
.infografik__punkt::before {
    content: ''; position: absolute; left: 3px; top: calc(15px + 0.42em); width: 11px; height: 11px; border-radius: 50%;
    background: var(--ig-accent); box-shadow: 0 0 0 4px var(--ig-accent-100);
}
.infografik__punkt strong { display: block; font-size: 1.04rem; font-weight: 800; line-height: 1.35; color: var(--ig-navy-900); }
.infografik__punkt > span, .infografik__punkt > p { display: block; margin-top: 3px; font-size: 0.97rem; line-height: 1.5; color: var(--ig-gray-700); text-wrap: pretty; }
.infografik__punkt .infografik__nr { margin-top: 6px; font-family: var(--ig-mono); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ig-accent-700); }
.infografik__punkt--navy::before { background: var(--ig-navy-800); box-shadow: 0 0 0 4px var(--navy-100, #e8f0fa); }

/* Kasten: Ablauf (ol.infografik__schritte), Fließtext (p), Liste (ul) oder Legende (.infografik__chip) */
.infografik__kasten { order: 5; padding: 24px var(--ig-pad) 26px; background: var(--ig-navy-900); color: #fff; }
.infografik__kasten-titel {
    margin-bottom: 12px; font-family: var(--ig-mono); font-size: var(--label-size, 0.75rem); font-weight: 700; line-height: 1.5;
    letter-spacing: var(--label-track, 0.2em); text-transform: uppercase; color: var(--ig-accent-400);
}
.infografik__kasten > p:not([class]), .infografik__kasten > ul:not([class]) > li { font-size: 0.97rem; line-height: 1.5; color: rgba(255, 255, 255, 0.86); text-wrap: pretty; }
.infografik__kasten > p:not([class]) + :is(p, ul), .infografik__kasten > ul + p { margin-top: 10px; }
.infografik__kasten > ul:not([class]) > li { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.infografik__kasten > ul:not([class]) > li:first-child { padding-top: 0; border-top: 0; }
.infografik__kasten :is(strong, b) { color: #fff; font-weight: 700; }
.infografik__chip { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 0.97rem; font-weight: 700; line-height: 1.4; }
.infografik__chip::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 5px; background: var(--gray-400, #a0aec0); }
.infografik__chip--getoent::before { background: #f6c7a6; }
.infografik__chip--voll::before { background: var(--ig-accent); }

.infografik__schritte { counter-reset: ig-schritt; display: grid; grid-template-columns: minmax(0, 1fr); }
.infografik__schritte > li {
    counter-increment: ig-schritt; position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px;
    padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.infografik__schritte > li:first-child { border-top: 0; padding-top: 2px; }
.infografik__schritte > li:last-child { padding-bottom: 0; }
.infografik__schritte > li::before {
    content: counter(ig-schritt); grid-row: 1 / span 2; align-self: start; width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center; font-size: 0.84rem; font-weight: 800; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.14);
}
.infografik__schritte > li:last-child::before { background: linear-gradient(135deg, var(--ig-accent-650), var(--ig-accent-700)); }
.infografik__schritte strong { grid-column: 2; font-size: 1.02rem; font-weight: 700; line-height: 1.35; color: #fff; }
.infografik__schritte span { grid-column: 2; font-size: 0.95rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); text-wrap: pretty; }

/* helle Variante des Kastens */
.infografik__kasten--hell { background: var(--navy-50, #f3f7fb); color: var(--ig-navy-900); border-top: 1px solid var(--ig-gray-200); }
.infografik__kasten--hell .infografik__kasten-titel { color: var(--ig-accent-700); }
.infografik__kasten--hell > p:not([class]), .infografik__kasten--hell > ul:not([class]) > li { color: var(--ig-gray-700); }
.infografik__kasten--hell > ul:not([class]) > li { border-top-color: var(--ig-gray-200); }
.infografik__kasten--hell :is(strong, b) { color: var(--ig-navy-900); }

.infografik__hinweis {
    order: 6; padding: 15px var(--ig-pad) 16px; background: var(--ig-navy-900); color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem; line-height: 1.5; text-wrap: pretty;
}
.infografik__kasten:not(.infografik__kasten--hell) + .infografik__hinweis { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.infografik__hinweis strong { font-weight: 700; color: var(--ig-accent-400); }
.infografik :is(.infografik__kasten:not(.infografik__kasten--hell), .infografik__hinweis) ::selection { background: var(--ig-accent-650); color: #fff; }

/* Schmale Handys: die Bildzeile bleibt einzeilig (kein hängendes „·“). Erst gibt der Strich nach,
   dann wird enger gesperrt. Sehr lange Bildzeilen bei 320 px im Browser prüfen. */
@container infografik (max-width: 399px) {
    .infografik__label { letter-spacing: 0.1em; white-space: nowrap; }
    .infografik__label::before { flex: 0 1 26px; min-width: 0; }
}
@container infografik (max-width: 339px) {
    .infografik__label { letter-spacing: 0; gap: 0; }
    .infografik__label::before { display: none; }
}
/* Handy: senkrecht etwas dichter gesetzt, damit der Artikel darunter früher beginnt. Es entfällt nichts. */
@container infografik (max-width: 559.98px) {
    .infografik__label { margin-top: 18px; }
    .infografik__kopf { margin-top: 8px; }
    .infografik__intro { margin-top: 10px; }
    .infografik__punkte { margin-top: 16px; padding-bottom: 22px; }
    .infografik__punkt { padding-top: 13px; padding-bottom: 13px; }
    .infografik__punkt::before { top: calc(13px + 0.42em); }
    .infografik__kasten { padding-top: 20px; padding-bottom: 22px; }
    .infografik__kasten-titel { margin-bottom: 10px; }
    .infografik__schritte > li { padding-top: 9px; padding-bottom: 9px; }
    .infografik__hinweis { padding-top: 13px; padding-bottom: 14px; }
}

/* Variante infografik--ebene-mobil (z. B. Karte mit Ortsmarken): gestapelt bleibt das Bild unbeschnitten,
   damit Linien und Marken der Ebene weiter auf dem Bild sitzen. */
@container infografik (max-width: 939.98px) {
    .infografik--ebene-mobil .infografik__szene { aspect-ratio: calc(var(--bild-b, 1376) / var(--bild-h, 714)); }
    .infografik--ebene-mobil .infografik__ebene { display: block; }
    .infografik--ebene-mobil .infografik__pin { padding: 3px 7px; border-radius: 8px; font-size: 12px; }
}

/* Variante infografik--ebene-nah (Karte „Regionale Nähe“): gestapelt zeigt das <source> einen engeren
   Ausschnitt des Bildes. Die Ebene behält die Koordinaten des vollen Bildes und wird deshalb so über die
   Szene gelegt, als läge das volle Bild darunter – Marken und Routen sitzen dann auf ihren Orten.
   Lage des Ausschnitts: --nah-x / --nah-y / --nah-b / --nah-h (Prozent des vollen Bildes), --nah-ar (Zahl).
   560 bis 939 px: Szene 16:9 (--ig-k = Bildhöhe durch Szenenhöhe), alle Ortsschilder auf der Karte.
   Unter 560 px:   Szene im Format des Ausschnitts, auf der Karte nur „Firmensitz“; die übrigen Schilder
                   stehen als Zeile unter der Karte, weil fünf Schilder dort nicht ohne Überdeckung passen. */
@container infografik (max-width: 939.98px) {
    .infografik--ebene-nah .infografik__ebene {
        --ig-k: calc(1.77778 / var(--nah-ar));
        display: block;
        left: calc(var(--nah-x) / var(--nah-b) * -100%); width: calc(10000% / var(--nah-b));
        top: calc((var(--fokus-y, 50) * (1 - var(--ig-k)) - var(--nah-y) / var(--nah-h) * 100 * var(--ig-k)) * 1%);
        height: calc(var(--ig-k) * 10000% / var(--nah-h));
    }
    /* Schilder haben eine feste Größe, die Karte schrumpft: --x-s / --y-s setzen den Ankerpunkt für die
       gestapelte Fassung neu, --tx-s / --ty-s hängen das Schild daran auf (z. B. -100% = rechtsbündig am
       Anker, damit ein Schild links der Marke beim Verkleinern nie über die Marke läuft). */
    .infografik--ebene-nah .infografik__pin {
        left: calc(var(--x-s, var(--x, 50)) * 1%); top: calc(var(--y-s, var(--y, 50)) * 1%);
        transform: translate(var(--tx-s, 0), var(--ty-s, 0));
        padding: 3px 8px; border-radius: 8px; font-size: 12.5px;
    }
}
@container infografik (max-width: 559.98px) {
    .infografik--ebene-nah .infografik__szene { aspect-ratio: auto; background: var(--navy-50, #f3f7fb); }
    .infografik--ebene-nah .infografik__zoom { position: relative; inset: auto; height: auto; aspect-ratio: var(--nah-ar); }
    /* Ebene im Fluss unter dem Bild: die Schilderzeile bestimmt ihre Höhe; Linien und „Firmensitz“
       beziehen sich auf die Szene. Senkrechte Maße in cqi (1cqi = 1 % der Bildbreite), weil die Szene
       jetzt höher ist als das Bild. */
    .infografik--ebene-nah .infografik__ebene { position: static; width: auto; height: auto; }
    .infografik--ebene-nah .infografik__ebene svg {
        inset: auto; left: calc(var(--nah-x) / var(--nah-b) * -100%); width: calc(10000% / var(--nah-b));
        top: calc(var(--nah-y) / var(--nah-h) / var(--nah-ar) * -100cqi); height: calc(10000cqi / var(--nah-h) / var(--nah-ar));
    }
    .infografik--ebene-nah .infografik__ebene ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 11px; }
    .infografik--ebene-nah .infografik__pin { position: static; transform: none; padding: 4px 8px; border-radius: 9px; font-size: 13.5px; box-shadow: 0 1px 3px rgba(30, 58, 92, 0.16); }
    .infografik--ebene-nah .infografik__pin--sitz {
        position: absolute; left: calc((var(--x) - var(--nah-x)) / var(--nah-b) * 100%);
        /* --y ist die Oberkante auf der Bühne. Am Handy sitzt das Schild 2,7 % tiefer (Höhe der Markenspitze):
           so bleiben die Rostock-Marke und ihre Route darüber frei. */
        top: calc((var(--y) + 2.7 - var(--nah-y)) / var(--nah-h) / var(--nah-ar) * 100cqi);
        margin: 0 8px 0 3px; padding: 3px 8px; font-size: 12.5px; box-shadow: 0 4px 14px rgba(30, 58, 92, 0.18);
    }
}
/* schmale Handys: „Firmensitz“ (einzeilig 139 px) passt nicht mehr neben die Marke und steht zweizeilig */
@container infografik (max-width: 365.98px) {
    .infografik--ebene-nah .infografik__pin--sitz { width: min-content; white-space: normal; line-height: 1.25; }
    .infografik--ebene-nah .infografik__pin--sitz span { display: block; margin-left: 0; }
}

/* ---------- gestapelt, ab 560 px: breiteres Bild, Beschriftungen und Ablauf nebeneinander ---------- */
@container infografik (min-width: 560px) {
    .infografik__szene { aspect-ratio: 16 / 9; }
    .infografik__label { margin-top: 28px; }
}
@container infografik (min-width: 640px) {
    .infografik__punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; margin-top: 24px; padding-bottom: 30px; }
    .infografik__punkt, .infografik__punkt:last-child { padding: 18px 0 0; border-top: 2px solid var(--ig-gray-200); }
    .infografik__punkt::before { left: 0; top: -7px; box-shadow: 0 0 0 4px #fff; }
    .infografik__punkt--navy::before { box-shadow: 0 0 0 4px #fff; }
}
/* Ablauf zwischen 640 und 819 px (Tablet hochkant): zwei Spalten, erst links, dann rechts.
   Für fünf Spalten nebeneinander ist die Figur hier zu schmal (rund 115 px je Spalte). */
@container infografik (min-width: 640px) and (max-width: 819.98px) {
    .infografik__schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 40px; }
    .infografik__schritte > li:nth-child(4) { border-top: 0; padding-top: 2px; }
    .infografik__schritte > li:nth-child(3) { padding-bottom: 0; }
}
@container infografik (min-width: 820px) {
    /* Ablauf als waagerechte Leiste mit durchlaufender Linie */
    .infografik__schritte { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 18px; }
    .infografik__schritte > li, .infografik__schritte > li:first-child { display: block; padding: 0; border-top: 0; }
    .infografik__schritte > li::before { margin-bottom: 10px; }
    .infografik__schritte > li::after { content: ''; position: absolute; left: 40px; right: -8px; top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
    .infografik__schritte > li:last-child::after { display: none; }
    .infografik__schritte strong, .infografik__schritte span { display: block; }
    .infografik__schritte span { margin-top: 2px; }
}
/* Nur eine Beschriftung (Regionale Nähe): volle Breite statt Drittelspalte. */
@container infografik (min-width: 640px) {
    .infografik__punkt:only-child { grid-column: 1 / -1; }
    .infografik__punkt:only-child > span { max-width: 62ch; }
}


/* ---------- Bühne: mittlere und breite Stufe ---------- */
@container infografik (min-width: 940px) {
    /* Schriftgrößen der Bühne in px mit cqi: Die Karten sind absolut gesetzt und müssen zur
       Bildgröße passen. Wer die Seite vergrößert (Browser-Zoom), fällt in die gestapelte Fassung. */
    .infografik__szene { grid-row: 1; grid-column: 1; order: 0; aspect-ratio: calc(var(--bild-b, 1376) / var(--bild-h, 714) / var(--m-zoom, 1.2)); }
    .infografik__zoom img {
        left: calc(var(--m-x, 0) * -1%); width: calc(var(--m-zoom, 1.2) * 100%); object-fit: fill;
    }
    .infografik__ebene { display: block; left: calc(var(--m-x, 0) * -1%); width: calc(var(--m-zoom, 1.2) * 100%); }
    .infografik__lupe { right: 16px; top: 16px; }
    /* Schleier: heller Verlauf über der linken Bildseite, wenn das Bild dort unruhig ist (z. B. Karte) */
    .infografik--schleier .infografik__szene::after {
        content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--schleier-b, 41) * 1%); pointer-events: none;
        background: linear-gradient(90deg, rgba(232, 236, 242, 0.97) 0%, rgba(232, 236, 242, 0.93) 72%, rgba(232, 236, 242, 0) 100%);
    }

    /* Titelblock und Beschriftungen liegen über der Bühne (Rasterfläche Zeile 1 als Bezugsfläche) */
    /* grid-area mit allen vier Linien: bei absolut gesetzten Rasterkindern meint „auto“ sonst die Kante der ganzen Figur. */
    .infografik__label, .infografik__kopf, .infografik__punkte {
        grid-area: 1 / 1 / 2 / 2; order: 0; position: absolute; margin: 0; padding: 0; pointer-events: none;
    }
    .infografik__label > *, .infografik__kopf > *, .infografik__punkte > * { pointer-events: auto; }
    /* Auf dem Bildgrund Navy statt Orange: das dunkle Orange käme bei 11 px nur auf rund 4,2:1. */
    .infografik__label { left: 3%; top: clamp(24px, 2.7cqi, 32px); z-index: 3; pointer-events: auto; color: var(--ig-navy-800); }
    .infografik__kopf { left: 3%; top: calc(clamp(24px, 2.7cqi, 32px) + 27px); width: calc(var(--kopf-b-m, var(--kopf-b, 39)) * 1%); z-index: 2; }
    .infografik__kopf::before {
        content: ''; position: absolute; z-index: -1; left: -12%; right: -22%; top: -72px; bottom: -40px; pointer-events: none;
        background: radial-gradient(ellipse at 36% 46%, rgba(241, 244, 248, 0.86) 0%, rgba(241, 244, 248, 0.6) 45%, rgba(241, 244, 248, 0) 72%);
    }
    .infografik__titel { font-size: min(clamp(29px, 3.1cqi, 38px), var(--titel-max, 38px)); line-height: 1.07; }
    .infografik__intro { margin-top: 10px; max-width: none; font-size: clamp(15px, 1.4cqi, 16.5px); line-height: 1.48; color: var(--ig-navy-800); }

    .infografik__punkte { display: block; inset: 0; z-index: 1; }
    .infografik__punkt, .infografik__punkt:last-child {
        position: absolute; left: calc(var(--x-m, var(--x, 3)) * 1%); top: calc(var(--y-m, var(--y, 50)) * 1%); transform: translateY(-50%);
        width: clamp(292px, 27cqi, 330px); padding: 11px 16px 12px 14px;
        /* deckend: die Hinweislinien beginnen unter der Karte und schienen sonst durch den Text */
        background: #fff; border: 0; border-left: 4px solid var(--ig-accent); border-radius: 14px;
        box-shadow: 0 6px 20px rgba(30, 58, 92, 0.14);
    }
    .infografik__punkt::before { display: none; }
    .infografik__punkt.infografik__punkt--navy { border-left-color: var(--ig-navy-800); }
    .infografik__punkt.infografik__punkt--breit { width: clamp(340px, 34cqi, 410px); }
    .infografik__punkt strong { font-size: clamp(14.5px, 1.3cqi, 15.5px); line-height: 1.3; }
    .infografik__punkt > span, .infografik__punkt > p { margin-top: 3px; font-size: clamp(13.5px, 1.2cqi, 14.5px); line-height: 1.4; }
    .infografik__punkt .infografik__nr { margin-top: 5px; font-size: 13.5px; }

    /* mittlere Stufe: Kasten als Band unter der Bühne */
    .infografik__kasten { grid-row: 2; grid-column: 1; order: 0; padding: 20px 3% 22px; }
    .infografik__kasten > p:not([class]), .infografik__kasten > ul:not([class]) > li, .infografik__chip { font-size: 15px; }
    .infografik__schritte strong { font-size: 15.5px; }
    .infografik__schritte span { font-size: 14px; }
    .infografik__hinweis { grid-row: 3; grid-column: 1; order: 0; padding: 13px 3% 14px; font-size: 14.5px; }
}

@container infografik (min-width: 1100px) {
    .infografik__szene { aspect-ratio: calc(var(--bild-b, 1376) / var(--bild-h, 714)); }
    .infografik__zoom img, .infografik__ebene { left: 0; width: 100%; }
    .infografik__kopf { width: calc(var(--kopf-b, 36) * 1%); }
    .infografik__punkt, .infografik__punkt:last-child { left: calc(var(--x, 3) * 1%); top: calc(var(--y, 50) * 1%); }

    /* Kasten rechts im Bild, wie in der gesetzten Grafik */
    .infografik__kasten {
        grid-area: 1 / 1 / 2 / 2; position: absolute; z-index: 1; right: var(--kasten-r, 2.4%); top: calc(var(--y, 21) * 1%); width: var(--kasten-b, clamp(240px, 21cqi, 262px));
        padding: 16px var(--kasten-px, 18px) 18px; border-radius: 18px; background: rgba(26, 46, 68, 0.95); box-shadow: 0 10px 30px rgba(26, 46, 68, 0.3);
    }
    .infografik__kasten--hell { background: rgba(255, 255, 255, 0.95); border: 0; box-shadow: 0 6px 20px rgba(30, 58, 92, 0.14); }
    .infografik__kasten--links { right: auto; left: calc(var(--x, 3) * 1%); }
    .infografik__kasten--breit { width: clamp(330px, 31cqi, 392px); }
    /* Legende: etwas breiter und enger gefasst, damit jeder Eintrag einzeilig bleibt („Kampfmittelverdachtsfläche“ braucht 215 px) */
    .infografik__kasten--legende { --kasten-px: 14px; width: clamp(248px, 21.6cqi, 256px); }
    .infografik__kasten--legende .infografik__chip { gap: 8px; }
    .infografik__kasten-titel { margin-bottom: 8px; font-size: var(--label-sm-size, 0.6875rem); letter-spacing: 0.18em; }
    .infografik__kasten > p:not([class]), .infografik__kasten > ul:not([class]) > li, .infografik__chip { font-size: 13.5px; line-height: 1.42; }
    .infografik__kasten > ul:not([class]) > li { padding: 7px 0; }
    .infografik__schritte { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .infografik__schritte > li, .infografik__schritte > li:first-child {
        display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 11px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.13);
    }
    .infografik__schritte > li:first-child { border-top: 0; padding-top: 2px; }
    .infografik__schritte > li:last-child { padding-bottom: 0; }
    .infografik__schritte > li::before { width: 26px; height: 26px; border-radius: 8px; margin: 1px 0 0; font-size: 12.5px; }
    .infografik__schritte > li::after { display: none; }
    .infografik__schritte strong { font-size: 14.5px; line-height: 1.3; }
    .infografik__schritte span { margin-top: 1px; font-size: 13.5px; line-height: 1.36; }
    .infografik__hinweis { grid-row: 2; }
}

/* ---------- Druck ---------- */
@media print {
    .infografik { box-shadow: none; border-color: #c9d0dc; break-inside: avoid-page; }
    .infografik__lupe { display: none; }
    .infografik__punkt { break-inside: avoid; box-shadow: none; }
    /* Hintergründe werden oft nicht gedruckt: dunkle Flächen hell setzen, damit kein weißer Text verschwindet. */
    .infografik__kasten, .infografik__hinweis { background: #fff; color: var(--ig-navy-900); box-shadow: none; border-top: 1px solid #c9d0dc; }
    .infografik__kasten :is(strong, b), .infografik__schritte strong { color: var(--ig-navy-900); }
    .infografik__kasten > p:not([class]), .infografik__kasten > ul:not([class]) > li, .infografik__schritte span, .infografik__hinweis { color: #333; }
    .infografik__kasten-titel, .infografik__hinweis strong { color: var(--ig-accent-700); }
    .infografik__schritte > li::before, .infografik__schritte > li:last-child::before { color: var(--ig-navy-900); background: none; border: 1px solid var(--ig-navy-900); }
    .infografik__schritte > li, .infografik__schritte > li::after { border-top-color: #c9d0dc; }
}