:root {
	--ap-bg: #f4f5f7;
	--ap-fg: #1f2430;
	--ap-primary: #2d6cdf;
	--ap-primary-dark: #1f4fb0;
	--ap-border: #d7dbe3;
	--ap-card-bg: #ffffff;
	/* Kontraste nach WCAG 2.1 AA, geprüft in tests/js/contrast.test.js */
	--ap-muted: #636975;
	--ap-input-border: #868e9c;
	/* Design-Tokens (TASK-062, design/mockups/NOTES.md): außerhalb von :root
	   keine freien Farb-, Radius- oder Schattenwerte. Neue Farbe zuerst hier
	   anlegen und ihr Kontrastpaar in tests/js/contrast.test.js ergänzen.
	   --ap-primary nie als Textfarbe (4,45:1 auf --ap-bg), dafür --ap-primary-dark. */
	--ap-hover: #e6e9ef;
	--ap-on-strong: #ffffff; /* Text und Icons auf --ap-primary, --ap-danger, --ap-fg */
	--ap-toast-check: #8fe0a6; /* Häkchen im Toast auf --ap-fg (9,89:1) */
	--ap-danger: #b42318;
	--ap-danger-bg: #fdecea;
	--ap-danger-border: #f5c2bd;
	--ap-danger-fg: #8a1f14; /* Text in Fehlermeldungen auf --ap-danger-bg */
	--ap-warning-fg: #6b5100;
	--ap-warning-bg: #fff8e1;
	--ap-warning-border: #f3dc9a;
	--ap-success: #1e7a37;
	--ap-success-bg: #dff3e3;
	--ap-success-border: #a8d5b3;
	--ap-own-bg: #eef3fc;
	--ap-own-border: #b9cdf3;
	--ap-hidden-fg: #525b6b;
	--ap-hidden-bg: #e2e6ee;
	/* Halbtransparente Werte (Hintergrund hinter Dialogen, Schatten) sind ebenfalls nur hier erlaubt */
	--ap-backdrop: rgba(31, 36, 48, 0.5);
	--ap-radius-xs: 4px; /* Tooltips */
	--ap-radius-s: 6px;
	--ap-radius: 8px;
	--ap-radius-card: 10px; /* Spielkarten, Bereiche */
	--ap-radius-l: 12px;
	--ap-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
	--ap-shadow-pop: 0 6px 20px rgba(31, 36, 48, 0.15);
	--ap-shadow-dialog: 0 20px 50px rgba(31, 36, 48, 0.35);
	/* Bewegung (TASK-100): Dauern und Kurven; die Regeln selbst stehen nur im Block
	   prefers-reduced-motion: no-preference (Konzept: design/mockups/bewegung.html) */
	--ap-dur-fast: 120ms;
	--ap-dur-base: 160ms;
	--ap-dur-med: 200ms;
	--ap-dur-slow: 300ms;
	--ap-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ap-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ap-ease-flip: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* gleichmäßig, damit die Drehung sichtbar bleibt */
	/* Zierlinie der Markenschemata (TASK-095); schemes.css setzt sie je Schema */
	--ap-accent: transparent;
	color-scheme: light;
	/* Vorschau-Farbfelder der Schema-Auswahl: Werte aller Schemata gleichzeitig,
	   werden in keinem Schema überschrieben (TASK-095, Quelle: schemes.css) */
	--ap-sw-light-bg: #f4f5f7;
	--ap-sw-light-card: #ffffff;
	--ap-sw-light-primary: #2d6cdf;
	--ap-sw-light-fg: #1f2430;
	--ap-sw-lightblue-bg: #eaf2fd;
	--ap-sw-lightblue-card: #ffffff;
	--ap-sw-lightblue-primary: #2d6cdf;
	--ap-sw-lightblue-fg: #1b2a41;
	--ap-sw-dark-bg: #181b23;
	--ap-sw-dark-card: #222632;
	--ap-sw-dark-primary: #7fa8f2;
	--ap-sw-dark-fg: #e4e7ee;
	--ap-sw-brockhaus-bg: #f6f6f6;
	--ap-sw-brockhaus-card: #ffffff;
	--ap-sw-brockhaus-primary: #b81f40;
	--ap-sw-brockhaus-fg: #575756;
	--ap-sw-agileversity-bg: #fdf2ee;
	--ap-sw-agileversity-card: #ffffff;
	--ap-sw-agileversity-primary: #a8533b;
	--ap-sw-agileversity-fg: #575756;
}

/* Nur für Screenreader (Textalternativen, Ankündigungen) */
.ap-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Eingabefelder folgen dem Farbschema (TASK-095); ohne eigene Farben würden sie im
   dunklen Schema die hellen bzw. dunklen Browser-Standardwerte zeigen */
input[type='text'],
input[type='password'],
input[type='number'],
textarea,
select {
	background: var(--ap-card-bg);
	color: var(--ap-fg);
}

/* Sichtbarer Tastaturfokus für alle Bedienelemente */
:focus-visible {
	outline: 3px solid var(--ap-primary);
	outline-offset: 2px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	background: var(--ap-bg);
	color: var(--ap-fg);
	/* Inhalt füllt die Höhe, der Footer sitzt darunter (auch bei zentrierten Seiten) */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body > .ap-shell {
	flex: 1 0 auto;
	width: 100%;
}

#ap-app {
	display: flex;
	flex-direction: column;
}

/* Als Flex-Kind würde die Raumansicht sonst auf ihre Inhaltsbreite schrumpfen */
#ap-app > .ap-shell {
	width: 100%;
}

