.pap-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 3px;
	font: inherit;
	font-weight: normal;
	text-decoration: none;
	cursor: pointer;
}

.pap-button--primaer {
	border: 1px solid var(--pap-akzent);
	background: var(--pap-akzent);
	color: #fff;
}

.pap-button--primaer:focus,
.pap-button--primaer:focus-visible {
	border-color: var(--pap-akzent);
	background: var(--pap-akzent);
	color: #fff;
}

.pap-button--primaer:hover,
.pap-button--primaer:active {
	border-color: var(--pap-akzent-hover);
	background: var(--pap-akzent-hover);
	color: #fff;
}

.pap-button--akzent-petrol {
	border: 1px solid var(--pap-akzent-petrol);
	background: var(--pap-akzent-petrol);
	color: var(--pap-dunkel-text);
}

.pap-button--akzent-petrol:hover,
.pap-button--akzent-petrol:active {
	border-color: var(--pap-akzent-petrol);
	background: var(--pap-akzent-petrol-hover);
	color: var(--pap-dunkel-text);
}

.pap-button--akzent-petrol:focus,
.pap-button--akzent-petrol:focus-visible {
	border-color: var(--pap-akzent-petrol);
	background: var(--pap-akzent-petrol);
	color: var(--pap-dunkel-text);
}

.pap-button--kartenaktion {
	gap: 0.35rem;
	border: 1px solid var(--pap-dunkel-border);
	background: var(--pap-dunkel-flaeche-betont);
	color: var(--pap-dunkel-text);
}

.pap-button--kartenaktion span {
	color: var(--pap-akzent);
	font-weight: 700;
}

.pap-button--kartenaktion:hover,
.pap-button--kartenaktion:active {
	border-color: var(--pap-petrol);
	background: var(--pap-dunkel-flaeche);
	color: var(--pap-dunkel-text);
}

.pap-button--kartenaktion:focus,
.pap-button--kartenaktion:focus-visible {
	border-color: var(--pap-dunkel-border);
	background: var(--pap-dunkel-flaeche-betont);
	color: var(--pap-dunkel-text);
}

.pap-button--sekundaer {
	border: 1px solid;
	background: transparent;
	color: var(--contrast);
}

.pap-button--sekundaer:hover,
.pap-button--sekundaer:active {
	background: var(--pap-flaeche-betont);
	color: var(--contrast);
}

.pap-button--sekundaer:focus,
.pap-button--sekundaer:focus-visible {
	background: transparent;
	color: var(--contrast);
}

