/**
 * AB2 Klankampf – Frontend
 *
 * Eigenständiges Plugin, deshalb ein eigenes Farbwerk statt der CI-Tokens.
 * Alle Werte hier, damit sich das Aussehen an einer Stelle drehen lässt.
 */

.ab2 {
	--ab2-grund: #ffffff;
	--ab2-flaeche: #f5f6fa;
	--ab2-rand: #dfe2ec;
	--ab2-text: #1f2430;
	--ab2-text-leise: #6b7280;
	--ab2-akzent: #5b4bd6;
	--ab2-akzent-hell: #ede9ff;
	--ab2-sieg: #12855b;
	--ab2-sieg-hell: #e3f6ee;
	--ab2-niederlage: #c0392b;
	--ab2-niederlage-hell: #fdecea;
	--ab2-warnung: #a86400;
	--ab2-warnung-hell: #fdf3e0;
	--ab2-radius: 10px;
	--ab2-schatten: 0 1px 3px rgba(31, 36, 48, .08);

	color: var(--ab2-text);
	font-size: 16px;
	line-height: 1.5;
}

.ab2 *,
.ab2 *::before,
.ab2 *::after {
	box-sizing: border-box;
}

/* ── Reiter ─────────────────────────────────────────────────────────────── */

.ab2-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 20px;
	border-bottom: 2px solid var(--ab2-rand);
	margin-bottom: 24px;
}

.ab2-reiter {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.ab2-reiter-knopf {
	appearance: none;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 10px 16px;
	font: inherit;
	font-weight: 600;
	color: var(--ab2-text-leise);
	cursor: pointer;
	border-radius: var(--ab2-radius) var(--ab2-radius) 0 0;
}

.ab2-reiter-knopf:hover {
	background: var(--ab2-flaeche);
	color: var(--ab2-text);
}

.ab2-reiter-knopf.ist-aktiv {
	color: var(--ab2-akzent);
	border-bottom-color: var(--ab2-akzent);
}

/* ── Sprachwahl ─────────────────────────────────────────────────────────── */

.ab2-sprachwahl {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-bottom: 8px;
}

.ab2-sprachwahl-text {
	font-size: .78em;
	color: var(--ab2-text-leise);
	margin-right: 2px;
}

.ab2-sprache {
	appearance: none;
	background: none;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 3px 10px;
	font: inherit;
	font-size: .82em;
	color: var(--ab2-text-leise);
	cursor: pointer;
}

.ab2-sprache:hover {
	border-color: var(--ab2-rand);
	color: var(--ab2-text);
}

.ab2-sprache.ist-aktiv {
	background: var(--ab2-akzent-hell);
	border-color: var(--ab2-akzent);
	color: var(--ab2-akzent);
	font-weight: 600;
	cursor: default;
}

.ab2-tafel {
	display: none;
}

.ab2-tafel.ist-aktiv {
	display: block;
}

/* ── Grundbausteine ─────────────────────────────────────────────────────── */

.ab2-titel {
	margin: 0 0 8px;
	font-size: 1.15em;
	font-weight: 700;
}

.ab2-vorspann {
	margin: 0 0 14px;
	color: var(--ab2-text-leise);
	font-size: .92em;
	max-width: 62ch;
}

.ab2-fussnote {
	margin: 10px 0 0;
	color: var(--ab2-text-leise);
	font-size: .85em;
}

.ab2-block {
	margin: 0 0 28px;
}

.ab2-leer {
	padding: 40px 20px;
	text-align: center;
	color: var(--ab2-text-leise);
	background: var(--ab2-flaeche);
	border-radius: var(--ab2-radius);
}

.ab2-leer p {
	margin: 0 0 6px;
}

.ab2-rechts {
	text-align: right;
}

/* ── Kennzahlen ─────────────────────────────────────────────────────────── */

.ab2-kennzahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}

.ab2-zahl {
	background: var(--ab2-flaeche);
	border-radius: var(--ab2-radius);
	padding: 14px 16px;
	border-left: 4px solid var(--ab2-rand);
}

.ab2-zahl-sieg      { border-left-color: var(--ab2-sieg); }
.ab2-zahl-niederlage { border-left-color: var(--ab2-niederlage); }

