/*
 * Anvil Chapter Generator - Frontend-Styling
 *
 * Seit 0.4.0: nutzt konsequent die ECHTEN CSS-Variablen von
 * anvil-of-war-theme-v2 (--bg-card, --border, --text-body, --accent, --gold
 * usw. aus style.css) als Fallback statt eigener dunkler Platzhalterfarben --
 * dadurch reagiert das Formular jetzt auch auf die 8 Farbschemata.
 *
 * Wichtig (behobener Bug, 19.07.2026): Formularelemente (select/button/input)
 * erben font-family in Browsern NICHT automatisch vom umgebenden Text, auch
 * wenn ein Elternelement font-family:inherit hat -- deshalb hier explizit
 * gesetzt, sonst zeigen ausgerechnet Dropdowns und der Submit-Button die
 * System-Schrift statt Inter/Oswald.
 */

.acg-generator {
	--acg-bg: var(--bg-body, #14110f);
	--acg-panel: var(--bg-card, #1d1815);
	--acg-border: var(--border, #4a3a2c);
	--acg-border-hi: var(--border-hi, #6a5540);
	--acg-text: var(--text-body, #e8e1d6);
	--acg-muted: var(--text-muted, #a89f92);
	--acg-accent: var(--accent, #b3452e);
	--acg-accent-hover: var(--accent-hi, #d1573b);
	--acg-gold: var(--gold, #a8842c);
	/*
	 * SEIT 0.62.0 AUS DEM THEME, mit dem bisherigen Wert als Rueckfall.
	 *
	 * Der Kasten sah als Fremdkoerper aus, obwohl seine Grundschrift mit
	 * der Seite uebereinstimmte: Er setzte fuer ALLES diese eine Schrift,
	 * auch fuer Ueberschriften -- und dort nimmt die Seite Oswald
	 * beziehungsweise Cinzel. Deshalb sind es jetzt zwei.
	 */
	--acg-font-body: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif );
	--acg-font-head: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif );

	max-width: 640px;
	margin: 2rem auto;
	padding: 1.75rem;
	background: var(--acg-panel);
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 4px);
	color: var(--acg-text);
	font-family: var(--acg-font-body);
}

.acg-form .acg-field {
	margin-bottom: 1.1rem;
}

.acg-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	font-family: var(--acg-font-body);
}

.acg-form select,
.acg-form input[type="email"],
.acg-form input[type="text"] {
	width: 100%;
	padding: 0.55rem 0.7rem;
	background: var(--acg-bg);
	color: var(--acg-text);
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 3px);
	font-family: var(--acg-font-body);
	font-size: 1rem;
	line-height: 1.4;
}

.acg-form select:focus,
.acg-form input:focus {
	outline: 2px solid var(--acg-accent);
	outline-offset: 1px;
}

/* --------------------------------------------------------------------
 * Bildumfang: Einzelbilder oder Dossierblaetter (seit 0.59.0)
 *
 * Das Feldset traegt keinen Rahmen -- der Browservorgabe-Rahmen um ein
 * <fieldset> passt nicht zum uebrigen Formular, und die Gruppierung ist
 * fuer Screenreader gedacht, nicht fuers Auge.
 *
 * `display` wird hier bewusst NICHT gesetzt: Die umschaltbaren Elemente
 * haengen am `hidden`-Attribut, und eine Klassenregel mit display wuerde
 * es ueberstimmen (hoehere Spezifitaet als das User-Agent-Stylesheet).
 * Genau dieser Fall steht bei .aga-lupe und .ast-download-modal in der
 * Fallstrickliste.
 * ----------------------------------------------------------------- */
.acg-bilder-umfang {
	margin: 0 0 0.6rem;
	padding: 0;
	border: 0;
}

.acg-bilder-umfang legend {
	padding: 0;
	margin-bottom: 0.35rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	font-family: var(--acg-font-body);
}

.acg-form .acg-bilder-umfang .acg-radio {
	font-weight: 400;
	line-height: 1.45;
	margin-bottom: 0.4rem;
}

.acg-form .acg-bilder-umfang .acg-radio input {
	margin-right: 0.4rem;
}

/* Seit 0.109.0 ein <fieldset> (siehe class-acg-shortcode.php): Rahmen und
   Innenabstand des Elements muessen deshalb zurueckgesetzt werden, die
   Optionen liegen eine Ebene tiefer in .acg-lang-optionen. */
/* ── Nur fuer Hilfsmittel (seit 0.110.0) ────────────────────────────
   Text, der gelesen, aber nicht gesehen wird. `display: none` kann das
   NICHT: Was so versteckt ist, existiert auch fuer einen Screenreader
   nicht -- und genau daran hingen zwei Befunde vom 24.08.2026, die
   Sprungleisten-Kuerzel auf schmalem Schirm ("1", "2", "3" als einziger
   Linktext, WCAG 2.4.4) und die Zaehler in den Abschnittskoepfen.

   Die clip-Technik ist die gebraeuchliche; sie steht so auch in
   WordPress' eigenem .screen-reader-text. Eigene Klasse statt dessen,
   weil dieses Modul im Frontend nicht davon ausgehen darf, dass das
   Theme sie mitbringt. */
.acg-nur-vorlesen {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.acg-lang-toggle {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.acg-lang-toggle > legend {
	padding: 0;
	margin-bottom: 0.5rem;
	font-weight: 600;
	font-family: var(--acg-font-body);
}

.acg-lang-optionen {
	display: flex;
	gap: 0.75rem;
}

.acg-lang-option {
	flex: 1;
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--acg-bg);
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 3px);
	font-family: var(--acg-font-body);
	font-weight: 400 !important;
	margin-bottom: 0 !important;
	cursor: pointer;
}

.acg-lang-option input {
	accent-color: var(--acg-accent);
}

.acg-lang-option:has(input:checked) {
	border-color: var(--acg-gold);
	color: var(--acg-gold);
}

.acg-submit-row {
	margin-top: 1.5rem;
}

.acg-submit-hint {
	margin: 0.6rem 0 0;
	font-family: var(--acg-font-body);
	font-size: 0.8rem;
	color: var(--acg-muted);
}

.acg-submit-btn,
.acg-download-btn {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	background: var(--acg-accent);
	color: var(--on-accent, #fff);
	border: none;
	border-radius: var(--radius-sm, 3px);
	font-family: var(--acg-font-body);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.9rem;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--transition, 0.15s ease);
}

.acg-submit-btn:hover,
.acg-download-btn:hover {
	background: var(--acg-accent-hover);
	color: var(--on-accent, #fff);
}

.acg-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.acg-form-message {
	margin-top: 0.75rem;
	font-family: var(--acg-font-body);
	font-size: 0.9rem;
	color: var(--acg-accent-hover);
}

/* Ohne diese Regel stuende der Aussenabstand des wartenden, leeren
   Meldebereichs auch dann da, wenn nichts zu melden ist -- und die
   Klassenregel darueber schluege das hidden-Attribut, weil sie
   spezifischer ist als das User-Agent-Stylesheet. Dasselbe Paar wie bei
   .acg-kombifeld-liste[hidden] und .acg-modus-kopf[hidden]. */
.acg-form-message[hidden] { display: none; }

.acg-progress {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--acg-border);
	text-align: center;
}

.acg-spinner {
	width: 30px;
	height: 30px;
	margin: 0 auto 0.75rem;
	border: 3px solid var(--acg-border);
	border-top-color: var(--acg-gold);
	border-radius: 50%;
	animation: acg-spin 0.9s linear infinite;
}

@keyframes acg-spin {
	to { transform: rotate(360deg); }
}

.acg-progress-text {
	margin: 0;
	font-family: var(--acg-font-body);
	color: var(--acg-muted);
	font-size: 0.9rem;
}

.acg-result {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--acg-border);
}

.acg-result-heading {
	margin: 0 0 0.5rem;
	font-family: var(--acg-font-head);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 1.15rem;
	color: var(--acg-gold);
}

.acg-result-preview {
	margin: 0 0 1.1rem;
	font-family: var(--acg-font-body);
	color: var(--acg-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

.acg-download-row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.acg-counter {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--acg-border);
	text-align: center;
}

.acg-counter-number {
	display: block;
	font-family: var(--acg-font-head);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--acg-gold);
	line-height: 1.1;
}

.acg-counter-label {
	display: block;
	font-family: var(--acg-font-body);
	font-size: 0.8rem;
	color: var(--acg-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 0.2rem;
}

/* Seit 0.108.0 ohne seitlichen Aussenrand.

   Auf einem 375px-Schirm gehen 147px an Raender, bevor ueberhaupt ein
   Formularfeld beginnt (gemessen am 24.08.2026): 32px vom Theme
   (.site-content), 48px von dessen Inhaltsspalte -- und 67px von diesem
   Kasten hier, aus 16px Aussenrand und 17.6px Innenabstand je Seite.

   Die 32px Aussenrand sind die einzigen davon, die dieses Modul
   verantwortet und ersatzlos streichen kann: Ein Kasten, um den das
   Theme bereits 80px Luft laesst, braucht keine eigene. Der senkrechte
   Abstand bleibt -- er trennt den Generator vom Text darueber. */
@media (max-width: 480px) {
	.acg-generator {
		padding: 1.1rem;
		margin: 1rem 0;
	}
	.acg-lang-optionen {
		flex-direction: column;
	}
}

/* -- Beta-Zugangsfeld (seit 0.3.0) -- */

.acg-access-field input[type="email"],
.acg-access-field input[type="text"] {
	max-width: 420px;
}

.acg-access-hint {
	margin: 0.35rem 0 0;
	font-family: var(--acg-font-body);
	font-size: 0.85rem;
	color: var(--acg-muted);
}

.acg-generator-disabled p {
	padding: 1rem 1.25rem;
	font-family: var(--acg-font-body);
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 4px);
	background: var(--acg-panel);
	color: var(--acg-muted);
}

/* ---------------------------------------------------------------------
 * Sprache des FORMULARS (seit 0.15.0)
 *
 * Die Seite schaltet ueber html[lang] um; das Formular soll zusaetzlich
 * der Ausgabesprache folgen, die der Besucher im Formular selbst waehlt.
 * Deshalb eine eigene Achse: der Wrapper traegt data-acg-lang, und diese
 * Regeln haben hoehere Spezifitaet als die allgemeinen i18n-Regeln des
 * Themes (Klasse + zwei Attribute schlaegt Element + zwei Attribute).
 *
 * BEWUSST NICHT data-lang am Wrapper: das Theme versteckt jedes
 * div[data-lang], dessen Wert nicht zur Seitensprache passt -- der ganze
 * Generator waere auf einer englischen Seite verschwunden.
 * ------------------------------------------------------------------- */
.acg-generator[data-acg-lang="de"] [data-lang="en"],
.acg-generator[data-acg-lang="en"] [data-lang="de"] { display: none; }

.acg-generator[data-acg-lang="de"] [data-lang="de"],
.acg-generator[data-acg-lang="en"] [data-lang="en"] { display: inline; }

/* ── Rueckmeldung der Code-Vorabpruefung (seit 0.113.0) ─────────────
   Drei Zustaende, und keiner davon verlaesst sich auf Farbe allein:
   Jeder traegt ein Zeichen davor (WCAG 1.4.1 -- eine Aussage, die nur
   ueber Farbe transportiert wird, kommt bei Farbenblindheit nicht an).
   Das Zeichen steht im CSS und nicht im Text, damit die Meldung selbst
   in beiden Sprachen dieselbe bleibt. */
.acg-code-pruefung {
	margin: .4rem 0 0;
	font-family: var(--acg-font-body);
	font-size: .85rem;
}
.acg-code-pruefung[hidden] { display: none; }

.acg-code-pruefung-gueltig::before   { content: "\2713\00a0"; }
.acg-code-pruefung-ungueltig::before { content: "\2715\00a0"; }
.acg-code-pruefung-laeuft::before    { content: "\2026\00a0"; }

/* --acg-accent-hover fuer den Fehlerfall, dieselbe Farbe wie die
   Formularmeldung -- nicht Rot aus dem Farbschema: Das Schema wechselt
   mit dem Orden, eine Fehlerfarbe darf das nicht. */
.acg-code-pruefung-ungueltig { color: var(--acg-accent-hover); }
.acg-code-pruefung-laeuft,
.acg-code-pruefung-neutral   { color: var(--acg-muted); }

/* ── Ankuendigung der Zugangsschranke (seit 0.112.0) ────────────────
   EINE ZEILE, kein Kasten. Der Kasten mit dem Eingabefeld steht unten
   beim Absenden; hier oben wird nur angekuendigt, und eine Ankuendigung,
   die aussieht wie eine Aufforderung, wird als Aufforderung gelesen.

   Gold als Randlinie, nicht als Textfarbe: --acg-gold traegt gegen den
   hellen Grund rund 2,7:1 und ist damit fuer Text zu wenig (WCAG 1.4.3
   verlangt 4,5:1). Als Auszeichnung einer Kante ist es richtig. */
.acg-zugang-ankuendigung {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 0 0 1.25rem;
	padding: .6rem .85rem;
	border-left: 3px solid var(--acg-gold);
	background: var(--acg-bg);
	font-family: var(--acg-font-body);
	font-size: .9rem;
}

.acg-zugang-schloss { flex: 0 0 auto; }

/* ── Die Pfadwahl als Kachelfeld (seit 0.109.0) ─────────────────────
   Bis 0.108.2 elf Radiozeilen in einer flachen Reihe -- der Umschalter
   sah aus wie eine Frage unter Fragen und war doch die folgenreichste
   Entscheidung der Seite: Er bestimmt, WELCHES Formular danach erscheint.

   Jede Kachel traegt Titel, einen Satz und die Untergrenze der Fragenzahl.
   Der Satz beantwortet die Frage vor der Wahl ("was bekomme ich?"), die
   Zahl die Frage danach ("wie lange dauert das?").

   DAS GANZE <label> IST DIE TREFFERFLAECHE, nicht nur die Titelzeile --
   auf einem Telefon der Unterschied zwischen einer 13x13px-Schaltflaeche
   und einer Kachel (WCAG 2.5.5/2.5.8). Deshalb steht der beschreibende
   Text INNERHALB des labels, siehe class-acg-shortcode.php. */
.acg-modus-wahl {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0; /* sonst ignoriert ein <fieldset> die Breite seines Elternteils */
}

.acg-modus-wahl > legend {
	padding: 0;
	margin-bottom: .5rem;
	font-weight: 600;
	font-family: var(--acg-font-body);
}

/* DAS RASTER LIEGT SEIT 0.115.0 HIER, nicht mehr je Fraktion.
   Begruendung im Markup (class-acg-shortcode.php): Bei drei Fraktionen mit
   nur EINER Kachel kostete das Raster-je-Gruppe den Rest der Zeile -- elf
   Kacheln standen in sieben Zeilen, drei davon halb leer.

   11rem als Mindestbreite, und die Zahl ist gerechnet: Die Formularspalte
   ist am Rechner rund 642px breit. Bei 11rem (176px) passen drei Spalten
   (3 x 176 + 2 x 9.6 Abstand = 547px), vier nicht (733px). Auf dem iPad
   hochkant (414px) sind es zwei, auf dem Telefon (258px) eine. */
.acg-modus-toggle {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: .6rem;
}

/* .acg-modus-gruppe und .acg-modus-gruppe-titel gibt es seit 0.115.0 nicht
   mehr -- die Fraktion steht jetzt IN der Kachel (.acg-modus-option-fraktion
   weiter unten). Die Gruppierung selbst bleibt: Die Schleife im Shortcode
   laeuft weiter ueber die Fraktionen, sie bekommen nur keinen eigenen
   Container mehr und brechen damit nicht mehr auf eine neue Zeile um. */

/* .acg-form DAVOR, und das ist der Unterschied zwischen Kachel und
   Textwueste: `.acg-form label { display: block }` steht weiter oben in
   dieser Datei und ist mit (0,1,1) spezifischer als ein blosses
   `.acg-modus-option` (0,1,0). Ohne den Zusatz gewinnt block, das Raster
   greift nicht, und Titel, Satz und Fragenzahl fliessen als ein Absatz
   ineinander -- so ausgeliefert in 0.109.0 und 0.109.1.

   Spezifitaet statt !important: Die Sprachwahl daneben loest dasselbe
   Problem seit jeher mit `display: flex !important`. Das wirkt auch, macht
   die Regel aber unueberschreibbar -- wer die Kachel spaeter anders bauen
   will, muss dann selbst mit !important antreten. */
.acg-form .acg-modus-option {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"radio fraktion"
		"radio titel"
		".     text"
		".     zahl";
	align-items: start;
	gap: .15rem .5rem;
	min-height: 44px;
	padding: .7rem .85rem;
	background: var(--acg-bg);
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 3px);
	cursor: pointer;
	font-weight: 400;
}

.acg-form .acg-modus-option > input {
	grid-area: radio;
	margin: .2rem 0 0;
	accent-color: var(--acg-accent);
}

/* Die Fraktion steht ueber dem Titel, klein und ruhig: Sie ordnet ein,
   sie ist nicht die Wahl. Dieselbe Optik wie vormals die
   Gruppenueberschrift -- nur jetzt je Kachel, weil im durchgehenden Raster
   zwei Fraktionen nebeneinander stehen koennen. */
.acg-modus-option-fraktion {
	grid-area: fraktion;
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acg-muted);
}

.acg-modus-option-titel { grid-area: titel; font-weight: 600; }
.acg-modus-option-text {
	grid-area: text;
	font-size: .85rem;
	line-height: 1.4;
}
/* --acg-muted statt opacity .6 (seit 0.110.0). Beides sieht gleich aus
   und ist es nicht: opacity rechnet die Deckkraft auf den Hintergrund
   und macht aus einem geprueften Farbwert einen ungeprueften. .6 auf
   dunklem Text ergibt rund 3,4:1 -- unter den 4,5:1, die WCAG 1.4.3 fuer
   Text dieser Groesse verlangt. --acg-muted ist die Farbe, die dieses
   Projekt fuer Nebentext fuehrt, und sie ist als Farbe pruefbar. */
.acg-modus-option-zahl {
	grid-area: zahl;
	margin-top: .25rem;
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--acg-muted);
}

