/* ============================================================
   Visuelle Bausteine fuer News- und Leak-Artikel.

   Fuenf Bausteine: Zeitleiste, Angriffskette, Entscheidungsbaum,
   Kennzahlen, Themenkarte. Gedacht als Ersatz oder Ergaenzung zur
   Box "Auf einen Blick" in Vorfallsartikeln.

   Einbindung im Artikelkopf, nach blog-layout.css:
     <link rel="stylesheet" href="../assets/css/blog-bausteine.css?v=20260902-1">
   Dazu als erstes Element im Body, ohne defer:
     <script src="../assets/js/blog-bausteine.js?v=20260902-1"></script>
   Fertige Markup-Bloecke stehen in BLOG_BAUSTEINE.md.

   Bildsprache: dieselbe Handschrift wie die Feature-Kacheln auf
   der Startseite. 46er Flaeche, Strichstaerke 2.4, runde Enden,
   dazu eine Akzentgruppe, die durch Bernstein, Rostrot und
   Himmelblau rotiert. Lucide bleibt fuer Navigation und
   Seitenmoebel, in den Bausteinen kommt es nicht vor.

   Geometrie: 3 bis 4 Pixel Radius statt 16. Die weiche
   Kachelform sah nach Standardausgabe aus, nicht nach Magazin.
   Bewusst ohne farbige Kantenstreifen an den Kaesten. Der Ton
   sitzt in der Zeichnung, der Rahmen bleibt neutral und 1 Pixel.
   Wo eine Marke oder eine Ziffer betont werden soll, uebernimmt
   das der handgezeichnete Ring von konzept6 statt einer Flaeche.
   Kein Kasten bekommt einen gefaerbten Grund oder einen gefaerbten
   Rahmen. Gruen und Rot als Flaeche lesen sich als Formularpruefung.
   Farbe tragen nur Zeichnung, Ring und einzelne Woerter.

   Typografie: IBM Plex Mono fuer Datum, Zahlen und Kopfzeilen.
   Zwei Gewichte, zusammen rund 30 KB.

   Grundregel: Woerter stehen im HTML, die SVG zeichnet nur
   Linien. Faellt das Sprite aus, fehlen die Zeichnungen, der
   Text bleibt vollstaendig lesbar.
   ============================================================ */

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/konzept/plexmono-normal-400.woff2) format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/konzept/plexmono-normal-600.woff2) format('woff2');
}


.dpv {
    margin: 1.5rem 0 1rem;

    /* Deckende Grundlage fuer alles, worunter eine Linie laeuft. */
    --dpv-panel: var(--rd-bg-elev);

    /* Die drei warmen Toene von der Startseite. */
    --dpv-akz-1: #EFAE3E;
    --dpv-akz-2: #E05A3A;
    --dpv-akz-3: #5B87A6;
    --dpi-akz: var(--dpv-akz-1);

    /* Blattgruen aus der K5-Palette statt des Smaragds aus dem
       Blogthema. Das Smaragd liest sich neben Signalrot wie eine
       Formularmeldung. Rostrot uebernimmt, was vorher rot war;
       eine eigene Alarmfarbe kennt die Hauspalette nicht. */
    --dpv-gruen: #64A587;

    /* Als Text braucht Rostrot auf dunklem Grund eine Stufe mehr
       Helligkeit, sonst reisst der Kontrast unter 4,5 zu 1.
       Als Strich in einer Zeichnung reicht der dunklere Ton. */
    --dpv-warn: #E9714F;

    --dpv-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Auf hellem Grund sind Bernstein und Himmelblau zu schwach,
   deshalb dieselben Toene eine Stufe dunkler. */
html[data-rd-theme="light"] .dpv {
    --dpv-panel: var(--rd-bg);
    --dpv-akz-1: #C6871F;
    --dpv-akz-2: #C24A2C;
    --dpv-akz-3: #456A85;
    --dpv-gruen: #3D7A5F;
    --dpv-warn: #C24A2C;
}

.dpv-frame {
    background: var(--dpv-panel);
    border: 1px solid var(--rd-line);
    border-radius: 4px;
    padding: 1.5rem 1.2rem 1.7rem;
}

@media (min-width: 768px) {
    .dpv-frame { padding: 1.6rem 1.6rem 1.8rem; }
}

.dpv-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--dpv-mono);
    font-weight: 600;
    font-size: .73rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--rd-fg-muted);
    margin: 0 0 1.4rem;
}