.ab2-zahl-wert {
	display: block;
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.ab2-zahl-text {
	display: block;
	margin-top: 2px;
	font-size: .82em;
	color: var(--ab2-text-leise);
}

/* ── Verlaufskurve ──────────────────────────────────────────────────────── */

.ab2-verlauf-rahmen {
	background: var(--ab2-flaeche);
	border-radius: var(--ab2-radius);
	padding: 12px;
	overflow-x: auto;
}

.ab2-verlauf {
	display: block;
	width: 100%;
	height: 260px;
}

.ab2-raster {
	stroke: var(--ab2-rand);
	stroke-width: 1;
}

.ab2-raster-text {
	fill: var(--ab2-text-leise);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.ab2-verlauf-linie {
	fill: none;
	stroke: var(--ab2-akzent);
	stroke-width: 2;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.ab2-verlauf-flaeche {
	fill: var(--ab2-akzent);
	opacity: .08;
	stroke: none;
}

.ab2-pkt-sieg       { fill: var(--ab2-sieg); }
.ab2-pkt-niederlage { fill: var(--ab2-niederlage); }
.ab2-pkt-offen      { fill: var(--ab2-text-leise); }

/* ── Tabellen ───────────────────────────────────────────────────────────── */

.ab2-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: .94em;
}

.ab2-tabelle th,
.ab2-tabelle td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--ab2-rand);
	text-align: left;
	vertical-align: middle;
}

.ab2-tabelle thead th {
	font-size: .82em;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ab2-text-leise);
	border-bottom-width: 2px;
}

