@import url("tokens.css");

@font-face {
	font-family: "Heebo";
	src: url("fonts/heebo-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Abril Fatface";
	src: url("fonts/abril-fatface-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

:root {
	--color-red: #b3361a;
	--color-red-tint: color-mix(in oklab, var(--color-red) 14%, var(--color-white));
}

/* Rollen, Hell. Flächen setzen dieselben Rollen neu. */
:root,
[data-theme="beige"] {
	--background: var(--color-cream);
	--surface: var(--color-white);
	--surface-sunk: color-mix(in oklab, var(--color-grey), transparent var(--alpha-subtle));
	--text: var(--color-grey);
	--muted: color-mix(in oklab, var(--color-grey), transparent var(--alpha-strong));
	--line: color-mix(in oklab, var(--color-grey), transparent var(--alpha-subtle));
	--button-rand: color-mix(in oklab, var(--color-green), transparent var(--alpha-subtle));
	--accent: var(--color-orange);
	--action: var(--color-orange);
	--action-text: var(--color-white);
	--focus: var(--color-green);
	--heading: linear-gradient(60deg, var(--color-grey-very-dark) 0%, var(--color-green) 120%);
	--tag-bg: color-mix(in oklab, var(--color-green), transparent var(--alpha-subtle));
	--tag-text: var(--color-green-dark);
	--code-bg: color-mix(in oklab, var(--color-grey), transparent var(--alpha-subtle));
	--success: var(--color-green-dark);
	--success-tint: var(--color-success-tint);
	--warning: var(--color-orange-very-dark);
	--warning-tint: var(--color-warning-tint);
	--danger: var(--color-red);
	--danger-tint: var(--color-red-tint);
	--info: var(--color-green-dark);
	--info-tint: var(--color-info-tint);
}

[data-theme="white"] {
	--background: var(--color-white);
	--surface: var(--color-cream);
}

[data-theme="green"] {
	--background: var(--color-green);
	--surface: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--surface-sunk: color-mix(in oklab, var(--color-black), transparent var(--alpha-moderate));
	--text: var(--color-white);
	--muted: color-mix(in oklab, var(--color-white), transparent var(--alpha-strong));
	--line: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--button-rand: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--focus: var(--color-white);
	--heading: linear-gradient(60deg, var(--color-cream) 0%, var(--color-white) 120%);
	--tag-bg: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--tag-text: var(--color-white);
	--code-bg: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--success: color-mix(in oklab, var(--color-green-very-bright) 40%, var(--color-white));
	--success-tint: color-mix(in oklab, var(--color-green-very-bright) 15%, color-mix(in oklab, var(--color-black) 45%, var(--background)));
	--warning: var(--color-orange-very-bright);
	--warning-tint: color-mix(in oklab, var(--color-orange-bright) 15%, color-mix(in oklab, var(--color-black) 45%, var(--background)));
	--danger: color-mix(in oklab, var(--color-red) 30%, var(--color-white));
	--danger-tint: color-mix(in oklab, var(--color-red) 15%, color-mix(in oklab, var(--color-black) 45%, var(--background)));
	--info: var(--color-cream);
	--info-tint: color-mix(in oklab, var(--color-cream) 15%, color-mix(in oklab, var(--color-black) 45%, var(--background)));
}

[data-theme="dark"] {
	--background: var(--color-green-very-dark);
	--surface: color-mix(in oklab, var(--color-white) 10%, var(--color-green-very-dark));
	--surface-sunk: color-mix(in oklab, var(--color-black), transparent var(--alpha-moderate));
	--text: var(--color-white);
	--muted: color-mix(in oklab, var(--color-white), transparent var(--alpha-strong));
	--line: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--button-rand: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--focus: var(--color-white);
	--heading: linear-gradient(60deg, var(--color-cream) 0%, var(--color-white) 120%);
	--tag-bg: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--tag-text: var(--color-white);
	--code-bg: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--success: color-mix(in oklab, var(--color-green-very-bright) 40%, var(--color-white));
	--success-tint: color-mix(in oklab, var(--color-green) 55%, var(--background));
	--warning: var(--color-orange-very-bright);
	--warning-tint: color-mix(in oklab, var(--color-orange-bright) 22%, var(--background));
	--danger: color-mix(in oklab, var(--color-red) 30%, var(--color-white));
	--danger-tint: color-mix(in oklab, var(--color-red) 30%, var(--background));
	--info: var(--color-cream);
	--info-tint: color-mix(in oklab, var(--color-cream) 18%, var(--background));
}

/* Dunkler Seitenmodus: beige und weisse Flächen wechseln mit, grün und dunkel bleiben. */
@media (prefers-color-scheme: dark) {
	:root:not([data-modus="hell"]),
	:root:not([data-modus="hell"]) [data-theme="beige"],
	:root:not([data-modus="hell"]) [data-theme="white"] {
		--background: var(--color-black);
		--surface: color-mix(in oklab, var(--color-white) 8%, var(--color-black));
		--surface-sunk: color-mix(in oklab, var(--color-black), transparent var(--alpha-moderate));
		--text: var(--color-white);
		--muted: color-mix(in oklab, var(--color-white), transparent var(--alpha-strong));
		--line: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
		--button-rand: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
		--focus: var(--color-white);
		--heading: linear-gradient(60deg, var(--color-cream) 0%, var(--color-white) 120%);
		--tag-bg: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
		--tag-text: var(--color-white);
		--code-bg: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
		--success: color-mix(in oklab, var(--color-green-very-bright) 40%, var(--color-white));
		--success-tint: color-mix(in oklab, var(--color-green) 55%, var(--background));
		--warning: var(--color-orange-very-bright);
		--warning-tint: color-mix(in oklab, var(--color-orange-bright) 22%, var(--background));
		--danger: color-mix(in oklab, var(--color-red) 30%, var(--color-white));
		--danger-tint: color-mix(in oklab, var(--color-red) 30%, var(--background));
		--info: var(--color-cream);
		--info-tint: color-mix(in oklab, var(--color-cream) 18%, var(--background));
	}
}

:root[data-modus="dunkel"],
:root[data-modus="dunkel"] [data-theme="beige"],
:root[data-modus="dunkel"] [data-theme="white"] {
	--background: var(--color-black);
	--surface: color-mix(in oklab, var(--color-white) 8%, var(--color-black));
	--surface-sunk: color-mix(in oklab, var(--color-black), transparent var(--alpha-moderate));
	--text: var(--color-white);
	--muted: color-mix(in oklab, var(--color-white), transparent var(--alpha-strong));
	--line: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--button-rand: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--focus: var(--color-white);
	--heading: linear-gradient(60deg, var(--color-cream) 0%, var(--color-white) 120%);
	--tag-bg: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--tag-text: var(--color-white);
	--code-bg: color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle));
	--success: color-mix(in oklab, var(--color-green-very-bright) 40%, var(--color-white));
	--success-tint: color-mix(in oklab, var(--color-green) 55%, var(--background));
	--warning: var(--color-orange-very-bright);
	--warning-tint: color-mix(in oklab, var(--color-orange-bright) 22%, var(--background));
	--danger: color-mix(in oklab, var(--color-red) 30%, var(--color-white));
	--danger-tint: color-mix(in oklab, var(--color-red) 30%, var(--background));
	--info: var(--color-cream);
	--info-tint: color-mix(in oklab, var(--color-cream) 18%, var(--background));
}

@media (prefers-color-scheme: dark) {
	:root:not([data-modus="hell"]) [data-theme="beige"],
	:root:not([data-modus="hell"]) [data-theme="white"] {
		--background: color-mix(in oklab, var(--color-white) 8%, var(--color-black));
		--surface: color-mix(in oklab, var(--color-white) 14%, var(--color-black));
	}
}

:root[data-modus="dunkel"] [data-theme="beige"],
:root[data-modus="dunkel"] [data-theme="white"] {
	--background: color-mix(in oklab, var(--color-white) 8%, var(--color-black));
	--surface: color-mix(in oklab, var(--color-white) 14%, var(--color-black));
}

:root[data-modus="hell"] {
	color-scheme: light;
}

:root[data-modus="dunkel"] {
	color-scheme: dark;
}

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

body {
	margin: 0;
	background-color: var(--background);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--font-weight-light);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

[data-theme] {
	background-color: var(--background);
	color: var(--text);
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

a {
	color: inherit;
	text-decoration-color: var(--accent);
	text-underline-offset: 0.2em;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* Seitenrahmen und Kopf */

.seite {
	max-width: 64rem;
	margin-inline: auto;
	padding: var(--space-2) max(1rem, var(--container-px)) var(--space-4);
}

.seitenkopf {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin-bottom: var(--space-2);
}

.seitenkopf__logo {
	display: block;
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0;
}

.seitenkopf__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-half);
	min-width: 0;
}

@media (width <= 480px) {
	.seitenkopf__logo {
		width: 3rem;
		height: 3rem;
	}
}

/* Eyebrow */

.tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	max-width: 100%;
	padding: 0 0.75em;
	border-radius: var(--radius-full);
	background: var(--tag-bg);
	color: var(--tag-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-light);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
}