.pap-button--text,
.pap-button--destruktiv-text {
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

.pap-button--text { color: var(--pap-text-zart); }
.pap-button--text:focus,
.pap-button--text:focus-visible { background: transparent; color: var(--pap-text-zart); }
.pap-button--text:hover,
.pap-button--text:active { background: transparent; color: var(--contrast); }

.pap-button--destruktiv-text { gap: 0.35rem; color: var(--pap-fehlerfarbe); }
.pap-button--destruktiv-text:focus,
.pap-button--destruktiv-text:focus-visible { background: transparent; color: var(--pap-fehlerfarbe); }
.pap-button--destruktiv-text:hover,
.pap-button--destruktiv-text:active {
	background: transparent;
	color: color-mix(in srgb, var(--pap-fehlerfarbe) 78%, #000);
}

.pap-button--destruktiv {
	border: 1px solid var(--pap-fehlerfarbe);
	background: transparent;
	color: var(--pap-fehlerfarbe);
}

.pap-button--destruktiv:hover,
.pap-button--destruktiv:active {
	border-color: var(--pap-fehlerfarbe);
	background: color-mix(
		in srgb,
		var(--pap-fehlerfarbe) 12%,
		transparent
	);
	color: var(--pap-fehlerfarbe);
}

.pap-button--destruktiv:focus,
.pap-button--destruktiv:focus-visible {
	border-color: var(--pap-fehlerfarbe);
	background: transparent;
	color: var(--pap-fehlerfarbe);
}

.pap-button--auswahl {
	border: 1px solid var(--pap-border);
	background: transparent;
	color: var(--contrast);
}

.pap-button--auswahl:hover,
.pap-button--auswahl:active {
	border-color: var(--pap-border);
	background: var(--pap-flaeche-betont);
	color: var(--contrast);
}

.pap-button--auswahl:focus,
.pap-button--auswahl:focus-visible {
	border-color: var(--pap-border);
	background: transparent;
	color: var(--contrast);
}

.pap-button--auswahl[aria-pressed="true"],
.pap-button--auswahl[aria-pressed="true"]:focus,
.pap-button--auswahl[aria-pressed="true"]:focus-visible,
.pap-button--auswahl[aria-pressed="true"]:hover,
.pap-button--auswahl[aria-pressed="true"]:active {
	border-color: var(--pap-border);
	background: var(--pap-auswahl);
	color: var(--contrast);
}

.pap-button--icon {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pap-border);
	background: transparent;
	color: #000;
}

.pap-button--icon:hover,
.pap-button--icon:active {
	border-color: var(--pap-border);
	background: var(--pap-flaeche-betont);
	color: #000;
}

.pap-button--icon:focus,
.pap-button--icon:focus-visible {
	border-color: var(--pap-border);
	background: transparent;
	color: #000;
}

.pap-button--icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pap-button--schliessen {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pap-border);
	border-radius: 50%;
	background: transparent;
	color: currentColor;
}

.pap-button--schliessen:hover,
.pap-button--schliessen:active { background: var(--pap-flaeche-betont); color: currentColor; }

.pap-button--schliessen:focus,
.pap-button--schliessen:focus-visible { background: transparent; color: currentColor; }

.pap-button--schliessen svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.pap-button:focus {
	outline: none;
}

.pap-button:focus-visible {
	outline: 2px solid var(--pap-petrol);
	outline-offset: 2px;
}

.pap-button:disabled,
.pap-button[aria-disabled="true"],
.pap-button:disabled:hover,
.pap-button:disabled:active,
.pap-button:disabled:focus,
.pap-button:disabled:focus-visible,
.pap-button[aria-disabled="true"]:hover,
.pap-button[aria-disabled="true"]:active,
.pap-button[aria-disabled="true"]:focus,
.pap-button[aria-disabled="true"]:focus-visible {
	border: 1px solid var(--pap-border);
	background: var(--pap-flaeche-betont);
	color: var(--pap-text-zart);
	cursor: not-allowed;
}

.pap-button-kontext--dunkel .pap-button--sekundaer {
	border-color: var(--pap-dunkel-border);
	color: var(--pap-dunkel-text);
}

.pap-button-kontext--dunkel .pap-button--sekundaer:hover,
.pap-button-kontext--dunkel .pap-button--sekundaer:active {
	border-color: var(--pap-petrol);
	background: color-mix(
		in srgb,
		var(--pap-petrol) 18%,
		transparent
	);
	color: var(--pap-dunkel-text);
}

.pap-button-kontext--dunkel .pap-button--sekundaer:focus,
.pap-button-kontext--dunkel .pap-button--sekundaer:focus-visible {
	border-color: var(--pap-dunkel-border);
	background: transparent;
	color: var(--pap-dunkel-text);
}

.pap-button-kontext--dunkel .pap-button--text { color: var(--pap-dunkel-text-zart); }
.pap-button-kontext--dunkel .pap-button--text:focus,
.pap-button-kontext--dunkel .pap-button--text:focus-visible { background: transparent; color: var(--pap-dunkel-text-zart); }
.pap-button-kontext--dunkel .pap-button--text:hover,
.pap-button-kontext--dunkel .pap-button--text:active { background: transparent; color: var(--pap-dunkel-text); }