.ab2-tabelle td.ab2-rechts,
.ab2-tabelle th.ab2-rechts {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ab2-tabelle tbody tr:hover {
	background: var(--ab2-flaeche);
}

.ab2-wert-sieg       { color: var(--ab2-sieg); font-weight: 600; }
.ab2-wert-niederlage { color: var(--ab2-niederlage); font-weight: 600; }

.ab2-tabelle-kampf {
	max-width: 560px;
	margin-bottom: 16px;
}

.ab2-tabelle-kampf td {
	font-variant-numeric: tabular-nums;
}

.ab2-tabelle-gegner .ab2-spalte-wappen {
	width: 44px;
	padding-right: 0;
}

.ab2-spalte-name {
	min-width: 140px;
}

/* ── Wappen und Namenszug ───────────────────────────────────────────────── */

.ab2-wappen {
	display: block;
	width: 34px;
	height: 34px;
	object-fit: contain;
	flex: 0 0 auto;
}

.ab2-wappen-leer {
	background: var(--ab2-rand);
	border-radius: 6px;
	opacity: .5;
}

.ab2-gegner-name {
	display: block;
	font-weight: 600;
}

.ab2-namenszug {
	display: block;
	height: 20px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	object-position: left center;
	margin-top: 2px;
	opacity: .75;
}

.ab2-klan-bearbeiten {
	appearance: none;
	background: none;
	border: none;
	padding: 0 4px;
	font-size: .9em;
	color: var(--ab2-text-leise);
	cursor: pointer;
}

.ab2-klan-bearbeiten:hover {
	color: var(--ab2-akzent);
}

/* ── Kampfliste ─────────────────────────────────────────────────────────── */

.ab2-werkzeuge {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	margin-bottom: 18px;
}

.ab2-treffer {
	margin: 0 0 4px;
	color: var(--ab2-text-leise);
	font-size: .88em;
}

.ab2-liste {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ab2-eintrag {
	background: var(--ab2-grund);
	border: 1px solid var(--ab2-rand);
	border-radius: var(--ab2-radius);
	box-shadow: var(--ab2-schatten);
	overflow: hidden;
}

.ab2-eintrag[open] {
	border-color: var(--ab2-akzent);
}

.ab2-eintrag-kopf {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	cursor: pointer;
	list-style: none;
}

.ab2-eintrag-kopf::-webkit-details-marker {
	display: none;
}

.ab2-eintrag-kopf:hover {
	background: var(--ab2-flaeche);
}

.ab2-eintrag-gegner {
	flex: 1 1 auto;
	min-width: 0;
}

.ab2-eintrag-name {
	display: block;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ab2-eintrag-datum {
	display: block;
	font-size: .82em;
	color: var(--ab2-text-leise);
}

.ab2-eintrag-punkte {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.ab2-doppelpunkt {
	color: var(--ab2-text-leise);
	margin: 0 2px;
}

.ab2-eintrag-inhalt {
	padding: 4px 14px 16px;
	border-top: 1px solid var(--ab2-rand);
}

.ab2-marke {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: .78em;
	font-weight: 700;
	white-space: nowrap;
}

.ab2-marke-sieg {
	background: var(--ab2-sieg-hell);
	color: var(--ab2-sieg);
}

.ab2-marke-niederlage {
	background: var(--ab2-niederlage-hell);
	color: var(--ab2-niederlage);
}

.ab2-marke-offen {
	background: var(--ab2-flaeche);
	color: var(--ab2-text-leise);
}

/* ── Fakten unter der Tabelle ───────────────────────────────────────────── */

.ab2-fakten {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.ab2-fakten li {
	display: flex;
	flex-direction: column;
}

.ab2-fakt-text {
	font-size: .78em;
	color: var(--ab2-text-leise);
}

.ab2-fakt-wert {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ab2-trenner {
	color: var(--ab2-text-leise);
	font-weight: 400;
}

.ab2-notiz {
	background: var(--ab2-flaeche);
	border-radius: var(--ab2-radius);
	padding: 10px 12px;
	margin: 0 0 14px;
	font-size: .92em;
}

/* ── Bilder ─────────────────────────────────────────────────────────────── */

.ab2-bilder {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.ab2-bilder-weitere .ab2-kachel {
	max-width: 180px;
}

.ab2-kachel {
	margin: 0;
	flex: 1 1 260px;
	max-width: 420px;
}

.ab2-kachel-knopf {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--ab2-rand);
	border-radius: var(--ab2-radius);
	background: var(--ab2-flaeche);
	overflow: hidden;
	cursor: zoom-in;
}

.ab2-kachel-knopf img {
	display: block;
	width: 100%;
	height: auto;
}

.ab2-kachel figcaption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
	font-size: .8em;
	color: var(--ab2-text-leise);
}

.ab2-bild-loeschen {
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--ab2-text-leise);
	text-decoration: underline;
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s;
}

.ab2-kachel:hover .ab2-bild-loeschen,
.ab2-bild-loeschen:focus {
	opacity: 1;
}

.ab2-bild-loeschen:hover {
	color: var(--ab2-niederlage);
}

/* ── Lupe ───────────────────────────────────────────────────────────────── */

.ab2-lupe {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(15, 18, 26, .9);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	cursor: zoom-out;
}

.ab2-lupe[hidden] {
	display: none;
}

.ab2-lupe img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
}

.ab2-lupe-zu {
	position: absolute;
	top: 12px;
	right: 16px;
	appearance: none;
	background: none;
	border: none;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 10px;
}

body.ab2-lupe-offen {
	overflow: hidden;
}

/* ── Formular ───────────────────────────────────────────────────────────── */

.ab2-formular-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.ab2-formular-titel {
	margin: 0;
}

.ab2-changelog {
	flex: 0 0 auto;
	text-decoration: none;
	font-size: 1.2em;
	line-height: 1;
	opacity: .55;
}

.ab2-changelog:hover {
	opacity: 1;
}

.ab2-gruppe {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ab2-rand);
}

.ab2-gruppe:last-of-type {
	border-bottom: none;
}

.ab2-gruppe-titel {
	margin: 0 0 12px;
	font-size: .82em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ab2-text-leise);
}

.ab2-felder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px 16px;
}

.ab2-feld {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ab2-feld-breit {
	grid-column: 1 / -1;
}

.ab2-feld-text {
	font-size: .84em;
	font-weight: 600;
	color: var(--ab2-text-leise);
}

.ab2-feld-text em {
	font-style: normal;
	font-weight: 400;
}

.ab2-feld-zusatz {
	font-weight: 400;
	opacity: .8;
}

.ab2 input[type="text"],
.ab2 input[type="date"],
.ab2 input[type="file"],
.ab2 select,
.ab2 textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--ab2-rand);
	border-radius: 8px;
	background: var(--ab2-grund);
	color: var(--ab2-text);
	font: inherit;
	font-size: .95em;
}