.tag__dot {
	flex: none;
	width: 0.6em;
	height: 0.6em;
	border-radius: var(--radius-full);
	background: var(--color-orange);
}

.tag--eyebrow {
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
}

.tag--eyebrow strong {
	font-weight: inherit;
}

@media (width <= 768px) {
	.tag {
		font-size: var(--text-xs);
	}

	.tag--eyebrow {
		font-size: calc(var(--font-size-base) * 0.75);
	}
}

/* Titel */

.heading__title {
	margin: 0;
	background: var(--heading);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: 0.1em;
	font-family: var(--font-title);
	font-size: var(--text-4xl);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-display);
}

.heading__title strong {
	font-weight: inherit;
	font-style: normal;
	background-image: var(--heading), linear-gradient(to right, var(--color-orange) 0%, transparent 100%);
	background-repeat: no-repeat;
	background-position: 0 0, 0 calc(100% - 0.15em);
	background-size: 100% 100%, 100% 0.3em;
	-webkit-background-clip: text, padding-box;
	background-clip: text, padding-box;
	padding-inline: 0.15em;
	margin-inline: -0.075em;
}

.heading__title--sub {
	font-size: var(--text-2xl);
}

@media (width <= 768px) {
	.heading__title {
		font-size: var(--text-3xl);
	}

	.heading__title--sub {
		font-size: var(--text-xl);
	}
}