.ap-shell {
	max-width: 780px;
	margin: 0 auto;
	padding: 24px 16px 64px;
}

/* Sprachauswahl (TASK-043): Leiste über dem Inhalt, Flagge rechts */
.ap-topbar {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	padding: 12px 16px 0;
	box-sizing: border-box;
	gap: 8px;
}

.ap-lang {
	position: relative;
}

.ap-lang__flag {
	display: inline-block;
	vertical-align: middle;
	border: 1px solid var(--ap-border);
}

.ap-shell--center {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: none;
	padding: 16px;
}

/* Erstellen-Seite (TASK-093): dekoratives Banner, die Karte überlappt es leicht */
.ap-create {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 720px;
}

.ap-hero {
	display: block;
	width: 100%;
	line-height: 0;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-l);
	box-shadow: var(--ap-shadow-card);
	overflow: hidden;
}

.ap-hero img {
	display: block;
	width: 100%;
	height: auto;
}

.ap-create .ap-card-box {
	position: relative;
	margin-top: -20px;
}

.ap-card-box {
	background: var(--ap-card-bg);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-l);
	padding: 32px;
	max-width: 420px;
	width: 100%;
	text-align: center;
	box-shadow: var(--ap-shadow-card);
}

.ap-card-box input[type='text'],
.ap-card-box input[type='password'] {
	width: 100%;
	padding: 10px 12px;
	margin: 12px 0;
	border: 1px solid var(--ap-input-border);
	border-radius: var(--ap-radius);
	font-size: 16px;
}

.ap-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
}

.ap-header h1 {
	margin: 0;
	font-size: 1.5rem;
	/* Lange Raumtitel (auch einzelne lange Wörter) umbrechen statt den Rand zu sprengen */
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Titel und Status nebeneinander; lange Titel lassen den Chip umbrechen. */
.ap-header__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	min-width: 0;
	max-width: 100%;
}

/* Gemeinsame Basis für Status-Chips (TASK-076, spätere Raum-Phasen). */
.ap-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid;
	border-radius: var(--ap-radius-l);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.ap-chip[hidden] {
	display: none;
}

.ap-chip .ap-icon {
	width: 14px;
	height: 14px;
}

.ap-chip--neutral {
	background: var(--ap-hidden-bg);
	color: var(--ap-hidden-fg);
	border-color: var(--ap-border);
}

.ap-chip--success {
	background: var(--ap-success-bg);
	color: var(--ap-success);
	border-color: var(--ap-success-border);
}

.ap-chip--lock {
	background: var(--ap-card-bg);
	color: var(--ap-hidden-fg);
	border-color: var(--ap-border);
	font-weight: 500;
}

/* Raum-Link und Raum-Menü nebeneinander; schrumpfen auf schmalen Bildschirmen mit */
.ap-header__tools {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
}

/* Raum-Menü (TASK-041): Button mit Hamburger-Icon, Pop-up rechtsbündig darunter */
.ap-menu-wrap {
	position: relative;
	flex-shrink: 0;
}

/* Tooltip der Icon-Buttons (TASK-042): erscheint bei Hover und Tastaturfokus
   unter dem Button, verschwindet beim Verlassen bzw. Fokuswechsel; Escape
   blendet ihn aus (Klasse ap-tooltips-hidden, siehe app.js). */
.ap-btn--icon:hover::after,
.ap-btn--icon:focus-visible::after {
	content: attr(data-tooltip);
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 6px;
	padding: 4px 8px;
	border-radius: var(--ap-radius-xs);
	background: var(--ap-fg);
	color: var(--ap-on-strong);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
	z-index: 20;
}

/* Am rechten Rand (Kopfbereich, eigener Eintrag) rechtsbündig, damit der Tooltip nicht aus dem Viewport ragt */
.ap-header .ap-btn--icon::after,
.ap-participant .ap-btn--icon::after,
.ap-cs-table .ap-btn--icon::after {
	left: auto;
	right: 0;
	transform: none;
}

.ap-tooltips-hidden .ap-btn--icon::after,
.ap-btn--icon[aria-expanded='true']::after {
	display: none;
}

.ap-icon {
	display: block;
	flex-shrink: 0;
}

.ap-menu {
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 6px;
	min-width: 200px;
	max-width: calc(100vw - 32px);
	padding: 6px 0;
	background: var(--ap-card-bg);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow-pop);
	z-index: 10;
}

.ap-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap-menu__item {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 16px;
	border: 0;
	background: transparent;
	color: var(--ap-fg);
	font-size: 14px;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.ap-menu__item:hover,
.ap-menu__item:focus-visible {
	background: var(--ap-hover);
}

/* Fokusrahmen innen (TASK-065): am Menürand sonst abgeschnitten bzw. über dem Nachbarn */
.ap-menu__item:focus-visible {
	outline-offset: -3px;
}

.ap-menu__item .ap-icon {
	width: 18px;
	height: 18px;
	color: var(--ap-muted);
}

/* Destruktiver Eintrag (TASK-064): nach .ap-menu__item, sonst gilt dessen Farbe */
.ap-menu__item--danger {
	color: var(--ap-danger);
}

.ap-menu__item--danger:hover,
.ap-menu__item--danger:focus-visible {
	background: var(--ap-danger-bg);
}

.ap-menu__item--danger .ap-icon {
	color: currentColor;
}

/* Trenner vor einer Gruppe: Linie am <li> statt eigenem Listenelement */
.ap-menu__group-start {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--ap-border);
}