.ab2 input[type="text"]:focus,
.ab2 input[type="date"]:focus,
.ab2 select:focus,
.ab2 textarea:focus {
	outline: 2px solid var(--ab2-akzent);
	outline-offset: 1px;
	border-color: var(--ab2-akzent);
}

.ab2 textarea {
	resize: vertical;
}

/* ── Bildablagen ────────────────────────────────────────────────────────── */

.ab2-ablagen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}

.ab2-ablage {
	position: relative;
	border: 2px dashed var(--ab2-rand);
	border-radius: var(--ab2-radius);
	padding: 14px;
	background: var(--ab2-flaeche);
}

.ab2-ablage.ist-gefuellt {
	border-style: solid;
	border-color: var(--ab2-sieg);
	background: var(--ab2-grund);
}

.ab2-ablage.ist-beschaeftigt {
	opacity: .6;
}

.ab2-ablage-text {
	display: block;
	font-weight: 700;
}

.ab2-ablage-hinweis {
	display: block;
	font-size: .82em;
	color: var(--ab2-text-leise);
	margin-bottom: 8px;
}

.ab2-ablage-vorschau,
.ab2-extra-vorschau {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.ab2-ablage-vorschau img,
.ab2-extra-vorschau img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	border: 1px solid var(--ab2-rand);
}

.ab2-extra-vorschau img {
	max-width: 110px;
}

.ab2-groesse {
	font-size: .78em;
	color: var(--ab2-text-leise);
	font-variant-numeric: tabular-nums;
}

/* ── Wappenerkennung ────────────────────────────────────────────────────── */

.ab2-erkennung {
	background: var(--ab2-akzent-hell);
	border-radius: var(--ab2-radius);
	padding: 12px 14px;
	margin-bottom: 14px;
}

.ab2-erkennung[hidden] {
	display: none;
}

.ab2-erkennung-kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .92em;
	font-weight: 600;
}

.ab2-erkennung-wappen {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 6px;
	background: rgba(255, 255, 255, .6);
}

.ab2-erkennung-namenszug {
	display: block;
	max-width: 100%;
	height: 34px;
	width: auto;
	object-fit: contain;
	object-position: left center;
	margin-top: 8px;
	background: rgba(255, 255, 255, .6);
	border-radius: 6px;
}

.ab2-erkennung-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.ab2-vorschlag {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	border: 1px solid var(--ab2-rand);
	border-radius: 999px;
	background: var(--ab2-grund);
	font: inherit;
	font-size: .9em;
	cursor: pointer;
}

.ab2-vorschlag img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.ab2-vorschlag:hover {
	border-color: var(--ab2-akzent);
}

.ab2-vorschlag.ist-sicher,
.ab2-vorschlag.ist-gewaehlt {
	border-color: var(--ab2-akzent);
	background: var(--ab2-grund);
	box-shadow: 0 0 0 2px var(--ab2-akzent) inset;
	font-weight: 600;
}

/* ── Ausgang und Meldungen ──────────────────────────────────────────────── */

.ab2-ausgang {
	margin: 14px 0 0;
	font-weight: 700;
}

.ab2-ausgang.ist-sieg       { color: var(--ab2-sieg); }
.ab2-ausgang.ist-niederlage { color: var(--ab2-niederlage); }

.ab2-formular-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding-top: 4px;
}

.ab2-meldung {
	font-size: .9em;
	color: var(--ab2-text-leise);
}

.ab2-meldung-gut     { color: var(--ab2-sieg); font-weight: 600; }
.ab2-meldung-fehler  { color: var(--ab2-niederlage); font-weight: 600; }
.ab2-meldung-warnung { color: var(--ab2-warnung); font-weight: 600; }

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */

.ab2-knopf {
	appearance: none;
	border: 1px solid var(--ab2-rand);
	border-radius: 8px;
	padding: 9px 18px;
	background: var(--ab2-grund);
	color: var(--ab2-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ab2-knopf:hover:not(:disabled) {
	border-color: var(--ab2-akzent);
	color: var(--ab2-akzent);
}

.ab2-knopf:disabled {
	opacity: .55;
	cursor: default;
}

.ab2-knopf-stark {
	background: var(--ab2-akzent);
	border-color: var(--ab2-akzent);
	color: #fff;
}

.ab2-knopf-stark:hover:not(:disabled) {
	filter: brightness(1.1);
	color: #fff;
}

.ab2-knopf-gefahr:hover:not(:disabled) {
	border-color: var(--ab2-niederlage);
	color: var(--ab2-niederlage);
}

.ab2-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 4px;
}

/* ── Hinweise zur Punktekette ───────────────────────────────────────────── */

.ab2-hinweis {
	background: var(--ab2-warnung-hell);
	border-radius: var(--ab2-radius);
	padding: 16px 18px;
}

.ab2-hinweis .ab2-titel {
	color: var(--ab2-warnung);
}

.ab2-hinweis-liste {
	margin: 0;
	padding-left: 20px;
	font-size: .92em;
}

.ab2-hinweis-liste li {
	margin-bottom: 4px;
}

.ab2-hinweis-quelle {
	color: var(--ab2-text-leise);
}

/* ── Einstellungen ──────────────────────────────────────────────────────── */

.ab2-einstellungen {
	margin-top: 28px;
	border-top: 1px solid var(--ab2-rand);
	padding-top: 14px;
}

.ab2-einstellungen summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ab2-text-leise);
	font-size: .9em;
}

.ab2-einstellungen-inhalt {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-top: 12px;
	max-width: 520px;
}

.ab2-einstellungen-inhalt .ab2-feld {
	flex: 1 1 220px;
}

.ab2-einstellungen-inhalt .ab2-fussnote {
	flex: 1 1 100%;
	margin-top: 0;
}

/* ── Schmale Bildschirme ────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.ab2-reiter-knopf {
		padding: 9px 12px;
		font-size: .92em;
	}

	.ab2-eintrag-kopf {
		flex-wrap: wrap;
		gap: 8px 10px;
	}

	.ab2-eintrag-gegner {
		flex: 1 1 60%;
	}

	.ab2-eintrag-punkte {
		order: 3;
	}

	.ab2-marke {
		order: 4;
		margin-left: auto;
	}

	.ab2-tabelle-gegner {
		font-size: .86em;
	}

	.ab2-tabelle-gegner .ab2-namenszug {
		max-width: 110px;
	}

	.ab2-kachel {
		flex: 1 1 100%;
	}
}

/* ── Prüfliste und Import ───────────────────────────────────────────────── */

.ab2-pruefliste-hinweis {
	margin: 0 0 16px;
	padding: 10px 14px;
	background: var(--ab2-warnung-hell);
	border-radius: var(--ab2-radius);
	font-size: .92em;
	color: var(--ab2-warnung);
}

.ab2-marke-pruefen {
	background: var(--ab2-warnung-hell);
	color: var(--ab2-warnung);
}

.ab2-eintrag.ist-zu-pruefen {
	border-left: 4px solid var(--ab2-warnung);
}

.ab2-pruefhinweis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 8px 0 14px;
	padding: 10px 12px;
	background: var(--ab2-warnung-hell);
	border-radius: var(--ab2-radius);
	font-size: .9em;
	color: var(--ab2-warnung);
}

.ab2-pruefhinweis .ab2-knopf {
	padding: 5px 12px;
	font-size: .9em;
}

.ab2-import-erklaerung {
	flex: 1 1 100%;
	margin-top: 0;
}

.ab2-import-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 100%;
}

.ab2-imp-meldung {
	flex: 1 1 100%;
}

.ab2-imp-balken {
	flex: 1 1 100%;
	height: 8px;
	border-radius: 999px;
	background: var(--ab2-rand);
	overflow: hidden;
}

.ab2-imp-balken > span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ab2-akzent);
	transition: width .25s;
}

.ab2-imp-warnung {
	flex: 1 1 100%;
	color: var(--ab2-warnung);
}

.ab2-import .ab2-einstellungen-inhalt {
	max-width: 640px;
}