.pap-button-kontext--dunkel .pap-button--destruktiv-text,
.pap-button-kontext--dunkel .pap-button--destruktiv-text:focus,
.pap-button-kontext--dunkel .pap-button--destruktiv-text:focus-visible {
	background: transparent;
	color: var(--pap-destruktiv-text);
}

.pap-button-kontext--dunkel .pap-button--destruktiv-text:hover,
.pap-button-kontext--dunkel .pap-button--destruktiv-text:active {
	background: transparent;
	color: color-mix(in srgb, var(--pap-destruktiv-text) 78%, #fff);
}

.pap-button-kontext--dunkel
.pap-button--auswahl:not([aria-pressed="true"]) {
	border-color: #797979;
	color: var(--pap-flaeche);
}

.pap-button-kontext--dunkel
.pap-button--auswahl:not([aria-pressed="true"]):hover,
.pap-button-kontext--dunkel
.pap-button--auswahl:not([aria-pressed="true"]):active {
	border-color: #797979;
	background: color-mix(
		in srgb,
		var(--pap-flaeche) 12%,
		transparent
	);
	color: var(--pap-flaeche);
}

.pap-button-kontext--dunkel
.pap-button--auswahl:not([aria-pressed="true"]):focus,
.pap-button-kontext--dunkel
.pap-button--auswahl:not([aria-pressed="true"]):focus-visible {
	border-color: #797979;
	background: transparent;
	color: var(--pap-flaeche);
}

.pap-button-kontext--dunkel .pap-button--auswahl[aria-pressed="true"],
.pap-button-kontext--dunkel .pap-button--auswahl[aria-pressed="true"]:hover,
.pap-button-kontext--dunkel .pap-button--auswahl[aria-pressed="true"]:active,
.pap-button-kontext--dunkel .pap-button--auswahl[aria-pressed="true"]:focus,
.pap-button-kontext--dunkel .pap-button--auswahl[aria-pressed="true"]:focus-visible {
	border-color: var(--pap-dunkel-border);
	background: var(--pap-dunkel-flaeche);
	color: var(--pap-dunkel-text);
}

.pap-button-kontext--dunkel .pap-button--icon {
	border-color: var(--pap-dunkel-border);
	color: var(--pap-dunkel-text);
}

.pap-button-kontext--dunkel .pap-button--icon:hover,
.pap-button-kontext--dunkel .pap-button--icon:active {
	border-color: var(--pap-petrol);
	background: color-mix(
		in srgb,
		var(--pap-petrol) 18%,
		transparent
	);
	color: var(--pap-dunkel-text);
}

.pap-button-kontext--dunkel .pap-button--icon:focus,
.pap-button-kontext--dunkel .pap-button--icon:focus-visible {
	border-color: var(--pap-dunkel-border);
	background: transparent;
	color: var(--pap-dunkel-text);
}

.pap-button-kontext--dunkel .pap-button--schliessen {
	border-color: var(--pap-dunkel-border);
	color: var(--pap-dunkel-text);
}

.pap-button-kontext--dunkel .pap-button--schliessen:hover,
.pap-button-kontext--dunkel .pap-button--schliessen:active {
	border-color: var(--pap-petrol);
	background: color-mix(in srgb, var(--pap-petrol) 18%, transparent);
	color: var(--pap-dunkel-text);
}

.pap-button-kontext--dunkel .pap-button--schliessen:focus,
.pap-button-kontext--dunkel .pap-button--schliessen:focus-visible {
	border-color: var(--pap-dunkel-border);
	background: transparent;
	color: var(--pap-dunkel-text);
}

.pap-button-kontext--dunkel .pap-button:disabled,
.pap-button-kontext--dunkel .pap-button[aria-disabled="true"] {
	border-color: var(--pap-dunkel-border);
	background: var(--pap-dunkel-flaeche-betont);
	color: var(--pap-dunkel-text-zart);
}