/* Einträge der Sprachwahl: nach .ap-menu__item, damit display: flex gilt */
.ap-lang__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ap-lang__name {
	flex: 1 1 auto;
}

/* Häkchen rechts an der aktiven Sprache: Zustand nicht nur über Fettdruck */
.ap-lang__item .ap-icon {
	width: 16px;
	height: 16px;
	color: var(--ap-primary-dark);
}

.ap-lang__item[aria-current='true'] {
	font-weight: 700;
}

/* Auswahl des Farbschemas (TASK-095): Button neben der Sprachwahl, Popover mit Radiogruppe */
.ap-scheme__toggle .ap-icon:first-child {
	width: 18px;
	height: 18px;
	color: var(--ap-fg);
}

.ap-scheme__menu {
	min-width: 240px;
	padding: 10px 0 6px;
}

.ap-scheme__title {
	margin: 0;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 700;
}

.ap-scheme__hint {
	margin: 2px 0 6px;
	padding: 0 14px;
	font-size: 13px;
	color: var(--ap-muted);
}

.ap-scheme__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 14px;
	cursor: pointer;
	box-sizing: border-box;
}

.ap-scheme__option:hover {
	background: var(--ap-hover);
}

/* Das echte Radio ist unsichtbar, aber fokussierbar: Fokusrahmen auf der ganzen Zeile */
.ap-scheme__option:focus-within {
	outline: 3px solid var(--ap-primary);
	outline-offset: -3px;
}

.ap-scheme__name {
	flex: 1 1 auto;
	font-size: 14px;
}

.ap-scheme__check {
	visibility: hidden;
}

.ap-scheme__check .ap-icon {
	width: 16px;
	height: 16px;
	color: var(--ap-primary-dark);
}

.ap-scheme__option input:checked ~ .ap-scheme__check {
	visibility: visible;
}

.ap-scheme__option input:checked ~ .ap-scheme__name {
	font-weight: 700;
}

/* Farbfeld: Seite, Karte, Primärfarbe und Textfarbe des Schemas (Werte: --ap-sw-* in :root) */
.ap-swatch {
	display: inline-block;
	position: relative;
	flex-shrink: 0;
	width: 56px;
	height: 32px;
	border: 1px solid var(--ap-input-border);
	border-radius: var(--ap-radius-s);
	background: var(--sw-bg);
	box-sizing: border-box;
}

.ap-swatch::before {
	content: '';
	position: absolute;
	top: 3px;
	right: 5px;
	bottom: 3px;
	left: 5px;
	border-radius: var(--ap-radius-xs);
	border-bottom: 5px solid var(--sw-fg);
	background: var(--sw-card);
}

.ap-swatch::after {
	content: '';
	position: absolute;
	left: 11px;
	top: 9px;
	width: 22px;
	height: 5px;
	border-radius: var(--ap-radius-xs);
	background: var(--sw-primary);
}

.ap-swatch--light {
	--sw-bg: var(--ap-sw-light-bg);
	--sw-card: var(--ap-sw-light-card);
	--sw-primary: var(--ap-sw-light-primary);
	--sw-fg: var(--ap-sw-light-fg);
}

.ap-swatch--lightblue {
	--sw-bg: var(--ap-sw-lightblue-bg);
	--sw-card: var(--ap-sw-lightblue-card);
	--sw-primary: var(--ap-sw-lightblue-primary);
	--sw-fg: var(--ap-sw-lightblue-fg);
}

.ap-swatch--dark {
	--sw-bg: var(--ap-sw-dark-bg);
	--sw-card: var(--ap-sw-dark-card);
	--sw-primary: var(--ap-sw-dark-primary);
	--sw-fg: var(--ap-sw-dark-fg);
}

.ap-swatch--brockhaus {
	--sw-bg: var(--ap-sw-brockhaus-bg);
	--sw-card: var(--ap-sw-brockhaus-card);
	--sw-primary: var(--ap-sw-brockhaus-primary);
	--sw-fg: var(--ap-sw-brockhaus-fg);
}

.ap-swatch--agileversity {
	--sw-bg: var(--ap-sw-agileversity-bg);
	--sw-card: var(--ap-sw-agileversity-card);
	--sw-primary: var(--ap-sw-agileversity-primary);
	--sw-fg: var(--ap-sw-agileversity-fg);
}

/* Raum-Link + "Link kopieren": Das Feld schrumpft auf schmalen Bildschirmen, der Button bleibt einzeilig */
.ap-share {
	display: flex;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
}

.ap-share .ap-btn {
	white-space: nowrap;
	flex-shrink: 0;
}

.ap-share input {
	width: 220px;
	min-width: 0;
	flex: 1 1 auto;
	padding: 6px 10px;
	border: 1px solid var(--ap-input-border);
	border-radius: var(--ap-radius-s);
	font-size: 13px;
	color: var(--ap-muted);
	background: var(--ap-card-bg);
}

.ap-btn {
	appearance: none;
	border: 1px solid var(--ap-border);
	background: var(--ap-card-bg);
	color: var(--ap-fg);
	padding: 10px 16px;
	border-radius: var(--ap-radius);
	font-size: 14px;
	cursor: pointer;
	/* Auch für <a class="ap-btn"> (z. B. "Neuen Raum erstellen") */
	display: inline-block;
	text-decoration: none;
}

/* Nach .ap-btn, damit der kompakte Innenabstand wirksam bleibt (TASK-083).
   Auf Touch-Geräten haben die späteren 44-px-Minima weiterhin Vorrang. */