.dpv-head .dpi {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    color: var(--dpv-gruen);
    margin: -4px 0;
}

.dpi { display: block; overflow: visible; }

/* Die Akzentgruppe rotiert durch drei Toene, damit eine Reihe
   nicht als fuenf identisch gruene Zeichnungen liest. Gleiche
   Regel wie bei den Kacheln auf der Startseite. */
.dpv-tl-item:nth-child(3n+1),
.dpv-chain-step:nth-child(3n+1),
.dpv-stat:nth-child(3n+1) { --dpi-akz: var(--dpv-akz-1); }

.dpv-tl-item:nth-child(3n+2),
.dpv-chain-step:nth-child(3n+2),
.dpv-stat:nth-child(3n+2) { --dpi-akz: var(--dpv-akz-2); }

.dpv-tl-item:nth-child(3n+3),
.dpv-chain-step:nth-child(3n+3),
.dpv-stat:nth-child(3n+3) { --dpi-akz: var(--dpv-akz-3); }

/* Bei genau vier Elementen nebeneinander faellt eine Wiederholung
   auf, deshalb bekommt das vierte den Markenton. */
.dpv-stat:nth-child(4),
.dpv-tl-item:nth-child(4) { --dpi-akz: var(--dpv-gruen); }

/* Der handgezeichnete Ring liegt hinter Ziffer oder Zeichnung und
   traegt den Ton. Gleicher Duktus wie die Schrittziffern auf den
   Konzeptseiten: leicht unrund, Strichstaerke 3, runde Enden. */
.dpv-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--dpi-akz);
}

/* ---------- Baustein 1: Zeitleiste ---------- */

.dpv-tl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.dpv-tl-item {
    position: relative;
    display: flex;
    gap: .9rem;
    margin: 0;
    padding: 0;
}

.dpv-tl-item::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 3rem;
    bottom: -1.3rem;
    width: 2px;
    background: var(--rd-line-strong);
}

.dpv-tl-item:last-child::before { display: none; }

/* Die Marke braucht einen deckenden Grund, sonst laeuft die
   Verbindungslinie sichtbar durch das Icon hindurch. Der
   Akzentton hat nur zehn Prozent Deckung. */
.dpv-tl-dot {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--dpv-panel);
    color: var(--rd-fg-muted);
    position: relative;
    z-index: 1;
}

.dpv-tl-dot .dpi { width: 24px; height: 24px; position: relative; }

.dpv-tl-item.is-now .dpv-tl-dot { color: var(--dpv-gruen); }

.dpv-tl-body {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    padding-top: .3rem;
    min-width: 0;
}

.dpv-tl-date {
    font-family: var(--dpv-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rd-fg-dim);
    font-weight: 600;
}

.dpv-tl-item.is-now .dpv-tl-date { color: var(--dpv-gruen); }

.dpv-tl-title {
    font-weight: 700;
    color: var(--rd-fg);
    font-size: .95rem;
    line-height: 1.3;
}

.dpv-tl-note {
    font-size: .8rem;
    color: var(--rd-fg-muted);
    line-height: 1.45;
}

@media (min-width: 768px) {
    .dpv-tl { flex-direction: row; gap: 0; }

    .dpv-tl-item {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .7rem;
        padding: 0 .4rem;
    }

    .dpv-tl-item::before {
        left: 0;
        right: 0;
        top: 22px;
        bottom: auto;
        width: auto;
        height: 2px;
    }

    .dpv-tl-item:first-child::before { left: 50%; }

    .dpv-tl-item:last-child::before {
        display: block;
        right: 50%;
        left: 0;
    }

    .dpv-tl-body { align-items: center; padding-top: 0; }
    .dpv-tl-title { min-height: 2.6em; }
}