/* Flächen und Bausteine */

.flaeche {
	margin-block: var(--space-2);
	padding: var(--space-1-5) var(--space-1);
	border-radius: var(--radius-xl);
}

.flaeche > :first-child {
	margin-top: 0;
}

.flaeche > :last-child {
	margin-bottom: 0;
}

.karte {
	padding: var(--space-1);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	color: var(--text);
}

.karte > :first-child {
	margin-top: 0;
}

.karte > :last-child {
	margin-bottom: 0;
}

.karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-1);
}

.chip {
	display: inline-block;
	padding: 0 0.75em;
	border-radius: var(--radius-full);
	background: var(--info-tint);
	color: var(--info);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.chip--success {
	background: var(--success-tint);
	color: var(--success);
}

.chip--warning {
	background: var(--warning-tint);
	color: var(--warning);
}

.chip--danger {
	background: var(--danger-tint);
	color: var(--danger);
}

.hinweis {
	padding: var(--space-1);
	border-radius: var(--radius-md);
	background: var(--info-tint);
	color: var(--text);
}

.hinweis--success {
	background: var(--success-tint);
}

.hinweis--warning {
	background: var(--warning-tint);
}

.hinweis--danger {
	background: var(--danger-tint);
}

.hinweis > :first-child {
	margin-top: 0;
}

.hinweis > :last-child {
	margin-bottom: 0;
}

.liste {
	margin: 0;
	padding-left: 1.25em;
}

.liste li + li {
	margin-top: 0.4em;
}

.liste li::marker {
	color: var(--accent);
}

.tabelle {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
}

.tabelle table {
	width: 100%;
	min-width: max-content;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.tabelle th,
.tabelle td {
	padding: var(--space-half) var(--space-1);
	text-align: left;
	vertical-align: top;
}

.tabelle th {
	background: var(--surface-sunk);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.tabelle tr + tr > * {
	border-top: 1px solid var(--line);
}

.code {
	max-width: 100%;
	margin: 0;
	padding: var(--space-1);
	overflow-x: auto;
	border-radius: var(--radius-md);
	background: var(--code-bg);
	color: var(--text);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: 1.5;
	white-space: pre;
	overflow-wrap: normal;
}

p code,
li code,
td code {
	padding: 0.1em 0.4em;
	border-radius: var(--radius-xs);
	background: var(--code-bg);
	font-family: var(--font-mono);
	font-size: 0.9em;
}

.kopierblock {
	position: relative;
}

.kopierblock > .code {
	padding-right: calc(var(--space-1) + 2.5rem);
}

.kopieren {
	display: inline-grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--muted);
	vertical-align: middle;
	cursor: pointer;
	transition:
		color var(--transition-fast),
		border-color var(--transition-fast);
}

.kopieren:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.kopieren.is-kopiert {
	border-color: var(--success);
	color: var(--success);
}

.kopieren svg {
	inline-size: 1rem;
	block-size: 1rem;
}

.kopierblock > .kopieren {
	position: absolute;
	top: var(--space-half);
	right: var(--space-half);
}

.kopieren--inline {
	margin-inline-start: 0.35em;
	inline-size: 1.75rem;
	block-size: 1.75rem;
}

.kopieren__status {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.tag + .heading__title {
	margin-top: var(--space-half);
}

.seite > .heading__title--sub {
	margin-top: var(--space-2);
	margin-bottom: var(--space-1);
}

.flaeche > .heading__title--sub {
	margin-bottom: var(--space-half);
}

.seite > .flaeche:first-of-type {
	margin-top: 0;
}

/* Buttons und Felder */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 44px;
	padding: 0 1.25em;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--transition-normal),
		color var(--transition-normal),
		border-color var(--transition-normal);
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

.btn--ruhig {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.btn--ruhig:hover:not(:disabled) {
	text-decoration-color: currentcolor;
}

.feld {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 0.6em 1em;
	border: 1px solid;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--font-weight-light);
	line-height: 1.4;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.feld:focus {
	outline: none;
}

textarea.feld {
	min-height: 7rem;
	resize: vertical;
}

select.feld {
	appearance: none;
	padding-right: 2.5em;
	background-image:
		linear-gradient(45deg, transparent 50%, currentcolor 50%),
		linear-gradient(135deg, currentcolor 50%, transparent 50%);
	background-position:
		calc(100% - 1.3em) 50%,
		calc(100% - 0.9em) 50%;
	background-size: 0.4em 0.4em;
	background-repeat: no-repeat;
}

.option {
	display: flex;
	align-items: center;
	gap: 0.75em;
	min-height: 44px;
	padding: 0.5em 1em;
	border: 1px solid;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast);
}

.option input {
	flex: none;
	width: 1.2em;
	height: 1.2em;
	margin: 0;
	accent-color: var(--color-orange);
}

.feldgruppe {
	display: grid;
	gap: var(--space-half);
}

.feldgruppe > label {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
}

.zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-half);
}