.ap-btn--icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 6px;
	line-height: 0;
}

.ap-btn:hover {
	background: var(--ap-hover);
}

.ap-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Sprach-Button (TASK-073): Flagge, Kürzel und Pfeil statt nur Flagge;
   steht nach .ap-btn, damit Innenabstand und display hier gelten */
.ap-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

.ap-lang__toggle .ap-icon {
	width: 14px;
	height: 14px;
	color: var(--ap-muted);
}

.ap-btn--primary {
	background: var(--ap-primary);
	border-color: var(--ap-primary);
	color: var(--ap-on-strong);
}

.ap-btn--primary:hover:not(:disabled) {
	background: var(--ap-primary-dark);
}

.ap-btn--danger {
	background: var(--ap-danger);
	border-color: var(--ap-danger);
	color: var(--ap-on-strong);
}

.ap-btn--danger:hover:not(:disabled) {
	background: var(--ap-danger-fg);
	border-color: var(--ap-danger-fg);
}

/* Ladezustände (TASK-074): Spinner im Button bzw. „Raum wird geladen …“.
   Steht nach .ap-btn, damit display hier gilt; gesperrt, aber nicht verblasst. */
.ap-spinner {
	display: inline-block;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
}

.ap-btn--busy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ap-btn.ap-btn--busy:disabled {
	opacity: 1;
	cursor: progress;
}

.ap-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--ap-muted);
}

.ap-loading .ap-spinner {
	border-color: var(--ap-border);
	border-top-color: var(--ap-primary);
}

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

/* Rückfrage-Dialog (TASK-063): <dialog> mit showModal(), Markup aus app.js */
.ap-dialog {
	width: 100%;
	max-width: min(460px, calc(100% - 32px));
	padding: 24px;
	border: 0;
	border-radius: var(--ap-radius-l);
	background: var(--ap-card-bg);
	color: var(--ap-fg);
	box-shadow: var(--ap-shadow-dialog);
	text-align: left;
}

.ap-dialog::backdrop {
	background: var(--ap-backdrop);
}

.ap-dialog h2 {
	margin: 0 0 8px;
	font-size: 1.2rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ap-dialog p {
	margin: 0 0 20px;
	line-height: 1.45;
}

.ap-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

.ap-dialog__actions .ap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ap-dialog__actions .ap-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.ap-btn--ghost {
	background: transparent;
}

.ap-btn--small {
	padding: 6px 10px;
	font-size: 13px;
}

.ap-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}

.ap-vote-progress {
	color: var(--ap-muted);
	font-size: 14px;
}

.ap-section-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.ap-participants {
	list-style: none;
	padding: 0;
	margin-top: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 24px;
}

.ap-participants--many {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

#ap-participants-toggle {
	display: none;
}

.ap-participant {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--ap-card-bg);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
	padding: 10px 14px;
}

.ap-participant--you {
	background: var(--ap-own-bg);
	border-color: var(--ap-own-border);
	border-left: 4px solid var(--ap-primary);
}

.ap-badge {
	padding: 2px 8px;
	border-radius: var(--ap-radius-l);
	color: var(--ap-primary-dark);
	background: var(--ap-own-bg);
	font-size: 12px;
	font-weight: 700;
}

.ap-participant__name {
	font-weight: 500;
	/* Schiebt "Namen ändern", ursprüngliche und aktuelle Schätzung nach rechts */
	margin-right: auto;
	/* Lange Namen ohne Trennstelle umbrechen (Flex-Kind darf schmaler als sein Inhalt werden) */
	min-width: 0;
	overflow-wrap: anywhere;
}

/* "Namen ändern" am eigenen Eintrag: rechts, vor der Stimme */
.ap-participant__rename {
	flex-shrink: 0;
}

/* Ursprüngliche Schätzung nach dem Aufdecken (TASK-006): rot und durchgestrichen, Tooltip bei Hover und Fokus */
.ap-original {
	position: relative;
	flex-shrink: 0;
	padding: 4px 6px;
	border-radius: var(--ap-radius-s);
	color: var(--ap-danger);
	font-weight: 700;
	cursor: help;
}

.ap-original,
.ap-vote--emoji {
	max-width: 64px;
	overflow-wrap: anywhere;
}

.ap-original s {
	text-decoration-thickness: 2px;
}

.ap-original:hover::after,
.ap-original:focus::after {
	content: attr(data-tooltip);
	position: absolute;
	right: 0;
	bottom: 100%;
	margin-bottom: 4px;
	padding: 4px 8px;
	border-radius: var(--ap-radius-xs);
	background: var(--ap-fg);
	color: var(--ap-on-strong);
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
	z-index: 1;
}

/* Legende zur Durchstreichung (TASK-071): ersetzt auf Touch-Geräten den dort nicht erreichbaren Tooltip */
.ap-original-legend {
	display: none;
	margin: 0;
	color: var(--ap-muted);
	font-size: 13px;
}

/* Toast (TASK-071): sichtbare Erfolgsrückmeldung unten mittig, leer ausgeblendet */
.ap-toast {
	--ap-toast-offset: -50%;
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 8px;
	/* Breite nach Inhalt: left: 50% würde die verfügbare Breite sonst halbieren */
	width: max-content;
	max-width: calc(100% - 32px);
	padding: 10px 14px;
	border-radius: var(--ap-radius);
	background: var(--ap-fg);
	color: var(--ap-on-strong);
	font-size: 14px;
	box-shadow: var(--ap-shadow-pop);
}

