/* DER RAHMENKASTEN — ein umrandeter Block mit einer Aufschrift, der eine Gruppe fasst.
 *
 * 🔴 Owner 04.09.2026: „alle varianten aus ‚Vorschlag' ok … K2 wird die Lösung bei klappbaren
 * (mit und ohne ⓘ)". Regelwerk `docs/design-language.md` §Rahmenkasten, Mockup
 * `docs/rahmenkasten-mockup.html` (der bindet: VERTRAG auf diese Datei).
 *
 * 💣 ES GAB IHN VIERMAL, und fünf ihrer Werte standen auf KEINER Skala des Hauses: `.fs-scope`
 * (Quellen) · `.label-wiki-reference` (Landschaften, Radius 6px, Gewicht 600) · `.planner-group`
 * (Routenplaner, 12,5px / 600) · `.report-section` (Meldung, dritter Radius, eigener Grund).
 * Es bleibt die FORM von `.fs-scope` (Aufschrift auf der Linie wie ein `<legend>`) mit den
 * WERTEN von `.report-section` (Versalien, caption/bold).
 *
 * ⚠️ `.label-wiki-reference` gehört NICHT dazu, und das ist gemessen, nicht vergessen: sein Kopf
 * trägt bis zu DREI Textknöpfe („Ändern", „Sync", „Entfernen"). Eine Aufschrift ist Text auf
 * einer Linie — Knöpfe säßen auf dem Rahmen. Es ist ein Kasten mit KOPFLEISTE und damit eine
 * andere Sache; angeglichen sind dort nur die Werte.
 */

