/* ZEYNAH INTELLIGENCE — nur Anordnung, keine eigenen Farben
   ─────────────────────────────────────────────────────────────────────────
   Angelegt 03.09.2026.

   ⚠️ HIER STEHT KEIN EINZIGER FESTER FARBWERT ausser den Palettenblaus
   `0,113,227` / `127,188,255` / `0,91,184` — und die nur als Deckkraft
   ueber dem, was das Band schon hat. Grund: Eine Kachel dreht mit ihrem
   Band (hell → dunkle Kachel, dunkel → creme Kachel). Wer hier eine
   Flaeche festschreibt, verliert diese Drehung und landet bei Grau. Genau
   das ist am 29.08. auf `/m/bedarf` passiert.

   Alles Uebrige kommt aus `zeynah-grundlage.css`:
     `--zy-text-tief` `--zy-leise` `--zy-blau-t` `--zy-blau-hell`
     `--zy-tief-2-rgb` `--zy-rand-1..4` `--zy-creme` `--zy-schatten`
   Diese Variablen werden INNERHALB `.zy-kachel` neu belegt. Wer sie
   benutzt statt eigener Werte, dreht automatisch mit.

   ⚠️ Nie `--zy-kachel-rgb` — die gibt es nicht. Der Kachelton heisst
   `--zy-tief-2-rgb` (31.08., drei Stellen ohne Hintergrund).
   ⚠️ Nie die Kurzschreibweise `background:` neben einer eigenen
   `background-color` — sie setzt die Deckfarbe zurueck.
*/

/* ═══ ABSCHNITTSKOPF ═══════════════════════════════════════════════════
   Der Baustein zeichnet seine Ueberschrift selbst — deshalb braucht er
   auch ihre Stile selbst. Sich auf `.abschnitt-kopf` der Seite zu
   verlassen ginge schief: `/energy` hat diese Klasse gar nicht, und die
   Ueberschrift staende dort unformatiert im Fliesstext.

   Schriftgroessen und Familien sind die der uebrigen Bereichsseiten,
   damit das Band nicht als Fremdkoerper auffaellt.                    */
.iv-kopfblock{max-width:760px;margin-bottom:4px}
.iv-auge{
	font-family:'IBM Plex Mono',ui-monospace,monospace;
	font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
	opacity:.75; margin-bottom:.6rem;
}
.iv-h2{
	font-family:'DM Serif Display',Georgia,serif; font-weight:400;
	font-size:clamp(23px,3.4vw,34px); line-height:1.18;
	margin:.3rem 0 .5rem; color:inherit;
}
.iv-einfach{font-size:17px; line-height:1.6; font-weight:500; margin:0 0 .6rem}
.iv-lead{font-size:15.5px; line-height:1.7; margin:0}
.iv-abschluss{margin-top:22px}

/* ═══ STROM ═══════════════════════════════════════════════════════════ */
.iv-strom{
	display:grid; gap:16px; margin-top:20px;
	/* 09.09.2026: min(320px,100%) — auf 360 px Bildschirmbreite ragte die
	   Karte 15 px ueber den Rand (Innenbreite 296 px). Gemessen. */
	grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
}
@media (max-width:640px){
	.iv-strom{grid-template-columns:1fr; gap:14px}
}