.ap-toast:empty {
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.ap-toast .ap-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--ap-toast-check);
}

@keyframes ap-toast-in {
	from {
		opacity: 0;
		transform: translate(var(--ap-toast-offset), 8px);
	}

	to {
		opacity: 1;
		transform: translate(var(--ap-toast-offset), 0);
	}
}

/* Kartensemantik (TASK-045.04): Bedeutungen der Kartenwerte unter der Aktionsleiste */
.ap-semantics {
	background: var(--ap-card-bg);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-l);
	padding: 16px 20px;
	margin-bottom: 24px;
}

.ap-semantics__title {
	margin: 0 0 4px;
	font-size: 1.1rem;
	overflow-wrap: anywhere;
}

.ap-semantics__description {
	margin: 0 0 12px;
	color: var(--ap-muted);
	overflow-wrap: anywhere;
}

/* Feste Spaltenbreiten: lange Bedeutungen brechen um, statt die Seite zu verbreitern */
.ap-semantics__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 14px;
}

.ap-semantics__table th,
.ap-semantics__table td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--ap-border);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.ap-semantics__table th:first-child {
	width: 30%;
}

.ap-semantics__value {
	font-weight: 700;
}

/* Kartensätze im Raum konfigurieren (TASK-045.03) */
/* Segment-Schalter (TASK-072): gemeinsamer Rahmen, aktives Segment gefüllt
   (Weiß auf --ap-primary-dark 7,49:1), nicht nur über den Rahmen markiert */
.ap-seg {
	display: inline-flex;
	max-width: 100%;
	margin-bottom: 12px;
	border: 1px solid var(--ap-input-border);
	border-radius: var(--ap-radius);
	overflow: hidden;
}

.ap-seg button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px;
	border: 0;
	background: var(--ap-card-bg);
	color: var(--ap-fg);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.ap-seg button + button {
	border-left: 1px solid var(--ap-input-border);
}

.ap-seg button:not([aria-pressed='true']):hover {
	background: var(--ap-hover);
}

.ap-seg button[aria-pressed='true'] {
	background: var(--ap-primary-dark);
	color: var(--ap-on-strong);
	font-weight: 600;
}

/* Fokusrahmen innen, damit overflow: hidden ihn nicht abschneidet */
.ap-seg button:focus-visible {
	outline-offset: -3px;
}

.ap-seg button[aria-pressed='true']:focus-visible {
	outline-color: var(--ap-on-strong);
}

.ap-card-set-config textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font: inherit;
}

.ap-card-set-config select {
	max-width: 100%;
	padding: 6px 8px;
	font: inherit;
}

/* Feste Spaltenbreiten: Eingaben schrumpfen, statt die Seite zu verbreitern */
.ap-cs-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin-bottom: 8px;
}

.ap-cs-table th {
	text-align: left;
	font-size: 13px;
	padding: 4px;
}

.ap-cs-table td {
	padding: 4px;
}

.ap-cs-table th:first-child {
	width: 120px;
}

.ap-cs-table th:last-child {
	width: 52px;
}

.ap-cs-table input {
	width: 100%;
	box-sizing: border-box;
}

/* Eingaben füllen die Spalte (ohne die 420-px-Grenze aus .ap-props, TASK-072) */
.ap-card-set-config .ap-cs-table input[type='text'] {
	max-width: none;
}

/* Papierkorb je Zeile (TASK-072): kompakter Icon-Button ohne Rahmen; steht
   nach .ap-btn, damit der Innenabstand gilt */
.ap-cs-remove {
	padding: 8px;
	border-color: transparent;
	color: var(--ap-muted);
}

.ap-cs-remove:hover,
.ap-cs-remove:focus-visible {
	color: var(--ap-danger);
	background: var(--ap-danger-bg);
}

.ap-cs-add-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.ap-cs-add-line .ap-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ap-cs-add-line .ap-icon {
	width: 18px;
	height: 18px;
}

/* Zähler „n von 20 Zeilen“ */
.ap-cs-count {
	font-size: 13px;
	color: var(--ap-muted);
}

.ap-rename {
	margin-bottom: 24px;
}

.ap-rename label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
}

.ap-rename input[type='text'] {
	margin-bottom: 12px;
}

.ap-vote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 32px;
	text-align: center;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--ap-radius-s);
	overflow-wrap: anywhere;
}

.ap-vote--empty {
	color: var(--ap-muted);
	background: transparent;
}

.ap-vote--hidden {
	background: var(--ap-hidden-bg);
	color: var(--ap-hidden-fg);
}

.ap-vote--mine {
	background: var(--ap-card-bg);
	color: var(--ap-primary-dark);
	border: 2px solid var(--ap-primary);
}

.ap-cardback,
.ap-slot {
	width: 20px;
	height: 28px;
	border-radius: var(--ap-radius-s);
}

.ap-cardback {
	border: 2px solid var(--ap-hidden-fg);
	background: repeating-linear-gradient(45deg, var(--ap-hidden-fg) 0 2px, var(--ap-card-bg) 2px 5px);
}

.ap-slot {
	border: 2px dashed var(--ap-input-border);
}

.ap-vote--shown {
	background: var(--ap-success-bg);
	color: var(--ap-success);
}

.ap-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.ap-card {
	width: 64px;
	height: 92px;
	border-radius: var(--ap-radius-card);
	border: 2px solid var(--ap-border);
	background: var(--ap-card-bg);
	color: var(--ap-fg);
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
}

.ap-card {
	overflow-wrap: anywhere;
}