.avm-rahmen {
	/* 🔴 DIE ZWEI STELLSCHRAUBEN, und beide werden von der Aufschrift MITGELESEN. Wer eine
	   von Hand überschreibt, muss sie hier überschreiben — nicht am `padding` bzw. am
	   `background` des Kastens, sonst rutscht die Aufschrift von der Linie oder maskiert
	   die falsche Farbe. */
	/* 💣 Wer sie ueberschreibt, gibt eine LAENGE mit Einheit -- `0px`, nie `0`. Ein einheitenloses
	   Null ist eine Zahl, `calc(-1 * 0 - 0.5lh)` mischt Zahl mit Laenge, und die ganze
	   margin-Deklaration des Kopfes faellt damit weg: die Aufschrift rutscht von der Linie, und
	   nichts wird rot. Genau so passiert am 04.09.2026 im Routenplaner, 9,17px daneben. */
	--avm-rahmen-pad: var(--space-8);
	/* Der Grund HINTER der Oberkante: mit genau ihm maskiert die Aufschrift die Linie.
	   💣 Ein Kasten mit EIGENER Füllung kann die Aufschrift nicht auf die Linie legen — sie
	   läge oben auf dem Grund des Elternteils und unten auf dem eigenen, und eine Farbe kann
	   nicht beide sein. Solche Kästen geben ihre Füllung auf (so `.report-section`). */
	--avm-rahmen-grund: var(--color-panel-soft);

	position: relative;
	/* 💣 VOLLE BREITE, UNABHÄNGIG VOM ELTERN-ELEMENT. Die Eingabezeile der Quellen ist ein
	   Flex-Container (`.fs-row--add`), der Bearbeiten-Kasten ein Block (`.fs-edit`) — ohne
	   diese Zeile messen sich die Rahmen im einen an ihrem INHALT und im anderen am Kasten.
	   Bei echter Panelbreite (400px) gemessen: 439/379/379 gegen 373/373/373, eine Treppe
	   statt einer Kante.
	   ⚠️ In einem Block-Elternteil ist die Zeile wirkungslos — sie kostet dort nichts und
	   verhindert, dass das Bauteil vom Ort abhängt, an dem es hängt. */
	flex: 1 1 100%;
	/* 💣 UND `min-width: 0` DAZU, sonst ist die Zeile darüber wirkungslos: ein Flex-Kind hat
	   `min-width: auto` und weigert sich, unter seine INHALTSbreite zu schrumpfen. Das lange
	   Adressfeld drückte den ersten Rahmen damit auf 439px — über die 400px des Panels
	   hinaus, während die zwei darunter bei 379 blieben. Gemessen, nicht vermutet: `flex`
	   stand längst richtig da und tat nichts. */
	min-width: 0;
	padding: var(--avm-rahmen-pad);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.avm-rahmen + .avm-rahmen {
	margin-top: var(--space-12);
}
.avm-rahmen[hidden] {
	display: none;
}

/* 💣 STATISCH MIT NEGATIVEM RAND, NICHT ABSOLUT, und das ist im Browser gemessen: die
   Aufschrift des ✎ im Quellen-Editor wird zweizeilig („Gilt für alle Objekte, die diese Quelle
   zitieren — zurzeit nur dieses Objekt" = 34px), und absolut positioniert schob sie nichts weg
   — sie lag 9px ÜBER dem ersten Feld. In der Eingabezeile fiel das nie auf, weil deren
   Reichweite kurz ist („— noch kein Objekt").
   ⭐ Statisch: die erste Zeile sitzt auf dem Rahmen, eine zweite schiebt den Inhalt nach unten.
   Genau das leistet ein `<legend>`, und genau das ahmt dieser Kasten nach.

   💣 DER WERT WIRD GERECHNET, NICHT GERATEN. Der Kopf beginnt normal nach dem Polster des
   Kastens (P) und soll mit der Mitte seiner ERSTEN Zeile auf der Kante liegen — also
   `-P - 0.5lh`. `lh` ist die Zeilenhöhe des Elements selbst; der Wert zieht bei jeder
   Schriftgröße mit, statt bei der nächsten Änderung still falsch zu sein.
   🪤 Hier stand geerbte `-17px`. Die stimmt nur, solange P = 10px ist UND der Kopf ein
   FLEX-Kasten bleibt (dessen Höhe von der 11px-Aufschrift kommt). Als Block bringt er seinen
   eigenen 13px-Strut mit, und die Versalien rutschen — gemessen 3,83px unter die Linie, wo
   sie die Buchstaben oben anschneidet. Nach der Korrektur: 0,25px.
   ⚠️ Damit `lh` nicht lügt, muss die Zeilenbox wirklich die des Kopfes sein: ein inline-Kind
   mit größerer eigener Zeilenhöhe zieht sie auf. Deshalb `font-size` und `line-height` HIER,
   und `line-height: 1` an allem, was größer ist. */
.avm-rahmen__kopf {
	margin: calc(-1 * var(--avm-rahmen-pad) - 0.5lh) 0 var(--space-4) 3px;
	font-size: var(--font-size-caption);
	line-height: 1.5;
}

/* 💣 DER GRUND GEHÖRT DEM TEXT, NICHT DEM KASTEN. Als inline-Lauf mit `box-decoration-break`
   folgt er jeder Zeile einzeln, und die Oberkante steht rechts daneben weiter. Als Flex-Kasten
   (`width: max-content` + `max-width: calc(100% - 6px)`) ist er ein Rechteck über die volle
   Breite: bei EINER Zeile fällt das nie auf, weil `max-content` genau dem Text entspricht —
   eine ZWEITE zieht ihn auf und löscht die Kante bis zur rechten Ecke. Am Bestand gemessen
   blieben 9 von 244px übrig. */
.avm-rahmen__schrift {
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 1px 5px;
	background: var(--avm-rahmen-grund);
}

.avm-rahmen__titel {
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-accent-strong);
}

/* Der Zusatz ist eine ZAHL oder eine Reichweite, keine zweite Aufschrift: gedämpft und
   OHNE Versalien — ein Eigenname in Versalien („ALBERNIAWIKI") liest sich wie eine Kennung. */
.avm-rahmen__zusatz {
	color: var(--color-text-muted);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
	letter-spacing: 0;
	text-transform: none;
}