.feld::placeholder {
	color: color-mix(in oklab, var(--text) 62%, var(--background));
	opacity: 1;
}

.karte + .zeile,
.zeile + .feld {
	margin-top: var(--space-1);
}

/* komponenten:start — erzeugt aus komponenten.mjs, nicht von Hand ändern */

.btn--primary {
	background-color: var(--color-orange);
	color: var(--color-white);
	border-color: var(--color-orange);
}

.btn--primary:hover:not(:disabled) {
	background-color: var(--color-white);
	color: var(--color-orange);
	border-color: var(--color-orange);
}

.btn--secondary {
	background-color: var(--color-grey);
	color: var(--color-white);
	border-color: var(--button-rand);
}

.btn--secondary:hover:not(:disabled) {
	background-color: var(--color-white);
	color: var(--color-grey);
	border-color: var(--button-rand);
}

.feld {
	background-color: color-mix(in oklab, var(--text) 5%, var(--surface));
	color: var(--text);
	border-color: color-mix(in oklab, var(--text) 58%, var(--background));
}

.feld:hover:not(:disabled) {
	background-color: color-mix(in oklab, var(--text) 5%, var(--surface));
	color: var(--text);
	border-color: color-mix(in oklab, var(--text) 80%, var(--background));
}

.feld:focus {
	background-color: color-mix(in oklab, var(--text) 5%, var(--surface));
	color: var(--text);
	border-color: var(--focus);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 30%, transparent);
}

.feld:disabled {
	background-color: color-mix(in oklab, var(--text) 3%, var(--surface));
	color: color-mix(in oklab, var(--text) 72%, var(--surface));
	border-color: color-mix(in oklab, var(--text) 20%, var(--background));
}

.option {
	background-color: var(--surface);
	color: var(--text);
	border-color: var(--line);
}

.option:hover {
	background-color: color-mix(in oklab, var(--text) 6%, var(--surface));
	color: var(--text);
	border-color: color-mix(in oklab, var(--text) 58%, var(--background));
}

.option:has(:checked) {
	background-color: color-mix(in oklab, var(--accent) 12%, var(--surface));
	color: var(--text);
	border-color: var(--accent);
}

.option:has(:focus-visible) {
	background-color: color-mix(in oklab, var(--accent) 12%, var(--surface));
	color: var(--text);
	border-color: var(--focus);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 30%, transparent);
}

/* komponenten:ende */