.ap-card--long {
	font-size: 15px;
	overflow-wrap: anywhere;
}

.ap-original--long,
.ap-vote--long {
	font-size: 13px;
	max-width: 64px;
}

.ap-card--emoji,
.ap-original--emoji,
.ap-vote--emoji {
	font-size: 26px;
}

.ap-card--emoji.ap-card--long {
	font-size: 15px;
	line-height: 1;
}

.ap-vote--emoji.ap-vote--long,
.ap-original--emoji.ap-original--long {
	font-size: 13px;
	line-height: 1;
}

.ap-card:hover {
	border-color: var(--ap-primary);
}

.ap-card--selected {
	border-color: var(--ap-primary);
	background: var(--ap-primary);
	color: var(--ap-on-strong);
}

.ap-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.ap-actions .ap-btn {
	gap: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ap-actions__spacer {
	flex: 1 1 auto;
}

.ap-btn__label--short,
.ap-actions .ap-btn[hidden] {
	display: none;
}

.ap-panel {
	margin-bottom: 24px;
}

.ap-panel__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.ap-panel__head h2 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

.ap-panel__head > .ap-icon,
.ap-panel__close {
	flex-shrink: 0;
}

.ap-panel__close {
	background: transparent;
	border-color: transparent;
}

.ap-panel__close:hover {
	background: var(--ap-hover);
}

.ap-props {
	background: var(--ap-card-bg);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-card);
	padding: 20px;
}

.ap-props input[type='text'],
.ap-props input[type='password'] {
	width: 100%;
	max-width: 420px;
	padding: 8px 10px;
	border: 1px solid var(--ap-input-border);
	border-radius: var(--ap-radius-s);
	font-size: 14px;
}

.ap-muted {
	color: var(--ap-muted);
}

.ap-error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 6px 0 0;
	color: var(--ap-danger);
	font-size: 14px;
	text-align: left;
}

/* Feldfehler und Formularmeldungen (TASK-070): Icon vor dem Text; leer bzw. hidden = unsichtbar */
.ap-error:empty,
.ap-error[hidden] {
	display: none;
}

/* Dauerhafte Live-Region: leer weiterhin gerendert, ohne Leerabstand (TASK-088). */
#ap-create-error:empty {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	margin: 0;
	min-height: 0;
}

.ap-error .ap-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

.ap-error ul {
	margin: 0;
	padding-left: 18px;
}

.ap-card-box .ap-error {
	margin: 0 0 12px;
}

.ap-card-box .ap-btn + .ap-error {
	margin: 12px 0 0;
}

/* Fehlerliste der Kartensätze: Abstand zu „Speichern“ */
.ap-card-set-config .ap-error {
	margin: 8px 0 12px;
}

/* Feld mit Wrapper für Label, Eingabe und Feldfehler (Abstand wie ein Absatz) */
.ap-field {
	margin: 1em 0;
}

/* Raum-Adresse (TASK-092): Präfix der Basis-URL über dem Feld, Hinweistext darunter */
.ap-slug-prefix {
	display: block;
	margin: 2px 0 4px;
	font-size: 13px;
	color: var(--ap-muted);
	overflow-wrap: anywhere;
}

.ap-hint {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--ap-muted);
}

/* Feld mit Fehler: roter Rand zusätzlich zur Meldung (aria-invalid, TASK-070) */
.ap-shell input[aria-invalid='true'],
.ap-shell textarea[aria-invalid='true'] {
	border-color: var(--ap-danger);
}

/* Meldungen im Raum (Fehler bei Aktionen, Verbindungshinweis) mit Icon; leer = unsichtbar */
.ap-alert,
.ap-status {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 16px;
	padding: 10px 8px 10px 14px;
	border-radius: var(--ap-radius);
	font-size: 14px;
}

.ap-alert > .ap-icon,
.ap-status > .ap-icon {
	flex-shrink: 0;
	margin-top: 0;
}

.ap-alert__text {
	flex: 1;
	margin: 1px 0;
}

.ap-alert:empty,
.ap-status:empty {
	display: none;
}

.ap-alert {
	background: var(--ap-danger-bg);
	border: 1px solid var(--ap-danger-border);
	color: var(--ap-danger-fg);
}

.ap-alert--warning,
.ap-status {
	background: var(--ap-warning-bg);
	border: 1px solid var(--ap-warning-border);
	color: var(--ap-warning-fg);
}

/* Konflikt beim Bearbeiten: Icon links, Text und Buttons untereinander daneben */
.ap-conflict {
	margin-bottom: 16px;
}

.ap-alert__text p {
	margin: 0 0 8px;
}

.ap-alert__text p:last-child {
	margin-bottom: 0;
}

/* Schließen-Button der Meldung: X-Icon, 28 px (mobil 44 px, siehe pointer: coarse) */
.ap-alert__close {
	appearance: none;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: -4px 0;
	padding: 0;
	border: 0;
	border-radius: var(--ap-radius-s);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ap-alert__close .ap-icon {
	width: 18px;
	height: 18px;
}

/* Versionshinweis, Kaffee-Link und Autorenhinweis (siehe Agile_Poker_Rewrite::footer) */
.ap-footer {
	flex-shrink: 0;
	display: flex;
	flex-wrap: wrap;
	/* Der Kaffee-Emoji macht die Zeile des Spendenlinks höher: an der Grundlinie ausrichten */
	align-items: baseline;
	justify-content: center;
	padding: 16px;
	text-align: center;
	font-size: 12px;
	color: var(--ap-muted);
}

.ap-footer__donate,
.ap-footer__author {
	color: inherit;
}

.ap-footer__donate::before,
.ap-footer__author::before {
	content: "·";
	display: inline-block;
	margin: 0 8px;
	text-decoration: none;
}

/* Touch-Geräte: Trefferflächen mindestens 44 × 44 px (WCAG 2.5.5); Desktop mit Maus bleibt unverändert */
/* Checkbox mit Text (z. B. „Alle anderen abmelden“, TASK-052); das Label ist Teil der Trefferfläche */
.ap-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ap-check input[type='checkbox'] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
}