/* ---------- Baustein 2: Angriffskette ---------- */

.dpv-chain { list-style: none; margin: 0; padding: 0; }

.dpv-chain-step {
    position: relative;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: 3px;
    padding: .8rem 1rem;
    margin: 0 0 .7rem;
}

.dpv-chain-step::after {
    content: "";
    position: absolute;
    left: 33px;
    bottom: -.7rem;
    height: .7rem;
    width: 2px;
    background: var(--rd-line-strong);
}

.dpv-chain-step:last-child { margin-bottom: 0; }
.dpv-chain-step:last-child::after { display: none; }

.dpv-chain-ico {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: var(--rd-fg-muted);
    margin-top: -.15rem;
}

.dpv-chain-ico .dpi { width: 32px; height: 32px; }

.dpv-chain-body { min-width: 0; }

.dpv-chain-body strong {
    display: block;
    color: var(--rd-fg);
    font-size: .92rem;
    line-height: 1.3;
}

.dpv-chain-body span {
    display: block;
    font-size: .8rem;
    color: var(--rd-fg-muted);
    line-height: 1.45;
    margin-top: .15rem;
}

.dpv-chain-step.is-stop {
    border: 1px dashed var(--rd-line-strong);
}

.dpv-chain-step.is-stop .dpv-chain-ico { color: var(--dpv-gruen); }
.dpv-chain-step.is-stop .dpv-chain-body strong { color: var(--dpv-gruen); }

.dpv-chain-step.is-hit .dpv-chain-ico { color: var(--dpv-warn); }
.dpv-chain-step.is-hit .dpv-chain-body strong { color: var(--dpv-warn); }

/* ---------- Baustein 3: Entscheidungsbaum ---------- */

.dpv-tree { display: flex; flex-direction: column; gap: .6rem; }

.dpv-q {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: 3px;
    padding: .9rem 1rem;
}

.dpv-q-num {
    position: relative;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--rd-fg);
    font-family: var(--dpv-mono);
    font-size: .8rem;
    font-weight: 600;
}

.dpv-q-num > span { position: relative; }

.dpv-q:nth-child(1) { --dpi-akz: var(--dpv-akz-1); }
.dpv-q:nth-child(2) { --dpi-akz: var(--dpv-akz-2); }
.dpv-q:nth-child(3) { --dpi-akz: var(--dpv-akz-3); }
.dpv-q:nth-child(4) { --dpi-akz: var(--dpv-gruen); }

.dpv-q-body { min-width: 0; width: 100%; }

.dpv-q-body > strong {
    display: block;
    color: var(--rd-fg);
    font-size: .92rem;
    line-height: 1.35;
    margin-bottom: .6rem;
}

.dpv-answers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
}

@media (min-width: 640px) {
    .dpv-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dpv-a {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .8rem;
    line-height: 1.4;
    border-radius: 2px;
    padding: .5rem .65rem;
    border: 1px solid var(--rd-line);
    color: var(--rd-fg-muted);
}

.dpv-a .dpi { width: 17px; height: 17px; flex: 0 0 17px; margin-top: .05rem; }

/* Kein gefaerbter Grund, kein gefaerbter Rahmen. Gruene und rote
   Kaesten nebeneinander lesen sich wie eine Formularpruefung. */
.dpv-a.is-ok { color: var(--dpv-gruen); }
.dpv-a.is-alert { color: var(--dpv-warn); }

.dpv-result {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    border: 1px solid var(--rd-line-strong);
    background: var(--rd-surface);
    border-radius: 3px;
    padding: .9rem 1rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--rd-fg);
}

.dpv-result .dpi { width: 26px; height: 26px; flex: 0 0 26px; color: var(--dpv-gruen); margin-top: -.1rem; }

/* ---------- Baustein 4: Kennzahlen ---------- */

.dpv-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