/* Die gewaehlte Kachel wird gehoben, nicht eingefaerbt: Gold auf hellem
   Grund traegt 2,7:1 und ist als alleiniges Merkmal zu wenig (WCAG 1.4.3
   verlangt 4,5:1 fuer Text). Der Rahmen ist das Merkmal, die Goldfarbe
   nur die Zugabe -- und die Rahmenbreite bleibt gleich, sonst springt die
   Kachel beim Waehlen um zwei Pixel. */
.acg-form .acg-modus-option:has(input:checked) {
	border-color: var(--acg-gold);
	box-shadow: inset 0 0 0 1px var(--acg-gold);
}
.acg-form .acg-modus-option:has(input:checked) .acg-modus-option-titel { color: var(--acg-gold); }
.acg-form .acg-modus-option:has(input:focus-visible) { outline: 2px solid var(--acg-accent); outline-offset: 2px; }
.acg-form .acg-modus-option:hover { border-color: var(--acg-border-hi, var(--acg-gold)); }

/* ── Die eingeklappte Kopfzeile ─────────────────────────────────────
   Nach der Wahl bleibt eine Zeile stehen. Sie traegt `hidden` im Markup
   und wird erst von acg-konfigurator.js sichtbar gemacht -- ohne Skript
   bleibt die volle Kachelwahl stehen, wie bei den Abschnitten. */