.ap-check label {
	align-self: stretch;
	display: flex;
	align-items: center;
}

@media (pointer: coarse) {
	.ap-check {
		min-height: 44px;
	}

	.ap-btn,
	.ap-alert__close {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* 44 px große Trefferfläche, ohne die Meldung höher zu machen */
	.ap-alert__close {
		margin: -10px -2px -10px 0;
	}

	.ap-card {
		min-height: 44px;
	}

	/* Segment-Schalter der Kartensätze (TASK-072) */
	.ap-seg button {
		min-height: 44px;
	}

	/* Durchgestrichener Wert als 44-px-Ziel, dazu die Legende statt des Tooltips (TASK-071) */
	.ap-original {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.ap-original-legend:not([hidden]) {
		display: block;
	}

	/* Menüeinträge (Raum-Menü, Sprachwahl) mobil 48 px hoch (TASK-065) */
	.ap-menu__item {
		min-height: 48px;
		font-size: 16px;
	}

	.ap-share input,
	.ap-card-box input[type='text'],
	.ap-card-box input[type='password'],
	.ap-props input[type='text'],
	.ap-props input[type='password'],
	.ap-props select {
		min-height: 44px;
	}

	/* Zwei benachbarte Links im Footer (TASK-080): je eigene Trefferfläche */
	.ap-footer {
		align-items: center;
	}

	.ap-footer__donate,
	.ap-footer__author {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* Schmale Bildschirme: weniger Innenabstand in Karten-Boxen; Version und Links im Footer untereinander, ohne Trennpunkt;
   Rückfrage-Dialog am unteren Rand (Daumenreichweite), Hauptaktion oben, Buttons in voller Breite */
@media (max-width: 480px) {
	.ap-participants--many {
		grid-template-columns: minmax(0, 1fr);
	}

	#ap-participants-toggle {
		display: inline-flex;
	}

	.ap-participants--collapsed .ap-participant--collapsed {
		display: none;
	}

	.ap-cards {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 8px;
	}

	.ap-card {
		width: auto;
		height: 80px;
		min-width: 0;
		overflow-wrap: anywhere;
		padding: 0 4px;
	}

	.ap-shell--center {
		align-items: flex-start;
		padding-top: 24px;
	}

	.ap-vote-progress {
		flex-basis: 100%;
	}

	.ap-panel {
		padding: 16px;
	}

	.ap-actions {
		position: sticky;
		bottom: 0;
		margin: 0 -16px;
		padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
		background: var(--ap-card-bg);
		border-top: 1px solid var(--ap-border);
		box-shadow: var(--ap-shadow-pop);
		z-index: 10;
		flex-wrap: nowrap;
	}

	.ap-actions .ap-btn--primary {
		flex: 1 1 auto;
		min-height: 52px;
		font-size: 16px;
	}

	.ap-actions .ap-btn--stack:not(.ap-btn--primary) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 3px;
		min-width: 80px;
		min-height: 52px;
		padding: 6px;
		font-size: 12px;
	}

	.ap-actions__spacer,
	.ap-btn__label--long {
		display: none;
	}

	.ap-btn__label--short {
		display: inline;
	}

	.ap-toast {
		--ap-toast-offset: 0;
		position: absolute;
		bottom: calc(100% + 12px);
		left: 16px;
		right: 16px;
		transform: none;
		width: auto;
		max-width: none;
	}

	.ap-dialog {
		margin: auto 0 0;
		max-width: 100%;
		padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.ap-dialog__actions {
		flex-direction: column-reverse;
	}

	.ap-dialog__actions .ap-btn {
		width: 100%;
		min-height: 48px;
		font-size: 16px;
	}

	.ap-card-box {
		padding: 24px 16px;
	}

	.ap-create .ap-card-box {
		margin-top: -14px;
	}

	/* Kartensätze (TASK-072): Segment in voller Breite, schmalere feste Spalten,
	   Zähler unter „Zeile hinzufügen“ */
	.ap-seg {
		display: flex;
	}

	.ap-seg button {
		flex: 1 1 0;
		padding: 8px;
	}

	.ap-cs-table th:first-child {
		width: 76px;
	}

	.ap-cs-table th:last-child {
		width: 48px;
	}

	.ap-cs-table td:last-child {
		padding-right: 0;
	}

	.ap-cs-count {
		display: block;
		flex-basis: 100%;
	}

	.ap-footer {
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}

	.ap-footer__donate::before,
	.ap-footer__author::before {
		content: none;
	}
}

/* Vollständige Aktionslabels auch bei 320 px: Icon über Text wie bei den Nebenaktionen. */
@media (max-width: 360px) {
	.ap-actions {
		gap: 6px;
	}

	.ap-actions .ap-btn--primary {
		min-width: 0;
		flex-direction: column;
		gap: 3px;
		padding: 6px;
		font-size: 12px;
	}
}

/* ---------- Bewegung (TASK-100) ---------- */

@keyframes ap-flip {
	from {
		transform: perspective(300px) rotateY(180deg);
	}

	to {
		transform: perspective(300px) rotateY(0deg);
	}
}

@keyframes ap-slot-in {
	from {
		opacity: 0;
		transform: perspective(300px) rotateY(-90deg);
	}

	to {
		opacity: 1;
		transform: perspective(300px) rotateY(0deg);
	}
}

@keyframes ap-pop {
	from {
		opacity: 0;
		transform: scale(0.6);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes ap-row-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ap-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes ap-rise-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Alle Bewegung nur hier: mit „Bewegung reduzieren“ erscheinen alle Zustände sofort (TASK-100). */
@media (prefers-reduced-motion: no-preference) {
	.ap-toast:not(:empty) {
		animation: ap-toast-in var(--ap-dur-med) var(--ap-ease-out);
	}

	/* Ohne Bewegung bleibt der Spinner ein ruhender Ring; der Text trägt die Aussage (TASK-074). */
	.ap-spinner {
		animation: ap-spin 0.8s linear infinite;
	}

	/* Karte markieren/demarkieren: anheben und Schatten einblenden; Farben kurz überblenden */
	.ap-card {
		position: relative;
		transition: transform var(--ap-dur-base) var(--ap-ease-out), background-color var(--ap-dur-fast) linear, border-color var(--ap-dur-fast) linear, color var(--ap-dur-fast) linear;
	}

	.ap-card::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: inherit;
		box-shadow: var(--ap-shadow-pop);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--ap-dur-base) var(--ap-ease-out);
	}

	.ap-card--selected {
		transform: translateY(-8px);
	}

	.ap-card--selected::after {
		opacity: 1;
	}

	.ap-card:active {
		transform: scale(0.97);
	}

	.ap-card--selected:active {
		transform: translateY(-8px) scale(0.97);
	}

	/* Aufdecken: Karte dreht vom Rücken zur Vorderseite (voller Flip, zwei Seiten) */
	.ap-vote[data-anim] {
		position: relative;
	}

	.ap-vote[data-anim='flip'] {
		transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		animation: ap-flip var(--ap-dur-slow) var(--ap-ease-flip) both;
	}

	.ap-vote[data-anim='flip'] > * {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.ap-vote[data-anim='flip']::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 2px solid var(--ap-hidden-fg);
		border-radius: inherit;
		background: repeating-linear-gradient(45deg, var(--ap-hidden-fg) 0 2px, var(--ap-card-bg) 2px 5px);
		transform: rotateY(180deg);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	/* Neue Runde: der leere Platz dreht kurz ein */
	.ap-vote[data-anim='reset'] {
		animation: ap-slot-in var(--ap-dur-med) var(--ap-ease-flip) both;
	}

	/* Eigene Stimme erscheint verdeckt */
	.ap-vote[data-anim='pop'] {
		animation: ap-pop var(--ap-dur-med) var(--ap-ease-out) both;
	}

	/* Staffelung: zehn Stufen à 40 ms, Gesamtdauer höchstens 660 ms */
	.ap-vote[data-st='0'][data-anim] {
		animation-delay: 0ms;
	}

	.ap-vote[data-st='1'][data-anim] {
		animation-delay: 40ms;
	}

	.ap-vote[data-st='2'][data-anim] {
		animation-delay: 80ms;
	}

	.ap-vote[data-st='3'][data-anim] {
		animation-delay: 120ms;
	}

	.ap-vote[data-st='4'][data-anim] {
		animation-delay: 160ms;
	}

	.ap-vote[data-st='5'][data-anim] {
		animation-delay: 200ms;
	}

	.ap-vote[data-st='6'][data-anim] {
		animation-delay: 240ms;
	}

	.ap-vote[data-st='7'][data-anim] {
		animation-delay: 280ms;
	}

	.ap-vote[data-st='8'][data-anim] {
		animation-delay: 320ms;
	}

	.ap-vote[data-st='9'][data-anim] {
		animation-delay: 360ms;
	}

	.ap-participant[data-anim='enter'] {
		animation: ap-row-in var(--ap-dur-med) var(--ap-ease-out) both;
	}

	/* Dialog, Menü und Bereiche blenden ein; Schließen ist sofort (kein Timer, kein Fokusrisiko) */
	.ap-dialog[open] {
		animation: ap-rise-in var(--ap-dur-med) var(--ap-ease-out);
	}

	.ap-dialog[open]::backdrop {
		animation: ap-fade-in var(--ap-dur-med) linear;
	}

	.ap-menu:not([hidden]) {
		animation: ap-rise-in var(--ap-dur-base) var(--ap-ease-out);
	}

	.ap-panel:not([hidden]) {
		animation: ap-rise-in var(--ap-dur-med) var(--ap-ease-out);
	}

	/* Fortschrittsanzeige „x von y“ blendet beim Einblenden des Elements ein (der Text selbst wechselt sofort) */
	.ap-vote-progress:not([hidden]) {
		animation: ap-fade-in var(--ap-dur-med) linear;
	}

	/* Schemawechsel: kurzer Farbübergang, nur nach Klick (common.js setzt die Klasse kurz), nie beim Laden */
	html.ap-scheme-anim,
	html.ap-scheme-anim *,
	html.ap-scheme-anim *::before,
	html.ap-scheme-anim *::after {
		transition: background-color var(--ap-dur-med) linear, color var(--ap-dur-med) linear, border-color var(--ap-dur-med) linear !important;
	}
}