@media (min-width: 768px) {
    .dpv-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Der Ton sitzt im Akzent der Zeichnung, nicht als Streifen am Kasten. */
.dpv-stat {
    margin: 0;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: 3px;
    padding: .85rem .85rem 1rem;
    text-align: left;
}

.dpv-stat .dpi { width: 26px; height: 26px; color: var(--rd-fg-muted); }

.dpv-stat-num {
    display: block;
    font-family: var(--dpv-mono);
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--rd-fg);
    line-height: 1.1;
    margin-top: .5rem;
}

.dpv-stat-label {
    display: block;
    font-size: .76rem;
    color: var(--rd-fg-muted);
    line-height: 1.4;
    margin-top: .35rem;
}

/* ---------- Baustein 5: Themenkarte ---------- */

.dpv-map {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    position: relative;
}

.dpv-map-lines { display: none; }

.dpv-map-node {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: 3px;
    padding: .7rem .85rem;
}

.dpv-map-node.n1 { --dpi-akz: var(--dpv-akz-1); }
.dpv-map-node.n2 { --dpi-akz: var(--dpv-akz-2); }
.dpv-map-node.n3 { --dpi-akz: var(--dpv-akz-3); }
.dpv-map-node.n4 { --dpi-akz: var(--dpv-akz-2); }

.dpv-map-node .dpi { width: 26px; height: 26px; color: var(--rd-fg-muted); flex: 0 0 26px; margin-top: .05rem; }

.dpv-map-node strong {
    display: block;
    color: var(--rd-fg);
    font-size: .88rem;
    line-height: 1.3;
}

.dpv-map-node span {
    display: block;
    font-size: .78rem;
    color: var(--rd-fg-muted);
    line-height: 1.4;
    margin-top: .12rem;
}

/* Deckende Grundlage, sonst scheinen die Linien durch die Mitte.
   Die Mitte steht im HTML als erster Knoten. Auf dem Handy ist das
   die Anzeigereihenfolge, am Desktop liegen alle Knoten absolut, dort
   spielt die Reihenfolge keine Rolle. So lesen Mensch und Crawler
   dieselbe Abfolge. Nicht umsortieren. */
.dpv-map-core {
    --dpi-akz: var(--dpv-gruen);
    background: var(--rd-surface);
    border-color: var(--rd-line-strong);
}

.dpv-map-core strong { color: var(--dpv-gruen); }
.dpv-map-core .dpi { color: var(--dpv-gruen); }

/* Die Mitte bekommt die groessere Zeichnung, damit sie auch
   gestapelt auf dem Handy als Knotenpunkt lesbar bleibt und
   nicht als fuenfter gleichwertiger Kasten. */
.dpv-map-core .dpi { width: 32px; height: 32px; flex: 0 0 32px; }

@media (min-width: 768px) {
    .dpv-map { display: block; height: 384px; }

    .dpv-map-lines {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .dpv-map-lines line { stroke: var(--rd-line-strong); stroke-width: 2; }

    .dpv-map-node {
        position: absolute;
        width: 30%;
        transform: translate(-50%, -50%);
        flex-direction: column;
        gap: .3rem;
        text-align: left;
        z-index: 1;
    }

    .dpv-map-core {
        width: 30%;
        left: 50%;
        top: 50%;
        align-items: center;
        text-align: center;
    }

    .dpv-map-node.n1 { left: 15%; top: 16%; }
    .dpv-map-node.n2 { left: 85%; top: 16%; }
    .dpv-map-node.n3 { left: 15%; top: 84%; }
    .dpv-map-node.n4 { left: 85%; top: 84%; }
}

/* ---------- Nachtraege ---------- */

/* .prose setzt Punkte und Abstaende auf jedes li, das muss hier weg. */
.dpv ul.dpv-stats, .dpv ol.dpv-tl, .dpv ol.dpv-chain { list-style: none; padding: 0; margin: 0; }
.dpv .dpv-tl-item, .dpv .dpv-stat { margin: 0; }
.dpv .dpv-chain-step { margin: 0 0 .7rem; }
.dpv .dpv-chain-step:last-child { margin-bottom: 0; }