.iv-karte{display:flex; flex-direction:column; gap:.65rem}
.iv-kopf{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.iv-titel{font-size:19px; line-height:1.3; margin:.1rem 0 0}
.iv-text{font-size:14.5px; line-height:1.6; margin:0; opacity:.92}
.iv-leise{color:var(--zy-leise); font-size:13px; line-height:1.55}

/* ═══ PILLEN ═══════════════════════════════════════════════════════════
   Die Deckkraft traegt die Bedeutung, nicht der Farbton: `stark` fuer
   handelbare Zustaende, `leise` fuer Beobachtung. Ein Zustand, der nur
   beobachtet wird, darf nicht aussehen wie eine offene Vergabe.       */
.iv-pille{
	display:inline-flex; align-items:center;
	padding:.24rem .62rem; border-radius:999px;
	font-size:11.5px; font-weight:600; letter-spacing:.02em;
	line-height:1.5; white-space:nowrap;
	background-color:rgba(0,113,227,.13);
	border:1px solid rgba(0,113,227,.30);
	color:var(--zy-blau-t);
}
.iv-bereich{background-color:rgba(0,113,227,.20); border-color:rgba(0,113,227,.44); font-weight:700}
.iv-ort,
.iv-signal{background-color:rgba(0,113,227,.09); border-color:rgba(0,113,227,.22)}
.iv-stark{background-color:rgba(0,91,184,.26); border-color:rgba(0,91,184,.52); color:var(--zy-text-tief)}
.iv-leise-pille,
.iv-pille.iv-leise{background-color:rgba(0,113,227,.07); border-color:rgba(0,113,227,.18); color:var(--zy-leise)}
.iv-beleg{background-color:rgba(127,188,255,.20); border-color:rgba(127,188,255,.46); color:var(--zy-blau-t)}
.iv-unbeleg{
	background-color:rgba(0,113,227,.06);
	border-style:dashed; border-color:rgba(0,113,227,.34);
	color:var(--zy-leise);
}

/* Querverbindung: dieselbe Chance in mehreren Bereichen. Sie ist der
   sichtbare Beweis, dass hier EIN System laeuft und nicht sechs. */
.iv-querband{display:flex; flex-wrap:wrap; gap:.3rem; align-items:center}
.iv-quer{
	font-size:11px; letter-spacing:.06em; text-transform:uppercase;
	padding:.16rem .48rem; border-radius:6px;
	background-color:rgba(127,188,255,.14);
	border:1px solid rgba(127,188,255,.30);
	color:var(--zy-blau-t);
}

.iv-fuss{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
	justify-content:space-between; margin-top:auto; padding-top:.4rem}
.iv-marken{display:flex; flex-wrap:wrap; gap:.35rem}
.iv-punkte{display:flex; align-items:baseline; gap:.35rem; cursor:help}
.iv-punkte-zahl{font-family:'IBM Plex Mono',ui-monospace,monospace;
	font-size:22px; font-weight:600; line-height:1; color:var(--zy-blau-t)}
/* 03.09. am Bildschirm gemessen: bei 9em brach „Zeynah-Chancenbewertung"
   dreizeilig um und drueckte die Karte auseinander. Die Fussleiste ist
   ohnehin eine eigene Zeile — die Beschriftung darf die Breite nehmen. */
.iv-punkte-wort{font-size:10.5px; letter-spacing:.06em; line-height:1.35;
	text-transform:uppercase; color:var(--zy-leise); max-width:16em}
@media (max-width:400px){ .iv-punkte-wort{max-width:11em} }
/* Die Strukturangabe (Arbeitspakete) steht anstelle der Bewertung, wo
   diese nichts aussagen kann. Sie tritt ruhiger auf: eine Tatsache ueber
   das Vorhaben, kein Urteil ueber einen Markt. */
.iv-struktur .iv-punkte-zahl{font-size:19px; color:var(--zy-text-tief); opacity:.85}

.iv-wege{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.3rem}
.iv-wege .zy-knopf{padding:.62rem 1.05rem; font-size:14px}

/* ═══ FILTER ═══════════════════════════════════════════════════════════
   Auf dem Handy waagerecht scrollende Knopfreihen statt Aufklappfelder.
   Jeder Knopf mindestens 40 px hoch — bei 360 px ist ein 28-px-Ziel mit
   dem Daumen nicht sicher zu treffen.                                 */
.iv-filter{display:flex; flex-direction:column; gap:.55rem; margin-top:18px}
.iv-filter-reihe{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.iv-filter-name{
	flex:0 0 auto; min-width:6.5em;
	font-size:11px; letter-spacing:.1em; text-transform:uppercase;
	color:var(--zy-leise);
}
.iv-filter-knoepfe{
	display:flex; gap:.35rem; flex:1 1 240px;
	overflow-x:auto; padding-bottom:.2rem;
	scrollbar-width:thin;
}
.iv-filter-knopf{
	flex:0 0 auto; min-height:40px;
	padding:.5rem .85rem; border-radius:999px;
	font:inherit; font-size:13px; font-weight:600; cursor:pointer;
	background-color:rgba(0,113,227,.07);
	border:1px solid rgba(0,113,227,.24);
	color:var(--zy-text-tief);
	transition:transform .2s cubic-bezier(.34,1.56,.64,1), background-color .2s ease;
}
.iv-filter-knopf:hover{background-color:rgba(0,113,227,.14)}
.iv-filter-knopf:active{transform:translateY(-3px) scale(.97)}
.iv-filter-knopf.iv-an{
	background-color:rgba(0,91,184,.30);
	border-color:rgba(0,91,184,.60);
	color:var(--zy-text-tief);
}
.iv-filter-knopf:focus-visible,
.iv-suche:focus-visible{outline:2px solid var(--zy-blau-hell); outline-offset:2px}

.iv-suche{
	flex:1 1 200px; min-height:40px;
	padding:.5rem .8rem; border-radius:10px;
	font:inherit; font-size:14px;
	background-color:rgba(0,113,227,.06);
	border:1px solid rgba(0,113,227,.24);
	color:var(--zy-text-tief);
}
.iv-suche::placeholder{color:var(--zy-leise); opacity:.9}
.iv-reset{padding:.5rem .9rem; font-size:13px; min-height:40px}
.iv-zaehler{margin:.9rem 0 0}

/* ═══ WARNBAND UND LEERZUSTAND ═════════════════════════════════════════
   Beide sind Auskuenfte, keine Fehler. Sie treten deshalb ruhig auf —
   aber der Rand ist durchgezogen, damit sie nicht wie Fliesstext wirken. */
.iv-warnung{
	margin-top:18px;
	border-left:4px solid rgba(0,113,227,.60);
}
.iv-warnung strong{display:block; font-size:16px; margin-bottom:.4rem}
.iv-warnung p{margin:0; font-size:14px; line-height:1.65; opacity:.92}
.iv-leer{margin-top:18px; text-align:center}
.iv-leer strong{display:block; font-size:16px; margin-bottom:.3rem}

/* ═══ DETAIL ═══════════════════════════════════════════════════════════ */
.iv-detail{display:flex; flex-direction:column; gap:16px; margin-top:18px}
.iv-zurueck{align-self:flex-start}
.iv-detail-kopf{display:flex; flex-direction:column; gap:.6rem}
.iv-block{display:flex; flex-direction:column; gap:.6rem}
.iv-block h4{font-size:16px; margin:.2rem 0 0; color:inherit}
.iv-block h5{font-size:14.5px; margin:.2rem 0 0; color:inherit}

.iv-liste{margin:0; display:grid; gap:.3rem}
.iv-zeile{display:flex; gap:.7rem; align-items:baseline;
	padding:.3rem 0; border-bottom:1px solid rgba(0,113,227,.14)}
.iv-zeile:last-child{border-bottom:0}
.iv-zeile dt{flex:0 0 42%; font-size:12.5px; letter-spacing:.04em;
	text-transform:uppercase; color:var(--zy-leise); margin:0}
.iv-zeile dd{flex:1 1 auto; margin:0; font-size:14.5px}
.iv-offen{font-style:italic; color:var(--zy-leise)}
@media (max-width:560px){
	.iv-zeile{flex-direction:column; gap:.1rem}
	.iv-zeile dt{flex:none}
}

/* ═══ BEWERTUNG ════════════════════════════════════════════════════════
   Die Teilnoten stehen VOR dem Balken — wer nur den Balken sieht, liest
   eine Zahl ohne ihren Grund.                                         */
.iv-teile{display:grid; gap:.85rem;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.iv-teil-kopf{display:flex; justify-content:space-between; gap:.5rem;
	font-size:13px; font-weight:600; margin-bottom:.25rem}
.iv-balken{height:6px; border-radius:999px; overflow:hidden;
	background-color:rgba(0,113,227,.12)}
.iv-balken>span{display:block; height:100%; border-radius:999px;
	background-color:rgba(0,91,184,.72)}
.iv-teil-notiz{margin:.3rem 0 0; font-size:12px}

/* ═══ LIEFERKARTE ══════════════════════════════════════════════════════
   Auf breitem Schirm eine waagerechte Kette, auf dem Handy untereinander.
   Kein Riesengraph: Ein Bild, das man nicht lesen kann, ist schlechter
   als eine Liste, die man lesen kann.                                 */
.iv-kette{overflow-x:auto; padding-bottom:.3rem}
.iv-kette-kopf{display:flex; align-items:center; gap:.55rem;
	flex-wrap:wrap; min-width:min-content}
.iv-kette-stufe{
	padding:.5rem .85rem; border-radius:12px; font-size:13px; font-weight:600;
	background-color:rgba(0,113,227,.11);
	border:1px solid rgba(0,113,227,.26);
	white-space:nowrap;
}
.iv-kette-pfeil{color:var(--zy-blau-t); font-size:15px; flex:0 0 auto}

.iv-knoten-liste{display:grid; gap:.5rem; margin-top:.4rem}
.iv-knoten{
	border-radius:12px; overflow:hidden;
	background-color:rgba(0,113,227,.055);
	border:1px solid rgba(0,113,227,.20);
}
.iv-knoten>summary{
	display:flex; align-items:center; gap:.7rem;
	padding:.7rem .85rem; cursor:pointer; min-height:44px;
	font-size:14px; font-weight:600; list-style:none;
}
.iv-knoten>summary::-webkit-details-marker{display:none}
.iv-knoten>summary::after{
	content:'+'; margin-left:auto; flex:0 0 auto;
	font-family:'IBM Plex Mono',ui-monospace,monospace;
	color:var(--zy-blau-t); font-size:16px;
}
.iv-knoten[open]>summary::after{content:'–'}
.iv-knoten>summary:focus-visible{outline:2px solid var(--zy-blau-hell); outline-offset:-2px}
.iv-nr{
	flex:0 0 auto; width:24px; height:24px; border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center;
	font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.5px;
	background-color:rgba(0,91,184,.24);
	border:1px solid rgba(0,91,184,.44);
}
.iv-knoten-name{flex:1 1 auto; min-width:0}
.iv-knoten-zahl{flex:0 0 auto; font-size:11.5px; font-weight:500;
	color:var(--zy-leise); text-align:right}
.iv-knoten-inhalt{padding:0 .85rem .8rem; display:grid; gap:.55rem}

.iv-faehig-reihe{display:flex; flex-wrap:wrap; gap:.3rem}
.iv-faehig{
	font-size:12px; padding:.22rem .55rem; border-radius:7px;
	background-color:rgba(0,113,227,.10);
	border:1px solid rgba(0,113,227,.22);
}
/* Eine Luecke ist keine Warnung in Rot — Rot gehoert nicht in diese
   Palette. Sie ist ein GESTRICHELTER Rand: sichtbar, ohne zu schreien. */
.iv-faehig.iv-luecke{
	border-style:dashed; border-width:1.5px;
	border-color:rgba(0,91,184,.66);
	background-color:rgba(0,91,184,.15);
	font-weight:600;
}
.iv-faehig.iv-einzeln{
	border-style:dotted; border-width:1.5px;
	border-color:rgba(127,188,255,.62);
}
.iv-faehig em{font-style:normal; opacity:.72; font-size:11px}

.iv-anbieterliste{margin:0; padding-left:1.05rem; display:grid; gap:.28rem}
.iv-anbieterliste li{font-size:14px; line-height:1.5}
.iv-offenliste{margin:.4rem 0 0; padding-left:1.05rem; display:grid; gap:.22rem}
.iv-offenliste li{font-size:13.5px; color:var(--zy-leise)}

/* ═══ VERTRAUENSBAND ═══════════════════════════════════════════════════
   Vier Felder, gleich gross, gleich laut. Sobald eines groesser waere,
   liest man es als das wichtigste — und genau darum geht es hier nicht. */
.iv-trust{display:grid; gap:.7rem;
	grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.iv-trust-teil{
	padding:.7rem .8rem; border-radius:12px;
	background-color:rgba(0,113,227,.06);
	border:1px solid rgba(0,113,227,.20);
}
.iv-trust-teil strong{display:block; font-size:13px; margin-bottom:.28rem}
.iv-trust-teil p{margin:0; font-size:12.5px; line-height:1.55; color:var(--zy-leise)}
.iv-trust-fakt{border-color:rgba(0,91,184,.48); border-left-width:3px}
.iv-trust-struktur{border-color:rgba(0,113,227,.40); border-left-width:3px}
.iv-trust-deutung{border-style:dashed; border-color:rgba(127,188,255,.52)}
.iv-trust-offen{border-style:dotted; border-color:rgba(0,113,227,.34)}

/* ═══ HANDLUNGEN UND AUSGABE ═══════════════════════════════════════════ */
.iv-warnzeile{margin:.2rem 0 0; font-size:12.5px; font-style:italic}
.iv-ausgabe:empty{display:none}
.iv-ausgabe{margin-top:.6rem; display:grid; gap:.5rem}
.iv-entwurf{
	padding:.85rem .95rem; border-radius:12px;
	background-color:rgba(0,113,227,.07);
	border:1px solid rgba(0,113,227,.26);
	display:grid; gap:.45rem;
}

/* ═══ ARABISCH — die Kette dreht mit ══════════════════════════════════
   Der Pfeil zeigt in Leserichtung, sonst weist er auf den Schritt davor.
   `dir` setzt `i18n-zeynah.js` beim Sprachwechsel auf `<html>`.       */
[dir="rtl"] .iv-kette-pfeil{transform:scaleX(-1)}
[dir="rtl"] .iv-anbieterliste,
[dir="rtl"] .iv-offenliste{padding-left:0; padding-right:1.05rem}
[dir="rtl"] .iv-warnung{border-left:0; border-right:4px solid rgba(0,113,227,.60)}
[dir="rtl"] .iv-trust-fakt,
[dir="rtl"] .iv-trust-struktur{border-left-width:1px; border-right-width:3px}
[dir="rtl"] .iv-knoten>summary::after{margin-left:0; margin-right:auto}

/* ═══ WENIGER BEWEGUNG ═════════════════════════════════════════════════
   Die Kacheln der Grundlage schweben bewusst immer (Nazannils Gesetz).
   Was HIER hinzukommt, ist nur Anordnung — und die darf ruhig stehen. */
@media (prefers-reduced-motion:reduce){
	.iv-filter-knopf{transition:none}
	.iv-filter-knopf:active{transform:none}
}