.acg-modus-kopf {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .25rem .6rem;
	padding: .6rem .85rem;
	border: 1px solid var(--acg-border);
	border-left: 3px solid var(--acg-gold);
	border-radius: var(--radius-sm, 3px);
	background: var(--acg-bg);
}
.acg-modus-kopf[hidden] { display: none; }

.acg-modus-kopf-marke {
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acg-muted);
}
.acg-modus-kopf-wahl { font-family: var(--acg-font-head); }

.acg-modus-aendern {
	margin-left: auto;
	min-height: 44px;
	padding: 0 .75rem;
	background: none;
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 3px);
	color: inherit;
	font-family: var(--acg-font-body);
	font-size: .85rem;
	cursor: pointer;
}
.acg-modus-aendern:hover { border-color: var(--acg-gold); color: var(--acg-gold); }
.acg-modus-aendern:focus-visible { outline: 2px solid var(--acg-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   Zweispaltiges Layout (seit 0.16.0): Formular links, Seitenbox rechts.

   Flexbox, nicht Grid. Der Grund ist der Fall "noch nichts erschaffen":
   dann gibt der Shortcode gar kein <aside> aus, und das Formular soll die
   volle Breite nehmen. Bei einem Grid mit zwei festen Spalten bliebe
   rechts eine leere Spalte stehen; das liesse sich mit :has() loesen, aber
   Flexbox loest es ohne jede Abfrage -- ein fehlendes Kind belegt keinen
   Platz.

   align-items: flex-start ist die Bedingung dafuer, dass position:sticky
   in der Seitenspalte ueberhaupt wirkt. Beim Vorgabewert (stretch) waere
   das <aside> so hoch wie die Zeile, und ein Element, das seinen
   Scrollbereich vollstaendig ausfuellt, hat nichts, worin es kleben
   koennte -- es sieht dann einfach aus wie vorher.
   --------------------------------------------------------------------- */
/* Mit Seitenspalte(n) braucht der Wrapper mehr als die 640px, die fuer ein
   einspaltiges Formular richtig sind. Ohne diese Regel passen Formular und
   Box nicht nebeneinander, Flexbox bricht um, und die Box landet unten --
   genau der Fehler aus 0.16.0.

   min() statt eines festen Werts: auf einer Seite mit schmalem Inhalts-
   bereich (Sidebar!) gilt die Breite des Bereichs, nicht die Wunschbreite.

   72rem statt vormals 58rem seit 0.93.0: eine dritte Spalte (die
   Sprungleiste links, siehe .acg-layout-leiste) braucht zusaetzlichen
   Platz, sonst bricht sie als Erste um. */
.acg-generator-breit { max-width: min(100%, 72rem); }

.acg-layout {
	display: flex;
	align-items: flex-start;
	/* NICHT wrap. Bricht Flexbox um, landet die Seitenspalte UNTER dem
	   Formular -- und das laesst sich hier nicht per Media Query auffangen,
	   weil die misst, wie breit das FENSTER ist, nicht wie breit der
	   Inhaltsbereich ist. Auf einer Seite mit Sidebar ist das Fenster breit
	   und der Kasten trotzdem schmal; die Query greift nicht, das Layout
	   bricht um, und niemand sieht warum. Genau so ist 0.16.0 gelandet.

	   Mit nowrap bleiben beide Spalten nebeneinander und werden notfalls
	   schmaler. Fuer wirklich schmale Schirme schaltet die Query unten auf
	   Spaltenrichtung -- dort ist das Fenster die richtige Bezugsgroesse. */
	flex-wrap: nowrap;
	gap: 2rem;
}
/* min-width: 0 verhindert, dass eine lange Zeile (Dossiername ohne
   Leerzeichen) die Spalte ueber die Zeilenbreite hinausdrueckt.

   Die flex-basis ist bewusst knapp (20rem statt 26rem): Sie ist die
   Schwelle, ab der Flexbox umbricht. Zu grosszuegig gewaehlt, bricht das
   Layout schon in einem maessig schmalen Inhaltsbereich um -- und dann
   steht die Box wieder unten, ohne dass irgendetwas meldet, warum. */
.acg-layout-haupt { flex: 1 1 20rem; min-width: 0; }
/* DIE SEITENSPALTE IST WEG (0.111.0). Sie trug zuletzt nur noch die
   Live-Zusammenfassung; die steht jetzt im Abschluss-Schritt, wo man sie
   beim Pruefen auch ansieht. Ihre 13rem gehen an das Formular: Bei 1280px
   Fensterbreite hatte es 402px, jetzt rund 610px.

   Die Regeln stehen nicht als leere Huelle weiter da -- ein Selektor auf
   ein Element, das der Shortcode nicht mehr ausgibt, ist eine Falle fuer
   den naechsten Leser, der ihn fuer benutzt haelt. */

/* ---------------------------------------------------------------------
   Dritte Spalte: die Sprungleiste (seit 0.93.0, Konfigurator-Umbau).

   Eigene Spalte LINKS vom Formular, nicht Teil von .acg-layout-seite --
   fuer eine Navigation entspricht die Lesereihenfolge sinnvoll der
   optischen (siehe class-acg-shortcode.php), anders als bei der
   Seitenbox rechts, deren Begruendung fuer "nach dem Formular im
   Quelltext" hier ausdruecklich NICHT gilt.

   Schmaler als .acg-layout-seite (12rem statt 17rem): sie traegt nur
   kurze Abschnittstitel, keine mehrzeiligen Bloecke. Dieselbe
   sticky-Bauform wie die Seitenbox, aus demselben Grund (align-items:
   flex-start am Elternelement macht es erst wirksam). */
.acg-layout-leiste {
	flex: 0 1 12rem;
	min-width: 0;
	position: sticky;
	top: 2rem;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
}

/* Bereits erschaffene Orden und Regimenter (seit 0.15.0).
   Container aus Bloecken -- weitere Angaben kommen als zusaetzlicher
   .acg-seitenbox-block dazu, ohne Aenderung an den bestehenden. */
.acg-seitenbox {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--border, rgba(255,255,255,.15));
	border-radius: 4px;
	/* Die Kartenfläche des Themes (seit 0.175.1). Von 0.174.1 an war es eine
	   Tönung in der Schriftfarbe, color-mix(… --text-body 15%, transparent)
	   -- auf hellem Grund ein Grau, auf dunklem eine Aufhellung. Nur: Gegen
	   diese Mischfläche ist kein Farbpaar geprüft, und sie hob den Grund so
	   weit an, dass schon --text-muted darauf in Space Wolves Dunkel nur noch
	   4,1:1 erreichte (gerechnet auf der am 18.09.2026 live gemessenen
	   Fläche #313845). --bg-card ist gegen
	   Schrift, gedämpfte Schrift, Akzent und Gold geprüft
	   (tests/test-kontraste.php); der Rahmen trennt die Box vom Grund. */
	background: var(--acg-panel);
}
.acg-seitenbox-block + .acg-seitenbox-block {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border, rgba(255,255,255,.15));
}
.acg-erschaffene-titel { margin: 0 0 .5rem; font-family: var(--acg-font-head); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
/* Farbe mit eigenem Gewicht (seit 0.175.1): Sonst gewinnt die Regel des
   Themes `.entry-content h3 { color: var(--accent-hi) }` -- und --accent-hi
   ist nur für große Schrift geprüft. Diese Überschrift ist 1rem groß; auf
   der getönten Box von 0.174.1 lag sie bei 4,2-4,4:1. --accent ist gegen
   die Kartenfläche geprüft. */
.acg-erschaffene-box .acg-erschaffene-titel { color: var(--acg-accent); }
/* Einspaltig: in einer 19rem-Spalte waeren zwei Textspalten je gut zwei
   Woerter breit. Die zweispaltige Fassung galt fuer die volle Breite. */
.acg-erschaffene-liste { margin: 0; padding: 0; list-style: none; }
/* ZWEI ZEILEN JE EINTRAG (seit 0.85.0): Gattung oben, Name darunter.

   Vorher standen beide nebeneinander (display:flex, gap, baseline). Das ging
   in einer 17rem-Spalte nicht auf: Das Kuerzel nimmt ein Drittel der Breite,
   und mit acht Gattungen ist die laengste ("Mechanicum-Legion") so lang wie
   die Spalte. Uebrig blieb ein Name, der nach zwei Woertern umbrach und dabei
   UNTER dem Kuerzel weiterlief statt darunter zu stehen.

   Das li bleibt ein schlichter Block -- den Aufbau macht .acg-erschaffen-eintrag,
   weil er im verlinkten Fall ein <a> ist und sonst ein <span>. */
.acg-erschaffene-liste li { margin: 0 0 .6rem; }
.acg-erschaffen-eintrag {
	display: flex;
	flex-direction: column;
	/* flex-start, nicht stretch: sonst zoege der Rahmen des Kuerzels ueber
	   die ganze Spaltenbreite, statt nur um das Wort zu liegen. */
	align-items: flex-start;
	gap: .15rem;
}
/* Leiser gemacht wird mit der nächsten Token-Stufe, nicht mit opacity (seit
   0.175.1): Die Deckkraft rechnet vom geprüften Paar herunter, und
   „… und 121 weitere" lag damit bei 3,6-4,3:1. Dasselbe gilt für die
   Beschriftung des Zählers, die Summe und die Gattungskürzel darunter. */
.acg-erschaffene-weitere { margin: .5rem 0 0; font-size: .85rem; color: var(--acg-muted); font-style: italic; }

/* Die Kopfzeile traegt die Gattung und -- wenn es das Dossier oeffentlich
   gibt -- den Hinweis auf die Galerie. flex-wrap, damit beide Etiketten bei
   sehr schmaler Spalte untereinander rutschen statt hinauszuragen. */
.acg-erschaffen-kopf { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

/* Die Kennzeichnung ist ein lesbares Kuerzel, kein blosses Symbol -- wer
   die Seite ohne Stylesheet sieht, soll die beiden Sorten trotzdem
   auseinanderhalten koennen. */
.acg-erschaffen-typ {
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .1rem .4rem;
	border: 1px solid currentColor;
	border-radius: 2px;
}
.acg-erschaffen-chapter .acg-erschaffen-typ { color: var(--accent, #b33); }
.acg-erschaffen-regiment .acg-erschaffen-typ { color: var(--gold, #b9975b); }
/* Ein Name ohne Leerzeichen darf die Spalte nicht aufdruecken -- min-width:0
   am Layout faengt das nur ab, wenn der Text auch irgendwo brechen DARF. */
.acg-erschaffen-name { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   Der Verweis in die Galerie (seit 0.65.0, sichtbar seit 0.85.0)
   ---------------------------------------------------------------------
   Bis 0.84.0 war der Link an nichts zu erkennen: Er trug die Farbe des
   Themes und stand zwischen zehn gleich aussehenden Zeilen, von denen die
   meisten kein Link sind. Ein Verweis, den niemand als solchen sieht, ist
   keiner.

   Deshalb ZWEI Zeichen -- das Wort "Galerie" in der Kopfzeile und der
   unterstrichene Name. Farbe allein genuegt nicht; sie ist fuer einen Teil
   der Besucher kein Unterschied.

   Das Etikett traegt bewusst KEINEN gefuellten Hintergrund: Die Textfarbe
   darauf muesste zum Untergrund passen, und der wechselt mit acht
   Farbschemata. Ein Rahmen in Gold -- dieselbe Bauform wie das Kuerzel
   daneben -- kann in keinem davon unlesbar werden. */
.acg-erschaffen-galerie {
	font-size: .65rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .1rem .35rem;
	border: 1px solid currentColor;
	border-radius: 2px;
	color: var(--acg-gold, #a8842c);
}
a.acg-erschaffen-eintrag { color: inherit; text-decoration: none; }
a.acg-erschaffen-eintrag .acg-erschaffen-name {
	text-decoration: underline;
	text-underline-offset: .15em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--acg-gold, #a8842c);
}
a.acg-erschaffen-eintrag:hover .acg-erschaffen-name,
a.acg-erschaffen-eintrag:focus-visible .acg-erschaffen-name { color: var(--acg-gold, #a8842c); }
/* Der Zaehler als erster Block der Box (seit 0.17.0). */
.acg-seitenbox-zaehler { text-align: center; }
.acg-seitenbox-zaehler .acg-counter-number {
	display: block;
	font-size: 2rem;
	line-height: 1.1;
	color: var(--acg-gold, #a8842c);
}
.acg-seitenbox-zaehler .acg-counter-label {
	display: block;
	margin-top: .2rem;
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--acg-muted);
}

.acg-erschaffene-summe { margin: .75rem 0 0; font-size: .9rem; color: var(--acg-muted); }

/* Schmaler Schirm: nebeneinander ist hier kein Gewinn, und eine klebende
   Spalte kostet auf einem Telefon nur Platz.

   1100px statt vormals 780px seit 0.108.0, und das ist der wichtigste
   Wert in dieser Datei. Der alte Umbruchpunkt maass das Richtige an der
   falschen Stelle: Der Kommentar an .acg-layout sagt seit 0.16.0, dass
   eine Media Query das FENSTER misst und nicht den Inhaltsbereich -- er
   zieht daraus nur die halbe Folgerung. Denn genau dazwischen liegt die
   Luecke, die am 24.08.2026 vermessen wurde:

     Fenster   Spalte des Formulars
     375       236px   (einspaltig, in Ordnung)
     820       143px   <-- iPad Air hochkant, geteilte Fenster
     1000      216px
     1280      338px

   Bei 820px zeigt das Theme seine Navigationsspalte noch, .site-content
   ist dann 560px breit -- und dieses Modul teilt den Rest auch noch
   durch drei. 143px ist keine Spalte mehr, in der ein Auswahlfeld einen
   Optionstext zeigen kann (gemessen: 109px). Das schlechteste Geraet war
   damit nicht das Telefon, sondern das Tablet im Hochformat.

   1100px ist die Breite, ab der das Theme genug Inhaltsbereich uebrig
   laesst, damit drei Spalten ueberhaupt tragen. Darunter gilt einspaltig
   -- lieber ein Layout, das ein Tablet wie ein grosses Telefon behandelt,
   als drei Spalten, die keine ist.

   Der Wert steht ein zweites Mal in acg-konfigurator.js (matchMedia fuer
   die Zusammenfassung) und ein drittes Mal weiter unten bei der
   Sprungleiste. Alle drei muessen gemeinsam wandern; zwei verschiedene
   Umbruchpunkte fuer zusammengehoerige Spalten ergaeben eine schmale
   Zwischenbreite, in der eine Spalte schon umgebrochen waere und die
   andere noch nicht. */
@media (max-width: 1100px) {
	/* flex bleibt -- nur als Spalte, damit der gap-Wert und die
	   Ausrichtung dieselbe Mechanik behalten. */
	.acg-layout { flex-direction: column; gap: 0; }
	/* Die Seitenspalte gibt es seit 0.111.0 nicht mehr, und mit ihr ist
	   ihre Sonderbehandlung hier entfallen -- samt dem order:-1, das bis
	   0.107.0 die Galerie vor das Formular zog (1084px Randnotiz, bevor
	   die erste Frage kam). */
	/* Die Leiste bleibt ZUERST im Quelltext (order nicht gesetzt) --
	   anders als die Seitenbox ist sie Navigation, keine Randnotiz; wer
	   mit Tastatur oder Screenreader ankommt, darf sie zuerst sehen. */
	/* flex: 0 0 auto aus demselben Grund wie bei der Seitenspalte
	   darueber (0.108.2) -- und hier steckte der Fehler schon seit
	   0.93.0: Die 12rem der Leiste wurden im Spaltenmodus zu 192px
	   Hoehe, waehrend die Nummernreihe nur 77px braucht. 115px
	   Leerraum zwischen Sprungleiste und erstem Feld, auf jedem
	   schmalen Schirm.

	   Aufgefallen ist es erst, als 0.108.0 die Galerie darunter
	   wegnahm: Vorher fuellte sie den Raum optisch, und ein zu grosser
	   Abstand sah aus wie ein gewollter Abstand. */
	.acg-layout-leiste {
		position: static;
		flex: 0 0 auto;
		max-height: none;
		overflow: visible;
		margin: 0 0 1.25rem;
	}
}

/* ── Weiter und Zurueck (seit 0.111.0, A3) ──────────────────────────
   Nur in der Schrittfolge sichtbar, also unterhalb des Umbruchpunkts;
   acg-konfigurator.js setzt das hidden-Attribut. Am Rechner stehen alle
   Abschnitte offen, und ein "Weiter" zum naechsten Block waere dort ein
   Knopf, der scrollt.

   44px Mindesthoehe wie alle Bedienelemente dieses Moduls seit 0.110.0. */
.acg-schrittzeile {
	display: flex;
	gap: .75rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--acg-border);
}
.acg-schrittzeile[hidden] { display: none; }

.acg-schrittzeile button {
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 3px);
	background: none;
	color: inherit;
	font-family: var(--acg-font-body);
	cursor: pointer;
}
.acg-schrittzeile button[hidden] { display: none; }
.acg-schrittzeile button:hover { border-color: var(--acg-gold); color: var(--acg-gold); }
.acg-schrittzeile button:focus-visible { outline: 2px solid var(--acg-accent); outline-offset: 2px; }

/* "Weiter" ist der Weg vorwaerts und steht rechts, "Zurueck" bleibt
   links. margin-left:auto statt einer festen Reihenfolge, damit die
   Zeile auch dann stimmt, wenn "Zurueck" im ersten Abschnitt fehlt. */
.acg-schritt-weiter {
	margin-left: auto;
	border-color: var(--acg-gold);
	color: var(--acg-gold);
}

/* ── Der Abschluss-Schritt (seit 0.111.0, A4) ───────────────────────
   Er ist ein Abschnitt wie die Fragenbloecke und braucht deshalb kaum
   eigene Regeln. Die Zusammenfassung darin bekommt Abstand nach unten,
   damit sie sich von den Lieferangaben absetzt: Sie ist ein Rueckblick,
   der Rest ist eine Eingabe. */
.acg-abschnitt-abschluss > .acg-zusammenfassung {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--acg-border);
}

/* ── Die Galerie unter dem Formular (seit 0.108.0) ──────────────────
   Bis 0.107.0 stand sie als dritte Spalte neben dem Formular und auf
   schmalem Schirm per order:-1 sogar davor. Beides ist weggefallen --
   die Begruendung steht in class-acg-shortcode.php an der Seitenspalte.

   Was hier bleibt, ist die Folge daraus: In voller Breite darf die Liste
   nicht mehr einspaltig laufen. Auf dem Telefon war sie 1084px hoch; als
   eine Spalte unter dem Formular waere sie genauso lang und der Besucher
   haette am Ende wieder eine Bildschirmhoehe Randnotiz vor sich.

   auto-fill mit minmax statt einer Media Query: Das Raster misst den
   Platz, den es WIRKLICH hat -- und damit genau die Groesse, an der eine
   Media Query hier vorbeimisst (siehe .acg-layout). Bei 14rem je Spalte
   werden aus zehn Namen auf einem breiten Schirm zwei Zeilen, auf einem
   Telefon bleibt es eine Spalte, ohne dass eine Zahl das entscheidet. */
.acg-erschaffene-unten {
	margin-top: 2.5rem;
}

.acg-erschaffene-unten .acg-erschaffene-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: .25rem 1.5rem;
}

/* Der Abstand kommt jetzt aus dem gap -- ein zusaetzlicher
   Aussenabstand am li ergaebe im Raster doppelte Luecken. */
.acg-erschaffene-unten .acg-erschaffene-liste li { margin-bottom: 0; }

/* ── Zugangsschranke (seit 0.24.0) ──────────────────────────────────
   Deckungsgleich mit .aow-ng-codegate im Namensgenerator: dieselbe
   Sache soll an beiden Stellen gleich aussehen. Ankuendigung einer
   Bedingung, keine Fehlermeldung -- deshalb Gold statt Warnfarbe. */
.acg-codegate {
    border: 1px solid var(--gold, #C8960C);
    border-left-width: 4px;
    border-radius: 4px;
    background: var(--bg-card, rgba(200, 150, 12, 0.06));
    padding: 14px 16px;
}

.acg-codegate-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold, #C8960C);
    margin-bottom: 6px;
}

.acg-codegate-icon {
    font-size: 1.1em;
    line-height: 1;
}

#acg-access-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    max-width: 14em;
}

/* Ohne opacity seit 0.175.1: Die Farbe kommt aus der Platzhalter-Regel des
   Themes (--text-dim, geprüft); 45 % davon wären rund 2:1. */
#acg-access-code::placeholder {
    letter-spacing: 0.12em;
    text-transform: none;
}

/* --------------------------------------------------------------------
 * Die Namen in der Seitenbox haben ihre EIGENE Sprachachse (seit 0.63.0)
 *
 * Nicht `data-lang`: Daran haengen die Beschriftungen, und die folgen der
 * SEITENsprache. Der Ordensname soll aber auch dann englisch werden, wenn
 * der Besucher nur ein englisches DOSSIER bestellt und die Seite deutsch
 * bleibt.
 *
 * Beide Achsen zusammenzulegen waere bequem und falsch: Dann kippte das
 * ganze Formular auf Englisch, sobald jemand ein englisches Dossier will
 * -- und genau diese Trennung war in 0.30.0 ein behobener Fehler.
 * ----------------------------------------------------------------- */
.acg-erschaffene-box[data-acg-namen="de"] [data-namen="en"],
.acg-erschaffene-box[data-acg-namen="en"] [data-namen="de"] { display: none; }

.acg-erschaffene-box[data-acg-namen="de"] [data-namen="de"],
.acg-erschaffene-box[data-acg-namen="en"] [data-namen="en"] { display: inline; }

/* Sprache im Bild -- gleiche Bauform wie der Bildumfang darueber. */
.acg-bilder-sprache {
	margin: 0 0 0.6rem;
	padding: 0;
	border: 0;
}

.acg-bilder-sprache legend {
	padding: 0;
	margin-bottom: 0.35rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	font-family: var(--acg-font-body);
}

.acg-form .acg-bilder-sprache .acg-radio {
	font-weight: 400;
	line-height: 1.45;
	margin-bottom: 0.4rem;
}

.acg-form .acg-bilder-sprache .acg-radio input {
	margin-right: 0.4rem;
}

/* --------------------------------------------------------------------
 * Die oeffentliche Galerie (seit 0.65.0)
 *
 * Eigene Klassen statt der Formularklassen: Die Galerie steht auf einer
 * ANDEREN Seite als der Generator, und `.acg-generator` bringt dort seine
 * 640-Pixel-Grenze und seinen Kastenrahmen mit.
 * ----------------------------------------------------------------- */
.acg-galerie {
	font-family: var(--font-body, 'Inter', -apple-system, sans-serif);
	color: var(--text-body, inherit);
}

/* Die Filterleiste: alle / Orden / Regimenter (seit 0.69.0).
   Bewusst dieselbe Bauform wie die Standleiste der Warteschlange im
   Backend -- Punkte nebeneinander, Zahl in Klammern, der aktive ohne
   Verweis. Wer beide Oberflaechen bedient, muss nichts Neues lernen. */
.acg-galerie-filter {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	font-size: .9rem;
}

.acg-galerie-filter-punkt a {
	color: inherit;
}

.acg-galerie-filter-aktiv {
	font-weight: 600;
}

.acg-galerie-filter-zahl {
	color: var(--text-muted, #777);
}

/* Der Bild-Schalter (seit 0.120.0) trug hier bis 0.199.7 eigene Masse --
   `margin: 0 0 1.25rem` und `font-size: .85rem`. Sie stammten aus der Zeit,
   als er allein in einer eigenen Zeile unter der Filterleiste stand:
   "bewusst kleiner und gedaempfter als diese".

   SEIT 0.199.8 STEHT ER NEBEN DEM SPRACHSCHALTER, und genau diese
   Sonderwerte zogen die beiden auseinander: Der eine Absatz rechnete mit
   0.85rem, der andere mit 1rem, und die Schalter sassen sechs Pixel
   versetzt (gemessen am 22.09.2026: 545 gegen 551). Den Abstand nach unten
   setzt ohnehin `.acg-galerie-schalter` fuer die ganze Zeile.

   Beide Zeilen tragen jetzt dieselbe Regel -- `.acg-galerie-schalterzeile`
   mit `margin: 0`. Wer hier wieder eine Sonderregel einfuehrt, schiebt sie
   erneut gegeneinander. */



.acg-galerie-raster {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.25rem;
}

.acg-galerie-kachel a {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* ------------------------------------------------------------------------
 * EINE EINHEITLICHE BILDFLAECHE (seit 0.199.8)
 * ------------------------------------------------------------------------
 * Bis 0.199.7 stand hier `height: auto`, und damit brachte jedes Bild sein
 * eigenes Seitenverhaeltnis ins Raster mit. Gemessen am 22.09.2026 an den
 * 75 bebilderten Kacheln:
 *
 *     45x  800 × 1200   (hochkant, 0.67)
 *     29x 1200 × 800    (quer,     1.50)
 *      1x 1200 × 1200   (quadratisch)
 *
 * In einer 212 Pixel breiten Spalte wurde daraus 212 × 317 gegen 212 × 142
 * -- mehr als das Doppelte. Die Kacheln standen in fuenf verschiedenen
 * Hoehen (62, 204, 205, 274, 379), und das Raster wirkte zerrissen.
 *
 * WARUM 1:1. Beim Zuschnitt auf ein Quadrat verliert das Hochformat ein
 * Drittel seiner Hoehe und das Querformat ein Drittel seiner Breite --
 * derselbe Anteil fuer beide. Ein Format dazwischen (4:5 etwa) schont die
 * Mehrheit der Hochformate, nimmt den Querformaten aber fast die Haelfte.
 * Das Quadrat haelt den groessten Einzelverlust klein, und das ist bei
 * Bildern, die niemand nachgeschnitten hat, die sicherere Wahl.
 *
 * `cover` statt `contain`: Eine Flaeche mit Balken links und rechts sieht
 * aus wie ein Fehler, ein Ausschnitt nicht. Wer das ganze Bild sehen will,
 * klickt die Kachel an -- dort steht es ungeschnitten.
 * --------------------------------------------------------------------- */
.acg-galerie-bild {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--border, #ddd);
	border-radius: var(--radius-sm, 4px);
}

/* Kacheln ohne Bild halten dieselbe Flaeche frei (54 von 129 am
   22.09.2026). Ohne sie sass zwischen zwei bebilderten Kacheln eine, die
   nur aus zwei Textzeilen bestand -- das Raster sah kaputt aus, nicht
   duenn besetzt. Die Flaeche ist bewusst leer und nicht mit einem Symbol
   gefuellt: Sie soll zurueckstehen, nicht etwas versprechen. */
.acg-galerie-kein-bild {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-card, #1a1613);
	border-style: dashed;
	border-color: var(--border, #4a3a2c);
	/* Das Siegel erbt diese Farbe ueber currentColor -- so folgt es den drei
	   Erscheinungsbildern (Hell, Mittel, Dunkel), ohne dass hier eine Farbe
	   festgeschrieben waere.

	   DASSELBE TOKEN WIE DER RAHMEN, und das ist gemessen: Zuerst stand hier
	   --border-hi. Im Vorschaubild (Schema Dunkel) war das ein gedaempftes
	   Braun -- am laufenden System, unter "Salamanders Red", ein kraeftiges
	   #b14646. Vierzehn Ambosse leuchteten zwischen den echten Bildern, statt
	   zurueckzustehen. Am 22.09.2026 sind vier Faerbungen an der laufenden
	   Seite nebeneinandergelegt worden; --border traegt in jedem Schema
	   genau so weit wie der gestrichelte Rand, der das Siegel umgibt.

	   Die Lehre steckt in der Sache: Ein Farbtoken heisst in jedem Schema
	   gleich und sieht in jedem anders aus. Eine Vorschau im Standardschema
	   beweist nichts ueber die anderen. */
	color: var(--border, #4a3a2c);
}

/* 42 Prozent der Kachelbreite. Die Zahl ist nicht geraten: Am 22.09.2026
   sind 34, 42 und 50 Prozent in echter Kachelgroesse nebeneinander
   gerendert worden. Bei 34 wirkt das Siegel verloren, bei 50 draengt es
   sich neben den echten Bildern vor -- sie sind die Hauptsache, das Siegel
   haelt nur den Platz. */
.acg-galerie-kein-bild svg {
	display: block;
	width: 42%;
	height: auto;
	max-width: 6rem;
}

.acg-galerie-name {
	display: block;
	margin-top: .5rem;
	font-family: var(--font-heading, 'Oswald', 'Arial Narrow', sans-serif);
	letter-spacing: .02em;
}

.acg-galerie-typ {
	display: block;
	font-size: .8rem;
	color: var(--text-muted, #777);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Die Blaetter der Einzelansicht: eines je Zeile, in voller Breite --
   ein Dossierblatt lebt davon, dass man den Text darauf lesen kann. */
.acg-galerie-blaetter {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}

.acg-galerie-blaetter img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--border, #ddd);
}

/* Breite Tabellen scrollen IN ihrem Kasten, nie die Seite. */
.acg-galerie-tabelle {
	overflow-x: auto;
	margin-bottom: 1.5rem;
}

/* =======================================================================
 * DAS SEITENBILD DER KERNDATEN (0.196.0, B34 Schritt 5)
 * -----------------------------------------------------------------------
 * PDF und Word setzen die Kerndaten seit Core 1.61.0 mit Zebrastreifen und
 * gedaempfter Schluesselspalte. Die Seite zeigte bis hierher jede Tabelle
 * gleich -- und die Kerndaten sind die eine, die man ueberfliegt statt
 * liest. Ein Streifen je zweiter Zeile ist dafuer da, dass das Auge in der
 * richtigen Zeile bleibt.
 *
 * DIE FARBEN KOMMEN AUS DEN SCHEMA-TOKENS, nicht aus festen Werten: Die
 * Seite hat acht Schemata und drei Helligkeiten. --bg-card ist in jeder
 * Kombination die Flaeche, die sich vom Grund gerade so abhebt -- gemessen
 * am 21.09.2026 in Salamanders-Rot/Dunkel: #241313 auf #1a0a0a.
 *
 * -----------------------------------------------------------------------
 * UND ZWAR DIE TOKENS DES THEMES, NICHT DIE --acg-*
 * -----------------------------------------------------------------------
 * Die --acg-* sind oben auf `.acg-generator` definiert, also auf dem
 * FORMULARKASTEN. Die Galerie ist ein anderer Container und erbt sie nicht:
 * `var(--acg-panel)` loest dort ins Leere auf, die Deklaration faellt weg,
 * und der Zebrastreifen bleibt unsichtbar -- ohne Fehler, ohne Warnung.
 * Genau so ist 0.196.0 ausgeliefert worden; gefunden an der Installation,
 * nicht im Test.
 *
 * Die uebrigen 18 Galerie-Regeln machen es laengst richtig
 * (`var(--gold, …)`, `var(--text-muted, …)`, `var(--border, …)`) -- diese
 * drei waren die Ausreisser. Die Rueckfallwerte sind dieselben, die
 * `.acg-generator` fuer seine Tokens einsetzt.
 * ===================================================================== */

.acg-galerie-tabelle--kerndaten tbody tr:nth-child(even) {
	background: var(--bg-card, #1d1815);
}

/* Der Schluessel ist die Beschriftung, nicht die Aussage -- wie im PDF,
   wo Spalte 0 in Grau steht und Spalte 1 in der Textfarbe.
   35 % ist dieselbe Aufteilung wie dort (Anvil_Pdf_Writer::add_table). */
.acg-galerie-tabelle--kerndaten td:first-child {
	color: var(--text-muted, #a89f92);
	width: 35%;
}

.acg-galerie-tabelle--kerndaten td:nth-child(2) {
	color: var(--text-body, #e8e1d6);
}

/* =======================================================================
 * DER SPRACHHINWEIS (0.199.0)
 * -----------------------------------------------------------------------
 * Er steht ÜBER der Filterleiste, weil er die Menge erklärt, die darunter
 * gezählt wird. Gedämpft, aber nicht versteckt: Für einen englischen
 * Besucher, der sonst eine Galerie mit einer Kachel sähe, ist er die
 * Auskunft, dass die Seite funktioniert.
 * ===================================================================== */

.acg-galerie-sprache {
	margin: 0 0 1rem;
	padding: .55rem .8rem;
	border-left: 2px solid var(--gold, #a8842c);
	background: var(--bg-card, #1d1815);
	font-size: .85rem;
	color: var(--text-muted, #a89f92);
}

/* =======================================================================
 * DIE SCHIEBESCHALTER (0.199.0)
 * -----------------------------------------------------------------------
 * Sie sehen aus wie Schalter und SIND Links. Das ist kein Kompromiss,
 * sondern die Bedingung: Die Galerie bleibt ohne JavaScript vollständig
 * benutzbar, ein Schieber lässt sich in einem neuen Tab öffnen, und ein
 * Textbrowser liest ihn als das, was er ist.
 *
 * Der Zustand steckt in .acg-schalter-an (vom PHP gesetzt) und in
 * aria-pressed — nicht in :checked, das es hier nicht gibt.
 * ===================================================================== */

/* Beide Schalter in einer Zeile, umbrechend statt überstehend. */
.acg-galerie-schalter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 2rem;
	margin: 0 0 1.25rem;
}

.acg-galerie-schalterzeile {
	margin: 0;
}

/* Der Wahlschalter trägt links und rechts eine Beschriftung; die aktive
   Seite ist hervorgehoben, die andere gedämpft. Ohne das zeigte er zwei
   gleichrangige Wörter und einen Schieber dazwischen — und der Leser
   müsste raten, welche Seite gerade gilt. */
.acg-schalter-wahl .acg-schalter-links { color: var(--text-body, #e8e1d6); }
.acg-schalter-wahl .acg-schalter-rechts { color: var(--text-muted, #a89f92); }
.acg-schalter-wahl.acg-schalter-an .acg-schalter-links { color: var(--text-muted, #a89f92); }
.acg-schalter-wahl.acg-schalter-an .acg-schalter-rechts { color: var(--text-body, #e8e1d6); }

/* Beim Wahlschalter bleibt das Gleis in der Mitte gedämpft — es zeigt eine
   Richtung, keinen Ein-Zustand. */
.acg-schalter-wahl .acg-schalter-gleis,
.acg-schalter-wahl.acg-schalter-an .acg-schalter-gleis {
	background: var(--bg-body, #14110f);
	border-color: var(--border-hi, #6a5540);
}

.acg-schalter-wahl .acg-schalter-knopf,
.acg-schalter-wahl.acg-schalter-an .acg-schalter-knopf {
	background: var(--gold, #a8842c);
}

.acg-schalter {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	text-decoration: none;
	color: var(--text-muted, #a89f92);
	font-size: .85rem;
	line-height: 1.3;
}

.acg-schalter:hover,
.acg-schalter:focus-visible {
	color: var(--text-body, #e8e1d6);
}

/* Das Gleis: fester Platz, damit der Text beim Umschalten nicht springt. */
.acg-schalter-gleis {
	position: relative;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 1.25rem;
	border: 1px solid var(--border, #4a3a2c);
	border-radius: 1rem;
	background: var(--bg-body, #14110f);
	transition: background-color .15s ease, border-color .15s ease;
}

.acg-schalter-knopf {
	position: absolute;
	top: 50%;
	left: .15rem;
	width: .85rem;
	height: .85rem;
	margin-top: -.425rem;
	border-radius: 50%;
	background: var(--text-muted, #a89f92);
	transition: left .15s ease, background-color .15s ease;
}

.acg-schalter-an .acg-schalter-gleis {
	background: var(--gold, #a8842c);
	border-color: var(--gold, #a8842c);
}

.acg-schalter-an .acg-schalter-knopf {
	left: 1.15rem;
	background: var(--bg-body, #14110f);
}

.acg-schalter-an .acg-schalter-text {
	color: var(--text-body, #e8e1d6);
}

/* Tastatur: der Fokus gehört auf den ganzen Schalter, nicht aufs Gleis. */
.acg-schalter:focus-visible {
	outline: 2px solid var(--gold, #a8842c);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.acg-schalter-gleis,
	.acg-schalter-knopf {
		transition: none;
	}
}

.acg-galerie-hinweis {
	margin-top: 1.5rem;
	font-size: .8rem;
	color: var(--text-muted, #777);
}

.acg-galerie-blaettern .acg-galerie-seite {
	display: inline-block;
	padding: .2rem .55rem;
	margin-right: .25rem;
}

.acg-galerie-seite-aktiv {
	font-weight: 700;
	color: var(--gold, #a8842c);
}

/* =======================================================================
 * KONFIGURATOR-UMBAU (0.93.0) -- Abschnitte, Sprungleiste, Kombinationsfeld,
 * Zusammenfassung, Wuerfeln, Entwurf. Siehe class-acg-shortcode.php und
 * assets/js/acg-konfigurator.js.
 * ===================================================================== */

/* -- Abschnitte (<details class="acg-abschnitt">) --------------------- */

.acg-abschnitt {
	margin-bottom: 1rem;
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 4px);
	background: var(--acg-bg);
}

.acg-abschnitt-kopf {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1rem;
	cursor: pointer;
	/* Der native Aufklapp-Pfeil bleibt -- ein eigenes Symbol brauchte
	   eigene Tastatur-/Screenreader-Semantik, die <summary> schon mitbringt. */
}

.acg-abschnitt-nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--acg-border);
	color: var(--acg-text);
	font-family: var(--acg-font-head);
	font-size: 0.8rem;
	font-weight: 700;
}

.acg-abschnitt-titel {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--acg-font-head);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.95rem;
}

.acg-abschnitt-zaehler {
	flex: 0 0 auto;
	font-family: var(--acg-font-body);
	font-size: 0.8rem;
	color: var(--acg-muted);
}
/* Leer, solange acg-konfigurator.js noch nicht gelaufen ist (oder fehlt) --
   dann auch keinen Freiraum dafuer reservieren. */
.acg-abschnitt-zaehler:empty { display: none; }

.acg-abschnitt-fuehrungssatz {
	margin: 0;
	padding: 0 1rem 0.75rem;
	font-size: 0.85rem;
	color: var(--acg-muted);
}

.acg-abschnitt .acg-field {
	padding: 0 1rem;
}
.acg-abschnitt .acg-field:last-child {
	padding-bottom: 1rem;
}

/* -- Wuerfeln-Knoepfe (seit 0.93.0, A7) --------------------------------
   Von acg-konfigurator.js in die Kopfzeile bzw. vor die Sprungleiste
   eingefuegt -- ohne Skript existieren sie nicht, das Formular bleibt
   ohne sie vollstaendig bedienbar. */
/* min-height 44px seit 0.110.0: vormals 28px hoch -- unter der Grenze,
   ab der ein Ziel mit dem Finger sicher zu treffen ist (WCAG 2.5.5). */
.acg-wuerfeln-knopf {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0.25rem 0.75rem;
	background: none;
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 3px);
	color: var(--acg-muted);
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1;
}

.acg-wuerfeln-knopf:hover,
.acg-wuerfeln-knopf:focus-visible {
	border-color: var(--acg-gold);
	color: var(--acg-gold);
	outline: none;
}

.acg-wuerfeln-knopf-alle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	margin-bottom: 0.6rem;
	padding: 0.4rem;
	font-family: var(--acg-font-body);
	font-size: 0.8rem;
}

/* -- Preset-Auswahl (seit 0.95.0, Konfigurator-Umbau Teil C) -----------
   Von acg-konfigurator.js NEBEN den Wuerfeln-Knopf in dieselbe Kopfzeile
   eingefuegt -- bewusste Wahl statt zufaelligem Fuellen. Ohne Skript
   existiert sie nicht, genau wie beim Wuerfeln; ohne passendes Preset fuer
   den aktuellen Pfad bleibt sie ausgeblendet ([hidden], vom Skript gesetzt). */
.acg-preset-auswahl {
	flex: 0 1 auto;
	max-width: 40%;
	padding: 0.2rem 0.4rem;
	background: var(--acg-bg);
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 3px);
	color: var(--acg-text);
	font-family: var(--acg-font-body);
	font-size: 0.8rem;
}

.acg-preset-auswahl:hover,
.acg-preset-auswahl:focus-visible {
	border-color: var(--acg-gold);
	outline: none;
}

.acg-preset-auswahl[hidden] {
	display: none;
}

/* -- Sprungleiste (eigene Spalte links, .acg-layout-leiste) ------------ */

.acg-sprungleiste {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.acg-sprungleiste-eintrag {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm, 3px);
	color: var(--acg-muted);
	text-decoration: none;
	font-family: var(--acg-font-body);
	font-size: 0.85rem;
}

.acg-sprungleiste-eintrag:hover,
.acg-sprungleiste-eintrag:focus-visible {
	color: var(--acg-text);
	background: var(--acg-panel);
	outline: none;
}

/* Die Scheibe traegt seit 0.175.1 die Kartenflaeche und einen Ring statt
   der Rahmenfarbe als Fuellung: Die Ziffer (--text-muted) war gegen
   --border nie geprueft und lag in Space Wolves bei 3,7-4,3:1. Gegen
   --bg-card ist sie es; der Ring haelt die Scheibe auch auf der
   gleichfarbigen Hover-Flaeche des Eintrags sichtbar. */
.acg-sprungleiste-nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3rem;
	height: 1.3rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--acg-panel);
	box-shadow: inset 0 0 0 1px var(--acg-border-hi);
	font-family: var(--acg-font-head);
	font-size: 0.7rem;
	font-weight: 700;
}

.acg-sprungleiste-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "fertig" (alle sichtbaren Pflichtfelder beantwortet) faerbt die Nummer,
   "aktiv" (Abschnitt gerade offen) den Rahmen -- beide koennen gleichzeitig
   gelten und sollen sich nicht gegenseitig uebermalen.
   Die Ziffer auf Gold nimmt --on-gold (seit 0.175.1), das Paar, das
   tests/test-kontraste.php prueft -- nicht mehr die Grundfarbe. */
.acg-sprungleiste-fertig .acg-sprungleiste-nummer {
	background: var(--acg-gold);
	box-shadow: none;
	color: var(--on-gold, var(--acg-bg));
}

.acg-sprungleiste-aktiv {
	border-color: var(--acg-gold);
	color: var(--acg-gold);
}

/* -- Live-Zusammenfassung (.acg-zusammenfassung, in .acg-layout-seite) - */

.acg-zusammenfassung {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--acg-border);
}

.acg-zusammenfassung-kopf {
	cursor: pointer;
	font-family: var(--acg-font-head);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.85rem;
	color: var(--acg-gold);
}

.acg-zusammenfassung-inhalt:not(:empty) {
	margin-top: 0.75rem;
}

.acg-zusammenfassung-abschnitt + .acg-zusammenfassung-abschnitt {
	margin-top: 0.9rem;
}

.acg-zusammenfassung-abschnitt-titel {
	margin: 0 0 0.3rem;
	font-family: var(--acg-font-body);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acg-muted);
}

.acg-zusammenfassung-abschnitt ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.acg-zusammenfassung-knopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 0.2rem 0;
	background: none;
	border: none;
	color: inherit;
	font-family: var(--acg-font-body);
	font-size: 0.85rem;
	text-align: left;
	cursor: pointer;
}

.acg-zusammenfassung-knopf:hover,
.acg-zusammenfassung-knopf:focus-visible {
	color: var(--acg-gold);
	outline: none;
}

.acg-zusammenfassung-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--acg-muted);
}

.acg-zusammenfassung-wert {
	flex: 0 0 auto;
	max-width: 55%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.acg-zusammenfassung-fehlt .acg-zusammenfassung-wert {
	color: var(--acg-accent-hover);
	font-style: italic;
}

/* -- Gruppen in Mehrfachauswahlen (seit 0.93.0, A5) --------------------- */

.acg-checkboxes-gruppe-titel {
	margin: 0.6rem 0 0.3rem;
	font-family: var(--acg-font-body);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acg-muted);
}
.acg-checkboxes-gruppe-titel:first-child {
	margin-top: 0;
}

/* -- Kombinationsfeld fuer lange Listen (seit 0.93.0, A4) --------------
   Das native <select> steht unveraendert im DOM (display:none durch JS)
   und bleibt die Wahrheit -- dieser Block ist reine Oberflaeche darueber. */

.acg-kombifeld {
	position: relative;
}

.acg-kombifeld-eingabe {
	width: 100%;
	padding: 0.55rem 0.7rem;
	background: var(--acg-bg);
	color: var(--acg-text);
	border: 1px solid var(--acg-border);
	border-radius: var(--radius-sm, 3px);
	font-family: var(--acg-font-body);
	font-size: 1rem;
	line-height: 1.4;
}

.acg-kombifeld-eingabe:focus {
	outline: 2px solid var(--acg-accent);
	outline-offset: 1px;
}

.acg-kombifeld-liste {
	position: absolute;
	z-index: 20;
	top: calc(100% + 0.25rem);
	left: 0;
	right: 0;
	max-height: 16rem;
	overflow-y: auto;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	background: var(--acg-panel);
	border: 1px solid var(--acg-border-hi);
	border-radius: var(--radius-sm, 3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
/* Siehe die Fallstrickliste zu .acg-bilder-umfang oben: eine Klassenregel,
   die display setzt (hier ueber "position: absolute" blockifiziert),
   schluege sonst das [hidden]-Attribut. */
.acg-kombifeld-liste[hidden] { display: none; }

.acg-kombifeld-option {
	padding: 0.45rem 0.7rem;
	cursor: pointer;
	font-size: 0.92rem;
}

.acg-kombifeld-option:hover,
.acg-kombifeld-option.acg-kombifeld-markiert {
	background: var(--acg-accent);
	color: var(--on-accent, #fff);
}

.acg-kombifeld-option.acg-kombifeld-gewaehlt {
	font-weight: 700;
}

.acg-kombifeld-gruppe {
	padding: 0.3rem 0.7rem 0.15rem;
	font-family: var(--acg-font-body);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acg-muted);
}

/* -- Entwurf-Streifen (seit 0.93.0, A7) --------------------------------- */

.acg-entwurf-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding: 0.85rem 1rem;
	background: var(--acg-bg);
	border: 1px solid var(--acg-gold);
	border-left-width: 4px;
	border-radius: var(--radius-sm, 4px);
}

.acg-entwurf-banner p {
	margin: 0;
	font-family: var(--acg-font-body);
	font-size: 0.9rem;
	color: var(--acg-text);
}

.acg-entwurf-banner-knoepfe {
	display: flex;
	flex: 0 0 auto;
	gap: 0.5rem;
}

.acg-entwurf-fortsetzen,
.acg-entwurf-verwerfen {
	padding: 0.4rem 0.85rem;
	border-radius: var(--radius-sm, 3px);
	font-family: var(--acg-font-body);
	font-size: 0.85rem;
	cursor: pointer;
}

.acg-entwurf-fortsetzen {
	background: var(--acg-accent);
	color: var(--on-accent, #fff);
	border: none;
}
.acg-entwurf-fortsetzen:hover { background: var(--acg-accent-hover); }

.acg-entwurf-verwerfen {
	background: none;
	border: 1px solid var(--acg-border);
	color: var(--acg-muted);
}
.acg-entwurf-verwerfen:hover { border-color: var(--acg-border-hi); color: var(--acg-text); }

/* -- Schmaler Schirm (seit 0.93.0) --------------------------------------
   Sprungleiste wird zur waagerechten Reihe von Kuerzeln: die Nummer IST
   das Kuerzel, dieselbe Zahl wie in der Abschnitts-Kopfzeile -- kein
   zweites Beschriftungssystem noetig. Dieselbe Bruchgrenze wie oben bei
   .acg-layout (seit 0.108.0 1100px), aus demselben Grund (siehe dort). */
@media (max-width: 1100px) {
	.acg-sprungleiste {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.4rem;
	}
	/* 44x44 statt 32x32 (seit 0.110.0): Auf einem Telefon ist die
	   Sprungleiste das einzige Navigationsmittel im Formular, und ein
	   32px-Ziel ist unterhalb dessen, was WCAG 2.5.5 fuer die Bedienung
	   mit dem Finger verlangt. */
	.acg-sprungleiste-eintrag {
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
		padding: 0.3rem;
		border-color: var(--acg-border);
	}
	/* NICHT display:none (seit 0.110.0): Der Titel war damit auch fuer
	   Hilfsmittel weg, und die Links hiessen nur noch "1" bis "6" -- ein
	   Linkzweck, der ohne das Auge nicht erkennbar ist (WCAG 2.4.4).
	   Jetzt bleibt er lesbar und ist nur nicht mehr zu sehen. */
	.acg-sprungleiste-titel {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.acg-zusammenfassung-wert {
		max-width: 45%;
	}
}